refactor(gameobjects): modularize button

src/gameobjects/button.ts

@@ -0,0 +1,35 @@
+interface Props {
+  width: number
+  height: number
+  radius?: number
+  x: number
+  y: number
+  text: string
+  onClick: () => void
+}
+
+export function addButton(props: Props) {
+  const button = add([
+    rect(props.width, props.height, { radius: props.radius }),
+    pos(props.x, props.y),
+    area(),
+    scale(1),
+    anchor('center'),
+    outline(4),
+    color(255, 255, 255),
+  ])
+
+  button.add([text(props.text), anchor('center'), color(0, 0, 0)])
+
+  button.onHover(() => {
+    button.scaleTo(1.1)
+  })
+
+  button.onHoverEnd(() => {
+    button.scaleTo(1)
+  })
+
+  button.onClick(props.onClick)
+
+  return button
+}

src/gameobjects/index.ts

@@ -1,4 +1,5 @@
 export * from './bubble'
+export * from './button'
 export * from './enemy'
 export * from './health'
 export * from './hole'

src/scenes/lose.ts

@@ -1,4 +1,5 @@
 import { Scene, Sound } from '../constants'
+import { addButton } from '../gameobjects'
 
 scene(Scene.Lose, () => {
   const { x, y } = center()
@@ -17,28 +18,16 @@ scene(Scene.Lose, () => {
     color(0, 0, 0),
   ])
 
-  const button = add([
-    rect(220, 80, { radius: 8 }),
-    pos(x, y + margin),
-    area(),
-    scale(1),
-    anchor('center'),
-    outline(4),
-    color(255, 255, 255),
-  ])
-
-  button.add([text('Restart'), anchor('center'), color(0, 0, 0)])
-
-  button.onHover(() => {
-    button.scaleTo(1.1)
-  })
-
-  button.onHoverEnd(() => {
-    button.scaleTo(1)
-  })
-
-  button.onClick(() => {
-    play(Sound.Hit)
-    go(Scene.Game)
+  addButton({
+    width: 220,
+    height: 80,
+    radius: 8,
+    x,
+    y: y + margin,
+    text: 'Restart',
+    onClick() {
+      play(Sound.Hit)
+      go(Scene.Game)
+    },
   })
 })

src/scenes/title.ts

@@ -1,4 +1,5 @@
 import { Scene, Sound } from '../constants'
+import { addButton } from '../gameobjects'
 
 scene(Scene.Title, () => {
   const { x, y } = center()
@@ -17,28 +18,16 @@ scene(Scene.Title, () => {
     color(0, 0, 0),
   ])
 
-  const button = add([
-    rect(220, 80, { radius: 8 }),
-    pos(x, y + margin),
-    area(),
-    scale(1),
-    anchor('center'),
-    outline(4),
-    color(255, 255, 255),
-  ])
-
-  button.add([text('Play'), anchor('center'), color(0, 0, 0)])
-
-  button.onHover(() => {
-    button.scaleTo(1.1)
-  })
-
-  button.onHoverEnd(() => {
-    button.scaleTo(1)
-  })
-
-  button.onClick(() => {
-    play(Sound.Hit)
-    go(Scene.Game)
+  addButton({
+    width: 220,
+    height: 80,
+    radius: 8,
+    x,
+    y: y + margin,
+    text: 'Play',
+    onClick() {
+      play(Sound.Hit)
+      go(Scene.Game)
+    },
   })
 })