From 6f7d54de87fc21a3e81217cddccea5561216559a Mon Sep 17 00:00:00 2001
From: Mark <mark@remarkablemark.org>
Date: Sat, 25 Jan 2025 20:25:01 -0500
Subject: [PATCH] refactor(gameobjects): modularize button

---
 src/gameobjects/button.ts | 35 +++++++++++++++++++++++++++++++++++
 src/gameobjects/index.ts  |  1 +
 src/scenes/lose.ts        | 35 ++++++++++++-----------------------
 src/scenes/title.ts       | 35 ++++++++++++-----------------------
 4 files changed, 60 insertions(+), 46 deletions(-)
 create mode 100644 src/gameobjects/button.ts

diff --git a/src/gameobjects/button.ts b/src/gameobjects/button.ts
new file mode 100644
index 0000000..f3392ec
--- /dev/null
+++ b/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
+}
diff --git a/src/gameobjects/index.ts b/src/gameobjects/index.ts
index 09ca566..635dee1 100644
--- a/src/gameobjects/index.ts
+++ b/src/gameobjects/index.ts
@@ -1,4 +1,5 @@
 export * from './bubble'
+export * from './button'
 export * from './enemy'
 export * from './health'
 export * from './hole'
diff --git a/src/scenes/lose.ts b/src/scenes/lose.ts
index 6fcc9eb..6bc521f 100644
--- a/src/scenes/lose.ts
+++ b/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)
+    },
   })
 })
diff --git a/src/scenes/title.ts b/src/scenes/title.ts
index 068f4b2..8689064 100644
--- a/src/scenes/title.ts
+++ b/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)
+    },
   })
 })