From 166ac08f0b84c4c94312e81ecf005c9977ca7c21 Mon Sep 17 00:00:00 2001
From: Laurent Mazet <mazet@softndesign.org>
Date: Tue, 4 Aug 2020 14:52:32 +0200
Subject: [PATCH] simplify configuration window

---
 public/index.html    | 31 +++++++++++++++----------------
 public/trivabble.css | 19 ++++++++++++++++---
 public/trivabble.js  |  2 +-
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9cb5862..4811d72 100644
--- a/public/index.html
+++ b/public/index.html
@@ -23,15 +23,6 @@
             <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>
-            </div>
-
             <div id="lang-selection">
                 <label>
                     <span data-l10n="text-content">Interface language: </span>
@@ -51,15 +42,22 @@
                     </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">
+        <div class="modal" id="modal-config-dialog">
+            <div class="modal-content">
+                <h2>
+                    <span data-l10n="text-content">Configuration window</span>
+                    <span class="modal-button" id="modal-close-btn">&#215;</span>
+		</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>
+                </div>
+            </div>
+        </div>
+        
+	<div id="content">
             <table id="board">
                 <tr><td class="corner"></td></tr>
             </table>
@@ -79,6 +77,7 @@
             <p id="help-turn" data-l10n="text-content">Who's turn? Click on the Turn button!</p>
             <button id="clear-rack" class="minibutton" data-l10n="text-content">Put back all the tiles of&#10;your rack in the bag</button>
             <button id="show-rack" class="minibutton" data-l10n="text-content">Show my rack to other players</button>
+            <button id="modal-config-btn" class="text-content" data-l10n="text-content">Configuration</button>
         </div>
     </body>
 </html>
diff --git a/public/trivabble.css b/public/trivabble.css
index fa5119b..66d8f76 100644
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -482,11 +482,24 @@ td.blink {
     background-color: white;
     padding: 1rem 1.5rem;
     width: 24rem;
-    border-radius: 0.1rem;
+    border-radius: 0.3rem;
 }
-.modal-buttons {
+.modal-content h2 {
+    margin: 0px;
+    font-weight: bold;
+    font-size: large;
+}
+.modal-button {
     float: right;
-    padding-top: 1rem;
+    width: 1.5rem;
+    line-height: 1.5rem;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    background-color: lightgray;
+}
+.modal-button:hover {
+    background-color: darkgray;
 }
 .show-modal {
     opacity: 1;
diff --git a/public/trivabble.js b/public/trivabble.js
index b7456be..fbcf957 100644
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -1610,7 +1610,7 @@
         helpClear.onclick  = clearGame;
 
 	document.getElementById("modal-config-btn").onclick = showConfig;
-	document.getElementById("modal-cancel-btn").onclick = showConfig;
+	document.getElementById("modal-close-btn").onclick = showConfig;
     }
 
     function initGame() {
-- 
2.30.2