- 
- 
- 
-
-
-
-
- Get started
-
- Edit src/App.tsx and save to test HMR
-
+
+ );
}
-export default App
+export default App;
diff --git a/forest/src/components/GameMap.tsx b/forest/src/components/GameMap.tsx
new file mode 100644
index 0000000..79ac3ec
--- /dev/null
+++ b/forest/src/components/GameMap.tsx
@@ -0,0 +1,155 @@
+import { observer } from 'mobx-react-lite';
+import { useEffect, useRef, useState } from 'react';
+import type { PointerEvent } from 'react';
+import type { GameStore } from '../game/GameStore';
+import type { LogDrop, TreeState } from '../game/types';
+import { CHARACTER_SPRITE, LOG_SPRITE, TREE_SPRITE } from '../game/sprites';
+import PixelSprite from './PixelSprite';
+
+interface Props {
+ store: GameStore;
+}
+
+// Each entity below is its own observer so mobx can subscribe it only to the fields it actually
+// reads. Otherwise, with everything read inside GameMap's single observer, the character moving
+// every animation frame would re-render the whole tree/log list too, not just itself.
+
+const LogEntity = observer(function LogEntity({ log }: { log: LogDrop }) {
+ return (
+
+
+
+ );
+});
+
+const TreeEntity = observer(function TreeEntity({
+ tree,
+ store,
+ onPointerDown,
+ onPointerUp,
+}: {
+ tree: TreeState;
+ store: GameStore;
+ onPointerDown: (e: PointerEvent
+
+
+
+
+ );
+});
+
+const CharacterEntity = observer(function CharacterEntity({ store }: { store: GameStore }) {
+ return (
+ <>
+
+ onPointerDown(e, tree.id)}
+ onPointerUp={onPointerUp}
+ onPointerCancel={onPointerUp}
+ >
+
+
+
+
+ );
+});
+
+function GameMap({ store }: Props) {
+ const containerRef = useRef
+ {ready && (
+ <>
+ {store.logDrops.map((log) => (
+
+ );
+}
+
+export default observer(GameMap);
diff --git a/forest/src/components/PixelSprite.tsx b/forest/src/components/PixelSprite.tsx
new file mode 100644
index 0000000..f82c418
--- /dev/null
+++ b/forest/src/components/PixelSprite.tsx
@@ -0,0 +1,35 @@
+import { memo } from 'react';
+import type { PixelGrid } from '../game/sprites';
+
+interface Props {
+ pixels: PixelGrid;
+ size: number;
+ className?: string;
+}
+
+function PixelSprite({ pixels, size, className }: Props) {
+ const rows = pixels.length;
+ const cols = pixels[0]?.length ?? 0;
+
+ return (
+
+ );
+}
+
+// `pixels` is always one of the module-level sprite constants and `size` is a literal passed by
+// the caller, so both are reference/value-stable across re-renders — memoizing means an entity
+// re-rendering every frame for its position (left/top) doesn't also regenerate this sprite's
+// (potentially hundreds of)
+
+ );
+}
+
+export default observer(Topbar);
diff --git a/forest/src/game/GameStore.ts b/forest/src/game/GameStore.ts
new file mode 100644
index 0000000..197b48b
--- /dev/null
+++ b/forest/src/game/GameStore.ts
@@ -0,0 +1,317 @@
+import { makeAutoObservable } from 'mobx';
+import type { Inventory, LogDrop, TreeState, Vec2 } from './types';
+import {
+ CHARACTER_SPEED,
+ CHOP_INTERVAL,
+ COIN_INTERVAL,
+ INTERACTION_RADIUS,
+ LOG_COLLECT_ARC_HEIGHT,
+ LOG_COLLECT_DURATION,
+ LOG_EJECT_RADIUS,
+ LOG_FALL_ARC_HEIGHT,
+ LOG_FALL_DURATION,
+ LOGS_PER_TREE,
+ PICKUP_RADIUS,
+ TREE_COUNT,
+ TREE_EDGE_MARGIN,
+ TREE_MIN_DISTANCE_BETWEEN,
+ TREE_MIN_DISTANCE_FROM_CENTER,
+} from './constants';
+
+function randomId(prefix: string): string {
+ return `${prefix}-${Math.random().toString(36).slice(2)}`;
+}
+
+export class GameStore {
+ character: Vec2 = { x: 0, y: 0 };
+ trees: TreeState[] = [];
+ logDrops: LogDrop[] = [];
+ inventory: Inventory = { logs: 0, coins: 0 };
+ heldTreeId: string | null = null;
+ /** Free-form walk destination set by pressing on empty map, mutually exclusive with heldTreeId. */
+ moveTarget: Vec2 | null = null;
+
+ private chopProgress = 0;
+ private coinProgress = 0;
+ private lastTimestamp: number | null = null;
+ private rafId: number | null = null;
+
+ constructor() {
+ // autoBind so methods stay correctly bound when passed as bare references (event handlers,
+ // e.g. `onPointerUp={store.release}` or `window.addEventListener('blur', store.release)`).
+ makeAutoObservable(this, {}, { autoBind: true });
+ }
+
+ get heldTree(): TreeState | undefined {
+ return this.trees.find((tree) => tree.id === this.heldTreeId);
+ }
+
+ /** Whether the character is currently in chopping range of the held tree (as opposed to still walking to it). */
+ get isChopping(): boolean {
+ const tree = this.heldTree;
+ if (!tree)
+ return false;
+ return Math.hypot(tree.x - this.character.x, tree.y - this.character.y) <= INTERACTION_RADIUS;
+ }
+
+ /** Whether the character is actively walking (toward a held tree or a free-form move target). */
+ get isMoving(): boolean {
+ if (this.heldTreeId)
+ return !this.isChopping;
+ if (this.moveTarget)
+ return Math.hypot(this.moveTarget.x - this.character.x, this.moveTarget.y - this.character.y) > 0.5;
+ return false;
+ }
+
+ /** (Re)initializes the game for a map of the given size, placing the character in the center and scattering trees. */
+ initialize(width: number, height: number) {
+ this.character = { x: width / 2, y: height / 2 };
+ this.trees = this.spawnTrees(width, height);
+ this.logDrops = [];
+ this.inventory = { logs: 0, coins: 0 };
+ this.heldTreeId = null;
+ this.moveTarget = null;
+ this.chopProgress = 0;
+ this.coinProgress = 0;
+ }
+
+ private spawnTrees(width: number, height: number): TreeState[] {
+ const centerX = width / 2;
+ const centerY = height / 2;
+ const trees: TreeState[] = [];
+ let attempts = 0;
+
+ while (trees.length < TREE_COUNT && attempts < 1000) {
+ attempts++;
+ const x = TREE_EDGE_MARGIN + Math.random() * Math.max(0, width - TREE_EDGE_MARGIN * 2);
+ const y = TREE_EDGE_MARGIN + Math.random() * Math.max(0, height - TREE_EDGE_MARGIN * 2);
+
+ if (Math.hypot(x - centerX, y - centerY) < TREE_MIN_DISTANCE_FROM_CENTER)
+ continue;
+ if (trees.some((tree) => Math.hypot(tree.x - x, tree.y - y) < TREE_MIN_DISTANCE_BETWEEN))
+ continue;
+
+ trees.push({ id: randomId('tree'), x, y, logsRemaining: LOGS_PER_TREE });
+ }
+
+ return trees;
+ }
+
+ holdTree(id: string) {
+ if (this.trees.some((tree) => tree.id === id)) {
+ this.moveTarget = null;
+ this.heldTreeId = id;
+ }
+ }
+
+ /** Starts walking freely toward an arbitrary point on the map (e.g. a click on empty ground). */
+ moveTo(x: number, y: number) {
+ this.heldTreeId = null;
+ this.chopProgress = 0;
+ this.moveTarget = { x, y };
+ }
+
+ release() {
+ this.heldTreeId = null;
+ this.moveTarget = null;
+ this.chopProgress = 0;
+ }
+
+ start() {
+ if (this.rafId !== null)
+ return;
+ this.lastTimestamp = null;
+
+ const loop = (timestamp: number) => {
+ const last = this.lastTimestamp ?? timestamp;
+ // Cap the per-frame step so a stalled/backgrounded tab doesn't cause a huge catch-up jump
+ // (e.g. character teleporting across the map) once it resumes.
+ const deltaTime = Math.min((timestamp - last) / 1000, 0.1);
+ this.lastTimestamp = timestamp;
+ this.tick(deltaTime);
+ this.rafId = requestAnimationFrame(loop);
+ };
+ this.rafId = requestAnimationFrame(loop);
+ }
+
+ stop() {
+ if (this.rafId !== null) {
+ cancelAnimationFrame(this.rafId);
+ this.rafId = null;
+ }
+ this.lastTimestamp = null;
+ }
+
+ private tick(deltaTime: number) {
+ this.updateMovementAndChopping(deltaTime);
+ this.updateLogFlights(deltaTime);
+ this.updatePickups();
+ this.updateCoinConversion(deltaTime);
+ }
+
+ private updateMovementAndChopping(deltaTime: number) {
+ const tree = this.heldTree;
+ if (tree) {
+ this.walkTowardTree(tree, deltaTime);
+ return;
+ }
+
+ if (this.moveTarget) {
+ this.walkTowardPoint(this.moveTarget, deltaTime);
+ return;
+ }
+
+ this.chopProgress = 0;
+ }
+
+ private walkTowardPoint(target: Vec2, deltaTime: number) {
+ const dx = target.x - this.character.x;
+ const dy = target.y - this.character.y;
+ const distance = Math.hypot(dx, dy);
+
+ if (distance <= 0.5) {
+ this.character = { x: target.x, y: target.y };
+ return;
+ }
+
+ const step = Math.min(CHARACTER_SPEED * deltaTime, distance);
+ const ratio = step / distance;
+ this.character = {
+ x: this.character.x + dx * ratio,
+ y: this.character.y + dy * ratio,
+ };
+ }
+
+ private walkTowardTree(tree: TreeState, deltaTime: number) {
+ const dx = tree.x - this.character.x;
+ const dy = tree.y - this.character.y;
+ const distance = Math.hypot(dx, dy);
+
+ // A small tolerance keeps the character from flip-flopping between "walking" and "chopping"
+ // every frame once it's essentially at the interaction radius, which floating-point error on
+ // the two-axis step below can otherwise cause (each flip resets chopProgress, so chopping
+ // could stall forever right at the boundary).
+ if (distance > INTERACTION_RADIUS + 0.5) {
+ const step = Math.min(CHARACTER_SPEED * deltaTime, distance - INTERACTION_RADIUS);
+ const ratio = step / distance;
+ this.character = {
+ x: this.character.x + dx * ratio,
+ y: this.character.y + dy * ratio,
+ };
+ this.chopProgress = 0;
+ return;
+ }
+
+ this.chopProgress += deltaTime;
+ while (this.chopProgress >= CHOP_INTERVAL && tree.logsRemaining > 0) {
+ this.chopProgress -= CHOP_INTERVAL;
+ tree.logsRemaining -= 1;
+
+ // Eject the log on a ballistic arc to a random spot within a circle around the tree; it
+ // only becomes pickable once it lands (see updateLogFlights/updatePickups).
+ const angle = Math.random() * Math.PI * 2;
+ const landDistance = Math.random() * LOG_EJECT_RADIUS;
+ const toX = tree.x + Math.cos(angle) * landDistance;
+ const toY = tree.y + Math.sin(angle) * landDistance;
+ this.logDrops.push({
+ id: randomId('log'),
+ x: tree.x,
+ y: tree.y,
+ z: 0,
+ phase: 'falling',
+ flight: {
+ fromX: tree.x,
+ fromY: tree.y,
+ toX,
+ toY,
+ elapsed: 0,
+ duration: LOG_FALL_DURATION,
+ arcHeight: LOG_FALL_ARC_HEIGHT,
+ },
+ });
+
+ if (tree.logsRemaining <= 0) {
+ this.trees = this.trees.filter((t) => t.id !== tree.id);
+ this.heldTreeId = null;
+ this.chopProgress = 0;
+ break;
+ }
+ }
+ }
+
+ /** Advances every log currently in a ballistic flight (falling from a tree, or flying into the
+ * inventory once collected), landing/collecting it once its flight completes. Mutates logs in
+ * place and only reassigns the `logDrops` array when one is actually removed (collected) — a
+ * landed log sitting idle, or the array being rebuilt every tick regardless, would otherwise
+ * force every observer of `logDrops` (i.e. the whole map) to re-render every animation frame. */
+ private updateLogFlights(deltaTime: number) {
+ if (this.logDrops.length === 0)
+ return;
+
+ let collectedIds: SetForest
+ +
+
+
+
+
Connect with us
-Join the Vite community
---
-
-
- GitHub
-
-
- -
-
-
- Discord
-
-
- -
-
-
- X.com
-
-
- -
-
-
- Bluesky
-
-
-
-