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();
setGameInfo();
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};

42
src/player.html
View File

@ -13,35 +13,32 @@
</head>
<body>
<div class="container-fluid bg-light header">
<h1 id="title">Carcassonne viewer</h1>
<div>
<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="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="col-lg-2"></div>
<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>
<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 class="col-lg-2"></div>
</div>
<table class="table table-striped table-sm" style="text-align: left; width: 100%">
<tbody>
<tr>
<th scope="row" style="width: 15%">Player 0</th>
<th scope="row">Player 0</th>
<td id="player0_disp">player0</td>
</tr>
<tr>
@ -65,13 +62,9 @@
</div>
</div>
</div>
<div id="games">
<div id="board" class="board">
</div>
</div>
<div id="jsonData">
<div id="data">
<div class="button interactable" id="showData">Afficher les données de parties</div>
<div class="closed" id="jsonData">
<pre>
[
{
@ -494,7 +487,8 @@
"cause": "Victory on points for player Pierre Du Caillou"
}
]
</pre>
</pre>
</div>
</div>
<div id="error_box" style="display: none">

61
src/style.css
View File

@ -1,18 +1,43 @@
body {
height: 100em;
overflow: hidden;
/*overflow: hidden;*/
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 {
height: 20vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.board {
width: 80vw;
height: 80vh;
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 {
@ -41,4 +66,34 @@ body {
.subTile {
width: 20%;
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;
}