hat optimisations and refactor. added callbacks to helper obect configs
This commit is contained in:
parent
8505b5e8b2
commit
ecd605e6e4
|
@ -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");
|
||||
|
|
|
@ -83,7 +83,7 @@ function render() {
|
|||
if (!paused) {
|
||||
rotation += deg_per_sec / targetFps;
|
||||
}
|
||||
drawCenter(300)
|
||||
// drawCenter(300)
|
||||
});
|
||||
render();
|
||||
}, frameDuration);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue