<template lang="pug">
-div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys")
+div#baseGame(tabindex=-1 @click="() => focusBg()"
+ @keydown="handleKeys" @wheel="handleScroll")
input#modalEog.modal(type="checkbox")
- div(role="dialog" aria-labelledby="eogMessage")
+ div(role="dialog" data-checkbox="modalEog" aria-labelledby="eogMessage")
.card.smallpad.small-modal.text-center
label.modal-close(for="modalEog")
h3#eogMessage.section {{ endgameMessage }}
document.getElementById("boardContainer").style.width = boardSize + "px";
let gameContainer = document.getElementById("gameContainer");
gameContainer.style.width = (boardSize + movesWidth) + "px";
-
-
-
-
-
- // TODO: something here........... gameContainer.width increases if from small to larger screen
- window.onResize = (e) => {
- console.log(e);
- //if (window.innerWidth >= 768)
- };
-
-
-
-
},
methods: {
focusBg: function() {
break;
}
},
+ handleScroll: function(e) {
+ if (e.deltaY < 0)
+ this.undo();
+ else if (e.deltaY > 0)
+ this.play();
+ },
re_setVariables: function() {
this.endgameMessage = "";
this.orientation = this.game.mycolor || "w"; //default orientation for observed games
padding: 0
td
text-align: left
-.clearer
- clear: both
</style>