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 @@
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+ セーブデータ
+
+
セーブデータを ZIP ファイルに保存したり、ZIP ファイルから復元できます。
+
+
+
+
+
+
-
+
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 @@
+///
+
+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 @@
///
///
+///
///
///
///
@@ -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
;
@@ -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();