noham/Pocket-Bird
1
0
Fork 0
mirror of https://github.com/NohamR/Pocket-Bird.git synced 2026-05-25 12:17:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Store changes in local storage

Browse Source
This commit is contained in:
Idrees Hassan
2026-03-11 16:33:17 -07:00
parent 6cfd32270c
commit 3eda5ffc92
1 changed files with 34 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
editor/editor.js
View File

@@ -10,7 +10,6 @@ import species from '../src/species.js';
const COLOR_MAP = SPRITE_SHEET_COLOR_MAP; const COLOR_MAP = SPRITE_SHEET_COLOR_MAP;
const SPRITE_PATH = "../sprites/birb.png"; const SPRITE_PATH = "../sprites/birb.png";
const SPRITE_SIZE = 32; const SPRITE_SIZE = 32;
/** @type {Record<string, string>} */ /** @type {Record<string, string>} */
const DEFAULT_OVERRIDES = { const DEFAULT_OVERRIDES = {
"hood": "face", "hood": "face",
@@ -36,22 +35,13 @@ const colorPickerInput = document.createElement("input");
/** @type {HTMLElement} */ /** @type {HTMLElement} */
// @ts-ignore // @ts-ignore
const jsonElement = document.getElementById("json"); const jsonElement = document.getElementById("json");
/** @type {Record<string, HTMLElement>} */
const colorElements = {};
/** @type {string|null} */ /** @type {string|null} */
let selectedPart = null; let selectedPart = null;
/** @type {HTMLElement|null} */ /** @type {HTMLElement|null} */
let selectedColorElement = null; let selectedColorElement = null;
/** @type {Record<string, HTMLElement>} */
const colorElements = {};
/** @type {Species} */
let currentSpecies = JSON.parse(JSON.stringify(species.bluebird));
let speciesHistory = [JSON.parse(JSON.stringify(currentSpecies))];
let historyIndex = 0;
/** @type {Frame|null} */
let baseFrame = null;
const spriteCanvas = document.createElement('canvas'); const spriteCanvas = document.createElement('canvas');
spriteCanvas.width = canvas.width; spriteCanvas.width = canvas.width;
spriteCanvas.height = canvas.height; spriteCanvas.height = canvas.height;
@@ -59,6 +49,13 @@ spriteCanvas.height = canvas.height;
// @ts-ignore // @ts-ignore
const spriteCtx = spriteCanvas.getContext('2d'); const spriteCtx = spriteCanvas.getContext('2d');
/** @type {Species} */
let currentSpecies = JSON.parse(JSON.stringify(species.bluebird));
let speciesHistory = [JSON.parse(JSON.stringify(currentSpecies))];
let historyIndex = 0;
/** @type {Frame|null} */
let baseFrame = null;
function drawBackground() { function drawBackground() {
const patternSize = 2; const patternSize = 2;
const colors = ["#edf0f4", "#dadbe0"]; const colors = ["#edf0f4", "#dadbe0"];
@@ -88,11 +85,11 @@ function draw() {
return; return;
} }
drawBackground(); drawBackground();
baseFrame.draw(spriteCtx, Directions.RIGHT, 1, buildColorScheme(), currentSpecies.tags || []); baseFrame.draw(spriteCtx, Directions.LEFT, 1, buildColorScheme(), currentSpecies.tags || []);
ctx.drawImage(spriteCanvas, 0, 0); ctx.drawImage(spriteCanvas, 0, 0);
} }
function updateSpecies() { function commitChange() {
const previousSpecies = speciesHistory[historyIndex]; const previousSpecies = speciesHistory[historyIndex];
let changed = false; let changed = false;
// Check for changes in colors // Check for changes in colors
@@ -133,6 +130,7 @@ function updateSpecies() {
speciesHistory = speciesHistory.slice(0, historyIndex + 1); speciesHistory = speciesHistory.slice(0, historyIndex + 1);
speciesHistory.push(JSON.parse(JSON.stringify(currentSpecies))); speciesHistory.push(JSON.parse(JSON.stringify(currentSpecies)));
historyIndex++; historyIndex++;
localStorage.setItem("speciesHistory", JSON.stringify(speciesHistory));
} }
updateJson(); updateJson();
draw(); draw();
@@ -215,7 +213,7 @@ function createColorPicker() {
document.addEventListener("mouseup", () => { document.addEventListener("mouseup", () => {
if (selectedPart !== null && !jsonElement.contains(document.activeElement)) { if (selectedPart !== null && !jsonElement.contains(document.activeElement)) {
updateSpecies(); commitChange();
} }
}); });
} }
@@ -256,7 +254,7 @@ function createColorSwatch(label, color) {
labelElement.addEventListener("click", () => { labelElement.addEventListener("click", () => {
delete currentSpecies.colors[label]; delete currentSpecies.colors[label];
colorElement.style.backgroundColor = getColor(label); colorElement.style.backgroundColor = getColor(label);
updateSpecies(); commitChange();
refreshEditor(); refreshEditor();
}); });
item.appendChild(labelElement); item.appendChild(labelElement);
@@ -280,7 +278,7 @@ function createTagToggle(tag, enabled) {
toggle.addEventListener("click", () => { toggle.addEventListener("click", () => {
setTag(tag, !getTag(tag)); setTag(tag, !getTag(tag));
toggle.classList.toggle("tag-toggle--active", getTag(tag)); toggle.classList.toggle("tag-toggle--active", getTag(tag));
updateSpecies(); commitChange();
draw(); draw();
}); });
item.appendChild(toggle); item.appendChild(toggle);
@@ -353,11 +351,28 @@ jsonElement.addEventListener("input", () => {
}); });
jsonElement.addEventListener("blur", () => { jsonElement.addEventListener("blur", () => {
updateSpecies(); commitChange();
}); });
function loadSpeciesHistory() {
const storedHistory = localStorage.getItem("speciesHistory");
if (storedHistory) {
try {
const parsedHistory = JSON.parse(storedHistory);
if (Array.isArray(parsedHistory) && parsedHistory.length > 0) {
speciesHistory = parsedHistory;
currentSpecies = JSON.parse(JSON.stringify(speciesHistory[speciesHistory.length - 1]));
historyIndex = speciesHistory.length - 1;
}
} catch (e) {
console.warn("Failed to parse species history from localStorage:", e);
}
}
}
createColorPicker(); createColorPicker();
loadEditor(); loadEditor();
loadSpeciesHistory();
(async () => { (async () => {
const pixels = await loadSpriteSheetPixels(SPRITE_PATH); const pixels = await loadSpriteSheetPixels(SPRITE_PATH);
@@ -365,5 +380,5 @@ loadEditor();
new Layer(getLayerPixels(pixels, 0, SPRITE_SIZE)), new Layer(getLayerPixels(pixels, 0, SPRITE_SIZE)),
new Layer(getLayerPixels(pixels, 5, SPRITE_SIZE), TAG.TUFT), new Layer(getLayerPixels(pixels, 5, SPRITE_SIZE), TAG.TUFT),
]); ]);
updateSpecies(); commitChange();
})(); })();