)
img(src="/images/icons/draw.svg")
button.tooltip(
- v-if="!!game.mycolor"
+ v-show="!!game.mycolor"
@click="abortGame()"
:aria-label="st.tr['Abort']"
)
img(src="/images/icons/abort.svg")
button.tooltip(
- v-if="!!game.mycolor"
+ v-show="!!game.mycolor"
@click="resign()"
:aria-label="st.tr['Resign']"
)
.addEventListener("click", processModalClick);
}
);
- if ("ontouchstart" in window) {
- // Disable tooltips on smartphones:
- document.querySelectorAll("#aboveBoard .tooltip").forEach(elt => {
- elt.classList.remove("tooltip");
- });
- }
},
beforeDestroy: function() {
this.cleanBeforeDestroy();
GameStorage.update(this.gameRef, { drawOffer: "" });
}
}
- this.$refs["basegame"].play(
- movePlus.move, "received", null, true);
+ this.$refs["basegame"].play(movePlus.move, "received");
this.game.clocks[moveColIdx] = movePlus.clock;
this.processMove(
movePlus.move,
this.$router.push("/game/" + gameInfo.id);
} else {
this.rematchId = gameInfo.id;
+ document.getElementById("modalRules").checked = false;
+ document.getElementById("modalScore").checked = false;
document.getElementById("modalRematch").checked = true;
}
break;
this.game.clocks[oppIdx] = data.clock;
if (data.movesCount > L) {
// Just got last move from him
- this.$refs["basegame"].play(data.lastMove, "received", null, true);
+ this.$refs["basegame"].play(data.lastMove, "received");
this.processMove(data.lastMove);
} else {
if (!!this.clockUpdate) clearInterval(this.clockUpdate);
},
game
);
+ if ("ontouchstart" in window) {
+ // TODO: I don't like this timeout, but $nextTick() fails,
+ // and in mounted() hook that fails too.
+ setTimeout(
+ () => {
+ // Disable tooltips on smartphones:
+ document.querySelectorAll("#aboveBoard .tooltip").forEach(elt => {
+ elt.classList.remove("tooltip");
+ });
+ },
+ 750
+ );
+ }
this.$refs["basegame"].re_setVariables(this.game);
if (!this.gameIsLoading) {
// Initial loading:
await import("@/variants/" + game.vname + ".js")
.then((vModule) => {
window.V = vModule[game.vname + "Rules"];
- // (AJAX) Request to get rules content (plain text, HTML)
- this.rulesContent =
- require(
- "raw-loader!@/translations/rules/" +
- game.vname + "/" +
- this.st.lang + ".pug"
- )
- // Next two lines fix a weird issue after last update (2019-11)
- .replace(/\\n/g, " ")
- .replace(/\\"/g, '"')
- .replace('module.exports = "', "")
- .replace(/"$/, "")
- .replace(/(fen:)([^:]*):/g, replaceByDiag);
this.loadGame(game, callback);
});
+ // (AJAX) Request to get rules content (plain text, HTML)
+ this.rulesContent =
+ require(
+ "raw-loader!@/translations/rules/" +
+ game.vname + "/" +
+ this.st.lang + ".pug"
+ )
+ // Next two lines fix a weird issue after last update (2019-11)
+ .replace(/\\n/g, " ")
+ .replace(/\\"/g, '"')
+ .replace('module.exports = "', "")
+ .replace(/"$/, "")
+ .replace(/(fen:)([^:]*):/g, replaceByDiag);
},
// 3 cases for loading a game:
// - from indexedDB (running or completed live game I play)
// In corr games, callback to change page only after score is set:
gameOver: function(score, scoreMsg, callback) {
this.game.score = score;
+ if ("ontouchstart" in window) {
+ this.$nextTick(() => {
+ // Disable tooltips on smartphones
+ // (might be required for rematch button at least):
+ document.querySelectorAll("#aboveBoard .tooltip").forEach(elt => {
+ elt.classList.remove("tooltip");
+ });
+ });
+ }
if (!scoreMsg) scoreMsg = getScoreMessage(score);
this.game.scoreMsg = scoreMsg;
+ document.getElementById("modalRules").checked = false;
// Display result in a un-missable way:
document.getElementById("modalScore").checked = true;
this.$set(this.game, "scoreMsg", scoreMsg);
<style lang="sass" scoped>
#scoreDiv > .card, #rematchDiv > .card
- padding: 15px 0
+ padding: 10px 0
max-width: 430px
#rulesDiv > .card
padding: 5px 0
- max-width: 75%
+ max-width: 50%
max-height: 100%
+ @media screen and (max-width: 1500px)
+ max-width: 67%
@media screen and (max-width: 1024px)
max-width: 85%
@media screen and (max-width: 767px)
max-width: 100%
p.score-section
+ margin: 0
font-size: 1.3em
span.score
font-weight: bold
</style>
<style lang="sass">
-// TODO: next is duplicated from Rules/. Merge ? How ? ...
-
-figure.diagram-container
- margin: 15px 0 15px 0
- text-align: center
- width: 100%
- display: block
- .diagram
- display: block
- width: 50%
- min-width: 240px
- margin-left: auto
- margin-right: auto
- .diag12
- float: left
- width: 40%
- margin-left: calc(10% - 20px)
- margin-right: 40px
- @media screen and (max-width: 630px)
- float: none
- margin: 0 auto 10px auto
- .diag22
- float: left
- width: 40%
- margin-right: calc(10% - 20px)
- @media screen and (max-width: 630px)
- float: none
- margin: 0 auto
- figcaption
- display: block
- clear: both
- padding-top: 5px
- font-size: 0.8em
-
-p.boxed
- background-color: #FFCC66
- padding: 5px
-
-.bigfont
- font-size: 1.2em
-
-.bold
- font-weight: bold
-
-.stageDelimiter
- color: purple
-
-// To show (new) pieces, and/or there values...
-figure.showPieces > img
- width: 50px
-
-figure.showPieces > figcaption
- color: #6C6C6C
-
-.section-title
- padding: 0
-
-.section-title > h4
- padding: 5px
-
-ol, ul:not(.browser-default)
- padding-left: 20px
-
-ul:not(.browser-default)
- margin-top: 5px
-
-ul:not(.browser-default) > li
- list-style-type: disc
-
-table
- margin: 15px auto
-
-.italic
- font-style: italic
-
-img.img-center
- display: block
- margin: 0 auto 15px auto
+@import "@/styles/_rules.sass"
+@import "@/styles/_board_squares_img.sass"
</style>
projects / vchess.git / blobdiff