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

changed style

This commit is contained in:
Pierre Tellier 2024-04-27 23:50:20 +02:00
parent 171f073d63
commit e0536b2da5
7 changed files with 213 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

BIN
imgs/carcasonne.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 MiB

4
src/Board.ts
View File

@ -1,4 +1,4 @@
import {resetVar} from "./moooove";
import {resetVar, resideBoardScreenSize} from "./moooove";
/**
* return the WebBoard information
@ -177,6 +177,8 @@ function clearBoard() {
grid.append(line0);
resizeBoard();
resetVar();
resideBoardScreenSize();
}
export {

40
src/index.ts
View File

@ -89,6 +89,34 @@ function changeDisplayed(className: string) {
}
}
function showBorders(visible: boolean) {
function f(name: string) {
const elms = document.getElementsByClassName(name);
const elmsp = document.getElementsByClassName(name + "-hidden");
function g(elms1: any) {
for (let i = elms1.length; i > 0; i--) { // this loop must be reverted as getElementsByClassName identify elements via CSSselector (?) and it does change during the loop
const elm = <HTMLElement>(elms1[i - 1]);
if (visible) {
elm.classList.remove(name);
elm.classList.add(name + "-hidden");
} else {
elm.classList.remove(name + "-hidden");
elm.classList.add(name);
}
}
}
g(elms);
g(elmsp);
}
f("player1");
f("player0");
f("player-1");
}
function switchGraphImgs() {
let imgsDisplayed = true;
@ -106,6 +134,7 @@ function switchGraphImgs() {
const g = switchGraphImgs();
const switchToGraph = g.switch;
const IsImgsDisplayed = g.who;
let bordersShown = false;
window.onload = ((e) => {
main();
@ -125,8 +154,13 @@ window.onload = ((e) => {
switchMessage(showImgsButton, "le graphe");
}
);
const showTeamsButton = <HTMLElement>document.getElementById("showTeams");
showTeamsButton.addEventListener("click", () => {
showBorders(bordersShown);
bordersShown = !bordersShown;
switchMessage(showTeamsButton, "les équipes");
}
);
});
export {games, Move, IsImgsDisplayed, switchToGraph};
export {games, Move, IsImgsDisplayed, switchToGraph, showBorders, bordersShown};

44
src/moooove.ts
View File

@ -1,4 +1,4 @@
import {games, IsImgsDisplayed, Move, switchToGraph} from "./index";
import {bordersShown, games, IsImgsDisplayed, Move, switchToGraph} from "./index";
import {addColumnLeft, addColumnRight, addRowAbove, addRowUnder, clearBoard, resizeBoard} from "./Board";
let min_x = 0;
@ -8,7 +8,7 @@ let max_y = 0;
let gameIndex = 0;
let gameMoveId = 0;
const playerColors = ["green", "blue", "purple"];
const playerColors = ["blue", "yellow", "purple"];
function resetVar() {
min_y = 0;
@ -41,9 +41,7 @@ function switchNextGame() {
function setGameInfo() {
(<HTMLElement>document.getElementById("seed_disp")).innerText = games[gameIndex].seed + "";
(<HTMLElement>document.getElementById("player0_disp")).innerText = games[gameIndex].player0 + "";
(<HTMLElement>document.getElementById("player0_disp")).style.color = playerColors[0];
(<HTMLElement>document.getElementById("player1_disp")).innerText = games[gameIndex].player1 + "";
(<HTMLElement>document.getElementById("player1_disp")).style.color = playerColors[1];
(<HTMLElement>document.getElementById("winner_disp")).innerText = games[gameIndex].winner + "";
(<HTMLElement>document.getElementById("cause_disp")).innerText = games[gameIndex].cause + "";
addMove(games[gameIndex]["moves"][0]);
@ -120,6 +118,35 @@ function addMove(move: Move) {
placeMove(move);
}
function resideBoardScreenSize() {
const nb_lines = (window.innerHeight - 200) / 200;
const nb_cols = (window.innerWidth - 200) / 200;
let side = false;
for (let i = 0; i < nb_lines; i++) {
if (side) {
max_y++;
addRowUnder();
side = !side;
} else {
side = !side;
min_y--;
addRowAbove();
}
}
for (let i = 0; i < nb_cols; i++) {
if (side) {
side = !side;
max_x++;
addColumnRight();
} else {
side = !side;
min_x--;
addColumnLeft();
}
}
}
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]];
@ -127,7 +154,8 @@ function setInnerTile(elm: HTMLElement, tile: number[], angle: string, visible:
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";
if (!visible)
(<HTMLElement>subLine.children[idx_to_cord[i][0]]).classList.add("hidden");
}
}
@ -138,7 +166,7 @@ function setInnerTile(elm: HTMLElement, tile: number[], angle: string, visible:
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]);
box.classList.add("player" + move.id + (bordersShown ? "" : "-hidden"));
const img = document.createElement("img");
img.src = './imgs/' + move.tile.name + ".jpg";
img.className = "tileImg";
@ -156,7 +184,7 @@ function removeMove(move: Move) {
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));
setInnerTile(box, Array(13).fill(9), "0", !IsImgsDisplayed());
box.style.border = "none";
box.style.rotate = "0";
@ -214,7 +242,7 @@ function keyShortcut(e: { keyCode: number, ctrlKey: boolean, shiftKey: boolean }
document.addEventListener("keydown", keyShortcut);
export {setGameInfo, switchPrevGame, resetVar};
export {setGameInfo, switchPrevGame, resetVar, resideBoardScreenSize};

83
src/player.html
View File

@ -3,8 +3,6 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->
<link rel="stylesheet" href="../bootstrap.min.css">
<link rel="stylesheet" href="./style.css">
<script src="index.ts" type="module"></script>
<script src="moooove.ts" type="module"></script>
@ -13,59 +11,49 @@
</head>
<body>
<div>
<h1 id="title" class="text-center">Carcassonne viewer</h1>
<img src="../imgs/carcasonne.png" alt="GameTable" class="background">
<div class="header">
<div class="left">
<div class="button interactable" id="prevGameButton">|&lt;<&lt;</div>
<div class="button interactable" id="firstMoveButton">|&lt;&lt;</div>
<div class="button interactable" id="prevMoveButton">&lt;</div>
</div>
<div class="center">
🏆
<div id="winner_disp"> winner</div>
🏆
<div class="spacer">-></div>
<div id="cause_disp">cause</div>
</div>
<div class="right">
<div class="button interactable" id="nextMoveButton">&gt;</div>
<div class="button interactable" id="lastMoveButton">&gt;&gt;|</div>
<div class="button interactable" id="nextGameButton">>>>|</div>
</div>
</div>
<div class="left_player" id="player0_disp">player0</div>
<div class="right_player" id="player1_disp">player1</div>
<div id="games">
<div id="board" class="board">
</div>
</div>
<div class="header">
<div class="row">
<div class="footer">
<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="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>
<button type="button" class="btn btn-secondary" id="lastMoveButton">&gt;&gt;|</button>
<button type="button" class="btn btn-secondary" id="nextGameButton">>>>|</button>
</div>
</div>
<table class="table table-striped table-sm" style="text-align: left; width: 100%">
<tbody>
<tr>
<th scope="row">Player 0</th>
<td id="player0_disp">player0</td>
</tr>
<tr>
<th scope="row">Player 1</th>
<td id="player1_disp">player1</td>
</tr>
<tr>
<th scope="row">Seed</th>
<td id="seed_disp">uéuéuéu</td>
</tr>
<tr>
<th scope="row">Winner</th>
<td id="winner_disp">winner</td>
</tr>
<tr>
<th scope="row">Cause</th>
<td id="cause_disp">cause</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="data">
<div>Seed: <span id="seed_disp"></span></div>
<div class="spacer"></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="closed" id="jsonData">
<div class="button interactable" id="showTeams">Afficher les équipes</div>
</div>
<div class="closed" id="jsonData">
<pre>
[
{
@ -489,14 +477,13 @@
}
]
</pre>
</div>
</div>
<div id="error_box" style="display: none">
</div>
<div id="errors" style="background-color: #fee; display: visible">
<div id="errors" style="display: none;background-color: #fee">
<pre style="white-space: break-spaces">[
]</pre>

113
src/style.css
View File

@ -3,7 +3,21 @@ body {
/*overflow: hidden;*/
align-items: center;
justify-content: center;
background: radial-gradient(circle at top, #e5e5e5 10%, white 75%) no-repeat;
margin: 0;
}
.background {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.container {
display: flex;
flex-direction: row;
}
#games {
@ -18,29 +32,98 @@ body {
justify-content: center;
}
.board {
width: 80vw;
height: 80vh;
background: black;
margin: 3vh
.footer {
display: flex;
align-items: center;
justify-content: left;
color: white;
}
.row {
.board {
width: 90vw;
height: 90vh;
margin: 1vh;
}
.header {
display: flex;
flex-direction: row;
width: 100%;
height: 4vh;
margin: 0;
justify-content: center;
}
.left {
justify-content: flex-start;
width: 10%;
align-items: center;
display: inherit;
}
.right {
justify-content: flex-end;
align-items: center;
width: 10%;
display: flex;
}
.center {
justify-content: center;
align-items: center;
width: 80%;
display: flex;
color: white;
}
.spacer {
margin-left: 3vw;
margin-right: 3vw;
}
.left_player {
color: white;
writing-mode: vertical-lr;
position: absolute;
left: 0;
top: 35vh;
width: 3vw;
display: flex;
align-items: center;
}
.right_player {
color: white;
writing-mode: vertical-lr;
position: absolute;
right: 0;
top: 25vh;
width: 3vw;
display: flex;
align-items: center;
}
.player0 {
border: solid 3px yellow;
}
.player1 {
border: solid 3px blue;
}
.player-1 {
border: solid 3px black;
}
.viewer_controls {
margin: 0 -0.3vw 0 -0.3vw;
width: 101%;
}
.btn-group {
margin: 0 0 0.2vh 0;
width: 100%;
}
.gridTile {
box-sizing: border-box;
color: white;
font-size: 1em;
}
@ -56,6 +139,7 @@ body {
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
.column {
@ -75,10 +159,12 @@ body {
padding: 10px;
border: 1px solid #ececec;
border-radius: 10px;
color: white;
}
.button:hover {
background: #ececec;
color: black;
}
.interactable {
@ -108,4 +194,9 @@ body {
.hidden {
opacity: 0;
}
#jsonData {
position: absolute;
top: 100vh;
}