noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-26 04:07:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Change references of "theme" to "species"

Browse Source
This commit is contained in:
Idrees Hassan
2025-01-02 12:32:34 -05:00
parent 6717eb3e6e
commit 41c4c6907b
1 changed files with 52 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
birb.js
View File

@@ -223,8 +223,8 @@ const styles = `
.birb-window-list-item { .birb-window-list-item {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
padding-top: 4px; padding-top: 5px;
padding-bottom: 4px; padding-bottom: 5px;
opacity: 0.6; opacity: 0.6;
user-select: none; user-select: none;
display: flex; display: flex;
@@ -390,15 +390,15 @@ class Frame {
/** /**
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @param {number} direction * @param {number} direction
* @param {BirdType} [theme] * @param {BirdType} [species]
*/ */
draw(ctx, direction, theme) { draw(ctx, direction, species) {
const pixels = this.getPixels(theme?.tags[0]); const pixels = this.getPixels(species?.tags[0]);
for (let y = 0; y < pixels.length; y++) { for (let y = 0; y < pixels.length; y++) {
const row = pixels[y]; const row = pixels[y];
for (let x = 0; x < pixels[y].length; x++) { for (let x = 0; x < pixels[y].length; x++) {
const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1]; const cell = direction === Directions.LEFT ? row[x] : row[pixels[y].length - x - 1];
ctx.fillStyle = theme?.colors[cell] ?? cell; ctx.fillStyle = species?.colors[cell] ?? cell;
ctx.fillRect(x * CANVAS_PIXEL_SIZE, y * CANVAS_PIXEL_SIZE, CANVAS_PIXEL_SIZE, CANVAS_PIXEL_SIZE); ctx.fillRect(x * CANVAS_PIXEL_SIZE, y * CANVAS_PIXEL_SIZE, CANVAS_PIXEL_SIZE, CANVAS_PIXEL_SIZE);
}; };
}; };
@@ -425,10 +425,10 @@ class Anim {
* @param {CanvasRenderingContext2D} ctx * @param {CanvasRenderingContext2D} ctx
* @param {number} direction * @param {number} direction
* @param {number} timeStart The start time of the animation in milliseconds * @param {number} timeStart The start time of the animation in milliseconds
* @param {BirdType} [theme] The theme to use for the animation * @param {BirdType} [species] The species to use for the animation
* @returns {boolean} Whether the animation is complete * @returns {boolean} Whether the animation is complete
*/ */
draw(ctx, direction, timeStart, theme) { draw(ctx, direction, timeStart, species) {
let time = Date.now() - timeStart; let time = Date.now() - timeStart;
const duration = this.getAnimationDuration(); const duration = this.getAnimationDuration();
if (this.loop) { if (this.loop) {
@@ -438,12 +438,12 @@ class Anim {
for (let i = 0; i < this.durations.length; i++) { for (let i = 0; i < this.durations.length; i++) {
totalDuration += this.durations[i]; totalDuration += this.durations[i];
if (time < totalDuration) { if (time < totalDuration) {
this.frames[i].draw(ctx, direction, theme); this.frames[i].draw(ctx, direction, species);
return false; return false;
} }
} }
// Draw the last frame if the animation is complete // Draw the last frame if the animation is complete
this.frames[this.frames.length - 1].draw(ctx, direction, theme); this.frames[this.frames.length - 1].draw(ctx, direction, species);
return true; return true;
} }
} }
@@ -530,7 +530,7 @@ const species = {
[WING_EDGE]: "#9b8b82", [WING_EDGE]: "#9b8b82",
}), }),
tuftedTitmouse: new BirdType("Tufted Titmouse", tuftedTitmouse: new BirdType("Tufted Titmouse",
"Native to the eastern United States, full of personality, and my wife's favorite bird.", { "Native to the eastern United States, full of personality and notably my wife's favorite bird.", {
[BEAK]: "#000000", [BEAK]: "#000000",
[FOOT]: "#af8e75", [FOOT]: "#af8e75",
[EYE]: "#000000", [EYE]: "#000000",
@@ -797,8 +797,8 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
let focusedElement = null; let focusedElement = null;
let timeOfLastAction = Date.now(); let timeOfLastAction = Date.now();
let petStack = []; let petStack = [];
let currentTheme = "bluebird"; let currentSpecies = "bluebird";
let unlockedThemes = ["bluebird"]; let unlockedSpecies = ["bluebird"];
let visible = true; let visible = true;
function init() { function init() {
@@ -866,7 +866,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
} }
} }
if (visible && Math.random() < 1 / (60 * 3)) { if (visible && Math.random() < 1 / (60 * 3)) {
// activateFeather(); activateFeather();
} }
updateFeather(); updateFeather();
} }
@@ -905,7 +905,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
} }
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
if (currentAnimation.draw(ctx, direction, animStart, species[currentTheme])) { if (currentAnimation.draw(ctx, direction, animStart, species[currentSpecies])) {
setAnimation(Animations.STILL); setAnimation(Animations.STILL);
} }
@@ -957,12 +957,12 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
if (document.querySelector("#" + FEATHER_ID)) { if (document.querySelector("#" + FEATHER_ID)) {
return; return;
} }
const themes = Object.keys(species).filter((theme) => !unlockedThemes.includes(theme)); const speciesToUnlock = Object.keys(species).filter((species) => !unlockedSpecies.includes(species));
if (themes.length === 0) { if (speciesToUnlock.length === 0) {
// No more themes to unlock // No more species to unlock
return; return;
} }
const birdType = themes[Math.floor(Math.random() * themes.length)]; const birdType = speciesToUnlock[Math.floor(Math.random() * speciesToUnlock.length)];
insertFeather(birdType); insertFeather(birdType);
} }
@@ -970,7 +970,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
* @param {string} birdType * @param {string} birdType
*/ */
function insertFeather(birdType) { function insertFeather(birdType) {
let theme = species[birdType]; let type = species[birdType];
const featherCanvas = document.createElement("canvas"); const featherCanvas = document.createElement("canvas");
featherCanvas.id = FEATHER_ID; featherCanvas.id = FEATHER_ID;
featherCanvas.classList.add("birb-decoration"); featherCanvas.classList.add("birb-decoration");
@@ -983,7 +983,7 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
if (!featherCtx) { if (!featherCtx) {
return; return;
} }
FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), theme); FEATHER_ANIMATIONS.feather.draw(featherCtx, Directions.LEFT, Date.now(), type);
document.body.appendChild(featherCanvas); document.body.appendChild(featherCanvas);
onClick(featherCanvas, () => { onClick(featherCanvas, () => {
unlockBird(birdType); unlockBird(birdType);
@@ -1006,9 +1006,9 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
* @param {string} birdType * @param {string} birdType
*/ */
function unlockBird(birdType) { function unlockBird(birdType) {
if (!unlockedThemes.includes(birdType)) { if (!unlockedSpecies.includes(birdType)) {
unlockedThemes.push(birdType); unlockedSpecies.push(birdType);
insertModal("New Bird Unlocked!", `You've found a <b>${species[birdType].name}</b> feather! Use the Field Guide to switch your bird's theme.`); insertModal("New Bird Unlocked!", `You've found a <b>${species[birdType].name}</b> feather! Use the Field Guide to switch your bird's species.`);
} }
} }
@@ -1096,50 +1096,50 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
} }
content.innerHTML = ""; content.innerHTML = "";
const generateDescription = (/** @type {string} */ themeId) => { const generateDescription = (/** @type {string} */ speciesId) => {
const theme = species[themeId]; const type = species[speciesId];
const unlocked = unlockedThemes.includes(themeId); const unlocked = unlockedSpecies.includes(speciesId);
return "<b>" + theme.name + "</b><div style='height: 0.3em'></div>" + (!unlocked ? "Not yet unlocked" : theme.description); return "<b>" + type.name + "</b><div style='height: 0.3em'></div>" + (!unlocked ? "Not yet unlocked" : type.description);
}; };
const description = fieldGuide.querySelector(".birb-field-guide-description"); const description = fieldGuide.querySelector(".birb-field-guide-description");
if (!description) { if (!description) {
return; return;
} }
description.innerHTML = generateDescription(currentTheme); description.innerHTML = generateDescription(currentSpecies);
for (const [id, theme] of Object.entries(species)) { for (const [id, type] of Object.entries(species)) {
const unlocked = unlockedThemes.includes(id); const unlocked = unlockedSpecies.includes(id);
const themeElement = makeElement("birb-grid-item"); const speciesElement = makeElement("birb-grid-item");
if (id === currentTheme) { if (id === currentSpecies) {
themeElement.classList.add("birb-grid-item-selected"); speciesElement.classList.add("birb-grid-item-selected");
} }
const themeCanvas = document.createElement("canvas"); const speciesCanvas = document.createElement("canvas");
themeCanvas.width = SPRITE_WIDTH * CANVAS_PIXEL_SIZE; speciesCanvas.width = SPRITE_WIDTH * CANVAS_PIXEL_SIZE;
themeCanvas.height = SPRITE_HEIGHT * CANVAS_PIXEL_SIZE; speciesCanvas.height = SPRITE_HEIGHT * CANVAS_PIXEL_SIZE;
const themeCtx = themeCanvas.getContext("2d"); const speciesCtx = speciesCanvas.getContext("2d");
if (!themeCtx) { if (!speciesCtx) {
return; return;
} }
birbFrames.base.draw(themeCtx, Directions.RIGHT, theme); birbFrames.base.draw(speciesCtx, Directions.RIGHT, type);
themeElement.appendChild(themeCanvas); speciesElement.appendChild(speciesCanvas);
content.appendChild(themeElement); content.appendChild(speciesElement);
if (unlocked) { if (unlocked) {
onClick(themeElement, () => { onClick(speciesElement, () => {
switchTheme(id); switchspecies(id);
document.querySelectorAll(".birb-grid-item").forEach((element) => { document.querySelectorAll(".birb-grid-item").forEach((element) => {
element.classList.remove("birb-grid-item-selected"); element.classList.remove("birb-grid-item-selected");
}); });
themeElement.classList.add("birb-grid-item-selected"); speciesElement.classList.add("birb-grid-item-selected");
}); });
} else { } else {
themeElement.classList.add("birb-grid-item-locked"); speciesElement.classList.add("birb-grid-item-locked");
} }
themeElement.addEventListener("mouseover", () => { speciesElement.addEventListener("mouseover", () => {
console.log("mouseover"); console.log("mouseover");
description.innerHTML = generateDescription(id); description.innerHTML = generateDescription(id);
}); });
themeElement.addEventListener("mouseout", () => { speciesElement.addEventListener("mouseout", () => {
description.innerHTML = generateDescription(currentTheme); description.innerHTML = generateDescription(currentSpecies);
}); });
} }
} }
@@ -1223,10 +1223,10 @@ Promise.all([loadSpritesheetPixels(SPRITE_SHEET_URI), loadSpritesheetPixels(DECO
} }
/** /**
* @param {string} theme * @param {string} species
*/ */
function switchTheme(theme) { function switchspecies(species) {
currentTheme = theme; currentSpecies = species;
} }
/** /**