dialog window for configuration options

diff --git a/public/index.html b/public/index.html
index d598935fc86bf6bea02ea16514fb1973fe487a36..9cb5862337391e12ee4a6e9b6eec75209965b7ea 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -23,6 +23,10 @@
             <div id="chat-messages"></div>
             <textarea id="chat-ta" placeholder="Write a message to your adversaries here" data-l10n="placeholder"></textarea>
             <button id="chat-btn" class="minibutton" data-l10n="text-content">Send message</button>
+            <button id="modal-config-btn" class="text-content">Configuration</button>
+           <div class="modal" id="modal-config-dialog">
+               <div class="modal-content">
+                   <h2>Configuration window</h2>
             <div id="prefs-sound">
                 <p><label><input type="checkbox" id="tiles-sound" checked="checked" /><span data-l10n="text-content">Sound of the tiles</span></label></p>
                 <p><label><input type="checkbox" id="msg-sound" checked="checked" /><span data-l10n="text-content">Sound of messages</span></label></p>
@@ -47,6 +51,12 @@
                     </select>
                 </label>
             </div>
+                   <div class="modal-buttons">
+                       <button id="modal-cancel-btn" data-l10n="text-content">Cancel</button>
+                        <button id="modal-validate-btn" data-l10n="text-content">Validate</button>
+                   </div>
+               </div>
+           </div>
         </div>
 
         <div id="content">

diff --git a/public/trivabble.css b/public/trivabble.css
index caea747cab931186cacb01a4facd9d2bb025b068..fa5119bdd0e3357e497118b086ab09cbd92c3a69 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -460,3 +460,37 @@ td.blink {
 #prefs-sound input, #prefs-sound label {
     vertical-align:middle
 }
+
+.modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    opacity: 0;
+    visibility: hidden;
+    transform: scale(1.1);
+    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
+    z-index: 1;
+}
+.modal-content {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: white;
+    padding: 1rem 1.5rem;
+    width: 24rem;
+    border-radius: 0.1rem;
+}
+.modal-buttons {
+    float: right;
+    padding-top: 1rem;
+}
+.show-modal {
+    opacity: 1;
+    visibility: visible;
+    transform: scale(1.0);
+    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
+}

diff --git a/public/trivabble.js b/public/trivabble.js
index 42884f6060999b659df28e369429525794f8137b..b7456bedd2eac8ae618f06ad44cb80f2c42bd03f 100644 (file)
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1580,6 +1580,11 @@
         location.reload();
     }
 
+    function showConfig() {
+       const modal = document.querySelector(".modal");
+       modal.classList.toggle("show-modal");
+    }
+
     function initGlobals() {
         board         = document.getElementById("board");
         rack          = document.getElementById("rack");
@@ -1603,6 +1608,9 @@
         document.getElementById("clear-rack").onclick  = clearRack;
         document.getElementById("show-rack").onclick   = showRack;
         helpClear.onclick  = clearGame;
+
+       document.getElementById("modal-config-btn").onclick = showConfig;
+       document.getElementById("modal-cancel-btn").onclick = showConfig;
     }
 
     function initGame() {