hat optimisations and refactor. added callbacks to helper obect configs

This commit is contained in:
Sam 2024-06-25 21:19:50 +12:00
parent 8505b5e8b2
commit ecd605e6e4
3 changed files with 54 additions and 22 deletions

View File

@ -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");

View File

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

View File

@ -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,14 +108,9 @@ 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
if (this.shellImage.src) {
@ -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);
}
}