diff --git a/src/Board.ts b/src/Board.ts index f5c0141..5a7bf97 100644 --- a/src/Board.ts +++ b/src/Board.ts @@ -21,25 +21,26 @@ function getWebBoardInfo() { function resizeBoard(staySquare: boolean = true) { const gameInfo = getWebBoardInfo(); - const unit = window.innerHeight > window.innerWidth ? "vw" : "vh"; - const maxPercent = Math.min(80 / gameInfo.nbColumns, 100 / gameInfo.nbLines); + const maxHeight = window.innerHeight / 100 * 80; + const maxWidth = window.innerWidth / 100 * 80; + const maxPercent = Math.min(maxWidth / gameInfo.nbColumns, maxHeight / gameInfo.nbLines); for (let i = 0; i < gameInfo.nbLines; i++) { const line = document.getElementById("line" + i); if (!line) throw Error("Error while resizing the board, the line " + i + "does not exist"); - line.style.height = staySquare ? maxPercent + unit : 100 / gameInfo.nbLines + "%"; + line.style.height = staySquare ? maxPercent + "px" : 100 / gameInfo.nbLines + "%"; line.style.width = "100%"; } for (let j = 0; j < gameInfo.nbColumns; j++) { const tiles = document.getElementsByClassName("tile" + j); - if (!tiles) - throw Error("Can't find the tile"); + if (!tiles || tiles.length === 0) + throw Error("Can't find any tile with class tile" + j); for (let k = 0; k < tiles.length; k++) { const elm = tiles[k] as HTMLElement; - elm.style.width = staySquare ? maxPercent + unit : 100 / gameInfo.nbColumns + "%"; + elm.style.width = staySquare ? maxPercent + "px" : "100%"; elm.style.height = "100%"; } } @@ -171,7 +172,7 @@ function clearBoard() { const line0 = document.createElement('div'); line0.className = "gridLine"; line0.id = "line0"; - line0.append(createDiv(1, 2)); + line0.append(createDiv(0, 2)); grid.append(line0); resizeBoard(); diff --git a/src/moooove.ts b/src/moooove.ts index a215c62..2c5838a 100644 --- a/src/moooove.ts +++ b/src/moooove.ts @@ -1,5 +1,5 @@ import {games, Move} from "./index"; -import {addColumnLeft, addColumnRight, addRowAbove, addRowUnder, clearBoard} from "./Board"; +import {addColumnLeft, addColumnRight, addRowAbove, addRowUnder, clearBoard, resizeBoard} from "./Board"; let min_x = 0; let max_x = 0; @@ -105,7 +105,7 @@ function addMove(move: Move) { addColumnLeft(); break; } - switch (inInterval(move.y, min_y, max_y)) { + switch (inInterval(-move.y, min_y, max_y)) { case 0: break; case 1: @@ -123,11 +123,10 @@ function addMove(move: Move) { function setInnerTile(elm: HTMLElement, tile: number[]) { const idx_to_cord = [[1, 0], [2, 0], [3, 0], [4, 1], [4, 2], [4, 3], [3, 4], [2, 4], [1, 4], [0, 3], [0, 2], [0, 1], [2, 2]]; - const nb_to_color = ["green", "gray", "blue", "#964B00", "purple", "gold", "#069AF3", "#420D08", "white"]; + const nb_to_color = ["green", "gray", "blue", "#964B00", "purple", "gold", "#069AF3", "#420D08", "white", "none"]; for (let i = 0; i < 13; i++) { const subLine = elm.children[idx_to_cord[i][1]]; (subLine.children[idx_to_cord[i][0]]).style.background = nb_to_color[tile[i]]; - (subLine.children[idx_to_cord[i][0]]).innerText = i + " - " + tile[i]; } } @@ -136,19 +135,22 @@ function setInnerTile(elm: HTMLElement, tile: number[]) { * @param move */ function placeMove(move: Move) { - const line = document.getElementById("line" + (move.y - min_y)); + const line = document.getElementById("line" + (-move.y - min_y)); const box = line.children[move.x - min_x]; - box.style.border = "solid 5px " + (inInterval(move.id, 0, 1) === 0 ? playerColors[move.id] : playerColors[2]); + box.style.border = "dotted 2px " + (inInterval(move.id, 0, 1) === 0 ? playerColors[move.id] : playerColors[2]); setInnerTile(box, move.tile.c); box.style.rotate = move.tile.angle + "deg"; } function removeMove(move: Move) { - console.log(`real coords: ${move.x - min_x} ${move.y - min_y}`); - const line = document.getElementById("line" + (move.y - min_y)); + console.log(move.y); + console.log(move.y - min_y); + const line = document.getElementById("line" + (-move.y - min_y)); const box = line.children[move.x - min_x]; - box.innerText = ""; - box.style.background = "none"; + setInnerTile(box, Array(13).fill(9)); + box.style.border = "none"; + box.style.rotate = "0"; + } const prevGameButton = (document.getElementById("prevGameButton")); @@ -169,4 +171,38 @@ prevMoveButton.addEventListener("click", prevMove); lastMoveButton.addEventListener("click", tolastMove); firstMoveButton.addEventListener("click", toFirstMove); -export {setGameInfo, switchPrevGame, resetVar}; \ No newline at end of file +function keyShortcut(e: { keyCode: number, ctrlKey: boolean, shiftKey: boolean }) { + switch (e.keyCode) { + case 37: + if (e.shiftKey) { + toFirstMove(); + break; + } + if (e.ctrlKey) { + switchPrevGame(); + break; + } + prevMove(); + break; + case 39: + if (e.shiftKey) { + tolastMove(); + break; + } + if (e.ctrlKey) { + switchNextGame(); + break; + } + nextMove(); + break; + } +} + + +document.addEventListener("keydown", keyShortcut); + +export {setGameInfo, switchPrevGame, resetVar}; + + + + diff --git a/src/player.html b/src/player.html index c39f8d7..942af0d 100644 --- a/src/player.html +++ b/src/player.html @@ -13,7 +13,7 @@ -
+

Carcassonne viewer