projects
/
vchess.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Some changes to the logic in Rules.vue: weird behavior, TODO
[vchess.git]
/
client
/
src
/
views
/
Rules.vue
diff --git
a/client/src/views/Rules.vue
b/client/src/views/Rules.vue
index
f626cc9
..
c77294f
100644
(file)
--- a/
client/src/views/Rules.vue
+++ b/
client/src/views/Rules.vue
@@
-2,16
+2,17
@@
.row
.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
.button-group
.row
.col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
.button-group
- button(@click="
display='rules'
") Read the rules
+ button(@click="
clickReadRules
") Read the rules
button(v-show="!gameInProgress" @click="() => startGame('auto')")
| Observe a sample game
button(v-show="!gameInProgress" @click="() => startGame('versus')")
| Beat the computer!
button(v-show="!gameInProgress" @click="() => startGame('auto')")
| Observe a sample game
button(v-show="!gameInProgress" @click="() => startGame('versus')")
| Beat the computer!
- button(v-show="gameInProgress" @click="
stopGame
")
+ button(v-show="gameInProgress" @click="
() => stopGame()
")
| Stop game
.section-content(v-show="display=='rules'" v-html="content")
ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
| Stop game
.section-content(v-show="display=='rules'" v-html="content")
ComputerGame(v-show="display=='computer'" :game-info="gameInfo"
- @computer-think="gameInProgress=false" @game-over="stopGame")
+ @computer-think="gameInProgress=false" @game-over="stopGame"
+ @game-stopped="gameStopped")
</template>
<script>
</template>
<script>
@@
-35,7
+36,7
@@
export default {
vname: "_unknown",
mode: "versus",
fen: "",
vname: "_unknown",
mode: "versus",
fen: "",
-
userStop: false
,
+
score: "*"
,
}
};
},
}
};
},
@@
-49,6
+50,12
@@
export default {
this.tryChangeVariant(this.$route.params["vname"]);
},
methods: {
this.tryChangeVariant(this.$route.params["vname"]);
},
methods: {
+ clickReadRules: function() {
+ if (this.display != "rules")
+ this.display = "rules";
+ else if (this.gameInProgress)
+ this.display = "computer";
+ },
parseFen(fen) {
const fenParts = fen.split(" ");
return {
parseFen(fen) {
const fenParts = fen.split(" ");
return {
@@
-83,14
+90,18
@@
export default {
this.gameInProgress = true;
this.display = "computer";
this.gameInfo.mode = mode;
this.gameInProgress = true;
this.display = "computer";
this.gameInfo.mode = mode;
- this.gameInfo.
userStop = false
;
+ this.gameInfo.
score = "*"
;
this.gameInfo.fen = V.GenRandInitFen();
},
this.gameInfo.fen = V.GenRandInitFen();
},
- stopGame: function() {
- this.gameInProgress = false;
- this.gameInfo.
userStop = true
;
+ // user is willing to stop the game:
+ stopGame: function(score) {
+ this.gameInfo.
score = score || "?"
;
this.gameInfo.mode = "analyze";
},
this.gameInfo.mode = "analyze";
},
+ // The game is effectively stopped:
+ gameStopped: function() {
+ this.gameInProgress = false;
+ },
},
};
</script>
},
};
</script>
@@
-132,34
+143,34
@@
figure.diagram-container
padding-top: 5px
font-size: 0.8em
padding-top: 5px
font-size: 0.8em
-
p.boxed
-
background-color: #FFCC66
-
padding: 5px
+p.boxed
+ background-color: #FFCC66
+ padding: 5px
-
.stageDelimiter
-
color: purple
+.stageDelimiter
+ color: purple
-
// To show (new) pieces, and/or there values...
-
figure.showPieces > img
-
width: 50px
+// To show (new) pieces, and/or there values...
+figure.showPieces > img
+ width: 50px
-
figure.showPieces > figcaption
-
color: #6C6C6C
+figure.showPieces > figcaption
+ color: #6C6C6C
-
.section-title
-
padding: 0
+.section-title
+ padding: 0
-
.section-title > h4
-
padding: 5px
+.section-title > h4
+ padding: 5px
-
ol, ul:not(.browser-default)
-
padding-left: 20px
+ol, ul:not(.browser-default)
+ padding-left: 20px
-
ul:not(.browser-default)
-
margin-top: 5px
+ul:not(.browser-default)
+ margin-top: 5px
-
ul:not(.browser-default) > li
-
list-style-type: disc
+ul:not(.browser-default) > li
+ list-style-type: disc
.light-square-diag
background-color: #e5e5ca
.light-square-diag
background-color: #e5e5ca