From f5a9748be2ebe18b080fd4ed03b84420dcb13992 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 26 Jan 2025 13:13:54 -0500
Subject: [PATCH] feat(scenes): add tutorial

---
 src/constants/scene.ts |  1 +
 src/scenes/index.ts    |  1 +
 src/scenes/title.ts    | 21 +++++++++++++++++----
 src/scenes/tutorial.ts | 35 +++++++++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+), 4 deletions(-)
 create mode 100644 src/scenes/tutorial.ts

diff --git a/src/constants/scene.ts b/src/constants/scene.ts
index bd17f63..897b41d 100644
--- a/src/constants/scene.ts
+++ b/src/constants/scene.ts
@@ -3,4 +3,5 @@ export enum Scene {
   Lose = 'Lose',
   Preload = 'Preload',
   Title = 'Title',
+  Tutorial = 'Tutorial',
 }
diff --git a/src/scenes/index.ts b/src/scenes/index.ts
index 1cbc705..ebb9353 100644
--- a/src/scenes/index.ts
+++ b/src/scenes/index.ts
@@ -2,6 +2,7 @@ import './game'
 import './lose'
 import './preload'
 import './title'
+import './tutorial'
 
 import { Scene } from '../constants'
 
diff --git a/src/scenes/title.ts b/src/scenes/title.ts
index 621665a..af2c37d 100644
--- a/src/scenes/title.ts
+++ b/src/scenes/title.ts
@@ -3,11 +3,11 @@ import { addButton } from '../gameobjects'
 
 scene(Scene.Title, () => {
   const { x, y } = center()
-  const margin = 100
+  const buttonHeight = 80
 
   const textbox = add([
     rect(400, 100),
-    pos(x, y - margin),
+    pos(x, y - buttonHeight * 2),
     anchor('center'),
     color(255, 255, 255),
   ])
@@ -20,14 +20,27 @@ scene(Scene.Title, () => {
 
   addButton({
     width: 220,
-    height: 80,
+    height: buttonHeight,
     radius: 8,
     x,
-    y: y + margin,
+    y: y + buttonHeight,
     text: 'Play',
     onClick() {
       play(Sound.Hit)
       go(Scene.Game)
     },
   })
+
+  addButton({
+    width: 220,
+    height: buttonHeight,
+    radius: 8,
+    x,
+    y: y + buttonHeight * 2 + 20,
+    text: 'Tutorial',
+    onClick() {
+      play(Sound.Hit)
+      go(Scene.Tutorial)
+    },
+  })
 })
diff --git a/src/scenes/tutorial.ts b/src/scenes/tutorial.ts
new file mode 100644
index 0000000..e55eaa5
--- /dev/null
+++ b/src/scenes/tutorial.ts
@@ -0,0 +1,35 @@
+import { Scene, Sound } from '../constants'
+import { addPlayer } from '../gameobjects'
+import { addButton } from '../gameobjects'
+
+scene(Scene.Tutorial, () => {
+  const { x } = center()
+
+  const textbox = add([
+    rect(600, 100),
+    pos(x, 80),
+    anchor('center'),
+    color(255, 255, 255),
+  ])
+
+  textbox.add([
+    text('WASD or arrow keys to move\nLeft click to shoot'),
+    anchor('center'),
+    color(0, 0, 0),
+  ])
+
+  addPlayer()
+
+  addButton({
+    width: 220,
+    height: 80,
+    radius: 8,
+    x,
+    y: height() - 80,
+    text: 'Play',
+    onClick() {
+      play(Sound.Hit)
+      go(Scene.Game)
+    },
+  })
+})