Settings dialog

2026-10-01 19:28:00 +03:00 · 2017-03-26 22:25:32 +09:00
parent 90f8eb71dc
commit b2c1ed56e9
4 changed files with 139 additions and 24 deletions
@@ -1,7 +1,40 @@
+header {
+    background-color: #464646;
+    color: white;
+}
+
+.navbar {
+    max-width: 640px;
+    margin: 0 auto;
+    padding: 1rem 0;
+}
+
+.navbar-brand {
+    color: white;
+}
+
+#zoom {
+    min-width: 0;
+    background: transparent url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right .75rem center / .8rem 1rem;
+    color: white;
+}
+
+.navbar .btn-link {
+    font-size: large;
+    color: white;
+}
+
+.navbar .btn.btn-link:focus,
+.navbar .btn.btn-link:hover,
+.navbar .btn.btn-link:active,
+.navbar .btn.btn-link.active {
+  color: #cccccc;
+}
+
 .contents {
    -webkit-user-select: none;
    max-width: 640px;
-    margin: 4ex auto 0;
+    margin: 2ex auto 0;
 }

 #loader ul {
@@ -33,7 +66,6 @@ canvas.emscripten {

 #volume-control {
    float: right;
-    margin-right: 20px;
 }

 #volume-control-icon {
@@ -48,3 +80,11 @@ canvas.emscripten {
    height: 30px;
    vertical-align: middle;
 }
+
+.settings section {
+	margin-bottom: 2rem;
+}
+
+.settings section > div {
+	padding-left: 2rem;
+}
@@ -3,11 +3,38 @@
  <head>
    <meta charset="utf-8">
    <title>xsystem35 for web</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.8/spectre.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.10/spectre.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
+
+  <header>
+    <div class="navbar">
+      <section class="navbar-primary">
+        <span class="navbar-brand">鬼畜王 on Web</span>
+      </section>
+      <section class="navbar-section">
+        <select id="zoom" class="form-select mr-10" hidden>
+          <option value="1">100%</option>
+          <option value="1.25">125%</option>
+          <option value="1.5">150%</option>
+          <option value="2">200%</option>
+          <option value="3">300%</option>
+          <option value="fit">自動</option>
+        </select>
+
+        <div id="volume-control" class="mr-10" hidden>
+          <i id="volume-control-icon" class="fa fa-volume-up"></i>
+          <input id="volume-control-slider" type="range">
+        </div>
+
+        <button id="settings-button" class="btn btn-link mr-10"><i class="fa fa-cog"></i></button>
+        <button class="btn btn-link"><i class="fa fa-question-circle"></i></button>
+      </section>
+    </div>
+  </header>
+
  <div class="contents">

    <div id="loader">
@@ -21,33 +48,50 @@

    <div id="xsystem35" hidden>
      <audio id="audio"></audio>
-
      <div class="emscripten" id="status"></div>
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
+    </div>
+  </div>

-      <div>
-        <select id="zoom" class="form-select">
-          <option value="1">100%</option>
-          <option value="1.25">125%</option>
-          <option value="1.5">150%</option>
-          <option value="2">200%</option>
-          <option value="3">300%</option>
-          <option value="fit">自動</option>
-        </select>
-        <label for="smoothing" class="form-checkbox">
-          <input type="checkbox" id="smoothing" checked><i class="form-icon"></i>Smoothing
-        </label>
-        <label for="antialias" class="form-checkbox">
-          <input type="checkbox" id="antialias" checked><i class="form-icon"></i>Antialias
-        </label>
-        <div id="volume-control">
-          <i id="volume-control-icon" class="fa fa-volume-up"></i>
-          <input id="volume-control-slider" type="range">
-        </div>
+  <!-- Settings -->
+  <div id="settings-modal" class="modal">
+    <div class="modal-overlay"></div>
+    <div class="modal-container">
+      <div class="modal-header">
+        <div class="modal-title">設定</div>
+      </div>
+      <div class="modal-body settings">
+        <section>
+          <h5>表示</h5>
+          <div>
+            <label for="smoothing" class="form-checkbox">
+              <input type="checkbox" id="smoothing" checked>
+              <i class="form-icon"></i>拡大時に補間する
+            </label>
+          </div>
+          <div>
+            <label for="antialias" class="form-checkbox">
+              <input type="checkbox" id="antialias" checked>
+              <i class="form-icon"></i>文字をなめらかに表示する
+            </label>
+          </div>
+        </section>
+
+        <section>
+          <h5>セーブデータ</h5>
+          <div>
+            <p>セーブデータを ZIP ファイルに保存したり、ZIP ファイルから復元できます。</p>
+            <button class="btn mr-10">保存</button>
+            <button class="btn">復元</button>
+          </div>
+        </section>
+      </div>
+      <div class="modal-footer">
+        <button id="settings-close" class="btn btn-primary">OK</button>
      </div>
    </div>
-
  </div>
+
  <script>
    var Module = {};
  </script>
@@ -0,0 +1,26 @@
+/// <reference path="util.ts" />
+
+namespace xsystem35 {
+    export class Settings {
+        private keyDownHandler: (ev: KeyboardEvent) => void;
+        constructor() {
+            $('#settings-button').addEventListener('click', this.openModal.bind(this));
+            $('#settings-close').addEventListener('click', this.closeModal.bind(this));
+            this.keyDownHandler = (ev: KeyboardEvent) => {
+                if (ev.keyCode === 27)  // escape
+                    this.closeModal();
+            };
+            $('.modal-overlay').addEventListener('click', this.closeModal.bind(this));
+        }
+
+        private openModal() {
+            $('#settings-modal').classList.add('active');
+            document.addEventListener('keydown', this.keyDownHandler);
+        }
+
+        private closeModal() {
+            $('#settings-modal').classList.remove('active');
+            document.removeEventListener('keydown', this.keyDownHandler);
+        }
+    }
+}
@@ -1,5 +1,6 @@
 /// <reference path="util.ts" />
 /// <reference path="loader.ts" />
+/// <reference path="settings.ts" />
 /// <reference path="zoom.ts" />
 /// <reference path="volume.ts" />
 /// <reference path="cdda.ts" />
@@ -14,6 +15,7 @@ namespace xsystem35 {
    ].join('\n');
    export let cdPlayer: CDPlayer;
    export let audio: AudioManager;
+    export let settings: Settings;

    class System35Shell {
        readonly fileSystemReady: Promise<any>;
@@ -62,11 +64,14 @@ namespace xsystem35 {
            this.antialiasCheckbox.addEventListener('change', this.antialiasChanged.bind(this));
            this.antialiasCheckbox.checked = localStorage.getItem('antialias') !== 'false';
            xsystem35.audio = new AudioManager(this.volumeControl);
+            xsystem35.settings = new Settings();
        }

        run() {
            $('#loader').hidden = true;
            $('#xsystem35').hidden = false;
+            $('#zoom').hidden = false;
+            $('#volume-control').hidden = false;
            setTimeout(() => {
                Module.callMain();
                this.antialiasChanged();