From b2c1ed56e90be8da34ab2bbcbbd372f1c31daf6d Mon Sep 17 00:00:00 2001
From: kichikuou <KichikuouChrome@gmail.com>
Date: Sun, 26 Mar 2017 22:18:53 +0900
Subject: [PATCH] Settings dialog

---
 docs/style.css      | 44 +++++++++++++++++++++--
 docs/xsystem35.html | 88 +++++++++++++++++++++++++++++++++------------
 shell/settings.ts   | 26 ++++++++++++++
 shell/shell.ts      |  5 +++
 4 files changed, 139 insertions(+), 24 deletions(-)
 create mode 100644 shell/settings.ts

diff --git a/docs/style.css b/docs/style.css
index d4c57e3..4ddc5a4 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -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;
+}
diff --git a/docs/xsystem35.html b/docs/xsystem35.html
index 622f5a2..7ef3047 100644
--- a/docs/xsystem35.html
+++ b/docs/xsystem35.html
@@ -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>
diff --git a/shell/settings.ts b/shell/settings.ts
new file mode 100644
index 0000000..256f69b
--- /dev/null
+++ b/shell/settings.ts
@@ -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);
+        }
+    }
+}
diff --git a/shell/shell.ts b/shell/shell.ts
index ee0d437..d2efad9 100644
--- a/shell/shell.ts
+++ b/shell/shell.ts
@@ -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();