fixed some bugs

src/index.ts

@@ -53,6 +53,12 @@ type Game = {
     crashReport?: CrashReport;
 };
 
+function invertBorder() {
+    showBorders(bordersShown);
+    bordersShown = !bordersShown;
+    switchMessage(<HTMLElement>document.getElementById("showTeams"), "les équipes");
+}
+
 let games: Game[] = [];
 
 function main() {
@@ -82,11 +88,7 @@ function switchMessage(elm: HTMLElement, txt: string) {
 }
 
 function changeDisplayed(className: string) {
-    const elms = document.getElementsByClassName(className);
+
-    for (let i = 0; i < elms.length; i++) {
-        const elm = <HTMLElement>(elms[i]);
-        elm.classList.toggle("hidden");
-    }
 }
 
 function showBorders(visible: boolean) {
@@ -117,50 +119,63 @@ function showBorders(visible: boolean) {
     f("player-1");
 }
 
-function switchGraphImgs() {
-    let imgsDisplayed = true;
 
-    function f() {
+let IsImgsDisplayed = true;
-        changeDisplayed("tileImg");
+
-        changeDisplayed("subTile");
+function switchToGraph() {
-        imgsDisplayed = !imgsDisplayed;
+    console.log("switching to " + (IsImgsDisplayed ? "GRAPH" : "IMAGES") + " vue");
+    IsImgsDisplayed = !IsImgsDisplayed;
+
+    const imgElms = document.getElementsByClassName("tileImg");
+    for (let i = 0; i < imgElms.length; i++) {
+        const elm = <HTMLElement>(imgElms[i]);
+        if (IsImgsDisplayed)
+            elm.classList.remove("hidden");
+        else
+            elm.classList.add("hidden");
+    }
+    const tileElms = document.getElementsByClassName("subTile");
+    for (let i = 0; i < tileElms.length; i++) {
+        const elm = <HTMLElement>(tileElms[i]);
+        if (!IsImgsDisplayed)
+            elm.classList.remove("hidden");
+        else
+            elm.classList.add("hidden");
     }
 
-    const isImgsDisplayed = () => imgsDisplayed;
-
-    return {switch: f, who: isImgsDisplayed};
 }
 
-const g = switchGraphImgs();
-const switchToGraph = g.switch;
-const IsImgsDisplayed = g.who;
 let bordersShown = false;
+const showDataButton = (<HTMLElement>document.getElementById('showData'));
+showDataButton.addEventListener(
+    'click',
+    () => {
+        (<HTMLElement>document.getElementById('jsonData')).classList.toggle("closed");
+        switchMessage(showDataButton, "les données de parties");
+    });
+const showImgsButton = <HTMLElement>document.getElementById("showImages");
+showImgsButton.addEventListener("click", () => {
+        switchToGraph();
+        switchMessage(showImgsButton, "le graphe");
+    }
+);
+const showTeamsButton = <HTMLElement>document.getElementById("showTeams");
+showTeamsButton.addEventListener("click", () => {
+        invertBorder();
+    }
+);
 
 window.onload = ((e) => {
     main();
     clearBoard();
     setGameInfo();
     resizeBoard();
-    const showDataButton = (<HTMLElement>document.getElementById('showData'));
+    // src: https://stackoverflow.com/a/8916697
-    showDataButton.addEventListener(
+    window.addEventListener("keydown", function (e) {
-        'click',
+        if (["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) {
-        () => {
+            e.preventDefault();
-            (<HTMLElement>document.getElementById('jsonData')).classList.toggle("closed");
-            switchMessage(showDataButton, "les données de parties");
-        });
-    const showImgsButton = <HTMLElement>document.getElementById("showImages");
-    showImgsButton.addEventListener("click", () => {
-            switchToGraph();
-            switchMessage(showImgsButton, "le graphe");
         }
-    );
+    }, false);
-    const showTeamsButton = <HTMLElement>document.getElementById("showTeams");
-    showTeamsButton.addEventListener("click", () => {
-            showBorders(bordersShown);
-            bordersShown = !bordersShown;
-            switchMessage(showTeamsButton, "les équipes");
-        }
-    );
 });
 
-export {games, Move, IsImgsDisplayed, switchToGraph, showBorders, bordersShown};
+export {games, Move, IsImgsDisplayed, switchToGraph, showBorders, bordersShown, invertBorder};

src/moooove.ts

@@ -1,4 +1,4 @@
-import {bordersShown, games, IsImgsDisplayed, Move, switchToGraph} from "./index";
+import {bordersShown, games, invertBorder, IsImgsDisplayed, Move, showBorders, switchToGraph} from "./index";
 import {addColumnLeft, addColumnRight, addRowAbove, addRowUnder, clearBoard, resizeBoard} from "./Board";
 
 let min_x = 0;
@@ -25,14 +25,18 @@ function switchPrevGame() {
     clearBoard();
     if (gameIndex > 0)
         gameIndex--;
-    setGameInfo();
+    //setGameInfo();
+    (<HTMLElement>document.getElementById("gameIDdisp")).innerText = gameIndex + "";
+    setTimeout(setGameInfo, 1); // prevent the big flash before the board is fully resized
 }
 
 function switchNextGame() {
     clearBoard();
     if (gameIndex < games.length - 1)
         gameIndex++;
-    setGameInfo();
+    setTimeout(setGameInfo, 1);
+    (<HTMLElement>document.getElementById("gameIDdisp")).innerText = gameIndex + "";
+    //setGameInfo();
 }
 
 /**
@@ -148,19 +152,26 @@ function resideBoardScreenSize() {
 
 }
 
-function setInnerTile(elm: HTMLElement, tile: number[], angle: string, visible: boolean) {
+function setInnerTile(elm: HTMLElement, tile: number[], angle: string) {
+
     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", "none"];
+    elm.children[0].children[0].innerHTML = gameMoveId + "";
+    if (tile[0] !== 9)
+        (<HTMLElement>elm.children[0].children[0]).style.opacity = "1";
+    else
+        (<HTMLElement>elm.children[0].children[0]).style.opacity = "0";
+    // console.log("Adding a new " + (IsImgsDisplayed ? "HIDDEN" : "VISIBLE") + " graph tile");
     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]];
-        if (!visible)
+        if (IsImgsDisplayed)
             (<HTMLElement>subLine.children[idx_to_cord[i][0]]).classList.add("hidden");
     }
 }
 
 /**
- * there is the real adding part
+ * there is thesubTiledding part
  * @param move
  */
 function placeMove(move: Move) {
@@ -170,21 +181,20 @@ function placeMove(move: Move) {
     const img = document.createElement("img");
     img.src = './imgs/' + move.tile.name + ".jpg";
     img.className = "tileImg";
-    if (!IsImgsDisplayed())
+    if (!IsImgsDisplayed)
         img.className += " hidden";
     box.append(img);
     img.style.rotate = '-' + move.tile.angle + "deg";
-    setInnerTile(box, move.tile.c, move.tile.angle, !IsImgsDisplayed());
+    setInnerTile(box, move.tile.c, move.tile.angle);
 
 }
 
-// TODO: finish remove move
+
 function removeMove(move: Move) {
-    console.log(move.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];
-    setInnerTile(box, Array(13).fill(9), "0", !IsImgsDisplayed());
+    setInnerTile(box, Array(13).fill(9), "0");
+    box.removeChild(box.getElementsByTagName('img')[0]);
     box.style.border = "none";
     box.style.rotate = "0";
 
@@ -209,7 +219,7 @@ lastMoveButton.addEventListener("click", tolastMove);
 firstMoveButton.addEventListener("click", toFirstMove);
 
 function keyShortcut(e: { keyCode: number, ctrlKey: boolean, shiftKey: boolean }) {
-    console.log(`key ${e.keyCode} pressed`);
+    // console.log(`key ${e.keyCode} pressed`);
     switch (e.keyCode) {
         case 37:
             if (e.shiftKey) {
@@ -236,6 +246,9 @@ function keyShortcut(e: { keyCode: number, ctrlKey: boolean, shiftKey: boolean }
         case 71:
             switchToGraph();
             break;
+        case 84:
+            invertBorder();
+            break;
     }
 }
 

src/player.html

@@ -46,14 +46,14 @@
 </div>
 <div class="footer">
 
-    <div style=" width: 100%">Seed: <span id="seed_disp"></span></div>
+    <div style=" width: 100%">Seed: <span id="seed_disp"></span>Partie: <span id="gameIDdisp">0</span></div>
     <div style="display: flex; width: 200%; justify-content: right">
-      <div class="button interactable" id="showData">Afficher les données de parties</div>
+        <div class="button interactable" id="showData">Afficher les données de parties</div>
-      <div class="button interactable" id="showImages">Afficher le graphe</div>
+        <div class="button interactable" id="showImages">Afficher le graphe</div>
-      <div class="button interactable" id="showTeams">Afficher les équipes</div>
+        <div class="button interactable" id="showTeams">Afficher les équipes</div>
+
     </div>
 </div>
-
 <div class="closed" id="jsonData">
       <pre>
 [

src/style.css

@@ -69,6 +69,13 @@ body {
     display: flex;
 }
 
+.right2 {
+    justify-content: flex-end;
+    align-items: center;
+    width: 50vw;
+    display: flex;
+}
+
 .center {
     justify-content: center;
     align-items: center;