You can even play with arrows

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 maxHeight = window.innerHeight / 100 * 80;
-    const maxPercent = Math.min(80 / gameInfo.nbColumns, 100 / gameInfo.nbLines);
+    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)
+        if (!tiles || tiles.length === 0)
-            throw Error("Can't find the tile");
+            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();

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]];
         (<HTMLElement>subLine.children[idx_to_cord[i][0]]).style.background = nb_to_color[tile[i]];
-        (<HTMLElement>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 = <HTMLElement>document.getElementById("line" + (move.y - min_y));
+    const line = <HTMLElement>document.getElementById("line" + (-move.y - min_y));
     const box = <HTMLElement>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}`);
+    console.log(move.y);
-    const line = <HTMLElement>document.getElementById("line" + (move.y - min_y));
+    console.log(move.y - min_y);
+    const line = <HTMLElement>document.getElementById("line" + (-move.y - min_y));
     const box = <HTMLElement>line.children[move.x - min_x];
-    box.innerText = "";
+    setInnerTile(box, Array(13).fill(9));
-    box.style.background = "none";
+    box.style.border = "none";
+    box.style.rotate = "0";
+
 }
 
 const prevGameButton = (<HTMLElement>document.getElementById("prevGameButton"));
@@ -169,4 +171,38 @@ prevMoveButton.addEventListener("click", prevMove);
 lastMoveButton.addEventListener("click", tolastMove);
 firstMoveButton.addEventListener("click", toFirstMove);
 
-export {setGameInfo, switchPrevGame, resetVar};
+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};
+
+
+
+

src/player.html

@@ -13,7 +13,7 @@
 </head>
 
 <body>
-<div class="container-fluid bg-light">
+<div class="container-fluid bg-light header">
     <h1 id="title">Carcassonne viewer</h1>
     <div class="row">
         <div class="col-lg-3 sidebar">

src/style.css

@@ -1,3 +1,14 @@
+body {
+    height: 100em;
+    overflow: hidden;
+    align-items: center;
+}
+
+.header {
+    height: 20vh;
+    overflow: hidden;
+}
+
 .board {
     width: 80vw;
     height: 80vh;
@@ -5,7 +16,6 @@
 }
 
 .gridTile {
-    border: 1px solid white;
     color: white;
     font-size: 1em;
 }
@@ -31,5 +41,4 @@
 .subTile {
     width: 20%;
     height: 100%;
-    border: 1px solid white;
 }