use select control instead of multiple buttons

diff --git a/public/index.html b/public/index.html
index df566e8126018ca2b3531423fe690f4e73e2a4e3..445e45f648cfd7c65dd148bb30ef500145e75698 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -19,12 +19,6 @@
             <button data-l10n="text-content" id="join-game">Join adversaries</button>
             <p id="p-name"> <span data-l10n="text-content">You are:</span> <span id="name" data-l10n="text-content">(name to give)</span><br /><button class="minibutton" id="change-name" data-l10n="text-content">Change</button></p>
             <button id="clear-game" data-l10n="text-content">Put back all the tiles&#10;in the bag</button>
-            <p id="p-name"><span data-l10n="text-content">Board language:</span> <span id="board-lang" data-l10n="text-content">(pending)</span><br />
-                <button data-l10n="text-content" id="change-de-board">German</button>
-                <button data-l10n="text-content" id="change-en-board">English</button>
-                <button data-l10n="text-content" id="change-fr-board">French</button>
-                <button data-l10n="text-content" id="change-es-board">Spanish</button>
-            </p>
             <p id="p-name"><span data-l10n="text-content">Number of your game:</span><br /><span id="number" data-l10n="text-content">(pending)</span></p>
             <div id="chat-messages"></div>
             <textarea id="chat-ta" placeholder="Write a message to your adversaries here" data-l10n="placeholder"></textarea>
@@ -44,6 +38,17 @@
                     </select>
                 </label>
             </div>
+            <div id="board-lang-selection">
+                <label>
+                    <span data-l10n="text-content">Board language: </span>
+                    <select id="board-lang">
+                        <option value="en">English</option>
+                        <option value="fr">French</option>
+                        <option value="de">German</option>
+                        <option value="es">Spanish</option>
+                    </select>
+                </label>
+            </div>
         </div>
 
         <div id="content">

diff --git a/public/trivabble.css b/public/trivabble.css
index b36380735a7560407f1597cbce655c34630aaa31..e0d6f3d24befb03b90362b4a29a410562a0d236b 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -453,7 +453,7 @@ td.blink {
     font-size:small
 }
 
-#lang-selection {
+#lang-selection, #board-lang-selection {
     font-size:small;
 }
 

diff --git a/public/trivabble.js b/public/trivabble.js
index 21a3eff3641734fca283db53f1605f1cbfe75e41..a7e493b226998d586c3490960fa9940c66c74368 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -543,7 +543,7 @@
                 break;
             case "boardLang":
                 localStorage.trivabbleBoardLang = value;
-                document.getElementById("board-lang").textContent = langName[value];
+                document.getElementById("board-lang").value = value;
                 break;
         }
     }
@@ -1345,10 +1345,9 @@
             }
         );
     }
-    function changeBoardDe() { changeBoardLang("de"); }
-    function changeBoardEn() { changeBoardLang("en"); }
-    function changeBoardEs() { changeBoardLang("es"); }
-    function changeBoardFr() { changeBoardLang("fr"); }
+    function onChangeBoardLang() {
+        changeBoardLang(document.getElementById("board-lang").value);
+    }
 
     function clearRack() {
         myConfirm(
@@ -1541,10 +1540,7 @@
         mouseDown(bag, bagClicked);
 
         document.getElementById("clear-game").onclick  = clearGame;
-        document.getElementById("change-de-board").onclick  = changeBoardDe;
-        document.getElementById("change-en-board").onclick  = changeBoardEn;
-        document.getElementById("change-es-board").onclick  = changeBoardEs;
-        document.getElementById("change-fr-board").onclick  = changeBoardFr;
+        document.getElementById("board-lang").onchange = onChangeBoardLang;
         document.getElementById("change-name").onclick = changeName;
         document.getElementById("join-game").onclick   = joinGame;
         document.getElementById("clear-rack").onclick  = clearRack;
@@ -1645,7 +1641,7 @@
         }
 
         if (localStorage.trivabbleBoardLang) {
-            document.getElementById("board-lang").textContent = localStorage.trivabbleBoardLang;
+            document.getElementById("board-lang").value = localStorage.trivabbleBoardLang;
         }
 
         startGame(localStorage.trivabbleGameNumber, localStorage.trivabbleBoardLang);