(() => {
'use strict';
console.info('Pixel Island loaded');
const STORAGE_KEY = 'pixel-island-summoner:phase6b';
const LEGACY_STORAGE_KEYS = ['pixel-island-summoner:phase6a', 'pixel-island-summoner:phase6b:schema27'];
const SAVE_SCHEMA = 32;
const LOCAL_MANIFEST_FORMAT = 'pixel-island-local-manifest-v1';
const SHARED_API_ENDPOINT = './api/index.php';
const SHARED_SYNC_INTERVAL_MS = 5000;
const WORLD_W = 144;
const WORLD_H = 112;
const TILE_W = 32;
const TILE_H = 16;
const ORIGIN_X = WORLD_H * TILE_W / 2 + 80;
const ORIGIN_Y = 42;
const DAY_MS = 10 * 60 * 1000;
const STATIC_SCALE = 2;
const DYNAMIC_SCALE = 1;
const MAX_ZOOM = 3.2;
const MIN_ZOOM = 0.45;
const TERRAIN_CHUNK_SIZE = 16;
const VIEW_CULL_MARGIN = 192;
const DYNAMIC_LOGIC_STEP_MS = 1000 / 15;
const TARGET_RENDER_FRAME_MS = 1000 / 30;
const MAX_DYNAMIC_STEPS_PER_FRAME = 3;
const MAX_SPRITE_CACHE_ENTRIES = 260;
const DEPTH_LOCAL_LIGHT_RESPONSE_MULTIPLIER = 5;
const CURSOR_LIGHT_COLOR = '#dff6ff';
const CURSOR_LIGHT_WORLD_RADIUS = 86;
const CURSOR_LIGHT_INTENSITY = 0.15625;
const CURSOR_DEPTH_REFLECTION_MULTIPLIER = 1.85;
const MODULES = window.PixelIslandModules || {};
const PaletteModule = MODULES.Palette || {};
const BASE_COLOR_CODES = PaletteModule.BASE_COLOR_CODES || '0123456789abcdefghij';
const ADVANCED_COLOR_CODES = PaletteModule.ADVANCED_COLOR_CODES || ('klmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' + "!#$%&'()*+,-/:;<=>?@[]^_`{|}~");
const COLOR_CODES = PaletteModule.COLOR_CODES || (BASE_COLOR_CODES + ADVANCED_COLOR_CODES);
const BASIC_PALETTE_COUNT = PaletteModule.BASIC_PALETTE_COUNT || BASE_COLOR_CODES.length;
const DEFAULT_SELECTED_COLOR_CODE = PaletteModule.DEFAULT_SELECTED_COLOR_CODE || (BASE_COLOR_CODES.includes('a') ? 'a' : (BASE_COLOR_CODES[0] || '0'));
const PALETTE = PaletteModule.PALETTE || buildPalette();
const PALETTE_BY_CODE = PaletteModule.PALETTE_BY_CODE || Object.fromEntries(PALETTE.map((p) => [p.code, p.color]));
const Phase2Sync = MODULES.Phase2Sync || null;
const StateIndex = MODULES.StateIndex || null;
const RotationPolicy = MODULES.RotationPolicy || null;
const Lighting = MODULES.Lighting || null;
const ModuleLoader = MODULES.ModuleLoader || null;
const WorkerClient = MODULES.WorkerClient || null;
const PixelCodec = MODULES.PixelCodec || {};
const EDITOR_HISTORY_LIMIT = 80;
const MAX_EDITOR_DIMENSION = 64;
const PHASE5_GUARDRAILS = { maxAssets: 220, maxWorldObjects: 1000, maxReports: 200, defaultDisplayLimit: 250, newArrivalSlots: 150, revivalSlots: 100, publishLimitFirstDay: 5, publishLimitTrusted: 10, upvoteDelaySlots: 20, downvoteAdvanceSlots: 25, upvoteRankCap: 50, maxParticles: 200, particleMinZoom: 0.72 };
const editorActions = () => MODULES.EditorActions || null;
const $ = (id) => document.getElementById(id);
const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
const uid = () => Math.random().toString(36).slice(2, 9) + Date.now().toString(36).slice(-5);
const mod = (n, m) => ((n % m) + m) % m;
const lerp = (a, b, t) => a + (b - a) * t;
function clampDimension(value, fallback = 8) {
return PixelCodec.clampDimension ? PixelCodec.clampDimension(value, fallback) : Math.max(1, Math.min(MAX_EDITOR_DIMENSION, Math.round(Number(value) || fallback)));
}
function rectArea(width, height = width) {
return Math.max(1, Math.floor(Number(width) || 1)) * Math.max(1, Math.floor(Number(height) || width || 1));
}
function lightBudgetForArea(width, height = width) {
return Math.max(1, Math.ceil(rectArea(width, height) / 100));
}
function assetWidth(asset) {
return PixelCodec.assetWidth ? PixelCodec.assetWidth(asset) : clampDimension(asset?.width ?? asset?.w ?? asset?.size, 16);
}
function assetHeight(asset) {
return PixelCodec.assetHeight ? PixelCodec.assetHeight(asset) : clampDimension(asset?.height ?? asset?.ht ?? asset?.size, assetWidth(asset));
}
function assetMaxSize(asset) {
return PixelCodec.assetMaxSize ? PixelCodec.assetMaxSize(asset) : Math.max(assetWidth(asset), assetHeight(asset));
}
function clampInt(value, min, max, fallback = min) {
const n = Math.round(Number(value));
return PixelCodec.clampInt ? PixelCodec.clampInt(value, min, max, fallback) : (Number.isFinite(n) ? clamp(n, min, max) : fallback);
}
function buildPixelBlob(encodedPixels, width, height = width) {
return PixelCodec.buildPixelBlob(encodedPixels, width, height, PALETTE, DEFAULT_SELECTED_COLOR_CODE);
}
function computePixelBlobId(codec, width, height, payload) {
return PixelCodec.computePixelBlobId(codec, width, height, payload, PALETTE, DEFAULT_SELECTED_COLOR_CODE);
}
function ensureAssetBlobId(asset) {
return PixelCodec.ensureAssetBlobId(asset, PALETTE, DEFAULT_SELECTED_COLOR_CODE);
}
function blankPixels(width, height = width) {
return PixelCodec.blankPixels(width, height);
}
function normalizePixels(pixels, width, height = width) {
return PixelCodec.normalizePixels(pixels, width, height, PALETTE, DEFAULT_SELECTED_COLOR_CODE);
}
function encodePixels(pixels, width = null, height = null) {
return PixelCodec.encodePixels(pixels, width, height, PALETTE, DEFAULT_SELECTED_COLOR_CODE);
}
function colorToHex(value) {
return PixelCodec.colorToHex(value);
}
function nearestPaletteCode(color) {
return PixelCodec.nearestPaletteCode(color);
}
function nearestBasicPaletteCode(color) {
return PixelCodec.nearestBasicPaletteCode(color);
}
function nearestPaletteCodeFrom(entries, color, fallback) {
return PixelCodec.nearestPaletteCodeFrom(entries, color, fallback);
}
function readableTextColor(hex) {
return PixelCodec.readableTextColor(hex);
}
function parseHex(hex) {
return PixelCodec.parseHex(hex);
}
function fnv1a(value) {
return PixelCodec.fnv1a(value);
}
function editorCellSize() {
return Math.max(1, Math.floor(Math.min(els.paintCanvas.width / Math.max(1, editorWidth), els.paintCanvas.height / Math.max(1, editorHeight))));
}
function updateDimensionInputs() {
if (els.assetWidth) els.assetWidth.value = String(editorWidth);
if (els.assetHeight) els.assetHeight.value = String(editorHeight);
if (els.assetSize) {
const preset = editorWidth === editorHeight && [8, 16, 32, 64].includes(editorWidth) ? editorWidth : '';
els.assetSize.value = preset ? String(preset) : String(Math.max(8, Math.min(64, editorSize)));
}
}
function defaultVisualSettings() {
return { enableLights: true, enableParticles: true, enableDayNight: true, localDisplayLimit: PHASE5_GUARDRAILS.defaultDisplayLimit };
}
function visualSettings() {
state.settings = { ...defaultVisualSettings(), ...(state.settings || {}) };
return state.settings;
}
const DEFAULT_SERVER_AUTHORITY = Object.freeze({
publish: 'server',
objectMove: 'server',
dayNight: 'local',
dynamicMotion: 'server'
});
function serverAuthority() {
ensureWorldProtectionState();
state.serverSync.authority = { ...DEFAULT_SERVER_AUTHORITY, ...(state.serverSync.authority || {}) };
return state.serverSync.authority;
}
function isServerAuthoritative(feature) {
if (feature === 'dayNight') return false;
return serverAuthority()[feature] === 'server';
}
function getAuthoritativeNow() {
return Date.now();
}
function getPendingSharedVisuals() {
ensureWorldProtectionState();
const visuals = state.serverSync.pendingObjectVisuals || {};
const now = Date.now();
const out = [];
let dirty = false;
for (const [id, entry] of Object.entries(visuals)) {
if (!entry || !entry.object || !entry.assetId) {
delete visuals[id];
dirty = true;
continue;
}
// Keep optimistic shared-world placement visuals until a server event accepts or rejects them.
// A short TTL made newly drawn works vanish while the command was still pending.
if (Number(entry.expiresAt || 0) > 0 && now > Number(entry.expiresAt) && entry.expirePending === true) {
delete visuals[id];
dirty = true;
continue;
}
out.push(entry);
}
if (dirty) state.serverSync.pendingObjectVisuals = visuals;
return out;
}
function hydrateVisualSettingsUI() {
const settings = visualSettings();
if (els.settingLights) els.settingLights.checked = settings.enableLights !== false;
if (els.settingParticles) els.settingParticles.checked = settings.enableParticles !== false;
if (els.settingDayNight) els.settingDayNight.checked = settings.enableDayNight !== false;
if (els.displayLimit) els.displayLimit.value = String(getLocalDisplayLimit());
}
function clearVisualEffectState() {
spawnEffects = [];
bubbleParticles = [];
confettiParticles = [];
landStepParticles = [];
natureDriftParticles = [];
}
function toggleHidden(el, hidden) {
if (el) el.hidden = hidden;
}
function currentRole() {
return els.assetCategory?.value || 'human';
}
function roleToCategory(role) {
return role === 'human' || role === 'animal' || role === 'bird' || role === 'fish' ? 'dynamic' : 'static';
}
function roleToSubtype(role) {
return role || 'other';
}
function subtypeToRole(asset) {
const subtype = asset?.subtype;
if (['human', 'animal', 'bird', 'fish', 'nature', 'building', 'ship', 'other'].includes(subtype)) return subtype;
if (subtype === 'water') return 'other';
if (asset?.category === 'dynamic') return 'animal';
return 'other';
}
const els = {
canvas: $('worldCanvas'),
openEditor: $('openEditor'), drawQuotaBadge: $('drawQuotaBadge'), finishQuotaBadge: $('finishQuotaBadge'),
openCreate: $('openCreate'),
openCollection: $('openCollection'),
openMenu: $('openMenu'),
closeEditor: $('closeEditor'),
placeHereButton: $('placeHereButton'), createAccount: $('createAccount'), accountNote: $('accountNote'), accountId: $('accountId'), accountPass: $('accountPass'),
drawer: $('studioDrawer'),
tabs: [...document.querySelectorAll('.tab')],
panels: [...document.querySelectorAll('.tabPanel')],
phaseLabel: $('phaseLabel'),
phaseBar: $('phaseBar'),
analogClock: $('analogClock'),
analogClockHand: $('analogClockHand'),
authorName: $('authorName'),
selectedAssetName: $('selectedAssetName'),
tileInfo: $('tileInfo'),
toast: $('toast'),
selectionBubble: $('selectionBubble'), bubbleName: $('bubbleName'), bubbleAuthor: $('bubbleAuthor'), bubbleRemixFrom: $('bubbleRemixFrom'), bubbleRemixCount: $('bubbleRemixCount'), voteScore: $('voteScore'), voteUp: $('voteUp'), voteDown: $('voteDown'), bubbleRemix: $('bubbleRemix'), bubbleTeleport: $('bubbleTeleport'), bubbleMenu: $('bubbleMenu'), bubbleMenuActions: $('bubbleMenuActions'), bubbleEdit: $('bubbleEdit'), bubbleReport: $('bubbleReport'), bubbleHide: $('bubbleHide'),
modeInspect: $('modeInspect'), modePlace: $('modePlace'), modeErase: $('modeErase'),
drawerInspect: $('drawerInspect'), drawerPlace: $('drawerPlace'), drawerErase: $('drawerErase'),
zoomOut: $('zoomOut'), zoomIn: $('zoomIn'), resetView: $('resetView'),
drawerZoomOut: $('drawerZoomOut'), drawerZoomIn: $('drawerZoomIn'), drawerResetView: $('drawerResetView'),
assetName: $('assetName'),
assetSize: $('assetSize'), assetWidth: $('assetWidth'), assetHeight: $('assetHeight'),
assetCategory: $('assetCategory'),
staticKindWrap: $('staticKindWrap'),
dynamicKindWrap: $('dynamicKindWrap'),
roleHint: $('roleHint'),
sideSwitcher: $('sideSwitcher'), frontSideSwitcher: $('frontSideSwitcher'),
editRight: $('editRight'), editLeft: $('editLeft'), frontRight: $('frontRight'), frontLeft: $('frontLeft'),
paintColor: $('paintColor'), toolBrush: $('toolBrush'), toolErase: $('toolErase'), toolFill: $('toolFill'), toolPick: $('toolPick'), toolLine: $('toolLine'), toolRect: $('toolRect'), toolSelect: $('toolSelect'), undoPaint: $('undoPaint'), redoPaint: $('redoPaint'),
toolLight: $('toolLight'), toolParticle: $('toolParticle'), toolDoor: $('toolDoor'), toolDepth: $('toolDepth'), depthHigh: $('depthHigh'), depthLow: $('depthLow'), toggleAdvanced: $('toggleAdvanced'), advancedHint: $('advancedHint'), advancedToolGroup: $('advancedToolGroup'), particleDirectionWrap: $('particleDirectionWrap'), particleDirection: $('particleDirection'), particleUseSelection: $('particleUseSelection'), particleClearRange: $('particleClearRange'), particleRangeStatus: $('particleRangeStatus'), clearPaint: $('clearPaint'), flipHorizontal: $('flipHorizontal'), flipVertical: $('flipVertical'), outlinePaint: $('outlinePaint'), clearSelection: $('clearSelection'), nudgeLeft: $('nudgeLeft'), nudgeRight: $('nudgeRight'), nudgeUp: $('nudgeUp'), nudgeDown: $('nudgeDown'),
paintCanvas: $('paintCanvas'), editHint: $('editHint'), paletteGrid: $('paletteGrid'),
lightColor: $('lightColor'), staticSettingsPanel: $('staticSettingsPanel'), dynamicSettingsPanel: $('dynamicSettingsPanel'), doorMarkerHint: $('doorMarkerHint'),
settingsSummary: $('settingsSummary'), saveAsset: $('saveAsset'), saveAndPlace: $('saveAndPlace'), checkOnIsland: $('checkOnIsland'), newAsset: $('newAsset'),
lineageNote: $('lineageNote'), assetList: $('assetList'), likedCodex: $('likedCodex'), showHiddenAssets: $('showHiddenAssets'), hiddenAssetPanel: $('hiddenAssetPanel'), hiddenAssetList: $('hiddenAssetList'),
settingLights: $('settingLights'), settingParticles: $('settingParticles'), settingDayNight: $('settingDayNight'), displayLimit: $('displayLimit'), rotationStats: $('rotationStats'),
reportDialog: $('reportDialog'), reportReason: $('reportReason'), reportCancel: $('reportCancel'), reportSubmit: $('reportSubmit'), reportObjectName: $('reportObjectName'),
confirmDialog: $('confirmDialog'), confirmTitle: $('confirmTitle'), confirmMessage: $('confirmMessage'), confirmOk: $('confirmOk'), confirmCancel: $('confirmCancel')
};
const ctx = els.canvas.getContext('2d', { alpha: false });
const pctx = els.paintCanvas.getContext('2d', { alpha: true });
ctx.imageSmoothingEnabled = false;
pctx.imageSmoothingEnabled = false;
let dpr = window.devicePixelRatio || 1;
let cw = 1;
let ch = 1;
let world = makeWorld();
let terrainCache = buildTerrainCache(world);
let resetPhase2CacheOnBoot = false;
let state = loadState();
let selectedAssetId = state.assets[0]?.id ?? null;
let mode = 'inspect';
let view = { x: 0, y: 0, zoom: 1 };
let pointer = {
down: false, id: null, startX: 0, startY: 0, lastX: 0, lastY: 0,
dragging: false, downTime: 0, button: 0
};
let cursorScreen = { x: 0, y: 0, active: false };
let hoverTile = null;
let dynamicRuntime = [];
let spriteCache = new Map();
let lastRenderedSpriteInfo = new Map();
let lastRuntimeUpdate = performance.now();
let lastRenderAt = 0;
let lastClockSecond = -1;
let toastTimer = null;
let editorWidth = 8;
let editorHeight = 8;
let editorSize = 8;
let editorPixels = blankPixels(8);
let editorLeftPixels = blankPixels(8);
let editingSide = 'right';
let frontSide = 'right';
let paintTool = 'brush';
let selectedColorCode = DEFAULT_SELECTED_COLOR_CODE;
let advancedDraw = false;
let activeTabName = 'draw';
let depthPixels = blankPixels(8).map(() => 0);
let depthPaintMode = 1;
let isPainting = false;
let staticKind = 'nature';
let dynamicKind = 'human';
let lightPixels = [];
let particlePixels = [];
let particleConfig = { enabled: false, c: 'f', dir: 'up' };
let doorPixel = { x: 8, y: 15 };
let editParentId = null;
let editOriginalId = null;
let editingAssetId = null;
let lastPaintedKey = '';
let spawnEffects = [];
let bubbleParticles = [];
let confettiParticles = [];
let landStepParticles = [];
let natureDriftParticles = [];
let coastalFoamTextures = null;
let mousePaint = { active: false, panning: false, lastX: 0, lastY: 0, button: 0 };
let shadowCanvasCache = new WeakMap();
let shipReflectionCanvasCache = new WeakMap();
let shadowMaskCanvas = null;
let shadowMaskCtx = null;
let activeShadowCtx = null;
let animationFrameId = 0;
let dynamicLogicRemainder = 0;
let worldIndex = makeEmptyWorldIndex();
let selectedObject = null;
let cameraFollowSelected = false;
let pendingReport = null;
let libraryFilter = 'all';
let librarySearch = '';
const uiState = {
library: { viewTab: 'mine', search: '', filter: 'all', scroll: { bodyTop: 0, gridTop: 0 }, restoreToken: 0 },
selectedAssetId: null
};
let libraryViewTab = uiState.library.viewTab;
let libraryScrollTop = uiState.library.scroll.bodyTop;
let libraryGridScrollTop = uiState.library.scroll.gridTop;
let libraryScrollFrameToken = uiState.library.restoreToken;
let renderPhase = null;
let editorView = { zoom: 1, x: 0, y: 0 };
let editorPointer = { panning: false, pointerId: null, lastX: 0, lastY: 0 };
let editorHistory = [];
let editorFuture = [];
let editorGestureSnapshot = null;
let editorGestureChanged = false;
let suppressNextPaintClick = false;
let suppressMousePaintUntil = 0;
let editorSelection = null;
let selectionGesture = null;
let shapeGesture = null;
let shapePreview = null;
let placementPreview = null;
let sharedSyncTimer = 0;
let sharedSyncInFlight = false;
let sharedApiAvailable = null;
let lastSharedSyncAt = 0;
let suppressCanvasContextMenuOnce = false;
async function bootstrap() {
resizeCanvas();
resetView(false);
await restoreStateFromIndexedDb();
rebuildWorldIndex();
hydrateRuntime();
coastalFoamTextures = buildCoastalFoamTextures();
wireUI();
renderPalette();
hydrateAuthorUI();
updateAccountUI();
if (els.assetCategory && !els.assetCategory.value) els.assetCategory.value = 'human';
refreshCategoryUI();
setupEditor(8, blankPixels(8), null);
clearEditorHistory();
renderLibrary({ preserveScroll: false });
updateSelectedLabel();
hydrateVisualSettingsUI();
updateRotationStats();
await syncSharedWorld({ silent: true, reason: 'boot' });
startSharedSyncLoop();
scheduleFrame();
}
function wireUI() {
window.addEventListener('resize', () => {
resizeCanvas();
render();
});
drawerScroller()?.addEventListener('scroll', () => {
const body = drawerScroller();
libraryScrollTop = body?.scrollTop || 0;
uiState.library.scroll.bodyTop = libraryScrollTop;
}, { passive: true });
els.openEditor?.addEventListener('click', () => { clearWorldSelection(false); setDrawerOpen(true); });
els.openCreate?.addEventListener('click', () => { setTab('draw'); clearWorldSelection(false); setDrawerOpen(true); });
els.openCollection?.addEventListener('click', () => { setTab('library', { preserveScroll: true }); clearWorldSelection(false); setDrawerOpen(true); });
els.closeEditor.addEventListener('click', () => setDrawerOpen(false));
els.tabs.forEach((button) => {
button.addEventListener('click', () => setTab(button.dataset.tab, { preserveScroll: button.dataset.tab === 'library' }));
});
drawerScroller()?.addEventListener('scroll', () => {
if (activeTabName !== 'library') return;
const top = drawerScroller()?.scrollTop;
if (Number.isFinite(top)) libraryScrollTop = top;
}, { passive: true });
els.authorName?.addEventListener('input', () => {
const fallback = state.account?.id || 'Local Artist';
state.authorName = (els.authorName.value || fallback).trim() || fallback;
if (state.account) state.account.name = state.authorName;
saveState();
updateAccountUI();
renderLibrary();
});
els.accountPass?.addEventListener('input', () => {
if (!state.account) return;
state.account.password = (els.accountPass.value || '').trim();
saveState();
updateAccountUI();
});
els.createAccount?.addEventListener('click', () => createLocalAccount(false));
els.placeHereButton?.addEventListener('pointerdown', (event) => { event.preventDefault(); event.stopPropagation(); confirmPreviewPlacement(); });
els.placeHereButton?.addEventListener('click', (event) => { event.preventDefault(); event.stopPropagation(); if (placementPreview?.asset) confirmPreviewPlacement(); });
els.settingLights?.addEventListener('change', () => {
visualSettings().enableLights = !!els.settingLights.checked;
spriteCache.clear();
saveState();
render();
});
els.settingParticles?.addEventListener('change', () => {
visualSettings().enableParticles = !!els.settingParticles.checked;
if (!visualSettings().enableParticles) clearVisualEffectState();
saveState();
render();
});
els.settingDayNight?.addEventListener('change', () => {
visualSettings().enableDayNight = !!els.settingDayNight.checked;
spriteCache.clear();
saveState();
updateClock();
render();
});
els.displayLimit?.addEventListener('change', () => {
const value = clampInt(els.displayLimit.value, 25, 500, PHASE5_GUARDRAILS.defaultDisplayLimit);
visualSettings().localDisplayLimit = value;
els.displayLimit.value = String(value);
saveState();
renderLibrary();
render();
});
[els.modeInspect, els.drawerInspect].filter(Boolean).forEach((el) => el.addEventListener('click', () => setMode('inspect')));
[els.modePlace, els.drawerPlace].filter(Boolean).forEach((el) => el.addEventListener('click', () => setMode('place')));
[els.modeErase, els.drawerErase].filter(Boolean).forEach((el) => el.addEventListener('click', () => setMode('erase')));
[els.zoomOut, els.drawerZoomOut].filter(Boolean).forEach((el) => el.addEventListener('click', () => zoomAt(cw / 2, ch / 2, view.zoom / 1.2)));
[els.zoomIn, els.drawerZoomIn].filter(Boolean).forEach((el) => el.addEventListener('click', () => zoomAt(cw / 2, ch / 2, view.zoom * 1.2)));
[els.resetView, els.drawerResetView].filter(Boolean).forEach((el) => el.addEventListener('click', () => resetView(true)));
els.canvas.addEventListener('pointerdown', onWorldPointerDown);
els.canvas.addEventListener('pointermove', onWorldPointerMove);
els.canvas.addEventListener('pointerup', onWorldPointerUp);
els.canvas.addEventListener('pointercancel', onWorldPointerUp);
els.canvas.addEventListener('wheel', onWorldWheel, { passive: false });
els.canvas.addEventListener('contextmenu', (event) => {
event.preventDefault();
if (suppressCanvasContextMenuOnce) {
suppressCanvasContextMenuOnce = false;
return;
}
if (mode === 'place' && placementPreview?.asset && placementPreview.x != null && placementPreview.y != null) {
confirmPreviewPlacement();
return;
}
cancelPlacementPreview(false);
clearWorldSelection(true);
setMode('inspect');
});
document.addEventListener('contextmenu', onDocumentContextMenu);
document.addEventListener('visibilitychange', onVisibilityChange);
els.assetSize?.addEventListener('change', () => {
const nextSize = clampDimension(els.assetSize.value, editorSize);
resizeEditorCanvas(nextSize, nextSize);
});
[els.assetWidth, els.assetHeight].filter(Boolean).forEach((input) => {
input.addEventListener('change', () => {
resizeEditorCanvas(clampDimension(els.assetWidth?.value, editorWidth), clampDimension(els.assetHeight?.value, editorHeight));
});
});
els.assetCategory.addEventListener('change', refreshCategoryUI);
document.querySelectorAll('[data-static-kind]').forEach((button) => {
button.addEventListener('click', () => {
staticKind = button.dataset.staticKind;
document.querySelectorAll('[data-static-kind]').forEach((b) => b.classList.toggle('active', b === button));
refreshCategoryUI();
});
});
document.querySelectorAll('[data-dynamic-kind]').forEach((button) => {
button.addEventListener('click', () => {
dynamicKind = button.dataset.dynamicKind;
document.querySelectorAll('[data-dynamic-kind]').forEach((b) => b.classList.toggle('active', b === button));
refreshCategoryUI();
});
});
els.editRight.addEventListener('click', () => setEditingSide('right'));
els.editLeft.addEventListener('click', () => setEditingSide('left'));
els.frontRight?.addEventListener('click', () => setFrontSide('right'));
els.frontLeft?.addEventListener('click', () => setFrontSide('left'));
els.toolBrush.addEventListener('click', () => setPaintTool('brush'));
els.toolErase.addEventListener('click', () => setPaintTool('erase'));
els.toolFill?.addEventListener('click', () => setPaintTool('fill'));
els.toolPick?.addEventListener('click', () => setPaintTool('pick'));
els.toolLine?.addEventListener('click', () => setPaintTool('line'));
els.toolRect?.addEventListener('click', () => setPaintTool('rect'));
els.toolSelect?.addEventListener('click', () => setPaintTool('select'));
els.toolLight.addEventListener('click', () => setPaintTool('light'));
els.toolDoor.addEventListener('click', () => setPaintTool('door'));
els.toolDepth?.addEventListener('click', () => setPaintTool('depth'));
els.toolParticle?.addEventListener('click', () => { setPaintTool('particle'); enableParticleEffect(); });
els.particleDirection?.addEventListener('change', () => {
const before = JSON.stringify(particleConfig);
particleConfig = normalizeParticleConfig({ ...particleConfig, dir: els.particleDirection.value || 'up' });
if (particleConfig.enabled && JSON.stringify(particleConfig) !== before) markEditorChanged();
updateParticleUI();
renderPalette();
drawEditor();
});
els.particleUseSelection?.addEventListener('click', setParticleRangeFromSelection);
els.particleClearRange?.addEventListener('click', clearParticleRange);
els.depthHigh?.addEventListener('click', () => setDepthPaintMode(1));
els.depthLow?.addEventListener('click', () => setDepthPaintMode(-1));
els.toggleAdvanced?.addEventListener('click', () => {
setAdvancedDraw(!advancedDraw);
});
els.clearPaint.addEventListener('click', async () => {
const confirmed = await confirmWebsiteDialog({
title: 'Clear canvas',
message: 'Clear the entire canvas? This removes all pixels, lights, depth, particles, and selection.',
okText: 'Clear',
danger: true
});
if (!confirmed) return;
commitEditorMutation(() => {
editorPixels = blankPixels(editorSize);
editorLeftPixels = mirrorEditorPixelsHorizontal(editorPixels, editorSize, editorWidth, editorHeight);
depthPixels = blankPixels(editorSize).map(() => 0);
lightPixels = [];
particlePixels = [];
particleConfig = { enabled: false, c: selectedColorCode, dir: 'up' };
editorSelection = null;
return true;
});
});
els.flipHorizontal?.addEventListener('click', flipEditorHorizontal);
els.flipVertical?.addEventListener('click', flipEditorVertical);
els.outlinePaint?.addEventListener('click', applyEditorOutline);
els.clearSelection?.addEventListener('click', () => clearEditorSelection(true));
els.nudgeLeft?.addEventListener('click', () => nudgeEditor(-1, 0));
els.nudgeRight?.addEventListener('click', () => nudgeEditor(1, 0));
els.nudgeUp?.addEventListener('click', () => nudgeEditor(0, -1));
els.nudgeDown?.addEventListener('click', () => nudgeEditor(0, 1));
els.undoPaint?.addEventListener('click', undoEditor);
els.redoPaint?.addEventListener('click', redoEditor);
window.addEventListener('keydown', onEditorKeyDown);
els.voteUp?.addEventListener('click', () => voteSelected(1));
els.voteDown?.addEventListener('click', () => voteSelected(-1));
els.bubbleRemix?.addEventListener('click', () => remixSelected());
els.bubbleEdit?.addEventListener('click', () => editSelectedOriginal());
els.bubbleTeleport?.addEventListener('click', () => teleportToRemixSource());
els.bubbleMenu?.addEventListener('click', () => toggleBubbleMenu());
els.bubbleReport?.addEventListener('click', () => openReportDialog());
els.reportCancel?.addEventListener('click', () => closeReportDialog());
els.reportSubmit?.addEventListener('click', () => submitReportDialog());
els.reportDialog?.addEventListener('click', (event) => { if (event.target === els.reportDialog) closeReportDialog(); });
els.confirmCancel?.addEventListener('click', () => resolveConfirmDialog(false));
els.confirmOk?.addEventListener('click', () => resolveConfirmDialog(true));
els.confirmDialog?.addEventListener('click', (event) => { if (event.target === els.confirmDialog) resolveConfirmDialog(false); });
els.bubbleHide?.addEventListener('click', () => hideSelected());
els.paintCanvas.addEventListener('pointerdown', onPaintPointerDown);
els.paintCanvas.addEventListener('pointermove', onPaintPointerMove);
els.paintCanvas.addEventListener('pointerup', onPaintPointerUp);
els.paintCanvas.addEventListener('pointercancel', onPaintPointerUp);
els.paintCanvas.addEventListener('mousedown', onPaintMouseDown);
window.addEventListener('mousemove', onPaintMouseMove);
window.addEventListener('mouseup', onPaintMouseUp);
els.paintCanvas.addEventListener('wheel', onPaintWheel, { passive: false });
els.paintCanvas.addEventListener('click', onPaintClick);
window.addEventListener('pointerup', () => { isPainting = false; lastPaintedKey = ''; editorPointer.panning = false; finishEditorGesture(); });
els.paintCanvas.addEventListener('contextmenu', (event) => event.preventDefault());
els.saveAsset.addEventListener('click', saveAssetFromEditor);
els.saveAndPlace.addEventListener('click', saveAndPlaceFromEditor);
els.checkOnIsland?.addEventListener('click', checkCurrentEditorOnIsland);
els.newAsset?.addEventListener('click', newAsset);
els.showHiddenAssets?.addEventListener('click', () => {
els.hiddenAssetPanel.hidden = !els.hiddenAssetPanel.hidden;
renderHiddenAssets();
});
}
function resizeCanvas() {
dpr = window.devicePixelRatio || 1;
cw = Math.max(1, window.innerWidth);
ch = Math.max(1, window.innerHeight);
els.canvas.width = Math.floor(cw * dpr);
els.canvas.height = Math.floor(ch * dpr);
els.canvas.style.width = `${cw}px`;
els.canvas.style.height = `${ch}px`;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
if (!cursorScreen.active) cursorScreen = { x: cw / 2, y: ch / 2, active: false };
}
function resetView(announce) {
const bounds = terrainCache.bounds;
view.zoom = Math.min(1.05, Math.max(MIN_ZOOM, Math.min(cw / bounds.w, ch / bounds.h) * 1.18));
view.x = cw / 2 - (bounds.x + bounds.w / 2) * view.zoom;
view.y = ch / 2 - (bounds.y + bounds.h / 2) * view.zoom + 34;
if (announce) toast('View reset.');
}
function setDrawerOpen(open) {
els.drawer.classList.toggle('open', open);
els.openEditor.hidden = open || mode === 'place' || Boolean(placementPreview);
if (open) ensureEditorHelpers();
if (!open) {
selectedObject = null;
cameraFollowSelected = false;
updateSelectionBubble(performance.now());
}
}
function ensureEditorHelpers() {
if (editorActions() || !ModuleLoader?.loadScript) return;
ModuleLoader.loadScript('./js/editor-actions.js')
.catch((error) => console.warn('Editor helper lazy load failed; using inline fallbacks.', error));
}
function onDocumentContextMenu(event) {
if (!els.drawer?.classList.contains('open')) return;
if (els.drawer.contains(event.target) || els.openEditor?.contains(event.target) || els.openCreate?.contains(event.target) || els.openCollection?.contains(event.target) || els.openMenu?.contains(event.target)) return;
event.preventDefault();
setDrawerOpen(false);
}
function drawerScroller() {
return els.drawer?.querySelector('.drawerBody') || null;
}
function syncLibraryStateFromLegacy() {
uiState.library.viewTab = libraryViewTab;
uiState.library.search = librarySearch;
uiState.library.filter = libraryFilter;
uiState.library.scroll.bodyTop = Number.isFinite(libraryScrollTop) ? libraryScrollTop : 0;
uiState.library.scroll.gridTop = Number.isFinite(libraryGridScrollTop) ? libraryGridScrollTop : 0;
uiState.selectedAssetId = selectedAssetId || null;
}
function syncLegacyFromLibraryState() {
libraryViewTab = uiState.library.viewTab || 'mine';
librarySearch = uiState.library.search || '';
libraryFilter = uiState.library.filter || 'all';
libraryScrollTop = Number(uiState.library.scroll?.bodyTop) || 0;
libraryGridScrollTop = Number(uiState.library.scroll?.gridTop) || 0;
libraryScrollFrameToken = Number(uiState.library.restoreToken) || 0;
selectedAssetId = uiState.selectedAssetId || selectedAssetId || null;
}
function captureLibraryScrollState() {
const body = drawerScroller();
const grid = els.assetList?.querySelector('.assetSectionGrid');
const bodyTop = Number.isFinite(body?.scrollTop) ? body.scrollTop : libraryScrollTop;
const gridTop = Number.isFinite(grid?.scrollTop) ? grid.scrollTop : libraryGridScrollTop;
uiState.library.scroll = {
bodyTop: Math.max(0, Number(bodyTop) || 0),
gridTop: Math.max(0, Number(gridTop) || 0)
};
syncLegacyFromLibraryState();
return { ...uiState.library.scroll };
}
function setTab(name, options = {}) {
const keepScroll = Boolean(options.preserveScroll);
const scrollState = keepScroll ? captureLibraryScrollState() : null;
activeTabName = name;
els.tabs.forEach((button) => button.classList.toggle('active', button.dataset.tab === name));
els.panels.forEach((panel) => panel.classList.toggle('active', panel.id === `tab-${name}`));
if (name !== 'draw' && advancedDraw) setAdvancedDraw(false, { redraw: false });
else els.drawer?.classList.toggle('advancedTools', name === 'draw' && advancedDraw);
refreshCategoryUI();
if (keepScroll) restoreLibraryScrollState(scrollState);
}
function setAdvancedDraw(enabled, options = {}) {
const redraw = options.redraw !== false;
advancedDraw = Boolean(enabled);
const selectedPaletteIndex = PALETTE.findIndex((entry) => entry.code === selectedColorCode);
if (!advancedDraw && selectedPaletteIndex >= BASIC_PALETTE_COUNT) {
selectedColorCode = nearestBasicPaletteCode(PALETTE_BY_CODE[selectedColorCode] || PALETTE_BY_CODE[DEFAULT_SELECTED_COLOR_CODE] || '#ffffff');
}
toggleHidden(els.advancedToolGroup, !advancedDraw);
toggleHidden(els.toolLight, !advancedDraw);
toggleHidden(els.toolParticle, !advancedDraw);
toggleHidden(els.toolDepth, !advancedDraw);
toggleHidden(els.depthHigh, !advancedDraw);
toggleHidden(els.depthLow, !advancedDraw);
toggleHidden(els.particleDirectionWrap, !advancedDraw || paintTool !== 'particle');
toggleHidden(els.advancedHint, !advancedDraw);
els.toggleAdvanced?.classList.toggle('active', advancedDraw);
if (els.toggleAdvanced) els.toggleAdvanced.textContent = advancedDraw ? '- Advanced' : '+ Advanced';
els.drawer?.classList.toggle('advancedTools', activeTabName === 'draw' && advancedDraw);
if (!advancedDraw && (paintTool === 'depth' || paintTool === 'light' || paintTool === 'particle')) setPaintTool('brush');
updateParticleUI();
renderPalette();
if (redraw) drawEditor();
}
function setMode(nextMode) {
mode = nextMode;
if (mode === 'place' || mode === 'erase') clearWorldSelection(false);
const isInspect = mode === 'inspect';
const isPlace = mode === 'place';
const isErase = mode === 'erase';
[els.modeInspect, els.drawerInspect].filter(Boolean).forEach((el) => el.classList.toggle('active', isInspect));
[els.modePlace, els.drawerPlace].filter(Boolean).forEach((el) => el.classList.toggle('active', isPlace));
[els.modeErase, els.drawerErase].filter(Boolean).forEach((el) => el.classList.toggle('active', isErase));
els.canvas.classList.toggle('placeCursor', isPlace);
els.canvas.classList.toggle('eraseCursor', isErase);
syncPlacementUi();
}
function syncPlacementUi() {
const hasPreview = Boolean(placementPreview);
if (els.openEditor) els.openEditor.hidden = els.drawer?.classList.contains('open') || mode === 'place' || hasPreview;
updatePlaceHereButton();
}
function updatePlaceHereButton() {
if (!els.placeHereButton) return;
const ready = Boolean(mode === 'place' && placementPreview?.asset && placementPreview.x != null && placementPreview.y != null);
els.placeHereButton.hidden = !ready;
if (!ready) return;
const x = Number(placementPreview.x);
const y = Number(placementPreview.y);
const pos = tileToWorld(x + .5, y + .5);
pos.y -= getLiftAtCoord(x, y);
const sx = pos.x * view.zoom + view.x;
const sy = pos.y * view.zoom + view.y;
els.placeHereButton.style.left = `${Math.round(clamp(sx, 96, cw - 96))}px`;
els.placeHereButton.style.top = `${Math.round(clamp(sy - 64, 80, ch - 118))}px`;
}
function refreshCategoryUI() {
els.drawer?.classList.toggle('advancedTools', activeTabName === 'draw' && advancedDraw);
const role = currentRole();
const isStatic = roleToCategory(role) === 'static';
if (isStatic) staticKind = roleToSubtype(role);
else dynamicKind = roleToSubtype(role);
toggleHidden(els.staticKindWrap, true);
toggleHidden(els.dynamicKindWrap, true);
const showDynamicDrawControls = activeTabName === 'draw' && !isStatic;
toggleHidden(els.sideSwitcher, true); toggleHidden(els.frontSideSwitcher, !showDynamicDrawControls);
toggleHidden(els.staticSettingsPanel, !isStatic);
toggleHidden(els.dynamicSettingsPanel, true);
toggleHidden(els.advancedToolGroup, !advancedDraw);
toggleHidden(els.toolLight, !advancedDraw);
toggleHidden(els.toolParticle, !advancedDraw);
toggleHidden(els.toolDepth, !advancedDraw);
toggleHidden(els.depthHigh, !advancedDraw);
toggleHidden(els.depthLow, !advancedDraw);
toggleHidden(els.particleDirectionWrap, !advancedDraw || paintTool !== 'particle');
toggleHidden(els.toolDoor, role !== 'building');
toggleHidden(els.doorMarkerHint, role !== 'building');
if (!advancedDraw && (paintTool === 'light' || paintTool === 'depth' || paintTool === 'particle')) setPaintTool('brush');
if (!isStatic && paintTool === 'door') setPaintTool('brush');
if (isStatic && role !== 'building' && paintTool === 'door') setPaintTool('brush');
if (isStatic) editingSide = 'right';
if (isStatic) frontSide = 'right';
updateRoleHint();
updateSideButtons();
clampEditorView();
drawEditor();
updateParticleUI();
updateSettingsSummary();
}
function updateRoleHint() {
if (!els.roleHint) return;
const role = currentRole();
const textMap = {
human: 'Humans move by target direction. Draw as Right, or press Left if your canvas is left-facing so Save mirrors it.',
animal: 'Animals move by target direction. Draw as Right, or press Left if your canvas is left-facing so Save mirrors it.',
bird: 'Birds fly over terrain and seek nature. Draw as Right, or press Left if your canvas is left-facing so Save mirrors it.',
nature: 'Nature attracts animals and birds. Static sprites are drawn at 2x scale.',
fish: 'Fish swim on water tiles. Draw as right-facing, or use Left if your canvas is left-facing so Save mirrors it.',
building: 'Buildings attract humans. Use Door to mark the entrance.',
ship: 'Ships are static water objects. They float and emit ring ripples.',
other: 'Other objects are neutral scenery and render at 2x scale.'
};
els.roleHint.textContent = textMap[role] || textMap.other;
}
function updateSettingsSummary() {
if (!els.settingsSummary) return;
const role = currentRole();
if (roleToCategory(role) === 'static') {
const lightCount = lightPixels.length;
const maxLights = lightBudgetForArea(editorWidth, editorHeight);
const lightText = lightCount ? `${lightCount}/${maxLights} lamp cell${lightCount === 1 ? '' : 's'}` : `no light (${maxLights} max)`;
const particleText = particlePixels.length ? `particles ${particlePixels.length} cell${particlePixels.length === 1 ? '' : 's'}` : 'no particles';
const doorText = role === 'building' ? ` / door ${Math.round(doorPixel.x)},${Math.round(doorPixel.y)}` : '';
els.settingsSummary.textContent = `${cap(role)} / ${editorWidth}x${editorHeight} canvas / 2x static pixels / ${lightText} / ${particleText}${doorText}.`;
} else {
const particleText = particlePixels.length ? ` / particles ${particlePixels.length} cell${particlePixels.length === 1 ? '' : 's'}` : '';
const sideText = editingSide === 'left' ? 'canvas marked Left; Save mirrors it into canonical Right' : 'canvas marked canonical Right';
els.settingsSummary.textContent = `${cap(role)} / ${editorWidth}x${editorHeight} canvas / ${sideText} / ${frontSide === 'left' ? 'front starts Left' : 'front starts Right'}${particleText}.`;
}
}
function setPaintTool(tool) {
paintTool = tool;
[els.toolBrush, els.toolErase, els.toolFill, els.toolPick, els.toolLine, els.toolRect, els.toolSelect, els.toolLight, els.toolParticle, els.toolDoor, els.toolDepth].filter(Boolean).forEach((button) => button.classList.remove('active'));
({ brush: els.toolBrush, erase: els.toolErase, fill: els.toolFill, pick: els.toolPick, line: els.toolLine, rect: els.toolRect, select: els.toolSelect, light: els.toolLight, particle: els.toolParticle, door: els.toolDoor, depth: els.toolDepth }[tool])?.classList.add('active');
const hints = {
brush: 'Draw pixels with the selected palette color.',
erase: 'Erase metadata first when Light/Depth/Particle exists on the cell; erase the pixel on the next click.',
fill: 'Fill a connected area with the selected palette color. Hold Shift to fill with transparency.',
pick: 'Pick a color from the canvas and return to Draw.',
line: 'Drag to draw a straight line. Right-click erases along the line.',
rect: 'Drag to draw a rectangle. Hold Shift for a filled rectangle; right-click erases.',
select: 'Left-click/drag to select pixels. Right-click clears the selection.',
light: 'Paint light cells with the selected palette color. Hold Shift to erase light cells.',
particle: 'Particle emits from the sprite or selected range. Palette chooses color; direction is set below. Shift-click disables particles; right-click pans.',
door: 'Click one pixel to mark a building door. Humans will enter near this point.',
depth: 'Advanced: paint high or low depth. Use High/Low buttons; Shift/right-click clears.'
};
els.editHint.textContent = hints[tool] || hints.brush;
[els.depthHigh, els.depthLow].filter(Boolean).forEach((button) => button.classList.remove('active'));
if (tool === 'depth') ({ 1: els.depthHigh, '-1': els.depthLow }[depthPaintMode])?.classList.add('active');
toggleHidden(els.particleDirectionWrap, !advancedDraw || tool !== 'particle');
updateParticleUI();
}
function setDepthPaintMode(mode) {
depthPaintMode = mode === -1 ? -1 : 1;
[els.depthHigh, els.depthLow].filter(Boolean).forEach((button) => button.classList.remove('active'));
({ 1: els.depthHigh, '-1': els.depthLow }[depthPaintMode])?.classList.add('active');
if (paintTool !== 'depth') setPaintTool('depth');
const label = depthPaintMode > 0 ? 'high' : 'low';
if (els.editHint) els.editHint.textContent = `Depth mode: ${label}. Shift/right-click clears depth.`;
}
function setEditingSide(side) {
if (roleToCategory(currentRole()) !== 'dynamic') return;
editingSide = side === 'left' ? 'left' : 'right';
updateSideButtons();
if (els.editHint) {
els.editHint.textContent = editingSide === 'left'
? 'Canvas is marked as left-facing. It will be mirrored into the canonical right-facing sprite on save.'
: 'Canvas is marked as the canonical right-facing sprite. Movement uses this for rightward travel.';
}
drawEditor();
}
function setFrontSide(side) {
if (roleToCategory(currentRole()) !== 'dynamic') return;
frontSide = side === 'left' ? 'left' : 'right'; updateSideButtons();
if (els.editHint) els.editHint.textContent = `Movable sprite will appear facing ${frontSide} when first placed.`;
spriteCache.clear(); drawEditor(); render();
}
function updateSideButtons() {
if (els.editRight) els.editRight.classList.toggle('active', editingSide === 'right');
if (els.editLeft) els.editLeft.classList.toggle('active', editingSide === 'left');
if (els.frontRight) els.frontRight.classList.toggle('active', frontSide === 'right'); if (els.frontLeft) els.frontLeft.classList.toggle('active', frontSide === 'left');
updateSettingsSummary();
}
function onWorldPointerDown(event) {
event.preventDefault();
if (isPlaceHereEvent(event)) { confirmPreviewPlacement(); return; }
const downPos = getCanvasPoint(event);
cursorScreen = { x: downPos.x, y: downPos.y, active: true };
if (event.button === 2) {
if (mode === 'place' && placementPreview?.asset && placementPreview.x != null && placementPreview.y != null) {
suppressCanvasContextMenuOnce = true;
confirmPreviewPlacement();
} else {
cancelPlacementPreview(false);
clearWorldSelection(true);
setMode('inspect');
}
pointer.down = false;
pointer.id = null;
return;
}
els.canvas.setPointerCapture(event.pointerId);
pointer = {
down: true,
id: event.pointerId,
startX: event.clientX,
startY: event.clientY,
lastX: event.clientX,
lastY: event.clientY,
dragging: false,
downTime: performance.now(),
button: event.button || 0
};
}
function onWorldPointerMove(event) {
const pos = getCanvasPoint(event);
cursorScreen = { x: pos.x, y: pos.y, active: true };
hoverTile = screenToTile(pos.x, pos.y);
updateTileInfo();
if (!pointer.down || pointer.id !== event.pointerId) return;
const dx = event.clientX - pointer.lastX;
const dy = event.clientY - pointer.lastY;
const total = Math.hypot(event.clientX - pointer.startX, event.clientY - pointer.startY);
if (total > 8) {
pointer.dragging = true;
els.canvas.classList.add('dragging');
}
if (pointer.dragging) {
cameraFollowSelected = false;
view.x += dx;
view.y += dy;
}
pointer.lastX = event.clientX;
pointer.lastY = event.clientY;
}
function onWorldPointerUp(event) {
if (isPlaceHereEvent(event)) { confirmPreviewPlacement(); return; }
if (!pointer.down || pointer.id !== event.pointerId) return;
els.canvas.classList.remove('dragging');
const total = Math.hypot(event.clientX - pointer.startX, event.clientY - pointer.startY);
const elapsed = performance.now() - pointer.downTime;
const wasClick = total < 6 && elapsed < 600;
const pos = getCanvasPoint(event);
cursorScreen = { x: pos.x, y: pos.y, active: true };
const tile = screenToTile(pos.x, pos.y);
if (wasClick) {
const pickedObject = pickObjectAtScreen(pos.x, pos.y, performance.now());
if (mode === 'place' && tile) placeSelected(tile.x, tile.y);
else if (mode === 'erase') {
if (pickedObject) eraseObject(pickedObject.kind, pickedObject.id);
else if (tile) eraseAt(tile.x, tile.y);
} else if (pickedObject) {
selectWorldObject(pickedObject.kind, pickedObject.id, pickedObject.assetId, performance.now());
const asset = findAsset(pickedObject.assetId);
toast(asset ? `Selected ${asset.name}.` : 'Selected object.');
} else if (tile) inspectAt(tile.x, tile.y);
}
pointer.down = false;
pointer.id = null;
pointer.dragging = false;
}
function isPlaceHereEvent(event) {
if (mode !== 'place' || !placementPreview?.asset || !els.placeHereButton || els.placeHereButton.hidden) return false;
const rect = els.placeHereButton.getBoundingClientRect(); return event.clientX >= rect.left - 8 && event.clientX <= rect.right + 8 && event.clientY >= rect.top - 8 && event.clientY <= rect.bottom + 8;
}
function onWorldWheel(event) {
event.preventDefault();
cameraFollowSelected = false;
const pos = getCanvasPoint(event);
const factor = event.deltaY > 0 ? 1 / 1.13 : 1.13;
zoomAt(pos.x, pos.y, view.zoom * factor);
}
function zoomAt(screenX, screenY, nextZoom) {
nextZoom = clamp(nextZoom, MIN_ZOOM, MAX_ZOOM);
const worldX = (screenX - view.x) / view.zoom;
const worldY = (screenY - view.y) / view.zoom;
view.zoom = nextZoom;
view.x = screenX - worldX * view.zoom;
view.y = screenY - worldY * view.zoom;
}
function getCanvasPoint(event) {
const rect = els.canvas.getBoundingClientRect();
return { x: event.clientX - rect.left, y: event.clientY - rect.top };
}
function screenToTile(screenX, screenY) {
const worldX = (screenX - view.x) / view.zoom;
const worldY = (screenY - view.y) / view.zoom;
const localX = worldX - ORIGIN_X;
const localY = worldY - ORIGIN_Y;
const a = localX / (TILE_W / 2);
const b = localY / (TILE_H / 2);
const baseX = Math.floor((a + b) / 2);
const baseY = Math.floor((b - a) / 2);
let best = null;
let bestScore = -Infinity;
for (let ty = baseY - 2; ty <= baseY + 2; ty++) {
for (let tx = baseX - 2; tx <= baseX + 2; tx++) {
if (tx < 0 || ty < 0 || tx >= WORLD_W || ty >= WORLD_H) continue;
const tile = world.get(tx, ty);
const center = tileToWorld(tx, ty);
const lift = getTileLift(tile);
const nx = Math.abs(worldX - center.x) / (TILE_W / 2);
const ny = Math.abs(worldY - (center.y + TILE_H / 2 - lift)) / (TILE_H / 2);
if (nx + ny <= 1) {
const score = lift * 100 + (tx + ty);
if (score > bestScore) {
bestScore = score;
best = { x: tx, y: ty, tile };
}
}
}
}
return best;
}
function tileToWorld(x, y) {
return {
x: (x - y) * TILE_W / 2 + ORIGIN_X,
y: (x + y) * TILE_H / 2 + ORIGIN_Y
};
}
function worldToTileFloat(worldX, worldY) {
const a = (worldX - ORIGIN_X) / (TILE_W / 2);
const b = (worldY - ORIGIN_Y) / (TILE_H / 2);
return { x: (a + b) / 2, y: (b - a) / 2 };
}
function tileKey(x, y) {
return `${x},${y}`;
}
function makeEmptyWorldIndex() {
return StateIndex?.build ? StateIndex.build({ assets: [], placed: [], dynamicSummons: [] }) : { assetById: new Map(), staticById: new Map(), dynamicById: new Map(), objectsById: new Map(), objectIdsByAssetId: new Map(), placedByTile: new Map(), dynamicByHomeTile: new Map() };
}
function pushIndexBucket(map, key, item) {
const bucket = map.get(key);
if (bucket) bucket.push(item);
else map.set(key, [item]);
}
function rebuildWorldIndex() {
if (StateIndex?.build) {
worldIndex = StateIndex.build(state);
return;
}
const next = makeEmptyWorldIndex();
for (const asset of state.assets || []) {
if (asset?.id) next.assetById.set(asset.id, asset);
}
for (const placed of state.placed || []) {
next.staticById.set(placed.id, placed);
next.objectsById.set(placed.id, { kind: 'static', object: placed });
pushIndexBucket(next.placedByTile, tileKey(placed.x, placed.y), placed);
pushIndexBucket(next.objectIdsByAssetId, placed.assetId, placed.id);
}
for (const summon of state.dynamicSummons || []) {
next.dynamicById.set(summon.id, summon);
next.objectsById.set(summon.id, { kind: 'dynamic', object: summon });
pushIndexBucket(next.dynamicByHomeTile, tileKey(Math.round(summon.homeX), Math.round(summon.homeY)), summon);
pushIndexBucket(next.objectIdsByAssetId, summon.assetId, summon.id);
}
worldIndex = next;
}
function getPlacedAtTile(x, y) {
return worldIndex.placedByTile.get(tileKey(x, y)) || [];
}
function getDynamicHomesAtTile(x, y) {
return worldIndex.dynamicByHomeTile.get(tileKey(x, y)) || [];
}
function getLocalDisplayLimit() {
const settings = visualSettings();
return clampInt(settings.localDisplayLimit, 25, 500, PHASE5_GUARDRAILS.defaultDisplayLimit);
}
function getObjectRecord(kind, objectId) {
if (kind === 'static') return worldIndex.staticById?.get(objectId) || state.placed.find((p) => p.id === objectId) || null;
return worldIndex.dynamicById?.get(objectId) || state.dynamicSummons.find((p) => p.id === objectId) || null;
}
function getObjectPublicAt(kind, object) {
return RotationPolicy?.objectPublicAt ? RotationPolicy.objectPublicAt(object) : Number(object?.publishedAt || object?.placedAt || object?.createdAt || Date.now());
}
function isPermanentlyHiddenObject(object) {
return object?.status === 'permanent_hidden' || object?.status === 'violation_hidden' || object?.permanentHidden === true;
}
function isModeratedAssetHidden(asset) {
if (!asset) return false;
if (asset.status === 'permanent_hidden' || asset.status === 'violation_hidden') return true;
const objectIds = worldIndex.objectIdsByAssetId?.get(asset.id) || [];
for (const objectId of objectIds) {
const entry = worldIndex.objectsById?.get(objectId);
if (entry?.object && isPermanentlyHiddenObject(entry.object) && entry.object.hiddenReason === 'moderation_violation') return true;
}
return false;
}
function isServerSuppressedObject(object) {
return ['archived', 'permanent_hidden', 'violation_hidden'].includes(object?.status);
}
function getObjectRotationEntry(kind, object, baseIndex = 0) {
const votes = getObjectVoteCounts(object?.id);
if (RotationPolicy?.entry) return RotationPolicy.entry(kind, object, baseIndex, votes, PHASE5_GUARDRAILS);
const rawUp = Number(votes.up) || 0;
const up = Math.min(rawUp, PHASE5_GUARDRAILS.upvoteRankCap);
const down = Number(votes.down) || 0;
return { kind, object, id: object?.id, assetId: object?.assetId, publicAt: getObjectPublicAt(kind, object), baseIndex, up, rawUp, down, effectiveSlot: baseIndex + up * PHASE5_GUARDRAILS.upvoteDelaySlots - down * PHASE5_GUARDRAILS.downvoteAdvanceSlots };
}
function getRotationEntries(includeLocalHidden = false) {
const entries = [];
for (const placed of state.placed || []) {
const asset = findAsset(placed.assetId);
if (!asset || isModeratedAssetHidden(asset) || state.hiddenAssets?.[asset.id] || isServerSuppressedObject(placed)) continue;
if (!includeLocalHidden && state.hiddenObjects?.[placed.id]) continue;
entries.push({ kind: 'static', object: placed });
}
for (const summon of state.dynamicSummons || []) {
const asset = findAsset(summon.assetId);
if (!asset || isModeratedAssetHidden(asset) || state.hiddenAssets?.[asset.id] || isServerSuppressedObject(summon)) continue;
if (!includeLocalHidden && state.hiddenObjects?.[summon.id]) continue;
entries.push({ kind: 'dynamic', object: summon });
}
entries.sort((a, b) => getObjectPublicAt(a.kind, a.object) - getObjectPublicAt(b.kind, b.object) || String(a.object.id).localeCompare(String(b.object.id)));
return entries.map((entry, index) => getObjectRotationEntry(entry.kind, entry.object, index));
}
function seededScore(id, salt = '') {
if (RotationPolicy?.seededScore) return RotationPolicy.seededScore(id, salt, state.lastRotationAt || Date.now());
const hash = fnv1a(`${id}|${salt}|${Math.floor((state.lastRotationAt || Date.now()) / (24 * 60 * 60 * 1000))}`);
return parseInt(hash.slice(0, 8), 16) / 0xffffffff;
}
function getIslandDisplayBuckets() {
const entries = getRotationEntries(false);
const localLimit = getLocalDisplayLimit();
if (RotationPolicy?.buckets) return RotationPolicy.buckets(entries, localLimit, PHASE5_GUARDRAILS, state.lastRotationAt || Date.now());
const newCap = Math.min(PHASE5_GUARDRAILS.newArrivalSlots, localLimit);
const revivalCap = Math.max(0, Math.min(PHASE5_GUARDRAILS.revivalSlots, localLimit - newCap));
const newest = entries
.slice()
.sort((a, b) => b.effectiveSlot - a.effectiveSlot || b.publicAt - a.publicAt || String(b.id).localeCompare(String(a.id)))
.slice(0, newCap);
const newestIds = new Set(newest.map((entry) => entry.id));
const revivalPool = entries.filter((entry) => !newestIds.has(entry.id));
const revival = revivalPool
.slice()
.sort((a, b) => seededScore(b.id, 'revival') - seededScore(a.id, 'revival') || b.up - a.up || String(b.id).localeCompare(String(a.id)))
.slice(0, revivalCap);
return { newest, revival, entries, visibleIds: new Set([...newest, ...revival].map((entry) => entry.id)) };
}
function getVisibleRotationIdSet() {
return getIslandDisplayBuckets().visibleIds;
}
function isWorldObjectVisibleByRotation(kind, objectId) {
const object = getObjectRecord(kind, objectId);
if (!object || isServerSuppressedObject(object) || state.hiddenObjects?.[objectId]) return false;
return getVisibleRotationIdSet().has(objectId);
}
function updateRotationStats() {
if (!els.rotationStats) return;
const buckets = getIslandDisplayBuckets();
const entries = buckets.entries;
const visible = buckets.visibleIds.size;
const hiddenByRotation = Math.max(0, entries.length - visible);
const limit = getLocalDisplayLimit();
const publish = getPublishQuotaStatus();
const quotaText = publish.accountRequired ? 'account required to publish' : `publish quota ${publish.used}/${publish.limit} this hour`;
els.rotationStats.textContent = `Island exhibition ${visible}/${entries.length} objects / newest ${buckets.newest.length}/150 / revival ${buckets.revival.length}/100 / local cap ${limit} / rotated out ${hiddenByRotation} / ${quotaText}.`;
updateAccountUI();
}
function getAccountAgeMs(now = Date.now()) {
return state.account?.createdAt ? now - Number(state.account.createdAt) : 0;
}
function currentPublishLimit(now = Date.now()) {
if (!state.account?.createdAt) return 0;
if (RotationPolicy?.publishLimit) return RotationPolicy.publishLimit(state.account, now, PHASE5_GUARDRAILS);
return getAccountAgeMs(now) < 24 * 60 * 60 * 1000
? PHASE5_GUARDRAILS.publishLimitFirstDay
: PHASE5_GUARDRAILS.publishLimitTrusted;
}
function getPublishQuotaStatus(now = Date.now()) {
state.publishLog = Array.isArray(state.publishLog) ? state.publishLog : [];
state.pendingPublishLog = Array.isArray(state.pendingPublishLog) ? state.pendingPublishLog : [];
const author = currentVoterKey();
const windowMs = 60 * 60 * 1000;
state.publishLog = state.publishLog.filter((entry) => now - Number(entry.at || 0) < windowMs * 24);
state.pendingPublishLog = state.pendingPublishLog.filter((entry) => entry.status === 'pending' && now - Number(entry.at || 0) < windowMs * 24);
const serverConfirmed = [...(state.placed || []), ...(state.dynamicSummons || [])].filter((object) => {
const owner = normalizeOwnerAccountId(object.ownerAccountId);
return owner === author && now - Number(object.publishedAt || object.placedAt || object.createdAt || 0) < windowMs;
}).length;
const localConfirmed = state.publishLog.filter((entry) => entry.author === author && now - Number(entry.at || 0) < windowMs).length;
const pending = state.pendingPublishLog.filter((entry) => entry.author === author && now - Number(entry.at || 0) < windowMs).length;
const used = (isSharedWorld() ? serverConfirmed : localConfirmed) + pending;
const limit = currentPublishLimit(now);
return { used, pending, limit, remaining: Math.max(0, limit - used), accountRequired: !state.account?.createdAt };
}
function canPublishObject(action = 'publish') {
if (!state.account?.createdAt) ensureLocalAccount(action === 'publish' ? 'publish' : 'republish');
const quota = getPublishQuotaStatus();
if (quota.accountRequired) {
toast('Create a local account before publishing works to the island.');
updateAccountUI();
return false;
}
if (quota.remaining <= 0) {
toast(`Publish limit reached: ${quota.limit} public placements per hour.`);
updatePublishQuotaUI();
return false;
}
return true;
}
function recordObjectPublish(kind, object, action = 'publish', commandId = '') {
if (!object) return;
const now = Date.now();
object.publishedAt = now;
object.status = 'active';
state.publishLog = Array.isArray(state.publishLog) ? state.publishLog : [];
state.publishLog.push({ at: now, author: currentVoterKey(), kind, objectId: object.id, assetId: object.assetId, action, commandId });
state.publishLog = state.publishLog.slice(-300);
updatePublishQuotaUI();
}
function recordPendingSharedPublish(kind, object, commandId = '') {
if (!object || !commandId) return;
state.pendingPublishLog = Array.isArray(state.pendingPublishLog) ? state.pendingPublishLog : [];
state.pendingPublishLog.push({ at: Date.now(), author: currentVoterKey(), kind, objectId: object.id, assetId: object.assetId, commandId, status: 'pending' });
state.pendingPublishLog = state.pendingPublishLog.slice(-300);
updatePublishQuotaUI();
}
function isSharedWorld() {
return true;
}
function currentAccountId() {
return String(state.account?.id || '').trim();
}
function normalizeOwnerAccountId(value, fallback = '') {
return String(value || fallback || '').trim();
}
function ensureWorldProtectionState(target = state) {
target.worldMode = 'shared';
target.pendingPublishLog = Array.isArray(target.pendingPublishLog) ? target.pendingPublishLog.slice(-300) : [];
target.serverSync = {
lastServerEventId: target.serverSync?.lastServerEventId || null,
authority: { ...DEFAULT_SERVER_AUTHORITY, ...(target.serverSync?.authority || {}) },
clock: target.serverSync?.clock && typeof target.serverSync.clock === 'object' ? { ...target.serverSync.clock } : { worldTimeMs: Date.now(), syncedAt: Date.now() },
dynamicTargets: target.serverSync?.dynamicTargets && typeof target.serverSync.dynamicTargets === 'object' ? { ...target.serverSync.dynamicTargets } : {},
pendingObjectVisuals: target.serverSync?.pendingObjectVisuals && typeof target.serverSync.pendingObjectVisuals === 'object' ? { ...target.serverSync.pendingObjectVisuals } : {}
};
target.tombstones = {
assets: target.tombstones?.assets && typeof target.tombstones.assets === 'object' ? target.tombstones.assets : {},
objects: target.tombstones?.objects && typeof target.tombstones.objects === 'object' ? target.tombstones.objects : {}
};
target.deletedSeedAssetNames = Array.isArray(target.deletedSeedAssetNames) ? [...new Set(target.deletedSeedAssetNames.filter(Boolean).map(String))] : [];
return target;
}
function isAssetTombstoned(assetId, version = 0) {
const tombstone = state.tombstones?.assets?.[assetId];
return Boolean(tombstone && Number(tombstone.version || 0) >= Number(version || 0));
}
function isObjectTombstoned(objectId, version = 0) {
const tombstone = state.tombstones?.objects?.[objectId];
return Boolean(tombstone && Number(tombstone.version || 0) >= Number(version || 0));
}
function getObjectOwner(kind, object) {
if (!object) return '';
return normalizeOwnerAccountId(object.ownerAccountId, findAsset(object.assetId)?.ownerAccountId || '');
}
function canCurrentAccountModifyObject(kind, object, showToast = true) {
if (!isSharedWorld()) {
const allowed = isCurrentUserAsset(findAsset(object?.assetId));
if (!allowed && showToast) toast('Only the owner can move or delete this island object.');
return allowed;
}
const actor = currentAccountId();
if (!actor) {
if (showToast) toast('Shared worlds require an account before changing island objects.');
return false;
}
const owner = getObjectOwner(kind, object);
if (owner && owner === actor) return true;
if (showToast) toast('Only the owner can move or delete this island object.');
return false;
}
function removeObjectLocally(kind, objectId) {
if (!objectId) return null;
const list = kind === 'dynamic' ? state.dynamicSummons : state.placed;
const index = list.findIndex((item) => item.id === objectId);
if (index < 0) return null;
const [object] = list.splice(index, 1);
ensureWorldProtectionState();
state.tombstones.objects[objectId] = {
id: objectId,
assetId: object.assetId,
deletedAt: Date.now(),
deletedBy: currentAccountId() || 'local',
ownerAccountId: normalizeOwnerAccountId(object.ownerAccountId),
version: Number(object.version) || 1
};
delete state.objectVotes?.[objectId];
delete state.hiddenObjects?.[objectId];
state.moderationReports = (state.moderationReports || []).filter((report) => report.objectId !== objectId);
if (selectedObject?.id === objectId) selectedObject = null;
rebuildWorldIndex();
if (kind === 'dynamic') hydrateRuntime();
saveState();
updateSelectionBubble(performance.now());
render();
return object;
}
function canCurrentAccountDeleteAsset(asset, showToast = true) {
if (!isCurrentUserAsset(asset)) {
if (showToast) toast('Only the owner can delete this asset.');
return false;
}
if (!isSharedWorld()) return true;
const actor = currentAccountId();
if (!actor) {
if (showToast) toast('Shared worlds require an account before deleting assets.');
return false;
}
const owner = normalizeOwnerAccountId(asset?.ownerAccountId);
if (owner && owner === actor) return true;
if (showToast) toast('Only the owner can delete this asset in a shared world.');
return false;
}
function isCurrentUserAsset(asset) {
if (!asset) return false;
if (!isSharedWorld()) {
const owner = normalizeOwnerAccountId(asset.ownerAccountId);
if (owner) return owner === currentAccountId();
return (asset.author || 'Local Artist') === (state.authorName || 'Local Artist');
}
return normalizeOwnerAccountId(asset.ownerAccountId) === currentAccountId();
}
function displayAssetAuthor(asset) {
if (!asset) return state.authorName || 'Local Artist';
return asset.author || state.authorName || 'Local Artist';
}
function makeSharedCommand(type, payload = {}) {
return {
id: `cmd_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`,
type,
actorAccountId: currentAccountId(),
createdAt: Date.now(),
...payload
};
}
function queueSharedCommand(command, options = {}) {
if (!command) return;
ensureWorldProtectionState();
const cachePromise = Phase2Sync?.cacheOutboxCommand?.(command);
const commandObject = command.object?.id && command.object?.assetId ? command.object : null;
if (commandObject) {
const visualKind = command.kind === 'dynamic' ? 'dynamic' : 'static';
const existing = visualKind === 'dynamic'
? state.dynamicSummons.find((item) => item.id === commandObject.id)
: state.placed.find((item) => item.id === commandObject.id);
const toX = visualKind === 'dynamic' ? Number(commandObject.homeX) : Number(commandObject.x);
const toY = visualKind === 'dynamic' ? Number(commandObject.homeY) : Number(commandObject.y);
state.serverSync.pendingObjectVisuals[commandObject.id] = {
status: 'pending',
kind: visualKind,
assetId: commandObject.assetId,
object: { ...commandObject },
fromX: Number(existing ? (visualKind === 'dynamic' ? existing.homeX : existing.x) : toX),
fromY: Number(existing ? (visualKind === 'dynamic' ? existing.homeY : existing.y) : toY),
toX,
toY,
createdAt: command.createdAt || Date.now(),
expiresAt: 0,
expirePending: false,
commandId: command.id
};
}
saveState();
if (options.toast !== false) toast('Change queued for server validation.');
if (cachePromise?.then) {
cachePromise
.then(() => syncSharedWorld({ silent: true, reason: 'queue' }))
.catch((error) => console.warn('Phase 2 outbox cache failed.', error));
} else setTimeout(() => syncSharedWorld({ silent: true, reason: 'queue' }), 0);
}
function sharedApiUrl(action) {
return `${SHARED_API_ENDPOINT}?action=${encodeURIComponent(action)}`;
}
async function requestSharedApi(action, options = {}) {
const response = await fetch(sharedApiUrl(action), {
credentials: 'same-origin',
cache: 'no-store',
...options,
headers: {
...(options.body ? { 'Content-Type': 'application/json' } : {}),
...(options.headers || {})
}
});
const text = await response.text();
let data = null;
try { data = text ? JSON.parse(text) : null; }
catch (error) { throw new Error(`invalid_json_response:${response.status}`); }
if (!response.ok || !data?.ok) {
const message = data?.error || `http_${response.status}`;
const error = new Error(message);
error.payload = data;
error.status = response.status;
throw error;
}
return data;
}
function prunePendingVisualsByCommandIds(commandIds) {
const ids = new Set(Array.from(commandIds || []).filter(Boolean));
if (!ids.size) return;
ensureWorldProtectionState();
for (const [objectId, entry] of Object.entries(state.serverSync.pendingObjectVisuals || {})) {
if (ids.has(entry?.commandId)) delete state.serverSync.pendingObjectVisuals[objectId];
}
}
function markPendingVisualsFailed(rejections) {
const items = Array.isArray(rejections) ? rejections : [];
if (!items.length) return;
ensureWorldProtectionState();
const byCommandId = new Map(items.map((item) => [item?.id, item]).filter(([id]) => id));
for (const entry of Object.values(state.serverSync.pendingObjectVisuals || {})) {
const rejection = byCommandId.get(entry?.commandId);
if (!rejection) continue;
entry.status = 'failed';
entry.error = rejection.error || 'server_rejected';
entry.failedAt = Date.now();
entry.expirePending = false;
entry.expiresAt = 0;
if (entry.object) entry.object.publishFailed = true;
}
}
function prunePendingVisualsResolvedBySnapshot() {
ensureWorldProtectionState();
const serverObjectIds = new Set([...(state.placed || []), ...(state.dynamicSummons || [])].map((item) => item.id).filter(Boolean));
for (const objectId of Object.keys(state.serverSync.pendingObjectVisuals || {})) {
if (serverObjectIds.has(objectId)) delete state.serverSync.pendingObjectVisuals[objectId];
}
}
function removePublishLogForCommandIds(commandIds) {
const ids = new Set(Array.from(commandIds || []).filter(Boolean));
if (!ids.size) return;
if (Array.isArray(state.publishLog)) state.publishLog = state.publishLog.filter((entry) => !ids.has(entry.commandId));
if (Array.isArray(state.pendingPublishLog)) state.pendingPublishLog = state.pendingPublishLog.filter((entry) => !ids.has(entry.commandId));
updatePublishQuotaUI();
}
function describeSharedRejection(error) {
const code = String(error || 'server_rejected');
if (code === 'publish_limit_reached') return 'Publish limit reached. This placement was not published.';
if (code === 'world_object_limit_reached') return 'Island object limit reached. This placement was not published.';
if (code === 'asset_owner_required') return 'Only the asset owner can publish this work. Use Remix to make your own copy.';
if (code === 'object_owner_required') return 'Only the owner can move or delete that island object.';
if (code === 'invalid_account_password') return 'Account password did not match the server record.';
return `Server rejected a queued change: ${code}`;
}
function handleSharedCommandResponse(data, options = {}) {
const applied = Array.isArray(data?.appliedCommandIds) ? data.appliedCommandIds.filter(Boolean) : [];
const rejected = Array.isArray(data?.rejectedCommands) ? data.rejectedCommands.filter(Boolean) : [];
const rejectedIds = rejected.map((item) => item?.id).filter(Boolean);
const finishedIds = [...applied, ...rejectedIds];
if (finishedIds.length) {
Phase2Sync?.deleteOutboxCommands?.(finishedIds).catch((error) => console.warn('Phase 2 outbox delete failed.', error));
}
prunePendingVisualsByCommandIds(applied);
markPendingVisualsFailed(rejected);
removePublishLogForCommandIds(finishedIds);
if (rejected.length && options.silent !== true) toast(`${describeSharedRejection(rejected[0]?.error)} Try publishing again or choose a new tile.`);
else if (rejected.length) console.warn(describeSharedRejection(rejected[0]?.error), rejected);
}
function serverAssetMerge(snapshotAssets) {
const serverAssets = (Array.isArray(snapshotAssets) ? snapshotAssets : []).map(normalizeAsset);
const serverIds = new Set(serverAssets.map((asset) => asset.id));
const actor = currentAccountId();
const localOnly = (state.assets || []).filter((asset) => {
if (!asset?.id || serverIds.has(asset.id)) return false;
const owner = normalizeOwnerAccountId(asset.ownerAccountId);
if (owner === 'island-team') return false;
return owner === actor || (!owner && (asset.author || '') === (state.authorName || 'Local Artist'));
});
return [...localOnly, ...serverAssets];
}
function applySharedSnapshot(snapshot) {
if (!snapshot?.ok) return false;
const previousSelectedAssetId = selectedAssetId;
const pendingVisuals = state.serverSync?.pendingObjectVisuals || {};
const merged = mergeDefaultGallery({
...state,
schema: SAVE_SCHEMA,
worldMode: 'shared',
assets: serverAssetMerge(snapshot.assets),
placed: Array.isArray(snapshot.placed) ? snapshot.placed : [],
dynamicSummons: Array.isArray(snapshot.dynamicSummons) ? snapshot.dynamicSummons : [],
objectVotes: snapshot.objectVotes || {},
assetVotes: snapshot.assetVotes || {},
moderationReports: normalizeModerationReports(snapshot.moderationReports || []),
tombstones: snapshot.tombstones || { assets: {}, objects: {} },
serverSync: {
...sanitizeManifestServerSync(state.serverSync || {}),
lastServerEventId: snapshot.lastEventId || state.serverSync?.lastServerEventId || null,
authority: { ...DEFAULT_SERVER_AUTHORITY, ...(snapshot.authority || {}) },
clock: {
...(state.serverSync?.clock || {}),
worldTimeMs: Number(snapshot.serverNow) || Date.now(),
syncedAt: Date.now(),
dayMs: Number(state.serverSync?.clock?.dayMs) || DAY_MS
},
pendingObjectVisuals: pendingVisuals
}
});
state = normalizeState(merged);
prunePendingVisualsResolvedBySnapshot();
if (previousSelectedAssetId && state.assets.some((asset) => asset.id === previousSelectedAssetId)) selectedAssetId = previousSelectedAssetId;
else selectedAssetId = state.assets[0]?.id ?? null;
rebuildWorldIndex();
hydrateRuntime();
spriteCache.clear();
saveState();
renderLibrary({ preserveScroll: true });
updateSelectedLabel();
updateRotationStats();
render();
return true;
}
async function syncSharedWorld(options = {}) {
if (sharedSyncInFlight || document.hidden) return false;
if (!globalThis.fetch) return false;
sharedSyncInFlight = true;
try {
let data = null;
const commands = Phase2Sync?.readOutboxCommands ? await Phase2Sync.readOutboxCommands(300) : [];
if (commands.length && state.account?.id && state.account?.password) {
data = await requestSharedApi('commands', {
method: 'POST',
body: JSON.stringify({ account: state.account, commands })
});
handleSharedCommandResponse(data, options);
if (data.snapshot) applySharedSnapshot(data.snapshot);
} else {
data = await requestSharedApi('snapshot');
applySharedSnapshot(data);
}
sharedApiAvailable = true;
lastSharedSyncAt = Date.now();
return true;
} catch (error) {
if (sharedApiAvailable !== false) console.warn('Shared API unavailable; waiting for server-backed shared state.', error);
sharedApiAvailable = false;
ensureWorldProtectionState();
return false;
} finally {
sharedSyncInFlight = false;
}
}
function startSharedSyncLoop() {
if (sharedSyncTimer) clearInterval(sharedSyncTimer);
sharedSyncTimer = setInterval(() => syncSharedWorld({ silent: true, reason: 'timer' }), SHARED_SYNC_INTERVAL_MS);
}
function shouldHideUnderPlacementPreview(assetId, x, y) {
return false;
}
function getDrawableItems(time = performance.now(), viewport = null) {
const rect = viewport || getViewportWorldRect(VIEW_CULL_MARGIN);
const items = [];
const pendingVisuals = getPendingSharedVisuals();
const pendingVisualIds = new Set(pendingVisuals.map((entry) => String(entry.object?.id || '')));
for (const placed of state.placed) {
if (pendingVisualIds.has(String(placed.id || ''))) continue;
const asset = findAsset(placed.assetId);
if (!asset || isModeratedAssetHidden(asset) || state.hiddenAssets?.[asset.id] || state.hiddenObjects?.[placed.id] || isPermanentlyHiddenObject(placed) || !isWorldObjectVisibleByRotation('static', placed.id)) continue;
if (shouldHideUnderPlacementPreview(asset.id, placed.x + .5, placed.y + .5)) continue;
const itemX = placed.x + .5;
const itemY = placed.y + .5;
if (!isApproxVisible(asset, itemX, itemY, rect)) continue;
items.push({ kind: 'static', asset, x: itemX, y: itemY, source: placed });
}
for (const runtime of dynamicRuntime) {
if (pendingVisualIds.has(String(runtime.id || ''))) continue;
const asset = findAsset(runtime.assetId);
if (!asset || isModeratedAssetHidden(asset) || state.hiddenAssets?.[asset.id] || state.hiddenObjects?.[runtime.id] || isPermanentlyHiddenObject(runtime) || !isWorldObjectVisibleByRotation('dynamic', runtime.id)) continue;
if (shouldHideUnderPlacementPreview(asset.id, runtime.x, runtime.y)) continue;
if (time < runtime.hiddenUntil) continue;
if (!isApproxVisible(asset, runtime.x, runtime.y, rect)) continue;
items.push({ kind: 'dynamic', asset, x: runtime.x, y: runtime.y, source: runtime });
}
for (const pending of pendingVisuals) {
const asset = findAsset(pending.assetId);
if (!asset || isModeratedAssetHidden(asset) || state.hiddenAssets?.[asset.id]) continue;
const source = pending.object || {};
const targetX = Number.isFinite(Number(pending.toX)) ? Number(pending.toX) : (pending.kind === 'dynamic' ? Number(source.homeX) : Number(source.x));
const targetY = Number.isFinite(Number(pending.toY)) ? Number(pending.toY) : (pending.kind === 'dynamic' ? Number(source.homeY) : Number(source.y));
const startX = Number.isFinite(Number(pending.fromX)) ? Number(pending.fromX) : targetX;
const startY = Number.isFinite(Number(pending.fromY)) ? Number(pending.fromY) : targetY;
const t = clamp((Date.now() - Number(pending.createdAt || Date.now())) / 520, 0, 1);
const eased = 1 - Math.pow(1 - t, 3);
const itemX = lerp(startX, targetX, eased) + .5;
const itemY = lerp(startY, targetY, eased) + .5;
if (!Number.isFinite(itemX) || !Number.isFinite(itemY)) continue;
if (!isApproxVisible(asset, itemX, itemY, rect)) continue;
const failed = pending.status === 'failed';
items.push({ kind: pending.kind, asset, x: itemX, y: itemY, source: { ...source, pending: !failed, failed }, pending: !failed, failed });
}
if (placementPreview?.asset && placementPreview.x != null && placementPreview.y != null) {
const asset = placementPreview.asset;
items.push({ kind: asset.category === 'dynamic' ? 'dynamic' : 'static', asset, x: placementPreview.x + .5, y: placementPreview.y + .5, source: { id: 'placement-preview', preview: true, selectedAt: placementPreview.selectedAt || performance.now() }, preview: true });
}
items.sort(drawOrderCompare);
return items;
}
function getObjectSortBottom(item) {
const pos = tileToWorld(item.x, item.y);
const asset = item.asset || {};
if (!(asset.category === 'dynamic' && asset.subtype === 'bird')) pos.y -= getLiftAtCoord(item.x, item.y);
const anchorY = asset.category === 'static' ? 0 : TILE_H / 2;
return pos.y + anchorY;
}
function drawOrderCompare(a, b) {
const bottomDelta = getObjectSortBottom(a) - getObjectSortBottom(b);
if (Math.abs(bottomDelta) > 0.01) return bottomDelta;
return (a.x + a.y) - (b.x + b.y) || a.y - b.y || String(a.source?.id || '').localeCompare(String(b.source?.id || ''));
}
function getViewportWorldRect(margin = 0) {
const invZoom = 1 / Math.max(0.0001, view.zoom);
return {
left: -view.x * invZoom - margin,
top: -view.y * invZoom - margin,
right: (cw - view.x) * invZoom + margin,
bottom: (ch - view.y) * invZoom + margin
};
}
function isApproxVisible(asset, x, y, rect) {
if (!rect) return true;
const pos = tileToWorld(x, y);
if (!(asset.category === 'dynamic' && asset.subtype === 'bird')) pos.y -= getLiftAtCoord(x, y);
const scale = asset.category === 'static' ? STATIC_SCALE : DYNAMIC_SCALE;
const w = assetWidth(asset) * scale + 96;
const h = assetHeight(asset) * scale + 128;
return pos.x + w >= rect.left && pos.x - w <= rect.right && pos.y + 80 >= rect.top && pos.y - h <= rect.bottom;
}
function pickObjectAtScreen(screenX, screenY, time = performance.now()) {
const worldX = (screenX - view.x) / view.zoom;
const worldY = (screenY - view.y) / view.zoom;
const items = getDrawableItems(time, getViewportWorldRect(256));
for (let i = items.length - 1; i >= 0; i--) {
const item = items[i];
const info = getSpriteDrawInfo(item, time, false);
if (isSpritePixelHit(item.asset, info, worldX, worldY)) {
return { kind: item.kind, id: item.source.id, assetId: item.asset.id };
}
}
return null;
}
function isSpritePixelHit(asset, info, worldX, worldY) {
const scale = asset.category === 'static' ? STATIC_SCALE : DYNAMIC_SCALE;
let localX;
let localY;
if (info.angle) {
const pivotX = info.drawX + info.sprite.width / 2;
const pivotY = info.drawY + info.sprite.height * 0.8;
const dx = worldX - pivotX;
const dy = worldY - pivotY;
const cos = Math.cos(-info.angle);
const sin = Math.sin(-info.angle);
localX = dx * cos - dy * sin + info.sprite.width / 2;
localY = dx * sin + dy * cos + info.sprite.height * 0.8;
} else {
localX = worldX - info.drawX;
localY = worldY - info.drawY;
}
if (localX < 0 || localY < 0 || localX >= info.sprite.width || localY >= info.sprite.height) return false;
// Small works at 16x6 or below are hard to click. Use the whole sprite box
// for them, including transparent cells, while larger works still use opaque pixels.
const aw = assetWidth(asset);
const ah = assetHeight(asset);
if (Math.max(aw, ah) <= 16) return true;
const px = Math.floor(localX / scale);
const py = Math.floor(localY / scale);
if (px < 0 || py < 0 || px >= aw || py >= ah) return false;
const pixels = getAssetPixels(asset, info.side || 'right');
return Boolean(pixels[py * aw + px]);
}
function updateTileInfo() {
if (!els.tileInfo) return;
if (!hoverTile) {
els.tileInfo.textContent = 'Move over the map.';
return;
}
const tile = world.get(hoverTile.x, hoverTile.y);
const staticCount = getPlacedAtTile(hoverTile.x, hoverTile.y).filter((p) => isWorldObjectVisibleByRotation('static', p.id)).length;
const dynamicCount = getDynamicHomesAtTile(hoverTile.x, hoverTile.y).filter((p) => isWorldObjectVisibleByRotation('dynamic', p.id)).length;
els.tileInfo.textContent = `Tile ${hoverTile.x}, ${hoverTile.y}\nTerrain: ${cap(tile.type)}\nObjects here: ${staticCount}\nDynamic homes: ${dynamicCount}`;
}
function clearWorldSelection(announce = false) {
const hadSelection = !!selectedObject;
selectedObject = null;
if (els.bubbleMenuActions) els.bubbleMenuActions.hidden = true;
updateSelectionBubble(performance.now());
if (announce && hadSelection) toast('Selection cleared.');
}
function updateSelectedLabel() {
if (selectedAssetId && !findAsset(selectedAssetId)) {
selectedAssetId = state.assets.find((asset) => !state.hiddenAssets?.[asset.id])?.id || state.assets[0]?.id || null;
}
const asset = findAsset(selectedAssetId);
if (els.selectedAssetName) {
els.selectedAssetName.textContent = asset ? `${cleanWorkText(asset.name || 'Untitled', 'Untitled')} / ${cap(subtypeToRole(asset))}` : 'No collection work selected';
}
}
function inspectAt(x, y) {
const tile = world.get(x, y);
const staticObjects = getPlacedAtTile(x, y).filter((p) => isWorldObjectVisibleByRotation('static', p.id));
const dynamicObjects = getDynamicHomesAtTile(x, y).filter((p) => isWorldObjectVisibleByRotation('dynamic', p.id));
// Object selection is now based on actual opaque sprite pixels only.
// A plain tile click updates information but does not select hidden/transparent areas.
selectedObject = null;
updateSelectionBubble(performance.now());
const staticNames = staticObjects.map((p) => findAsset(p.assetId)?.name).filter(Boolean);
const dynamicNames = dynamicObjects.map((p) => findAsset(p.assetId)?.name).filter(Boolean);
const lines = [`Tile ${x}, ${y}`, `Terrain: ${cap(tile.type)}`];
if (staticNames.length) lines.push(`Static here: ${staticNames.join(', ')}`);
if (dynamicNames.length) lines.push(`Dynamic homes: ${dynamicNames.join(', ')}`);
if (els.tileInfo) els.tileInfo.textContent = lines.join('\n');
}
function selectWorldObject(kind, objectId, assetId, selectedAt = performance.now(), options = {}) {
selectedObject = { kind, id: objectId, assetId, selectedAt, bounce: options.bounce !== false };
cameraFollowSelected = options.follow !== false;
if (els.bubbleMenuActions) els.bubbleMenuActions.hidden = true;
selectedAssetId = assetId;
updateSelectedLabel();
if (options.renderLibrary !== false) renderLibrary({ preserveScroll: true });
render(selectedAt);
updateSelectionBubble(selectedAt);
}
function isTileCompatibleForAsset(asset, tile) {
if (!tile) return false;
if (asset.category === 'static' && (asset.subtype === 'water' || asset.subtype === 'ship')) return tile.type === 'water';
if (asset.category === 'dynamic' && asset.subtype === 'fish') return tile.type === 'water';
if (tile.type === 'water') return asset.category === 'static' && (asset.subtype === 'water' || asset.subtype === 'ship');
return true;
}
function getRemixSourcePositions(asset) {
const ids = new Set([asset?.parentAssetId, asset?.originalAssetId].filter(Boolean));
if (!ids.size) return [];
const out = [];
for (const placed of state.placed || []) if (ids.has(placed.assetId)) out.push({ x: placed.x, y: placed.y });
for (const summon of state.dynamicSummons || []) if (ids.has(summon.assetId)) out.push({ x: summon.homeX, y: summon.homeY });
return out;
}
function avoidRemixSourceOverlap(asset, x, y) {
return { x, y, moved: false };
}
function placeSelected(x, y) {
const asset = placementPreview?.asset || findAsset(selectedAssetId);
if (!asset) {
toast('Select an asset first.');
setDrawerOpen(true);
setTab('library');
return;
}
const adjusted = avoidRemixSourceOverlap(asset, x, y);
x = adjusted.x;
y = adjusted.y;
const tile = world.get(x, y);
if (!canPlace(asset, tile)) return;
const savedAssetId = placementPreview?.savedAssetId || selectedAssetId || asset.id;
placementPreview = { asset, savedAssetId, x, y, selectedAt: performance.now() };
clearWorldSelection(false);
syncPlacementUi();
if (visualSettings().enableParticles) spawnEffects.push({ x: x + .5, y: y + .5, started: performance.now(), preview: true });
render();
toast('Position selected. Right-click or PLACE HERE to publish.');
}
function publishSelectedAt(x, y) {
if (placementPreview?.asset) {
const adjusted = avoidRemixSourceOverlap(placementPreview.asset, x, y);
x = adjusted.x; y = adjusted.y;
const tile = world.get(x, y);
if (!canPlace(placementPreview.asset, tile)) return;
if (placementPreview.savedAssetId) {
selectedAssetId = placementPreview.savedAssetId;
placementPreview = null;
syncPlacementUi();
placeSelected(x, y);
return;
}
placementPreview.x = x;
placementPreview.y = y;
placementPreview.selectedAt = performance.now();
if (visualSettings().enableParticles) spawnEffects.push({ x: x + .5, y: y + .5, started: performance.now(), preview: true });
render();
toast(adjusted.moved ? 'Preview nudged away from the remix source. Right-click or DRAW to exit.' : 'Preview set. Right-click or DRAW to exit.');
return;
}
const asset = findAsset(selectedAssetId);
if (!asset) {
toast('Select an asset first.');
setDrawerOpen(true);
setTab('library');
return;
}
const adjusted = avoidRemixSourceOverlap(asset, x, y);
x = adjusted.x; y = adjusted.y;
let tile = world.get(x, y);
if (!canPlace(asset, tile)) return;
if (adjusted.moved) toast('Placed slightly away from the remix source to avoid overlap.');
// Each placement creates a distinct island object, so the same work can be summoned multiple times.
const existingObject = null;
const kind = asset.category === 'dynamic' ? 'dynamic' : 'static';
const wasLocallyHidden = existingObject ? Boolean(state.hiddenObjects?.[existingObject.id]) : false;
const wasRotationHidden = existingObject ? !isWorldObjectVisibleByRotation(kind, existingObject.id) : false;
const needsPublishSlot = !existingObject || wasLocallyHidden || wasRotationHidden;
if (needsPublishSlot && !canPublishObject(existingObject ? 'republish' : 'publish')) return;
const isNewObject = !existingObject;
if (isNewObject && getWorldObjectCount() >= PHASE5_GUARDRAILS.maxWorldObjects) {
toast(`Local storage object limit reached (${PHASE5_GUARDRAILS.maxWorldObjects}). Lower the display cap or remove local objects before adding more.`);
return;
}
if (isSharedWorld()) {
ensureLocalAccount(existingObject ? 'republish' : 'publish');
const actor = currentAccountId();
if (!normalizeOwnerAccountId(asset.ownerAccountId)) asset.ownerAccountId = actor;
if (normalizeOwnerAccountId(asset.ownerAccountId) !== actor) {
toast('Shared worlds only let you publish placements from assets you own. Use Remix to make your own version.');
return;
}
if (existingObject && !canCurrentAccountModifyObject(kind, existingObject)) return;
const nextObject = asset.category === 'static'
? {
...(existingObject || {}),
id: existingObject?.id || uid(),
assetId: asset.id,
ownerAccountId: actor,
x,
y,
placedAt: Date.now(),
publishedAt: existingObject?.publishedAt || Date.now(),
status: 'active',
version: Number(existingObject?.version || 0) + 1
}
: {
...(existingObject || {}),
id: existingObject?.id || uid(),
assetId: asset.id,
ownerAccountId: actor,
homeX: x,
homeY: y,
createdAt: Date.now(),
publishedAt: existingObject?.publishedAt || Date.now(),
status: 'active',
version: Number(existingObject?.version || 0) + 1
};
const command = makeSharedCommand(existingObject ? 'object.move' : 'object.publish', { kind, object: nextObject });
const publishCommand = makeSharedCommand('publish.asset_object', { kind, asset: normalizeAsset({ ...asset, ownerAccountId: actor }), object: nextObject });
queueSharedCommand(existingObject ? command : publishCommand);
if (!existingObject) recordPendingSharedPublish(kind, nextObject, publishCommand.id);
syncSharedWorld({ silent: true, reason: 'publish' });
setMode('inspect');
syncPlacementUi();
return;
}
let object = null;
if (asset.category === 'static') {
const existing = null;
if (existing) {
existing.x = x; existing.y = y; existing.placedAt = Date.now(); existing.version = (existing.version || 1) + 1;
if (needsPublishSlot) {
delete state.hiddenObjects?.[existing.id];
recordObjectPublish('static', existing, wasLocallyHidden || wasRotationHidden ? 'republish' : 'publish');
}
object = existing;
selectWorldObject('static', existing.id, asset.id, performance.now(), { bounce: false });
toast(needsPublishSlot ? `${asset.name} republished.` : `${asset.name} moved.`);
} else {
const placed = { id: uid(), assetId: asset.id, ownerAccountId: normalizeOwnerAccountId(asset.ownerAccountId, currentAccountId()), x, y, placedAt: Date.now(), publishedAt: Date.now(), status: 'active', version: 1 };
state.placed.push(placed);
recordObjectPublish('static', placed, 'publish');
object = placed;
selectWorldObject('static', placed.id, asset.id, performance.now(), { bounce: false });
toast(`${asset.name} placed.`);
}
} else {
const existing = null;
if (existing) {
existing.homeX = x; existing.homeY = y; existing.createdAt = Date.now(); existing.version = (existing.version || 1) + 1;
if (needsPublishSlot) {
delete state.hiddenObjects?.[existing.id];
recordObjectPublish('dynamic', existing, wasLocallyHidden || wasRotationHidden ? 'republish' : 'publish');
}
object = existing;
toast(needsPublishSlot ? `${asset.name} republished.` : `${asset.name} moved.`);
} else {
const summon = { id: uid(), assetId: asset.id, ownerAccountId: normalizeOwnerAccountId(asset.ownerAccountId, currentAccountId()), homeX: x, homeY: y, createdAt: Date.now(), publishedAt: Date.now(), status: 'active', version: 1 };
state.dynamicSummons.push(summon);
recordObjectPublish('dynamic', summon, 'publish');
object = summon;
toast(`${asset.name} summoned.`);
}
hydrateRuntime();
if (object) selectWorldObject('dynamic', object.id, asset.id, performance.now(), { bounce: false });
}
rebuildWorldIndex();
recordSyncEvent(Phase2Sync?.createObjectUpsertEvent?.(kind, object));
if (visualSettings().enableParticles) spawnEffects.push({ x: x + .5, y: y + .5, started: performance.now() });
saveState();
updateRotationStats();
setMode('inspect');
syncPlacementUi();
}
function canPlace(asset, tile) {
if (!tile) return false;
if (asset.category === 'static' && (asset.subtype === 'water' || asset.subtype === 'ship') && tile.type !== 'water') {
toast('Water/ship objects need water tiles.');
return false;
}
if (asset.category === 'dynamic' && asset.subtype === 'fish' && tile.type !== 'water') {
toast('Fish need water tiles.');
return false;
}
if (asset.category !== 'dynamic' || asset.subtype !== 'fish') {
if (tile.type === 'water' && !(asset.category === 'static' && (asset.subtype === 'water' || asset.subtype === 'ship'))) {
toast('Use land for this asset.');
return false;
}
}
return true;
}
function eraseAt(x, y) {
const staticObjects = getPlacedAtTile(x, y);
const staticTarget = staticObjects.at(-1);
if (staticTarget) {
if (!canCurrentAccountModifyObject('static', staticTarget)) return;
if (isSharedWorld()) {
queueSharedCommand(makeSharedCommand('object.delete', { kind: 'static', objectId: staticTarget.id }));
return;
}
const item = removeObjectLocally('static', staticTarget.id);
if (item) {
if (!isSharedWorld()) {
recordSyncEvent(Phase2Sync?.createObjectDeleteEvent?.('static', item.id));
saveState();
}
toast(`${findAsset(item.assetId)?.name ?? 'Object'} removed.`);
return;
}
}
const dynamicObjects = getDynamicHomesAtTile(x, y);
const dynamicTarget = dynamicObjects.at(-1);
if (dynamicTarget) {
if (!canCurrentAccountModifyObject('dynamic', dynamicTarget)) return;
if (isSharedWorld()) {
queueSharedCommand(makeSharedCommand('object.delete', { kind: 'dynamic', objectId: dynamicTarget.id }));
return;
}
const item = removeObjectLocally('dynamic', dynamicTarget.id);
if (item) {
if (!isSharedWorld()) {
recordSyncEvent(Phase2Sync?.createObjectDeleteEvent?.('dynamic', item.id));
saveState();
}
toast(`${findAsset(item.assetId)?.name ?? 'Dynamic object'} removed.`);
return;
}
}
toast('Nothing to erase here.');
}
function eraseObject(kind, objectId) {
if (kind === 'static') {
const index = state.placed.findIndex((p) => p.id === objectId);
if (index >= 0) {
if (!canCurrentAccountModifyObject('static', state.placed[index])) return;
if (isSharedWorld()) {
queueSharedCommand(makeSharedCommand('object.delete', { kind: 'static', objectId }));
return;
}
const item = removeObjectLocally('static', objectId);
if (!item) return;
if (!isSharedWorld()) {
recordSyncEvent(Phase2Sync?.createObjectDeleteEvent?.('static', objectId));
saveState();
}
toast(`${findAsset(item.assetId)?.name ?? 'Object'} removed.`);
return;
}
}
if (kind === 'dynamic') {
const index = state.dynamicSummons.findIndex((p) => p.id === objectId);
if (index >= 0) {
if (!canCurrentAccountModifyObject('dynamic', state.dynamicSummons[index])) return;
if (isSharedWorld()) {
queueSharedCommand(makeSharedCommand('object.delete', { kind: 'dynamic', objectId }));
return;
}
const item = removeObjectLocally('dynamic', objectId);
if (!item) return;
if (!isSharedWorld()) {
recordSyncEvent(Phase2Sync?.createObjectDeleteEvent?.('dynamic', objectId));
saveState();
}
toast(`${findAsset(item.assetId)?.name ?? 'Dynamic object'} removed.`);
}
}
}
function usesRightButtonAsPaint() {
return paintTool === 'depth' || paintTool === 'light' || paintTool === 'line' || paintTool === 'rect' || paintTool === 'erase';
}
function onPaintPointerDown(event) {
event.preventDefault();
if (paintTool === 'select' && event.button === 2) {
clearEditorSelection(true);
return;
}
els.paintCanvas.setPointerCapture?.(event.pointerId);
lastPaintedKey = '';
const isPan = event.button === 1 || (event.button === 2 && !usesRightButtonAsPaint());
editorPointer = { panning: isPan, pointerId: event.pointerId, lastX: event.clientX, lastY: event.clientY, button: event.button || 0 };
isPainting = !isPan;
mousePaint.active = false;
mousePaint.panning = false;
if (isPainting) {
suppressNextPaintClick = true;
suppressMousePaintUntil = performance.now() + 350;
if (handleEditorSpecialPointerDown(event)) return;
beginEditorGesture();
paintAtClient(event.clientX, event.clientY, event.button || 0, event.shiftKey);
if (paintTool === 'fill' || paintTool === 'pick') { isPainting = false; finishEditorGesture(); }
}
}
function onPaintPointerMove(event) {
if (editorPointer.pointerId !== event.pointerId) return;
if (editorPointer.panning) {
event.preventDefault();
const rect = els.paintCanvas.getBoundingClientRect();
const sx = els.paintCanvas.width / rect.width;
const sy = els.paintCanvas.height / rect.height;
editorView.x += (event.clientX - editorPointer.lastX) * sx;
editorView.y += (event.clientY - editorPointer.lastY) * sy;
editorPointer.lastX = event.clientX;
editorPointer.lastY = event.clientY;
clampEditorView();
drawEditor();
return;
}
if (shapeGesture || selectionGesture) {
event.preventDefault();
handleEditorSpecialPointerMove(event);
return;
}
if (!isPainting) return;
if (event.buttons !== undefined) {
const requiredButton = editorPointer?.button === 2 ? 2 : 1;
if ((event.buttons & requiredButton) === 0) return;
}
event.preventDefault();
paintAtClient(event.clientX, event.clientY, 0, event.shiftKey);
}
function onPaintPointerUp(event) {
if (editorPointer.pointerId === event.pointerId) editorPointer.panning = false;
if (shapeGesture || selectionGesture) handleEditorSpecialPointerUp(event);
isPainting = false;
lastPaintedKey = '';
finishEditorGesture();
}
function onPaintClick(event) {
if (event.button !== 0) return;
if (suppressNextPaintClick) { suppressNextPaintClick = false; return; }
event.preventDefault();
lastPaintedKey = '';
if (paintTool === 'line' || paintTool === 'rect' || paintTool === 'select') return;
beginEditorGesture();
paintAtClient(event.clientX, event.clientY, 0, event.shiftKey);
finishEditorGesture();
}
function onPaintWheel(event) {
event.preventDefault();
const rect = els.paintCanvas.getBoundingClientRect();
const scaleX = els.paintCanvas.width / rect.width;
const scaleY = els.paintCanvas.height / rect.height;
const sx = (event.clientX - rect.left) * scaleX;
const sy = (event.clientY - rect.top) * scaleY;
const worldX = (sx - editorView.x) / editorView.zoom;
const worldY = (sy - editorView.y) / editorView.zoom;
const nextZoom = clamp(editorView.zoom * (event.deltaY > 0 ? 1 / 1.12 : 1.12), 1, 24);
editorView.zoom = nextZoom;
editorView.x = sx - worldX * editorView.zoom;
editorView.y = sy - worldY * editorView.zoom;
clampEditorView();
drawEditor();
}
function onPaintMouseDown(event) {
// Fallback for browsers/extensions where pointer events are swallowed.
if (event.button !== 0 && event.button !== 1 && event.button !== 2) return;
event.preventDefault();
if (paintTool === 'select' && event.button === 2) {
clearEditorSelection(true);
return;
}
lastPaintedKey = '';
const isPan = event.button === 1 || (event.button === 2 && !usesRightButtonAsPaint());
mousePaint = { active: !isPan, panning: isPan, lastX: event.clientX, lastY: event.clientY, button: event.button };
if (performance.now() < suppressMousePaintUntil) return;
if (mousePaint.active) {
beginEditorGesture();
paintAtClient(event.clientX, event.clientY, event.button, event.shiftKey);
if (paintTool === 'fill' || paintTool === 'pick') { mousePaint.active = false; finishEditorGesture(); }
}
}
function onPaintMouseMove(event) {
if (!mousePaint.active && !mousePaint.panning) return;
event.preventDefault();
if (mousePaint.panning) {
const rect = els.paintCanvas.getBoundingClientRect();
const sx = els.paintCanvas.width / rect.width;
const sy = els.paintCanvas.height / rect.height;
editorView.x += (event.clientX - mousePaint.lastX) * sx;
editorView.y += (event.clientY - mousePaint.lastY) * sy;
mousePaint.lastX = event.clientX;
mousePaint.lastY = event.clientY;
clampEditorView();
drawEditor();
return;
}
paintAtClient(event.clientX, event.clientY, mousePaint.button || 0, event.shiftKey);
}
function onPaintMouseUp() {
mousePaint.active = false;
mousePaint.panning = false;
lastPaintedKey = '';
finishEditorGesture();
}
function paintAtEvent(event) {
paintAtClient(event.clientX, event.clientY, event.button || 0, event.shiftKey);
}
function paintAtClient(clientX, clientY, button = 0, shiftKey = false) {
const local = clientToPaintLocal(clientX, clientY);
const x = Math.floor(local.x);
const y = Math.floor(local.y);
if (x < 0 || y < 0 || x >= editorWidth || y >= editorHeight) return;
const key = `${x},${y},${paintTool},${button},${shiftKey}`;
if (key === lastPaintedKey && paintTool !== 'fill') return;
lastPaintedKey = key;
const point = displayCellToCanonical(x, y);
const index = point.y * editorSize + point.x;
let changed = false;
if (paintTool === 'pick') {
const picked = editorPixels[index];
if (picked) selectPaletteCode(picked);
setPaintTool('brush');
drawEditor();
return;
}
if (paintTool === 'fill') {
const displayPixels = compactPixelsFromStride(editorPixels, editorSize, editorWidth, editorHeight);
const fillColor = shiftKey ? null : selectedColorCode;
const actions = editorActions();
const nextDisplay = actions?.floodFill
? actions.floodFill(displayPixels, editorWidth, x, y, fillColor, editorHeight)
: fallbackFloodFill(displayPixels, editorWidth, x, y, fillColor, editorHeight);
if (nextDisplay.changed) {
setDisplayEditorPixels(nextDisplay.pixels);
if (fillColor === null && Array.isArray(nextDisplay.cells)) {
for (const cell of nextDisplay.cells) {
const src = displayCellToCanonical(cell.x, cell.y);
removeLightPixel(src.x, src.y);
removeParticlePixel(src.x, src.y);
}
}
changed = true;
}
} else if (paintTool === 'brush') {
if (editorPixels[index] !== selectedColorCode) {
editorPixels[index] = selectedColorCode;
changed = true;
}
} else if (paintTool === 'erase') {
const hadLight = lightPixels.some((p) => p.x === point.x && p.y === point.y);
const hadParticle = particlePixels.some((p) => p.x === point.x && p.y === point.y);
const hadDepth = depthPixels[index] !== 0;
if (hadLight || hadParticle || hadDepth) {
removeLightPixel(point.x, point.y);
removeParticlePixel(point.x, point.y);
depthPixels[index] = 0;
changed = true;
} else if (editorPixels[index] !== null) {
editorPixels[index] = null;
changed = true;
}
} else if (paintTool === 'light') {
const before = JSON.stringify(lightPixels);
if (shiftKey || button === 2) removeLightPixel(point.x, point.y);
else addLightPixel(point.x, point.y, selectedColorCode);
changed = JSON.stringify(lightPixels) !== before;
updateSettingsSummary();
} else if (paintTool === 'particle') {
const before = JSON.stringify(particlePixels);
if (shiftKey || button === 2) removeParticlePixel(point.x, point.y);
else addParticlePixel(point.x, point.y, selectedColorCode, els.particleDirection?.value || particleConfig.dir || 'up');
particleConfig = normalizeParticleConfig({ enabled: particlePixels.length > 0, c: selectedColorCode, dir: els.particleDirection?.value || particleConfig.dir || 'up' });
changed = JSON.stringify(particlePixels) !== before;
updateParticleUI();
updateSettingsSummary();
} else if (paintTool === 'depth') {
const next = (shiftKey || button === 2) ? 0 : depthPaintMode;
if (depthPixels[index] !== next) {
depthPixels[index] = next;
changed = true;
}
} else if (paintTool === 'door') {
if (roleToCategory(currentRole()) === 'static' && currentRole() === 'building') {
if (doorPixel.x !== x || doorPixel.y !== y) {
doorPixel = { x, y };
changed = true;
}
updateSettingsSummary();
}
}
if (changed) {
editorLeftPixels = mirrorEditorPixelsHorizontal(editorPixels, editorSize, editorWidth, editorHeight);
markEditorChanged();
drawEditor();
}
}
function paintEventToCell(event) {
const local = paintEventToLocal(event);
return { x: Math.floor(local.x), y: Math.floor(local.y) };
}
function paintEventToLocal(event) {
return clientToPaintLocal(event.clientX, event.clientY);
}
function clientToPaintLocal(clientX, clientY) {
const rect = els.paintCanvas.getBoundingClientRect();
const scaleX = els.paintCanvas.width / rect.width;
const scaleY = els.paintCanvas.height / rect.height;
const sx = (clientX - rect.left) * scaleX;
const sy = (clientY - rect.top) * scaleY;
const cell = editorCellSize();
return {
x: (sx - editorView.x) / editorView.zoom / cell,
y: (sy - editorView.y) / editorView.zoom / cell
};
}
function snapshotEditorState() {
return {
size: editorSize,
width: editorWidth,
height: editorHeight,
rightPixels: [...editorPixels],
depthPixels: [...depthPixels],
lightPixels: lightPixels.map((p) => ({ ...p })),
particlePixels: particlePixels.map((p) => ({ ...p })),
particleConfig: { ...particleConfig },
doorPixel: { ...doorPixel },
editingSide,
selectedColorCode,
editorSelection: editorSelection ? { ...editorSelection } : null
};
}
function restoreEditorState(snapshot) {
editorWidth = clampDimension(snapshot.width ?? snapshot.size, editorWidth);
editorHeight = clampDimension(snapshot.height ?? snapshot.size, editorHeight);
editorSize = Math.max(editorWidth, editorHeight);
editorPixels = normalizePixels(snapshot.rightPixels || [], editorSize);
editorLeftPixels = mirrorEditorPixelsHorizontal(editorPixels, editorSize, editorWidth, editorHeight);
depthPixels = normalizeDepthPixels(snapshot.depthPixels || [], editorSize);
lightPixels = Array.isArray(snapshot.lightPixels) ? snapshot.lightPixels.map((p) => ({ ...p })) : [];
particlePixels = Array.isArray(snapshot.particlePixels) ? snapshot.particlePixels.map((p) => ({ ...p })) : [];
particleConfig = normalizeParticleConfig(snapshot.particleConfig || (particlePixels.length ? { enabled: true, c: particlePixels[0].c, dir: particlePixels[0].dir || 'up' } : particleConfig));
doorPixel = snapshot.doorPixel ? { ...snapshot.doorPixel } : { x: Math.floor(editorWidth / 2), y: editorHeight - 1 };
editingSide = snapshot.editingSide || editingSide;
if (snapshot.selectedColorCode) selectedColorCode = snapshot.selectedColorCode;
editorSelection = snapshot.editorSelection ? normalizeSelectionRect(snapshot.editorSelection.x, snapshot.editorSelection.y, snapshot.editorSelection.x + snapshot.editorSelection.w - 1, snapshot.editorSelection.y + snapshot.editorSelection.h - 1) : null;
updateDimensionInputs();
updateSideButtons();
renderPalette();
drawEditor();
updateSettingsSummary();
updateEditorHistoryButtons();
updateEditorSelectionButtons();
}
function beginEditorGesture() {
if (!editorGestureSnapshot) {
editorGestureSnapshot = snapshotEditorState();
editorGestureChanged = false;
}
}
function markEditorChanged() {
editorGestureChanged = true;
}
function finishEditorGesture() {
if (!editorGestureSnapshot) return;
if (editorGestureChanged) {
editorHistory.push(editorGestureSnapshot);
if (editorHistory.length > EDITOR_HISTORY_LIMIT) editorHistory.shift();
editorFuture = [];
}
editorGestureSnapshot = null;
editorGestureChanged = false;
updateEditorHistoryButtons();
}
function commitEditorMutation(mutator) {
const before = snapshotEditorState();
const changed = Boolean(mutator());
if (changed) {
editorHistory.push(before);
if (editorHistory.length > EDITOR_HISTORY_LIMIT) editorHistory.shift();
editorFuture = [];
editorLeftPixels = mirrorEditorPixelsHorizontal(editorPixels, editorSize, editorWidth, editorHeight);
drawEditor();
updateSettingsSummary();
updateEditorHistoryButtons();
}
return changed;
}
function clearEditorHistory() {
editorHistory = [];
editorFuture = [];
editorGestureSnapshot = null;
editorGestureChanged = false;
updateEditorHistoryButtons();
}
function undoEditor() {
if (!editorHistory.length) return;
editorFuture.push(snapshotEditorState());
restoreEditorState(editorHistory.pop());
}
function redoEditor() {
if (!editorFuture.length) return;
editorHistory.push(snapshotEditorState());
restoreEditorState(editorFuture.pop());
}
function updateEditorHistoryButtons() {
if (els.undoPaint) els.undoPaint.disabled = editorHistory.length === 0;
if (els.redoPaint) els.redoPaint.disabled = editorFuture.length === 0;
updateEditorSelectionButtons();
}
function onEditorKeyDown(event) {
if (!els.drawer?.classList.contains('open')) return;
const key = event.key.toLowerCase();
const activeTag = document.activeElement?.tagName?.toLowerCase();
if (activeTag === 'input' || activeTag === 'textarea' || activeTag === 'select') return;
if ((event.ctrlKey || event.metaKey) && key === 'z') {
event.preventDefault();
if (event.shiftKey) redoEditor();
else undoEditor();
} else if ((event.ctrlKey || event.metaKey) && key === 'y') {
event.preventDefault();
redoEditor();
} else if (editorSelection && ['arrowleft', 'arrowright', 'arrowup', 'arrowdown'].includes(key)) {
event.preventDefault();
const step = event.shiftKey ? 4 : 1;
const delta = { arrowleft: [-step, 0], arrowright: [step, 0], arrowup: [0, -step], arrowdown: [0, step] }[key];
moveSelectionBy(delta[0], delta[1]);
} else if (key === 'escape') {
clearEditorSelection(false);
} else if (!event.ctrlKey && !event.metaKey && !event.altKey) {
const shortcuts = { b: 'brush', e: 'erase', f: 'fill', i: 'pick', l: 'line', r: 'rect', s: 'select' };
if (shortcuts[key]) { event.preventDefault(); setPaintTool(shortcuts[key]); }
}
}
function fallbackFloodFill(sourcePixels, width, x, y, colorCode, height = width) {
const w = Math.max(1, Math.round(Number(width) || 1));
const h = Math.max(1, Math.round(Number(height) || w));
const pixels = [...sourcePixels];
const target = pixels[y * w + x] || null;
const replacement = colorCode || null;
if (target === replacement) return { pixels, changed: false, count: 0, cells: [] };
const stack = [[x, y]];
const cells = [];
while (stack.length) {
const [cx, cy] = stack.pop();
if (cx < 0 || cy < 0 || cx >= w || cy >= h) continue;
const index = cy * w + cx;
if ((pixels[index] || null) !== target) continue;
pixels[index] = replacement;
cells.push({ x: cx, y: cy });
stack.push([cx + 1, cy], [cx - 1, cy], [cx, cy + 1], [cx, cy - 1]);
}
return { pixels, changed: cells.length > 0, count: cells.length, cells };
}
function handleEditorSpecialPointerDown(event) {
const cell = clientToCell(event.clientX, event.clientY);
if (!cell) return false;
if (paintTool === 'line' || paintTool === 'rect') {
beginEditorGesture();
shapeGesture = {
tool: paintTool,
startX: cell.x,
startY: cell.y,
endX: cell.x,
endY: cell.y,
erase: event.button === 2,
filled: event.shiftKey
};
shapePreview = { ...shapeGesture };
drawEditor();
return true;
}
if (paintTool === 'select') {
const inside = editorSelection && pointInSelection(cell.x, cell.y, editorSelection);
if (inside) {
beginEditorGesture();
const baseSelection = { ...editorSelection };
selectionGesture = {
mode: 'move',
startX: cell.x,
startY: cell.y,
lastDx: 0,
lastDy: 0,
baseSelection,
basePixels: getDisplayEditorPixels(),
baseDepthPixels: getDisplayDepthPixels(),
baseLightPixels: lightPixels.map((p) => ({ ...p })),
baseParticlePixels: particlePixels.map((p) => ({ ...p }))
};
} else {
selectionGesture = { mode: 'select', startX: cell.x, startY: cell.y, endX: cell.x, endY: cell.y };
editorSelection = normalizeSelectionRect(cell.x, cell.y, cell.x, cell.y);
updateEditorSelectionButtons();
drawEditor();
}
return true;
}
return false;
}
function handleEditorSpecialPointerMove(event) {
const cell = clientToCell(event.clientX, event.clientY);
if (!cell) return;
if (shapeGesture) {
shapeGesture.endX = cell.x;
shapeGesture.endY = cell.y;
shapeGesture.filled = event.shiftKey;
shapePreview = { ...shapeGesture };
drawEditor();
return;
}
if (selectionGesture?.mode === 'select') {
selectionGesture.endX = cell.x;
selectionGesture.endY = cell.y;
editorSelection = normalizeSelectionRect(selectionGesture.startX, selectionGesture.startY, cell.x, cell.y);
updateEditorSelectionButtons();
drawEditor();
return;
}
if (selectionGesture?.mode === 'move') {
let dx = cell.x - selectionGesture.startX;
let dy = cell.y - selectionGesture.startY;
({ dx, dy } = clampSelectionDelta(selectionGesture.baseSelection, dx, dy));
if (dx === selectionGesture.lastDx && dy === selectionGesture.lastDy) return;
selectionGesture.lastDx = dx;
selectionGesture.lastDy = dy;
applySelectionMoveFromBase(selectionGesture.basePixels, selectionGesture.baseDepthPixels, selectionGesture.baseLightPixels, selectionGesture.baseParticlePixels, selectionGesture.baseSelection, dx, dy);
markEditorChanged();
drawEditor();
}
}
function handleEditorSpecialPointerUp(event) {
if (shapeGesture) {
const changed = commitShapeGesture(shapeGesture);
if (changed) markEditorChanged();
shapeGesture = null;
shapePreview = null;
drawEditor();
return;
}
if (selectionGesture?.mode === 'select') {
const rect = normalizeSelectionRect(selectionGesture.startX, selectionGesture.startY, selectionGesture.endX, selectionGesture.endY);
editorSelection = rect && rect.w * rect.h > 0 ? rect : null;
selectionGesture = null;
drawEditor();
updateEditorSelectionButtons();
return;
}
if (selectionGesture?.mode === 'move') {
selectionGesture = null;
editorLeftPixels = mirrorEditorPixelsHorizontal(editorPixels, editorSize, editorWidth, editorHeight);
updateEditorSelectionButtons();
return;
}
}
function clientToCell(clientX, clientY) {
const local = clientToPaintLocal(clientX, clientY);
const x = Math.floor(local.x);
const y = Math.floor(local.y);
if (x < 0 || y < 0 || x >= editorWidth || y >= editorHeight) return null;
return { x, y };
}
function normalizeSelectionRect(x0, y0, x1, y1) {
const left = clamp(Math.min(x0, x1), 0, editorWidth - 1);
const top = clamp(Math.min(y0, y1), 0, editorHeight - 1);
const right = clamp(Math.max(x0, x1), 0, editorWidth - 1);
const bottom = clamp(Math.max(y0, y1), 0, editorHeight - 1);
return { x: left, y: top, w: right - left + 1, h: bottom - top + 1 };
}
function pointInSelection(x, y, selection) {
return selection && x >= selection.x && y >= selection.y && x < selection.x + selection.w && y < selection.y + selection.h;
}
function clampSelectionDelta(selection, dx, dy) {
if (!selection) return { dx: 0, dy: 0 };
return {
dx: clamp(dx, -selection.x, editorWidth - (selection.x + selection.w)),
dy: clamp(dy, -selection.y, editorHeight - (selection.y + selection.h))
};
}
function getDisplayDepthPixels() {
return normalizeDepthPixels(depthPixels, editorSize);
}
function setDisplayEditorPixels(pixels) {
editorPixels = Array.isArray(pixels) && pixels.length === editorWidth * editorHeight && (editorWidth !== editorSize || editorHeight !== editorSize)
? inflatePixelsToStride(pixels, editorWidth, editorHeight, editorSize)
: normalizePixels(pixels, editorSize);
editorLeftPixels = mirrorEditorPixelsHorizontal(editorPixels, editorSize, editorWidth, editorHeight);
}
function setDisplayDepthPixels(pixels) {
depthPixels = Array.isArray(pixels) && pixels.length === editorWidth * editorHeight && (editorWidth !== editorSize || editorHeight !== editorSize)
? inflateDepthToStride(pixels, editorWidth, editorHeight, editorSize)
: normalizeDepthPixels(pixels, editorSize);
}
function mirrorScalarPixels(values, stride, width = stride, height = width) {
const source = normalizeDepthPixels(values, stride);
const out = Array(stride * stride).fill(0);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
out[y * stride + (width - 1 - x)] = source[y * stride + x] || 0;
}
}
return out;
}
function applySelectionMoveFromBase(basePixels, baseDepthPixels, baseLightPixels, baseParticlePixels, selection, dx, dy) {
const nextPixels = normalizePixels(basePixels, editorSize);
const nextDepth = normalizeDepthPixels(baseDepthPixels, editorSize);
const movedPixels = [...nextPixels];
const movedDepth = [...nextDepth];
for (let y = selection.y; y < selection.y + selection.h; y++) {
for (let x = selection.x; x < selection.x + selection.w; x++) {
const index = y * editorSize + x;
movedPixels[index] = null;
movedDepth[index] = 0;
}
}
for (let y = selection.y; y < selection.y + selection.h; y++) {
for (let x = selection.x; x < selection.x + selection.w; x++) {
const from = y * editorSize + x;
const to = (y + dy) * editorSize + (x + dx);
movedPixels[to] = nextPixels[from] || null;
movedDepth[to] = nextDepth[from] || 0;
}
}
setDisplayEditorPixels(movedPixels);
setDisplayDepthPixels(movedDepth);
lightPixels = moveDisplayPoints(baseLightPixels, selection, dx, dy);
particlePixels = moveDisplayPoints(baseParticlePixels, selection, dx, dy);
editorSelection = { x: selection.x + dx, y: selection.y + dy, w: selection.w, h: selection.h };
updateEditorSelectionButtons();
}
function moveDisplayPoints(sourcePoints, selection, dx, dy) {
const out = [];
for (const point of sourcePoints || []) {
const shown = canonicalCellToDisplay(point.x, point.y);
if (!pointInSelection(shown.x, shown.y, selection)) {
out.push({ ...point });
continue;
}
const nx = shown.x + dx;
const ny = shown.y + dy;
if (nx < 0 || ny < 0 || nx >= editorWidth || ny >= editorHeight) continue;
const canonical = displayCellToCanonical(nx, ny);
out.push({ ...point, x: canonical.x, y: canonical.y });
}
return out;
}
function moveSelectionBy(dx, dy) {
if (!editorSelection) return false;
const bounded = clampSelectionDelta(editorSelection, dx, dy);
if (!bounded.dx && !bounded.dy) return false;
return commitEditorMutation(() => {
applySelectionMoveFromBase(getDisplayEditorPixels(), getDisplayDepthPixels(), lightPixels.map((p) => ({ ...p })), particlePixels.map((p) => ({ ...p })), editorSelection, bounded.dx, bounded.dy);
return true;
});
}
function nudgeEditor(dx, dy) {
if (editorSelection) moveSelectionBy(dx, dy);
else shiftEditorContent(dx, dy);
}
function shiftEditorContent(dx, dy) {
return commitEditorMutation(() => {
const selection = { x: 0, y: 0, w: editorWidth, h: editorHeight };
const bounded = clampSelectionDelta(selection, dx, dy);
if (!bounded.dx && !bounded.dy) return false;
applySelectionMoveFromBase(getDisplayEditorPixels(), getDisplayDepthPixels(), lightPixels.map((p) => ({ ...p })), particlePixels.map((p) => ({ ...p })), selection, bounded.dx, bounded.dy);
editorSelection = null;
doorPixel = { x: clamp(doorPixel.x + bounded.dx, 0, editorWidth - 1), y: clamp(doorPixel.y + bounded.dy, 0, editorHeight - 1) };
return true;
});
}
function commitShapeGesture(gesture) {
const cells = gesture.tool === 'line'
? getLineCells(gesture.startX, gesture.startY, gesture.endX, gesture.endY)
: getRectCells(gesture.startX, gesture.startY, gesture.endX, gesture.endY, gesture.filled);
if (!cells.length) return false;
const pixels = getDisplayEditorPixels();
const value = gesture.erase ? null : selectedColorCode;
let changed = false;
for (const cell of cells) {
const index = cell.y * editorSize + cell.x;
if ((pixels[index] || null) !== value) {
pixels[index] = value;
changed = true;
}
if (gesture.erase) {
const canonical = displayCellToCanonical(cell.x, cell.y);
removeLightPixel(canonical.x, canonical.y);
}
}
if (!changed) return false;
setDisplayEditorPixels(pixels);
return true;
}
function getLineCells(x0, y0, x1, y1) {
const cells = [];
let dx = Math.abs(x1 - x0);
let dy = -Math.abs(y1 - y0);
const sx = x0 < x1 ? 1 : -1;
const sy = y0 < y1 ? 1 : -1;
let err = dx + dy;
let x = x0;
let y = y0;
while (true) {
cells.push({ x, y });
if (x === x1 && y === y1) break;
const e2 = 2 * err;
if (e2 >= dy) { err += dy; x += sx; }
if (e2 <= dx) { err += dx; y += sy; }
}
return cells.filter((cell) => cell.x >= 0 && cell.y >= 0 && cell.x < editorWidth && cell.y < editorHeight);
}
function getRectCells(x0, y0, x1, y1, filled = false) {
const rect = normalizeSelectionRect(x0, y0, x1, y1);
const cells = [];
for (let y = rect.y; y < rect.y + rect.h; y++) {
for (let x = rect.x; x < rect.x + rect.w; x++) {
if (filled || x === rect.x || y === rect.y || x === rect.x + rect.w - 1 || y === rect.y + rect.h - 1) cells.push({ x, y });
}
}
return cells;
}
function drawEditorOverlays(cell) {
if (shapePreview) {
const cells = shapePreview.tool === 'line'
? getLineCells(shapePreview.startX, shapePreview.startY, shapePreview.endX, shapePreview.endY)
: getRectCells(shapePreview.startX, shapePreview.startY, shapePreview.endX, shapePreview.endY, shapePreview.filled);
pctx.save();
pctx.globalAlpha = shapePreview.erase ? 0.32 : 0.42;
pctx.fillStyle = shapePreview.erase ? '#ff6b6b' : colorToHex(selectedColorCode);
for (const c of cells) pctx.fillRect(c.x * cell, c.y * cell, Math.ceil(cell), Math.ceil(cell));
pctx.restore();
}
if (editorSelection) {
pctx.save();
pctx.strokeStyle = '#ff4fa3';
pctx.lineWidth = Math.max(2, 2 / editorView.zoom);
pctx.setLineDash([Math.max(3, 6 / editorView.zoom), Math.max(3, 4 / editorView.zoom)]);
pctx.strokeRect(editorSelection.x * cell + 1 / editorView.zoom, editorSelection.y * cell + 1 / editorView.zoom, editorSelection.w * cell - 2 / editorView.zoom, editorSelection.h * cell - 2 / editorView.zoom);
pctx.fillStyle = 'rgba(255, 79, 163, .08)';
pctx.fillRect(editorSelection.x * cell, editorSelection.y * cell, editorSelection.w * cell, editorSelection.h * cell);
pctx.restore();
}
}
function updateEditorSelectionButtons() {
const disabled = !editorSelection;
if (els.clearSelection) els.clearSelection.disabled = disabled;
}
function clearEditorSelection(announce = false) {
const hadSelection = !!editorSelection || !!selectionGesture;
editorSelection = null;
selectionGesture = null;
drawEditor();
updateEditorSelectionButtons();
if (announce && hadSelection) toast('Selection cleared.');
}
function normalizeParticleConfig(config, size = editorSize) {
const input = config && typeof config === 'object' ? config : {};
const dir = ['up', 'down', 'left', 'right'].includes(input.dir) ? input.dir : 'up';
const color = PALETTE_BY_CODE[input.c] ? input.c : nearestPaletteCode('#ffffff');
return { enabled: Boolean(input.enabled), c: color, dir };
}
function particleDirectionLabel(dir) {
return ({ up: '↑', down: '↓', left: '←', right: '→' }[dir] || 'Unknown');
}
function particleRangeLabel() {
return `${particlePixels.length} emitter cell${particlePixels.length === 1 ? '' : 's'}`;
}
function updateParticleUI() {
particleConfig = normalizeParticleConfig(particleConfig);
if (els.particleDirection) els.particleDirection.value = particleConfig.dir;
toggleHidden(els.particleDirectionWrap, !advancedDraw || paintTool !== 'particle');
if (els.toolParticle) els.toolParticle.classList.toggle('active', paintTool === 'particle' || particlePixels.length > 0);
if (els.particleRangeStatus) els.particleRangeStatus.textContent = `Particle cells: ${particlePixels.length}. Shift/right-click clears a cell.`;
if (els.particleClearRange) els.particleClearRange.disabled = particlePixels.length === 0;
}
function enableParticleEffect() {
particleConfig = normalizeParticleConfig({ enabled: true, c: selectedColorCode, dir: els.particleDirection?.value || particleConfig.dir || 'up' });
updateParticleUI();
updateSettingsSummary();
drawEditor();
}
function disableParticleEffect() {
if (!particlePixels.length && !particleConfig.enabled) return;
particleConfig = normalizeParticleConfig({ ...particleConfig, enabled: false });
updateParticleUI();
updateSettingsSummary();
drawEditor();
toast('Particle tool ready. Shift/right-click a particle cell to clear it.');
}
function displayRectToCanonicalRect(rect) {
return null;
}
function setParticleRangeFromSelection() {
toast('Particle range is no longer used. Paint particle cells directly.');
}
function clearParticleRange() {
if (!particlePixels.length) return;
commitEditorMutation(() => {
particlePixels = [];
particleConfig = normalizeParticleConfig({ ...particleConfig, enabled: false });
return true;
});
toast('Particle cells cleared.');
}
function getPixelBounds(pixels, size) {
const source = normalizePixels(pixels, size);
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
if (!source[y * size + x]) continue;
minX = Math.min(minX, x); minY = Math.min(minY, y);
maxX = Math.max(maxX, x); maxY = Math.max(maxY, y);
}
}
return Number.isFinite(minX) ? { x: minX, y: minY, w: maxX - minX + 1, h: maxY - minY + 1 } : null;
}
function flipEditorHorizontal() {
commitEditorMutation(() => {
editorPixels = mirrorEditorPixelsHorizontal(editorPixels, editorSize, editorWidth, editorHeight);
depthPixels = mirrorScalarPixels(depthPixels, editorSize, editorWidth, editorHeight);
lightPixels = lightPixels.map((p) => ({ ...p, x: editorWidth - 1 - p.x }));
particlePixels = particlePixels.map((p) => ({ ...p, x: editorWidth - 1 - p.x }));
doorPixel = { ...doorPixel, x: editorWidth - 1 - doorPixel.x };
editorSelection = editorSelection ? { x: editorWidth - (editorSelection.x + editorSelection.w), y: editorSelection.y, w: editorSelection.w, h: editorSelection.h } : null;
return true;
});
}
function flipEditorVertical() {
commitEditorMutation(() => {
editorPixels = flipPixelsVertical(editorPixels, editorSize, editorWidth, editorHeight);
depthPixels = flipScalarPixelsVertical(depthPixels, editorSize, editorWidth, editorHeight);
lightPixels = lightPixels.map((p) => ({ ...p, y: editorHeight - 1 - p.y }));
particlePixels = particlePixels.map((p) => ({ ...p, y: editorHeight - 1 - p.y }));
doorPixel = { ...doorPixel, y: editorHeight - 1 - doorPixel.y };
editorSelection = editorSelection ? { x: editorSelection.x, y: editorHeight - (editorSelection.y + editorSelection.h), w: editorSelection.w, h: editorSelection.h } : null;
return true;
});
}
function flipPixelsVertical(pixels, stride, width = stride, height = width) {
const source = normalizePixels(pixels, stride);
const out = blankPixels(stride);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[(height - 1 - y) * stride + x] = source[y * stride + x] || null;
}
return out;
}
function flipScalarPixelsVertical(values, stride, width = stride, height = width) {
const source = normalizeDepthPixels(values, stride);
const out = Array(stride * stride).fill(0);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[(height - 1 - y) * stride + x] = source[y * stride + x] || 0;
}
return out;
}
function applyEditorOutline() {
commitEditorMutation(() => {
const source = [...editorPixels];
const out = [...editorPixels];
let changed = false;
for (let y = 0; y < editorHeight; y++) {
for (let x = 0; x < editorWidth; x++) {
const index = y * editorSize + x;
if (source[index]) continue;
const adjacent = [[1, 0], [-1, 0], [0, 1], [0, -1]].some(([dx, dy]) => {
const nx = x + dx;
const ny = y + dy;
return nx >= 0 && ny >= 0 && nx < editorWidth && ny < editorHeight && source[ny * editorSize + nx];
});
if (adjacent) { out[index] = selectedColorCode; changed = true; }
}
}
if (!changed) return false;
editorPixels = out;
return true;
});
}
function rgbToHex(r, g, b) {
const part = (value) => clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0');
return `#${part(r)}${part(g)}${part(b)}`;
}
function selectPaletteCode(code) {
if (!PALETTE_BY_CODE[code]) return;
selectedColorCode = code;
els.paintColor.value = PALETTE_BY_CODE[code];
if (paintTool === 'particle') particleConfig = normalizeParticleConfig({ ...particleConfig, c: code });
renderPalette();
updateParticleUI();
updateSettingsSummary();
}
function getActiveEditorPixels() {
return editorPixels;
}
function getDisplayEditorPixels() {
return normalizePixels(editorPixels, editorSize);
}
function displayCellToCanonical(x, y) {
return { x, y };
}
function canonicalCellToDisplay(x, y) {
return { x, y };
}
function compactPixelsFromStride(pixels, stride, width, height) {
const source = normalizePixels(pixels, stride);
const out = blankPixels(width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[y * width + x] = source[y * stride + x] || null;
}
return out;
}
function compactDepthFromStride(values, stride, width, height) {
const source = normalizeDepthPixels(values, stride);
const out = Array(width * height).fill(0);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[y * width + x] = source[y * stride + x] || 0;
}
return out;
}
function inflatePixelsToStride(pixels, width, height, stride) {
const source = normalizePixels(pixels, width, height);
const out = blankPixels(stride);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[y * stride + x] = source[y * width + x] || null;
}
return out;
}
function inflateDepthToStride(values, width, height, stride) {
const source = normalizeDepthPixels(values, width, height);
const out = Array(stride * stride).fill(0);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[y * stride + x] = source[y * width + x] || 0;
}
return out;
}
function resizeEditorPlane(source, oldStride, oldWidth, oldHeight, newStride, newWidth, newHeight, fill = null) {
const out = Array(newStride * newStride).fill(fill);
const minW = Math.min(oldWidth, newWidth);
const minH = Math.min(oldHeight, newHeight);
const src = Array.isArray(source) ? source : [];
for (let y = 0; y < minH; y++) {
for (let x = 0; x < minW; x++) out[y * newStride + x] = src[y * oldStride + x] ?? fill;
}
return out;
}
function resizeEditorCanvas(nextWidth, nextHeight) {
const newWidth = clampDimension(nextWidth, editorWidth);
const newHeight = clampDimension(nextHeight, editorHeight);
const newStride = Math.max(newWidth, newHeight);
if (newWidth === editorWidth && newHeight === editorHeight && newStride === editorSize) return false;
commitEditorMutation(() => {
const oldStride = editorSize;
const oldWidth = editorWidth;
const oldHeight = editorHeight;
const nextPixels = resizeEditorPlane(editorPixels, oldStride, oldWidth, oldHeight, newStride, newWidth, newHeight, null);
const nextDepth = resizeEditorPlane(depthPixels, oldStride, oldWidth, oldHeight, newStride, newWidth, newHeight, 0);
editorWidth = newWidth;
editorHeight = newHeight;
editorSize = newStride;
editorPixels = normalizePixels(nextPixels, editorSize);
editorLeftPixels = mirrorEditorPixelsHorizontal(editorPixels, editorSize, editorWidth, editorHeight);
depthPixels = normalizeDepthPixels(nextDepth, editorSize);
lightPixels = sanitizeLightPixels(lightPixels, editorPixels, editorSize, editorWidth, editorHeight, selectedColorCode, false);
particlePixels = particlePixels.filter((p) => p.x >= 0 && p.y >= 0 && p.x < editorWidth && p.y < editorHeight && editorPixels[p.y * editorSize + p.x]);
doorPixel = { x: clamp(doorPixel.x, 0, editorWidth - 1), y: clamp(doorPixel.y, 0, editorHeight - 1) };
editorSelection = null;
updateDimensionInputs();
resetEditorView();
return true;
});
return true;
}
function setupEditor(sizeOrWidth, rightPixels, leftPixels = null, nextDepthPixels = null, nextHeight = null) {
const width = clampDimension(sizeOrWidth, 8);
const height = clampDimension(nextHeight ?? sizeOrWidth, width);
const stride = Math.max(width, height);
editorWidth = width;
editorHeight = height;
editorSize = stride;
const normalizedRight = inflatePixelsToStride(rightPixels, width, height, stride);
const normalizedLeft = leftPixels ? inflatePixelsToStride(leftPixels, width, height, stride) : null;
const canonical = hasAnyPixel(normalizedRight) || !normalizedLeft ? normalizedRight : mirrorEditorPixelsHorizontal(normalizedLeft, stride, width, height);
editorPixels = normalizePixels(canonical, stride);
editorLeftPixels = mirrorEditorPixelsHorizontal(editorPixels, stride, width, height);
editorSelection = null;
depthPixels = Array.isArray(nextDepthPixels) || typeof nextDepthPixels === 'string' ? inflateDepthToStride(nextDepthPixels, width, height, stride) : resizeDepthPixels(depthPixels, Math.sqrt(depthPixels.length) || stride, stride);
updateDimensionInputs();
lightPixels = sanitizeLightPixels(lightPixels, editorPixels, editorSize, editorWidth, editorHeight, selectedColorCode, false);
particlePixels = particlePixels.filter((p) => p.x >= 0 && p.y >= 0 && p.x < editorWidth && p.y < editorHeight && editorPixels[p.y * editorSize + p.x]);
particleConfig = normalizeParticleConfig(particleConfig);
doorPixel = { x: clamp(doorPixel.x, 0, editorWidth - 1), y: clamp(doorPixel.y, 0, editorHeight - 1) };
resetEditorView();
drawEditor();
updateEditorHistoryButtons();
}
function drawEditor() {
clampEditorView();
const canvas = els.paintCanvas;
const rectSize = canvas.width;
const cell = editorCellSize();
const activeW = editorWidth * cell;
const activeH = editorHeight * cell;
pctx.clearRect(0, 0, rectSize, rectSize);
pctx.fillStyle = '#fffaf0';
pctx.fillRect(0, 0, rectSize, rectSize);
pctx.fillStyle = 'rgba(36, 48, 68, .05)';
if (activeW < rectSize) pctx.fillRect(activeW, 0, rectSize - activeW, rectSize);
if (activeH < rectSize) pctx.fillRect(0, activeH, rectSize, rectSize - activeH);
pctx.save();
pctx.translate(editorView.x, editorView.y);
pctx.scale(editorView.zoom, editorView.zoom);
const pixels = getDisplayEditorPixels();
for (let y = 0; y < editorHeight; y++) {
for (let x = 0; x < editorWidth; x++) {
const color = pixels[y * editorSize + x];
if (!color) continue;
pctx.fillStyle = colorToHex(color);
pctx.fillRect(x * cell, y * cell, Math.ceil(cell), Math.ceil(cell));
}
}
if (advancedDraw && depthPixels?.length) {
if (paintTool === 'depth') {
pctx.fillStyle = 'rgba(46, 89, 160, .07)';
pctx.fillRect(0, 0, rectSize, rectSize);
}
for (let y = 0; y < editorHeight; y++) {
for (let x = 0; x < editorWidth; x++) {
const source = displayCellToCanonical(x, y);
const depth = depthPixels[source.y * editorSize + source.x] || 0;
if (!depth) continue;
const high = depth > 0;
pctx.fillStyle = high ? 'rgba(34, 116, 255, .62)' : 'rgba(88, 44, 120, .62)';
pctx.fillRect(x * cell + Math.max(1, cell * .12), y * cell + Math.max(1, cell * .12), Math.max(2, cell * .76), Math.max(2, cell * .76));
pctx.strokeStyle = high ? 'rgba(6, 28, 75, .55)' : 'rgba(35, 13, 54, .55)';
pctx.lineWidth = Math.max(1, 2 / editorView.zoom);
pctx.strokeRect(x * cell + Math.max(1, cell * .12), y * cell + Math.max(1, cell * .12), Math.max(2, cell * .76), Math.max(2, cell * .76));
}
}
}
pctx.strokeStyle = 'rgba(36, 48, 68, .13)';
pctx.lineWidth = 1 / editorView.zoom;
for (let i = 0; i <= editorWidth; i++) {
const p = Math.round(i * cell) + .5;
pctx.beginPath(); pctx.moveTo(p, 0); pctx.lineTo(p, activeH); pctx.stroke();
}
for (let i = 0; i <= editorHeight; i++) {
const p = Math.round(i * cell) + .5;
pctx.beginPath(); pctx.moveTo(0, p); pctx.lineTo(activeW, p); pctx.stroke();
}
{
for (const light of lightPixels) {
const shown = canonicalCellToDisplay(light.x, light.y);
const lx = (shown.x + .5) * cell;
const ly = (shown.y + .5) * cell;
pctx.fillStyle = hexToRgba(colorToHex(light.c || selectedColorCode), .28);
pctx.beginPath();
pctx.arc(lx, ly, Math.max(4, cell * .20), 0, Math.PI * 2);
pctx.fill();
pctx.strokeStyle = colorToHex(light.c || selectedColorCode);
pctx.lineWidth = 2 / editorView.zoom;
pctx.beginPath();
pctx.arc(lx, ly, Math.max(3, cell * .14), 0, Math.PI * 2);
pctx.stroke();
}
for (const emitter of particlePixels) {
const shown = canonicalCellToDisplay(emitter.x, emitter.y);
const lx = (shown.x + .5) * cell;
const ly = (shown.y + .5) * cell;
const color = colorToHex(emitter.c || selectedColorCode);
pctx.fillStyle = hexToRgba(color, .20);
pctx.fillRect(lx - Math.max(3, cell * .18), ly - Math.max(3, cell * .18), Math.max(6, cell * .36), Math.max(6, cell * .36));
pctx.strokeStyle = color;
pctx.lineWidth = 2 / editorView.zoom;
pctx.strokeRect(lx - Math.max(2, cell * .12), ly - Math.max(2, cell * .12), Math.max(4, cell * .24), Math.max(4, cell * .24));
}
if (currentRole() === 'building') {
pctx.strokeStyle = '#5fb8ff';
pctx.lineWidth = 3 / editorView.zoom;
pctx.strokeRect(doorPixel.x * cell + 2 / editorView.zoom, doorPixel.y * cell + 2 / editorView.zoom, cell - 4 / editorView.zoom, cell - 4 / editorView.zoom);
}
}
drawEditorOverlays(cell);
pctx.restore();
}
function resetEditorView() {
editorView.zoom = 1;
editorView.x = 0;
editorView.y = 0;
clampEditorView();
}
function clampEditorView() {
const size = els.paintCanvas.width;
const cell = editorCellSize();
const scaledW = editorWidth * cell * editorView.zoom;
const scaledH = editorHeight * cell * editorView.zoom;
const minX = Math.min(0, size - scaledW);
const minY = Math.min(0, size - scaledH);
editorView.x = clamp(editorView.x, minX, 0);
editorView.y = clamp(editorView.y, minY, 0);
}
function sanitizeLightPixels(points, pixels, stride, width = stride, height = width, fallbackColor = selectedColorCode, announce = false) {
const source = normalizePixels(pixels || [], stride);
const maxLights = lightBudgetForArea(width, height);
const seen = new Set();
const clean = [];
for (const raw of Array.isArray(points) ? points : []) {
const x = clampInt(raw.x, 0, width - 1, 0);
const y = clampInt(raw.y, 0, height - 1, 0);
const key = `${x},${y}`;
if (seen.has(key)) continue;
if (!source[y * stride + x]) continue;
seen.add(key);
clean.push({ x, y, c: raw.c || fallbackColor });
if (clean.length >= maxLights) break;
}
if (announce && clean.length < (Array.isArray(points) ? points.length : 0)) toast(`Light cells limited to ${maxLights} and must sit on non-transparent pixels.`);
return clean;
}
function addLightPixel(x, y, colorCode = selectedColorCode) {
const point = { x: clamp(Math.floor(Number(x)), 0, editorWidth - 1), y: clamp(Math.floor(Number(y)), 0, editorHeight - 1), c: colorCode };
if (!editorPixels[point.y * editorSize + point.x]) {
toast('Light cells must be placed on painted pixels.');
return;
}
const existing = lightPixels.find((p) => p.x === point.x && p.y === point.y);
if (existing) existing.c = colorCode;
else {
const maxLights = lightBudgetForArea(editorWidth, editorHeight);
if (lightPixels.length >= maxLights) {
toast(`Light limit: ${maxLights} for ${editorWidth}x${editorHeight} cells.`);
return;
}
lightPixels.push(point);
}
lightPixels = sanitizeLightPixels(lightPixels, editorPixels, editorSize, editorWidth, editorHeight, selectedColorCode, true);
}
function removeLightPixel(x, y) {
lightPixels = lightPixels.filter((p) => !(p.x === x && p.y === y));
}
function addParticlePixel(x, y, colorCode = selectedColorCode, dir = particleConfig.dir || 'up') {
const point = { x: clamp(Math.floor(Number(x)), 0, editorWidth - 1), y: clamp(Math.floor(Number(y)), 0, editorHeight - 1), c: colorCode, dir: ['up','down','left','right'].includes(dir) ? dir : 'up' };
const existing = particlePixels.find((p) => p.x === point.x && p.y === point.y);
if (existing) { existing.c = colorCode; existing.dir = point.dir; }
else particlePixels.push(point);
}
function removeParticlePixel(x, y) {
particlePixels = particlePixels.filter((p) => !(p.x === x && p.y === y));
}
function mirrorLightPointsHorizontal(points, width, height = width) {
return (Array.isArray(points) ? points : [])
.map((p) => ({ ...p, x: width - 1 - clampInt(p.x, 0, width - 1, 0) }))
.filter((p) => p.x >= 0 && p.x < width && p.y >= 0 && p.y < height);
}
function mirrorParticlePointsHorizontal(points, width, height = width) {
return (Array.isArray(points) ? points : [])
.map((p) => ({ ...p, x: width - 1 - clampInt(p.x, 0, width - 1, 0), dir: p.dir === 'left' ? 'right' : p.dir === 'right' ? 'left' : (p.dir || 'up') }))
.filter((p) => p.x >= 0 && p.x < width && p.y >= 0 && p.y < height);
}
function shiftParticlePointsVertical(points, width, height = width, shift = 0) {
return (Array.isArray(points) ? points : [])
.map((p) => ({ ...p, y: clampInt(p.y, 0, height - 1, 0) + shift }))
.filter((p) => p.x >= 0 && p.x < width && p.y >= 0 && p.y < height);
}
function mirrorEditorPixelsHorizontal(pixels, stride, width, height) {
const source = normalizePixels(pixels, stride);
const out = blankPixels(stride);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[y * stride + (width - 1 - x)] = source[y * stride + x] || null;
}
return out;
}
function mirrorEditorDepthHorizontal(values, stride, width, height) {
const source = normalizeDepthPixels(values, stride);
const out = Array(stride * stride).fill(0);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[y * stride + (width - 1 - x)] = source[y * stride + x] || 0;
}
return out;
}
function normalizeEditorOrientationForSave() {
const stride = editorSize;
const dynamicLeftCanvas = roleToCategory(currentRole()) === 'dynamic' && editingSide === 'left';
const rightPixels = dynamicLeftCanvas ? mirrorEditorPixelsHorizontal(editorPixels, stride, editorWidth, editorHeight) : normalizePixels(editorPixels, stride);
const normalizedDepth = normalizeDepthPixels(depthPixels, stride);
const orientedDepth = dynamicLeftCanvas ? mirrorEditorDepthHorizontal(normalizedDepth, stride, editorWidth, editorHeight) : normalizedDepth;
const orientedLights = dynamicLeftCanvas ? mirrorLightPointsHorizontal(lightPixels, editorWidth, editorHeight) : lightPixels.map((p) => ({ ...p }));
const orientedParticles = dynamicLeftCanvas ? mirrorParticlePointsHorizontal(particlePixels, editorWidth, editorHeight) : particlePixels.map((p) => ({ ...p }));
const orientedParticleConfig = normalizeParticleConfig({ ...particleConfig, enabled: orientedParticles.length > 0 }, stride);
return { rightPixels, depthPixels: orientedDepth, lightPixels: orientedLights, particlePixels: orientedParticles, particleConfig: orientedParticleConfig, mirroredFromLeft: dynamicLeftCanvas, width: editorWidth, height: editorHeight, stride };
}
function getBottomShiftRect(pixels, stride, width, height) {
let maxY = -1;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) if (pixels[y * stride + x]) maxY = Math.max(maxY, y);
}
return maxY < 0 ? 0 : height - 1 - maxY;
}
function shiftPixelsVerticalRect(pixels, stride, width, height, shift) {
const out = blankPixels(stride);
const source = normalizePixels(pixels, stride);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const ny = y + shift;
if (ny >= 0 && ny < height) out[ny * stride + x] = source[y * stride + x] || null;
}
}
return out;
}
function shiftDepthPixelsVerticalRect(pixels, stride, width, height, shift) {
const source = normalizeDepthPixels(pixels, stride);
const out = Array(stride * stride).fill(0);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const ny = y + shift;
if (ny >= 0 && ny < height) out[ny * stride + x] = source[y * stride + x] || 0;
}
}
return out;
}
function trimEditorStateForSave(aligned) {
const { stride, width, height } = aligned;
let minX = width, minY = height, maxX = -1, maxY = -1;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (!aligned.rightPixels[y * stride + x]) continue;
minX = Math.min(minX, x); minY = Math.min(minY, y);
maxX = Math.max(maxX, x); maxY = Math.max(maxY, y);
}
}
if (maxX < 0) return null;
const outW = maxX - minX + 1;
const outH = maxY - minY + 1;
const outPixels = blankPixels(outW, outH);
const outDepth = Array(outW * outH).fill(0);
for (let y = 0; y < outH; y++) {
for (let x = 0; x < outW; x++) {
const src = (minY + y) * stride + (minX + x);
const dst = y * outW + x;
outPixels[dst] = aligned.rightPixels[src] || null;
outDepth[dst] = aligned.depthPixels[src] || 0;
}
}
const lightPixels = sanitizeLightPixels(
aligned.lightPixels.map((p) => ({ ...p, x: p.x - minX, y: p.y - minY })),
outPixels,
outW,
outW,
outH,
selectedColorCode,
false
);
const particlePixels = aligned.particlePixels
.map((p) => ({ ...p, x: p.x - minX, y: p.y - minY }))
.filter((p) => p.x >= 0 && p.y >= 0 && p.x < outW && p.y < outH && outPixels[p.y * outW + p.x]);
return {
width: outW,
height: outH,
size: Math.max(outW, outH),
rightPixels: outPixels,
depthPixels: outDepth,
lightPixels,
particlePixels,
particleConfig: normalizeParticleConfig({ ...aligned.particleConfig, enabled: particlePixels.length > 0 }, Math.max(outW, outH)),
door: aligned.door ? { x: clamp(aligned.door.x - minX, 0, outW - 1), y: clamp(aligned.door.y - minY, 0, outH - 1) } : null,
mirroredFromLeft: aligned.mirroredFromLeft,
crop: { x: minX, y: minY, w: outW, h: outH }
};
}
function alignEditorStateToBottom() {
const oriented = normalizeEditorOrientationForSave();
const shift = getBottomShiftRect(oriented.rightPixels, oriented.stride, oriented.width, oriented.height);
const aligned = {
...oriented,
rightPixels: shiftPixelsVerticalRect(oriented.rightPixels, oriented.stride, oriented.width, oriented.height, shift),
depthPixels: shiftDepthPixelsVerticalRect(oriented.depthPixels, oriented.stride, oriented.width, oriented.height, shift),
lightPixels: oriented.lightPixels
.map((p) => ({ ...p, y: p.y + shift }))
.filter((p) => p.x >= 0 && p.x < oriented.width && p.y >= 0 && p.y < oriented.height),
particlePixels: shiftParticlePointsVertical(oriented.particlePixels, oriented.width, oriented.height, shift),
door: { x: clamp(doorPixel.x, 0, oriented.width - 1), y: clamp(doorPixel.y + shift, 0, oriented.height - 1) },
mirroredFromLeft: oriented.mirroredFromLeft
};
const trimmed = trimEditorStateForSave(aligned);
return trimmed || aligned;
}
function getBottomShift(pixels, size) {
let maxY = -1;
for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
if (pixels[y * size + x]) maxY = Math.max(maxY, y);
}
}
return maxY < 0 ? 0 : size - 1 - maxY;
}
function shiftPixelsVertical(pixels, size, shift) {
if (!shift) return normalizePixels(pixels, size);
const out = blankPixels(size);
const source = normalizePixels(pixels, size);
for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
const ny = y + shift;
if (ny >= 0 && ny < size) out[ny * size + x] = source[y * size + x] || null;
}
}
return out;
}
function shiftDepthPixelsVertical(pixels, size, shift) {
const source = normalizeDepthPixels(pixels, size);
if (!shift) return source;
const out = Array(size * size).fill(0);
for (let y = 0; y < size; y++) {
for (let x = 0; x < size; x++) {
const ny = y + shift;
if (ny >= 0 && ny < size) out[ny * size + x] = source[y * size + x] || 0;
}
}
return out;
}
function buildEditorAssetRecord() {
const role = currentRole();
const category = roleToCategory(role);
const subtype = roleToSubtype(role);
const existing = editingAssetId ? findAsset(editingAssetId) : null;
const paintedDots = countPixels(editorPixels);
if (paintedDots < 10) {
toast('Draw at least 10 pixels before saving.');
return null;
}
if (!existing && state.assets.length >= PHASE5_GUARDRAILS.maxAssets) {
toast(`Asset limit reached (${PHASE5_GUARDRAILS.maxAssets}). Delete or hide unused assets before saving more.`);
return null;
}
const name = (els.assetName.value || '').trim() || existing?.name || `${cap(role)} ${state.assets.length + 1}`;
const aligned = alignEditorStateToBottom();
const savedSize = aligned.size || Math.max(aligned.width || editorWidth, aligned.height || editorHeight);
const savedWidth = aligned.width || savedSize;
const savedHeight = aligned.height || savedSize;
const encodedRight = encodePixels(aligned.rightPixels, savedWidth, savedHeight);
const pixelBlob = buildPixelBlob(encodedRight, savedWidth, savedHeight);
const asset = {
id: existing?.id || uid(),
name: cleanWorkText(name, 'Untitled'),
category,
subtype,
size: savedSize,
width: savedWidth,
height: savedHeight,
blobId: pixelBlob.id,
createdAt: existing?.createdAt || Date.now(),
updatedAt: Date.now(),
author: existing?.author || state.authorName || 'Local Artist',
ownerAccountId: normalizeOwnerAccountId(existing?.ownerAccountId, currentAccountId()),
version: Number(existing?.version || 0) + 1,
parentAssetId: existing ? existing.parentAssetId : editParentId,
originalAssetId: existing ? existing.originalAssetId : editOriginalId,
pixels: encodedRight,
faces: category === 'dynamic' ? {
right: encodedRight,
left: 'mirror'
} : null,
meta: buildAssetMeta(category, subtype, aligned.depthPixels, aligned.lightPixels, selectedColorCode, aligned.door, savedWidth, aligned.particlePixels, aligned.rightPixels, savedHeight)
};
if (asset.meta && category === 'dynamic') asset.meta.frontSide = frontSide; asset.contentHash = computeAssetContentHash(asset);
return { asset, pixelBlob, existing, aligned };
}
function cacheAssetRecord(asset, pixelBlob) {
if (Phase2Sync?.cachePixelBlobs && pixelBlob) {
Phase2Sync.cachePixelBlobs([pixelBlob]).catch((error) => console.warn('Phase 2 pixel blob cache failed.', error));
}
if (Phase2Sync?.cacheAssets && asset) {
Phase2Sync.cacheAssets([asset]).catch((error) => console.warn('Phase 2 asset metadata cache failed.', error));
}
}
function persistAssetRecord(record) {
if (!record?.asset) return null;
const { asset, pixelBlob, existing, aligned } = record;
if (existing) {
const index = state.assets.findIndex((a) => a.id === existing.id);
if (index >= 0) state.assets[index] = asset;
toast(`${asset.name} updated.`);
} else {
state.assets.unshift(asset);
toast(aligned?.mirroredFromLeft ? `${asset.name} saved. Left-facing canvas was mirrored into right-facing movement.` : `${asset.name} saved.`);
}
selectedAssetId = asset.id;
cacheAssetRecord(asset, pixelBlob);
return asset;
}
function queueSharedAssetSave(asset, options = {}) {
if (!asset || !isSharedWorld()) return false;
ensureLocalAccount('save');
const actor = currentAccountId();
if (!actor) return false;
const ownedAsset = normalizeAsset({ ...asset, ownerAccountId: actor, author: state.account?.name || state.authorName || asset.author });
queueSharedCommand(makeSharedCommand('asset.create', { asset: ownedAsset }), { toast: options.toast === true });
syncSharedWorld({ silent: true, reason: 'asset-save' });
return true;
}
function saveAssetFromEditor() {
if (isSharedWorld()) ensureLocalAccount('save');
const record = buildEditorAssetRecord();
if (!record) return null;
const { asset, existing } = record;
const duplicate = existing ? null : findEquivalentCollectionAsset(asset);
if (duplicate) {
selectedAssetId = duplicate.id;
queueSharedAssetSave(duplicate, { toast: false });
toast(`${duplicate.name} is already in Collection.`);
return duplicate;
}
persistAssetRecord(record);
if (isSharedWorld()) queueSharedAssetSave(asset, { toast: false });
else recordSyncEvent(Phase2Sync?.createAssetUpsertEvent?.(asset));
editParentId = null;
editOriginalId = null;
editingAssetId = null;
rebuildWorldIndex();
saveState();
spriteCache.clear();
hydrateRuntime();
renderLibrary({ preserveScroll: activeTabName === 'library' });
updateSelectedLabel();
els.lineageNote.textContent = 'Saved as a permanent collection work. Island placement is a separate temporary exhibition object.';
return asset;
}
function saveAndPlaceFromEditor() {
ensureLocalAccount('save-place');
const asset = saveAssetFromEditor();
if (!asset) return;
selectedAssetId = asset.id;
placementPreview = null;
clearWorldSelection(false);
setMode('place');
setDrawerOpen(false);
syncPlacementUi();
toast('Saved to Collection. Left-click a tile to choose a position, then right-click or PLACE HERE to publish.');
}
function buildEditorAssetPreview() {
const role = currentRole();
const category = roleToCategory(role);
const subtype = roleToSubtype(role);
const size = editorSize;
if (countPixels(editorPixels) < 10) {
toast('Draw at least 10 pixels before checking on the island.');
return null;
}
const aligned = alignEditorStateToBottom();
const savedSize = aligned.size || Math.max(aligned.width || editorWidth, aligned.height || editorHeight);
const savedWidth = aligned.width || savedSize;
const savedHeight = aligned.height || savedSize;
const encodedRight = encodePixels(aligned.rightPixels, savedWidth, savedHeight);
const pixelBlob = buildPixelBlob(encodedRight, savedWidth, savedHeight);
const asset = {
id: `preview:${Date.now()}`,
name: (els.assetName.value || '').trim() || 'Preview work',
category, subtype, size: savedSize, width: savedWidth, height: savedHeight, blobId: pixelBlob.id, author: state.authorName || 'Local Artist',
pixels: encodedRight,
faces: category === 'dynamic' ? { right: encodedRight, left: 'mirror' } : null,
meta: buildAssetMeta(category, subtype, aligned.depthPixels, aligned.lightPixels, selectedColorCode, aligned.door, savedWidth, aligned.particlePixels, aligned.rightPixels, savedHeight)
};
if (asset.meta && category === 'dynamic') asset.meta.frontSide = frontSide; return asset;
}
function checkCurrentEditorOnIsland() {
const asset = buildEditorAssetPreview();
if (!asset) return;
placementPreview = { asset, x: null, y: null };
setDrawerOpen(false);
setMode('place');
syncPlacementUi();
toast('Left-click a valid tile to preview. Right-click or PLACE HERE to confirm a saved work.');
}
function cancelPlacementPreview(reopenDrawer = true) {
const hadPreview = !!placementPreview;
placementPreview = null;
syncPlacementUi();
if (reopenDrawer) setDrawerOpen(true);
else syncPlacementUi();
if (hadPreview) render();
}
function confirmPreviewPlacement() {
if (!placementPreview?.asset || placementPreview.x == null || placementPreview.y == null) {
toast('Click a tile first.');
return;
}
let assetId = placementPreview.savedAssetId || placementPreview.asset.id;
if (!findAsset(assetId) && String(assetId).startsWith('preview:')) {
const saved = saveAssetFromEditor(); if (saved) assetId = saved.id;
}
if (!findAsset(assetId)) { toast('Saved asset is missing. Back to canvas and save again.');
return;
}
selectedAssetId = assetId;
const { x, y } = placementPreview;
placementPreview = null;
syncPlacementUi();
publishSelectedAt(x, y);
setMode('inspect');
updateSelectionBubble(performance.now());
}
function newAsset() {
editParentId = null;
editOriginalId = null;
els.assetName.value = '';
els.assetCategory.value = 'human';
staticKind = 'nature';
dynamicKind = 'human';
editingSide = 'right';
frontSide = 'right'; lightPixels = [];
particlePixels = [];
particleConfig = { enabled: false, c: selectedColorCode, dir: 'up' };
depthPixels = blankPixels(8).map(() => 0);
doorPixel = { x: Math.floor(editorSize / 2), y: editorSize - 1 };
setupEditor(8, blankPixels(8), null);
clearEditorHistory();
refreshCategoryUI();
els.lineageNote.textContent = '';
}
function hydrateAuthorUI() {
state.account = normalizeAccount(state.account);
state.authorName = state.account?.name || state.authorName || 'Local Artist';
if (els.authorName) els.authorName.value = state.authorName;
updateAccountUI();
}
function normalizeAccount(account) {
if (!account?.createdAt) return null;
const id = String(account.id || `px-${uid()}`).replace(/^local:/, 'px-');
const password = String(account.password || account.pass || generateLocalPassword());
const name = String(account.name || id).trim() || id;
return { id, name, password, createdAt: Number(account.createdAt) || Date.now() };
}
function generateAccountId() {
return `px-${uid().replace(/[^a-z0-9]/gi, '').slice(0, 10)}`;
}
function generateLocalPassword() {
const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789';
if (globalThis.crypto?.getRandomValues) {
const bytes = new Uint8Array(12);
globalThis.crypto.getRandomValues(bytes);
return [...bytes].map((b) => alphabet[b % alphabet.length]).join('');
}
return Array.from({ length: 12 }, () => alphabet[Math.floor(Math.random() * alphabet.length)]).join('');
}
function createLocalAccount(silent = false) {
if (!state.account?.createdAt) {
const id = generateAccountId();
state.account = { id, name: id, password: generateLocalPassword(), createdAt: Date.now() };
state.authorName = id;
} else {
const name = (els.authorName?.value || state.account.name || state.account.id).trim() || state.account.id;
state.account = normalizeAccount({ ...state.account, name, password: (els.accountPass?.value || state.account.password || '').trim() || generateLocalPassword() });
state.authorName = state.account.name;
}
saveState();
updateAccountUI();
renderLibrary();
if (!silent) toast('Local account generated. Change the password after creation.');
return state.account;
}
function ensureLocalAccount(reason = 'publish') {
if (state.account?.createdAt) {
state.account = normalizeAccount(state.account);
state.authorName = state.account.name;
updateAccountUI();
return state.account;
}
const account = createLocalAccount(true);
toast(reason === 'save-place' ? 'Local account auto-generated. You can rename it and should change the password.' : 'Local account auto-generated for publishing. Change the password after creation.');
return account;
}
function updateAccountUI() {
if (!els.accountNote) return;
if (!state.account?.createdAt) {
if (els.accountId) els.accountId.value = '';
if (els.authorName) els.authorName.value = state.authorName || 'Local Artist';
if (els.accountPass) els.accountPass.value = '';
els.accountNote.textContent = 'Publish creates a local account for island publishing.';
if (els.createAccount) els.createAccount.hidden = false;
updatePublishQuotaUI();
return;
}
state.account = normalizeAccount(state.account);
state.authorName = state.account.name;
if (els.accountId) els.accountId.value = state.account.id;
if (els.authorName) els.authorName.value = state.account.name;
if (els.accountPass) els.accountPass.value = state.account.password || '';
const day = getAccountAgeMs() < 24 * 60 * 60 * 1000 ? 'first day' : 'day 2+';
els.accountNote.textContent = `Account ${day}.`;
if (els.createAccount) els.createAccount.hidden = true;
updatePublishQuotaUI();
}
function updatePublishQuotaUI() {
const quota = getPublishQuotaStatus();
const pendingText = quota.pending ? ` / ${quota.pending} pending` : '';
const text = quota.accountRequired ? 'Publish: account needed' : `Publish: ${quota.remaining}/${quota.limit} left${pendingText}`;
[els.drawQuotaBadge, els.finishQuotaBadge].filter(Boolean).forEach((badge) => {
badge.textContent = text;
badge.classList.toggle('quotaEmpty', !quota.accountRequired && quota.remaining <= 0);
});
}
function focusAssetInWorld(asset, options = {}) {
const placed = state.placed.find((p) => p.assetId === asset.id);
const dyn = state.dynamicSummons.find((p) => p.assetId === asset.id);
const target = placed ? { x: placed.x + .5, y: placed.y + .5 } : dyn ? { x: dyn.homeX + .5, y: dyn.homeY + .5 } : null;
if (!target) {
selectedObject = null;
setMode('place');
toast('Selected. Place it on the map.');
return;
}
const pos = tileToWorld(target.x, target.y);
pos.y -= getLiftAtCoord(target.x, target.y);
view.x = cw / 2 - pos.x * view.zoom;
view.y = ch / 2 - pos.y * view.zoom;
if (placed) selectWorldObject('static', placed.id, asset.id, performance.now(), { renderLibrary: options.renderLibrary !== false });
else if (dyn) selectWorldObject('dynamic', dyn.id, asset.id, performance.now(), { renderLibrary: options.renderLibrary !== false });
setMode('inspect');
}
function renderLibrary(options = {}) {
syncLibraryStateFromLegacy();
const preserveScroll = options.preserveScroll ?? Boolean(els.drawer?.classList.contains('open'));
const scrollState = preserveScroll ? (options.scrollState || captureLibraryScrollState()) : null;
els.assetList.replaceChildren();
if (els.likedCodex) {
els.likedCodex.replaceChildren();
els.likedCodex.hidden = true;
}
const visibleAssets = state.assets.filter((asset) => !isModeratedAssetHidden(asset) && !state.hiddenAssets?.[asset.id]);
renderLibraryToolbar(visibleAssets);
if (!visibleAssets.length) {
renderCollectionTabs({ mine: [], others: [], favorite: [] });
els.assetList.append(makeLibraryEmptyNote('No visible assets.'));
renderHiddenAssets();
if (preserveScroll) restoreLibraryScrollState(scrollState);
return;
}
const matchesFilter = (asset) => libraryFilter === 'all' || subtypeToRole(asset) === libraryFilter;
const matchesSearch = (asset) => {
const query = librarySearch.trim().toLowerCase();
if (!query) return true;
return [asset.name, asset.author, asset.subtype, asset.category].some((value) => String(value || '').toLowerCase().includes(query));
};
const isMyAsset = (asset) => isCurrentUserAsset(asset);
const mine = visibleAssets.filter((asset) => isMyAsset(asset) && matchesFilter(asset) && matchesSearch(asset));
const others = visibleAssets.filter((asset) => !isMyAsset(asset) && matchesFilter(asset) && matchesSearch(asset));
const favorite = getLikedAssets().filter((asset) => !isModeratedAssetHidden(asset) && !state.hiddenAssets?.[asset.id] && matchesFilter(asset) && matchesSearch(asset));
const groups = { mine, others, favorite };
if (!groups[libraryViewTab]) libraryViewTab = 'mine';
if (libraryViewTab === 'mine' && mine.length === 0 && others.length > 0) libraryViewTab = 'others';
uiState.library.viewTab = libraryViewTab;
renderCollectionTabs(groups);
if (libraryViewTab === 'mine') addLibrarySection('My works', mine, 'No assets in this tab.');
else if (libraryViewTab === 'others') addLibrarySection('Others', others, 'No assets in this tab.');
else addLibrarySection('Favorite', favorite, 'Works you upvote appear here.');
renderHiddenAssets();
if (preserveScroll) restoreLibraryScrollState(scrollState);
syncLibraryStateFromLegacy();
}
function renderLibraryToolbar(visibleAssets) {
if (!els.assetList) return;
const toolbar = document.createElement('div');
toolbar.className = 'collectionToolbar';
const summary = document.createElement('div');
summary.className = 'collectionSummary';
const placedCount = visibleAssets.filter((asset) => getAssetPlacementStats(asset.id).total > 0).length;
summary.textContent = `${visibleAssets.length} works / ${placedCount} on island`;
toolbar.append(summary);
const search = document.createElement('input');
search.className = 'collectionSearch';
search.type = 'search';
search.placeholder = 'Search collection';
search.value = librarySearch;
search.addEventListener('input', () => {
librarySearch = search.value || '';
uiState.library.search = librarySearch;
const caret = search.selectionStart || librarySearch.length;
const scrollState = captureLibraryScrollState();
renderLibrary({ preserveScroll: true, scrollState });
requestAnimationFrame(() => {
restoreLibraryScrollState(scrollState);
const nextSearch = els.assetList?.querySelector('.collectionSearch');
if (!nextSearch) return;
nextSearch.focus?.({ preventScroll: true });
nextSearch.setSelectionRange?.(caret, caret);
});
});
toolbar.append(search);
const chips = document.createElement('div');
chips.className = 'collectionFilters';
for (const filter of ['all', 'human', 'animal', 'bird', 'fish', 'nature', 'building', 'ship', 'other']) {
const button = document.createElement('button');
button.type = 'button';
button.className = 'collectionFilter';
button.classList.toggle('active', libraryFilter === filter);
button.textContent = filter === 'all' ? 'All' : cap(filter);
button.addEventListener('click', () => {
const scrollState = captureLibraryScrollState();
libraryFilter = filter;
uiState.library.filter = libraryFilter;
libraryGridScrollTop = 0;
scrollState.gridTop = 0;
renderLibrary({ preserveScroll: true, scrollState });
});
chips.append(button);
}
toolbar.append(chips);
els.assetList.append(toolbar);
}
function renderCollectionTabs(groups) {
const tabs = document.createElement('div');
tabs.className = 'collectionViewTabs tabs';
const labels = [
['mine', 'My works'],
['others', 'Others'],
['favorite', 'Favorite']
];
for (const [key, label] of labels) {
const button = document.createElement('button');
button.type = 'button';
button.className = 'tab collectionViewTab';
button.classList.toggle('active', libraryViewTab === key);
button.textContent = `${label} ${groups[key]?.length ?? 0}`;
button.addEventListener('click', () => {
const scrollState = captureLibraryScrollState();
libraryViewTab = key;
uiState.library.viewTab = libraryViewTab;
libraryGridScrollTop = 0;
scrollState.gridTop = 0;
renderLibrary({ preserveScroll: true, scrollState });
});
tabs.append(button);
}
els.assetList.append(tabs);
}
function makeLibraryEmptyNote(text) {
const empty = document.createElement('div');
empty.className = 'libraryEmptyNote';
empty.textContent = text;
return empty;
}
function addLibrarySection(title, assets, emptyText = 'No assets in this genre.') {
const heading = document.createElement('div');
heading.className = 'librarySectionTitle';
heading.textContent = `${title} (${assets.length})`;
heading.title = '';
els.assetList.append(heading);
if (!assets.length) {
els.assetList.append(makeLibraryEmptyNote(emptyText));
return;
}
const grid = document.createElement('div');
grid.className = 'assetSectionGrid';
grid.addEventListener('scroll', () => { libraryGridScrollTop = grid.scrollTop; uiState.library.scroll.gridTop = grid.scrollTop; }, { passive: true });
for (const asset of assets) grid.append(makeAssetCard(asset));
els.assetList.append(grid);
}
function restoreLibraryScrollState(snapshot) {
const next = snapshot || uiState.library.scroll || { bodyTop: 0, gridTop: 0 };
const bodyTop = Math.max(0, Number(next.bodyTop) || 0);
const gridTop = Math.max(0, Number(next.gridTop) || 0);
uiState.library.scroll = { bodyTop, gridTop };
syncLegacyFromLibraryState();
const token = ++uiState.library.restoreToken;
libraryScrollFrameToken = token;
const apply = () => {
if (token !== uiState.library.restoreToken) return;
const body = drawerScroller();
const grid = els.assetList?.querySelector('.assetSectionGrid');
if (body && Math.abs(body.scrollTop - bodyTop) > 1) body.scrollTop = bodyTop;
if (grid && Math.abs(grid.scrollTop - gridTop) > 1) grid.scrollTop = gridTop;
};
apply();
requestAnimationFrame(apply);
requestAnimationFrame(() => requestAnimationFrame(apply));
setTimeout(apply, 0);
setTimeout(apply, 60);
}
function withLibraryScrollPreserved(mutator) {
const snapshot = captureLibraryScrollState();
mutator?.(snapshot);
restoreLibraryScrollState(snapshot);
return snapshot;
}
function getAssetPlacementStats(assetId) {
const confirmed = state.placed.filter((p) => p.assetId === assetId).length + state.dynamicSummons.filter((p) => p.assetId === assetId).length;
const visuals = Object.values(state.serverSync?.pendingObjectVisuals || {}).filter((entry) => entry?.assetId === assetId || entry?.object?.assetId === assetId);
const failed = visuals.filter((entry) => entry?.status === 'failed').length;
const pending = Math.max(0, visuals.length - failed);
return { confirmed, pending, failed, total: confirmed + pending + failed };
}
function makeAssetCard(asset) {
const card = document.createElement('article');
const expanded = asset.id === selectedAssetId;
card.className = `assetCard${expanded ? ' selected expanded' : ''}`;
const preview = document.createElement('canvas');
preview.className = 'assetPreview';
preview.width = 64;
preview.height = 64;
drawPreview(preview, asset);
const meta = document.createElement('div');
meta.className = 'assetMeta';
const title = document.createElement('strong');
title.textContent = asset.name;
meta.append(title);
const placementStats = getAssetPlacementStats(asset.id);
const placementCount = placementStats.total;
const isPlaced = placementCount > 0;
const statusRow = document.createElement('div');
statusRow.className = 'assetStatusRow';
const roleTag = document.createElement('span');
roleTag.className = 'assetStatus role';
roleTag.textContent = cap(subtypeToRole(asset));
const placeTag = document.createElement('span');
placeTag.className = `assetStatus ${isPlaced ? 'placed' : 'stored'}${placementStats.pending && !placementStats.confirmed ? ' validating' : ''}${placementStats.failed && !placementStats.confirmed ? ' failed' : ''}`;
placeTag.textContent = isPlaced ? (placementStats.confirmed ? (placementCount > 1 ? `On island ${placementCount}` : 'On island') : (placementStats.failed ? 'Publish failed' : 'Publishing')) : 'Stored';
statusRow.append(roleTag, placeTag);
meta.append(statusRow);
card.addEventListener('click', (event) => {
event.preventDefault();
const scrollState = captureLibraryScrollState();
selectedAssetId = expanded ? null : asset.id;
uiState.selectedAssetId = selectedAssetId || null;
updateSelectedLabel();
renderLibrary({ preserveScroll: true, scrollState });
if (selectedAssetId) focusAssetInWorld(asset, { renderLibrary: false });
restoreLibraryScrollState(scrollState);
});
if (expanded) {
const lineage = asset.parentAssetId ? ' / derivative' : '';
const span1 = document.createElement('span');
span1.textContent = `${displayCategory(asset)} / ${cap(asset.subtype)} / ${assetWidth(asset)}x${assetHeight(asset)}${lineage}`;
const span2 = document.createElement('span');
span2.textContent = `Author: ${displayAssetAuthor(asset)} / Remixed: ${getRemixCount(asset.id)}`;
meta.append(span1, span2);
const actions = document.createElement('div');
actions.className = 'assetActions';
const assetVotes = getAssetVoteCounts(asset.id);
const assetPreviousVote = assetVotes.voters?.[currentVoterKey()] || 0;
const up = makeButton(`Up ${assetVotes.up}`, (event) => { event.stopPropagation(); voteAsset(asset.id, 1); });
const down = makeButton(`Down ${assetVotes.down}`, (event) => { event.stopPropagation(); voteAsset(asset.id, -1); });
up.classList.toggle('activeVote', assetPreviousVote > 0);
down.classList.toggle('activeVote', assetPreviousVote < 0);
up.classList.toggle('mutedVote', assetPreviousVote < 0);
down.classList.toggle('mutedVote', assetPreviousVote > 0);
const hide = makeButton('Hide', (event) => { event.stopPropagation(); hideAsset(asset.id); });
hide.classList.toggle('mutedAction', assetPreviousVote >= 0);
const isMine = isCurrentUserAsset(asset);
const remix = makeButton('Remix', (event) => { event?.stopPropagation?.(); remixEdit(asset); });
const edit = isMine ? makeButton('Edit', (event) => { event?.stopPropagation?.(); editOriginalAsset(asset); }) : null;
const move = isMine ? makeButton('Place', (event) => {
event?.stopPropagation?.();
const scrollState = captureLibraryScrollState();
selectedAssetId = asset.id;
updateSelectedLabel();
renderLibrary({ preserveScroll: true, scrollState });
setMode('place');
setDrawerOpen(false);
syncPlacementUi();
toast('Left-click a tile to choose a position, then right-click or PLACE HERE to publish another copy.');
}) : null;
const del = makeButton('Delete', (event) => { event?.stopPropagation?.(); deleteAsset(asset); });
del.classList.add('danger');
actions.append(up, down, hide, remix);
if (edit) actions.append(edit);
if (move) actions.append(move);
if (isMine) actions.append(del);
meta.append(actions);
} else {
const mini = document.createElement('span');
mini.textContent = `${cap(asset.subtype)} / ${assetWidth(asset)}x${assetHeight(asset)}`;
meta.append(mini);
if (isCurrentUserAsset(asset)) {
const quickActions = document.createElement('div');
quickActions.className = 'assetActions';
const del = makeButton('Delete', (event) => { event?.stopPropagation?.(); deleteAsset(asset); });
del.classList.add('danger');
quickActions.append(del);
meta.append(quickActions);
}
}
card.append(preview, meta);
return card;
}
function getLikedAssets() {
const voter = currentVoterKey();
const likedIds = new Set();
for (const [assetId, votes] of Object.entries(state.assetVotes || {})) {
if ((votes?.voters || {})[voter] > 0) likedIds.add(assetId);
}
for (const [objectId, votes] of Object.entries(state.objectVotes || {})) {
if ((votes?.voters || {})[voter] > 0) {
const obj = [...(state.placed || []), ...(state.dynamicSummons || [])].find((item) => item.id === objectId);
if (obj?.assetId) likedIds.add(obj.assetId);
}
}
return [...likedIds].map(findAsset).filter(Boolean);
}
function renderLikedCodex() {
if (!els.likedCodex) return;
const liked = getLikedAssets().slice(0, 12);
if (!liked.length) {
els.likedCodex.innerHTML = 'Favorite
Works you upvote appear here.
';
return;
}
els.likedCodex.innerHTML = 'Favorite
';
const list = els.likedCodex.querySelector('.likedCodexList');
for (const asset of liked) {
const item = document.createElement('button');
item.type = 'button';
item.className = 'likedCodexItem';
const canvas = document.createElement('canvas');
canvas.width = 32; canvas.height = 32;
drawPreview(canvas, asset);
const label = document.createElement('span');
label.textContent = asset.name;
item.append(canvas, label);
item.addEventListener('click', () => { selectedAssetId = asset.id; updateSelectedLabel(); focusAssetInWorld(asset); });
list.append(item);
}
}
function renderHiddenAssets() {
if (!els.hiddenAssetList) return;
els.hiddenAssetList.innerHTML = '';
const hiddenAssets = state.assets.filter((asset) => state.hiddenAssets?.[asset.id]);
const hiddenObjects = collectHiddenObjects();
if (!hiddenAssets.length && !hiddenObjects.length) {
els.hiddenAssetList.textContent = 'No hidden assets or objects.';
return;
}
if (hiddenObjects.length) {
const title = document.createElement('div');
title.className = 'hiddenSectionTitle';
title.textContent = 'Hidden map objects';
els.hiddenAssetList.append(title);
for (const entry of hiddenObjects) els.hiddenAssetList.append(makeHiddenObjectCard(entry));
}
if (hiddenAssets.length) {
const title = document.createElement('div');
title.className = 'hiddenSectionTitle';
title.textContent = 'Hidden collection works';
els.hiddenAssetList.append(title);
for (const asset of hiddenAssets) els.hiddenAssetList.append(makeHiddenAssetCard(asset));
}
}
function collectHiddenObjects() {
const out = [];
const reportsByObject = new Map((state.moderationReports || []).map((report) => [report.objectId, report]));
for (const placed of state.placed || []) {
if (!state.hiddenObjects?.[placed.id]) continue;
const asset = findAsset(placed.assetId);
if (!asset) continue;
out.push({ kind: 'static', object: placed, asset, report: reportsByObject.get(placed.id) || null });
}
for (const summon of state.dynamicSummons || []) {
if (!state.hiddenObjects?.[summon.id]) continue;
const asset = findAsset(summon.assetId);
if (!asset) continue;
out.push({ kind: 'dynamic', object: summon, asset, report: reportsByObject.get(summon.id) || null });
}
return out;
}
function hiddenReasonLabel(object) {
if (!object) return 'Hidden locally';
if (object.status === 'hidden_rotation') return 'Not shown on island: exhibition is full. Works remain in your Collection.';
if (object.status === 'permanent_hidden' || object.status === 'violation_hidden') return 'Hidden by moderation. This work is not visible to authors or viewers.';
if (object.hiddenReason === 'rotation_cap' || object.hiddenReason === 'extreme_downvotes') return 'Not shown on island: exhibition is full. Works remain in your Collection.';
return 'Hidden locally';
}
function makeHiddenObjectCard(entry) {
const { kind, object, asset, report } = entry;
const row = document.createElement('article');
row.className = 'assetCard hiddenAssetCard';
const preview = document.createElement('canvas');
preview.className = 'assetPreview';
preview.width = 64;
preview.height = 64;
drawPreview(preview, asset);
const meta = document.createElement('div');
meta.className = 'assetMeta';
const location = kind === 'dynamic'
? `home ${Math.round(object.homeX)},${Math.round(object.homeY)}`
: `tile ${object.x},${object.y}`;
meta.innerHTML = ``;
meta.querySelector('strong').textContent = asset.name;
meta.querySelectorAll('span')[0].textContent = `${cap(kind)} object / ${location}`;
meta.querySelectorAll('span')[1].textContent = report ? `Hidden locally after report: ${report.reason}` : hiddenReasonLabel(object);
const actions = document.createElement('div');
actions.className = 'assetActions';
const restore = makeButton('Show again', (event) => {
event.stopPropagation();
if (isPermanentlyHiddenObject(object)) {
toast('This object is permanently hidden.');
return;
}
if (!canPublishObject('republish')) return;
delete state.hiddenObjects[object.id];
recordObjectPublish(kind, object, 'republish');
saveState();
hydrateRuntime();
renderLibrary();
updateSelectionBubble(performance.now());
toast('Object republished.');
});
actions.append(restore);
meta.append(actions);
row.append(preview, meta);
return row;
}
function makeHiddenAssetCard(asset) {
const row = document.createElement('article');
row.className = 'assetCard hiddenAssetCard';
const preview = document.createElement('canvas');
preview.className = 'assetPreview';
preview.width = 64;
preview.height = 64;
drawPreview(preview, asset);
const meta = document.createElement('div');
meta.className = 'assetMeta';
meta.innerHTML = `Author: ${displayAssetAuthor(asset)}`;
meta.querySelector('strong').textContent = asset.name;
const actions = document.createElement('div');
actions.className = 'assetActions';
const restore = makeButton('Show again', (event) => {
event.stopPropagation();
delete state.hiddenAssets[asset.id];
saveState();
renderLibrary();
updateSelectionBubble(performance.now());
toast('Asset shown again.');
});
actions.append(restore);
meta.append(actions);
row.append(preview, meta);
return row;
}
function drawPreview(canvas, asset) {
const c = canvas.getContext('2d');
c.imageSmoothingEnabled = false;
c.clearRect(0, 0, canvas.width, canvas.height);
c.fillStyle = '#fff3d9';
c.fillRect(0, 0, canvas.width, canvas.height);
const pixels = getAssetPixels(asset, 'right');
const w = assetWidth(asset);
const h = assetHeight(asset);
const scale = Math.floor(48 / Math.max(w, h)) || 1;
const ox = Math.floor((canvas.width - w * scale) / 2);
const oy = Math.floor((canvas.height - h * scale) / 2);
for (let y = 0; y < h; y++) {
for (let x = 0; x < w; x++) {
const color = pixels[y * w + x];
if (!color) continue;
c.fillStyle = colorToHex(color);
c.fillRect(ox + x * scale, oy + y * scale, scale, scale);
}
}
}
function renderPalette() {
if (!els.paletteGrid) return;
els.paletteGrid.innerHTML = '';
const visiblePalette = advancedDraw ? PALETTE : PALETTE.slice(0, BASIC_PALETTE_COUNT);
for (const entry of visiblePalette) {
const swatch = document.createElement('button');
swatch.type = 'button';
swatch.className = `paletteSwatch${entry.code === selectedColorCode ? ' active' : ''}`;
swatch.dataset.code = entry.code;
swatch.title = `${entry.code} ${entry.color}`;
swatch.style.background = entry.color;
const choose = (event) => {
event.preventDefault();
event.stopPropagation();
selectPaletteCode(entry.code);
drawEditor();
};
swatch.addEventListener('pointerdown', choose);
swatch.addEventListener('click', (event) => event.preventDefault());
els.paletteGrid.append(swatch);
}
els.paintColor.value = PALETTE_BY_CODE[selectedColorCode] || '#6bd06b';
}
function displayCategory(asset) {
return asset.category === 'dynamic' ? 'People & Animals' : (asset.subtype === 'ship' ? 'Ships' : 'Buildings & Nature');
}
function makeButton(label, onClick) {
const button = document.createElement('button');
button.type = 'button';
button.textContent = label;
button.addEventListener('pointerdown', (event) => event.preventDefault());
button.addEventListener('click', onClick);
return button;
}
function loadAssetIntoEditor(asset, mode = 'remix') {
setDrawerOpen(true);
setTab('draw');
const editExisting = mode === 'edit';
editingAssetId = editExisting ? asset.id : null;
editParentId = editExisting ? asset.parentAssetId : asset.id;
editOriginalId = editExisting ? asset.originalAssetId : (asset.originalAssetId || asset.id);
els.assetName.value = editExisting ? (asset.name || 'Untitled') : `${asset.name} Remix`;
els.assetCategory.value = subtypeToRole(asset);
staticKind = asset.category === 'static' ? asset.subtype : staticKind;
dynamicKind = asset.category === 'dynamic' ? asset.subtype : dynamicKind;
editingSide = 'right'; frontSide = asset.meta?.frontSide === 'left' ? 'left' : 'right';
const right = getAssetPixels(asset, 'right');
lightPixels = (asset.meta?.lightPixels || []).map((p) => ({ x: p.x, y: p.y, c: p.c || asset.meta?.lightColor || selectedColorCode }));
particlePixels = (asset.meta?.particlePixels || []).map((p) => ({ x: p.x, y: p.y, c: p.c || selectedColorCode, dir: p.dir || 'up' }));
const aw = assetWidth(asset);
const ah = assetHeight(asset);
particleConfig = normalizeParticleConfig((particlePixels.length ? { enabled: true, c: particlePixels[0].c || selectedColorCode, dir: particlePixels[0].dir || 'up' } : { enabled: false, c: selectedColorCode, dir: 'up' }), Math.max(aw, ah));
depthPixels = normalizeDepthPixels(asset.meta?.depthPixels || [], aw, ah);
doorPixel = asset.meta?.door || { x: Math.floor(aw / 2), y: ah - 1 };
setupEditor(aw, right, null, depthPixels, ah);
clearEditorHistory();
refreshCategoryUI();
els.lineageNote.textContent = editExisting ? `Editing "${cleanWorkText(asset.name, 'Untitled')}". Save updates this collection work.` : `Remixing "${cleanWorkText(asset.name, 'Untitled')}". Save creates a separate new collection work.`;
}
function editOriginalAsset(asset) {
loadAssetIntoEditor(asset, 'edit');
}
function remixEdit(asset) {
loadAssetIntoEditor(asset, 'remix');
}
function copyEdit(asset) {
remixEdit(asset);
}
function assetMatchesDeleteTarget(candidate, target) {
if (!candidate || !target) return false;
if (candidate.id === target.id) return true;
if (target.contentHash && candidate.contentHash === target.contentHash) return true;
if ((candidate.name || '') === (target.name || '')
&& (candidate.category || '') === (target.category || '')
&& (candidate.subtype || '') === (target.subtype || '')
&& assetWidth(candidate) === assetWidth(target)
&& assetHeight(candidate) === assetHeight(target)) return true;
return false;
}
async function deleteAsset(asset) {
if (!asset) return;
const deletedAssetIds = new Set([asset.id]);
await deleteAssetIds(deletedAssetIds, `"${asset.name}"`, asset);
}
async function deleteAssetIds(deletedAssetIds, label = 'selected works', permissionAsset = null) {
const scrollState = activeTabName === 'library' ? captureLibraryScrollState() : null;
deletedAssetIds = new Set([...deletedAssetIds].filter(Boolean));
if (!deletedAssetIds.size) return;
const assetsToDelete = (state.assets || []).filter((candidate) => deletedAssetIds.has(candidate.id));
if (!assetsToDelete.length) return;
if (assetsToDelete.some((candidate) => !canCurrentAccountDeleteAsset(candidate, false))) {
canCurrentAccountDeleteAsset(assetsToDelete.find((candidate) => !canCurrentAccountDeleteAsset(candidate, false)), true);
return;
}
const used = state.placed.some((p) => deletedAssetIds.has(p.assetId)) || state.dynamicSummons.some((p) => deletedAssetIds.has(p.assetId));
const usageText = used ? ' Island placements that use it will also be removed.' : '';
const confirmed = await confirmWebsiteDialog({
title: 'Delete work',
message: `Delete ${label}?${usageText}`,
okText: 'Delete',
danger: true
});
if (!confirmed) return;
const sharedDelete = isSharedWorld();
if (sharedDelete) {
for (const assetId of deletedAssetIds) queueSharedCommand(makeSharedCommand('asset.delete', { assetId }), { toast: false });
toast('Delete queued for server validation.');
}
const removedObjectIds = new Set();
const removedObjectAssetIds = new Map();
for (const placed of state.placed || []) {
if (!deletedAssetIds.has(placed.assetId)) continue;
removedObjectIds.add(placed.id);
removedObjectAssetIds.set(placed.id, placed.assetId);
}
for (const summon of state.dynamicSummons || []) {
if (!deletedAssetIds.has(summon.assetId)) continue;
removedObjectIds.add(summon.id);
removedObjectAssetIds.set(summon.id, summon.assetId);
}
ensureWorldProtectionState();
for (const assetId of deletedAssetIds) {
const deleted = state.assets.find((candidate) => candidate.id === assetId) || permissionAsset || assetsToDelete[0];
state.tombstones.assets[assetId] = {
id: assetId,
name: deleted.name || '',
deletedAt: Date.now(),
deletedBy: currentAccountId() || 'local',
ownerAccountId: normalizeOwnerAccountId(deleted.ownerAccountId),
author: deleted.author || '',
contentHash: deleted.contentHash || computeAssetContentHash(deleted),
category: deleted.category || '',
subtype: deleted.subtype || '',
version: Number(deleted.version) || 1
};
const deletedName = deleted.name || '';
if (deletedName && !state.deletedSeedAssetNames.includes(deletedName)) state.deletedSeedAssetNames.push(deletedName);
}
for (const id of removedObjectIds) {
state.tombstones.objects[id] = {
id,
assetId: removedObjectAssetIds.get(id) || permissionAsset?.id || assetsToDelete[0]?.id || '',
deletedAt: Date.now(),
deletedBy: currentAccountId() || 'local'
};
}
const deletedBlobIds = assetsToDelete.map((item) => item.blobId).filter(Boolean);
state.assets = state.assets.filter((a) => !deletedAssetIds.has(a.id));
state.placed = state.placed.filter((p) => !deletedAssetIds.has(p.assetId));
state.dynamicSummons = state.dynamicSummons.filter((p) => !deletedAssetIds.has(p.assetId));
Phase2Sync?.deleteCachedAssets?.([...deletedAssetIds], deletedBlobIds)
.catch((error) => console.warn('Phase 2 cached asset delete failed.', error));
for (const assetId of deletedAssetIds) {
delete state.assetVotes?.[assetId];
delete state.hiddenAssets?.[assetId];
}
for (const id of removedObjectIds) {
delete state.objectVotes?.[id];
delete state.hiddenObjects?.[id];
}
state.moderationReports = (state.moderationReports || []).filter((report) => !removedObjectIds.has(report.objectId));
if (deletedAssetIds.has(selectedAssetId)) selectedAssetId = state.assets[0]?.id ?? null;
if (selectedObject && (deletedAssetIds.has(selectedObject.assetId) || removedObjectIds.has(selectedObject.id))) selectedObject = null;
if (!sharedDelete) {
for (const assetId of deletedAssetIds) recordSyncEvent(Phase2Sync?.createAssetDeleteEvent?.(assetId));
}
saveState();
spriteCache.clear();
hydrateRuntime();
renderLibrary();
updateSelectedLabel();
updateSelectionBubble(performance.now());
render();
toast(`${label} deleted.`);
}
function hydrateRuntime() {
const authoritativeMotion = isSharedWorld() && isServerAuthoritative('dynamicMotion');
const previousRuntime = new Map(dynamicRuntime.map((item) => [item.id, item]));
dynamicRuntime = state.dynamicSummons.map((summon) => {
const asset = findAsset(summon.assetId);
if (!asset) return null;
const previous = previousRuntime.get(summon.id);
const homeTile = world.get(Math.round(summon.homeX), Math.round(summon.homeY));
const homeValid = homeTile && ((asset.subtype === 'fish') ? homeTile.type === 'water' : homeTile.type !== 'water');
const spawn = homeValid ? { x: Math.round(summon.homeX), y: Math.round(summon.homeY) } : findValidSpawn(asset, summon.homeX, summon.homeY, 6);
const synced = authoritativeMotion ? (state.serverSync?.dynamicTargets?.[summon.id] || summon.serverState || {}) : {};
const startX = Number.isFinite(Number(synced.x)) ? Number(synced.x) : (previous ? previous.x : spawn.x + .5);
const startY = Number.isFinite(Number(synced.y)) ? Number(synced.y) : (previous ? previous.y : spawn.y + .5);
const targetX = Number.isFinite(Number(synced.targetX)) ? Number(synced.targetX) : (previous ? previous.targetX : startX);
const targetY = Number.isFinite(Number(synced.targetY)) ? Number(synced.targetY) : (previous ? previous.targetY : startY);
const facing = Number.isFinite(Number(synced.facing)) && Number(synced.facing) !== 0 ? Math.sign(Number(synced.facing)) : (previous?.facing || (asset.meta?.frontSide === 'left' ? -1 : 1));
return {
id: summon.id,
assetId: summon.assetId,
homeX: summon.homeX,
homeY: summon.homeY,
x: startX,
y: startY,
targetX,
targetY,
vx: previous?.vx || 0,
lastMoveX: previous?.lastMoveX || 0,
facing,
idleUntil: authoritativeMotion ? 0 : (previous?.idleUntil || performance.now() + 700 + Math.random() * 1600),
hiddenUntil: previous?.hiddenUntil || 0,
seed: previous?.seed || Math.random() * 9999,
nextDecisionAt: previous?.nextDecisionAt || 0,
nextBubbleAt: previous?.nextBubbleAt || 800 + Math.random() * 1500,
nextStepParticleAt: previous?.nextStepParticleAt || performance.now() + 300 + Math.random() * 280,
serverMotion: authoritativeMotion
};
}).filter(Boolean);
}
function findValidSpawn(asset, homeX, homeY, radius) {
if (asset.subtype === 'bird') {
const x = clamp(Math.round(homeX), 0, WORLD_W - 1);
const y = clamp(Math.round(homeY), 0, WORLD_H - 1);
if (world.get(x, y)?.type !== 'water') return { x, y };
}
const candidates = [];
for (let dy = -radius; dy <= radius; dy++) {
for (let dx = -radius; dx <= radius; dx++) {
const x = Math.round(homeX + dx);
const y = Math.round(homeY + dy);
if (x < 0 || y < 0 || x >= WORLD_W || y >= WORLD_H) continue;
const tile = world.get(x, y);
if (asset.subtype === 'fish') {
if (tile.type === 'water') candidates.push({ x, y });
} else if (tile.type !== 'water') candidates.push({ x, y });
}
}
if (!candidates.length) return { x: clamp(Math.round(homeX), 0, WORLD_W - 1), y: clamp(Math.round(homeY), 0, WORLD_H - 1) };
return candidates[Math.floor(Math.random() * candidates.length)];
}
function applyServerDrivenMotion(item, asset, dt, time) {
const synced = state.serverSync?.dynamicTargets?.[item.id] || null;
if (synced) {
if (Number.isFinite(Number(synced.homeX))) item.homeX = Number(synced.homeX);
if (Number.isFinite(Number(synced.homeY))) item.homeY = Number(synced.homeY);
if (Number.isFinite(Number(synced.targetX))) item.targetX = Number(synced.targetX);
if (Number.isFinite(Number(synced.targetY))) item.targetY = Number(synced.targetY);
else {
item.targetX = Number.isFinite(Number(synced.x)) ? Number(synced.x) : item.targetX;
item.targetY = Number.isFinite(Number(synced.y)) ? Number(synced.y) : item.targetY;
}
if (Number.isFinite(Number(synced.facing)) && Number(synced.facing) !== 0) item.facing = Math.sign(Number(synced.facing));
} else {
item.targetX = item.homeX + .5;
item.targetY = item.homeY + .5;
}
const dx = item.targetX - item.x;
const dy = item.targetY - item.y;
const len = Math.hypot(dx, dy);
if (len < 0.001) {
item.vx = 0;
item.lastMoveX = 0;
return;
}
const speed = ({ human: .85, animal: .74, fish: .55, bird: .8 }[asset.subtype] || .6) * dt;
const step = Math.min(speed, len);
const moveX = (dx / len) * step;
const moveY = (dy / len) * step;
if (Math.abs(moveX) > 0.002) item.facing = Math.sign(moveX);
item.vx = Math.abs(moveX) > 0.002 ? Math.sign(moveX) : 0;
item.lastMoveX = moveX;
item.x += moveX;
item.y += moveY;
if (visualSettings().enableParticles && asset.subtype !== 'fish' && asset.subtype !== 'bird' && time >= (item.nextStepParticleAt || 0)) {
const groundTile = world.get(clamp(Math.floor(item.x), 0, WORLD_W - 1), clamp(Math.floor(item.y), 0, WORLD_H - 1));
if (groundTile && groundTile.type !== 'water') spawnGroundStepParticles(item, time, groundTile);
item.nextStepParticleAt = time + 300 + Math.random() * 320;
}
}
function updateDynamicRuntime(dt, time) {
bubbleParticles = bubbleParticles.filter((p) => time - p.started < p.life);
confettiParticles = confettiParticles.filter((p) => time - p.started < p.life);
landStepParticles = landStepParticles.filter((p) => time - p.started < p.life);
natureDriftParticles = natureDriftParticles.filter((p) => time - p.started < p.life);
for (const item of dynamicRuntime) {
const asset = findAsset(item.assetId);
if (!asset) continue;
if (time < item.hiddenUntil) continue;
if (visualSettings().enableParticles && asset.subtype === 'fish' && time > (item.nextBubbleAt || 0)) {
spawnFishBubbleCluster(item.x, item.y, time, item.seed);
item.nextBubbleAt = time + 1100 + Math.random() * 1800;
}
if (item.serverMotion) {
applyServerDrivenMotion(item, asset, dt, time);
continue;
}
if (time < (item.idleUntil || 0)) {
item.vx = 0;
item.lastMoveX = 0;
continue;
}
const distance = Math.hypot(item.targetX - item.x, item.targetY - item.y);
if (distance < .15 || time > item.nextDecisionAt) chooseTarget(item, asset, time);
if (time < (item.idleUntil || 0)) {
item.vx = 0;
item.lastMoveX = 0;
continue;
}
const dx = item.targetX - item.x;
const dy = item.targetY - item.y;
const len = Math.hypot(dx, dy) || 1;
const speed = ({ human: .77, animal: .67, car: .37, fish: .47, bird: .75 }[asset.subtype] || .53) * dt;
const step = Math.min(speed, len);
const moveX = (dx / len) * step;
const moveY = (dy / len) * step;
if (Math.abs(moveX) > 0.003) item.facing = Math.sign(moveX);
item.vx = Math.abs(moveX) > 0.003 ? Math.sign(moveX) : 0;
item.lastMoveX = moveX;
item.x += moveX;
item.y += moveY;
if (visualSettings().enableParticles && asset.subtype !== 'fish' && asset.subtype !== 'bird' && time >= (item.nextStepParticleAt || 0)) {
const groundTile = world.get(clamp(Math.floor(item.x), 0, WORLD_W - 1), clamp(Math.floor(item.y), 0, WORLD_H - 1));
if (groundTile && groundTile.type !== 'water') {
spawnGroundStepParticles(item, time, groundTile);
}
item.nextStepParticleAt = time + 300 + Math.random() * 320;
}
if (asset.subtype === 'human' && distance < .3 && Math.random() < .004) {
item.hiddenUntil = time + 1700 + Math.random() * 2200;
}
}
}
function chooseTarget(item, asset, time) {
const idleChance = ({ human: .34, animal: .42, fish: .24, bird: .16 }[asset.subtype] || .32);
if (Math.random() < idleChance) {
item.idleUntil = time + 900 + Math.random() * 2600;
item.targetX = item.x;
item.targetY = item.y;
item.vx = 0;
item.lastMoveX = 0;
item.nextDecisionAt = item.idleUntil + 400 + Math.random() * 1200;
return;
}
let target = null;
if (asset.subtype === 'human') target = findNearestPlaced(item.x, item.y, 'building', 14);
else if (asset.subtype === 'animal' || asset.subtype === 'bird') target = findNearestPlaced(item.x, item.y, 'nature', 16);
if (target && Math.random() < .72) {
item.targetX = target.x + .5 + (Math.random() - .5) * 1.8;
item.targetY = target.y + .5 + (Math.random() - .5) * 1.8;
} else {
const spawn = findValidSpawn(asset, item.homeX, item.homeY, asset.subtype === 'bird' ? 2 : 7);
item.targetX = spawn.x + .5;
item.targetY = spawn.y + .5;
}
item.idleUntil = 0;
item.nextDecisionAt = time + 1800 + Math.random() * 3200;
}
function findNearestPlaced(x, y, subtype, maxDistance) {
let best = null;
let bestDistance = maxDistance;
const minX = clampInt(Math.floor(x - maxDistance), 0, WORLD_W - 1, 0);
const maxX = clampInt(Math.ceil(x + maxDistance), 0, WORLD_W - 1, WORLD_W - 1);
const minY = clampInt(Math.floor(y - maxDistance), 0, WORLD_H - 1, 0);
const maxY = clampInt(Math.ceil(y + maxDistance), 0, WORLD_H - 1, WORLD_H - 1);
for (let ty = minY; ty <= maxY; ty++) {
for (let tx = minX; tx <= maxX; tx++) {
const bucket = worldIndex.placedByTile.get(tileKey(tx, ty));
if (!bucket) continue;
for (const placed of bucket) {
const asset = findAsset(placed.assetId);
if (!asset || asset.subtype !== subtype) continue;
const distance = Math.hypot(placed.x + .5 - x, placed.y + .5 - y);
if (distance < bestDistance) {
bestDistance = distance;
best = placed;
}
}
}
}
return best;
}
function scheduleFrame() {
if (animationFrameId || document.hidden) return;
animationFrameId = requestAnimationFrame(tick);
}
function onVisibilityChange() {
if (document.hidden) {
if (animationFrameId) cancelAnimationFrame(animationFrameId);
animationFrameId = 0;
lastRuntimeUpdate = performance.now();
dynamicLogicRemainder = 0;
return;
}
lastRuntimeUpdate = performance.now();
dynamicLogicRemainder = 0;
render(lastRuntimeUpdate);
lastRenderAt = lastRuntimeUpdate;
syncSharedWorld({ silent: true, reason: 'visible' });
scheduleFrame();
}
function tick(time) {
animationFrameId = 0;
if (document.hidden) {
lastRuntimeUpdate = time;
return;
}
const elapsed = Math.min(100, Math.max(0, time - lastRuntimeUpdate));
lastRuntimeUpdate = time;
dynamicLogicRemainder += elapsed;
let steps = 0;
while (dynamicLogicRemainder >= DYNAMIC_LOGIC_STEP_MS && steps < MAX_DYNAMIC_STEPS_PER_FRAME) {
updateDynamicRuntime(DYNAMIC_LOGIC_STEP_MS / 1000, time);
dynamicLogicRemainder -= DYNAMIC_LOGIC_STEP_MS;
steps++;
}
if (steps >= MAX_DYNAMIC_STEPS_PER_FRAME) dynamicLogicRemainder = 0;
updateClock();
if (time - lastRenderAt >= TARGET_RENDER_FRAME_MS) {
render(time);
lastRenderAt = time;
}
scheduleFrame();
}
function updateClock() {
const phase = getPhase();
const progress = phase.progress || 0;
const degrees = progress * 360;
if (els.analogClockHand) {
els.analogClockHand.style.setProperty('--clock-rotate', `${degrees.toFixed(2)}deg`);
els.analogClockHand.style.transform = `translate(-50%, -100%) rotate(${degrees.toFixed(2)}deg)`;
}
if (els.analogClock) {
els.analogClock.style.setProperty('--clock-rotate', `${degrees.toFixed(2)}deg`);
els.analogClock.setAttribute('aria-label', `${phase.label} island clock`);
els.analogClock.title = `${phase.label} - 10 min = 1 island day`;
}
const second = Math.floor(getAuthoritativeNow() / 1000);
if (second !== lastClockSecond) {
lastClockSecond = second;
if (els.phaseLabel) els.phaseLabel.textContent = phase.label;
}
if (els.phaseBar) els.phaseBar.style.width = `${Math.round(progress * 100)}%`;
}
function getShadowForMinute(minute) {
if (Lighting?.getShadowForMinute) return Lighting.getShadowForMinute(minute);
const m = clamp(Number(minute) || 0, 0, 10);
const smooth = (t) => clamp(t, 0, 1) * clamp(t, 0, 1) * (3 - 2 * clamp(t, 0, 1));
let dirX = -0.9;
let length = 1.2;
let alpha = 0;
let scaleY = 0.26;
if (m < 0.65) {
// Pre-dawn: moon shadow fades out completely before morning begins.
const t = smooth(m / 0.65);
dirX = lerp(0.42, 0.18, t);
length = lerp(1.05, 0.92, t);
alpha = lerp(0.12, 0.0, t);
scaleY = lerp(0.22, 0.18, t);
} else if (m < 1.35) {
// Morning: sunlight shadow appears from zero.
const t = smooth((m - 0.65) / 0.70);
dirX = lerp(-1.05, -0.82, t);
length = lerp(1.38, 1.12, t);
alpha = lerp(0.0, 0.27, t);
scaleY = lerp(0.22, 0.27, t);
} else if (m < 5.65) {
// Day: rotate gradually with the sun, no hard switch in the evening.
const t = smooth((m - 1.35) / 4.30);
const elevation = Math.sin(t * Math.PI);
dirX = lerp(-0.82, 0.98, t);
length = lerp(1.12, 1.34, t) - elevation * 0.48;
alpha = lerp(0.27, 0.20, elevation);
scaleY = 0.24 + 0.06 * (1 - elevation);
} else if (m < 6.40) {
// Evening: keep the same sun-side direction and fade to zero before night.
const t = smooth((m - 5.65) / 0.75);
dirX = lerp(0.98, 1.08, t);
length = lerp(1.34, 1.56, t);
alpha = lerp(0.20, 0.0, t);
scaleY = lerp(0.28, 0.20, t);
} else if (m < 7.25) {
// Night starts after the sunlight shadow disappears; moon shadow fades in.
const t = smooth((m - 6.40) / 0.85);
dirX = lerp(0.20, -0.36, t);
length = lerp(0.92, 1.08, t);
alpha = lerp(0.0, 0.12, t);
scaleY = lerp(0.18, 0.23, t);
} else if (m < 9.20) {
const t = smooth((m - 7.25) / 1.95);
dirX = lerp(-0.36, -0.58, t);
length = lerp(1.08, 1.18, t);
alpha = 0.12;
scaleY = 0.23;
} else {
// Before dawn: moon shadow darkens/fades out to zero, then morning creates a new sun shadow.
const t = smooth((m - 9.20) / 0.80);
dirX = lerp(-0.58, 0.42, t);
length = lerp(1.18, 1.05, t);
alpha = lerp(0.12, 0.0, t);
scaleY = lerp(0.23, 0.18, t);
}
return {
dirX,
length,
skewX: dirX * (0.72 + 0.32 * length),
scaleY,
alpha
};
}
function getPhase() {
const authorityNow = getAuthoritativeNow();
const dayMs = Number(state.serverSync?.clock?.dayMs) || DAY_MS;
if (Lighting?.getPhase) return Lighting.getPhase({ dayMs, now: authorityNow, dayNightEnabled: visualSettings().enableDayNight !== false, mixHex });
if (visualSettings().enableDayNight === false) {
return { key: 'day', label: 'Day', progress: 0.25, sky: '#86d5ff', darkness: 0, darkOverlay: 'rgba(12, 19, 45, 0)', tint: 'rgba(255,255,255,0)', tintAlpha: 0, shadow: getShadowForMinute(3) };
}
const t = mod(authorityNow, dayMs);
const minute = t / 60000;
const stops = [
{ at: 0.00, key: 'preDawn', label: 'Night', sky: '#17254e', darkness: 0.52, tint: [22, 28, 66, 0.10], overlay: [12, 19, 45] },
{ at: 0.65, key: 'dawn', label: 'Morning', sky: '#5969aa', darkness: 0.30, tint: [120, 100, 150, 0.10], overlay: [40, 43, 78] },
{ at: 1.35, key: 'morning', label: 'Morning', sky: '#f6b16b', darkness: 0.12, tint: [255, 195, 126, 0.13], overlay: [114, 64, 36] },
{ at: 2.15, key: 'day', label: 'Day', sky: '#8ad8ff', darkness: 0.00, tint: [255, 255, 255, 0.00], overlay: [12, 19, 45] },
{ at: 4.75, key: 'day', label: 'Day', sky: '#8ad8ff', darkness: 0.00, tint: [255, 255, 255, 0.00], overlay: [12, 19, 45] },
{ at: 5.65, key: 'evening', label: 'Evening', sky: '#ffa153', darkness: 0.07, tint: [255, 166, 88, 0.10], overlay: [130, 48, 18] },
{ at: 6.40, key: 'evening', label: 'Evening', sky: '#d55a2d', darkness: 0.20, tint: [255, 118, 62, 0.17], overlay: [118, 42, 18] },
{ at: 7.25, key: 'night', label: 'Night', sky: '#1b2a58', darkness: 0.46, tint: [32, 40, 82, 0.07], overlay: [12, 19, 45] },
{ at: 9.20, key: 'night', label: 'Night', sky: '#132247', darkness: 0.58, tint: [16, 24, 58, 0.10], overlay: [12, 19, 45] },
{ at: 10.00, key: 'preDawn', label: 'Night', sky: '#17254e', darkness: 0.52, tint: [22, 28, 66, 0.10], overlay: [12, 19, 45] }
];
let a = stops[0], b = stops[1];
for (let i = 0; i < stops.length - 1; i++) {
if (minute >= stops[i].at && minute < stops[i + 1].at) { a = stops[i]; b = stops[i + 1]; break; }
}
const localT = clamp((minute - a.at) / Math.max(0.0001, b.at - a.at), 0, 1);
const eased = localT * localT * (3 - 2 * localT);
const tint = a.tint.map((v, i) => lerp(v, b.tint[i], eased));
const overlay = a.overlay.map((v, i) => lerp(v, b.overlay[i], eased));
const darkness = lerp(a.darkness, b.darkness, eased);
const mixSky = mixHex(a.sky, b.sky, eased);
const dominantKey = darkness >= 0.34 ? 'night' : (a.key === 'evening' || b.key === 'evening' ? 'evening' : (a.key === 'morning' || b.key === 'morning' || a.key === 'dawn' || b.key === 'dawn' ? 'morning' : 'day'));
const label = dominantKey === 'night' ? 'Night' : dominantKey === 'evening' ? 'Evening' : dominantKey === 'morning' ? 'Morning' : 'Day';
return {
key: dominantKey,
label,
progress: t / dayMs,
sky: mixSky,
darkness,
darkOverlay: `rgba(${Math.round(overlay[0])}, ${Math.round(overlay[1])}, ${Math.round(overlay[2])}, ${darkness.toFixed(3)})`,
tint: `rgba(${Math.round(tint[0])}, ${Math.round(tint[1])}, ${Math.round(tint[2])}, ${tint[3].toFixed(3)})`,
tintAlpha: tint[3],
shadow: getShadowForMinute(minute)
};
}
function areNightLightsActive(phase = renderPhase) {
return visualSettings().enableLights !== false && phase?.key === 'night';
}
function collectLightSourcesForItems(items, time, phase) {
if (!areNightLightsActive(phase) || !items?.length) return [];
const sources = [];
for (const item of items) {
const asset = item.asset;
if (!asset.meta?.hasLight || !asset.meta.lightPixels?.length) continue;
const info = getSpriteDrawInfo(item, time, true);
const scale = asset.category === 'static' ? STATIC_SCALE : DYNAMIC_SCALE;
const pivotX = info.drawX + info.sprite.width / 2;
const pivotY = info.drawY + info.sprite.height * 0.8;
const aw = assetWidth(asset);
for (const light of asset.meta.lightPixels) {
const lx = asset.category === 'dynamic' && info.side === 'left' ? aw - 1 - light.x : light.x;
let wx = info.drawX + (lx + 0.5) * scale;
let wy = info.drawY + (light.y + 0.5) * scale;
if (info.angle) {
const dx = wx - pivotX;
const dy = wy - pivotY;
const cos = Math.cos(info.angle);
const sin = Math.sin(info.angle);
wx = pivotX + dx * cos - dy * sin;
wy = pivotY + dx * sin + dy * cos;
}
sources.push({
x: wx,
y: wy,
color: colorToHex(light.c || asset.meta.lightColor || nearestPaletteCode('#ffd86a')),
radius: lerp(13, 22, assetMaxSize(asset) / 64),
intensity: clamp(0.82 + assetMaxSize(asset) / 96, 0.85, 1.35),
ownerId: item.source?.id || asset.id,
flickerSeed: parseInt(fnv1a(`${item.source?.id || asset.id}:${light.x},${light.y}`).slice(0, 6), 16) || 1
});
}
}
return sources;
}
function updateCameraFollowSelected() {
if (!cameraFollowSelected || !selectedObject) return;
const selected = getSelectedWorldPosition();
if (!selected) return;
const targetX = cw / 2 - selected.pos.x * view.zoom;
const targetY = ch * 0.52 - (selected.pos.y - Math.max(18, assetMaxSize(selected.asset) * 0.55)) * view.zoom;
view.x = lerp(view.x, targetX, 0.24);
view.y = lerp(view.y, targetY, 0.24);
}
function ensureShadowMaskCanvas() {
if (!shadowMaskCanvas) {
shadowMaskCanvas = document.createElement('canvas');
shadowMaskCtx = shadowMaskCanvas.getContext('2d', { alpha: true });
}
const w = Math.max(1, Math.ceil(cw * dpr));
const h = Math.max(1, Math.ceil(ch * dpr));
if (shadowMaskCanvas.width !== w || shadowMaskCanvas.height !== h) {
shadowMaskCanvas.width = w;
shadowMaskCanvas.height = h;
}
shadowMaskCtx.setTransform(1, 0, 0, 1, 0, 0);
shadowMaskCtx.clearRect(0, 0, shadowMaskCanvas.width, shadowMaskCanvas.height);
shadowMaskCtx.setTransform(dpr, 0, 0, dpr, 0, 0);
shadowMaskCtx.translate(view.x, view.y);
shadowMaskCtx.scale(view.zoom, view.zoom);
shadowMaskCtx.imageSmoothingEnabled = false;
return shadowMaskCtx;
}
function beginProjectedShadowLayer(phase) {
const alpha = phase?.shadow?.alpha || 0;
if (alpha <= 0.001) return false;
activeShadowCtx = ensureShadowMaskCanvas();
activeShadowCtx.globalCompositeOperation = 'source-over';
return true;
}
function endProjectedShadowLayer(phase) {
if (!activeShadowCtx || !shadowMaskCanvas) return;
activeShadowCtx = null;
ctx.save();
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.globalAlpha = phase?.shadow?.alpha || 0.16;
ctx.imageSmoothingEnabled = false;
ctx.drawImage(shadowMaskCanvas, 0, 0, cw, ch);
ctx.restore();
}
function render(time = performance.now()) {
const phase = getPhase();
renderPhase = phase;
updateCameraFollowSelected();
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.clearRect(0, 0, cw, ch);
ctx.fillStyle = phase.sky || '#86d5ff';
ctx.fillRect(0, 0, cw, ch);
ctx.save();
ctx.translate(view.x, view.y);
ctx.scale(view.zoom, view.zoom);
ctx.imageSmoothingEnabled = false;
lastRenderedSpriteInfo.clear();
const visibleItems = getDrawableItems(time, getViewportWorldRect(VIEW_CULL_MARGIN));
const activeLights = collectLightSourcesForItems(visibleItems, time, phase);
const lightSources = [...activeLights];
drawTerrainCache(terrainCache);
drawTerrainProjectedShadows(phase);
drawObjectsFromItems(visibleItems, time, activeLights, phase, true);
drawHoverTile();
if (visualSettings().enableParticles) {
spawnConfiguredParticleEmitters(visibleItems, time);
drawNatureDriftParticles(time);
drawLandStepParticles(time);
drawBubbleParticles(time);
drawSpawnEffects(time);
drawConfettiParticles(time);
}
const nightLightsActive = areNightLightsActive(phase);
if (nightLightsActive) {
drawWaterLightReflections(lightSources, time, phase);
}
ctx.restore();
updateSelectionBubble(time);
if ((phase.tintAlpha || 0) > 0.001) {
ctx.fillStyle = phase.tint;
ctx.fillRect(0, 0, cw, ch);
}
if (phase.darkness > 0) {
ctx.fillStyle = phase.darkOverlay || `rgba(12, 19, 45, ${phase.darkness})`;
ctx.fillRect(0, 0, cw, ch);
}
if (nightLightsActive && phase.darkness > 0) drawLightSources(lightSources, phase.darkness, time);
if (nightLightsActive) drawNightCursorGlow(time, phase);
updatePlaceHereButton();
}
function drawTerrainProjectedShadows(phase) {
const shadow = phase?.shadow || { alpha: .16, length: 1, skewX: 0, scaleY: 0.28 };
if ((shadow.alpha || 0) <= 0.001) return;
const c = activeShadowCtx || ctx;
const rect = getViewportWorldRect(2);
c.save();
c.globalAlpha = activeShadowCtx ? 1 : shadow.alpha;
c.fillStyle = '#1b1f26';
c.imageSmoothingEnabled = false;
for (let ty = Math.max(0, Math.floor(rect.minY) - 2); ty <= Math.min(WORLD_H - 1, Math.ceil(rect.maxY) + 2); ty++) {
for (let tx = Math.max(0, Math.floor(rect.minX) - 2); tx <= Math.min(WORLD_W - 1, Math.ceil(rect.maxX) + 2); tx++) {
const tile = world.get(tx, ty);
if (!tile || tile.type !== 'highland') continue;
const lift = getTileLift(tile);
if (lift <= 0) continue;
const front = world.get(tx, ty + 1);
const right = world.get(tx + 1, ty);
const left = world.get(tx - 1, ty);
const needsShadow = !front || front.type === 'water' || getTileLift(front) < lift || !right || getTileLift(right) < lift || !left || getTileLift(left) < lift;
if (!needsShadow) continue;
const pos = tileToWorld(tx, ty);
const cx = pos.x;
const cy = pos.y + TILE_H * 0.72;
c.save();
c.translate(cx, cy);
c.transform(1 + shadow.length * 0.08, 0, shadow.skewX, shadow.scaleY, 0, 0);
c.beginPath();
c.moveTo(0, -TILE_H * 0.42);
c.lineTo(TILE_W * 0.48, 0);
c.lineTo(0, TILE_H * 0.42);
c.lineTo(-TILE_W * 0.48, 0);
c.closePath();
c.fill();
c.restore();
}
}
c.restore();
}
function drawHoverTile() {
if (!hoverTile) return;
const { x, y } = tileToWorld(hoverTile.x, hoverTile.y);
const hoverTerrain = world.get(hoverTile.x, hoverTile.y);
const lift = getTileLift(hoverTerrain);
ctx.beginPath();
ctx.moveTo(x, y - lift);
ctx.lineTo(x + TILE_W / 2, y + TILE_H / 2 - lift);
ctx.lineTo(x, y + TILE_H - lift);
ctx.lineTo(x - TILE_W / 2, y + TILE_H / 2 - lift);
ctx.closePath();
ctx.strokeStyle = 'rgba(255, 255, 255, .7)';
ctx.lineWidth = 1 / view.zoom;
ctx.stroke();
}
function drawNightCursorGlow(time, phase) {
if (!areNightLightsActive(phase) || !cursorScreen.active) return;
const cursorPoint = getCursorLightScreenPoint(phase);
if (!cursorPoint) return;
const sx = cursorPoint.x;
const sy = cursorPoint.y;
const pulse = 0.9 + Math.sin(time / 420) * 0.1;
const radius = Math.max(44, CURSOR_LIGHT_WORLD_RADIUS * view.zoom) * pulse;
ctx.save();
ctx.globalCompositeOperation = 'screen';
const glow = ctx.createRadialGradient(sx, sy, 0, sx, sy, radius);
glow.addColorStop(0, 'rgba(223, 246, 255, .0375)');
glow.addColorStop(0.2, 'rgba(190, 236, 255, .02125)');
glow.addColorStop(0.62, 'rgba(150, 220, 255, .008)');
glow.addColorStop(1, 'rgba(150, 220, 255, 0)');
ctx.fillStyle = glow;
ctx.beginPath();
ctx.arc(sx, sy, radius, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
function drawSpawnEffects(time) {
if (!spawnEffects.length) return;
spawnEffects = spawnEffects.filter((effect) => time - effect.started < 650);
for (const effect of spawnEffects) {
const t = clamp((time - effect.started) / 650, 0, 1);
const pos = tileToWorld(effect.x, effect.y);
pos.y -= getLiftAtCoord(effect.x, effect.y);
const radius = 6 + t * 24;
ctx.save();
ctx.globalAlpha = 1 - t;
ctx.lineWidth = Math.max(1, 3 / view.zoom);
ctx.strokeStyle = '#ff79ad';
ctx.beginPath();
ctx.arc(pos.x, pos.y + TILE_H * .35, radius, 0, Math.PI * 2);
ctx.stroke();
ctx.fillStyle = '#fff2a8';
for (let i = 0; i < 5; i++) {
const a = i * Math.PI * .4 + t * 2.4;
ctx.fillRect(pos.x + Math.cos(a) * radius - 2, pos.y + TILE_H * .35 + Math.sin(a) * radius - 2, 4, 4);
}
ctx.restore();
}
}
function drawObjectsFromItems(items, time, activeLights, phase, drawShadows = true) {
for (const item of items) {
if (item.asset.category === 'dynamic' && item.asset.subtype === 'fish') {
drawSpriteItem(item, time, activeLights, true, phase, drawShadows);
}
}
for (const item of items) {
if (!(item.asset.category === 'dynamic' && item.asset.subtype === 'fish')) {
drawSpriteItem(item, time, activeLights, false, phase, drawShadows);
}
}
}
function getHighlandWallFaceEntries(tile, worldData) {
if (!tile || tile.type !== 'highland') return [];
const lift = getTileLift(tile);
const out = [];
const add = (side, nx, ny) => {
const neighbor = worldData.get(nx, ny);
if (neighbor && getTileLift(neighbor) >= lift) return;
const p = tileToWorld(nx, ny);
const neighborSurfaceDepth = neighbor ? p.y - getTileLift(neighbor) : tileToWorld(tile.x, tile.y).y + TILE_H / 2;
out.push({ side, depth: neighborSurfaceDepth - 0.06 });
};
add('left', tile.x, tile.y + 1);
add('right', tile.x + 1, tile.y);
return out;
}
function getSpriteDrawInfo(item, time, includeSelectBounce = true) {
const asset = item.asset;
const pos = tileToWorld(item.x, item.y);
const applyTileLift = !(asset.category === 'dynamic' && asset.subtype === 'bird');
if (applyTileLift) pos.y -= getLiftAtCoord(item.x, item.y);
let bob = 0;
let stretchX = 1;
let stretchY = 1;
let alpha = 1;
let side = 'right';
let angle = 0;
if (asset.category === 'static' && (asset.subtype === 'water' || asset.subtype === 'ship')) {
bob += Math.sin(time / 900 + item.x * .7) * 1.6;
if (asset.subtype === 'ship') {
const drift = Math.sin(time / 2400 + item.x * 0.37 + item.y * 0.19) * 5.2;
const glide = Math.cos(time / 3200 + item.x * 0.21) * 2.6;
pos.x += drift;
pos.y += glide * 0.22;
angle += Math.sin(time / 1400 + item.x * 0.2) * 0.035;
}
}
if (asset.category === 'dynamic') {
const runtime = item.source || {};
const seed = Number.isFinite(runtime.seed) ? runtime.seed : 0;
const isPreview = Boolean(item.preview || runtime.preview);
const moveFacing = Math.abs(runtime.lastMoveX || 0) > 0.003 ? Math.sign(runtime.lastMoveX) : (runtime.facing || runtime.vx || (asset.meta?.frontSide === 'left' ? -1 : 1));
side = isPreview ? (asset.meta?.frontSide === 'left' ? 'left' : 'right') : (moveFacing < 0 ? 'left' : 'right');
if (asset.subtype === 'human' || asset.subtype === 'animal') {
const idle = isPreview || time < (runtime.idleUntil || 0);
if (!idle) {
const jumpPhase = time / 78 + seed * 0.9;
const hop = Math.pow(Math.abs(Math.sin(jumpPhase)), 1.15);
const liftNow = getLiftAtCoord(item.x, item.y);
const liftTarget = getLiftAtCoord(runtime.targetX, runtime.targetY);
const terrainBoost = Math.abs(liftTarget - liftNow) / 12;
bob = -hop * (2.2 + terrainBoost * 1.8 + (liftNow > 0 ? 0.6 : 0));
const cycle = Math.floor(jumpPhase / (Math.PI * 0.9));
const rand = pseudoNoise(cycle + seed * 13.17);
angle += (rand - 0.5) * 0.24 * hop;
const land = Math.pow(Math.max(0, Math.cos(jumpPhase * 2)), 10) * Math.max(0, 1 - hop);
stretchX += land * 0.18;
stretchY -= land * 0.12;
}
}
if (asset.subtype === 'bird') bob = -10 - Math.sin(time / 250 + seed) * 4.5;
if (asset.subtype === 'fish') { alpha = .42; bob = 4 + Math.sin(time / 380 + seed) * 1.7; }
}
if (includeSelectBounce && selectedObject?.bounce !== false && selectedObject?.id === item.source?.id) {
const selectionElapsed = time - (selectedObject.selectedAt || 0);
if (selectionElapsed < 920) {
const jumpT = clamp(selectionElapsed / 520, 0, 1);
const bounce = Math.sin(jumpT * Math.PI);
bob += -bounce * (asset.category === 'dynamic' ? 10 : 8.5);
const tiltSeed = parseInt(fnv1a(`${item.source?.id || asset.id}:select`).slice(0, 6), 16) || 1;
const tiltRand = pseudoNoise(tiltSeed * 0.013) - 0.5;
angle += tiltRand * 0.34 * bounce;
const anticipation = Math.exp(-Math.pow((selectionElapsed - 45) / 70, 2));
const landing = Math.exp(-Math.pow((selectionElapsed - 540) / 105, 2));
const rebound = Math.exp(-Math.pow((selectionElapsed - 720) / 110, 2));
stretchX += anticipation * 0.16 + landing * 0.34 - rebound * 0.08;
stretchY -= anticipation * 0.11 + landing * 0.24;
stretchY += rebound * 0.07;
}
}
if (item.preview) {
const previewElapsed = time - (item.source?.selectedAt || item.source?.createdAt || time);
if (previewElapsed < 720) {
const hop = Math.sin(clamp(previewElapsed / 720, 0, 1) * Math.PI);
const settle = Math.exp(-Math.pow((previewElapsed - 470) / 120, 2)); bob += -hop * 12; stretchX += settle * 0.28; stretchY -= settle * 0.2;
}
}
const sprite = getSpriteCanvas(asset, side);
const drawX = pos.x - sprite.width / 2;
const anchorY = asset.category === 'static' ? 0 : TILE_H / 2;
const drawY = pos.y + anchorY - sprite.height + bob;
return { asset, pos, sprite, drawX, drawY, alpha, angle, side, bob, anchorY, stretchX, stretchY };
}
function drawSpriteItem(item, time, lightSources, underwater, phase, drawShadow = true) {
const info = getSpriteDrawInfo(item, time, true);
const localLights = getLocalSpriteLights(info, phase, lightSources, item.source?.id || info.asset?.id);
const litSprite = localLights.length ? getSpriteCanvas(info.asset, info.side, localLights) : info.sprite;
info.sprite = litSprite;
const { asset, pos, sprite, drawX, drawY, alpha, angle, stretchX = 1, stretchY = 1 } = info;
lastRenderedSpriteInfo.set(item.source?.id || asset.id, { ...info, time });
if (visualSettings().enableParticles && asset.category === 'static' && asset.subtype === 'ship') drawShipRipples(pos, time, item.source?.id || asset.id, asset);
if (drawShadow && !(asset.category === 'dynamic' && asset.subtype === 'fish')) drawSpriteShadow(info, phase);
ctx.save();
ctx.globalAlpha = item.failed || item.source?.failed ? alpha * 0.42 : alpha;
const pivotX = Math.round(drawX + sprite.width / 2);
const pivotY = Math.round(drawY + sprite.height * 0.8);
if (angle || Math.abs(stretchX - 1) > 0.001 || Math.abs(stretchY - 1) > 0.001) {
ctx.translate(pivotX, pivotY);
if (angle) ctx.rotate(angle);
if (Math.abs(stretchX - 1) > 0.001 || Math.abs(stretchY - 1) > 0.001) ctx.scale(stretchX, stretchY);
ctx.drawImage(sprite, Math.round(-sprite.width / 2), Math.round(-sprite.height * 0.8));
} else {
ctx.drawImage(sprite, Math.round(drawX), Math.round(drawY));
}
if (underwater) {
ctx.fillStyle = 'rgba(103, 181, 217, .18)';
if (angle || Math.abs(stretchX - 1) > 0.001 || Math.abs(stretchY - 1) > 0.001) ctx.fillRect(Math.round(-sprite.width / 2), Math.round(-sprite.height * 0.8), sprite.width, sprite.height);
else ctx.fillRect(Math.round(drawX), Math.round(drawY), sprite.width, sprite.height);
}
ctx.restore();
if (item.failed || item.source?.failed) {
ctx.save();
ctx.strokeStyle = 'rgba(219, 68, 68, .9)';
ctx.lineWidth = 2;
ctx.setLineDash([5, 4]);
ctx.strokeRect(Math.round(drawX) - 3, Math.round(drawY) - 3, sprite.width + 6, sprite.height + 6);
ctx.restore();
}
// External sprite lighting is now handled inside shadeAssetPixelColor() via getLocalSpriteLights().
// Keeping the old overlay pass here would double-apply non-cursor lights and waste a per-pixel scan.
}
function spriteLocalPoint(info, worldX, worldY) {
if (!info.angle) return { x: worldX - info.drawX, y: worldY - info.drawY };
const pivotX = info.drawX + info.sprite.width / 2;
const pivotY = info.drawY + info.sprite.height * 0.8;
const dx = worldX - pivotX;
const dy = worldY - pivotY;
const cos = Math.cos(-info.angle);
const sin = Math.sin(-info.angle);
return {
x: dx * cos - dy * sin + info.sprite.width / 2,
y: dx * sin + dy * cos + info.sprite.height * 0.8
};
}
function getCursorLightScreenPoint(phase) {
if (cursorScreen.active) return { x: cursorScreen.x, y: cursorScreen.y };
return null;
}
function getLocalSpriteLights(info, phase, externalSources = [], selfOwnerId = null) {
if (visualSettings().enableLights === false || !info?.asset) return [];
const asset = info.asset;
const scale = asset.category === 'static' ? STATIC_SCALE : DYNAMIC_SCALE;
const w = assetWidth(asset);
const h = assetHeight(asset);
const lights = areNightLightsActive(phase)
? getAssetLightPointsForSide(asset, info.side).map((light) => ({ ...light, ownerId: selfOwnerId || light.ownerId || asset.id }))
: [];
const addWorldLight = (source, options = {}) => {
if (!source || (source.ownerId && selfOwnerId && source.ownerId === selfOwnerId)) return;
const local = spriteLocalPoint(info, source.x, source.y);
const lx = local.x / scale - 0.5;
const ly = local.y / scale - 0.5;
const radiusCells = options.cursor
? Math.max(4.0, ((Number(source.radius) || 18) / Math.max(1, scale)) * 3.1)
: Math.max(2.2, ((Number(source.radius) || 18) / Math.max(1, scale)) * 2.35);
const nearestX = clamp(lx, 0, Math.max(0, w - 1));
const nearestY = clamp(ly, 0, Math.max(0, h - 1));
const distToBounds = Math.hypot(lx - nearestX, ly - nearestY);
const margin = radiusCells * 1.15;
const proximity = Math.pow(clamp(1 - distToBounds / Math.max(1, margin), 0, 1), options.cursor ? 0.92 : 1.35);
if (proximity <= 0.01) return;
lights.push({
x: lx,
y: ly,
c: options.cursor ? CURSOR_LIGHT_COLOR : (source.color || source.c || '#ffd86a'),
cursor: Boolean(options.cursor),
externalLight: !options.cursor,
ownerId: source.ownerId || null,
intensity: options.cursor
? clamp((Number(source.intensity ?? 1) || 1) * (0.95 + proximity * 1.45), 0.52, 1.23)
: clamp((Number(source.intensity ?? 1) || 1) * (0.44 + proximity * 0.78), 0.22, 1.45),
radiusCells
});
};
if (areNightLightsActive(phase) && Array.isArray(externalSources)) {
for (const source of externalSources) addWorldLight(source);
}
const cursorPoint = getCursorLightScreenPoint(phase);
if (cursorPoint) {
const worldX = (cursorPoint.x - view.x) / view.zoom;
const worldY = (cursorPoint.y - view.y) / view.zoom;
addWorldLight({ x: worldX, y: worldY, color: CURSOR_LIGHT_COLOR, radius: Math.max(44, CURSOR_LIGHT_WORLD_RADIUS * view.zoom) / Math.max(0.001, view.zoom), intensity: CURSOR_LIGHT_INTENSITY }, { cursor: true });
}
return lights;
}
function hasCursorInspectionLight(lights) {
return Array.isArray(lights) && lights.some((light) => light?.cursor);
}
function drawWaterLightReflections(lightSources, time, phase) {
if (!lightSources?.length || !areNightLightsActive(phase)) return;
const rect = getViewportWorldRect(48);
const t = time * 0.001;
ctx.save();
ctx.imageSmoothingEnabled = false;
for (const source of lightSources.slice(0, 80)) {
const rgb = parseHex(source.color || '#ffd86a');
if (!rgb) continue;
const tilePos = worldToTileFloat(source.x, source.y + 4);
const reachTiles = clamp(Math.ceil((source.radius || 18) / 12) + 2, 2, 7);
const baseX = Math.round(tilePos.x);
const baseY = Math.round(tilePos.y);
for (let ty = baseY - reachTiles; ty <= baseY + reachTiles; ty++) {
if (ty < 0 || ty >= WORLD_H) continue;
for (let tx = baseX - reachTiles; tx <= baseX + reachTiles; tx++) {
if (tx < 0 || tx >= WORLD_W) continue;
const tile = world.get(tx, ty);
if (!tile || tile.type !== 'water') continue;
const pos = tileToWorld(tx, ty);
const px = pos.x;
const py = pos.y + TILE_H * 0.45;
if (px + 24 < rect.left || px - 24 > rect.right || py + 18 < rect.top || py - 18 > rect.bottom) continue;
const dx = (px - source.x) / Math.max(1, source.radius || 18);
const dy = (py - source.y) / Math.max(1, (source.radius || 18) * 0.75);
const dist = Math.hypot(dx, dy);
const strength = 1 - clamp(dist / 1.85, 0, 1);
if (strength <= 0.02) continue;
const seed = tx * 17.13 + ty * 31.71 + (source.flickerSeed || 0) * 0.003;
const shimmer = 0.72 + pseudoNoise(Math.floor(t * 7) + seed) * 0.38;
const alpha = clamp((0.05 + strength * 0.18) * shimmer * (phase.darkness || 1), 0.02, 0.24);
ctx.fillStyle = `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
const rows = 1 + Math.floor(strength * 3);
for (let r = 0; r < rows; r++) {
const wobble = Math.round((pseudoNoise(seed + r * 5.9 + Math.floor(t * 4)) - 0.5) * 8);
const len = Math.max(2, Math.round((5 + strength * 10) * (r === 0 ? 1 : 0.65)));
const yy = Math.round(py + r * 3 + pseudoNoise(seed + r * 2.7) * 2);
const xx = Math.round(px + wobble - len / 2);
ctx.fillRect(xx, yy, len, 1);
if (strength > 0.55 && r === 0) ctx.fillRect(xx + Math.floor(len / 2), yy + 1, 1, 1);
}
}
}
}
ctx.restore();
}
function spawnGroundStepParticles(item, time, tile) {
if (Math.random() > 0.55) return;
const baseColor = getTerrainSurfaceColorAt(item.x, item.y);
landStepParticles.push({
x: item.x + (Math.random() - 0.5) * 0.16,
y: item.y + 0.16 + (Math.random() - 0.5) * 0.05,
vx: (Math.random() - 0.5) * 0.04 - (item.vx || 0) * 0.01,
vy: -0.014 - Math.random() * 0.018,
started: time,
life: 240 + Math.random() * 140,
color: makeStepParticleColor(baseColor, tile?.type || 'grass'),
tileType: tile?.type || 'grass'
});
}
function drawLandStepParticles(time) {
if (!landStepParticles.length) return;
ctx.save();
for (const particle of landStepParticles) {
const age = (time - particle.started) / particle.life;
if (age < 0 || age > 1) continue;
const px = particle.x + particle.vx * age * 18;
const py = particle.y + particle.vy * age * 18;
const pos = tileToWorld(px, py);
pos.y -= getLiftAtCoord(px, py);
ctx.globalAlpha = (1 - age) * 0.7;
ctx.fillStyle = particle.color;
const size = age < 0.28 ? 2 : 1;
ctx.fillRect(Math.round(pos.x), Math.round(pos.y + TILE_H * 0.22 - age * 3), size, size);
}
ctx.restore();
}
function spawnConfiguredParticleEmitters(items, time) {
if (view.zoom < PHASE5_GUARDRAILS.particleMinZoom) return;
if (natureDriftParticles.length >= PHASE5_GUARDRAILS.maxParticles) return;
for (const item of items) {
const legacyEmitters = item.asset.meta?.particlePixels || [];
if (!legacyEmitters.length) continue;
const info = getSpriteDrawInfo(item, time, false);
const scale = item.asset.category === 'static' ? STATIC_SCALE : DYNAMIC_SCALE;
for (const emitter of legacyEmitters) {
if (natureDriftParticles.length >= PHASE5_GUARDRAILS.maxParticles || Math.random() > 0.012) continue;
const ex = item.asset.category === 'dynamic' && info.side === 'left' ? assetWidth(item.asset) - 1 - emitter.x : emitter.x;
const wx = info.drawX + (ex + 0.5) * scale;
const wy = info.drawY + (emitter.y + 0.5) * scale;
const velocity = particleVelocityForDirection(emitter.dir || 'up');
natureDriftParticles.push({
x: wx + (Math.random() - 0.5) * 4,
y: wy + (Math.random() - 0.5) * 4,
vx: velocity.vx + (Math.random() - 0.5) * 4,
vy: velocity.vy + (Math.random() - 0.5) * 4,
gravity: 4,
started: time,
life: 1500 + Math.random() * 1600,
color: colorToHex(emitter.c || selectedColorCode),
sway: Math.random() * Math.PI * 2
});
}
}
}
function particleVelocityForDirection(dir) {
const speed = 13;
if (dir === 'down') return { vx: 0, vy: speed };
if (dir === 'left') return { vx: -speed, vy: 0 };
if (dir === 'right') return { vx: speed, vy: 0 };
return { vx: 0, vy: -speed };
}
function drawNatureDriftParticles(time) {
if (!natureDriftParticles.length || view.zoom < PHASE5_GUARDRAILS.particleMinZoom) return;
ctx.save();
for (const particle of natureDriftParticles) {
const age = (time - particle.started) / particle.life;
if (age < 0 || age > 1) continue;
const seconds = (time - particle.started) / 1000;
const sway = Math.sin(age * 5.5 + particle.sway) * 3.5;
const x = particle.x + particle.vx * seconds + sway;
const y = particle.y + particle.vy * seconds + age * (particle.gravity ?? 5);
ctx.globalAlpha = (1 - age) * 0.72;
ctx.fillStyle = particle.color;
ctx.fillRect(Math.round(x), Math.round(y), 1, 1);
}
ctx.restore();
}
function drawShipRipples(pos, time, seedValue = '', asset = null) {
const seed = fnv1a(String(seedValue)).slice(0, 6);
const numericSeed = parseInt(seed, 16) || 1;
const cycleMs = 2300;
const cycle = Math.floor((time + numericSeed) / cycleMs);
if (pseudoNoise(cycle + numericSeed * 0.013) < 0.38) return;
const t = ((time + numericSeed) % cycleMs) / cycleMs;
const shipScale = clamp((assetMaxSize(asset || {}) || 16) / 16, 1, 4);
const waveScale = 0.85 + shipScale * 0.55;
const alpha = Math.max(0, 0.34 * (1 - t));
const rx = (5 + t * 22) * waveScale;
const ry = (2 + t * 8) * (0.85 + shipScale * 0.34);
ctx.save();
ctx.globalAlpha = alpha;
ctx.strokeStyle = '#e8fbff';
ctx.lineWidth = Math.max(1, (1.25 + shipScale * 0.18) / view.zoom);
const rings = shipScale >= 2.35 ? 2 : 1;
for (let i = 0; i < rings; i++) {
const grow = i * (7 + shipScale * 3);
const fade = i ? 0.58 : 1;
ctx.globalAlpha = alpha * fade;
ctx.beginPath();
ctx.ellipse(Math.round(pos.x), Math.round(pos.y + TILE_H * .15), rx + grow, ry + grow * 0.28, 0, 0, Math.PI * 2);
ctx.stroke();
}
ctx.restore();
}
function drawFishBubbles(x, y, time, seed) {
const cycle = Math.floor((time + seed * 37) / 1300);
if (pseudoNoise(cycle + seed) < 0.55) return;
const t = ((time + seed * 37) % 1300) / 1300;
ctx.save();
ctx.fillStyle = 'rgba(225, 252, 255, .58)';
ctx.globalAlpha = Math.max(0, 1 - t);
for (let i = 0; i < 4; i++) {
const ox = Math.round((pseudoNoise(cycle + seed + i * 4.1) - .5) * 7);
const oy = Math.round(-t * 12 - i * 3);
ctx.fillRect(Math.round(x + ox), Math.round(y + oy), 1, 1);
}
ctx.restore();
}
function drawSpriteShadow(info, phase) {
const { drawX, sprite, pos, anchorY, bob, angle = 0, stretchX = 1, stretchY = 1, asset } = info;
const shadow = phase?.shadow || { dirX: 0, length: 1, skewX: 0, scaleY: 0.28, alpha: .16 };
if ((shadow.alpha || 0) <= 0.001) return;
const c = activeShadowCtx || ctx;
const silhouette = getShadowCanvas(sprite);
const isShip = asset?.subtype === 'ship';
const contactX = drawX + sprite.width / 2;
const groundY = pos.y + anchorY + (isShip ? (bob || 0) * 0.82 : 0);
const mirrorOffset = isShip ? 0 : Math.max(0, -(bob || 0));
const shadowAngle = isShip ? angle * 0.65 : 0;
c.save();
c.globalAlpha = activeShadowCtx ? 1 : shadow.alpha;
c.translate(contactX, groundY);
if (shadowAngle) c.rotate(shadowAngle);
c.transform((1 + shadow.length * 0.08) * stretchX, 0, shadow.skewX, shadow.scaleY * Math.max(0.88, stretchY), 0, 0);
c.drawImage(silhouette, Math.round(-sprite.width / 2), Math.round(mirrorOffset));
c.restore();
if (isShip) {
const reflection = getShipReflectionCanvas(sprite);
ctx.save();
ctx.globalAlpha = 0.24;
ctx.translate(contactX, groundY + 1);
if (shadowAngle) ctx.rotate(shadowAngle);
ctx.transform(1.08 * stretchX, 0, shadow.skewX * 0.55, 0.36 * Math.max(0.92, stretchY), 0, 0);
ctx.drawImage(reflection, Math.round(-sprite.width / 2), 2);
ctx.restore();
}
}
function getShadowCanvas(sprite) {
if (shadowCanvasCache.has(sprite)) return shadowCanvasCache.get(sprite);
const canvas = document.createElement('canvas');
canvas.width = sprite.width;
canvas.height = sprite.height;
const c = canvas.getContext('2d');
c.imageSmoothingEnabled = false;
c.save();
c.translate(0, sprite.height);
c.scale(1, -1);
c.drawImage(sprite, 0, 0);
c.restore();
c.globalCompositeOperation = 'source-in';
c.fillStyle = '#1b1f26';
c.fillRect(0, 0, canvas.width, canvas.height);
shadowCanvasCache.set(sprite, canvas);
return canvas;
}
function getShipReflectionCanvas(sprite) {
if (shipReflectionCanvasCache.has(sprite)) return shipReflectionCanvasCache.get(sprite);
const canvas = document.createElement('canvas');
canvas.width = sprite.width;
canvas.height = sprite.height;
const c = canvas.getContext('2d');
c.imageSmoothingEnabled = false;
c.save();
c.translate(0, sprite.height);
c.scale(1, -1);
c.drawImage(sprite, 0, 0);
c.restore();
c.globalCompositeOperation = 'source-in';
const refl = c.createLinearGradient(0, 0, 0, canvas.height);
refl.addColorStop(0, 'rgba(174,230,255,0.46)');
refl.addColorStop(0.55, 'rgba(92,172,214,0.20)');
refl.addColorStop(1, 'rgba(54,120,170,0.02)');
c.fillStyle = refl;
c.fillRect(0, 0, canvas.width, canvas.height);
shipReflectionCanvasCache.set(sprite, canvas);
return canvas;
}
function currentVoterKey() {
return String(state.account?.id || state.authorName || els.authorName?.value || 'Local Artist').trim().toLowerCase();
}
function getObjectVoteCounts(objectId) {
state.objectVotes ||= {};
const votes = state.objectVotes[objectId] || { up: 0, down: 0, voters: {} };
votes.voters ||= {};
return votes;
}
function getAssetVoteCounts(assetId) {
state.assetVotes ||= {};
const votes = state.assetVotes[assetId] || { up: 0, down: 0, voters: {} };
votes.voters ||= {};
return votes;
}
function voteAsset(assetId, delta) {
const scrollState = activeTabName === 'library' ? captureLibraryScrollState() : null;
state.assetVotes ||= {};
const votes = state.assetVotes[assetId] || { up: 0, down: 0, voters: {} };
votes.voters ||= {};
const voter = currentVoterKey();
const previous = votes.voters[voter] || 0;
if (previous > 0) votes.up = Math.max(0, votes.up - 1);
if (previous < 0) votes.down = Math.max(0, votes.down - 1);
if (previous === delta) delete votes.voters[voter];
else {
if (delta > 0) votes.up += 1;
else votes.down += 1;
votes.voters[voter] = delta;
}
state.assetVotes[assetId] = votes;
saveState();
renderLibrary({ preserveScroll: Boolean(scrollState), scrollState });
}
function hideAsset(assetId) {
const scrollState = activeTabName === 'library' ? captureLibraryScrollState() : null;
state.hiddenAssets ||= {};
state.hiddenAssets[assetId] = true;
if (selectedAssetId === assetId) selectedAssetId = state.assets.find((a) => !state.hiddenAssets?.[a.id])?.id || null;
if (selectedObject?.assetId === assetId) selectedObject = null;
saveState();
renderLibrary({ preserveScroll: Boolean(scrollState), scrollState });
updateSelectionBubble(performance.now());
toast('Asset hidden locally.');
}
function getRemixCount(assetId) {
return state.assets.filter((asset) => asset.parentAssetId === assetId || asset.originalAssetId === assetId).length;
}
function countPixels(pixels) {
return Array.isArray(pixels) ? pixels.filter(Boolean).length : normalizePixels(pixels || [], editorSize).filter(Boolean).length;
}
function getSelectedWorldPosition() {
if (!selectedObject) return null;
const asset = findAsset(selectedObject.assetId);
if (!asset) return null;
if (selectedObject.kind === 'static') {
const placed = state.placed.find((p) => p.id === selectedObject.id);
if (!placed) return null;
const pos = tileToWorld(placed.x + .5, placed.y + .5);
pos.y -= getLiftAtCoord(placed.x + .5, placed.y + .5);
return { pos, asset, objectId: placed.id };
}
const runtime = dynamicRuntime.find((r) => r.id === selectedObject.id);
const summon = state.dynamicSummons.find((s) => s.id === selectedObject.id);
const source = runtime || (summon ? { x: summon.homeX + .5, y: summon.homeY + .5 } : null);
if (!source) return null;
const pos = tileToWorld(source.x, source.y);
if (asset.subtype !== 'bird') pos.y -= getLiftAtCoord(source.x, source.y);
return { pos, asset, objectId: selectedObject.id };
}
function findRemixSourceObject(asset) {
const ids = [asset?.parentAssetId, asset?.originalAssetId].filter(Boolean);
for (const assetId of ids) {
const placed = (state.placed || []).find((p) => p.assetId === assetId && !state.hiddenObjects?.[p.id]);
if (placed) return { kind: 'static', object: placed, asset: findAsset(assetId), x: placed.x + .5, y: placed.y + .5 };
const summon = (state.dynamicSummons || []).find((p) => p.assetId === assetId && !state.hiddenObjects?.[p.id]);
if (summon) return { kind: 'dynamic', object: summon, asset: findAsset(assetId), x: summon.homeX + .5, y: summon.homeY + .5 };
}
return null;
}
function centerViewOnWorldCoord(x, y, zoom = null) {
const pos = tileToWorld(x, y);
pos.y -= getLiftAtCoord(x, y);
if (zoom != null) view.zoom = clamp(zoom, MIN_ZOOM, MAX_ZOOM);
view.x = cw / 2 - pos.x * view.zoom;
view.y = ch / 2 - (pos.y - 32) * view.zoom;
render(performance.now());
}
function teleportToRemixSource() {
if (!selectedObject) return;
const asset = findAsset(selectedObject.assetId);
const source = findRemixSourceObject(asset);
if (!source || !source.object || !source.asset) {
toast('Remix source is not placed on the island right now.');
return;
}
selectWorldObject(source.kind, source.object.id, source.asset.id, performance.now());
centerViewOnWorldCoord(source.x, source.y, Math.max(view.zoom, 1.05));
toast(`Teleported to ${source.asset.name || 'remix source'}.`);
}
function toggleBubbleMenu() {
if (!els.bubbleMenuActions) return;
els.bubbleMenuActions.hidden = !els.bubbleMenuActions.hidden;
}
function getSelectedDrawableItem(time = performance.now()) {
if (!selectedObject) return null;
const items = getDrawableItems(time, getViewportWorldRect(512));
return items.find((item) => item.source?.id === selectedObject.id && item.asset?.id === selectedObject.assetId) || null;
}
function getSelectedBubbleAnchor(time = performance.now()) {
if (!selectedObject) return null;
const item = getSelectedDrawableItem(time);
if (item) {
const info = getSpriteDrawInfo(item, time, false);
const topPad = Math.max(6, Math.min(14, info.sprite.height * 0.1));
const baseY = info.pos.y + info.anchorY - info.sprite.height;
return { x: info.drawX + info.sprite.width / 2, y: baseY - topPad, asset: item.asset, objectId: item.source?.id || selectedObject.id };
}
const cached = lastRenderedSpriteInfo.get(selectedObject.id);
if (!cached) return null;
const topPad = Math.max(6, Math.min(14, cached.sprite.height * 0.1));
const baseY = cached.pos && Number.isFinite(cached.anchorY) ? cached.pos.y + cached.anchorY - cached.sprite.height : cached.drawY;
return { x: cached.drawX + cached.sprite.width / 2, y: baseY - topPad, asset: cached.asset, objectId: selectedObject.id };
}
function updateSelectionBubble(time) {
if (!els.selectionBubble) return;
const selected = getSelectedWorldPosition();
if (!selected) {
els.selectionBubble.hidden = true;
if (els.bubbleMenuActions) els.bubbleMenuActions.hidden = true;
return;
}
const anchor = getSelectedBubbleAnchor(time) || { x: selected.pos.x, y: selected.pos.y - Math.max(48, assetMaxSize(selected.asset) * 2), asset: selected.asset, objectId: selected.objectId };
const { asset, objectId } = anchor;
const rawSx = anchor.x * view.zoom + view.x;
const rawSy = anchor.y * view.zoom + view.y;
const fixedFollowBubble = false;
const sx = rawSx;
const sy = rawSy;
if (sx < -120 || sy < -160 || sx > cw + 120 || sy > ch + 120) {
els.selectionBubble.hidden = true;
if (els.bubbleMenuActions) els.bubbleMenuActions.hidden = true;
return;
}
els.bubbleName.textContent = asset.name || 'Untitled';
els.bubbleAuthor.textContent = `by ${displayAssetAuthor(asset)}`;
const parent = asset.parentAssetId ? findAsset(asset.parentAssetId) : null;
const remixSource = findRemixSourceObject(asset);
if (els.bubbleRemixFrom) {
els.bubbleRemixFrom.hidden = !parent;
els.bubbleRemixFrom.textContent = parent ? `Remix of: ${parent.name || 'Untitled'}` : '';
}
if (els.bubbleTeleport) {
els.bubbleTeleport.hidden = !remixSource;
els.bubbleTeleport.textContent = remixSource?.asset ? `Teleport to ${remixSource.asset.name || 'source'}` : 'Teleport to source';
}
if (els.bubbleRemixCount) els.bubbleRemixCount.textContent = `Remixed: ${getRemixCount(asset.id)}`;
const votes = getObjectVoteCounts(objectId);
const voter = currentVoterKey();
const previous = votes.voters?.[voter] || 0;
els.voteScore.textContent = `${votes.up - votes.down}`;
els.voteUp.classList.toggle('activeVote', previous > 0);
els.voteDown.classList.toggle('activeVote', previous < 0);
els.voteUp.classList.toggle('mutedVote', previous < 0);
els.voteDown.classList.toggle('mutedVote', previous > 0);
if (els.bubbleHide) els.bubbleHide.hidden = previous >= 0;
if (els.bubbleEdit) {
els.bubbleEdit.hidden = !isCurrentUserAsset(asset);
}
if (els.bubbleReport) {
const reported = hasReportForObject(objectId);
els.bubbleReport.disabled = reported;
els.bubbleReport.textContent = reported ? 'Reported' : 'Report';
}
els.selectionBubble.hidden = false;
els.selectionBubble.classList.remove('belowSprite');
const rect = els.selectionBubble.getBoundingClientRect();
const halfW = Math.max(70, (rect.width || 180) / 2);
const height = Math.max(64, rect.height || 120);
const bubbleX = clamp(sx, halfW + 8, Math.max(halfW + 8, cw - halfW - 8));
const aboveY = sy;
const belowY = fixedFollowBubble ? sy : (selected.pos.y * view.zoom + view.y) + Math.max(36, assetMaxSize(asset) * view.zoom * 0.5);
const useBelow = !fixedFollowBubble && aboveY - height < 8;
const bubbleY = fixedFollowBubble
? clamp(sy, height + 8, Math.max(height + 8, ch - 8))
: useBelow
? clamp(belowY, 8, Math.max(8, ch - height - 8))
: clamp(aboveY, height + 8, Math.max(height + 8, ch - 8));
els.selectionBubble.classList.toggle('belowSprite', useBelow);
els.selectionBubble.style.transform = useBelow ? 'translate(-50%, 0)' : 'translate(-50%, -100%)';
els.selectionBubble.style.setProperty('--bubble-left', `${Math.round(bubbleX)}px`);
els.selectionBubble.style.setProperty('--bubble-top', `${Math.round(bubbleY)}px`);
}
function voteSelected(delta) {
if (!selectedObject) return;
state.objectVotes ||= {};
const key = selectedObject.id;
const votes = state.objectVotes[key] || { up: 0, down: 0, voters: {} };
votes.voters ||= {};
const voter = currentVoterKey();
const previous = votes.voters[voter] || 0;
if (previous > 0) votes.up = Math.max(0, votes.up - 1);
if (previous < 0) votes.down = Math.max(0, votes.down - 1);
if (previous === delta) {
delete votes.voters[voter];
} else {
if (delta > 0) {
votes.up += 1;
spawnConfettiAtSelection(performance.now());
} else {
votes.down += 1;
}
votes.voters[voter] = delta;
}
state.objectVotes[key] = votes;
saveState();
updateSelectionBubble(performance.now());
renderLibrary();
updateRotationStats();
// Server moderation TODO: when online, hide or delete objects from the server if downvotes exceed a threshold
// such as down >= 5 and down - up >= 3. Do not implement server deletion in this local prototype.
}
function remixSelected() {
if (!selectedObject) return;
const asset = findAsset(selectedObject.assetId);
if (asset) remixEdit(asset);
}
function editSelectedOriginal() {
if (!selectedObject) return;
const asset = findAsset(selectedObject.assetId);
if (!asset) return;
const mine = isCurrentUserAsset(asset);
if (!mine) {
toast('Only your own assets can be edited directly. Use Remix instead.');
return;
}
editOriginalAsset(asset);
}
function hideSelected() {
if (!selectedObject) return;
state.hiddenObjects ||= {};
state.hiddenObjects[selectedObject.id] = true;
const assetId = selectedObject.assetId;
selectedObject = null;
saveState();
updateSelectionBubble(performance.now());
renderLibrary();
toast('Hidden locally.');
// Server moderation TODO: when synced, repeated low-rating + hide actions can flag this object for review.
}
function hasReportForObject(objectId) {
const reporter = currentVoterKey();
return Array.isArray(state.moderationReports)
&& state.moderationReports.some((report) => report.objectId === objectId && report.reporter === reporter);
}
function openReportDialog() {
if (!selectedObject) return;
if (hasReportForObject(selectedObject.id)) {
toast('Already reported locally.');
updateSelectionBubble(performance.now());
return;
}
const asset = findAsset(selectedObject.assetId);
pendingReport = { ...selectedObject };
if (els.reportObjectName) els.reportObjectName.textContent = asset ? asset.name : 'selected object';
if (els.reportReason) els.reportReason.value = 'inappropriate';
if (els.reportDialog) {
els.reportDialog.hidden = false;
els.reportReason?.focus?.();
} else {
submitReport('local-report');
}
}
function closeReportDialog() {
pendingReport = null;
if (els.reportDialog) els.reportDialog.hidden = true;
}
let pendingConfirmResolve = null;
function confirmWebsiteDialog({ title = 'Confirm', message = 'Are you sure?', okText = 'OK', danger = false } = {}) {
if (!els.confirmDialog || !els.confirmOk || !els.confirmCancel) return Promise.resolve(false);
if (els.confirmTitle) els.confirmTitle.textContent = title;
if (els.confirmMessage) els.confirmMessage.textContent = message;
els.confirmOk.textContent = okText;
els.confirmOk.classList.toggle('danger', danger);
els.confirmDialog.hidden = false;
els.confirmOk.focus?.({ preventScroll: true });
return new Promise((resolve) => {
pendingConfirmResolve = resolve;
});
}
function resolveConfirmDialog(confirmed) {
if (els.confirmDialog) els.confirmDialog.hidden = true;
const resolve = pendingConfirmResolve;
pendingConfirmResolve = null;
resolve?.(Boolean(confirmed));
}
function submitReportDialog() {
const reason = els.reportReason?.value || 'local-report';
submitReport(reason);
}
function submitReport(reason = 'local-report') {
const target = pendingReport || selectedObject;
if (!target) return;
const asset = findAsset(target.assetId);
state.moderationReports = normalizeModerationReports(state.moderationReports || []);
state.settings = { ...defaultVisualSettings(), ...(state.settings || {}) };
if (hasReportForObject(target.id)) {
closeReportDialog();
toast('Already reported locally.');
updateSelectionBubble(performance.now());
return;
}
const report = {
id: uid(),
objectId: target.id,
assetId: target.assetId,
objectKind: target.kind,
assetName: asset?.name || 'Untitled',
assetAuthor: asset?.author || 'Local Artist',
reporter: currentVoterKey(),
reason,
createdAt: Date.now()
};
state.moderationReports.push(report);
state.moderationReports = state.moderationReports.slice(-PHASE5_GUARDRAILS.maxReports);
state.hiddenObjects ||= {};
state.hiddenObjects[target.id] = true;
if (selectedObject?.id === target.id) selectedObject = null;
closeReportDialog();
saveState();
hydrateRuntime();
updateSelectionBubble(performance.now());
renderLibrary();
toast('Reported and hidden locally.');
}
function spawnFishBubbleCluster(tileX, tileY, time, seed = 0) {
const count = 2 + Math.floor(pseudoNoise(time * 0.003 + seed) * 3);
for (let i = 0; i < count; i++) {
bubbleParticles.push({
x: tileX + (pseudoNoise(seed + time * .01 + i * 7.1) - .5) * .22,
y: tileY + (pseudoNoise(seed + time * .013 + i * 5.7) - .5) * .22,
started: time + i * 45,
life: 900 + pseudoNoise(seed + i * 3.3) * 550,
drift: (pseudoNoise(seed + i * 9.9) - .5) * .08
});
}
}
function drawBubbleParticles(time) {
if (!bubbleParticles.length) return;
ctx.save();
ctx.fillStyle = 'rgba(225, 252, 255, .62)';
for (const particle of bubbleParticles) {
const age = (time - particle.started) / particle.life;
if (age < 0 || age > 1) continue;
const pos = tileToWorld(particle.x + particle.drift * age, particle.y);
pos.y -= 3 + age * 18;
ctx.globalAlpha = 1 - age;
ctx.fillRect(Math.round(pos.x), Math.round(pos.y), 1, 1);
}
ctx.restore();
}
function spawnConfettiAtSelection(time) {
const selected = getSelectedWorldPosition();
if (!selected) return;
const palette = ['a', 'f', 'l', 's', 'A', 'H', 'P', 'Z'];
for (let i = 0; i < 22; i++) {
const angle = (Math.PI * 2 * i) / 22 + pseudoNoise(time + i) * .4;
const speed = 18 + pseudoNoise(i * 4.7 + time) * 34;
confettiParticles.push({
x: selected.pos.x,
y: selected.pos.y - assetHeight(selected.asset) * (selected.asset.category === 'static' ? STATIC_SCALE : DYNAMIC_SCALE) - 8,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed - 25,
color: palette[i % palette.length],
started: time,
life: 850 + pseudoNoise(i + time) * 450
});
}
}
function drawConfettiParticles(time) {
if (!confettiParticles.length) return;
ctx.save();
for (const particle of confettiParticles) {
const ageMs = time - particle.started;
const t = ageMs / particle.life;
if (t < 0 || t > 1) continue;
const seconds = ageMs / 1000;
const x = particle.x + particle.vx * seconds;
const y = particle.y + particle.vy * seconds + 48 * seconds * seconds;
ctx.globalAlpha = 1 - t;
ctx.fillStyle = colorToHex(particle.color);
ctx.fillRect(Math.round(x), Math.round(y), 3, 3);
}
ctx.restore();
}
function drawLightSources(sources, darkness, time = performance.now()) {
ctx.save();
for (const source of sources) {
const sx = source.x * view.zoom + view.x;
const sy = source.y * view.zoom + view.y;
const flicker = 0.94 + pseudoNoise((time * 0.0017) + (source.flickerSeed || 0)) * 0.12;
const radius = source.radius * view.zoom * flicker;
const intensity = 0.68 + (flicker - 0.94) * 0.28;
const auraRadius = radius * 1.12;
if (sx < -auraRadius || sy < -auraRadius || sx > cw + auraRadius || sy > ch + auraRadius) continue;
// Light cores are additive so they brighten art like the cursor glow instead of
// laying a flat translucent disk over the sprite.
ctx.globalCompositeOperation = 'lighter';
const core = ctx.createRadialGradient(sx, sy, 0, sx, sy, Math.max(3, radius * 0.48));
core.addColorStop(0, hexToRgba(source.color, .36 * intensity));
core.addColorStop(.28, hexToRgba(source.color, .18 * intensity));
core.addColorStop(1, hexToRgba(source.color, .00));
ctx.fillStyle = core;
ctx.beginPath();
ctx.arc(sx, sy, Math.max(3, radius * 0.48), 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = 'lighter';
const glow = ctx.createRadialGradient(sx, sy, 0, sx, sy, auraRadius);
glow.addColorStop(0, hexToRgba(source.color, .13 * intensity));
glow.addColorStop(.42, hexToRgba(source.color, .05 * intensity));
glow.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = glow;
ctx.beginPath();
ctx.arc(sx, sy, auraRadius, 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = hexToRgba(source.color, .92);
const coreSize = Math.max(2, Math.round(2.6 * view.zoom));
ctx.fillRect(Math.round(sx - coreSize / 2), Math.round(sy - coreSize / 2), coreSize, coreSize);
ctx.fillStyle = 'rgba(255, 250, 206, .54)';
const hotSize = Math.max(1, Math.round(1.2 * view.zoom));
ctx.fillRect(Math.round(sx - hotSize / 2), Math.round(sy - hotSize / 2), hotSize, hotSize);
}
ctx.restore();
}
function getSpriteCanvas(asset, side, localLights = null) {
const lightsOn = areNightLightsActive(renderPhase);
const dynamicLights = Array.isArray(localLights) && localLights.length > 0;
const lightSignature = dynamicLights ? localLights.map((l) => `${Math.round(l.x * 2) / 2},${Math.round(l.y * 2) / 2},${l.c || ''},${l.cursor ? 'cursor' : l.externalLight ? 'external' : 'self'},${Math.round((Number(l.intensity ?? 1) || 1) * 100)},${Math.round((Number(l.radiusCells ?? 0) || 0) * 10)}`).join('|') : '';
const phaseKey = renderPhase ? `${renderPhase.key}:${Math.round((renderPhase.darkness || 0) * 10)}:${lightsOn ? 'lit' : 'unlit'}:${visualSettings().enableLights === false ? 'depthoff' : 'depthon'}:${lightSignature}` : `day:unlit:${lightSignature}`;
const w = assetWidth(asset);
const h = assetHeight(asset);
const revision = asset.contentHash || asset.blobId || asset.updatedAt || asset.createdAt || asset.pixels || asset.faces?.right || '';
const key = `${asset.id}:${revision}:${side}:${w}x${h}:${asset.category === 'static' ? STATIC_SCALE : DYNAMIC_SCALE}:${phaseKey}`;
const skipCache = dynamicLights && localLights.some((l) => l.cursor);
if (!skipCache && spriteCache.has(key)) {
const cached = spriteCache.get(key);
spriteCache.delete(key);
spriteCache.set(key, cached);
return cached;
}
const pixels = getAssetPixels(asset, side);
const rawDepths = normalizeDepthPixels(asset.meta?.depthPixels || [], w, h);
const depths = asset.category === 'dynamic' && side === 'left' ? mirrorDepthPixels(rawDepths, w, h) : rawDepths;
const lights = dynamicLights ? localLights : (lightsOn ? getAssetLightPointsForSide(asset, side) : []);
const depthVisualsOn = visualSettings().enableLights !== false;
const scale = asset.category === 'static' ? STATIC_SCALE : DYNAMIC_SCALE;
const canvas = document.createElement('canvas');
canvas.width = w * scale;
canvas.height = h * scale;
const c = canvas.getContext('2d');
c.imageSmoothingEnabled = false;
for (let y = 0; y < h; y++) {
for (let x = 0; x < w; x++) {
const color = pixels[y * w + x];
if (!color) continue;
const depth = depthVisualsOn ? (depths[y * w + x] || 0) : 0;
c.fillStyle = shadeAssetPixelColor(colorToHex(color), depth, x, y, w, renderPhase, pixels, depthVisualsOn ? depths : null, lights, h);
c.fillRect(x * scale, y * scale, scale, scale);
}
}
if (!skipCache) rememberSpriteCanvas(key, canvas);
return canvas;
}
function rememberSpriteCanvas(key, canvas) {
spriteCache.set(key, canvas);
while (spriteCache.size > MAX_SPRITE_CACHE_ENTRIES) {
const oldest = spriteCache.keys().next().value;
spriteCache.delete(oldest);
}
}
function getAssetPixels(asset, side = 'right') {
const w = assetWidth(asset);
const h = assetHeight(asset);
const right = normalizePixels(asset.faces?.right || asset.pixels || blankPixels(w, h), w, h);
if (asset.category === 'dynamic' && side === 'left') return mirrorPixels(right, w, h);
return right;
}
function makeWorld() {
const islands = [
{ cx: 36, cy: 34, rx: 32, ry: 22, height: 1.04 },
{ cx: 92, cy: 30, rx: 34, ry: 20, height: .98 },
{ cx: 74, cy: 76, rx: 42, ry: 24, height: 1.02 },
{ cx: 124, cy: 72, rx: 16, ry: 14, height: .92 },
{ cx: 26, cy: 86, rx: 16, ry: 12, height: .9 },
{ cx: 118, cy: 102, rx: 20, ry: 9, height: .86 }
];
const tiles = [];
for (let y = 0; y < WORLD_H; y++) {
for (let x = 0; x < WORLD_W; x++) {
const continent = fractalPerlin(x * .035, y * .035, 4);
const detail = fractalPerlin(x * .095 + 41.7, y * .095 - 13.2, 3);
let score = -1.2;
for (const island of islands) {
const warpX = (fractalPerlin(x * .055 + island.cx, y * .055, 2) - .5) * 7.0;
const warpY = (fractalPerlin(x * .055, y * .055 + island.cy, 2) - .5) * 5.0;
const dx = (x + warpX - island.cx) / island.rx;
const dy = (y + warpY - island.cy) / island.ry;
const base = 1 - (dx * dx + dy * dy);
score = Math.max(score, base * island.height);
}
score += (continent - .5) * .36 + (detail - .5) * .18;
let type = 'water';
if (score > .015) type = 'sand';
if (score > .17) type = 'grass';
if (score > .56 && fractalPerlin(x * .16 + 8, y * .16 + 4, 2) > .56) type = 'highland';
const heightLevel = type === 'highland' ? 1 : 0;
tiles.push({ x, y, type, heightLevel, shade: fractalPerlin(x * .31 + 9, y * .31 - 2, 2) - .5 });
}
}
return {
tiles,
get(x, y) {
if (x < 0 || y < 0 || x >= WORLD_W || y >= WORLD_H) return null;
return tiles[y * WORLD_W + x];
}
};
}
function buildTerrainCache(worldData) {
const chunkSize = TERRAIN_CHUNK_SIZE;
const chunks = [];
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
for (let cy = 0; cy < WORLD_H; cy += chunkSize) {
for (let cx = 0; cx < WORLD_W; cx += chunkSize) {
const tiles = [];
for (let y = cy; y < Math.min(WORLD_H, cy + chunkSize); y++) {
for (let x = cx; x < Math.min(WORLD_W, cx + chunkSize); x++) {
const tile = worldData.get(x, y);
if (tile) tiles.push(tile);
}
}
if (!tiles.length) continue;
const bounds = getTerrainChunkBounds(tiles);
const canvas = document.createElement('canvas');
canvas.width = Math.ceil(bounds.w);
canvas.height = Math.ceil(bounds.h);
const c = canvas.getContext('2d', { alpha: true });
c.imageSmoothingEnabled = false;
c.save();
c.translate(-bounds.x, -bounds.y);
const orderedTiles = tiles.slice().sort(terrainDrawCompare);
for (const tile of orderedTiles) {
drawTerrainTile(c, tile, worldData);
if (tile.type === 'highland') drawHighlandWallFaces(c, tile, worldData);
}
c.restore();
chunks.push({ canvas, x: bounds.x, y: bounds.y, w: canvas.width, h: canvas.height, tileX: cx, tileY: cy });
minX = Math.min(minX, bounds.x);
minY = Math.min(minY, bounds.y);
maxX = Math.max(maxX, bounds.x + canvas.width);
maxY = Math.max(maxY, bounds.y + canvas.height);
}
}
const coastTiles = findCoastFoamTiles(worldData);
if (!chunks.length) return { chunks: [], bounds: { x: 0, y: 0, w: 1, h: 1 }, chunkSize, coastTiles };
chunks.sort((a, b) => (a.tileX + a.tileY) - (b.tileX + b.tileY) || a.tileY - b.tileY || a.tileX - b.tileX);
return { chunks, bounds: { x: minX, y: minY, w: maxX - minX, h: maxY - minY }, chunkSize, coastTiles };
}
function findCoastFoamTiles(worldData) {
const out = [];
const dirs = [[1,0],[-1,0],[0,1],[0,-1]];
for (let y = 0; y < WORLD_H; y++) {
for (let x = 0; x < WORLD_W; x++) {
const tile = worldData.get(x, y);
if (!tile || tile.type !== 'water') continue;
let touchesLand = false;
for (const [dx, dy] of dirs) {
const near = worldData.get(x + dx, y + dy);
if (near && near.type !== 'water') { touchesLand = true; break; }
}
if (touchesLand) out.push({ x, y });
}
}
return out;
}
function terrainDrawCompare(a, b) {
return (a.x + a.y) - (b.x + b.y) || a.y - b.y || a.x - b.x;
}
function getTerrainChunkBounds(tiles) {
let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
for (const tile of tiles) {
const p = tileToWorld(tile.x, tile.y);
const lift = getTileLift(tile);
minX = Math.min(minX, p.x - TILE_W / 2 - 3);
maxX = Math.max(maxX, p.x + TILE_W / 2 + 3);
minY = Math.min(minY, p.y - lift - 16);
maxY = Math.max(maxY, p.y + TILE_H + 18);
}
minX = Math.floor(minX);
minY = Math.floor(minY);
maxX = Math.ceil(maxX);
maxY = Math.ceil(maxY);
return { x: minX, y: minY, w: Math.max(1, maxX - minX), h: Math.max(1, maxY - minY) };
}
function drawHighlandForegroundFaces(worldData, items = []) {
const rect = getViewportWorldRect(64);
const tiles = [];
for (let y = 0; y < WORLD_H; y++) {
for (let x = 0; x < WORLD_W; x++) {
const tile = worldData.get(x, y);
if (!tile || tile.type !== 'highland') continue;
const p = tileToWorld(x, y);
if (p.x + TILE_W < rect.left || p.x - TILE_W > rect.right || p.y + TILE_H < rect.top || p.y - 40 > rect.bottom) continue;
const frontLeft = worldData.get(x, y + 1);
const frontRight = worldData.get(x + 1, y);
if (!frontLeft || frontLeft.type !== 'highland' || !frontRight || frontRight.type !== 'highland') tiles.push(tile);
}
}
tiles.sort(terrainDrawCompare);
for (const tile of tiles) drawHighlandWallFaces(ctx, tile, worldData, true);
}
function drawTerrainCache(cache) {
const rect = getViewportWorldRect(64);
for (const chunk of cache.chunks) {
if (chunk.x + chunk.w < rect.left || chunk.x > rect.right || chunk.y + chunk.h < rect.top || chunk.y > rect.bottom) continue;
ctx.drawImage(chunk.canvas, chunk.x, chunk.y);
}
}
function buildCoastalFoamTextures() {
return { a: makeFoamTexture(24, 1), b: makeFoamTexture(24, 2) };
}
function makeFoamTexture(size, seedOffset) {
const canvas = document.createElement('canvas');
canvas.width = size;
canvas.height = size;
const c = canvas.getContext('2d', { alpha: true });
c.clearRect(0, 0, size, size);
for (let i = 0; i < 26; i++) {
const n = pseudoNoise(seedOffset * 93 + i * 17.3);
const x = Math.floor(n * (size - 6)) + 3;
const y = Math.floor(pseudoNoise(seedOffset * 77 + i * 11.1) * (size - 6)) + 3;
const r = 1 + Math.floor(pseudoNoise(seedOffset * 41 + i * 6.2) * 3);
c.fillStyle = i % 2 ? 'rgba(232, 248, 255, 0.42)' : 'rgba(216, 239, 248, 0.32)';
c.beginPath();
c.arc(x, y, r, 0, Math.PI * 2);
c.fill();
}
return canvas;
}
function drawCoastalFoam(time) { return;
/* disabled by request */
if (!terrainCache?.coastTiles?.length || !coastalFoamTextures) return;
const rect = getViewportWorldRect(64);
const t = time * 0.001;
for (const tile of terrainCache.coastTiles) {
const pos = tileToWorld(tile.x, tile.y);
if (pos.x + 28 < rect.left || pos.x - 28 > rect.right || pos.y + 24 < rect.top || pos.y - 24 > rect.bottom) continue;
const seed = (tile.x * 17.17 + tile.y * 7.91);
const drift = Math.sin(t * 2.4 + seed) * 5.0;
const bob = Math.cos(t * 2.9 + seed * .7) * 2.1;
const crawl = Math.sin(t * 1.25 + seed * .41) * 3.4;
const pulse = 0.68 + Math.sin(t * 3.1 + seed * .31) * 0.32;
const baseY = pos.y + TILE_H * 0.42;
ctx.save();
ctx.globalAlpha = 0.20 + 0.18 * pulse;
ctx.translate(pos.x + drift, baseY + bob + crawl * .25);
ctx.rotate(time / 9500 + (tile.x + tile.y) * 0.035);
ctx.scale(0.92 + pulse * 0.12, 0.86 + pulse * 0.10);
ctx.drawImage(coastalFoamTextures.a, -12, -12);
ctx.restore();
ctx.save();
ctx.globalAlpha = 0.14 + 0.12 * (1 - pulse);
ctx.translate(pos.x - drift * 0.65 + crawl * .35, baseY + 1 - bob * 0.7);
ctx.rotate(-(time / 12500) + (tile.x - tile.y) * 0.03);
ctx.scale(0.78 + (1 - pulse) * 0.18, 0.78 + pulse * 0.12);
ctx.drawImage(coastalFoamTextures.b, -12, -12);
ctx.restore();
}
}
function drawTerrainTile(c, tile, worldData) {
const { x, y } = tileToWorld(tile.x, tile.y);
const palette = {
water: ['#6ebfe0', '#69bbdc'],
sand: ['#ead99d', '#e8d293'],
grass: ['#91cf76', '#89c970'],
highland: ['#9db781', '#95ab79']
};
const [base, alt] = palette[tile.type];
const fill = tile.shade > 0 ? base : alt;
const lift = getTileLift(tile);
c.fillStyle = fill;
c.beginPath();
c.moveTo(x, y - lift);
c.lineTo(x + TILE_W / 2, y + TILE_H / 2 - lift);
c.lineTo(x, y + TILE_H - lift);
c.lineTo(x - TILE_W / 2, y + TILE_H / 2 - lift);
c.closePath();
c.fill();
if (tile.type !== 'water') {
drawTerrainAmbientOcclusion(c, tile, worldData, x, y, lift);
}
if (tile.type === 'water') {
c.fillStyle = 'rgba(255,255,255,.045)';
c.beginPath();
c.moveTo(x - TILE_W * .20, y + TILE_H * .48);
c.lineTo(x + TILE_W * .15, y + TILE_H * .31);
c.lineTo(x + TILE_W * .25, y + TILE_H * .38);
c.lineTo(x - TILE_W * .10, y + TILE_H * .55);
c.closePath();
c.fill();
}
c.strokeStyle = 'rgba(36, 48, 68, .02)';
c.lineWidth = 1;
c.beginPath();
c.moveTo(x, y - lift);
c.lineTo(x + TILE_W / 2, y + TILE_H / 2 - lift);
c.lineTo(x, y + TILE_H - lift);
c.lineTo(x - TILE_W / 2, y + TILE_H / 2 - lift);
c.closePath();
c.stroke();
}
function drawTerrainAmbientOcclusion(c, tile, worldData, x, y, lift) {
// Terrain AO linework removed: it produced horizontal artifacts on highland tiles.
}
function drawHighlandWallFaces(c, tile, worldData, foreground = false) {
for (const face of getHighlandWallFaceEntries(tile, worldData)) drawHighlandWallFace(c, tile, worldData, face.side);
}
function drawHighlandWallFace(c, tile, worldData, side) {
const { x, y } = tileToWorld(tile.x, tile.y);
const lift = getTileLift(tile);
if (side === 'right') {
c.fillStyle = '#7f8b66';
c.beginPath();
c.moveTo(x, y + TILE_H - lift);
c.lineTo(x + TILE_W / 2, y + TILE_H / 2 - lift);
c.lineTo(x + TILE_W / 2, y + TILE_H / 2);
c.lineTo(x, y + TILE_H);
c.closePath();
c.fill();
} else if (side === 'left') {
c.fillStyle = '#6f7d5d';
c.beginPath();
c.moveTo(x - TILE_W / 2, y + TILE_H / 2 - lift);
c.lineTo(x, y + TILE_H - lift);
c.lineTo(x, y + TILE_H);
c.lineTo(x - TILE_W / 2, y + TILE_H / 2);
c.closePath();
c.fill();
}
}
function getTileLift(tile) {
return tile?.type === 'highland' ? 12 : 0;
}
function getLiftAtCoord(x, y) {
const tile = world.get(clamp(Math.floor(x), 0, WORLD_W - 1), clamp(Math.floor(y), 0, WORLD_H - 1));
return getTileLift(tile);
}
function getTerrainSurfaceColorAt(x, y) {
const tile = world.get(clamp(Math.floor(x), 0, WORLD_W - 1), clamp(Math.floor(y), 0, WORLD_H - 1));
const palette = {
water: '#8cd2ee',
sand: '#ead99d',
grass: '#91cf76',
highland: '#9db781'
};
return palette[tile?.type] || '#d9d2c0';
}
function makeStepParticleColor(baseColor, tileType) {
const presets = {
grass: ['#d7f39a', '#b7e36f', '#f0cf61', '#6fbf65'],
sand: ['#fff1ba', '#f2c879', '#ffffff', '#d4a957'],
highland: ['#d5e8a4', '#b4c77c', '#ffffff', '#7f9e6d'],
water: ['#d9f7ff', '#a8e5ff']
};
const list = presets[tileType] || presets.grass;
const chosen = Math.random() < 0.72 ? list[Math.floor(Math.random() * list.length)] : varyHexColor(baseColor, 58, 34, 28);
return chosen;
}
function loadState() {
try {
for (const key of LEGACY_STORAGE_KEYS) localStorage.removeItem(key);
const raw = localStorage.getItem(STORAGE_KEY);
if (raw) {
const parsed = JSON.parse(raw);
if (parsed?.format === LOCAL_MANIFEST_FORMAT) {
const loadedSchema = Number(parsed.schema || 0);
if (loadedSchema < SAVE_SCHEMA) {
localStorage.removeItem(STORAGE_KEY);
resetPhase2CacheOnBoot = true;
return seedState();
}
return stateFromLocalManifest(parsed);
}
// v32 only accepts the local manifest. Older full/compact saves are intentionally discarded.
localStorage.removeItem(STORAGE_KEY);
resetPhase2CacheOnBoot = true;
return seedState();
}
} catch (error) {
console.warn('Could not load local manifest.', error);
resetPhase2CacheOnBoot = true;
}
return seedState();
}
function stateFromLocalManifest(manifest) {
const seeded = seedState();
const input = {
...seeded,
schema: SAVE_SCHEMA,
authorName: manifest.authorName || seeded.authorName,
objectVotes: manifest.objectVotes || {},
assetVotes: manifest.assetVotes || {},
hiddenAssets: manifest.hiddenAssets || {},
hiddenObjects: manifest.hiddenObjects || {},
assets: Array.isArray(manifest.assets) ? manifest.assets : seeded.assets,
placed: Array.isArray(manifest.placed) ? manifest.placed : seeded.placed,
dynamicSummons: Array.isArray(manifest.dynamicSummons) ? manifest.dynamicSummons : seeded.dynamicSummons,
moderationReports: normalizeModerationReports(manifest.moderationReports || []),
guardrails: { ...PHASE5_GUARDRAILS, ...(manifest.guardrails || {}) },
settings: { ...defaultVisualSettings(), ...(manifest.settings || {}) },
account: normalizeAccount(manifest.account),
publishLog: Array.isArray(manifest.publishLog) ? manifest.publishLog.slice(-300) : [],
pendingPublishLog: Array.isArray(manifest.pendingPublishLog) ? manifest.pendingPublishLog.slice(-300) : [],
worldMode: 'shared',
serverSync: sanitizeManifestServerSync(manifest.serverSync),
tombstones: manifest.tombstones || { assets: {}, objects: {} },
deletedSeedAssetNames: Array.isArray(manifest.deletedSeedAssetNames) ? manifest.deletedSeedAssetNames : []
};
return normalizeState(input);
}
function sanitizeManifestServerSync(serverSync = {}) {
return {
lastServerEventId: serverSync.lastServerEventId || null,
authority: { ...DEFAULT_SERVER_AUTHORITY, ...(serverSync.authority || {}) },
clock: serverSync.clock && typeof serverSync.clock === 'object' ? { ...serverSync.clock } : { worldTimeMs: Date.now(), syncedAt: Date.now() },
dynamicTargets: serverSync.dynamicTargets && typeof serverSync.dynamicTargets === 'object' ? { ...serverSync.dynamicTargets } : {},
pendingObjectVisuals: serverSync.pendingObjectVisuals && typeof serverSync.pendingObjectVisuals === 'object' ? { ...serverSync.pendingObjectVisuals } : {}
};
}
async function restoreStateFromIndexedDb() {
if (!Phase2Sync?.readCachedSnapshot || !Phase2Sync?.readCachedAssets) return false;
try {
if (resetPhase2CacheOnBoot && Phase2Sync?.clearCache) {
await Phase2Sync.clearCache();
return false;
}
const snapshot = await Phase2Sync.readCachedSnapshot('local-main');
const manifest = Array.isArray(snapshot?.manifest) ? snapshot.manifest : [];
const assetIds = manifest.map((asset) => asset?.id).filter(Boolean);
if (!assetIds.length) return false;
const cachedAssets = await Phase2Sync.readCachedAssets(assetIds);
if (!cachedAssets.length) return false;
const previousSelectedAssetId = selectedAssetId;
const assetById = new Map();
for (const asset of [...(state.assets || []), ...cachedAssets]) {
if (asset?.id) assetById.set(asset.id, asset);
}
state = normalizeState(mergeDefaultGallery({
...state,
schema: SAVE_SCHEMA,
assets: [...assetById.values()],
placed: Array.isArray(snapshot.placed) ? snapshot.placed : state.placed,
dynamicSummons: Array.isArray(snapshot.dynamicSummons) ? snapshot.dynamicSummons : state.dynamicSummons,
hiddenObjects: snapshot.hiddenObjects || state.hiddenObjects || {}
}));
if (previousSelectedAssetId && state.assets.some((asset) => asset.id === previousSelectedAssetId)) selectedAssetId = previousSelectedAssetId;
else selectedAssetId = state.assets[0]?.id ?? null;
return true;
} catch (error) {
console.warn('Could not restore IndexedDB state.', error);
return false;
}
}
function buildLocalManifest(target = state) {
const serverSync = sanitizeManifestServerSync(target.serverSync || {});
return {
format: LOCAL_MANIFEST_FORMAT,
schema: SAVE_SCHEMA,
updatedAt: Date.now(),
snapshotWorldId: 'local-main',
authorName: target.authorName || 'Local Artist',
objectVotes: target.objectVotes || {},
assetVotes: target.assetVotes || {},
hiddenAssets: target.hiddenAssets || {},
hiddenObjects: target.hiddenObjects || {},
assets: Array.isArray(target.assets) ? target.assets : [],
placed: Array.isArray(target.placed) ? target.placed : [],
dynamicSummons: Array.isArray(target.dynamicSummons) ? target.dynamicSummons : [],
moderationReports: Array.isArray(target.moderationReports) ? target.moderationReports : [],
guardrails: target.guardrails || null,
settings: target.settings || null,
account: target.account || null,
publishLog: Array.isArray(target.publishLog) ? target.publishLog.slice(-300) : [],
pendingPublishLog: Array.isArray(target.pendingPublishLog) ? target.pendingPublishLog.slice(-300) : [],
worldMode: 'shared',
serverSync,
tombstones: target.tombstones || { assets: {}, objects: {} },
deletedSeedAssetNames: Array.isArray(target.deletedSeedAssetNames) ? target.deletedSeedAssetNames : [],
counts: {
assets: target.assets?.length || 0,
staticObjects: target.placed?.length || 0,
dynamicObjects: target.dynamicSummons?.length || 0
}
};
}
function saveState() {
state.schema = SAVE_SCHEMA;
ensureWorldProtectionState();
state.worldMode = 'shared';
state.guardrails = { ...PHASE5_GUARDRAILS, ...(state.guardrails || {}) };
state.moderationReports = normalizeModerationReports(state.moderationReports || []);
state.settings = { ...defaultVisualSettings(), ...(state.settings || {}) };
localStorage.setItem(STORAGE_KEY, JSON.stringify(buildLocalManifest(state)));
cachePhase2Snapshot();
updateRotationStats();
}
function dedupeNormalizedAssets(assets) {
const byId = new Map();
const exact = new Set();
const out = [];
for (const asset of assets || []) {
if (!asset?.id) continue;
if (byId.has(asset.id)) continue;
const key = [asset.contentHash || '', asset.blobId || '', asset.name || '', asset.category || '', asset.subtype || '', asset.width || asset.size || '', asset.height || asset.size || '', normalizeOwnerAccountId(asset.ownerAccountId)].join('|');
if (asset.contentHash && exact.has(key)) continue;
byId.set(asset.id, asset);
if (asset.contentHash) exact.add(key);
out.push(asset);
}
return out;
}
function assetUnsupportedPaletteCodes(asset) {
const unsupported = new Set();
const scanEncodedPixels = (value) => {
if (typeof value !== 'string' || value === 'mirror') return;
for (const ch of value) {
if (ch !== '.' && !PALETTE_BY_CODE[ch]) unsupported.add(ch);
}
};
scanEncodedPixels(asset?.pixels);
if (asset?.faces && typeof asset.faces === 'object') {
scanEncodedPixels(asset.faces.right);
scanEncodedPixels(asset.faces.left);
}
const meta = asset?.meta || {};
for (const point of meta.lightPixels || []) {
if (typeof point?.c === 'string' && point.c.length === 1 && !PALETTE_BY_CODE[point.c]) unsupported.add(point.c);
}
for (const point of meta.particlePixels || []) {
if (typeof point?.c === 'string' && point.c.length === 1 && !PALETTE_BY_CODE[point.c]) unsupported.add(point.c);
}
return unsupported;
}
function removeUnrepresentableAssets(input) {
if (!input || !Array.isArray(input.assets)) return input;
const removedIds = new Set();
const removedNames = [];
const assets = input.assets.filter((asset) => {
const unsupported = assetUnsupportedPaletteCodes(asset);
if (!unsupported.size) return true;
if (asset?.id) removedIds.add(asset.id);
removedNames.push(`${asset?.name || 'Untitled'} [${[...unsupported].join(' ')}]`);
return false;
});
if (!removedIds.size) return input;
console.warn(`Removed ${removedIds.size} collection work(s) with palette codes unavailable in the current palette: ${removedNames.join(', ')}`);
const next = { ...input, assets };
next.placed = Array.isArray(input.placed) ? input.placed.filter((item) => !removedIds.has(item?.assetId)) : input.placed;
next.dynamicSummons = Array.isArray(input.dynamicSummons) ? input.dynamicSummons.filter((item) => !removedIds.has(item?.assetId)) : input.dynamicSummons;
next.assetVotes = Object.fromEntries(Object.entries(input.assetVotes || {}).filter(([id]) => !removedIds.has(id)));
next.hiddenAssets = Object.fromEntries(Object.entries(input.hiddenAssets || {}).filter(([id]) => !removedIds.has(id)));
return next;
}
function normalizeState(input) {
input = removeUnrepresentableAssets(input);
const normalized = {
schema: SAVE_SCHEMA,
authorName: input.authorName || 'Local Artist',
assets: dedupeNormalizedAssets(Array.isArray(input.assets) ? input.assets.map(normalizeAsset) : []),
placed: normalizePlacements(Array.isArray(input.placed) ? input.placed : []),
dynamicSummons: normalizeDynamicSummons(Array.isArray(input.dynamicSummons) ? input.dynamicSummons : []),
objectVotes: input.objectVotes || {},
assetVotes: input.assetVotes || {},
hiddenAssets: input.hiddenAssets || {},
hiddenObjects: input.hiddenObjects || {},
moderationReports: normalizeModerationReports(input.moderationReports || []),
guardrails: { ...PHASE5_GUARDRAILS, ...(input.guardrails || {}) },
sync: input.sync || { lastEventId: null },
settings: { ...defaultVisualSettings(), ...(input.settings || {}) },
account: normalizeAccount(input.account),
publishLog: Array.isArray(input.publishLog) ? input.publishLog.slice(-300) : [],
pendingPublishLog: Array.isArray(input.pendingPublishLog) ? input.pendingPublishLog.slice(-300) : [],
worldMode: 'shared',
serverSync: input.serverSync || { lastServerEventId: null },
tombstones: input.tombstones || { assets: {}, objects: {} },
deletedSeedAssetNames: Array.isArray(input.deletedSeedAssetNames) ? input.deletedSeedAssetNames : []
};
ensureWorldProtectionState(normalized);
for (const tombstone of Object.values(normalized.tombstones.assets || {})) {
if (tombstone?.name && !normalized.deletedSeedAssetNames.includes(tombstone.name)) normalized.deletedSeedAssetNames.push(tombstone.name);
}
const ownerByAssetId = new Map(normalized.assets.map((asset) => [asset.id, normalizeOwnerAccountId(asset.ownerAccountId)]));
normalized.placed.forEach((item) => { item.ownerAccountId = normalizeOwnerAccountId(item.ownerAccountId, ownerByAssetId.get(item.assetId) || ''); });
normalized.dynamicSummons.forEach((item) => { item.ownerAccountId = normalizeOwnerAccountId(item.ownerAccountId, ownerByAssetId.get(item.assetId) || ''); });
const deletedAssetKeys = new Set(Object.values(normalized.tombstones.assets || {}).flatMap((t) => [t?.id && `id:${t.id}`, t?.contentHash && `hash:${t.contentHash}`, t?.name && `name:${t.name}`].filter(Boolean)));
normalized.assets = normalized.assets.filter((asset) => !deletedAssetKeys.has(`id:${asset.id}`) && !deletedAssetKeys.has(`hash:${asset.contentHash || computeAssetContentHash(asset)}`) && !deletedAssetKeys.has(`name:${asset.name}`));
normalized.placed = normalized.placed.filter((item) => !normalized.tombstones.objects?.[item.id]);
normalized.dynamicSummons = normalized.dynamicSummons.filter((item) => !normalized.tombstones.objects?.[item.id]);
normalized.placed = repairStaticPlacementTerrain(normalized.placed, normalized.assets);
return normalized;
}
function adoptLocalCollectionOwnership(target) {
const author = target.authorName || 'Local Artist';
const protectedOwners = new Set(['island-team']);
const ownerByAssetId = new Map((target.assets || []).map((asset) => [asset.id, normalizeOwnerAccountId(asset.ownerAccountId)]));
target.assets = (target.assets || []).map((asset) => {
const owner = normalizeOwnerAccountId(asset.ownerAccountId);
if (protectedOwners.has(owner)) return { ...asset, author: 'Pixel Island', ownerAccountId: owner || 'island-team' };
return { ...asset, author, ownerAccountId: owner || '' };
});
target.placed = (target.placed || []).map((item) => {
const owner = normalizeOwnerAccountId(item.ownerAccountId, ownerByAssetId.get(item.assetId) || '');
return protectedOwners.has(owner) ? { ...item, ownerAccountId: owner } : { ...item, ownerAccountId: owner || '' };
});
target.dynamicSummons = (target.dynamicSummons || []).map((item) => {
const owner = normalizeOwnerAccountId(item.ownerAccountId, ownerByAssetId.get(item.assetId) || '');
return protectedOwners.has(owner) ? { ...item, ownerAccountId: owner } : { ...item, ownerAccountId: owner || '' };
});
return target;
}
function cleanWorkText(value, fallback = '') {
const text = String(value ?? '')
.replace(/[\uFFFD\u0080-\u009F]/g, '')
.replace(/[\r\n]+/g, '\n')
.replace(/\s{2,}/g, ' ')
.trim();
return text || fallback;
}
function normalizeAsset(asset) {
const width = assetWidth(asset);
const height = assetHeight(asset);
const size = Math.max(width, height);
const category = asset.category === 'dynamic' ? 'dynamic' : 'static';
const right = normalizePixels(asset.faces?.right || asset.pixels || blankPixels(width, height), width, height);
const subtype = asset.subtype || (category === 'dynamic' ? 'human' : 'other');
const normalized = {
id: asset.id || uid(),
name: cleanWorkText(asset.name || 'Untitled', 'Untitled'),
category,
subtype,
size,
width,
height,
blobId: asset.blobId || asset.bi || buildPixelBlob(right, width, height).id,
pixels: encodePixels(right, width, height),
faces: category === 'dynamic' ? { right: encodePixels(right, width, height), left: 'mirror' } : null,
parentAssetId: asset.parentAssetId || null,
originalAssetId: asset.originalAssetId || null,
createdAt: asset.createdAt || Date.now(),
updatedAt: asset.updatedAt || asset.createdAt || Date.now(),
author: cleanWorkText(asset.author || 'Local Artist', 'Local Artist'),
ownerAccountId: normalizeOwnerAccountId(asset.ownerAccountId, asset.accountId || asset.authorId || ''),
version: Number(asset.version) || 1,
meta: normalizeAssetMeta(asset.meta || {}, category, subtype, width, height, right)
};
normalized.contentHash = computeAssetContentHash(normalized);
return normalized;
}
function normalizeAssetMeta(meta, category, subtype, width, height = width, sourcePixels = null) {
const normalizedDepth = normalizeDepthPixels(meta.depthPixels || [], width, height);
const lightPixels = Array.isArray(meta.lightPixels)
? meta.lightPixels
.map((p) => ({ x: clampInt(p.x, 0, width - 1, 0), y: clampInt(p.y, 0, height - 1, 0), c: p.c || meta.lightColor || nearestPaletteCode('#ffd86a') }))
.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y))
: [];
const legacyParticlePixels = Array.isArray(meta.particlePixels)
? meta.particlePixels
.map((p) => ({ x: clampInt(p.x, 0, width - 1, 0), y: clampInt(p.y, 0, height - 1, 0), c: p.c || nearestPaletteCode('#ffffff'), dir: p.dir || 'up' }))
.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y))
: [];
const normalized = buildAssetMeta(category, subtype, normalizedDepth, lightPixels, meta.lightColor || '#ffd86a', meta.door || null, width, legacyParticlePixels, sourcePixels, height);
if (category === 'dynamic') normalized.frontSide = meta.frontSide === 'left' ? 'left' : 'right';
return normalized;
}
function buildAssetMeta(category, subtype, sourceDepthPixels, sourceLightPixels, lightColor, door, width = 8, sourceParticle = null, sourcePixels = null, height = width) {
const w = clampDimension(width, 8);
const h = clampDimension(height, w);
const normalizedDepth = normalizeDepthPixels(sourceDepthPixels || [], w, h);
const hasDepth = normalizedDepth.some(Boolean);
const pixelSource = sourcePixels ? normalizePixels(sourcePixels, w, h) : null;
const lightPixelsClean = sanitizeLightPixels(sourceLightPixels, pixelSource || Array(w * h).fill('x'), w, w, h, lightColor || '#ffd86a', false)
.map((p) => ({ x: p.x, y: p.y, c: PALETTE_BY_CODE[p.c] ? p.c : nearestPaletteCode(lightColor || '#ffd86a') }));
const legacyParticlePixels = Array.isArray(sourceParticle)
? sourceParticle
.map((p) => ({ x: clampInt(p.x, 0, w - 1, 0), y: clampInt(p.y, 0, h - 1, 0), c: p.c || nearestPaletteCode('#ffffff'), dir: p.dir || 'up' }))
.filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y) && (!pixelSource || pixelSource[p.y * w + p.x]))
: [];
const particleSource = !Array.isArray(sourceParticle) && sourceParticle
? sourceParticle
: (legacyParticlePixels.length ? { enabled: true, c: legacyParticlePixels[0].c, dir: legacyParticlePixels[0].dir || 'up' } : null);
const particleClean = normalizeParticleConfig(particleSource || { enabled: false, c: nearestPaletteCode('#ffffff'), dir: 'up' }, Math.max(w, h));
const particleCells = legacyParticlePixels.map((p) => ({ x: p.x, y: p.y, c: PALETTE_BY_CODE[p.c] ? p.c : nearestPaletteCode('#ffffff'), dir: ['up','down','left','right'].includes(p.dir) ? p.dir : (particleClean.dir || 'up') }));
const hasLight = lightPixelsClean.length > 0;
const hasParticles = particleCells.length > 0;
return {
hasLight,
lightPixels: hasLight ? lightPixelsClean : [],
lightColor: hasLight ? nearestPaletteCode(lightColor || '#ffd86a') : null,
hasParticles,
particlePixels: hasParticles ? particleCells : [],
particleConfig: { enabled: hasParticles, c: particleCells[0]?.c || particleClean.c, dir: particleCells[0]?.dir || particleClean.dir },
depthPixels: hasDepth ? encodeDepthPixels(normalizedDepth) : null,
door: category === 'static' && subtype === 'building' && door ? { x: clampInt(door.x, 0, w - 1, Math.floor(w / 2)), y: clampInt(door.y, 0, h - 1, h - 1) } : null
};
}
function normalizePlacements(items) {
return dedupeByAsset(items).map((item) => ({
id: item.id || uid(),
assetId: item.assetId,
x: clampInt(item.x, 0, WORLD_W - 1, 0),
y: clampInt(item.y, 0, WORLD_H - 1, 0),
placedAt: item.placedAt || item.createdAt || Date.now(),
publishedAt: item.publishedAt || item.placedAt || item.createdAt || Date.now(),
status: item.status || 'active',
ownerAccountId: normalizeOwnerAccountId(item.ownerAccountId),
version: Number(item.version) || 1
})).filter((item) => item.assetId);
}
function repairStaticPlacementTerrain(placements, assets) {
const assetById = new Map((assets || []).map((asset) => [asset.id, asset]));
return (placements || []).map((item) => {
const asset = assetById.get(item.assetId);
if (!asset || asset.category !== 'static') return item;
const tile = world.get(item.x, item.y);
const wantsWater = asset.subtype === 'water' || asset.subtype === 'ship';
const valid = tile && (wantsWater ? tile.type === 'water' : tile.type !== 'water');
if (valid) return item;
const target = wantsWater ? findNearestTerrain('water', item.x, item.y) : findNearestLandTerrain(item.x, item.y);
return { ...item, x: target.x, y: target.y };
});
}
function normalizeDynamicSummons(items) {
return dedupeByAsset(items).map((item) => ({
id: item.id || uid(),
assetId: item.assetId,
homeX: clampInt(item.homeX ?? item.x, 0, WORLD_W - 1, 0),
homeY: clampInt(item.homeY ?? item.y, 0, WORLD_H - 1, 0),
createdAt: item.createdAt || item.placedAt || Date.now(),
publishedAt: item.publishedAt || item.createdAt || item.placedAt || Date.now(),
status: item.status || 'active',
ownerAccountId: normalizeOwnerAccountId(item.ownerAccountId),
version: Number(item.version) || 1,
serverState: item.serverState && typeof item.serverState === 'object' ? { ...item.serverState } : null
})).filter((item) => item.assetId);
}
function dedupeByAsset(items) {
const map = new Map();
for (const item of items) {
if (item && item.assetId) map.set(item.assetId, item);
}
return [...map.values()];
}
function findNearestTerrain(type, startX, startY) {
let best = null;
let bestD = Infinity;
const maxR = Math.max(WORLD_W, WORLD_H);
for (let r = 0; r < maxR; r++) {
for (let y = Math.max(0, startY - r); y <= Math.min(WORLD_H - 1, startY + r); y++) {
for (let x = Math.max(0, startX - r); x <= Math.min(WORLD_W - 1, startX + r); x++) {
const tile = world.get(x, y);
if (!tile || tile.type !== type) continue;
const d = Math.hypot(x - startX, y - startY);
if (d < bestD) { bestD = d; best = { x, y }; }
}
}
if (best) return best;
}
return { x: startX, y: startY };
}
function findNearestTerrainByPredicate(startX, startY, predicate) {
let best = null;
let bestD = Infinity;
const maxR = Math.max(WORLD_W, WORLD_H);
for (let r = 0; r < maxR; r++) {
for (let y = Math.max(0, startY - r); y <= Math.min(WORLD_H - 1, startY + r); y++) {
for (let x = Math.max(0, startX - r); x <= Math.min(WORLD_W - 1, startX + r); x++) {
const tile = world.get(x, y);
if (!tile || !predicate(tile, x, y)) continue;
const d = Math.hypot(x - startX, y - startY);
if (d < bestD) { bestD = d; best = { x, y }; }
}
}
if (best) return best;
}
return { x: startX, y: startY };
}
function findNearestLandTerrain(startX, startY) {
return findNearestTerrainByPredicate(startX, startY, (tile) => tile.type !== 'water');
}
function homeFromPos(pos) {
return { homeX: pos.x, homeY: pos.y };
}
// Default gallery contents are seeded by the shared backend from _data/default_gallery_seed.json.
function mergeDefaultGallery(baseState) {
return baseState && typeof baseState === 'object' ? baseState : seedState();
}
function seedState() {
const now = Date.now();
return {
schema: SAVE_SCHEMA,
authorName: 'Local Artist',
assets: [],
placed: [],
objectVotes: {},
assetVotes: {},
hiddenAssets: {},
hiddenObjects: {},
moderationReports: [],
guardrails: { ...PHASE5_GUARDRAILS },
settings: defaultVisualSettings(),
account: null,
publishLog: [],
pendingPublishLog: [],
worldMode: 'shared',
serverSync: {
lastServerEventId: null,
authority: { ...DEFAULT_SERVER_AUTHORITY },
clock: { worldTimeMs: now, syncedAt: now, dayMs: DAY_MS },
dynamicTargets: {},
pendingObjectVisuals: {}
},
tombstones: { assets: {}, objects: {} },
deletedSeedAssetNames: [],
dynamicSummons: []
};
}
// Default asset construction lives in the backend seed data, not app.js.
function alignPixelsToBottom(pixels, size) {
return alignPixelsToBottomRect(pixels, size, size);
}
function alignPixelsToBottomRect(pixels, width, height = width) {
const source = normalizePixels(pixels, width, height);
let maxY = -1;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (source[y * width + x]) maxY = Math.max(maxY, y);
}
}
if (maxY < 0 || maxY === height - 1) return source;
const dy = height - 1 - maxY;
const out = blankPixels(width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const value = source[y * width + x];
if (value && y + dy < height) out[(y + dy) * width + x] = value;
}
}
return out;
}
function recordSyncEvent(event) {
if (!event) return;
if (isSharedWorld()) {
const command = sharedCommandFromLocalEvent(event);
if (command) queueSharedCommand(command);
return;
}
state.sync ||= { lastEventId: null };
state.sync.lastEventId = event.id || state.sync.lastEventId;
}
function sharedCommandFromLocalEvent(event) {
if (!event?.type) return null;
if (event.type === 'asset.upsert' && event.asset) return makeSharedCommand('asset.create', { asset: Phase2Sync?.unpackAsset ? Phase2Sync.unpackAsset(event.asset) : event.asset });
if (event.type === 'asset.delete' && event.assetId) return makeSharedCommand('asset.delete', { assetId: event.assetId });
if (event.type === 'object.upsert' && event.object) {
const object = event.kind === 'dynamic'
? Phase2Sync?.unpackDynamic?.(event.object) || event.object
: Phase2Sync?.unpackPlacement?.(event.object) || event.object;
return makeSharedCommand('object.publish', { kind: event.kind === 'dynamic' ? 'dynamic' : 'static', object });
}
if (event.type === 'object.delete' && event.objectId) return makeSharedCommand('object.delete', { kind: event.kind === 'dynamic' ? 'dynamic' : 'static', objectId: event.objectId });
return null;
}
function applySyncEvent(event) {
if (!event) return false;
if (isSharedWorld() && !event.serverEventId) {
console.warn('Rejected non-server sync event in shared world.', event);
return false;
}
const unpackObject = (kind, object) => kind === 'dynamic'
? Phase2Sync?.unpackDynamic?.(object) || object
: Phase2Sync?.unpackPlacement?.(object) || object;
if (isSharedWorld()) applyServerIssuedEvent(event, unpackObject);
else if (StateIndex?.reduce) StateIndex.reduce(state, event, { unpackAsset: Phase2Sync?.unpackAsset, unpackObject });
else Phase2Sync?.applyEvent?.(state, event);
rebuildWorldIndex();
if (isSharedWorld() && (event.type === 'dynamic.move' || (event.type === 'object.upsert' && event.kind === 'dynamic'))) hydrateRuntime();
spriteCache.clear();
state.sync ||= { lastEventId: null };
state.sync.lastEventId = event.id || state.sync.lastEventId;
return true;
}
function applyServerIssuedEvent(event, unpackObject) {
ensureWorldProtectionState();
if (event.type === 'world.phase') {
state.serverSync.clock = {
worldTimeMs: Number(event.worldTimeMs ?? event.serverNow ?? event.serverAt) || Date.now(),
syncedAt: Date.now(),
dayMs: Number(event.dayMs) || DAY_MS,
phase: event.phase || null,
serverEventId: event.serverEventId || null
};
} else if (event.type === 'dynamic.move') {
const object = event.object ? unpackObject('dynamic', event.object) : null;
const objectId = String(event.objectId || event.dynamicId || object?.id || '');
if (!objectId || isObjectTombstoned(objectId, Number(object?.version || event.objectVersion || 1))) return;
const target = {
objectId,
x: Number(event.x ?? object?.serverState?.x ?? object?.x ?? object?.homeX ?? 0),
y: Number(event.y ?? object?.serverState?.y ?? object?.y ?? object?.homeY ?? 0),
targetX: Number(event.targetX ?? object?.serverState?.targetX ?? event.x ?? object?.x ?? object?.homeX ?? 0),
targetY: Number(event.targetY ?? object?.serverState?.targetY ?? event.y ?? object?.y ?? object?.homeY ?? 0),
homeX: Number(event.homeX ?? object?.homeX ?? 0),
homeY: Number(event.homeY ?? object?.homeY ?? 0),
facing: Number(event.facing ?? object?.serverState?.facing ?? 1) || 1,
serverAt: Number(event.serverAt) || Date.now()
};
state.serverSync.dynamicTargets[objectId] = target;
delete state.serverSync.pendingObjectVisuals?.[objectId];
if (object?.id) {
const normalized = normalizeDynamicSummons([{ ...object, serverState: target }])[0];
const index = state.dynamicSummons.findIndex((item) => item.id === normalized.id);
if (index >= 0) state.dynamicSummons[index] = normalized;
else state.dynamicSummons.push(normalized);
}
} else if (event.type === 'asset.upsert' && event.asset) {
const asset = event.asset.p && Phase2Sync?.unpackAsset ? Phase2Sync.unpackAsset(event.asset) : event.asset;
if (!asset?.id || isAssetTombstoned(asset.id, asset.version || event.assetVersion || 1)) return;
const index = state.assets.findIndex((item) => item.id === asset.id);
if (index >= 0) state.assets[index] = normalizeAsset(asset);
else state.assets.unshift(normalizeAsset(asset));
} else if (event.type === 'object.upsert' && event.object) {
const kind = event.kind === 'dynamic' ? 'dynamic' : 'static';
const object = unpackObject(kind, event.object);
if (!object?.id || isObjectTombstoned(object.id, object.version || event.objectVersion || 1)) return;
const list = kind === 'dynamic' ? state.dynamicSummons : state.placed;
const normalized = kind === 'dynamic' ? normalizeDynamicSummons([object])[0] : normalizePlacements([object])[0];
const index = list.findIndex((item) => item.id === normalized.id);
if (index >= 0) list[index] = normalized;
else list.push(normalized);
delete state.serverSync.pendingObjectVisuals?.[normalized.id];
} else if (event.type === 'object.delete' && event.objectId) {
const kind = event.kind === 'dynamic' ? 'dynamic' : 'static';
const tombstone = event.tombstone || { id: event.objectId, deletedAt: event.serverAt, deletedBy: event.actorAccountId, version: event.objectVersion || 1 };
state.tombstones.objects[event.objectId] = tombstone;
if (kind === 'dynamic') state.dynamicSummons = state.dynamicSummons.filter((item) => item.id !== event.objectId);
else state.placed = state.placed.filter((item) => item.id !== event.objectId);
delete state.serverSync.pendingObjectVisuals?.[event.objectId];
delete state.objectVotes?.[event.objectId];
delete state.hiddenObjects?.[event.objectId];
state.moderationReports = (state.moderationReports || []).filter((report) => report.objectId !== event.objectId);
} else if (event.type === 'asset.delete' && event.assetId) {
state.tombstones.assets[event.assetId] = event.tombstone || { id: event.assetId, deletedAt: event.serverAt, deletedBy: event.actorAccountId, version: event.assetVersion || 1 };
const removedObjectIds = new Set((event.objectTombstones || []).map((tombstone) => {
if (tombstone?.id) state.tombstones.objects[tombstone.id] = tombstone;
return tombstone?.id;
}).filter(Boolean));
state.assets = state.assets.filter((asset) => asset.id !== event.assetId);
state.placed = state.placed.filter((item) => !removedObjectIds.has(item.id));
state.dynamicSummons = state.dynamicSummons.filter((item) => !removedObjectIds.has(item.id));
delete state.assetVotes?.[event.assetId];
delete state.hiddenAssets?.[event.assetId];
for (const id of removedObjectIds) {
delete state.objectVotes?.[id];
delete state.hiddenObjects?.[id];
}
state.moderationReports = (state.moderationReports || []).filter((report) => !removedObjectIds.has(report.objectId));
}
state.serverSync.lastServerEventId = event.serverEventId || state.serverSync.lastServerEventId;
}
function cachePhase2Snapshot() {
if (Phase2Sync?.cachePixelBlobs) {
const assets = state.assets || [];
const buildBlobsOnMainThread = () => assets.map((asset) => buildPixelBlob(asset.faces?.right || asset.pixels || blankPixels(assetWidth(asset), assetHeight(asset)), assetWidth(asset), assetHeight(asset)));
const cacheBlobs = (blobs) => Phase2Sync.cachePixelBlobs(blobs).catch((error) => console.warn('Phase 2 pixel blob cache failed.', error));
if (WorkerClient?.canUseWorkers?.() && WorkerClient?.buildPixelBlobs) {
WorkerClient.buildPixelBlobs(assets)
.then(cacheBlobs)
.catch((error) => {
console.warn('Pixel worker blob build failed; using main thread.', error);
cacheBlobs(buildBlobsOnMainThread());
});
} else {
cacheBlobs(buildBlobsOnMainThread());
}
}
if (Phase2Sync?.cacheAssets) {
Phase2Sync.cacheAssets(state.assets || []).catch((error) => console.warn('Phase 2 asset cache failed.', error));
}
if (Phase2Sync?.makeSnapshot && Phase2Sync?.cacheSnapshot) {
Phase2Sync.cacheSnapshot(Phase2Sync.makeSnapshot(state)).catch((error) => console.warn('Phase 2 snapshot cache failed.', error));
}
}
function getWorldObjectCount() {
return (state.placed?.length || 0) + (state.dynamicSummons?.length || 0);
}
function normalizeModerationReports(input) {
const list = Array.isArray(input) ? input : [];
return list
.map((report) => ({
id: report.id || uid(),
objectId: report.objectId || report.id || '',
assetId: report.assetId || '',
objectKind: report.objectKind === 'dynamic' ? 'dynamic' : 'static',
assetName: report.assetName || 'Untitled',
assetAuthor: report.assetAuthor || 'Local Artist',
reporter: report.reporter || 'local',
reason: report.reason || 'local-report',
createdAt: Number(report.createdAt) || Date.now()
}))
.filter((report) => report.objectId && report.assetId)
.slice(-PHASE5_GUARDRAILS.maxReports);
}
function isTerrainCompatible(asset, tile) {
if (!asset || !tile) return false;
if (asset.category === 'static' && (asset.subtype === 'water' || asset.subtype === 'ship')) return tile.type === 'water';
if (asset.category === 'dynamic' && asset.subtype === 'fish') return tile.type === 'water';
return tile.type !== 'water';
}
function computeAssetContentHash(asset) {
const payload = [
asset.category || '',
asset.subtype || '',
asset.size || '',
asset.width || '',
asset.height || '',
asset.blobId || '',
asset.pixels || '',
asset.faces?.right || '',
asset.faces?.left || '',
asset.meta?.depthPixels || '',
JSON.stringify(asset.meta?.lightPixels || []),
JSON.stringify(asset.meta?.particlePixels || []),
JSON.stringify(asset.meta?.particleConfig || null),
asset.meta?.frontSide || '',
asset.meta?.door ? `${asset.meta.door.x},${asset.meta.door.y}` : ''
].join('|');
return `fnv1a:${fnv1a(payload)}`;
}
function findEquivalentCollectionAsset(asset) {
if (!asset?.contentHash) return null;
const owner = normalizeOwnerAccountId(asset.ownerAccountId, currentAccountId());
return (state.assets || []).find((item) => item.id !== asset.id
&& item.contentHash === asset.contentHash
&& item.name === asset.name
&& item.category === asset.category
&& item.subtype === asset.subtype
&& assetWidth(item) === assetWidth(asset)
&& assetHeight(item) === assetHeight(asset)
&& normalizeOwnerAccountId(item.ownerAccountId, currentAccountId()) === owner) || null;
}
function findAsset(id) {
return worldIndex.assetById?.get(id) || state.assets.find((asset) => asset.id === id) || null;
}
function normalizeDepthPixels(input, width, height = width) {
const out = Array(Math.max(1, width) * Math.max(1, height)).fill(0);
if (typeof input === 'string') {
for (let i = 0; i < Math.min(out.length, input.length); i++) {
const ch = input[i];
out[i] = ch === '1' ? 1 : (ch === '-' || ch === '_' || ch === 'l' || ch === 'L') ? -1 : 0;
}
return out;
}
if (!Array.isArray(input)) return out;
for (let i = 0; i < Math.min(out.length, input.length); i++) {
const value = Number(input[i]) || 0;
out[i] = value > 0 ? 1 : value < 0 ? -1 : 0;
}
return out;
}
function encodeDepthPixels(input) {
return Array.from(input || []).map((v) => Number(v) > 0 ? '1' : Number(v) < 0 ? '-' : '.').join('');
}
function resizeDepthPixels(source, oldSize, newSize) {
const normalized = normalizeDepthPixels(source, oldSize);
const out = Array(newSize * newSize).fill(0);
const min = Math.min(oldSize, newSize);
const xOffset = Math.floor((newSize - min) / 2);
const yOffset = Math.floor((newSize - min) / 2);
const oldOffset = Math.floor((oldSize - min) / 2);
for (let y = 0; y < min; y++) {
for (let x = 0; x < min; x++) {
out[(y + yOffset) * newSize + (x + xOffset)] = normalized[(y + oldOffset) * oldSize + (x + oldOffset)] || 0;
}
}
return out;
}
function getAssetDepth(asset, x, y, side = 'right') {
const w = assetWidth(asset);
const h = assetHeight(asset);
const depth = normalizeDepthPixels(asset.meta?.depthPixels || [], w, h);
const sx = asset.category === 'dynamic' && side === 'left' ? w - 1 - x : x;
return depth[y * w + sx] || 0;
}
function applyDepthToColor(hex, depth) {
return shadeAssetPixelColor(hex, visualSettings().enableLights === false ? 0 : depth, 0, 0, 1, renderPhase);
}
function depthLocalLightResponse(distance, reach) {
const normalized = clamp(distance / Math.max(0.0001, reach), 0, 1.75);
// Keep a broad bright plateau so distance is not the main factor, while
// still giving the light source itself a strong flare and a soft tail.
const plateau = 1 - Math.pow(Math.min(normalized, 1), 1.12) * 0.2;
const shoulder = Math.pow(clamp(1 - normalized / 0.92, 0, 1), 1.08);
const hotspot = Math.pow(clamp(1 - normalized / 0.18, 0, 1), 4.1);
const tail = Math.pow(clamp(1 - normalized / 1.55, 0, 1), 2.0) * 0.42;
return clamp(plateau * 0.72 + shoulder * 0.36 + hotspot * 0.92 + tail, 0, 1.76);
}
function depthLightFloor(depth, sourceKind, response, hotspot, edge) {
if (!depth) return 0;
const facing = clamp(edge, 0, 1);
const responseFloor = clamp(Math.max(Number(response) || 0, (Number(hotspot) || 0) * 0.7), 0, 1.55);
const kindBase = sourceKind === 'self' ? 2.8 : sourceKind === 'cursor' ? 5.35 : 3.45;
const depthBase = depth > 0 ? (sourceKind === 'cursor' ? 1.22 : 1.0) : (sourceKind === 'cursor' ? 0.78 : 0.56);
const faceFloor = 0.24 + facing * 0.72 + (Number(hotspot) || 0) * 0.5;
return kindBase * depthBase * faceFloor * (0.32 + responseFloor * 0.68);
}
function shadeAssetPixelColor(hex, depth, x, y, width, phase, pixels = null, depths = null, lights = [], height = width) {
const rgb = parseHex(hex);
if (!rgb) return hex;
const activePhase = phase || renderPhase || getPhase();
const dirX = clamp(-(activePhase?.shadow?.dirX || 0), -1, 1);
const size = Math.max(width, height);
const vertical = 1 - (y / Math.max(1, height - 1));
const horizontal = ((x / Math.max(1, width - 1)) - 0.5) * dirX;
const solarDepth = (activePhase?.key === 'night' ? 3.0 : activePhase?.key === 'evening' || activePhase?.key === 'morning' ? 8.5 : 12.0);
const depthBoost = depth * solarDepth * 0.35;
const exposure = (vertical * 0.62 + horizontal * 0.5) * (activePhase?.key === 'night' ? 3.8 : 10);
const edgeBoost = getDepthEdgeLightBoost(depth, x, y, width, pixels, depths, lights, activePhase, height);
const selfShadow = getDepthCellSelfShadow(depth, x, y, width, pixels, depths, activePhase, height);
let r = rgb.r + depthBoost + exposure + edgeBoost + selfShadow;
let g = rgb.g + depthBoost + exposure + edgeBoost + selfShadow;
let b = rgb.b + depthBoost + exposure + edgeBoost + selfShadow;
let localTintR = 0;
let localTintG = 0;
let localTintB = 0;
let localTintWeight = 0;
let localLift = 0;
if ((areNightLightsActive(activePhase) || hasCursorInspectionLight(lights)) && lights?.length) {
for (const light of lights) {
const lc = parseHex(light.c || '#ffd86a');
if (!lc) continue;
const isAssetLight = !!light.assetLight;
const isCursorLight = !!light.cursor;
const sourceKind = isAssetLight ? 'self' : isCursorLight ? 'cursor' : 'external';
const dist = Math.hypot((light.x + 0.5) - (x + 0.5), (light.y + 0.5) - (y + 0.5));
const reach = isAssetLight ? Math.max(1.85, size * 0.24) : isCursorLight ? Math.max(4.2, Number(light.radiusCells) || size * 0.78) : Math.max(2.25, Number(light.radiusCells) || size * 0.46);
const t = 1 - clamp(dist / reach, 0, 1);
const sourceHotspot = Math.pow(clamp(1 - dist / Math.max(0.001, reach * (isCursorLight ? 0.42 : 0.24)), 0, 1), isCursorLight ? 1.75 : 2.8);
const assetResponse = clamp(Math.pow(t, 1.45) * 0.52 + sourceHotspot * 1.18, 0, 1.58);
const cursorResponse = clamp(Math.pow(clamp(t, 0, 1), 0.92) * 0.72 + sourceHotspot * 1.28, 0, 1.85);
const depthResponse = depth ? (isAssetLight ? assetResponse : isCursorLight ? cursorResponse : depthLocalLightResponse(dist, reach)) : (isAssetLight ? assetResponse : t);
const response = depth ? depthResponse : t;
if (response <= 0) continue;
const sourceIntensity = clamp(Number(light.intensity ?? 1) || 1, 0.18, 1.85);
const edge = getDepthLightFacing(depth, x, y, width, pixels, depths, light.x, light.y, height);
const depthEdgePresence = isAssetLight
? (0.18 + Math.pow(Math.max(0, edge), 1.4) * 0.74 + sourceHotspot * 0.7)
: isCursorLight ? (0.22 + edge * 1.18 + sourceHotspot * 0.58) : (0.06 + edge * 1.24);
const edgePresence = depth ? depthEdgePresence : 1;
const localDepthMultiplier = depth ? DEPTH_LOCAL_LIGHT_RESPONSE_MULTIPLIER : 1.1;
const strengthBase = depth
? (isAssetLight ? (sourceHotspot * 0.34 + depthResponse * 0.045) : isCursorLight ? (sourceHotspot * 0.72 + depthResponse * 0.44) : (0.12 + depthResponse * 0.22))
: t * t;
const floorLift = depthLightFloor(depth, sourceKind, response, sourceHotspot, edge);
const strength = (strengthBase * (isAssetLight ? (10.5 + sourceHotspot * 18 + Math.abs(depth) * 1.2) : isCursorLight ? (6.4 + sourceHotspot * 10.5 + Math.abs(depth) * 2.6) : (4.2 + Math.abs(depth) * 2.6)) * edgePresence + floorLift * (isCursorLight ? 1.55 : 1)) * sourceIntensity * localDepthMultiplier * (isCursorLight && depth ? CURSOR_DEPTH_REFLECTION_MULTIPLIER : 1);
const mix = Math.min(depth ? (isAssetLight ? 0.055 : isCursorLight ? 0.30 : 0.48) : (isAssetLight ? 0.06 : isCursorLight ? 0.20 : 0.24), (0.008 + response * (depth ? (isAssetLight ? 0.012 : isCursorLight ? 0.072 : 0.075) : (isAssetLight ? 0.028 : isCursorLight ? 0.088 : 0.10))) * sourceIntensity * (depth ? (isAssetLight ? 0.7 : isCursorLight ? 1.45 : 1.35) : 1));
r = lerp(r, lc.r + strength, mix);
g = lerp(g, lc.g + strength * 0.82, mix * 0.94);
b = lerp(b, lc.b + strength * 0.74, mix * 0.9);
const colorWash = (depth ? (isAssetLight ? 0.004 : isCursorLight ? 0.034 : 0.045) : (isAssetLight ? 0.006 : isCursorLight ? 0.024 : 0.03)) * sourceIntensity * edgePresence * (depth ? (isAssetLight ? sourceHotspot : isCursorLight ? (depthResponse * 0.72 + sourceHotspot * 0.58) : (0.26 + depthResponse * 0.22)) : t);
r += (lc.r - 152) * colorWash;
g += (lc.g - 152) * colorWash * 0.96;
b += (lc.b - 152) * colorWash * 0.92;
const tintBase = depth ? (isAssetLight ? sourceHotspot * 0.11 : isCursorLight ? (depthResponse * 1.12 + sourceHotspot * 0.78) : (0.12 + depthResponse * 0.18)) : Math.pow(t, 1.25);
const tintPower = tintBase * sourceIntensity * (depth ? (isAssetLight ? 0.016 : isCursorLight ? 0.078 : 0.12) * DEPTH_LOCAL_LIGHT_RESPONSE_MULTIPLIER : (isAssetLight ? 0.012 : isCursorLight ? 0.024 : 0.03)) * (depth ? edgePresence : 1);
localTintR += lc.r * tintPower;
localTintG += lc.g * tintPower;
localTintB += lc.b * tintPower;
localTintWeight += tintPower;
const liftBase = depth ? (isAssetLight ? (sourceHotspot * 0.42 + Math.pow(t, 2.2) * 0.035) : isCursorLight ? (depthResponse * 1.18 + sourceHotspot * 0.78) : (0.12 + depthResponse * 0.16)) : Math.pow(t, 1.9);
localLift += (liftBase * (depth ? (isAssetLight ? 0.85 : isCursorLight ? 2.35 : 2.4) * DEPTH_LOCAL_LIGHT_RESPONSE_MULTIPLIER : 3.6) * (depth ? edgePresence : 1) + floorLift * (isAssetLight ? 0.16 : isCursorLight ? 0.36 : 0.24)) * sourceIntensity;
}
}
const litBeforeQuantization = { r, g, b };
const quantized = quantizePixelShade(rgb, { r, g, b }, activePhase, depth);
r = clamp(quantized.r, 0, 255);
g = clamp(quantized.g, 0, 255);
b = clamp(quantized.b, 0, 255);
if (localTintWeight > 0) {
const inv = 1 / localTintWeight;
const tintMix = clamp(localTintWeight / (depth ? 5.1 : 9.0), 0, depth ? 0.42 : 0.16);
const lift = clamp(localLift, 0, depth ? 22 : 12);
const chromaRestore = clamp(localTintWeight / (depth ? 0.95 : 8.8), 0, depth ? 0.96 : 0.16);
r = lerp(clamp(r + lift, 0, 255), litBeforeQuantization.r, chromaRestore);
g = lerp(clamp(g + lift * 0.88, 0, 255), litBeforeQuantization.g, chromaRestore);
b = lerp(clamp(b + lift * 0.8, 0, 255), litBeforeQuantization.b, chromaRestore);
r = lerp(r, localTintR * inv, tintMix);
g = lerp(g, localTintG * inv, tintMix * 0.95);
b = lerp(b, localTintB * inv, tintMix * 0.92);
}
return `#${Math.round(clamp(r, 0, 255)).toString(16).padStart(2,'0')}${Math.round(clamp(g, 0, 255)).toString(16).padStart(2,'0')}${Math.round(clamp(b, 0, 255)).toString(16).padStart(2,'0')}`;
}
function quantizePixelShade(base, shaded, phase, depth = 0) {
// Pixel-art lighting: use 11 discrete bands (-5..+5). The old -2/+2 endpoints
// map to the new -5/+5 endpoints, so maximum contrast is preserved.
const delta = ((shaded.r + shaded.g + shaded.b) - (base.r + base.g + base.b)) / 3;
const nightBias = phase?.key === 'night' ? -1.12 : phase?.key === 'evening' || phase?.key === 'morning' ? -0.38 : 0;
let level = Math.round(delta / 7.2);
level = clamp(level + (depth > 0 ? 0.45 : depth < 0 ? -0.45 : 0) + nightBias, -5, 5);
const amount = [-34, -27, -21, -16, -8, 0, 9, 18, 24, 29, 34][Math.round(level) + 5] || 0;
const tintStrength = Math.abs(level) / 5;
const tint = phase?.key === 'night'
? { r: -10 * tintStrength, g: -6 * tintStrength, b: 12 * tintStrength }
: phase?.key === 'evening'
? { r: 12 * tintStrength, g: 2 * tintStrength, b: -8 * tintStrength }
: { r: 0, g: 0, b: 0 };
return {
r: base.r + amount + tint.r,
g: base.g + amount + tint.g,
b: base.b + amount + tint.b
};
}
function mirrorDepthPixels(depths, width, height = width) {
const source = normalizeDepthPixels(depths || [], width, height);
const out = Array(width * height).fill(0);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) out[y * width + (width - 1 - x)] = source[y * width + x] || 0;
}
return out;
}
function getAssetLightPointsForSide(asset, side = 'right') {
const w = assetWidth(asset);
const h = assetHeight(asset);
const lights = Array.isArray(asset.meta?.lightPixels) ? asset.meta.lightPixels : [];
return lights.map((p) => ({
x: asset.category === 'dynamic' && side === 'left' ? w - 1 - p.x : p.x,
y: p.y,
c: colorToHex(p.c || asset.meta?.lightColor || nearestPaletteCode('#ffd86a')),
assetLight: true,
intensity: Number.isFinite(p.intensity) ? p.intensity : 0.92
})).filter((p) => Number.isFinite(p.x) && Number.isFinite(p.y) && p.x >= 0 && p.y >= 0 && p.x < w && p.y < h);
}
function isObjectOutlinePixel(pixels, x, y, width, height = width) {
if (!pixels || !pixels[y * width + x]) return false;
const dirs = [[1,0],[-1,0],[0,1],[0,-1]];
for (const [dx, dy] of dirs) {
const nx = x + dx, ny = y + dy;
if (nx < 0 || ny < 0 || nx >= width || ny >= height) return true;
if (!pixels[ny * width + nx]) return true;
}
return false;
}
function collectDepthEdgeDirs(x, y, width, pixels, depths, depth, height = width) {
if (!pixels || !depths) return [];
const dirs = [[1,0],[-1,0],[0,1],[0,-1]];
const edgeDirs = [];
for (const [dx, dy] of dirs) {
const nx = x + dx, ny = y + dy;
const neighborInside = nx >= 0 && ny >= 0 && nx < width && ny < height;
const neighborOpaque = neighborInside && pixels[ny * width + nx];
const neighborDepth = neighborOpaque ? (depths[ny * width + nx] || 0) : 0;
if (!neighborOpaque || neighborDepth !== depth) edgeDirs.push([dx, dy]);
}
return edgeDirs;
}
function getDepthCornerStrength(edgeDirs) {
if (!edgeDirs?.length) return 0;
if (edgeDirs.length < 2) return 0;
let orthogonalPairs = 0;
for (let i = 0; i < edgeDirs.length; i++) {
for (let j = i + 1; j < edgeDirs.length; j++) {
const [ax, ay] = edgeDirs[i];
const [bx, by] = edgeDirs[j];
if ((ax && by) || (ay && bx)) orthogonalPairs++;
}
}
if (!orthogonalPairs) return edgeDirs.length >= 3 ? 0.6 : 0;
return clamp(0.42 + orthogonalPairs * 0.28 + (edgeDirs.length >= 3 ? 0.18 : 0), 0, 1.35);
}
function getDepthCellSelfShadow(depth, x, y, width, pixels, depths, phase, height = width) {
if (!depth || !pixels || !depths) return 0;
const edgeDirs = collectDepthEdgeDirs(x, y, width, pixels, depths, depth, height);
if (!edgeDirs.length) return depth < 0 ? -5 : 0;
const sunX = clamp(-(phase?.shadow?.dirX || -0.45), -1, 1);
const sunY = -0.72;
let highlight = 0;
let shade = 0;
for (const [dx, dy] of edgeDirs) {
const dot = dx * sunX + dy * sunY;
if (dot > 0.34) highlight = Math.max(highlight, dot);
if (dot < -0.18) shade = Math.max(shade, -dot);
if (dy > 0) shade = Math.max(shade, 0.42);
}
if (depth > 0) return highlight * 9 - shade * 15;
return -8 - shade * 8 + highlight * 3;
}
function getDepthLightFacing(depth, x, y, width, pixels, depths, lightX, lightY, height = width) {
if (!depth || !pixels || !depths) return 0;
const edgeDirs = collectDepthEdgeDirs(x, y, width, pixels, depths, depth, height);
if (!edgeDirs.length) return 0;
const lx = lightX - x;
const ly = lightY - y;
const len = Math.hypot(lx, ly) || 1;
const vx = lx / len, vy = ly / len;
let bestDot = -1;
for (const [dx, dy] of edgeDirs) bestDot = Math.max(bestDot, dx * vx + dy * vy);
return depth > 0 ? Math.max(0, bestDot) : Math.max(0, -bestDot);
}
function getDepthEdgeLightBoost(depth, x, y, width, pixels, depths, lights, phase, height = width) {
if (!depth || !pixels || !depths || !(areNightLightsActive(phase) || hasCursorInspectionLight(lights)) || !lights?.length) return 0;
const edgeDirs = collectDepthEdgeDirs(x, y, width, pixels, depths, depth, height);
if (!edgeDirs.length) return 0;
const outerEdge = edgeDirs.some(([dx, dy]) => {
const nx = x + dx, ny = y + dy;
return nx < 0 || ny < 0 || nx >= width || ny >= height || !pixels[ny * width + nx];
});
const cornerStrength = getDepthCornerStrength(edgeDirs);
const reach = Math.max(2.25, Math.max(width, height) * 0.46);
let total = 0;
for (const light of lights) {
if (!light) continue;
const d = Math.hypot(light.x - x, light.y - y);
const isCursor = !!light.cursor;
const isExternal = !!light.externalLight;
const lightReach = isCursor ? Math.max(2.6, Math.max(width, height) * 0.52) : isExternal ? Math.max(2.25, Number(light.radiusCells) || reach) : reach;
const nearSource = Math.pow(clamp(1 - d / Math.max(1.2, lightReach * (isCursor ? 0.34 : 0.18)), 0, 1), isCursor ? 1.55 : 2.3);
const distanceResponse = isCursor
? clamp(Math.pow(clamp(1 - d / lightReach, 0, 1), 0.82) * 0.72 + nearSource * 0.72, 0, 1.7)
: depthLocalLightResponse(d, lightReach);
if (distanceResponse <= 0) continue;
const facing = getDepthLightFacing(depth, x, y, width, pixels, depths, light.x, light.y, height);
if (!isCursor && !facing) continue;
const facingResponse = isCursor ? Math.max(facing, nearSource * 0.42, 0.14) : facing;
const sourceIntensity = clamp(Number(light.intensity ?? 1) || 1, 0.25, isCursor ? 2.45 : 1.85);
const plateau = isCursor ? distanceResponse : 0.74 + distanceResponse * 0.34;
const edgeFocus = isCursor ? (0.44 + facingResponse * 1.26) : (0.4 + facing * 0.95);
const edgeStrength = outerEdge ? 1.08 : 0.94;
const cornerBoost = 1 + cornerStrength * (isCursor ? 0.58 + nearSource * 0.28 : 0.9 + facing * 0.38);
const sourceBoost = 1 + nearSource * (isCursor ? 1.35 : 1.12);
const cursorAmplifier = isCursor ? CURSOR_DEPTH_REFLECTION_MULTIPLIER : 1;
total += plateau * edgeFocus * edgeStrength * cornerBoost * sourceBoost * sourceIntensity * (depth > 0 ? 8.2 : 6.4) * DEPTH_LOCAL_LIGHT_RESPONSE_MULTIPLIER * cursorAmplifier;
}
return clamp(total, 0, depth > 0 ? 230 : 164);
}
function resizePixels(source, oldSize, newSize) {
const out = blankPixels(newSize);
const min = Math.min(oldSize, newSize);
const xOffset = Math.floor((newSize - min) / 2);
const yOffset = Math.floor((newSize - min) / 2);
const oldOffset = Math.floor((oldSize - min) / 2);
for (let y = 0; y < min; y++) {
for (let x = 0; x < min; x++) {
out[(y + yOffset) * newSize + (x + xOffset)] = source[(y + oldOffset) * oldSize + (x + oldOffset)] || null;
}
}
return out;
}
function mirrorPixels(pixels, width, height = width) {
const source = normalizePixels(pixels, width, height);
const out = blankPixels(width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
out[y * width + (width - 1 - x)] = source[y * width + x] || null;
}
}
return out;
}
function hasAnyPixel(pixels) {
return Array.isArray(pixels) && pixels.some(Boolean);
}
function fade(t) {
return t * t * t * (t * (t * 6 - 15) + 10);
}
function hash2(ix, iy) {
let h = ix * 374761393 + iy * 668265263;
h = (h ^ (h >> 13)) * 1274126177;
return (h ^ (h >> 16)) >>> 0;
}
function gradDot(ix, iy, x, y) {
const h = hash2(ix, iy) & 7;
const gx = [1, -1, 1, -1, 1, -1, 0, 0][h];
const gy = [1, 1, -1, -1, 0, 0, 1, -1][h];
return gx * (x - ix) + gy * (y - iy);
}
function perlinNoise(x, y) {
const x0 = Math.floor(x), y0 = Math.floor(y);
const x1 = x0 + 1, y1 = y0 + 1;
const sx = fade(x - x0), sy = fade(y - y0);
const n00 = gradDot(x0, y0, x, y);
const n10 = gradDot(x1, y0, x, y);
const n01 = gradDot(x0, y1, x, y);
const n11 = gradDot(x1, y1, x, y);
const ix0 = lerp(n00, n10, sx);
const ix1 = lerp(n01, n11, sx);
return lerp(ix0, ix1, sy) * .5 + .5;
}
function fractalPerlin(x, y, octaves = 4) {
let amp = .5;
let freq = 1;
let total = 0;
let norm = 0;
for (let i = 0; i < octaves; i++) {
total += perlinNoise(x * freq, y * freq) * amp;
norm += amp;
amp *= .5;
freq *= 2;
}
return total / norm;
}
function smoothNoise(x, y) {
return Math.sin(x * .71 + y * .37) * .5 + Math.sin(x * .23 - y * .61) * .32 + Math.sin((x + y) * .17) * .18;
}
function cap(value) {
return `${value}`.charAt(0).toUpperCase() + `${value}`.slice(1);
}
function buildPalette() {
// 91 one-character palette slots.
// 0-j are the compact basic palette shown in normal draw mode.
// k-Z plus safe ASCII symbols are advanced slots; storage remains one char per pixel.
const basicColors = [
// Ink, paper, and neutral anchors
'#111827', '#374151', '#6b7280', '#d1d5db', '#fff7ed',
// Common drawing colors arranged from warm to cool
'#7f1d1d', '#dc2626', '#f97316', '#facc15', '#84cc16',
'#16a34a', '#14b8a6', '#06b6d4', '#2563eb', '#4f46e5',
'#7c3aed', '#c026d3', '#ec4899', '#f5d0a9', '#7c4a2d'
];
const advancedColors = [
'#fafafa', '#f5f5f4', '#e7e5e4', '#d6d3d1', '#a8a29e', '#78716c', '#57534e', '#292524', '#0c0a09',
'#fef3c7', '#fde68a', '#d6a25f', '#9a6a3a', '#5c3b24',
'#fee2e2', '#fca5a5', '#ef4444', '#b91c1c', '#7f1d1d',
'#ffedd5', '#fdba74', '#f97316', '#c2410c', '#7c2d12',
'#fef9c3', '#fde047', '#eab308', '#a16207', '#713f12',
'#ecfccb', '#bef264', '#84cc16', '#4d7c0f', '#365314', '#dcfce7', '#86efac', '#15803d',
'#ccfbf1', '#5eead4', '#14b8a6', '#0f766e', '#134e4a',
'#cffafe', '#67e8f9', '#22d3ee', '#06b6d4', '#0e7490', '#e0f2fe', '#38bdf8',
'#dbeafe', '#93c5fd', '#3b82f6', '#2563eb', '#1d4ed8', '#1e3a8a',
'#e0e7ff', '#a5b4fc', '#6366f1', '#4f46e5', '#3730a3', '#ede9fe', '#c4b5fd', '#8b5cf6',
'#fae8ff', '#e879f9', '#c026d3', '#86198f', '#fce7f3', '#f9a8d4', '#ec4899', '#be185d'
];
const colors = [...basicColors, ...advancedColors];
return COLOR_CODES.split('').map((code, index) => ({ code, color: colors[index] || hslToHex((index * 47) % 360, 72, 58) }));
}
function pseudoNoise(value) {
const x = Math.sin(value * 12.9898 + 78.233) * 43758.5453;
return x - Math.floor(x);
}
function hslToHex(h, s, l) {
s /= 100; l /= 100;
const k = (n) => (n + h / 30) % 12;
const a = s * Math.min(l, 1 - l);
const f = (n) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
const toHex = (value) => Math.round(255 * value).toString(16).padStart(2, '0');
return `#${toHex(f(0))}${toHex(f(8))}${toHex(f(4))}`;
}
function hexToRgba(hex, alpha) {
const clean = hex.replace('#', '');
const bigint = parseInt(clean.length === 3 ? clean.split('').map((c) => c + c).join('') : clean, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
}
function hexToRgbParts(hex) {
const clean = String(hex || '#000000').replace('#', '');
const expanded = clean.length === 3 ? clean.split('').map((c) => c + c).join('') : clean.padEnd(6, '0').slice(0, 6);
const bigint = parseInt(expanded, 16);
return { r: (bigint >> 16) & 255, g: (bigint >> 8) & 255, b: bigint & 255 };
}
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s; const l = (max + min) / 2;
if (max === min) { h = 0; s = 0; }
else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
default: h = (r - g) / d + 4; break;
}
h *= 60;
}
return { h, s: s * 100, l: l * 100 };
}
function varyHexColor(hex, hueRange = 12, satRange = 10, lightRange = 10) {
const rgb = parseHex(hex);
if (!rgb) return hex;
const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
const h = mod(hsl.h + (Math.random() * 2 - 1) * hueRange, 360);
const s = clamp(hsl.s + (Math.random() * 2 - 1) * satRange, 14, 100);
const l = clamp(hsl.l + (Math.random() * 2 - 1) * lightRange, 10, 94);
return hslToHex(h, s, l);
}
function mixHex(a, b, t) {
const ca = hexToRgbParts(a);
const cb = hexToRgbParts(b);
const toHex = (value) => Math.round(value).toString(16).padStart(2, '0');
return `#${toHex(lerp(ca.r, cb.r, t))}${toHex(lerp(ca.g, cb.g, t))}${toHex(lerp(ca.b, cb.b, t))}`;
}
function toast(message) {
clearTimeout(toastTimer);
els.toast.textContent = message;
els.toast.hidden = false;
toastTimer = setTimeout(() => { els.toast.hidden = true; }, 1900);
}
function px(pixels, size, x, y, color) {
if (x >= 0 && x < size && y >= 0 && y < size) pixels[y * size + x] = color;
}
function rect(pixels, size, x, y, w, h, color) {
for (let yy = y; yy < y + h; yy++) for (let xx = x; xx < x + w; xx++) px(pixels, size, xx, yy, color);
}
function circle(pixels, size, cx, cy, r, color) {
for (let y = Math.floor(cy - r); y <= Math.ceil(cy + r); y++) {
for (let x = Math.floor(cx - r); x <= Math.ceil(cx + r); x++) {
if ((x - cx) ** 2 + (y - cy) ** 2 <= r ** 2) px(pixels, size, x, y, color);
}
}
}
function pxWH(pixels, width, height, x, y, color) {
const xx = Math.round(x);
const yy = Math.round(y);
if (xx >= 0 && xx < width && yy >= 0 && yy < height) pixels[yy * width + xx] = color;
}
function rectWH(pixels, width, height, x, y, w, h, color) {
for (let yy = y; yy < y + h; yy++) for (let xx = x; xx < x + w; xx++) pxWH(pixels, width, height, xx, yy, color);
}
function ellipseWH(pixels, width, height, cx, cy, rx, ry, color) {
for (let y = Math.floor(cy - ry); y <= Math.ceil(cy + ry); y++) {
for (let x = Math.floor(cx - rx); x <= Math.ceil(cx + rx); x++) {
if (((x - cx) ** 2) / Math.max(1, rx ** 2) + ((y - cy) ** 2) / Math.max(1, ry ** 2) <= 1) pxWH(pixels, width, height, x, y, color);
}
}
}
function lineWH(pixels, width, height, x0, y0, x1, y1, color) {
x0 = Math.round(x0); y0 = Math.round(y0); x1 = Math.round(x1); y1 = Math.round(y1);
const dx = Math.abs(x1 - x0);
const sx = x0 < x1 ? 1 : -1;
const dy = -Math.abs(y1 - y0);
const sy = y0 < y1 ? 1 : -1;
let err = dx + dy;
while (true) {
pxWH(pixels, width, height, x0, y0, color);
if (x0 === x1 && y0 === y1) break;
const e2 = 2 * err;
if (e2 >= dy) { err += dy; x0 += sx; }
if (e2 <= dx) { err += dx; y0 += sy; }
}
}
// Pixel Island default-art drawing code was moved out of app.js.
window.PixelIslandDebug = { ...(window.PixelIslandDebug || {}), applySyncEvent };
bootstrap();
})();