diff --git a/src/index.ts b/src/index.ts index cef92d4..4f256c8 100644 --- a/src/index.ts +++ b/src/index.ts @@ -53,6 +53,12 @@ type Game = { crashReport?: CrashReport; }; +function invertBorder() { + showBorders(bordersShown); + bordersShown = !bordersShown; + switchMessage(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 = (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() { - changeDisplayed("tileImg"); - changeDisplayed("subTile"); - imgsDisplayed = !imgsDisplayed; +let IsImgsDisplayed = true; + +function switchToGraph() { + 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 = (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 = (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 = (document.getElementById('showData')); +showDataButton.addEventListener( + 'click', + () => { + (document.getElementById('jsonData')).classList.toggle("closed"); + switchMessage(showDataButton, "les données de parties"); + }); +const showImgsButton = document.getElementById("showImages"); +showImgsButton.addEventListener("click", () => { + switchToGraph(); + switchMessage(showImgsButton, "le graphe"); + } +); +const showTeamsButton = document.getElementById("showTeams"); +showTeamsButton.addEventListener("click", () => { + invertBorder(); + } +); window.onload = ((e) => { main(); clearBoard(); setGameInfo(); resizeBoard(); - const showDataButton = (document.getElementById('showData')); - showDataButton.addEventListener( - 'click', - () => { - (document.getElementById('jsonData')).classList.toggle("closed"); - switchMessage(showDataButton, "les données de parties"); - }); - const showImgsButton = document.getElementById("showImages"); - showImgsButton.addEventListener("click", () => { - switchToGraph(); - switchMessage(showImgsButton, "le graphe"); + // src: https://stackoverflow.com/a/8916697 + window.addEventListener("keydown", function (e) { + if (["Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].indexOf(e.code) > -1) { + e.preventDefault(); } - ); - const showTeamsButton = document.getElementById("showTeams"); - showTeamsButton.addEventListener("click", () => { - showBorders(bordersShown); - bordersShown = !bordersShown; - switchMessage(showTeamsButton, "les équipes"); - } - ); + }, false); }); -export {games, Move, IsImgsDisplayed, switchToGraph, showBorders, bordersShown}; \ No newline at end of file +export {games, Move, IsImgsDisplayed, switchToGraph, showBorders, bordersShown, invertBorder}; \ No newline at end of file diff --git a/src/moooove.ts b/src/moooove.ts index c8bd4da..69e8609 100644 --- a/src/moooove.ts +++ b/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(); + (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); + (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) + (elm.children[0].children[0]).style.opacity = "1"; + else + (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]]; (subLine.children[idx_to_cord[i][0]]).style.background = nb_to_color[tile[i]]; - if (!visible) + if (IsImgsDisplayed) (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 = document.getElementById("line" + (-move.y - min_y)); const box = 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; } } diff --git a/src/player.html b/src/player.html index 89b634f..c44af1a 100644 --- a/src/player.html +++ b/src/player.html @@ -46,14 +46,14 @@
-
Seed:
+
Seed: Partie: 0
-
Afficher les données de parties
-
Afficher le graphe
-
Afficher les équipes
+
Afficher les données de parties
+
Afficher le graphe
+
Afficher les équipes
+
- 
 [
diff --git a/src/style.css b/src/style.css
index e163e2a..883640c 100644
--- a/src/style.css
+++ b/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;