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 8e2cd30efa80db8dd906e2d40cbef0f9c2ace9ab..0969308bc3de8e0db0ee622d1cd05a266345256d 100644 (file)
--- 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 f58c379b7e63a7b73ebdeaa4b57c68d97e2d13fb..0f714d2cf672858b28fd08ed6dd5f958ac4845e5 100644 (file)
--- 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 fa0b2035641547d3af72efa8fc821a3dee40136f..fe704c297667d619972eadc5573d7b2af7185e0d 100644 (file)
--- a/public/bag.svg
+++ b/public/bag.svg
@@ -1,178 +1,41 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="44.867752mm"
-   height="49.999989mm"
-   viewBox="0 0 44.867752 49.999989"
-   version="1.1"
-   id="svg1697"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
-   sodipodi:docname="bag.svg">
-  <defs
-     id="defs1691">
-    <linearGradient
-       inkscape:collect="always"
-       id="linearGradient1660">
-      <stop
-         style="stop-color:#09090b;stop-opacity:1;"
-         offset="0"
-         id="stop1656" />
-      <stop
-         style="stop-color:#4d4d4d;stop-opacity:1"
-         offset="1"
-         id="stop1658" />
-    </linearGradient>
-    <linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient1660"
-       id="linearGradient21771"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="matrix(0.39152193,0,0,0.39152193,84.466516,149.67134)"
-       x1="91.671478"
-       y1="168.91321"
-       x2="133.35805"
-       y2="141.68517" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="8.1152753"
-     inkscape:cx="117.01316"
-     inkscape:cy="196.52791"
-     inkscape:document-units="mm"
-     inkscape:current-layer="g1103"
-     showgrid="false"
-     showguides="true"
-     inkscape:guide-bbox="true"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:document-rotation="0"
-     inkscape:window-width="2560"
-     inkscape:window-height="1355"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata1694">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Calque 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-83.071219,-130.26509)">
-    <g
-       id="g21769"
-       transform="matrix(2.003524,0,0,2.003524,-83.36396,-180.90033)">
-      <g
-         transform="matrix(1.2748214,0,0,1.2748214,-24.608503,-35.495168)"
-         id="g21732">
-        <g
-           id="g21827"
-           inkscape:export-xdpi="96"
-           inkscape:export-ydpi="96">
-          <g
-             id="g30492"
-             transform="matrix(0.21729684,-0.08669208,0.08669208,0.21729684,103.68655,158.98295)"
-             inkscape:transform-center-x="1.5006087"
-             inkscape:transform-center-y="1.3093051"
-             inkscape:export-filename="/home/id/Images/sac-trivabble-2.png"
-             inkscape:export-xdpi="96"
-             inkscape:export-ydpi="96">
-            <g
-               id="g1103"
-               transform="translate(2.4703087,2.0230148)">
-              <path
-                 sodipodi:nodetypes="cccsccc"
-                 inkscape:connector-curvature="0"
-                 id="path30413"
-                 d="m -84.900689,0.28001829 21.833764,0.3059734 -0.191029,1.50175751 c 0,0 -0.441181,4.067829 -0.336299,4.4757263 0.104885,0.4078974 -0.117732,2.1912659 -0.117732,2.1912659 0,0 -6.097547,-0.2961214 -7.045738,-0.3032108 L -84.881739,8.2721414"
-                 style="fill:#fff6d5;fill-opacity:1;stroke:#fff6d5;stroke-width:0.0385405px;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1" />
-              <g
-                 transform="matrix(0.1825681,0.00267522,-5.184421e-5,0.16882308,-49.009855,-10.969319)"
-                 id="g30409">
-                <g
-                   id="g30385"
-                   transform="matrix(0.87918095,0,0,0.87918095,-40.911317,12.434453)">
-                  <rect
-                     y="68.081581"
-                     x="-173.92935"
-                     height="48.242859"
-                     width="48.301006"
-                     id="rect30310-1"
-                     style="opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ccccaa;stroke-width:3.89295;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-                  <rect
-                     y="67.010086"
-                     x="-174.99074"
-                     height="49.229862"
-                     width="49.229862"
-                     id="rect30310"
-                     style="opacity:1;fill:#eeee88;fill-opacity:1;fill-rule:nonzero;stroke:#aaaa55;stroke-width:1.75622;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" />
-                </g>
-              </g>
-              <text
-                 xml:space="preserve"
-                 style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:1.77114px;line-height:1.25;font-family:'Latin Modern Sans';-inkscape-font-specification:'Latin Modern Sans, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#806600;fill-opacity:1;stroke:none;stroke-width:0.442784;"
-                 x="-82.837639"
-                 y="4.1053796"
-                 id="text1081"
-                 transform="rotate(1.013842)"><tspan
-                   sodipodi:role="line"
-                   id="tspan1079"
-                   x="-82.837639"
-                   y="4.1053796"
-                   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:1.77114px;font-family:'Latin Modern Sans';-inkscape-font-specification:'Latin Modern Sans Bold';stroke-width:0.442784;fill:#806600;">T R I</tspan><tspan
-                   sodipodi:role="line"
-                   x="-82.837639"
-                   y="6.3193045"
-                   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:1.77114px;font-family:'Latin Modern Sans';-inkscape-font-specification:'Latin Modern Sans Bold';stroke-width:0.442784;fill:#806600;"
-                   id="tspan1083">V A B</tspan><tspan
-                   sodipodi:role="line"
-                   x="-82.837639"
-                   y="8.5332298"
-                   style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:1.77114px;font-family:'Latin Modern Sans';-inkscape-font-specification:'Latin Modern Sans Bold';stroke-width:0.442784;fill:#806600;"
-                   id="tspan1085">B L E</tspan></text>
-            </g>
-          </g>
-          <path
-             inkscape:export-ydpi="96"
-             inkscape:export-xdpi="96"
-             sodipodi:nodetypes="ccccscscc"
-             inkscape:connector-curvature="0"
-             id="path1652"
-             d="m 94.131223,152.51272 c -5.601088,2.15982 -8.233041,11.88313 -3.709692,15.57743 2.259612,1.4289 6.369375,1.78248 9.291522,-0.0477 5.117667,-3.5149 0.294817,-14.63396 -2.423845,-15.52974 1.56157,-1.70471 3.824372,-2.5464 2.46388,-2.56784 -0.474725,-0.007 -1.492125,0.22989 -3.33512,0.53701 -2.196265,0.38356 -2.12874,-0.27007 -4.726992,-0.73164 -0.878233,-0.15601 0.616117,1.29874 2.440247,2.76245 z"
-             style="fill:url(#linearGradient21771);fill-opacity:1;stroke:#333333;stroke-width:0.13229166px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
-          <path
-             inkscape:export-ydpi="96"
-             inkscape:export-xdpi="96"
-             sodipodi:nodetypes="czcccc"
-             inkscape:connector-curvature="0"
-             id="path1654"
-             d="m 97.39512,152.3988 c 0,0 -1.151212,0.28745 -1.712317,0.29637 -0.5611,0.009 -1.74813,-0.18245 -1.74813,-0.18245 0,0 1.437,1.19372 1.913505,1.81901 0.893507,1.20756 1.341904,2.74231 1.50009,4.15773 v 0"
-             style="fill:none;stroke:#a05a2c;stroke-width:0.39687499;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-        </g>
-      </g>
-    </g>
-  </g>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="b" width="41.028mm" height="50.287mm" inkscape:version="1.4.1 (unknown)" sodipodi:docname="bag.svg" version="1.1" viewBox="0 0 41.028 50.287" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink">
+       <defs>
+               <linearGradient id="a" x1="91.671" x2="133.36" y1="168.91" y2="141.69" gradientTransform="matrix(.39152 0 0 .39152 84.467 149.67)" gradientUnits="userSpaceOnUse" inkscape:collect="always">
+                       <stop stop-color="#09090b" offset="0"/>
+                       <stop stop-color="#4d4d4d" offset="1"/>
+               </linearGradient>
+       </defs>
+       <sodipodi:namedview id="c" bordercolor="#666666" borderopacity="1.0" fit-margin-bottom="0" fit-margin-left="0" fit-margin-right="0" fit-margin-top="0" inkscape:current-layer="g21827" inkscape:cx="56.134557" inkscape:cy="94.860295" inkscape:deskcolor="#d1d1d1" inkscape:document-rotation="0" inkscape:document-units="mm" inkscape:guide-bbox="true" inkscape:pagecheckerboard="0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:showpageshadow="2" inkscape:window-height="1132" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="0" inkscape:window-y="0" inkscape:zoom="2.8146655" pagecolor="#ffffff" showgrid="false" showguides="true"/>
+       <metadata>
+               <rdf:RDF>
+                       <cc:Work rdf:about="">
+                               <dc:format>image/svg+xml</dc:format>
+                               <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+                       </cc:Work>
+               </rdf:RDF>
+       </metadata>
+       <g transform="translate(-86.911 -130.27)" inkscape:groupmode="layer" inkscape:label="Calque 1">
+               <g transform="matrix(2.0035 0 0 2.0035 -83.364 -180.9)">
+                       <g transform="matrix(1.2748 0 0 1.2748 -24.609 -35.495)">
+                               <g inkscape:export-xdpi="96" inkscape:export-ydpi="96">
+                                       <g transform="matrix(.2173 -.086692 .086692 .2173 103.69 158.98)" inkscape:export-filename="/home/id/Images/sac-trivabble-2.png" inkscape:export-xdpi="96" inkscape:export-ydpi="96" inkscape:transform-center-x="1.5006087" inkscape:transform-center-y="1.3093051">
+                                               <g transform="translate(2.4703 2.023)">
+                                                       <path d="m-84.901 0.28002 21.834 0.30597-0.19103 1.5018s-0.44118 4.0678-0.3363 4.4757c0.10488 0.4079-0.11773 2.1913-0.11773 2.1913s-6.0975-0.29612-7.0457-0.30321l-14.124-0.17939" fill="#fff6d5" stroke="#fff6d5" stroke-linecap="round" stroke-linejoin="round" stroke-width=".03854px" inkscape:connector-curvature="0" sodipodi:nodetypes="cccsccc"/>
+                                                       <g transform="matrix(.18257 .0026752 -5.1844e-5 .16882 -49.01 -10.969)">
+                                                               <g transform="matrix(.87918 0 0 .87918 -40.911 12.434)" stroke-linejoin="bevel">
+                                                                       <rect x="-173.93" y="68.082" width="48.301" height="48.243" fill="none" stroke="#ccccaa" stroke-width="3.893"/>
+                                                                       <rect x="-174.99" y="67.01" width="49.23" height="49.23" fill="#eeee88" stroke="#aaaa55" stroke-width="1.7562"/>
+                                                               </g>
+                                                       </g>
+                                                       <text transform="rotate(1.0138)" x="-82.837639" y="4.1053796" fill="#806600" font-family="'Latin Modern Sans'" font-size="1.7711px" font-weight="bold" letter-spacing="0px" stroke-width=".44278" word-spacing="0px" xml:space="preserve"><tspan x="-82.837639" y="4.1053796" sodipodi:role="line">T R I</tspan><tspan x="-82.837639" y="6.3193045" sodipodi:role="line">V A B</tspan><tspan x="-82.837639" y="8.5332298" sodipodi:role="line">B L E</tspan></text>
+                                               </g>
+                                       </g>
+                                       <path d="m94.131 152.51c-5.6011 2.1598-8.233 11.883-3.7097 15.577 2.2596 1.4289 6.3694 1.7825 9.2915-0.0477 5.1177-3.5149 0.29482-14.634-2.4238-15.53 1.5616-1.7047 3.8244-2.5464 2.4639-2.5678-0.47472-7e-3 -1.4921 0.22989-3.3351 0.53701-2.1963 0.38356-2.1287-0.27007-4.727-0.73164-0.87823-0.15601 0.61612 1.2987 2.4402 2.7624z" fill="url(#a)" stroke="#333333" stroke-width=".13229px" inkscape:connector-curvature="0" inkscape:export-xdpi="96" inkscape:export-ydpi="96" sodipodi:nodetypes="ccccscscc"/>
+                                       <path d="m97.395 152.4s-1.1512 0.28745-1.7123 0.29637c-0.5611 9e-3 -1.7481-0.18245-1.7481-0.18245s1.437 1.1937 1.9135 1.819c0.89351 1.2076 1.3419 2.7423 1.5001 4.1577v0" fill="none" stroke="#a05a2c" stroke-linecap="round" stroke-linejoin="round" stroke-width=".39688" inkscape:connector-curvature="0" inkscape:export-xdpi="96" inkscape:export-ydpi="96" sodipodi:nodetypes="czcccc"/>
+                                       <text id="tile-count" x="95.05" y="163" dominant-baseline="central" fill="#f2f2f2" font-family="'DejaVu serif', serif" font-size="5px" text-anchor="middle" xml:space="preserve">888</text>
+                               </g>
+                       </g>
+               </g>
+       </g>
 </svg>

diff --git a/public/index.html b/public/index.html
index e3baaad556db8e7486947e850624d9032b1cfd8a..1da1010d6e02930672eb75152069d4e3859315a2 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -144,8 +144,9 @@
                     <span data-l10n="text-content">Turn:</span> <span id="timer-turn">--</span> / <span id="timer-game">--</span>
                 </p>
             </div>
-            <div id="bag"></div>
-            <p><span data-l10n="text-content">Number of tiles in the bag:</span><br /><span id="remaining-letters">102</span></p>
+            <div id="bag">
+                <span id="tile-count"></span>
+            </div>
             <table id="participants">
                 <tr><th data-l10n="text-content">Participant</th><th data-l10n="text-content">Rack</th><th data-l10n="text-content">Score</th><th data-l10n="text-content">Turn</th></tr>
                 <tr id="participants-placeholder"><td colspan="4" data-l10n="text-content">Waiting for other participants…</td></tr>

diff --git a/public/trivabble.css b/public/trivabble.css
index c88a23b72a1c45d6d845b6c42c7cfb7fd5f086db..7f1e647185614f34f820de472d7d6673aaffc8ff 100644 (file)
--- 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 3debe49b97a2462221c52dfe19c493b3bc47a851..44d788eb127afcb5ee79b949e7c21327486036f5 100644 (file)
--- 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);