From bcda3b8d325cd2f9301877f3474f3826b1a8a242 Mon Sep 17 00:00:00 2001
From: bdnugget <1001337108312v3@gmail.com>
Date: Sun, 3 May 2026 22:58:17 +0200
Subject: [PATCH] frugg

---
 README.md  |  2 +-
 index.html | 63 +++++++++++++++++++++++++++++++++++++++---------------
 2 files changed, 47 insertions(+), 18 deletions(-)
diff --git a/README.md b/README.md
index fbd4a5c..4066e1b 100644
--- a/README.md
+++ b/README.md
@@ -3,4 +3,4 @@ Isometric frog jump to lilypad game, vibecoded and inspired by Vtech camera buil
 
 ## TODO
 [X] Add frog like loud burping on jump
-[ ] Make fg look like frog
+[X] Make frog look like frog
diff --git a/index.html b/index.html
index c4a72b5..dcf2f94 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>Frugg</title>
+<title>frugg</title>
 <style>
   body { margin: 0; background: #222; overflow: hidden; }
   canvas { display: block; margin: auto; background: #4aa3d8; }
@@ -30,7 +30,7 @@ let score = 0;
 // --- Camera ---
 let camera = { x: 0, y: 0 };
 
-// --- YOUR SETTINGS ---
+// --- SETTINGS ---
 const GRAVITY = 0.25;
 const MAX_CHARGE = 25;
 const JUMP_POWER = 0.5;
@@ -39,7 +39,7 @@ const HORIZONTAL_SCALE = 0.0010;
 // --- Sound ---
 const jumpSound = document.getElementById("jumpSound");
 
-// --- Create lily pads ---
+// --- Generate pads ---
 function generatePads() {
   pads = [{ x: 0, y: 0 }];
   for (let i = 1; i < 30; i++) {
@@ -74,7 +74,7 @@ window.addEventListener("keyup", e => {
   }
 });
 
-// --- Jump physics ---
+// --- Jump ---
 let velocity = { x: 0, y: 0, z: 0 };
 let jumping = false;
 
@@ -94,7 +94,6 @@ function jump() {
   jumping = true;
   charge = 0;
 
-  // play sound starting at 0.25s
   jumpSound.currentTime = 0.25;
   jumpSound.play();
 }
@@ -120,12 +119,11 @@ function update() {
     }
   }
 
-  // camera follow
   camera.x += (pads[currentPad].x - camera.x) * 0.1;
   camera.y += (pads[currentPad].y - camera.y) * 0.1;
 }
 
-// --- Landing check ---
+// --- Landing ---
 function checkLanding() {
   const next = pads[currentPad + 1];
   if (!next) return;
@@ -142,7 +140,7 @@ function checkLanding() {
   resetFrog();
 }
 
-// --- Isometric projection ---
+// --- Iso ---
 function iso(x, y, z = 0) {
   const sx = x - camera.x;
   const sy = y - camera.y;
@@ -166,14 +164,30 @@ function drawFrog() {
   ctx.ellipse(base.x, base.y, 15 * scale, 8 * scale, 0, 0, Math.PI * 2);
   ctx.fill();
 
-  // frog
-  ctx.fillStyle = "lime";
+  // body
+  ctx.fillStyle = "#3bd16f";
   ctx.beginPath();
-  ctx.arc(p.x, p.y - 10, 15, 0, Math.PI * 2);
+  ctx.ellipse(p.x, p.y, 18, 14, 0, 0, Math.PI * 2);
+  ctx.fill();
+
+  // eyes
+  const eyeOffsetX = 8;
+  const eyeOffsetY = -10;
+
+  ctx.fillStyle = "white";
+  ctx.beginPath();
+  ctx.arc(p.x - eyeOffsetX, p.y + eyeOffsetY, 5, 0, Math.PI * 2);
+  ctx.arc(p.x + eyeOffsetX, p.y + eyeOffsetY, 5, 0, Math.PI * 2);
+  ctx.fill();
+
+  ctx.fillStyle = "black";
+  ctx.beginPath();
+  ctx.arc(p.x - eyeOffsetX, p.y + eyeOffsetY, 2, 0, Math.PI * 2);
+  ctx.arc(p.x + eyeOffsetX, p.y + eyeOffsetY, 2, 0, Math.PI * 2);
   ctx.fill();
 }
 
-// --- Trajectory + landing marker ---
+// --- Trajectory ---
 function drawTrajectory() {
   if (!charging || jumping) return;
 
@@ -196,7 +210,7 @@ function drawTrajectory() {
 
   ctx.strokeStyle = "red";
   ctx.lineWidth = 2;
-  ctx.setLineDash([6, 6]);
+  ctx.setLineDash([6,6]);
   ctx.beginPath();
 
   let lastPoint = null;
@@ -211,14 +225,13 @@ function drawTrajectory() {
     ctx.lineTo(p.x, p.y);
 
     lastPoint = { x: tx, y: ty };
-
     steps++;
   }
 
   ctx.stroke();
   ctx.setLineDash([]);
 
-  // --- Landing marker ---
+  // landing marker
   if (lastPoint) {
     const p = iso(lastPoint.x, lastPoint.y, 0);
 
@@ -234,7 +247,7 @@ function drawTrajectory() {
   }
 }
 
-// --- Depth sorted scene ---
+// --- Scene ---
 function drawScene() {
   let objects = [];
 
@@ -263,6 +276,22 @@ function drawScene() {
       ctx.ellipse(p.x, p.y, 50, 25, 0, 0, Math.PI * 2);
       ctx.fill();
 
+      // notch
+      ctx.globalCompositeOperation = "destination-out";
+      ctx.beginPath();
+      ctx.moveTo(p.x, p.y);
+      ctx.arc(p.x, p.y, 50, -0.3, 0.3);
+      ctx.closePath();
+      ctx.fill();
+      ctx.globalCompositeOperation = "source-over";
+
+      // vein
+      ctx.strokeStyle = "rgba(0,0,0,0.15)";
+      ctx.beginPath();
+      ctx.moveTo(p.x, p.y);
+      ctx.lineTo(p.x + 40, p.y);
+      ctx.stroke();
+
     } else {
       drawFrog();
     }
@@ -273,7 +302,7 @@ function drawScene() {
 function drawUI() {
   ctx.fillStyle = "white";
   ctx.font = "20px Arial";
-  ctx.fillText("Score: " + score, 20, 30);
+  ctx.fillText("frugg  |  Score: " + score, 20, 30);
 }
 
 // --- Loop ---
