create-spud 0.1.6 → 0.1.7

package/example/index.html

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

package/example/src/canvas.ts

@@ -10,10 +10,6 @@ type Bounds = ReturnType<typeof createBounds>;
   and then setting a matching transform so that the drawing coords
   can stay in CSS pixels.
 
-  `bounds` is mutated in place and kept in sync with the canvas via a
-  ResizeObserver, so it's cheap to read bounds.width/height from your
-  update and draw functions.
-
   see also: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas
 */
 export function scaleAndObserveCanvasSize(ctx: CanvasRenderingContext2D, bounds: Bounds) {
@@ -25,8 +21,6 @@ export function scaleAndObserveCanvasSize(ctx: CanvasRenderingContext2D, bounds:
 
     canvas.width = width * dpr;
     canvas.height = height * dpr;
-    canvas.style.width = `${width}px`;
-    canvas.style.height = `${height}px`;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 
     bounds.x = x;

package/example/src/gameplay.ts

@@ -3,18 +3,12 @@ import type { State } from "./state";
 /* 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 fixed simulation step in seconds (see gameLoop.ts).
-  read state.bounds here if you need to clamp or wrap positions to the play area.
-*/
 export function update(state: State, dt: number) {
+  // handle inputs and update state here
   state.elapsedSeconds += dt;
-  if (gamepads.anyPlayer.buttonJustPressed(Button.RightTrigger)) {
-    /* audio_shoot_sfx */
-  }
+  /* audio_shoot_sfx */
 
-  // handle any post-update cleanup below:
+  // handle any post-update cleanup below
   gamepads.clearInputs();
 }
 
@@ -26,6 +20,7 @@ export function render(state: State, ctx: CanvasRenderingContext2D) {
   // clear out the background
   ctx.fillStyle = "#0b0d1a";
   ctx.fillRect(0, 0, width, height);
+  ctx.fillStyle = "white";
 
   // draw an orbiting circle
   const moon = {
@@ -38,10 +33,10 @@ export function render(state: State, ctx: CanvasRenderingContext2D) {
       return centerY + Math.sin(state.elapsedSeconds) * moon.orbitRadius;
     },
   };
+
   /* moon_sprite_draw */
 
   // write some text
-  ctx.fillStyle = "white";
   ctx.textAlign = "center";
   ctx.textBaseline = "middle";
   /* fonts_ctx_font */

package/index.ts

@@ -180,10 +180,13 @@ async function copyDir(
       .replaceAll(
         "    /* audio_shoot_sfx */\n",
         replacements.features.includes(Feature.Audio)
-          ? `    sfx("shoot").play({
+        }
+          ? `  if (gamepads.anyPlayer.buttonJustPressed(Button.RightTrigger)) {
+    sfx("shoot").play({
       detune: -1000 + Math.random() * 2000,
       playbackRate: 0.5 + Math.random(),
     });
+  }
 `
           : "    /* handle inputs and update state */\n",
       )

package/package.json

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