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

feat: continue UI

This commit is contained in:
Alessandre Laguierce 2024-04-21 19:12:11 +02:00
parent a9660577f5
commit d53862e861
3 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/index.ts
View File

@ -78,6 +78,16 @@ window.onload = ((e) => {
clearBoard(); clearBoard();
setGameInfo(); setGameInfo();
resizeBoard(); 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";
});
}); });
export {games, Move}; export {games, Move};

42
src/player.html
View File

@ -13,35 +13,32 @@
</head> </head>
<body> <body>
<div class="container-fluid bg-light header"> <div>
<h1 id="title">Carcassonne viewer</h1> <h1 id="title" class="text-center">Carcassonne viewer</h1>
</div>
<div id="games">
<div id="board" class="board">
</div>
</div>
<div class="header">
<div class="row"> <div class="row">
<div class="col-lg-3 sidebar">
<ul class="list-group" id="games_list">
</ul>
</div>
<div class="col-lg-9">
<div id="game_container" class="row">
</div>
<div class="container">
<div class="row viewer_controls"> <div class="row viewer_controls">
<div class="col-lg-2"></div> <div class="btn-group " role="group" aria-label="Basic example">
<div class="btn-group col-lg-8" 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="firstMoveButton">|&lt;&lt;</button>
<button type="button" class="btn btn-secondary" id="prevMoveButton">&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="nextMoveButton">&gt;</button>
<button type="button" class="btn btn-secondary" id="lastMoveButton">&gt;&gt;|</button> <button type="button" class="btn btn-secondary" id="lastMoveButton">&gt;&gt;|</button>
<button type="button" class="btn btn-secondary" id="nextGameButton">>>>|</button> <button type="button" class="btn btn-secondary" id="nextGameButton">>>>|</button>
</div> </div>
<div class="col-lg-2"></div>
</div> </div>
<table class="table table-striped table-sm" style="text-align: left; width: 100%"> <table class="table table-striped table-sm" style="text-align: left; width: 100%">
<tbody> <tbody>
<tr> <tr>
<th scope="row" style="width: 15%">Player 0</th> <th scope="row">Player 0</th>
<td id="player0_disp">player0</td> <td id="player0_disp">player0</td>
</tr> </tr>
<tr> <tr>
@ -65,13 +62,9 @@
</div> </div>
</div> </div>
</div> </div>
<div id="data">
<div id="games"> <div class="button interactable" id="showData">Afficher les données de parties</div>
<div id="board" class="board"> <div class="closed" id="jsonData">
</div>
</div>
<div id="jsonData">
<pre> <pre>
[ [
{ {
@ -494,7 +487,8 @@
"cause": "Victory on points for player Pierre Du Caillou" "cause": "Victory on points for player Pierre Du Caillou"
} }
] ]
</pre> </pre>
</div>
</div> </div>
<div id="error_box" style="display: none"> <div id="error_box" style="display: none">

61
src/style.css
View File

@ -1,18 +1,43 @@
body { body {
height: 100em; height: 100em;
overflow: hidden; /*overflow: hidden;*/
align-items: center; align-items: center;
justify-content: center;
background: radial-gradient(circle at top, #e5e5e5 10%, white 75%) no-repeat;
}
#games {
display: flex;
align-items: center;
justify-content: center;
} }
.header { .header {
height: 20vh; display: flex;
overflow: hidden; align-items: center;
justify-content: center;
} }
.board { .board {
width: 80vw; width: 80vw;
height: 80vh; height: 80vh;
background: black; background: black;
margin: 3vh
}
.row {
width: 100%;
justify-content: center;
}
.viewer_controls {
margin: 0 -0.3vw 0 -0.3vw;
width: 101%;
}
.btn-group {
margin: 0 0 0.2vh 0;
width: 100%;
} }
.gridTile { .gridTile {
@ -41,4 +66,34 @@ body {
.subTile { .subTile {
width: 20%; width: 20%;
height: 100%; height: 100%;
}
.button {
font-size: 1em;
width: fit-content;
padding: 10px;
border: 1px solid #ececec;
border-radius: 10px;
}
.button:hover {
background: #ececec;
}
.interactable {
cursor: pointer;
}
#jsonData {
font-size: 1em;
overflow-y: hidden;
transition: font-size 500ms cubic-bezier(1, 1, 1, 1);
margin: 0.1vw;
border: 1px solid rgba(169, 169, 169, 0.67);
padding: 0.2vw;
}
.closed#jsonData {
font-size: 0 !important;
} }