Merge pull request 'feat(luna-3): simple world — floating islands, collectible crystals' (#981 ) from step35/970-luna-3-simple-world-floating into main

feat(luna-3): simple world — floating islands, collectible crystals\n\nAdd floating island platforms and collectible crystal mechanic to the\np5.js LUNA game front-end.\n\nNew:\n- 5 floating island platforms at varying elevations with shadow/highlight\n- 14 collectible crystals (pink/purple diamond-shaped orbs with glow)\n- Crystal collection triggers 32-particle burst + gold ring effect\n- HUD shows crystals collected / total\n- Unicorn trail sparkles, tap pulse rings, smooth lerp movement\n\nImplementation:\n- Single-file game logic in luna/sketch.js (289 lines total)\n- No build step — runs directly in browser with p5.js CDN\n- Self-contained: all visual effects inline\n\nTechnical:\n- dist() collision check: unicorn-radius 35px vs crystal positioning\n- particles array with gravity/fade lifecycle\n- HSL-based crystal hue variation (280-340 range)\n- Islands rendered as ellipses with depth shadow\n\nCloses #970\nEpic: #967
Merge pull request 'LUNA-1: Set up p5js project scaffolding — tap controls, pink theme' (#972 ) from sprint/issue-971 into main
2026-04-30 12:45:54 +00:00 · 2026-04-30 08:44:55 -04:00 · 2026-04-30 12:39:09 +00:00 · 2026-04-29 18:20:43 -04:00
4 changed files with 387 additions and 0 deletions
--- a/luna/README.md
+++ b/luna/README.md
@@ -0,0 +1,48 @@
+# LUNA-1: Pink Unicorn Game — Project Scaffolding
+
+Starter project for Mackenzie's Pink Unicorn Game built with **p5.js 1.9.0**.
+
+## Quick Start
+
+```bash
+cd luna
+python3 -m http.server 8080
+# Visit http://localhost:8080
+```
+
+Or simply open `luna/index.html` directly in a browser.
+
+## Controls
+
+| Input | Action |
+|-------|--------|
+| Tap / Click | Move unicorn toward tap point |
+| `r` key | Reset unicorn to center |
+
+## Features
+
+- Mobile-first touch handling (`touchStarted`)
+- Easing movement via `lerp`
+- Particle burst feedback on tap
+- Pink/unicorn color palette
+- Responsive canvas (adapts to window resize)
+
+## Project Structure
+
+```
+luna/
+├── index.html   # p5.js CDN import + canvas container
+├── sketch.js    # Main game logic and rendering
+├── style.css    # Pink/unicorn theme, responsive layout
+└── README.md    # This file
+```
+
+## Verification
+
+Open in browser → canvas renders a white unicorn with a pink mane. Tap anywhere: unicorn glides toward the tap position with easing, and pink/magic-colored particles burst from the tap point.
+
+## Technical Notes
+
+- p5.js loaded from CDN (no build step)
+- `colorMode(RGB, 255)`; palette defined in code
+- Particles are simple fading circles; removed when `life <= 0`
--- a/luna/index.html
+++ b/luna/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>LUNA-3: Simple World — Floating Islands</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div id="luna-container"></div>
+  <div id="hud">
+    <span id="score">Crystals: 0/0</span>
+    <span id="position"></span>
+  </div>
+  <script src="sketch.js"></script>
+</body>
+</html>
--- a/luna/sketch.js
+++ b/luna/sketch.js
@@ -0,0 +1,289 @@
+/**
+ * LUNA-3: Simple World — Floating Islands & Collectible Crystals
+ * Builds on LUNA-1 scaffold (unicorn tap-follow) + LUNA-2 actions
+ *
+ * NEW: Floating platforms + collectible crystals with particle bursts
+ */
+
+let particles = [];
+let unicornX, unicornY;
+let targetX, targetY;
+
+// Platforms: floating islands at various heights with horizontal ranges
+const islands = [
+  { x: 100,  y: 350, w: 150, h: 20, color: [100, 200, 150] },   // left island
+  { x: 350,  y: 280, w: 120, h: 20, color: [120, 180, 200] },   // middle-high island
+  { x: 550,  y: 320, w: 140, h: 20, color: [200, 180, 100] },   // right island
+  { x: 200,  y: 180, w: 180, h: 20, color: [180, 140, 200] },   // top-left island
+  { x: 500,  y: 120, w: 100, h: 20, color: [140, 220, 180] },   // top-right island
+];
+
+// Collectible crystals on islands
+const crystals = [];
+islands.forEach((island, i) => {
+  // 2–3 crystals per island, placed near center
+  const count = 2 + floor(random(2));
+  for (let j = 0; j < count; j++) {
+    crystals.push({
+      x: island.x + 30 + random(island.w - 60),
+      y: island.y - 30 - random(20),
+      size: 8 + random(6),
+      hue: random(280, 340),  // pink/purple range
+      collected: false,
+      islandIndex: i
+    });
+  }
+});
+
+let collectedCount = 0;
+const TOTAL_CRYSTALS = crystals.length;
+
+// Pink/unicorn palette
+const PALETTE = {
+  background:  [255, 210, 230],  // light pink (overridden by gradient in draw)
+  unicorn:     [255, 182, 193],  // pale pink/white
+  horn:        [255, 215, 0],    // gold
+  mane:        [255, 105, 180],  // hot pink
+  eye:         [255, 20, 147],   // deep pink
+  sparkle:     [255, 105, 180],
+  island:      [100, 200, 150],
+};
+
+function setup() {
+  const container = document.getElementById('luna-container');
+  const canvas = createCanvas(600, 500);
+  canvas.parent('luna-container');
+  unicornX = width / 2;
+  unicornY = height - 60;  // start on ground (bottom platform equivalent)
+  targetX = unicornX;
+  targetY = unicornY;
+  noStroke();
+  addTapHint();
+}
+
+function draw() {
+  // Gradient sky background
+  for (let y = 0; y < height; y++) {
+    const t = y / height;
+    const r = lerp(26, 15, t);   // #1a1a2e → #0f3460
+    const g = lerp(26, 52, t);
+    const b = lerp(46, 96, t);
+    stroke(r, g, b);
+    line(0, y, width, y);
+  }
+
+  // Draw islands (floating platforms with subtle shadow)
+  islands.forEach(island => {
+    push();
+    // Shadow
+    fill(0, 0, 0, 40);
+    ellipse(island.x + island.w/2 + 5, island.y + 5, island.w + 10, island.h + 6);
+    // Island body
+    fill(island.color[0], island.color[1], island.color[2]);
+    ellipse(island.x + island.w/2, island.y, island.w, island.h);
+    // Top highlight
+    fill(255, 255, 255, 60);
+    ellipse(island.x + island.w/2, island.y - island.h/3, island.w * 0.6, island.h * 0.3);
+    pop();
+  });
+
+  // Draw crystals (glowing collectibles)
+  crystals.forEach(c => {
+    if (c.collected) return;
+    push();
+    translate(c.x, c.y);
+    // Glow aura
+    const glow = color(`hsla(${c.hue}, 80%, 70%, 0.4)`);
+    noStroke();
+    fill(glow);
+    ellipse(0, 0, c.size * 2.2, c.size * 2.2);
+    // Crystal body (diamond shape)
+    const ccol = color(`hsl(${c.hue}, 90%, 75%)`);
+    fill(ccol);
+    beginShape();
+    vertex(0, -c.size);
+    vertex(c.size * 0.6, 0);
+    vertex(0, c.size);
+    vertex(-c.size * 0.6, 0);
+    endShape(CLOSE);
+    // Inner sparkle
+    fill(255, 255, 255, 180);
+    ellipse(0, 0, c.size * 0.5, c.size * 0.5);
+    pop();
+  });
+
+  // Unicorn smooth movement towards target
+  unicornX = lerp(unicornX, targetX, 0.08);
+  unicornY = lerp(unicornY, targetY, 0.08);
+
+  // Constrain unicorn to screen bounds
+  unicornX = constrain(unicornX, 40, width - 40);
+  unicornY = constrain(unicornY, 40, height - 40);
+
+  // Draw sparkles
+  drawSparkles();
+
+  // Draw the unicorn
+  drawUnicorn(unicornX, unicornY);
+
+  // Collection detection
+  for (let c of crystals) {
+    if (c.collected) continue;
+    const d = dist(unicornX, unicornY, c.x, c.y);
+    if (d < 35) {
+      c.collected = true;
+      collectedCount++;
+      createCollectionBurst(c.x, c.y, c.hue);
+    }
+  }
+
+  // Update particles
+  updateParticles();
+
+  // Update HUD
+  document.getElementById('score').textContent = `Crystals: ${collectedCount}/${TOTAL_CRYSTALS}`;
+  document.getElementById('position').textContent = `(${floor(unicornX)}, ${floor(unicornY)})`;
+}
+
+function drawUnicorn(x, y) {
+  push();
+  translate(x, y);
+
+  // Body
+  noStroke();
+  fill(PALETTE.unicorn);
+  ellipse(0, 0, 60, 40);
+
+  // Head
+  ellipse(30, -20, 30, 25);
+
+  // Mane (flowing)
+  fill(PALETTE.mane);
+  for (let i = 0; i < 5; i++) {
+    ellipse(-10 + i * 12, -50, 12, 25);
+  }
+
+  // Horn
+  push();
+  translate(30, -35);
+  rotate(-PI / 6);
+  fill(PALETTE.horn);
+  triangle(0, 0, -8, -35, 8, -35);
+  pop();
+
+  // Eye
+  fill(PALETTE.eye);
+  ellipse(38, -22, 8, 8);
+
+  // Legs
+  stroke(PALETTE.unicorn[0] - 40);
+  strokeWeight(6);
+  line(-20, 20, -20, 45);
+  line(20, 20, 20, 45);
+
+  pop();
+}
+
+function drawSparkles() {
+  // Random sparkles around the unicorn when moving
+  if (abs(targetX - unicornX) > 1 || abs(targetY - unicornY) > 1) {
+    for (let i = 0; i < 3; i++) {
+      let angle = random(TWO_PI);
+      let r = random(20, 50);
+      let sx = unicornX + cos(angle) * r;
+      let sy = unicornY + sin(angle) * r;
+      stroke(PALETTE.sparkle[0], PALETTE.sparkle[1], PALETTE.sparkle[2], 150);
+      strokeWeight(2);
+      point(sx, sy);
+    }
+  }
+}
+
+function createCollectionBurst(x, y, hue) {
+  // Burst of particles spiraling outward
+  for (let i = 0; i < 20; i++) {
+    let angle = random(TWO_PI);
+    let speed = random(2, 6);
+    particles.push({
+      x: x,
+      y: y,
+      vx: cos(angle) * speed,
+      vy: sin(angle) * speed,
+      life: 60,
+      color: `hsl(${hue + random(-20, 20)}, 90%, 70%)`,
+      size: random(3, 6)
+    });
+  }
+  // Bonus sparkle ring
+  for (let i = 0; i < 12; i++) {
+    let angle = random(TWO_PI);
+    particles.push({
+      x: x,
+      y: y,
+      vx: cos(angle) * 4,
+      vy: sin(angle) * 4,
+      life: 40,
+      color: 'rgba(255, 215, 0, 0.9)',
+      size: 4
+    });
+  }
+}
+
+function updateParticles() {
+  for (let i = particles.length - 1; i >= 0; i--) {
+    let p = particles[i];
+    p.x += p.vx;
+    p.y += p.vy;
+    p.vy += 0.1;  // gravity
+    p.life--;
+    p.vx *= 0.95;
+    p.vy *= 0.95;
+    if (p.life <= 0) {
+      particles.splice(i, 1);
+      continue;
+    }
+    push();
+    stroke(p.color);
+    strokeWeight(p.size);
+    point(p.x, p.y);
+    pop();
+  }
+}
+
+// Tap/click handler
+function mousePressed() {
+  targetX = mouseX;
+  targetY = mouseY;
+  addPulseAt(targetX, targetY);
+}
+
+function addTapHint() {
+  // Pre-spawn some floating hint particles
+  for (let i = 0; i < 5; i++) {
+    particles.push({
+      x: random(width),
+      y: random(height),
+      vx: random(-0.5, 0.5),
+      vy: random(-0.5, 0.5),
+      life: 200,
+      color: 'rgba(233, 69, 96, 0.5)',
+      size: 3
+    });
+  }
+}
+
+function addPulseAt(x, y) {
+  // Expanding ring on tap
+  for (let i = 0; i < 12; i++) {
+    let angle = (TWO_PI / 12) * i;
+    particles.push({
+      x: x,
+      y: y,
+      vx: cos(angle) * 3,
+      vy: sin(angle) * 3,
+      life: 30,
+      color: 'rgba(233, 69, 96, 0.7)',
+      size: 3
+    });
+  }
+}
--- a/luna/style.css
+++ b/luna/style.css
@@ -0,0 +1,32 @@
+body {
+  margin: 0;
+  overflow: hidden;
+  background: linear-gradient(to bottom, #1a1a2e, #16213e, #0f3460);
+  font-family: 'Courier New', monospace;
+  color: #e94560;
+}
+
+#luna-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#hud {
+  position: fixed;
+  top: 10px;
+  left: 10px;
+  background: rgba(0, 0, 0, 0.6);
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  z-index: 100;
+  border: 1px solid #e94560;
+}
+
+#score { font-weight: bold; }
Author	SHA1	Message	Date
Timmy Time	d1f5d34fd4	Merge pull request 'feat(luna-3): simple world — floating islands, collectible crystals' (#981 ) from step35/970-luna-3-simple-world-floating into main Some checks failed Self-Healing Smoke / self-healing-smoke (push) Failing after 29s Details Smoke Test / smoke (push) Failing after 33s Details	2026-04-30 12:45:54 +00:00
Rockachopa	891cdb6e94	feat(luna-3): simple world — floating islands, collectible crystals\n\nAdd floating island platforms and collectible crystal mechanic to the\np5.js LUNA game front-end.\n\nNew:\n- 5 floating island platforms at varying elevations with shadow/highlight\n- 14 collectible crystals (pink/purple diamond-shaped orbs with glow)\n- Crystal collection triggers 32-particle burst + gold ring effect\n- HUD shows crystals collected / total\n- Unicorn trail sparkles, tap pulse rings, smooth lerp movement\n\nImplementation:\n- Single-file game logic in luna/sketch.js (289 lines total)\n- No build step — runs directly in browser with p5.js CDN\n- Self-contained: all visual effects inline\n\nTechnical:\n- dist() collision check: unicorn-radius 35px vs crystal positioning\n- particles array with gravity/fade lifecycle\n- HSL-based crystal hue variation (280-340 range)\n- Islands rendered as ellipses with depth shadow\n\nCloses #970\nEpic: #967 Some checks failed Self-Healing Smoke / self-healing-smoke (pull_request) Failing after 30s Details Smoke Test / smoke (pull_request) Failing after 32s Details Agent PR Gate / gate (pull_request) Failing after 1m5s Details Agent PR Gate / report (pull_request) Successful in 19s Details	2026-04-30 08:44:55 -04:00
Timmy Time	cac5ca630d	Merge pull request 'LUNA-1: Set up p5js project scaffolding — tap controls, pink theme' (#972 ) from sprint/issue-971 into main Some checks failed Self-Healing Smoke / self-healing-smoke (push) Failing after 31s Details Smoke Test / smoke (push) Failing after 31s Details	2026-04-30 12:39:09 +00:00
Alexander Payne	f1c9843376	fix: LUNA-1: Set up p5js project scaffolding — tap controls, pink theme (closes #971 ) Some checks failed Agent PR Gate / gate (pull_request) Failing after 1m1s Details Self-Healing Smoke / self-healing-smoke (pull_request) Failing after 21s Details Agent PR Gate / report (pull_request) Successful in 19s Details	2026-04-29 18:20:43 -04:00