feat(scenes): add Lose

src/constants/key.ts

@@ -9,6 +9,7 @@ const image = {
 
 const scene = {
   boot: 'boot',
+  lose: 'lose',
   main: 'main',
   menu: 'menu',
   win: 'win',

src/scenes/Lose.tsx

@@ -0,0 +1,42 @@
+import { Scene } from 'phaser';
+import { render, Text } from 'phaser-jsx';
+
+import { Button } from '../components';
+import { key } from '../constants';
+
+export class Lose extends Scene {
+  constructor() {
+    super(key.scene.lose);
+  }
+
+  create() {
+    const { centerX, centerY } = this.cameras.main;
+
+    render(
+      <>
+        <Text
+          text="You Lose!"
+          x={centerX}
+          y={centerY - 100}
+          style={{
+            color: 'white',
+            fontSize: '36px',
+          }}
+          originX={0.5}
+          originY={0.5}
+        />
+
+        <Button
+          center
+          fixed
+          x={centerX}
+          y={centerY + 100}
+          onClick={() => this.scene.start(key.scene.main, { level: 0 })}
+        >
+          Restart
+        </Button>
+      </>,
+      this,
+    );
+  }
+}

src/scenes/Main.tsx

@@ -85,6 +85,10 @@ export class Main extends Phaser.Scene {
           0,
           1,
         );
+
+        if (this.vignette.radius === 0) {
+          this.scene.start(key.scene.lose);
+        }
       },
       callbackScope: this,
       loop: true,

src/scenes/index.ts

@@ -1,4 +1,5 @@
 export * from './Boot';
+export * from './Lose';
 export * from './Main';
 export * from './Menu';
 export * from './Win';