refactor(gameobjects): create addText

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(() => {

src/gameobjects/index.ts

@@ -9,3 +9,4 @@ export * from './music'
 export * from './player'
 export * from './projectile'
 export * from './score'
+export * from './text'

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),
+  ])
+}

src/scenes/game.ts

@@ -6,25 +6,21 @@ import {
   addHealth,
   addPlayer,
   addScore,
+  addText,
   playMusic,
 } from '../gameobjects'
 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()

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,

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,

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()
 })