tweaks

backend/sandbox/default_packs.py

@@ -169,7 +169,9 @@ def pack_hash(self) -> str:
 - Use p5.js best practices
 
 Structure Tips:
-- ALL changes and features should be in /app/frontend/public/sketch.js
+- ALL changes and features should be in /app/frontend/public/{sketch,helpers,objects}.js
+- Organize "objects" (balls, items, etc) into objects.js
+- Organize "utils" (utility functions, etc) into helpers.js
 - At all times, sketch.js should include setup() windowResized() and draw() functions
 - If the user wants to add a p5.js addon, edit layout.js to add a new <Script> (following existing scripts in that files)
 
@@ -192,6 +194,25 @@ def pack_hash(self) -> str:
   ...
 }
 ```
+
+```javascript
+// /app/frontend/public/objects.js
+// example objects.js
+
+class Ball {
+  constructor(x, y, size = 30) {
+    // ... init code ...
+  }
+
+  update() {
+    // ... update code ...
+  }
+
+  draw() {
+    // ... draw code ...
+  }
+} 
+```
 """.strip(),
         setup_time_seconds=60,
     ),

images/NextjsP5DockerFile

@@ -19,12 +19,16 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
     cd frontend && \
     npm run build
 
-RUN curl -o /frontend/public/sketch.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/sketch.js && \
-    curl -o /frontend/src/app/globals.css https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/globals.css && \
-    curl -o /frontend/src/app/layout.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/layout.js && \
-    curl -o /frontend/src/app/page.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/page.js
+RUN curl -o /frontend/public/sketch.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/sketch.js && \
+    curl -o /frontend/public/helpers.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/helpers.js && \
+    curl -o /frontend/public/objects.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/objects.js && \
+    curl -o /frontend/src/app/globals.css https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/src/app/globals.css && \
+    curl -o /frontend/src/app/layout.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/src/app/layout.js && \
+    curl -o /frontend/src/app/page.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/src/app/page.js && \
+    rm -rf /frontend/public/*.svg
 
 RUN ls -asl /frontend && \
+    ls -asl /frontend/public && \
     ls -asl /frontend/src/app && \
     cat /frontend/package.json
 

images/NextjsShadcnDockerFile

@@ -25,6 +25,8 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
 RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
 
 RUN ls -asl /frontend && \
-    cat /frontend/package.json  
+    ls -asl /frontend/public && \
+    ls -asl /frontend/src/app && \
+    cat /frontend/package.json
 
 EXPOSE 3000

images/NextjsVanillaDockerFile

@@ -22,6 +22,8 @@ RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-
 RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
 
 RUN ls -asl /frontend && \
+    ls -asl /frontend/public && \
+    ls -asl /frontend/src/app && \
     cat /frontend/package.json
 
 EXPOSE 3000

images/p5/public/helpers.js

@@ -0,0 +1 @@
+// Any helper functions go here

images/p5/public/objects.js

@@ -0,0 +1,29 @@
+// Any objects types go here
+
+class Ball {
+  constructor(x, y, size = 30) {
+    this.x = x;
+    this.y = y;
+    this.size = size;
+    this.vx = 3;
+    this.vy = 2;
+  }
+
+  update() {
+    // Update position
+    this.x += this.vx;
+    this.y += this.vy;
+
+    // Bounce off walls
+    if (this.x + this.size / 2 > width || this.x - this.size / 2 < 0)
+      this.vx *= -1;
+    if (this.y + this.size / 2 > height || this.y - this.size / 2 < 0)
+      this.vy *= -1;
+  }
+
+  draw() {
+    fill(255);
+    noStroke();
+    circle(this.x, this.y, this.size);
+  }
+}

images/p5/public/sketch.js

@@ -0,0 +1,17 @@
+let ball;
+
+function setup() {
+  createCanvas(windowWidth, windowHeight);
+  // Create ball in middle of screen
+  ball = new Ball(width / 2, height / 2);
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+function draw() {
+  background(0);
+  ball.update();
+  ball.draw();
+}

images/p5/layout.js → images/p5/src/app/layout.js

@@ -33,6 +33,8 @@ export default function RootLayout({ children }) {
           src="https://cdn.jsdelivr.net/npm/p5.collide2d"
           strategy="beforeInteractive"
         />
+        <Script src="/helpers.js" strategy="beforeInteractive" />
+        <Script src="/objects.js" strategy="beforeInteractive" />
         <Script src="/sketch.js" strategy="beforeInteractive" />
       </head>
       <body