Black background while playing

docs/style.css

@@ -55,6 +55,13 @@ header {
     content: " (未選択)";
 }
 
+.bgblack-fade {
+    background-color: black;
+    transition-property: background-color;
+    transition-duration: 1s;
+    transition-timing-function: linear;
+}
+
 /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
 canvas.emscripten {
 	border: 0px none;

shell/loader.ts

@@ -3,17 +3,14 @@
 
 namespace xsystem35 {
     export class ImageLoader {
-        readonly installed: Promise<any>;
-        private installDone: () => void;
         private imgFile: File;
         private cueFile: File;
         private imageReader: CDImage.Reader;
 
-        constructor(private fileSystemReady: Promise<any>) {
+        constructor(private shell: System35Shell) {
             $('#fileselect').addEventListener('change', this.handleFileSelect.bind(this), false);
             document.body.ondragover = this.handleDragOver.bind(this);
             document.body.ondrop = this.handleDrop.bind(this);
-            this.installed = new Promise((resolve) => { this.installDone = resolve; });
         }
 
         getCDDA(track: number): Promise<Blob> {
@@ -55,7 +52,7 @@ namespace xsystem35 {
             }
             if (this.imgFile && this.cueFile) {
                 this.imageReader = await CDImage.createReader(this.imgFile, this.cueFile);
-                await this.fileSystemReady;
+                await this.shell.fileSystemReady;
                 this.install();
             }
         }
@@ -79,6 +76,8 @@ namespace xsystem35 {
                 this.setError('インストールできません。GAMEDATAフォルダが見つかりません。');
                 return;
             }
+            this.shell.installStarted();
+
             let grGenerator = new GameResourceGenerator();
             for (let e of await isofs.readDir(gamedata)) {
                 if (!e.name.toLowerCase().endsWith('.ald'))
@@ -91,7 +90,7 @@ namespace xsystem35 {
             }
             FS.writeFile('xsystem35.gr', grGenerator.generate());
             FS.writeFile('.xsys35rc', xsystem35.xsys35rc);
-            this.installDone();
+            this.shell.installed();
         }
 
         private setError(msg: string) {

shell/shell.ts

@@ -17,7 +17,7 @@ namespace xsystem35 {
     export let audio: AudioManager;
     export let settings: Settings;
 
-    class System35Shell {
+    export class System35Shell {
         readonly fileSystemReady: Promise<any>;
         private imageLoader: ImageLoader;
         status: HTMLElement = document.getElementById('status');
@@ -29,8 +29,7 @@ namespace xsystem35 {
             let fileSystemReady: () => void;
             this.fileSystemReady = new Promise((resolve) => { fileSystemReady = resolve; });
 
-            this.imageLoader = new ImageLoader(this.fileSystemReady);
-            this.imageLoader.installed.then(this.run.bind(this));
+            this.imageLoader = new ImageLoader(this);
             this.setStatus('Downloading...');
             window.onerror = () => {
                 this.setStatus('Exception thrown, see JavaScript console');
@@ -67,8 +66,12 @@ namespace xsystem35 {
             xsystem35.settings = new Settings();
         }
 
-        run() {
+        installStarted() {
             $('#loader').hidden = true;
+            document.body.classList.add('bgblack-fade');
+        }
+
+        installed() {
             $('#xsystem35').hidden = false;
             $('#zoom').hidden = false;
             $('#volume-control').hidden = false;