add player name and rank to HUD

This commit is contained in:
Sorrel Bri 2019-08-08 15:56:51 -07:00
parent 49315f9fe3
commit 1ee5ae8e92
3 changed files with 11 additions and 6 deletions

View file

@ -48,6 +48,7 @@ body {
"submit"; "submit";
font-family: 'La Belle Aurore', cursive; font-family: 'La Belle Aurore', cursive;
min-height: 0; min-height: 0;
z-index: 3;
} }
#menu .menu-subblock { #menu .menu-subblock {
@ -267,7 +268,7 @@ content {
color: rgb(255,240,230); color: rgb(255,240,230);
background-color: rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.7);
padding: 0.25em; padding: 0.25em;
z-index: 2; z-index: 1;
} }
#board-container { #board-container {

View file

@ -74,7 +74,7 @@
<div id="white-pos" class="player-pos"> <div id="white-pos" class="player-pos">
<div id="white-bowl" class="bowl"><p>Pass?</p><div id="white-stone-image" class="stone-image"></div></div> <div id="white-bowl" class="bowl"><p>Pass?</p><div id="white-stone-image" class="stone-image"></div></div>
<div id="white-player-space" class="name-space"> <div id="white-player-space" class="name-space">
<h4 id="white-player-name">Test Name rk</h4> <h4 id="white-player-name">Browser Go</h4>
<div id="white-caps-space" class="caps-space"><p>Resign?</p><p id="white-caps"></p></div> <div id="white-caps-space" class="caps-space"><p>Resign?</p><p id="white-caps"></p></div>
</div> </div>
<div id="game-hud"> <div id="game-hud">
@ -2295,7 +2295,7 @@
<div id="black-pos" class="player-pos"> <div id="black-pos" class="player-pos">
<div id="black-bowl" class="bowl"><p>Pass?</p><div id="white-stone-image" class="stone-image"></div></div> <div id="black-bowl" class="bowl"><p>Pass?</p><div id="white-stone-image" class="stone-image"></div></div>
<div id="black-player-space" class="name-space"> <div id="black-player-space" class="name-space">
<h4 id="black-player-name">Test Name rk</h4> <h4 id="black-player-name">by Sorrel June</h4>
<div id="black-caps-space" class="caps-space"><p>Resign?</p><p id="black-caps"></p></div> <div id="black-caps-space" class="caps-space"><p>Resign?</p><p id="black-caps"></p></div>
</div> </div>
<div id="kifu"> <div id="kifu">

View file

@ -574,8 +574,12 @@ function renderGame() {
renderTerritory(); renderTerritory();
renderMessage(); renderMessage();
} }
blackNameDisplayEl.textContent = gameState.playerMeta.b.name; blackNameDisplayEl.textContent =
whiteNameDisplayEl.textContent = gameState.playerMeta.w.name; `${gameState.playerMeta.b.name},
${gameState.playerMeta.b.rank}`;
whiteNameDisplayEl.textContent =
`${gameState.playerMeta.w.name},
${gameState.playerMeta.w.rank}`;
gameState.gameRecord.length? renderTurn() : renderFirstTurn(); gameState.gameRecord.length? renderTurn() : renderFirstTurn();
renderBoardState(); renderBoardState();
renderCaps(); renderCaps();
@ -653,7 +657,7 @@ function renderMessage() {
gameHudEl.textContent = `${gameState.playerMeta[gameState.winner === 1 ? 'b' : 'w'].name || STONES_DATA[gameState.winner]} won by ${Math.abs(gameState.playerState.wScore - gameState.playerState.bScore)}`; gameHudEl.textContent = `${gameState.playerMeta[gameState.winner === 1 ? 'b' : 'w'].name || STONES_DATA[gameState.winner]} won by ${Math.abs(gameState.playerState.wScore - gameState.playerState.bScore)}`;
} else if (gameState.pass > 1) { } else if (gameState.pass > 1) {
gameHudEl.style.visibility = 'visible'; gameHudEl.style.visibility = 'visible';
gameHudEl.textContent = 'click to finalize game' gameHudEl.textContent = 'finalize game'
} else { } else {
gameHudEl.style.visibility = 'hidden'; gameHudEl.style.visibility = 'hidden';
} }