From fcd99ce146ad34271ce43f5da64f81424c2099f0 Mon Sep 17 00:00:00 2001
From: Laurent Mazet <mazet@softndesign.org>
Date: Mon, 3 Aug 2020 14:11:23 +0200
Subject: [PATCH] dialog window for configuration options

---
 public/index.html    | 10 ++++++++++
 public/trivabble.css | 34 ++++++++++++++++++++++++++++++++++
 public/trivabble.js  |  8 ++++++++
 3 files changed, 52 insertions(+)

diff --git a/public/index.html b/public/index.html
index d598935..9cb5862 100644
--- 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 caea747..fa5119b 100644
--- 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 42884f6..b7456be 100644
--- 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() {
-- 
2.30.2