",
"license": "MIT",
+ "type": "module",
"scripts": {
- "lint": "eslint --config .eslintrc.js src/ --fix",
- "start": "cross-env NODE_ENV=development node fuse",
- "build": "cross-env NODE_ENV=production node fuse"
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "react": "^18.3.1",
+ "react-dom": "^18.3.1"
},
"devDependencies": {
- "babel-core": "^6.26.0",
- "babel-preset-es2015": "^6.24.1",
- "cross-env": "^5.1.3",
- "eslint": "^4.14.0",
- "eslint-config-marius": "^1.0.1",
- "eslint-plugin-import": "^2.8.0",
- "eslint-plugin-react": "^7.5.1",
- "fuse-box": "^2.5.0-beta.1",
- "prettier-eslint": "^8.7.0",
- "uglify-js": "^3.2.0"
+ "@types/react": "^18.3.12",
+ "@types/react-dom": "^18.3.1",
+ "@vitejs/plugin-react": "^4.3.4",
+ "autoprefixer": "^10.4.20",
+ "postcss": "^8.4.49",
+ "tailwindcss": "^3.4.16",
+ "typescript": "^5.6.3",
+ "vite": "^5.4.11"
}
}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..2e7af2b
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/static/audio/die.mp3 b/public/assets/audio/die.mp3
similarity index 100%
rename from static/audio/die.mp3
rename to public/assets/audio/die.mp3
diff --git a/static/audio/explode.mp3 b/public/assets/audio/explode.mp3
similarity index 100%
rename from static/audio/explode.mp3
rename to public/assets/audio/explode.mp3
diff --git a/static/audio/intro.mp3 b/public/assets/audio/intro.mp3
similarity index 100%
rename from static/audio/intro.mp3
rename to public/assets/audio/intro.mp3
diff --git a/static/audio/press.mp3 b/public/assets/audio/press.mp3
similarity index 100%
rename from static/audio/press.mp3
rename to public/assets/audio/press.mp3
diff --git a/static/audio/tick.mp3 b/public/assets/audio/tick.mp3
similarity index 100%
rename from static/audio/tick.mp3
rename to public/assets/audio/tick.mp3
diff --git a/static/fonts/digital.png b/public/assets/fonts/digital.png
similarity index 100%
rename from static/fonts/digital.png
rename to public/assets/fonts/digital.png
diff --git a/static/fonts/digital.xml b/public/assets/fonts/digital.xml
similarity index 100%
rename from static/fonts/digital.xml
rename to public/assets/fonts/digital.xml
diff --git a/static/images/favicon.ico b/public/assets/images/favicon.ico
similarity index 100%
rename from static/images/favicon.ico
rename to public/assets/images/favicon.ico
diff --git a/static/images/sprites/background.png b/public/assets/images/sprites/background.png
similarity index 100%
rename from static/images/sprites/background.png
rename to public/assets/images/sprites/background.png
diff --git a/static/images/sprites/bugs-0.png b/public/assets/images/sprites/bugs-0.png
similarity index 100%
rename from static/images/sprites/bugs-0.png
rename to public/assets/images/sprites/bugs-0.png
diff --git a/static/images/sprites/bugs-1.png b/public/assets/images/sprites/bugs-1.png
similarity index 100%
rename from static/images/sprites/bugs-1.png
rename to public/assets/images/sprites/bugs-1.png
diff --git a/static/images/sprites/bugs-2.png b/public/assets/images/sprites/bugs-2.png
similarity index 100%
rename from static/images/sprites/bugs-2.png
rename to public/assets/images/sprites/bugs-2.png
diff --git a/static/images/sprites/bugs-3.png b/public/assets/images/sprites/bugs-3.png
similarity index 100%
rename from static/images/sprites/bugs-3.png
rename to public/assets/images/sprites/bugs-3.png
diff --git a/static/images/sprites/bullets.png b/public/assets/images/sprites/bullets.png
similarity index 100%
rename from static/images/sprites/bullets.png
rename to public/assets/images/sprites/bullets.png
diff --git a/static/images/sprites/explosions-0.png b/public/assets/images/sprites/explosions-0.png
similarity index 100%
rename from static/images/sprites/explosions-0.png
rename to public/assets/images/sprites/explosions-0.png
diff --git a/static/images/sprites/explosions-1.png b/public/assets/images/sprites/explosions-1.png
similarity index 100%
rename from static/images/sprites/explosions-1.png
rename to public/assets/images/sprites/explosions-1.png
diff --git a/static/images/sprites/explosions-2.png b/public/assets/images/sprites/explosions-2.png
similarity index 100%
rename from static/images/sprites/explosions-2.png
rename to public/assets/images/sprites/explosions-2.png
diff --git a/static/images/sprites/explosions-3.png b/public/assets/images/sprites/explosions-3.png
similarity index 100%
rename from static/images/sprites/explosions-3.png
rename to public/assets/images/sprites/explosions-3.png
diff --git a/static/images/sprites/octocat-body.png b/public/assets/images/sprites/octocat-body.png
similarity index 100%
rename from static/images/sprites/octocat-body.png
rename to public/assets/images/sprites/octocat-body.png
diff --git a/static/images/sprites/octocat-tentacles.png b/public/assets/images/sprites/octocat-tentacles.png
similarity index 100%
rename from static/images/sprites/octocat-tentacles.png
rename to public/assets/images/sprites/octocat-tentacles.png
diff --git a/static/images/ui/case.png b/public/assets/images/ui/case.png
similarity index 100%
rename from static/images/ui/case.png
rename to public/assets/images/ui/case.png
diff --git a/static/images/ui/fire_pressed.jpg b/public/assets/images/ui/fire_pressed.jpg
similarity index 100%
rename from static/images/ui/fire_pressed.jpg
rename to public/assets/images/ui/fire_pressed.jpg
diff --git a/static/images/ui/left_pressed.jpg b/public/assets/images/ui/left_pressed.jpg
similarity index 100%
rename from static/images/ui/left_pressed.jpg
rename to public/assets/images/ui/left_pressed.jpg
diff --git a/static/images/ui/right_pressed.jpg b/public/assets/images/ui/right_pressed.jpg
similarity index 100%
rename from static/images/ui/right_pressed.jpg
rename to public/assets/images/ui/right_pressed.jpg
diff --git a/static/images/ui/texture.png b/public/assets/images/ui/texture.png
similarity index 100%
rename from static/images/ui/texture.png
rename to public/assets/images/ui/texture.png
diff --git a/src/App.tsx b/src/App.tsx
new file mode 100644
index 0000000..a784b37
--- /dev/null
+++ b/src/App.tsx
@@ -0,0 +1,26 @@
+import { useReducer } from 'react'
+import { gameReducer, initialState } from './state/gameReducer'
+import { useAssetLoader } from './hooks/useAssetLoader'
+import { useAudio } from './hooks/useAudio'
+import { useGameLoop } from './hooks/useGameLoop'
+import { useKeyboard } from './hooks/useKeyboard'
+import { useSoundEffects } from './hooks/useSoundEffects'
+import { Loader } from './components/Loader'
+import { ArcadeCabinet } from './components/ArcadeCabinet'
+
+export default function App() {
+ const [state, dispatch] = useReducer(gameReducer, undefined, initialState)
+ const play = useAudio()
+
+ useAssetLoader(dispatch)
+ useGameLoop(state.phase, dispatch)
+ useKeyboard(state.phase, state.player.dead, dispatch)
+ useSoundEffects(state, play)
+
+ return (
+ <>
+
+
+
+ )
+}
diff --git a/src/actors/bugs/bug.js b/src/actors/bugs/bug.js
deleted file mode 100644
index 78a58da..0000000
--- a/src/actors/bugs/bug.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { GAME } from '../../shared/config'
-
-class Bug extends Phaser.Group {
-
- constructor(game, name, coordinates, current, index, remove) {
-
- super(game, null, `${name}-skeleton`)
-
- this.x = coordinates.x
- this.y = coordinates.y
-
- this.active = false
- this.remove = remove
-
- const body = this.create(0, 0, `${name}-${current}`, index)
- const explosion = this.create(0, 0, `explosion-${current}`, index)
-
- body.alpha = GAME.alpha.disabled
- explosion.alpha = GAME.alpha.disabled
-
- this.explode = this.explode.bind(this)
- this.disable = this.disable.bind(this)
- this.activate = this.activate.bind(this)
-
- this.game.world.addChild(this)
-
- }
-
- explode() {
-
- const [, explosion] = this.children
- explosion.alpha = GAME.alpha.active
- this.active = true
- this.remove()
- this.game.sound.play('explode')
-
- }
-
- disable() {
-
- this.children.forEach(frame => (frame.alpha = GAME.alpha.disabled))
- this.active = false
-
- }
-
- activate() {
-
- const [body] = this.children
- body.alpha = GAME.alpha.active
- this.active = true
-
- }
-
-}
-
-export default Bug
diff --git a/src/actors/bugs/column.js b/src/actors/bugs/column.js
deleted file mode 100644
index fe49420..0000000
--- a/src/actors/bugs/column.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import Bug from './bug'
-
-class Column extends Phaser.Group {
-
- constructor(game, name, frame, current, player) {
-
- super(game, null, name)
-
- this.x = frame.x
- this.y = frame.y
-
- this.hit = false
- this.index = current
- this.currentPosition = 0
- this.player = player
-
- this.reset = this.reset.bind(this)
- this.render = this.render.bind(this)
- this.remove = this.remove.bind(this)
-
- frame.bugs.forEach((coordinates, index) => {
-
- this.addChild(new Bug(this.game, name, coordinates, current, index, this.remove))
-
- })
-
- this.game.world.addChild(this)
-
- }
-
- reset() {
-
- this.hit = false
- this.currentPosition = 0
- this.children.forEach(bug => bug.disable())
-
- }
-
- remove() {
-
- this.hit = true
- this.parent.remove(this.index)
-
- }
-
- render() {
-
- if (this.hit) {
-
- return this.reset()
-
- }
-
- const currentBug = this.children[this.currentPosition]
- const previousBug = this.children[this.currentPosition - 1]
- const nextBug = this.children[this.currentPosition + 1]
-
- currentBug.activate()
-
- if (previousBug) {
-
- previousBug.disable()
-
- }
-
- if (nextBug) {
-
- return this.currentPosition++
-
- }
-
- this.player.die()
-
- }
-
-}
-
-export default Column
diff --git a/src/actors/bugs/index.js b/src/actors/bugs/index.js
deleted file mode 100644
index 59e549a..0000000
--- a/src/actors/bugs/index.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { BUGS } from '../../shared/config'
-import { getUniqueInteger, getIsAvailable } from '../../shared/utils'
-
-import Column from './column'
-
-class Bugs extends Phaser.Group {
-
- constructor(game, name, player) {
-
- super(game, null, name)
-
- this.x = BUGS.x
- this.y = BUGS.y
-
- this.queue = []
- this.updateTime = 0
- this.cleanTime = 0
-
- BUGS.frames.forEach((frame, current) => {
-
- this.addChild(new Column(this.game, name, frame, current, player))
-
- })
-
- this.move = this.move.bind(this)
- this.spawn = this.spawn.bind(this)
- this.render = this.render.bind(this)
- this.remove = this.remove.bind(this)
- this.cleanup = this.cleanup.bind(this)
-
- this.game.world.addChild(this)
-
- }
-
- remove(column) {
-
- const index = this.queue.indexOf(column)
- this.queue.splice(index, 1)
- this.cleanTime = this.game.time.now
-
- }
-
- spawn() {
-
- if (this.queue.length === this.children.length) {
-
- return
-
- }
-
- const currentSpawn = getUniqueInteger(this.queue, this.children, this.game)
-
- this.queue.push(currentSpawn)
- this.updateTime = this.game.time.now
-
- }
-
- move() {
-
- if (!this.queue.length) {
-
- return
-
- }
-
- const current = this.queue.shift()
- const column = this.children[current]
-
- column.render()
-
- this.queue.push(current)
- this.updateTime = this.game.time.now
-
- }
-
- cleanup() {
-
- this.children.forEach(column => column.hit && column.reset())
-
- }
-
- render() {
-
- const isCleanAvailable = getIsAvailable(this.cleanTime, this.game.time.now)
- const isUpdateAvailable = getIsAvailable(this.updateTime, this.game.time.now)
-
- if (isCleanAvailable) {
-
- this.cleanup()
-
- }
-
- if (isUpdateAvailable) {
-
- const isSpawnFull = this.queue.length > BUGS.queue
-
- if (isSpawnFull) {
-
- this.game.sound.play('tick')
-
- return this.move()
-
- }
-
- return this.spawn()
-
- }
-
- }
-
-}
-
-export default Bugs
diff --git a/src/actors/bullets/bullet.js b/src/actors/bullets/bullet.js
deleted file mode 100644
index bd4625b..0000000
--- a/src/actors/bullets/bullet.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { GAME } from '../../shared/config'
-
-class Bullet extends Phaser.Sprite {
-
- constructor(game, name, coordinates) {
-
- super(game, coordinates.x, coordinates.y, name)
-
- this.active = false
- this.alpha = GAME.alpha.disabled
-
- this.disable = this.disable.bind(this)
- this.activate = this.activate.bind(this)
-
- this.game.world.addChild(this)
-
- }
-
- disable() {
-
- this.active = false
- this.alpha = GAME.alpha.disabled
-
- }
-
- activate() {
-
- this.active = true
- this.alpha = GAME.alpha.active
-
- }
-
-}
-
-export default Bullet
diff --git a/src/actors/bullets/column.js b/src/actors/bullets/column.js
deleted file mode 100644
index c7c3a82..0000000
--- a/src/actors/bullets/column.js
+++ /dev/null
@@ -1,104 +0,0 @@
-import Bullet from './bullet'
-
-class Column extends Phaser.Group {
-
- constructor(game, name, frame, index, remove, score, bugs) {
-
- super(game, null, name)
-
- this.x = frame.x
- this.y = frame.y
-
- this.hit = false
- this.index = index
- this.currentPosition = 3
-
- this.bugs = bugs
- this.score = score
- this.remove = remove
-
- this.reset = this.reset.bind(this)
- this.render = this.render.bind(this)
-
- frame.bullets.forEach(coordinates => {
-
- this.addChild(new Bullet(this.game, name, coordinates))
-
- })
-
- this.game.world.addChild(this)
-
- }
-
- reset() {
-
- this.hit = false
- this.currentPosition = 3
- this.children.forEach(bullet => bullet.disable())
- this.remove(this.index)
-
- }
-
- render() {
-
- if (this.hit) {
-
- return this.reset()
-
- }
-
- const currentBullet = this.children[this.currentPosition]
- const previousBullet = this.children[this.currentPosition + 1]
- const nextBullet = this.children[this.currentPosition - 1]
-
- const bugsColumn = this.bugs.children[this.index]
- const currentBug = bugsColumn.children[this.currentPosition]
- const nextBug = bugsColumn.children[this.currentPosition + 1]
-
- currentBullet.activate()
-
- if (previousBullet) {
-
- previousBullet.disable()
-
- }
-
- // fix collison bug
- // refactor this
- if (currentBug.active || nextBug.active) {
-
- this.hit = true
- this.score.add()
-
- if (currentBug.active) {
-
- return currentBug.explode()
-
- }
-
- currentBullet.disable()
- previousBullet.activate()
-
- if (nextBug.active) {
-
- return nextBug.explode()
-
- }
-
- }
-
- if (nextBullet) {
-
- this.currentPosition--
-
- } else {
-
- this.hit = true
-
- }
-
- }
-
-}
-
-export default Column
diff --git a/src/actors/bullets/index.js b/src/actors/bullets/index.js
deleted file mode 100644
index 4af33cf..0000000
--- a/src/actors/bullets/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import { BULLETS } from '../../shared/config'
-import { getIsAvailable } from '../../shared/utils'
-
-import Column from './column'
-
-class Bullets extends Phaser.Group {
-
- constructor(game, name, bugs, score) {
-
- super(game, null, name)
-
- this.x = BULLETS.x
- this.y = BULLETS.y
-
- this.queue = []
- this.updateTime = 0
-
- this.fire = this.fire.bind(this)
- this.render = this.render.bind(this)
- this.remove = this.remove.bind(this)
-
- BULLETS.frames.forEach((frame, index) => {
-
- this.addChild(new Column(this.game, name, frame, index, this.remove, score, bugs))
-
- })
-
- this.game.world.addChild(this)
-
- }
-
- fire(column) {
-
- if (!this.queue.includes(column)) {
-
- this.queue.push(column)
-
- }
-
- }
-
- remove(column) {
-
- const index = this.queue.indexOf(column)
- this.queue.splice(index, 1)
-
- }
-
- render() {
-
- const isUpdateAvailable = getIsAvailable(this.updateTime, this.game.time.now, BULLETS.timeout)
-
- if (isUpdateAvailable) {
-
- this.queue.forEach(column => {
-
- this.children[column].render()
-
- })
-
- this.updateTime = this.game.time.now
-
- }
-
- }
-
-}
-
-export default Bullets
diff --git a/src/actors/index.js b/src/actors/index.js
deleted file mode 100644
index 93a5925..0000000
--- a/src/actors/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Player from './player'
-import Bugs from './bugs'
-import Bullets from './bullets'
-
-export { Player, Bullets, Bugs }
diff --git a/src/actors/player/index.js b/src/actors/player/index.js
deleted file mode 100644
index 61569c4..0000000
--- a/src/actors/player/index.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import Octocat from './octocat'
-import { PLAYER } from '../../shared/config'
-import { getIsAvailable } from '../../shared/utils'
-
-class Player extends Phaser.Group {
-
- constructor(game, name) {
-
- super(game, null, name)
-
- this.dead = false
- this.fireTime = 0
- this.currentPosition = 0
-
- this.y = PLAYER.y
- this.x = PLAYER.x
-
- this.die = this.die.bind(this)
- this.fire = this.fire.bind(this)
- this.move = this.move.bind(this)
- this.render = this.render.bind(this)
- this.goLeft = this.goLeft.bind(this)
- this.goRight = this.goRight.bind(this)
-
- PLAYER.frames.forEach((coordinates, frame) => {
-
- this.addChild(new Octocat(this.game, name, coordinates, frame))
-
- })
-
- this.game.world.addChild(this)
-
- }
-
- die() {
-
- this.dead = true
- this.game.sound.play('die')
-
- }
-
- fire() {
-
- this.game.sound.play('press')
-
- this.children[this.currentPosition].fire()
- this.fireTime = this.game.time.now
-
- }
-
- move() {
-
- this.game.sound.play('press')
-
- this.children.forEach((octocat, index) => {
-
- if (this.currentPosition !== index) {
-
- return octocat.disable()
-
- }
-
- return octocat.activate()
-
- })
-
- }
-
- goLeft() {
-
- if (!this.children[this.currentPosition - 1]) {
-
- return
-
- }
-
- this.currentPosition--
-
- this.move()
-
- }
-
- goRight() {
-
- if (!this.children[this.currentPosition + 1]) {
-
- return
-
- }
-
- this.currentPosition++
-
- this.move()
-
- }
-
- render() {
-
- const isUpdateAvailable = getIsAvailable(this.fireTime, this.game.time.now, Player.timeout)
-
- if (isUpdateAvailable) {
-
- this.children[this.currentPosition].disarm()
-
- }
-
- }
-
-}
-
-export default Player
diff --git a/src/actors/player/octocat.js b/src/actors/player/octocat.js
deleted file mode 100644
index d9ecd56..0000000
--- a/src/actors/player/octocat.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { GAME } from '../../shared/config'
-
-class Octocat extends Phaser.Group {
-
- constructor(game, name, coordinates, frame) {
-
- super(game, null, `${name}-${frame}`)
-
- this.x = coordinates.x
- this.y = coordinates.y
-
- this.fire = this.fire.bind(this)
- this.disarm = this.disarm.bind(this)
- this.disable = this.disable.bind(this)
- this.activate = this.activate.bind(this)
-
- const body = this.create(0, 0, `${name}-body`, frame)
- const tentacles = this.create(0, 0, `${name}-tentacles`, frame)
-
- tentacles.alpha = GAME.alpha.disabled
- body.alpha = frame ? GAME.alpha.disabled : GAME.alpha.active
-
- this.game.world.addChild(this)
-
- }
-
- disarm() {
-
- const [, tentacles] = this.children
- tentacles.alpha = GAME.alpha.disabled
-
- }
-
- fire() {
-
- const [, tentacles] = this.children
- tentacles.alpha = GAME.alpha.active
-
- }
-
- disable() {
-
- this.children.forEach(frame => (frame.alpha = GAME.alpha.disabled))
-
- }
-
- activate() {
-
- const [body] = this.children
- body.alpha = GAME.alpha.active
-
- }
-
-}
-
-export default Octocat
diff --git a/src/components/ArcadeCabinet.tsx b/src/components/ArcadeCabinet.tsx
new file mode 100644
index 0000000..b68f766
--- /dev/null
+++ b/src/components/ArcadeCabinet.tsx
@@ -0,0 +1,26 @@
+import { CABINET } from '../types/config'
+import { GameScreen } from './GameScreen'
+import type { GameState } from '../types/game'
+
+interface ArcadeCabinetProps {
+ state: GameState
+}
+
+export function ArcadeCabinet({ state }: ArcadeCabinetProps) {
+ return (
+
+ )
+}
diff --git a/src/components/Background.tsx b/src/components/Background.tsx
new file mode 100644
index 0000000..517406b
--- /dev/null
+++ b/src/components/Background.tsx
@@ -0,0 +1,15 @@
+import { GAME } from '../types/config'
+
+export function Background() {
+ return (
+
+ )
+}
diff --git a/src/components/Bug.tsx b/src/components/Bug.tsx
new file mode 100644
index 0000000..53c57a8
--- /dev/null
+++ b/src/components/Bug.tsx
@@ -0,0 +1,50 @@
+import { memo } from 'react'
+
+interface BugProps {
+ active: boolean
+ exploding: boolean
+ x: number
+ y: number
+ columnIndex: number
+ bugIndex: number
+ width: number
+ height: number
+}
+
+export const Bug = memo(function Bug({
+ active,
+ exploding,
+ x,
+ y,
+ columnIndex,
+ bugIndex,
+ width,
+ height,
+}: BugProps) {
+ return (
+
+ )
+})
diff --git a/src/components/BugColumn.tsx b/src/components/BugColumn.tsx
new file mode 100644
index 0000000..048f5fb
--- /dev/null
+++ b/src/components/BugColumn.tsx
@@ -0,0 +1,30 @@
+import { memo } from 'react'
+import { Bug } from './Bug'
+import { BUGS } from '../types/config'
+import type { BugColumnState } from '../types/game'
+
+interface BugColumnProps {
+ columnIndex: number
+ column: BugColumnState
+}
+
+export const BugColumn = memo(function BugColumn({ columnIndex, column }: BugColumnProps) {
+ const frame = BUGS.frames[columnIndex]!
+ return (
+
+ {frame.bugs.map((pos, i) => (
+
+ ))}
+
+ )
+})
diff --git a/src/components/BugsLayer.tsx b/src/components/BugsLayer.tsx
new file mode 100644
index 0000000..df61f2f
--- /dev/null
+++ b/src/components/BugsLayer.tsx
@@ -0,0 +1,17 @@
+import { BUGS } from '../types/config'
+import { BugColumn } from './BugColumn'
+import type { BugColumnState } from '../types/game'
+
+interface BugsLayerProps {
+ bugColumns: BugColumnState[]
+}
+
+export function BugsLayer({ bugColumns }: BugsLayerProps) {
+ return (
+
+ {bugColumns.map((col, i) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/Bullet.tsx b/src/components/Bullet.tsx
new file mode 100644
index 0000000..222efb4
--- /dev/null
+++ b/src/components/Bullet.tsx
@@ -0,0 +1,26 @@
+import { memo } from 'react'
+import { BULLETS } from '../types/config'
+
+interface BulletProps {
+ active: boolean
+ x: number
+ y: number
+}
+
+export const Bullet = memo(function Bullet({ active, x, y }: BulletProps) {
+ return (
+
+ )
+})
diff --git a/src/components/BulletColumn.tsx b/src/components/BulletColumn.tsx
new file mode 100644
index 0000000..3c46d61
--- /dev/null
+++ b/src/components/BulletColumn.tsx
@@ -0,0 +1,25 @@
+import { memo } from 'react'
+import { Bullet } from './Bullet'
+import { BULLETS } from '../types/config'
+import type { BulletColumnState } from '../types/game'
+
+interface BulletColumnProps {
+ columnIndex: number
+ column: BulletColumnState
+}
+
+export const BulletColumn = memo(function BulletColumn({ columnIndex, column }: BulletColumnProps) {
+ const frame = BULLETS.frames[columnIndex]!
+ return (
+
+ {frame.bullets.map((pos, i) => (
+
+ ))}
+
+ )
+})
diff --git a/src/components/BulletsLayer.tsx b/src/components/BulletsLayer.tsx
new file mode 100644
index 0000000..458190c
--- /dev/null
+++ b/src/components/BulletsLayer.tsx
@@ -0,0 +1,17 @@
+import { BULLETS } from '../types/config'
+import { BulletColumn } from './BulletColumn'
+import type { BulletColumnState } from '../types/game'
+
+interface BulletsLayerProps {
+ bulletColumns: BulletColumnState[]
+}
+
+export function BulletsLayer({ bulletColumns }: BulletsLayerProps) {
+ return (
+
+ {bulletColumns.map((col, i) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/GameScreen.tsx b/src/components/GameScreen.tsx
new file mode 100644
index 0000000..96f9913
--- /dev/null
+++ b/src/components/GameScreen.tsx
@@ -0,0 +1,28 @@
+import { GAME } from '../types/config'
+import { Background } from './Background'
+import { ScanlineOverlay } from './ScanlineOverlay'
+import { ScoreDisplay } from './ScoreDisplay'
+import { Player } from './Player'
+import { BugsLayer } from './BugsLayer'
+import { BulletsLayer } from './BulletsLayer'
+import type { GameState } from '../types/game'
+
+interface GameScreenProps {
+ state: GameState
+}
+
+export function GameScreen({ state }: GameScreenProps) {
+ return (
+
+ )
+}
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
new file mode 100644
index 0000000..a5f4fa3
--- /dev/null
+++ b/src/components/Loader.tsx
@@ -0,0 +1,50 @@
+import { GamePhase } from '../types/game'
+
+interface LoaderProps {
+ phase: GamePhase
+}
+
+export function Loader({ phase }: LoaderProps) {
+ const isLoaded = phase !== GamePhase.LOADING
+ const isStarted = phase === GamePhase.PLAYING || phase === GamePhase.GAME_OVER
+
+ return (
+
+ {!isLoaded &&
}
+
+ {isLoaded ? (
+ <>
+ Press ENTER to start
+
+ ) : (
+ 'Loading, please wait...'
+ )}
+
+ {isLoaded && (
+
+ - ← - move left
+ - → - move right
+ - SPACEBAR - fire
+ - ENTER - start
+
+ )}
+
+ {PLAYER.frames.map((_, i) => (
+
+ ))}
+
+ )
+}
diff --git a/src/components/ScanlineOverlay.tsx b/src/components/ScanlineOverlay.tsx
new file mode 100644
index 0000000..331a351
--- /dev/null
+++ b/src/components/ScanlineOverlay.tsx
@@ -0,0 +1,10 @@
+export function ScanlineOverlay() {
+ return (
+
+ )
+}
diff --git a/src/components/ScoreDisplay.tsx b/src/components/ScoreDisplay.tsx
new file mode 100644
index 0000000..c724ca1
--- /dev/null
+++ b/src/components/ScoreDisplay.tsx
@@ -0,0 +1,50 @@
+import { memo } from 'react'
+import { GAME, DIGIT_GLYPHS } from '../types/config'
+
+interface ScoreDisplayProps {
+ score: number
+}
+
+export const ScoreDisplay = memo(function ScoreDisplay({ score }: ScoreDisplayProps) {
+ const digits = String(score).split('')
+
+ // Calculate total width for right-alignment (anchor x = 1 means right-aligned)
+ let totalWidth = 0
+ for (const d of digits) {
+ const glyph = DIGIT_GLYPHS[d]
+ if (glyph) totalWidth += glyph.xadvance
+ }
+
+ let offsetX = 0
+
+ return (
+
+ {digits.map((d, i) => {
+ const glyph = DIGIT_GLYPHS[d]
+ if (!glyph) return null
+ const x = offsetX + 1 // xoffset = 1 for all digits
+ offsetX += glyph.xadvance
+ return (
+
+ )
+ })}
+
-
-
Loading, please wait...
-
- - ← - move left
- - → - move right
- - SPACEBAR - fire
- - ENTER - start
-
-
-
-
-
-