From: Raphaël Jakse Date: Sat, 3 May 2025 16:16:04 +0000 (+0200) Subject: Put the number of remaining tiles on the bag X-Git-Url: https://secure.softndesign.org/git/?a=commitdiff_plain;h=bb62eb180a185a6e2ef6392252703ebd27110fc4;p=trivabble.git Put the number of remaining tiles on the bag Thanks Arnaudv6 for the idea Ref: https://git.jakse.fr/trivabble/trivabble/issues/7#issuecomment-69 --- diff --git a/l10n/po/fr/trivabble.po b/l10n/po/fr/trivabble.po index 8e2cd30..0969308 100644 --- a/l10n/po/fr/trivabble.po +++ b/l10n/po/fr/trivabble.po @@ -85,9 +85,6 @@ msgstr "Bruit des pièces" msgid "Sound of messages" msgstr "Bruit des messages" -msgid "Number of tiles in the bag:" -msgstr "Nombre de pièces dans le sac :" - msgid "Click on the bag to take one tile." msgstr "Cliquez sur le sac pour prendre une pièce." diff --git a/l10n/pot/trivabble.pot b/l10n/pot/trivabble.pot index f58c379..0f714d2 100644 --- a/l10n/pot/trivabble.pot +++ b/l10n/pot/trivabble.pot @@ -87,9 +87,6 @@ msgstr "" msgid "Sound of messages" msgstr "" -msgid "Number of tiles in the bag:" -msgstr "" - msgid "Click on the bag to take one tile." msgstr "" diff --git a/public/bag.svg b/public/bag.svg index fa0b203..fe704c2 100644 --- a/public/bag.svg +++ b/public/bag.svg @@ -1,178 +1,41 @@ - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - T R IV A BB L E - - - - - - - - + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + T R IV A BB L E + + + + + 888 + + + + diff --git a/public/index.html b/public/index.html index e3baaad..1da1010 100644 --- a/public/index.html +++ b/public/index.html @@ -144,8 +144,9 @@ Turn: -- / --

-
-

Number of tiles in the bag:
102

+
+ +
diff --git a/public/trivabble.css b/public/trivabble.css index c88a23b..7f1e647 100644 --- a/public/trivabble.css +++ b/public/trivabble.css @@ -404,8 +404,20 @@ td.blink { #bag { width:165px; height:160px; - background:url(bag.svg) no-repeat; - background-size:100% 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + text-align: center; +} + +#bag > #tile-count { + color:white; + background: black; + display:block; + border-radius: 100px; + padding:3rem; + font-size: 42px; } #bag:hover { @@ -413,6 +425,11 @@ td.blink { opacity:0.8 } +#bag > svg { + width: 100%; + height: 100%; +} + #chat-messages { border:1px solid silver; box-sizing:border-box; diff --git a/public/trivabble.js b/public/trivabble.js index 3debe49..44d788e 100644 --- a/public/trivabble.js +++ b/public/trivabble.js @@ -186,6 +186,7 @@ const boardCells = []; let scoreOf; let bag; + let tileCount; let boardLangSelect; let boardLabelSelect; const downloadedDictionaries = {}; @@ -1261,7 +1262,7 @@ set("boardLang", data.boardLang); (boardLangSelect || {}).value = data.boardLang; } - + if (data.boardLabel) { if (Object.keys(BoardList).indexOf(data.boardLabel) === -1) { myAlert("Can't find board '" + data.boardLabel + "'. Change board or start a new game."); @@ -1282,7 +1283,7 @@ if (typeof data.remainingLetters === "number") { remainingLetters = data.remainingLetters; - document.getElementById("remaining-letters").textContent = data.remainingLetters; + tileCount.textContent = data.remainingLetters; } if (data.rack) { @@ -2554,6 +2555,7 @@ chatTextarea = document.getElementById("chat-ta"); participantPlaceholder = document.getElementById("participants-placeholder"); boardLabelSelect = document.getElementById("board-label"); + tileCount = document.getElementById("tile-count"); } function initEvents() { @@ -2717,6 +2719,39 @@ document.getElementsByTagName("head")[0].appendChild(script); } + function load() { + initLang(); + loadBagSVG(); + } + + function loadBagSVG() { + const file = new XMLHttpRequest(); + file.open("GET", "bag.svg", true); + file.onreadystatechange = function () { + if (file.readyState !== 4 || file.status !== 200) { + return; + } + + const xml = file.responseXML; + const svg = xml && xml.documentElement; + if (!svg) { + return; + } + + const newTileCount = svg.getElementById("tile-count"); + if (!newTileCount) { + return; + } + const oldTileCount = document.getElementById("tile-count"); + newTileCount.textContent = oldTileCount.textContent; + const b = document.getElementById("bag"); + b.textContent = ''; + b.appendChild(svg); + tileCount = newTileCount; + }; + file.send(); + } + trivabble.run = function () { addSourceCodeInfo(); initGlobals(); @@ -2734,7 +2769,7 @@ trivabble.l10nError = trivabble.run; - window.addEventListener("DOMContentLoaded", initLang); + window.addEventListener("DOMContentLoaded", load); window.addEventListener("beforeunload", stopConnection);
ParticipantRackScoreTurn
Waiting for other participants…