piair
/
Carcasonne
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed some bugs

This commit is contained in:
Pierre Tellier 2024-04-28 21:08:17 +02:00
parent 748ad7e20d
commit db7a4c714e
4 changed files with 90 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/index.ts
View File

@ -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() {
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 = <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'));
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");
// 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 = <HTMLElement>document.getElementById("showTeams");
showTeamsButton.addEventListener("click", () => {
showBorders(bordersShown);
bordersShown = !bordersShown;
switchMessage(showTeamsButton, "les équipes");
}
);
}, false);
});
export {games, Move, IsImgsDisplayed, switchToGraph, showBorders, bordersShown};
export {games, Move, IsImgsDisplayed, switchToGraph, showBorders, bordersShown, invertBorder};

39
src/moooove.ts
View File

@ -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;
}
}

10
src/player.html
View File

@ -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="showImages">Afficher le graphe</div>
<div class="button interactable" id="showTeams">Afficher les équipes</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="showTeams">Afficher les équipes</div>
</div>
</div>
<div class="closed" id="jsonData">
<pre>
[

7
src/style.css
View File

@ -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;