addede images display + button to switch to grap view

Makefile

@@ -1,5 +1,5 @@
 parcel:
-	npm run parcel src/player.html src/*.ts
+	npm run parcel src/player.html src/*.ts imgs/*.jpg
 
 uncrash:
 	pkill -9 node

src/index.ts

@@ -73,6 +73,40 @@ function main() {
     console.log(crashes);
 }
 
+function switchMessage(elm: HTMLElement, txt: string) {
+
+    if (elm.innerText.includes("Afficher"))
+        elm.innerText = "Cacher " + txt;
+    else
+        elm.innerText = "Afficher " + txt;
+}
+
+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 switchGraphImgs() {
+    let imgsDisplayed = true;
+
+    function f() {
+        changeDisplayed("tileImg");
+        changeDisplayed("subTile");
+        imgsDisplayed = !imgsDisplayed;
+    }
+
+    const isImgsDisplayed = () => imgsDisplayed;
+
+    return {switch: f, who: isImgsDisplayed};
+}
+
+const g = switchGraphImgs();
+const switchToGraph = g.switch;
+const IsImgsDisplayed = g.who;
+
 window.onload = ((e) => {
     main();
     clearBoard();
@@ -80,14 +114,19 @@ window.onload = ((e) => {
     resizeBoard();
     const showDataButton = (<HTMLElement>document.getElementById('showData'));
     showDataButton.addEventListener(
-            'click',
-            () => {
-                (<HTMLElement>document.getElementById('jsonData')).classList.toggle("closed");
-                if (showDataButton.innerText.includes("Afficher"))
-                    showDataButton.innerText = "Cacher les données de parties";
-                else
-                    showDataButton.innerText = "Afficher les données de parties";
-            });
+        '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");
+        }
+    );
+
+
 });
 
-export {games, Move};
+export {games, Move, IsImgsDisplayed, switchToGraph};

src/moooove.ts

@@ -1,4 +1,4 @@
-import {games, Move} from "./index";
+import {games, IsImgsDisplayed, Move, switchToGraph} from "./index";
 import {addColumnLeft, addColumnRight, addRowAbove, addRowUnder, clearBoard, resizeBoard} from "./Board";
 
 let min_x = 0;
@@ -121,12 +121,13 @@ function addMove(move: Move) {
 }
 
 
-function setInnerTile(elm: HTMLElement, tile: number[]) {
+function setInnerTile(elm: HTMLElement, tile: number[], angle: string, visible: boolean) {
     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"];
     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]]).classList += visible ? "" : " hidden";
     }
 }
 
@@ -138,10 +139,18 @@ function placeMove(move: Move) {
     const line = <HTMLElement>document.getElementById("line" + (-move.y - min_y));
     const box = <HTMLElement>line.children[move.x - min_x];
     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";
+    const img = document.createElement("img");
+    img.src = './imgs/' + move.tile.name + ".jpg";
+    img.className = "tileImg";
+    if (!IsImgsDisplayed())
+        img.className += " hidden";
+    box.append(img);
+    img.style.rotate = '-' + move.tile.angle + "deg";
+    setInnerTile(box, move.tile.c, move.tile.angle, !IsImgsDisplayed());
+
 }
 
+// TODO: finish remove move
 function removeMove(move: Move) {
     console.log(move.y);
     console.log(move.y - min_y);
@@ -172,6 +181,7 @@ lastMoveButton.addEventListener("click", tolastMove);
 firstMoveButton.addEventListener("click", toFirstMove);
 
 function keyShortcut(e: { keyCode: number, ctrlKey: boolean, shiftKey: boolean }) {
+    console.log(`key ${e.keyCode} pressed`);
     switch (e.keyCode) {
         case 37:
             if (e.shiftKey) {
@@ -195,6 +205,9 @@ function keyShortcut(e: { keyCode: number, ctrlKey: boolean, shiftKey: boolean }
             }
             nextMove();
             break;
+        case 71:
+            switchToGraph();
+            break;
     }
 }
 

src/player.html

@@ -14,20 +14,20 @@
 
 <body>
 <div>
-  <h1 id="title" class="text-center">Carcassonne viewer</h1>
+    <h1 id="title" class="text-center">Carcassonne viewer</h1>
 </div>
 <div id="games">
     <div id="board" class="board">
 
     </div>
-  </div>
+</div>
 <div class="header">
     <div class="row">
 
         <div class="container">
             <div class="row viewer_controls">
                 <div class="btn-group " role="group" aria-label="Basic example">
-                  <button type="button" class="btn btn-secondary" id="prevGameButton">|&lt;<&lt;</button>
+                    <button type="button" class="btn btn-secondary" id="prevGameButton">|&lt;<&lt;</button>
                     <button type="button" class="btn btn-secondary" id="firstMoveButton">|&lt;&lt;</button>
                     <button type="button" class="btn btn-secondary" id="prevMoveButton">&lt;</button>
                     <button type="button" class="btn btn-secondary" id="nextMoveButton">&gt;</button>
@@ -63,8 +63,9 @@
     </div>
 </div>
 <div id="data">
-<div class="button interactable" id="showData">Afficher les données de parties</div>
-<div class="closed" id="jsonData">
+    <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="closed" id="jsonData">
       <pre>
 [
   {
@@ -488,7 +489,7 @@
   }
 ]
 </pre>
-</div>
+    </div>
 </div>
 
 <div id="error_box" style="display: none">

src/style.css

@@ -66,6 +66,7 @@ body {
 .subTile {
     width: 20%;
     height: 100%;
+    z-index: 1;
 }
 
 .button {
@@ -96,4 +97,15 @@ body {
 
 .closed#jsonData {
     font-size: 0 !important;
+}
+
+.tileImg {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    margin-top: -100%;
+}
+
+.hidden {
+    opacity: 0;
 }