Added a nice pause reminder

Author: torch2424

src/components/wasmboyCanvas/wasmboyCanvas.js

@@ -132,8 +132,25 @@ export default class WasmBoyCanvas extends Component {
         onPlay: () => {
           // This is to show/hide the
           // Insert cartridge
-          this.setState({
-            ...this.state
+          setTimeout(() => {
+            this.setState(
+              {
+                ...this.state
+              },
+              100
+            );
+          });
+        },
+        onPause: () => {
+          // This is to show/hide the
+          // Insert cartridge
+          setTimeout(() => {
+            this.setState(
+              {
+                ...this.state
+              },
+              100
+            );
           });
         },
         saveStateCallback: saveStateObject => {
@@ -233,13 +250,20 @@ export default class WasmBoyCanvas extends Component {
       );
     }
 
+    // Get a pause overlay
+    let pauseOverlay = <div />;
+    if (WasmBoy.isLoadedAndStarted() && WasmBoy.isPaused()) {
+      pauseOverlay = <div class="wasmboy-canvas__pause-overlay">Paused ⏸️</div>;
+    }
+
     return (
       <div class={canvasClasses.join(" ")} aria-hidden="true">
         <div class="wasmboy-canvas__canvas-container">
           <canvas id="wasmboy-canvas" />
         </div>
         {insertCartridge}
         {debugOverlay}
+        {pauseOverlay}
       </div>
     );
   }

src/components/wasmboyCanvas/wasmboyCanvas.scss

@@ -69,6 +69,19 @@
     z-index: 4;
   }
 
+  &__pause-overlay {
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+
+    padding: 5px;
+
+    background-color: $aesthetic-50-transparent;
+    color: $aesthetic-white;
+
+    z-index: 5;
+  }
+
   &__canvas-container {
     position: absolute;
     top: 0px;