Add toasts

docs/style.css

@@ -100,3 +100,18 @@ canvas.emscripten {
 .settings section > div {
 	padding-left: 2rem;
 }
+
+.toast-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 400px;
+    padding: 30px;
+    z-index: 500;
+}
+
+.toast {
+    -webkit-animation: slide-down .2s ease 1;
+    animation: slide-down .2s ease 1;
+    margin: 5px;
+}

docs/xsystem35.html

@@ -92,6 +92,8 @@
     </div>
   </div>
 
+  <div class="toast-container"></div>
+
   <script>
     var Module = {};
   </script>

shell/settings.ts

@@ -73,11 +73,13 @@ namespace xsystem35 {
                 } else if (file.name.toLowerCase().endsWith('.asd')) {
                     addSaveFile(file.name, await readFileAsArrayBuffer(file));
                 } else {
-                    throw('ファイルを認識できません。');
+                    throw('Unknown file type: ' + file.name);
                 }
                 xsystem35.shell.syncfs(0);
+                xsystem35.shell.addToast('成功しました。', 'success');
             } catch (err) {
-                console.log(err);
+                xsystem35.shell.addToast('セーブデータを復元できませんでした。', 'danger');
+                console.warn(err);
             }
         }
     }

shell/shell.ts

@@ -97,6 +97,22 @@ namespace xsystem35 {
             this.zoom.handleZoom();
         }
 
+        addToast(msg: string, type?: 'success' | 'danger') {
+            let container = $('.toast-container');
+            let div = document.createElement('div');
+            div.classList.add('toast');
+            if (type)
+                div.classList.add('toast-' + type);
+            div.innerText = msg;
+            let btn = document.createElement('button');
+            btn.setAttribute('class', 'btn btn-clear float-right');
+            function dismiss() { container.removeChild(div); }
+            btn.addEventListener('click', dismiss);
+            setTimeout(dismiss, 5000);
+            div.insertBefore(btn, div.firstChild);
+            container.insertBefore(div, container.firstChild);
+        }
+
         private fsyncTimer: number;
         syncfs(timeout = 100) {
             window.clearTimeout(this.fsyncTimer);