Update OPTIONS UI

giongto35 · Mar 11, 2024 · a521411 · a521411
1 parent f8392ab
commit a521411
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 167 deletions.
diff --git a/web/css/main.css b/web/css/main.css
@@ -40,7 +40,7 @@ body {
     background-image: url('/img/ui/bg.jpg');
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    border-radius: 22px;
+    border-radius: 24px;
 
     user-select: none;
 }

diff --git a/web/css/ui.css b/web/css/ui.css
@@ -3,67 +3,6 @@
     display: none !important;
 }
 
-.modal-window {
-    position: fixed;
-
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    background-color: rgba(0, 0, 0, 0.7);
-
-    z-index: 9999;
-    visibility: hidden;
-    opacity: 0;
-    pointer-events: none;
-
-    -webkit-transition: all 0.2s;
-    transition: all 0.2s;
-}
-
-.modal-visible {
-    visibility: visible;
-    opacity: 1;
-    pointer-events: auto;
-}
-
-
-.modal-window > div {
-    width: 42vw;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    padding: 2em;
-    background: #ffffff;
-}
-
-.modal-window header {
-    font-weight: bold;
-}
-
-.modal-window h1 {
-    font-size: 150%;
-    margin: 0 0 15px;
-}
-
-.semi-button {
-    cursor: pointer;
-}
-
-
-#app-settings {
-    font-family: monospace;
-}
-
-#settings-data {
-    overflow-y: auto;
-    height: 50vh;
-    padding: 1em 0;
-}
-
 .container {
     display: grid;
     -webkit-box-pack: center;
@@ -73,10 +12,6 @@
     height: 100vh;
 }
 
-.modal-window div:not(:last-of-type) {
-    margin-bottom: 15px;
-}
-
 .btn2 {
     font-size: 80%;
     padding: .2em .4em;
@@ -88,6 +23,10 @@
     height: 1rem;
 }
 
+.settings {
+    padding: 0 1em 1em 1em;
+}
+
 .settings__controls {
     color: #aaa;
     font-size: 80%;
@@ -106,21 +45,23 @@
 
 .settings__option-name {
     background-color: beige;
-    padding: 1em;
+    margin: 1em 0 .5em 0;
 }
 
 .restart-needed-asterisk:after {
     content: '*';
     color: red;
 }
 
-.settings__option-value {
-
+.settings__option-value select, .settings__option-value input {
+    font-family: '6809', monospace;
+    width: 6em;
 }
 
 .keyboard-bindings .settings__option-value {
     display: grid;
     grid-template-columns: 25% 25% auto auto;
+    row-gap: 5px;
 }
 
 .binding-element {
@@ -129,19 +70,17 @@
     align-items: center;
 }
 
-/* Server list styling */
-#servers {
-    background-color: white;
-    font-size: 12px;
-
+.binding-element button {
     font-family: '6809', monospace;
+    min-width: 6em;
+}
 
-    z-index: 1;
-    position: relative;
-
-    cursor: default;
+.binding-element div {
+    font-size: 80%;
 }
 
+/* Server list styling */
+
 .server-list div {
     display: grid;
     grid-template-columns: .2fr 1.2fr 1fr .5fr .2fr;
@@ -169,6 +108,16 @@
     display: flex;
     flex-grow: 1;
     flex-direction: column;
+
+    background-color: white;
+    font-size: 12px;
+
+    font-family: '6809', monospace;
+
+    z-index: 1;
+    position: relative;
+
+    cursor: default;
 }
 
 .panel__header {
@@ -209,7 +158,7 @@
     background-color: #ededed;
 
     padding: 2px 4px;
-    width: 0.7rem;
+    min-width: 0.7rem;
     text-align: center;
 }
 
@@ -224,6 +173,10 @@
     font-weight: bold;
 }
 
+.panel__button_separator {
+    width: .5em;
+}
+
 
 .app-button {
     position: absolute;

diff --git a/web/index.html b/web/index.html
@@ -15,8 +15,8 @@
 
     <link rel="icon" href="data:,">
 
-    <link href="css/main.css?5" rel="stylesheet">
-    <link href="css/ui.css?v=1" rel="stylesheet">
+    <link href="css/main.css?v=6" rel="stylesheet">
+    <link href="css/ui.css?v=2" rel="stylesheet">
     <title>Cloud Retro</title>
 </head>
 <body>
@@ -46,6 +46,7 @@
     </div>
 
     <div id="servers"></div>
+    <div id="settings"></div>
 
     <div id="guide-txt">
         <b>Arrows</b> (move), <b>ZXCVAS;'./</b> (game ABXYL1-L3R1-R3), <b>1/2</b> (1st/2nd player), <b>Shift/Enter/K/L</b> (select/start/save/load), <b>F</b> (fullscreen), <b>share</b> (copy the link to the clipboard)
@@ -94,29 +95,14 @@
     <div id="btn-rec" class="btn" value="rec"></div>
     {{end}}
 </div>
-<div id="app-settings" class="modal-window">
-    <div>
-        <div class="settings__controls">
-            <span title="Save" id="settings__controls__save" class="semi-button">↑</span>
-            <span title="Load" id="settings__controls__load" class="semi-button">↓</span>
-            <span title="Reset" id="settings__controls__reset" class="semi-button">⟲</span>
-            <span title="Close" id="settings__controls__close" class="semi-button">X</span>
-        </div>
-        <h1>Options</h1>
-        <div id="settings-data"></div>
-        <div>
-            * -- applied after application restart
-        </div>
-    </div>
-</div>
 <div class="source">
     <span id="v">69ff8ae</span>
     <a rel="noopener noreferrer" target="_blank" href="https://github.com/giongto35/cloud-game">
         Source code on GitHub
     </a>
 </div>
 
-<script src="js/gui/gui.js?v=1"></script>
+<script src="js/gui/gui.js?v=2"></script>
 <script src="js/utils.js?v1"></script>
 <script src="js/gui/message.js?v=2"></script>
 <script src="js/log.js?v=5"></script>

diff --git a/web/js/gui/gui.js b/web/js/gui/gui.js
@@ -26,8 +26,7 @@ const gui = (() => {
         return el;
     }
 
-    const select = (key = '', callback = function () {
-    }, values = {values: [], labels: []}, current = '') => {
+    const select = (key = '', callback = () => ({}), values = {values: [], labels: []}, current = '') => {
         const el = _create();
         const select = _create('select');
         select.onchange = event => {
@@ -70,6 +69,10 @@ const gui = (() => {
             el.classList.add('panel__header__controls');
 
             buttons.forEach((b => el.append(_create('span', (el) => {
+                if (Object.keys(b).length === 0) {
+                    el.classList.add('panel__button_separator');
+                    return
+                }
                 el.classList.add('panel__button');
                 if (b.cl) b.cl.forEach(class_ => el.classList.add(class_));
                 if (b.title) el.title = b.title;
@@ -110,6 +113,7 @@ const gui = (() => {
         }
 
         return {
+            contentEl: _content,
             isHidden: () => !state.shown,
             setContent,
             setLoad,