hat optimisations and refactor. added callbacks to helper obect configs

Larry the snail/js/helper.js

@@ -7,7 +7,8 @@ async function fetchConfig(className) {
         min: 1,
         max: 5,
         defaultValue: 1,
-        property: "magnitude"
+        property: "magnitude",
+        callback: (instance, newValue) => instance.setMagnitude(newValue)
       },
       // Dropdown control to select food
       {
@@ -126,6 +127,14 @@ async function fetchConfig(className) {
   return config[className];
 }
 
+const hatConfig = {
+  cap: { x: 3.5, y: -13 },
+  top_hat: { x: 2, y: -20 },
+  center_box_full: { x: 0, y: 0 },
+  center_box_hollow: { x: 0, y: 0 },
+  // Add more hats with their specific offsets here
+};
+
 
 function addControl(item, instance) {
   let parentDiv = document.getElementById("custom");
@@ -143,9 +152,13 @@ function addControl(item, instance) {
     control.max = item.max;
     control.value = item.defaultValue;
     control.addEventListener("input", (event) => {
-      const newValue = event.target.value;
-      instance[item.property] = parseInt(newValue, 10);
+      const newValue = parseInt(event.target.value, 10);
+      instance[item.property] = newValue;
       title.innerText = item.property + ": " + newValue;
+
+      if (item.callback) {
+        item.callback(instance, newValue);
+      }
     });
   } else if (item.type === "button") {
     control = document.createElement("button");

Larry the snail/js/index.js

@@ -83,7 +83,7 @@ function render() {
       if (!paused) {
         rotation += deg_per_sec / targetFps;
       }
-      drawCenter(300)
+      // drawCenter(300)
     });
     render();
   }, frameDuration);

Larry the snail/js/objects.js

@@ -74,6 +74,9 @@ class Larry extends BaseShape {
     this.hatImage.src = '';
     this.shellImage.src = '';
     this.backgroundImage.src = '';
+
+    this.hatXoffset = 0;
+    this.hatYoffset = 0;
   }
 
   draw(timestamp) {
@@ -81,7 +84,8 @@ class Larry extends BaseShape {
     // Draw background
     if (this.backgroundImage.src) {
       console.log("drawing background: " + this.backgroundImage.src)
-      ctx.drawImage(this.backgroundImage, centerX- (this.backgroundImage.width), centerY -this.backgroundImage.height,this.backgroundImage.width*2,this.backgroundImage.height*2);
+
+      ctx.drawImage(this.backgroundImage, centerX - (this.backgroundImage.width), centerY - this.backgroundImage.height, this.backgroundImage.width * 2, this.backgroundImage.height * 2);
     }
 
     // Draw body at its anchor point (center-bottom)
@@ -92,8 +96,8 @@ class Larry extends BaseShape {
     // Draw head aligned with body
     // const headX = bodyX + this.headOffsetX;
     // let headY = bodyY + this.headOffsetY - this.headHeight;
-    const headX = bodyX + (54 * this.magnitude - this.headWidth * this.magnitude / 2);
-    let headY = bodyY + (this.bodyHeight * this.magnitude - 7* this.magnitude) - this.headHeight * this.magnitude;
+    const headX = bodyX + (53.5 * this.magnitude - this.headWidth * this.magnitude / 2);
+    let headY = bodyY + (this.bodyHeight * this.magnitude - 7 * this.magnitude) - this.headHeight * this.magnitude;
 
     if (this.isEating === true) {
       const eatMaxHeight = 20;
@@ -104,13 +108,8 @@ class Larry extends BaseShape {
 
     // Draw hat if any
     if (this.hatImage.src) {
-      let hatXoffset = (this.headWidth*this.magnitude)/2 -(this.hatImage.width*this.magnitude)/2 + (2*this.magnitude);
-      let hatYoffset = (this.headHeight*this.magnitude) - (this.hatImage.height*this.magnitude) + (-11 * this.magnitude);
-      if(document.getElementById('elselectedHat').value === "cap"){
-        hatXoffset += this.magnitude*1.5
-      }
-      this.drawCrosshair(headX,headY,20)
-      ctx.drawImage(this.hatImage, headX + hatXoffset, headY + hatYoffset,this.hatImage.width*this.magnitude,this.hatImage.height*this.magnitude);
+      this.drawCrosshair(headX, headY, 20);
+      ctx.drawImage(this.hatImage, headX + this.hatXoffset, headY + this.hatYoffset, this.hatImage.width * this.magnitude, this.hatImage.height * this.magnitude);
     }
 
     // Draw shell if any
@@ -119,14 +118,16 @@ class Larry extends BaseShape {
     }
   }
 
-  drawCrosshair(x,y,size){
+  drawCrosshair(x, y, size) {
+    ctx.strokeStyle = "pink";
+    ctx.lineWidth = 1
     ctx.beginPath();
-    ctx.moveTo(x-size,y);
-    ctx.lineTo(x+size,y);
+    ctx.moveTo(x - size, y);
+    ctx.lineTo(x + size, y);
     ctx.stroke();
     ctx.beginPath();
-    ctx.moveTo(x,y-size);
-    ctx.lineTo(x,y+size);
+    ctx.moveTo(x, y - size);
+    ctx.lineTo(x, y + size);
     ctx.stroke();
   }
 
@@ -144,9 +145,27 @@ class Larry extends BaseShape {
     const hatSelection = document.getElementById('elselectedHat').value;
     if (hatSelection === "") {
       this.hatImage.src = ``;
-    }
-    else {
+      this.hatXoffset = 0;
+      this.hatYoffset = 0;
+    } else {
       this.hatImage.src = `larry_photos/hats/${hatSelection}.png`;
+      const offsets = hatConfig[hatSelection] || { x: 0, y: 0 };
+
+      this.hatImage.onload = () => {
+        this.recalculateHatOffsets(offsets);
+      };
+    }
+  }
+  recalculateHatOffsets(offsets) {
+    this.hatXoffset = (this.headWidth * this.magnitude) / 2 - (this.hatImage.width * this.magnitude) / 2 + (offsets.x * this.magnitude);
+    this.hatYoffset = (this.headHeight * this.magnitude) - (this.hatImage.height/2 * this.magnitude) + (offsets.y * this.magnitude);
+  }
+  setMagnitude(newMagnitude) {
+    this.magnitude = newMagnitude;
+    const hatSelection = document.getElementById('elselectedHat').value;
+    if (hatSelection !== "") {
+      const offsets = hatConfig[hatSelection] || { x: 0, y: 0 };
+      this.recalculateHatOffsets(offsets);
     }
   }