From 4f0a4aedcd054a527a8190bf217abb15f09dc112 Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sun, 26 Jan 2025 21:04:55 -0500
Subject: [PATCH] refactor(gameobjects): create addText

---
 src/gameobjects/button.ts |  5 +++++
 src/gameobjects/index.ts  |  1 +
 src/gameobjects/text.ts   | 23 +++++++++++++++++++++++
 src/scenes/game.ts        | 20 ++++++++------------
 src/scenes/lose.ts        | 22 +++++++++-------------
 src/scenes/title.ts       | 22 +++++++++-------------
 src/scenes/tutorial.ts    | 29 ++++++++++++-----------------
 7 files changed, 67 insertions(+), 55 deletions(-)
 create mode 100644 src/gameobjects/text.ts

diff --git a/src/gameobjects/button.ts b/src/gameobjects/button.ts
index f3392ec..37eaf70 100644
--- a/src/gameobjects/button.ts
+++ b/src/gameobjects/button.ts
@@ -6,6 +6,7 @@ interface Props {
   y: number
   text: string
   onClick: () => void
+  fixed?: boolean
 }
 
 export function addButton(props: Props) {
@@ -19,6 +20,10 @@ export function addButton(props: Props) {
     color(255, 255, 255),
   ])
 
+  if (props.fixed) {
+    button.use(fixed())
+  }
+
   button.add([text(props.text), anchor('center'), color(0, 0, 0)])
 
   button.onHover(() => {
diff --git a/src/gameobjects/index.ts b/src/gameobjects/index.ts
index 909a588..5ce38c9 100644
--- a/src/gameobjects/index.ts
+++ b/src/gameobjects/index.ts
@@ -9,3 +9,4 @@ export * from './music'
 export * from './player'
 export * from './projectile'
 export * from './score'
+export * from './text'
diff --git a/src/gameobjects/text.ts b/src/gameobjects/text.ts
new file mode 100644
index 0000000..4a2291d
--- /dev/null
+++ b/src/gameobjects/text.ts
@@ -0,0 +1,23 @@
+interface Props {
+  width: number
+  height: number
+  x: number
+  y: number
+  text: string
+  fontSize?: number
+}
+
+export function addText(props: Props) {
+  const box = add([
+    rect(props.width, props.height),
+    pos(props.x, props.y),
+    anchor('center'),
+    color(255, 255, 255),
+  ])
+
+  return box.add([
+    text(props.text, { size: props.fontSize }),
+    anchor('center'),
+    color(0, 0, 0),
+  ])
+}
diff --git a/src/scenes/game.ts b/src/scenes/game.ts
index 7e65ef4..d2ff43f 100644
--- a/src/scenes/game.ts
+++ b/src/scenes/game.ts
@@ -6,6 +6,7 @@ import {
   addHealth,
   addPlayer,
   addScore,
+  addText,
   playMusic,
 } from '../gameobjects'
 import { gameState, levels } from '../helpers'
@@ -13,18 +14,13 @@ import { gameState, levels } from '../helpers'
 scene(Scene.Game, () => {
   gameState.init()
 
-  const textbox = add([
-    rect(600, 100),
-    pos(center().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),
-  ])
+  addText({
+    width: 600,
+    height: 100,
+    x: center().x,
+    y: 80,
+    text: 'WASD or arrow keys to move\nLeft click to shoot',
+  })
 
   addScore()
   playMusic()
diff --git a/src/scenes/lose.ts b/src/scenes/lose.ts
index 6bc521f..f46d9ad 100644
--- a/src/scenes/lose.ts
+++ b/src/scenes/lose.ts
@@ -1,22 +1,18 @@
 import { Scene, Sound } from '../constants'
-import { addButton } from '../gameobjects'
+import { addButton, addText } from '../gameobjects'
 
 scene(Scene.Lose, () => {
   const { x, y } = center()
   const margin = 100
 
-  const textbox = add([
-    rect(400, 100),
-    pos(x, y - margin),
-    anchor('center'),
-    color(255, 255, 255),
-  ])
-
-  textbox.add([
-    text('Game Over', { size: 48 }),
-    anchor('center'),
-    color(0, 0, 0),
-  ])
+  addText({
+    width: 400,
+    height: 100,
+    x,
+    y: y - margin,
+    text: 'Game Over',
+    fontSize: 48,
+  })
 
   addButton({
     width: 220,
diff --git a/src/scenes/title.ts b/src/scenes/title.ts
index af2c37d..73395e8 100644
--- a/src/scenes/title.ts
+++ b/src/scenes/title.ts
@@ -1,22 +1,18 @@
 import { Scene, Sound } from '../constants'
-import { addButton } from '../gameobjects'
+import { addButton, addText } from '../gameobjects'
 
 scene(Scene.Title, () => {
   const { x, y } = center()
   const buttonHeight = 80
 
-  const textbox = add([
-    rect(400, 100),
-    pos(x, y - buttonHeight * 2),
-    anchor('center'),
-    color(255, 255, 255),
-  ])
-
-  textbox.add([
-    text('Bubble Gun', { size: 48 }),
-    anchor('center'),
-    color(0, 0, 0),
-  ])
+  addText({
+    width: 400,
+    height: 100,
+    x,
+    y: y - buttonHeight * 2,
+    text: 'Bubble Gun',
+    fontSize: 48,
+  })
 
   addButton({
     width: 220,
diff --git a/src/scenes/tutorial.ts b/src/scenes/tutorial.ts
index e55eaa5..df2cac7 100644
--- a/src/scenes/tutorial.ts
+++ b/src/scenes/tutorial.ts
@@ -1,25 +1,9 @@
 import { Scene, Sound } from '../constants'
-import { addPlayer } from '../gameobjects'
-import { addButton } from '../gameobjects'
+import { addButton, addPlayer, addText } 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,
@@ -31,5 +15,16 @@ scene(Scene.Tutorial, () => {
       play(Sound.Hit)
       go(Scene.Game)
     },
+    fixed: true,
   })
+
+  addText({
+    width: 600,
+    height: 100,
+    x,
+    y: 80,
+    text: 'WASD or arrow keys to move',
+  })
+
+  addPlayer()
 })