create-spud 0.1.3 → 0.1.5

package/example/_gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/example/index.html

@@ -10,8 +10,6 @@
       canvas {
         position: fixed;
         inset: 0;
-        height: 100vh;
-        width: 100vw;
         /* pixel_art_canvas_css */
       }
     </style>

package/example/src/demo.ts

@@ -5,35 +5,46 @@
   sounds, use local storage, or handle inputs.
 */
 
-import { draw, update } from "./gameplay";
+import { render, update } from "./gameplay";
 import { state } from "./state";
-import { resizeCanvasForDpi } from "./helpers";
+import { handleCanvasDpi } from "./helpers";
 
 const canvas = document.createElement("canvas");
 document.body.appendChild(canvas);
 
 const ctx = canvas.getContext("2d", { alpha: false })!;
 
-let lastFrameTime = 0;
-let timeToProcessPhysics = 0;
+let lastFrameTime: number | null = null;
+let physicsAccumulatorMs = 0;
 
 function gameLoop(now: number) {
-  const dt = Math.min(now - lastFrameTime, 100); // clamp time delta to 100ms in case the user switched tabs
+  // initialize lastFrameTime on the first tick
+  if (lastFrameTime === null) {
+    lastFrameTime = now;
+  }
+
+  // cap extreme frame deltas so one frame doesn't do a huge catch-up after tab restore
+  const deltaTime = Math.min(now - lastFrameTime, 100);
   lastFrameTime = now;
 
-  resizeCanvasForDpi(ctx);
+  const rect = handleCanvasDpi(ctx);
 
   {
-    timeToProcessPhysics += dt;
-    const physicsTickMs = 1000 / 120; // process physics updates at a fixed 120hz time step
-    while (timeToProcessPhysics > physicsTickMs) {
-      timeToProcessPhysics -= physicsTickMs;
-      update(state, physicsTickMs);
+    // process physics updates at a fixed 120hz time step
+    physicsAccumulatorMs += deltaTime;
+    const physicsTicksPerSecond = 120;
+    const fixedDeltaMs = 1000 / physicsTicksPerSecond;
+    while (physicsAccumulatorMs >= fixedDeltaMs) {
+      physicsAccumulatorMs -= fixedDeltaMs;
+      update(state, fixedDeltaMs);
     }
   }
 
-  draw(state, ctx);
+  render({ state, ctx, rect });
   requestAnimationFrame(gameLoop); // queue up the next tick
 }
 
+// render immediately, then start the game loop
+const rect = handleCanvasDpi(ctx);
+render({ state, ctx, rect });
 requestAnimationFrame(gameLoop);

package/example/src/gameplay.ts

@@ -1,25 +1,30 @@
 import { Button, gamepads } from "@spud.gg/api";
 import { State } from "./state";
+import { CanvasFrameRect } from "./helpers";
 /* moon_sprite_import */
 /* audio_import */
 
 /*
   the update loop runs in a fixed time-step and should be used for any
-  state updates. `dt` is the time since the last update call.
+  state updates. `deltaTime` is the time since the last update call.
 */
-export function update(state: State, dt: number) {
-  state.elapsedSeconds += dt / 1000;
+export function update(state: State, deltaTime: number) {
+  state.elapsedSeconds += deltaTime / 1000;
   if (gamepads.anyPlayer.buttonJustPressed(Button.RightTrigger)) {
     /* audio_shoot_sfx */
   }
 }
 
-export function draw(state: State, ctx: CanvasRenderingContext2D) {
-  const { width, height } = ctx.canvas.getBoundingClientRect();
-  const center = {
-    x: width / 2,
-    y: height / 2,
-  };
+export function render({
+  state,
+  ctx,
+  rect,
+}: {
+  state: State;
+  ctx: CanvasRenderingContext2D;
+  rect: CanvasFrameRect;
+}) {
+  const { width, height, centerX, centerY } = rect;
 
   /* pixel_art_image_smoothing */
 
@@ -32,10 +37,10 @@ export function draw(state: State, ctx: CanvasRenderingContext2D) {
     radius: 30,
     orbitRadius: 100,
     get x() {
-      return center.x + Math.cos(state.elapsedSeconds) * moon.orbitRadius;
+      return centerX + Math.cos(state.elapsedSeconds) * moon.orbitRadius;
     },
     get y() {
-      return center.y + Math.sin(state.elapsedSeconds) * moon.orbitRadius;
+      return centerY + Math.sin(state.elapsedSeconds) * moon.orbitRadius;
     },
   };
   /* moon_sprite_draw */
@@ -45,5 +50,5 @@ export function draw(state: State, ctx: CanvasRenderingContext2D) {
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   /* fonts_ctx_font */
-  ctx.fillText("hello, gamer", center.x, center.y);
+  ctx.fillText("hello, gamer", centerX, centerY);
 }

package/example/src/helpers.ts

@@ -6,9 +6,19 @@
 
   see also: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
 */
-export function resizeCanvasForDpi(ctx: CanvasRenderingContext2D) {
+export function handleCanvasDpi(ctx: CanvasRenderingContext2D) {
   const { width, height } = ctx.canvas.getBoundingClientRect();
-  ctx.canvas.width = width * window.devicePixelRatio;
-  ctx.canvas.height = height * window.devicePixelRatio;
+  const targetWidth = width * window.devicePixelRatio;
+  const targetHeight = height * window.devicePixelRatio;
+  const rect = { width, height, centerX: width / 2, centerY: height / 2 };
+
+  // optimization: since setting canvas.width and .height reset the canvas state, skip if the size didn't change
+  if (ctx.canvas.width === targetWidth && ctx.canvas.height === targetHeight) return rect;
+
+  ctx.canvas.width = targetWidth;
+  ctx.canvas.height = targetHeight;
   ctx.setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);
+  return rect;
 }
+
+export type CanvasFrameRect = ReturnType<typeof handleCanvasDpi>;

package/example/src/index.ts

@@ -4,42 +4,61 @@
   step physics/update loop, and a variable framerate draw cycle.
   see also:
     - https://gafferongames.com/post/fix_your_timestep/
+    - https://www.youtube.com/watch?v=yGhfUcPjXuE
     - https://gist.github.com/HipHopHuman/3e9b4a94b30ac9387d9a99ef2d29eb1a
 */
 
 import { spud, gamepads } from "@spud.gg/api";
-import { draw, update } from "./gameplay";
+import { render, update } from "./gameplay";
 import { state } from "./state";
-import { resizeCanvasForDpi } from "./helpers";
+import { handleCanvasDpi } from "./helpers";
 
 const canvas = document.createElement("canvas");
 document.body.appendChild(canvas);
 
 const ctx = canvas.getContext("2d", { alpha: false })!;
 
-let lastFrameTime = 0;
-let timeToProcessPhysics = 0;
+let lastFrameTime: number | null = null;
+let physicsAccumulatorMs = 0;
+let animationFrame = -1;
 
 function gameLoop(now: number) {
-  const dt = Math.min(now - lastFrameTime, 100); // clamp time delta to 100ms in case the user switched tabs
+  // initialize lastFrameTime on the first tick
+  if (lastFrameTime === null) {
+    lastFrameTime = now;
+  }
+
+  // cap extreme frame deltas after tab restore so one frame doesn't do a huge catch-up
+  const deltaTime = Math.min(now - lastFrameTime, 100);
   lastFrameTime = now;
 
-  resizeCanvasForDpi(ctx);
+  const rect = handleCanvasDpi(ctx);
 
   {
-    timeToProcessPhysics += dt;
-    const physicsTickMs = 1000 / 120; // process physics updates at a fixed 120hz time step
-    while (timeToProcessPhysics > physicsTickMs) {
-      if (!spud.isPaused) {
-        timeToProcessPhysics -= physicsTickMs;
-        update(state, physicsTickMs);
-      }
+    // process physics updates at a fixed 120hz time step
+    physicsAccumulatorMs = spud.isPaused ? 0 : physicsAccumulatorMs + deltaTime;
+    const physicsTicksPerSecond = 120;
+    const fixedDeltaMs = 1000 / physicsTicksPerSecond;
+    while (physicsAccumulatorMs >= fixedDeltaMs) {
+      physicsAccumulatorMs -= fixedDeltaMs;
+      update(state, fixedDeltaMs);
       gamepads.clearInputs();
     }
   }
 
-  draw(state, ctx);
-  requestAnimationFrame(gameLoop); // queue up the next tick
+  render({ state, ctx, rect });
+  animationFrame = requestAnimationFrame(gameLoop); // queue up the next tick
 }
 
-requestAnimationFrame(gameLoop);
+// render immediately, then start the game loop
+const rect = handleCanvasDpi(ctx);
+render({ state, ctx, rect });
+animationFrame = requestAnimationFrame(gameLoop);
+
+// enable hot reloading in dev mode, but ensure the canvas is properly cleaned up
+if (import.meta.hot) {
+  import.meta.hot.accept(() => {
+    cancelAnimationFrame(animationFrame);
+    canvas.remove();
+  });
+}

package/example/vite.config.ts

@@ -7,6 +7,7 @@ const dir = dirname(fileURLToPath(import.meta.url));
 
 export default defineConfig({
   build: {
+    sourcemap: true,
     modulePreload: {
       polyfill: false,
     },

package/index.ts

@@ -2,7 +2,7 @@
 import { mkdir, readdir } from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { intro, outro, cancel, text, confirm, tasks, group, multiselect } from "@clack/prompts";
+import { intro, note, cancel, text, confirm, tasks, group, multiselect } from "@clack/prompts";
 import kebabcase from "lodash.kebabcase";
 
 intro("It's spud time.");
@@ -20,14 +20,16 @@ const { rawGameName, features, shouldContinue } = await group(
     rawGameName: () =>
       text({
         message: "Game name",
-        placeholder: "eg. Space Invaders",
+        placeholder: "e.g. Space Invaders",
         validate(value) {
-          if (!value?.trim()) return "Game name is required. Esc to cancel.";
+          const trimmed = value?.trim();
+          if (!trimmed) return "Game name is required. Esc to cancel.";
+          if (!kebabcase(trimmed)) return "Game name must include letters or numbers.";
         },
       }),
     features: () =>
       multiselect({
-        message: "Features",
+        message: "Select features",
         initialValues: [],
         required: false,
         options: [
@@ -38,7 +40,7 @@ const { rawGameName, features, shouldContinue } = await group(
       }),
     shouldContinue: ({ results }) =>
       confirm({
-        message: `We'll create a folder for "${kebabcase((results.rawGameName ?? "").trim())}" in the current directory. Do you want to continue?`,
+        message: `Create a folder for "${kebabcase((results.rawGameName ?? "").trim())}" in the current directory?`,
       }),
   },
   {
@@ -50,7 +52,7 @@ const { rawGameName, features, shouldContinue } = await group(
 );
 
 if (!shouldContinue) {
-  cancel("Operation cancelled.");
+  cancel("Cancelled.");
   process.exit(0);
 }
 
@@ -71,16 +73,17 @@ await tasks([
   {
     title: "Installing dependencies with Bun",
     async task() {
-      const proc = Bun.spawn(["bun", "install"], {
-        cwd: targetDir,
-      });
-      await proc.exited;
+      const proc = Bun.spawn(["bun", "install"], { cwd: targetDir });
+      const exitCode = await proc.exited;
+      if (exitCode !== 0) {
+        throw new Error(`bun install failed with exit code ${exitCode}`);
+      }
       return "Installed via bun";
     },
   },
 ]);
 
-outro(`You're all set! Now: cd ${slug} && bun dev`);
+note(`cd ${slug}\nbun dev`, "Next steps");
 
 async function copyDir(
   sourceDir: string,
@@ -92,7 +95,8 @@ async function copyDir(
 
   for (const entry of entries) {
     const sourcePath = path.join(sourceDir, entry.name);
-    const destPath = path.join(destDir, entry.name);
+    const outputName = entry.name === "_gitignore" ? ".gitignore" : entry.name;
+    const destPath = path.join(destDir, outputName);
 
     if (entry.isDirectory()) {
       if (entry.name === "node_modules" || entry.name === "dist") continue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-spud",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "bin": {
     "create-spud": "./index.ts"
   },