333/pixel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

split

Browse source
This commit is contained in:
33333-33333 2026-06-04 16:40:45 +09:00
commit 7fd7ba2e76
8 changed files with 512 additions and 147 deletions
Download patch file Download diff file Expand all files Collapse all files

92
admin/index.php
View file

@ -61,10 +61,25 @@ function thumbnail_html($json): string {
if (!$rows) {
for ($y = 0; $y < $height; $y++) $rows[] = substr($pixels, $y * $width, $width);
}
$palette = [
'0'=>'#1f2330','1'=>'#ffffff','2'=>'#8f9aa8','3'=>'#d7c59a','4'=>'#7a4f35','5'=>'#3f6f3f','6'=>'#5c8f52','7'=>'#8fcf68','8'=>'#2f5f88','9'=>'#67b7dc',
'a'=>'#f2d3a3','b'=>'#e09f67','c'=>'#c96b4b','d'=>'#8c3f3f','e'=>'#d94f70','f'=>'#9b5fc0','g'=>'#5b4aa3','h'=>'#3f7fbf','i'=>'#55b7a5','j'=>'#f0d84f'
$codes = str_split('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' . "!#$%&'()*+,-/:;<=>?@[]^_`{|}~");
$colors = [
'#111827', '#374151', '#6b7280', '#d1d5db', '#fff7ed',
'#7f1d1d', '#dc2626', '#f97316', '#facc15', '#84cc16',
'#16a34a', '#14b8a6', '#06b6d4', '#2563eb', '#4f46e5',
'#7c3aed', '#c026d3', '#ec4899', '#f5d0a9', '#7c4a2d',
'#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'
];
$palette = array_combine($codes, array_slice($colors, 0, count($codes))) ?: [];
$cells = '';
foreach (array_slice($rows, 0, $height) as $y => $row) {
$chars = preg_split('//u', (string)$row, -1, PREG_SPLIT_NO_EMPTY) ?: [];
@ -72,7 +87,7 @@ function thumbnail_html($json): string {
$ch = $chars[$x] ?? '.';
if ($ch === '.') continue;
$color = $palette[$ch] ?? sprintf('#%06x', (hexdec(substr(md5($ch), 0, 6)) & 0x7fffff) | 0x303030);
$cells .= '<i style="left:' . h($x) . 'px;top:' . h($y) . 'px;background:' . h($color) . '"></i>';
$cells .= '<i style="left:' . h(($x / $width) * 100) . '%;top:' . h(($y / $height) * 100) . '%;width:' . h(100 / $width) . '%;height:' . h(100 / $height) . '%;background:' . h($color) . '"></i>';
}
}
return '<div class="thumb" style="--w:' . h($width) . ';--h:' . h($height) . '">' . $cells . '</div>';
@ -108,6 +123,12 @@ function sqlite_db(string $path): PDO {
$db->exec('PRAGMA busy_timeout = 5000');
return $db;
}
function ensure_sqlite_anonymous_account(PDO $db): void {
$now = now_ms();
$hash = password_hash(bin2hex(random_bytes(16)), PASSWORD_DEFAULT);
$db->prepare('INSERT OR IGNORE INTO accounts(id, name, password_hash, created_at, updated_at) VALUES(?,?,?,?,?)')
->execute(['anonymous', 'Anonymous', $hash, $now, $now]);
}
function list_sqlite_accounts(string $path): array {
$db = sqlite_db($path);
if (!sqlite_tables_ready($db)) return [];
@ -186,8 +207,25 @@ function apply_sqlite_admin_action(string $path, array $post): void {
$accountId = clean_id($post['account_id'] ?? '');
if ($accountId === '' || $accountId === 'island-team') return;
$db->beginTransaction();
$db->prepare('UPDATE assets SET deleted_at = ?, deleted_by = ?, updated_at = ? WHERE owner_account_id = ? AND deleted_at IS NULL')->execute([$now, 'admin', $now, $accountId]);
$db->prepare('UPDATE objects SET deleted_at = ?, deleted_by = ?, updated_at = ? WHERE owner_account_id = ? AND deleted_at IS NULL')->execute([$now, 'admin', $now, $accountId]);
ensure_sqlite_anonymous_account($db);
$assetRows = $db->prepare('SELECT id, json FROM assets WHERE owner_account_id = ?');
$assetRows->execute([$accountId]);
foreach ($assetRows->fetchAll() ?: [] as $row) {
$asset = decode_json_value($row['json'] ?? '');
$asset['ownerAccountId'] = 'anonymous';
$asset['author'] = 'Anonymous';
$asset['updatedAt'] = $now;
$db->prepare('UPDATE assets SET owner_account_id = ?, author_name = ?, json = ?, updated_at = ? WHERE id = ?')
->execute(['anonymous', 'Anonymous', encode_json_value($asset), $now, $row['id']]);
}
$objectRows = $db->prepare('SELECT id, json FROM objects WHERE owner_account_id = ?');
$objectRows->execute([$accountId]);
foreach ($objectRows->fetchAll() ?: [] as $row) {
$object = decode_json_value($row['json'] ?? '');
$object['ownerAccountId'] = 'anonymous';
$db->prepare('UPDATE objects SET owner_account_id = ?, json = ?, updated_at = ? WHERE id = ?')
->execute(['anonymous', encode_json_value($object), $now, $row['id']]);
}
$db->prepare('DELETE FROM votes WHERE voter_account_id = ?')->execute([$accountId]);
$db->prepare("UPDATE reports SET status = 'closed' WHERE reporter_account_id = ?")->execute([$accountId]);
$db->prepare('DELETE FROM accounts WHERE id = ?')->execute([$accountId]);
@ -267,6 +305,12 @@ function apply_filedb_admin_action(string $path, array $post): void {
write_filedb($path, function(array &$db) use ($post) {
$action = (string)($post['admin_action'] ?? $post['moderation_action'] ?? '');
$now = now_ms();
$ensureAnonymous = function() use (&$db, $now): void {
$db['accounts'] = is_array($db['accounts'] ?? null) ? $db['accounts'] : [];
if (!isset($db['accounts']['anonymous'])) {
$db['accounts']['anonymous'] = ['id'=>'anonymous','name'=>'Anonymous','password_hash'=>password_hash(bin2hex(random_bytes(16)), PASSWORD_DEFAULT),'created_at'=>$now,'updated_at'=>$now,'disabled_at'=>null];
}
};
if ($action === 'rename_account') {
$accountId = clean_id($post['account_id'] ?? '');
$name = clean_text($post['name'] ?? '', '', 32);
@ -292,9 +336,25 @@ function apply_filedb_admin_action(string $path, array $post): void {
} elseif ($action === 'delete_account') {
$accountId = clean_id($post['account_id'] ?? '');
if ($accountId === '' || $accountId === 'island-team') return;
foreach ($db['assets'] as &$asset) if (($asset['owner_account_id'] ?? '') === $accountId && empty($asset['deleted_at'])) { $asset['deleted_at'] = $now; $asset['deleted_by'] = 'admin'; $asset['updated_at'] = $now; }
$ensureAnonymous();
foreach ($db['assets'] as &$asset) if (($asset['owner_account_id'] ?? '') === $accountId) {
$asset['owner_account_id'] = 'anonymous';
$asset['author_name'] = 'Anonymous';
$asset['updated_at'] = $now;
$json = decode_json_value($asset['json'] ?? []);
$json['ownerAccountId'] = 'anonymous';
$json['author'] = 'Anonymous';
$json['updatedAt'] = $now;
$asset['json'] = $json;
}
unset($asset);
foreach ($db['objects'] as &$object) if (($object['owner_account_id'] ?? '') === $accountId && empty($object['deleted_at'])) { $object['deleted_at'] = $now; $object['deleted_by'] = 'admin'; $object['updated_at'] = $now; }
foreach ($db['objects'] as &$object) if (($object['owner_account_id'] ?? '') === $accountId) {
$object['owner_account_id'] = 'anonymous';
$object['updated_at'] = $now;
$json = decode_json_value($object['json'] ?? []);
$json['ownerAccountId'] = 'anonymous';
$object['json'] = $json;
}
unset($object);
foreach ($db['reports'] as &$report) if (($report['reporter_account_id'] ?? '') === $accountId) $report['status'] = 'closed';
unset($report);
@ -373,8 +433,20 @@ $baseUrl = './?token=' . rawurlencode($given);
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pixel Island Admin</title>
<script>
document.addEventListener('submit', () => {
try { sessionStorage.setItem('pixel-admin-scroll', String(window.scrollY || 0)); } catch (error) {}
});
window.addEventListener('load', () => {
try {
const y = Number(sessionStorage.getItem('pixel-admin-scroll') || 0);
sessionStorage.removeItem('pixel-admin-scroll');
if (y > 0) requestAnimationFrame(() => scrollTo(0, y));
} catch (error) {}
});
</script>
<style>
body{font-family:system-ui,sans-serif;margin:24px;background:#f7f4ea;color:#2b2b2b}h1{margin-bottom:4px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:12px}.card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:14px;margin:10px 0}.media{display:flex;gap:12px;align-items:flex-start}.muted{color:#666;font-size:13px}.error{background:#fff1f1;border:1px solid #e3aaaa;padding:12px;border-radius:8px}code{background:#eee;padding:1px 4px;border-radius:4px}input{max-width:210px;padding:6px;margin:2px 4px 2px 0}button{margin:2px 4px 2px 0;padding:6px 9px;border:1px solid #bbb;border-radius:6px;background:#f5f5f5}.danger{background:#b92323;color:white;border:0}.ok{background:#267a3e;color:white;border:0}.warn{background:#8b5b00;color:white;border:0}.pill{display:inline-block;padding:2px 7px;border-radius:999px;background:#eee;font-size:12px}.nav a{margin-right:10px}.thumb{position:relative;flex:0 0 auto;width:72px;height:72px;background:#f2eadb;border:1px solid #ddd;image-rendering:pixelated}.thumb i{position:absolute;width:calc(72px / var(--w));height:calc(72px / var(--h));transform:scale(1.02);transform-origin:0 0}.thumb.empty:after{content:'no image';position:absolute;inset:0;display:grid;place-items:center;color:#777;font-size:11px}
body{font-family:system-ui,sans-serif;margin:24px;background:#f7f4ea;color:#2b2b2b}h1{margin-bottom:4px}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:12px}.card{background:#fff;border:1px solid #ddd;border-radius:10px;padding:14px;margin:10px 0}.media{display:flex;gap:14px;align-items:flex-start}.muted{color:#666;font-size:13px}.error{background:#fff1f1;border:1px solid #e3aaaa;padding:12px;border-radius:8px}code{background:#eee;padding:1px 4px;border-radius:4px}input{max-width:210px;padding:6px;margin:2px 4px 2px 0}button{margin:2px 4px 2px 0;padding:6px 9px;border:1px solid #bbb;border-radius:6px;background:#f5f5f5}.danger{background:#b92323;color:white;border:0}.ok{background:#267a3e;color:white;border:0}.warn{background:#8b5b00;color:white;border:0}.pill{display:inline-block;padding:2px 7px;border-radius:999px;background:#eee;font-size:12px}.nav a{margin-right:10px}.thumb{position:relative;flex:0 0 auto;width:128px;height:128px;background:#f2eadb;border:1px solid #ddd;image-rendering:pixelated;overflow:hidden}.thumb i{position:absolute;transform:scale(1.02);transform-origin:0 0}.thumb.empty:after{content:'no image';position:absolute;inset:0;display:grid;place-items:center;color:#777;font-size:11px}@media(max-width:520px){.grid{grid-template-columns:1fr}.media{flex-direction:column}.thumb{width:112px;height:112px}}
</style>
<h1>Pixel Island Admin</h1>
<p class="muted">Store: <?=h($storeLabel)?> / Users: <?=count($accounts)?> / Pictures: <?=count($assets)?> / Reports: <?=count($reports)?></p>
@ -398,7 +470,7 @@ body{font-family:system-ui,sans-serif;margin:24px;background:#f7f4ea;color:#2b2b
<input name="name" value="<?=h($a['name'] ?? '')?>" maxlength="32">
<button class="ok" name="admin_action" value="rename_account">Save</button>
<?php if (empty($a['disabled_at'])): ?><button class="warn" name="admin_action" value="disable_account">Disable</button><?php else: ?><button class="ok" name="admin_action" value="enable_account">Enable</button><?php endif; ?>
<?php if (($a['id'] ?? '') !== 'island-team'): ?><button class="danger" name="admin_action" value="delete_account" onclick="return confirm('Delete this user and hide their pictures?')">Delete</button><?php endif; ?>
<?php if (($a['id'] ?? '') !== 'island-team' && ($a['id'] ?? '') !== 'anonymous'): ?><button class="danger" name="admin_action" value="delete_account" onclick="return confirm('Delete this user? Their pictures become Anonymous.')">Delete</button><?php endif; ?>
</form>
</div>
<?php endforeach; ?>

222
app.js
View file

@ -31,19 +31,22 @@
const CURSOR_LIGHT_WORLD_RADIUS = 86;
const CURSOR_LIGHT_INTENSITY = 0.15625;
const CURSOR_DEPTH_REFLECTION_MULTIPLIER = 1.85;
const BASE_COLOR_CODES = '0123456789abcdefghij';
const ADVANCED_COLOR_CODES = 'klmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' + "!#$%&'()*+,-/:;<=>?@[]^_`{|}~";
const COLOR_CODES = BASE_COLOR_CODES + ADVANCED_COLOR_CODES;
const BASIC_PALETTE_COUNT = BASE_COLOR_CODES.length;
const DEFAULT_SELECTED_COLOR_CODE = BASE_COLOR_CODES.includes('a') ? 'a' : (BASE_COLOR_CODES[0] || '0');
const PALETTE = buildPalette();
const PALETTE_BY_CODE = Object.fromEntries(PALETTE.map((p) => [p.code, p.color]));
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 };
@ -58,7 +61,7 @@
function clampDimension(value, fallback = 8) {
return clampInt ? clampInt(value, 1, MAX_EDITOR_DIMENSION, fallback) : Math.max(1, Math.min(MAX_EDITOR_DIMENSION, Math.round(Number(value) || fallback)));
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) {
@ -70,15 +73,72 @@
}
function assetWidth(asset) {
return clampInt(asset?.width ?? asset?.w ?? asset?.size, 1, MAX_EDITOR_DIMENSION, 16);
return PixelCodec.assetWidth ? PixelCodec.assetWidth(asset) : clampDimension(asset?.width ?? asset?.w ?? asset?.size, 16);
}
function assetHeight(asset) {
return clampInt(asset?.height ?? asset?.ht ?? asset?.size, 1, MAX_EDITOR_DIMENSION, assetWidth(asset));
return PixelCodec.assetHeight ? PixelCodec.assetHeight(asset) : clampDimension(asset?.height ?? asset?.ht ?? asset?.size, assetWidth(asset));
}
function assetMaxSize(asset) {
return Math.max(assetWidth(asset), assetHeight(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() {
@ -6973,8 +7033,20 @@ function drawShipRipples(pos, time, seedValue = '', asset = null) {
function cachePhase2Snapshot() {
if (Phase2Sync?.cachePixelBlobs) {
const blobs = (state.assets || []).map((asset) => buildPixelBlob(asset.faces?.right || asset.pixels || blankPixels(assetWidth(asset), assetHeight(asset)), assetWidth(asset), assetHeight(asset)));
Phase2Sync.cachePixelBlobs(blobs).catch((error) => console.warn('Phase 2 pixel blob cache failed.', error));
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));
@ -7013,37 +7085,6 @@ function drawShipRipples(pos, time, seedValue = '', asset = null) {
return tile.type !== 'water';
}
function buildPixelBlob(encodedPixels, width, height = width) {
const w = clampDimension(width, 16);
const h = clampDimension(height, w);
const payload = encodePixels(encodedPixels, w, h);
const codec = 'palette-index-v1';
return {
id: computePixelBlobId(codec, w, h, payload),
codec,
width: w,
height: h,
payload
};
}
function computePixelBlobId(codec, width, height, payload) {
const normalizedCodec = codec || 'palette-index-v1';
const w = clampDimension(width, 16);
const h = clampDimension(height, w);
const encoded = encodePixels(payload, w, h);
return `blob:${fnv1a(['pixel-blob-v1', normalizedCodec, w, h, encoded].join('|'))}`;
}
function ensureAssetBlobId(asset) {
if (!asset) return asset;
const w = assetWidth(asset);
const h = assetHeight(asset);
const right = normalizePixels(asset.faces?.right || asset.pixels || blankPixels(w, h), w, h);
const blob = buildPixelBlob(right, w, h);
return { ...asset, blobId: asset.blobId || asset.bi || blob.id };
}
function computeAssetContentHash(asset) {
const payload = [
asset.category || '',
@ -7077,101 +7118,10 @@ function drawShipRipples(pos, time, seedValue = '', asset = null) {
&& normalizeOwnerAccountId(item.ownerAccountId, currentAccountId()) === owner) || null;
}
function fnv1a(value) {
let hash = 0x811c9dc5;
for (let i = 0; i < value.length; i++) {
hash ^= value.charCodeAt(i);
hash = Math.imul(hash, 0x01000193) >>> 0;
}
return hash.toString(16).padStart(8, '0');
}
function clampInt(value, min, max, fallback = min) {
const n = Math.round(Number(value));
return Number.isFinite(n) ? clamp(n, min, max) : fallback;
}
function findAsset(id) {
return worldIndex.assetById?.get(id) || state.assets.find((asset) => asset.id === id) || null;
}
function blankPixels(width, height = width) {
return Array(Math.max(1, width) * Math.max(1, height)).fill(null);
}
function normalizePixels(pixels, width, height = width) {
const out = blankPixels(width, height);
if (typeof pixels === 'string') {
for (let i = 0; i < Math.min(out.length, pixels.length); i++) {
const ch = pixels[i];
out[i] = ch === '.' ? null : (PALETTE_BY_CODE[ch] ? ch : nearestPaletteCode(ch));
}
return out;
}
if (!Array.isArray(pixels)) return out;
for (let i = 0; i < Math.min(out.length, pixels.length); i++) {
const value = pixels[i];
if (!value) out[i] = null;
else if (PALETTE_BY_CODE[value]) out[i] = value;
else out[i] = nearestPaletteCode(value);
}
return out;
}
function encodePixels(pixels, width = null, height = null) {
const w = width || Math.sqrt(pixels?.length || 0) || editorSize;
const h = height || w;
return normalizePixels(pixels, w, h).map((value) => value || '.').join('');
}
function colorToHex(value) {
if (!value) return 'rgba(0,0,0,0)';
return PALETTE_BY_CODE[value] || value;
}
function nearestPaletteCode(color) {
// This can run during loadState()/seedState() before selectedColorCode is initialized.
// Keep the fallback independent from editor state to avoid TDZ startup crashes.
return nearestPaletteCodeFrom(PALETTE, color, DEFAULT_SELECTED_COLOR_CODE);
}
function nearestBasicPaletteCode(color) {
return nearestPaletteCodeFrom(PALETTE.slice(0, BASIC_PALETTE_COUNT), PALETTE_BY_CODE[color] || color, PALETTE[0].code);
}
function nearestPaletteCodeFrom(entries, color, fallback) {
if (!color || typeof color !== 'string') return fallback || entries[0]?.code || PALETTE[0].code;
if (entries.some((entry) => entry.code === color)) return color;
const rgb = parseHex(color);
if (!rgb) return fallback || entries[0]?.code || PALETTE[0].code;
let best = entries[0]?.code || PALETTE[0].code;
let bestDist = Infinity;
for (const entry of entries) {
const p = parseHex(entry.color);
const dist = (rgb.r - p.r) ** 2 + (rgb.g - p.g) ** 2 + (rgb.b - p.b) ** 2;
if (dist < bestDist) { bestDist = dist; best = entry.code; }
}
return best;
}
function readableTextColor(hex) {
const rgb = parseHex(hex);
if (!rgb) return '#243044';
const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
return yiq > 140 ? '#243044' : '#fffdf5';
}
function parseHex(hex) {
if (typeof hex !== 'string' || !hex.startsWith('#')) return null;
const clean = hex.replace('#', '');
const full = clean.length === 3 ? clean.split('').map((c) => c + c).join('') : clean;
const value = parseInt(full, 16);
if (!Number.isFinite(value)) return null;
return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
}
function normalizeDepthPixels(input, width, height = width) {
const out = Array(Math.max(1, width) * Math.max(1, height)).fill(0);
if (typeof input === 'string') {
@ -7721,4 +7671,4 @@ function drawShipRipples(pos, time, seedValue = '', asset = null) {
// Pixel Island default-art drawing code was moved out of app.js.
window.PixelIslandDebug = { ...(window.PixelIslandDebug || {}), applySyncEvent };
bootstrap();
})();
})();

5
index.html
View file

@ -86,6 +86,7 @@
<button id="toolErase" class="tool toolErase" title="E">Erase</button>
<button id="toolFill" class="tool toolFill" title="F">Fill</button>
<button id="toolPick" class="tool toolPick" title="I">Pick</button>
<button id="clearPaint" class="tool toolClear danger" type="button">Clear</button>
</div>
<div class="toolRow editorUtilityRow">
<button id="toggleAdvanced" class="tool toolAdvanced" type="button">＋ Advanced</button>
@ -100,7 +101,6 @@
<button id="toolRect" class="tool toolRect advancedTool" title="R">Rect</button>
<button id="toolSelect" class="tool toolSelect advancedTool" title="S">Select</button>
<button id="toolDoor" class="tool toolDoor advancedTool buildingOnly">Door</button>
<button id="clearPaint" class="tool danger advancedTool">Clear</button>
</div>
<div class="toolRow advancedActionRow">
<button id="outlinePaint" class="tool toolOutline advancedTool" type="button">Outline</button>
@ -255,6 +255,9 @@
<script src="./js/core-utils.js"></script>
<script src="./js/module-loader.js"></script>
<script src="./js/palette.js"></script>
<script src="./js/pixel-codec.js"></script>
<script src="./js/worker-client.js"></script>
<script src="./js/state-index.js"></script>
<script src="./js/rotation-policy.js"></script>
<script src="./js/lighting.js"></script>

58
js/palette.js Normal file
View file

@ -0,0 +1,58 @@
(function () {
'use strict';
const root = window.PixelIslandModules ||= {};
const BASE_COLOR_CODES = '0123456789abcdefghij';
const ADVANCED_COLOR_CODES = 'klmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ' + "!#$%&'()*+,-/:;<=>?@[]^_`{|}~";
const COLOR_CODES = BASE_COLOR_CODES + ADVANCED_COLOR_CODES;
const BASIC_PALETTE_COUNT = BASE_COLOR_CODES.length;
const DEFAULT_SELECTED_COLOR_CODE = BASE_COLOR_CODES.includes('a') ? 'a' : (BASE_COLOR_CODES[0] || '0');
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 buildPalette() {
const basicColors = [
'#111827', '#374151', '#6b7280', '#d1d5db', '#fff7ed',
'#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) }));
}
const PALETTE = buildPalette();
const PALETTE_BY_CODE = Object.fromEntries(PALETTE.map((p) => [p.code, p.color]));
root.Palette = {
BASE_COLOR_CODES,
ADVANCED_COLOR_CODES,
COLOR_CODES,
BASIC_PALETTE_COUNT,
DEFAULT_SELECTED_COLOR_CODE,
PALETTE,
PALETTE_BY_CODE,
buildPalette,
hslToHex
};
})();

175
js/pixel-codec.js Normal file
View file

@ -0,0 +1,175 @@
(function (global) {
'use strict';
const root = global.PixelIslandModules ||= {};
const MAX_DIMENSION = 64;
function clamp(value, min, max) {
return Math.max(min, Math.min(max, value));
}
function clampInt(value, min, max, fallback = min) {
const n = Math.round(Number(value));
return Number.isFinite(n) ? clamp(n, min, max) : fallback;
}
function clampDimension(value, fallback = 8) {
return clampInt(value, 1, MAX_DIMENSION, fallback);
}
function fnv1a(value) {
let hash = 0x811c9dc5;
const text = String(value);
for (let i = 0; i < text.length; i++) {
hash ^= text.charCodeAt(i);
hash = Math.imul(hash, 0x01000193) >>> 0;
}
return hash.toString(16).padStart(8, '0');
}
function assetWidth(asset) {
return clampInt(asset?.width ?? asset?.w ?? asset?.size, 1, MAX_DIMENSION, 16);
}
function assetHeight(asset) {
return clampInt(asset?.height ?? asset?.ht ?? asset?.size, 1, MAX_DIMENSION, assetWidth(asset));
}
function assetMaxSize(asset) {
return Math.max(assetWidth(asset), assetHeight(asset));
}
function blankPixels(width, height = width) {
return Array(Math.max(1, width) * Math.max(1, height)).fill(null);
}
function parseHex(hex) {
if (typeof hex !== 'string' || !hex.startsWith('#')) return null;
const clean = hex.replace('#', '');
const full = clean.length === 3 ? clean.split('').map((c) => c + c).join('') : clean;
const value = parseInt(full, 16);
if (!Number.isFinite(value)) return null;
return { r: (value >> 16) & 255, g: (value >> 8) & 255, b: value & 255 };
}
function nearestPaletteCodeFrom(entries, color, fallback) {
if (!Array.isArray(entries) || !entries.length) return fallback || '0';
if (!color || typeof color !== 'string') return fallback || entries[0]?.code || '0';
if (entries.some((entry) => entry.code === color)) return color;
const rgb = parseHex(color);
if (!rgb) return fallback || entries[0]?.code || '0';
let best = entries[0]?.code || '0';
let bestDist = Infinity;
for (const entry of entries) {
const entryRgb = parseHex(entry.color);
if (!entryRgb) continue;
const dist = (rgb.r - entryRgb.r) ** 2 + (rgb.g - entryRgb.g) ** 2 + (rgb.b - entryRgb.b) ** 2;
if (dist < bestDist) {
bestDist = dist;
best = entry.code;
}
}
return best;
}
function normalizePixels(pixels, width, height = width, palette = root.Palette?.PALETTE || [], defaultColorCode = root.Palette?.DEFAULT_SELECTED_COLOR_CODE || 'a') {
const out = blankPixels(width, height);
const paletteByCode = new Map((palette || []).map((entry) => [entry.code, entry.color]));
if (typeof pixels === 'string') {
for (let i = 0; i < Math.min(out.length, pixels.length); i++) {
const ch = pixels[i];
out[i] = ch === '.' ? null : (paletteByCode.has(ch) ? ch : nearestPaletteCodeFrom(palette, ch, defaultColorCode));
}
return out;
}
if (!Array.isArray(pixels)) return out;
for (let i = 0; i < Math.min(out.length, pixels.length); i++) {
const value = pixels[i];
if (!value) out[i] = null;
else if (paletteByCode.has(value)) out[i] = value;
else out[i] = nearestPaletteCodeFrom(palette, value, defaultColorCode);
}
return out;
}
function encodePixels(pixels, width = null, height = null, palette = root.Palette?.PALETTE || [], defaultColorCode = root.Palette?.DEFAULT_SELECTED_COLOR_CODE || 'a') {
const w = width || Math.sqrt(pixels?.length || 0) || 8;
const h = height || w;
return normalizePixels(pixels, w, h, palette, defaultColorCode).map((value) => value || '.').join('');
}
function buildPixelBlob(encodedPixels, width, height = width, palette = root.Palette?.PALETTE || [], defaultColorCode = root.Palette?.DEFAULT_SELECTED_COLOR_CODE || 'a') {
const w = clampDimension(width, 16);
const h = clampDimension(height, w);
const payload = encodePixels(encodedPixels, w, h, palette, defaultColorCode);
const codec = 'palette-index-v1';
return {
id: computePixelBlobId(codec, w, h, payload, palette, defaultColorCode),
codec,
width: w,
height: h,
payload
};
}
function computePixelBlobId(codec, width, height, payload, palette = root.Palette?.PALETTE || [], defaultColorCode = root.Palette?.DEFAULT_SELECTED_COLOR_CODE || 'a') {
const normalizedCodec = codec || 'palette-index-v1';
const w = clampDimension(width, 16);
const h = clampDimension(height, w);
const encoded = encodePixels(payload, w, h, palette, defaultColorCode);
return `blob:${fnv1a(['pixel-blob-v1', normalizedCodec, w, h, encoded].join('|'))}`;
}
function ensureAssetBlobId(asset, palette = root.Palette?.PALETTE || [], defaultColorCode = root.Palette?.DEFAULT_SELECTED_COLOR_CODE || 'a') {
if (!asset) return asset;
const w = assetWidth(asset);
const h = assetHeight(asset);
const right = normalizePixels(asset.faces?.right || asset.pixels || blankPixels(w, h), w, h, palette, defaultColorCode);
const blob = buildPixelBlob(right, w, h, palette, defaultColorCode);
return { ...asset, blobId: asset.blobId || asset.bi || blob.id };
}
function colorToHex(value) {
if (!value) return 'rgba(0,0,0,0)';
return root.Palette?.PALETTE_BY_CODE?.[value] || value;
}
function nearestPaletteCode(color) {
return nearestPaletteCodeFrom(root.Palette?.PALETTE || [], color, root.Palette?.DEFAULT_SELECTED_COLOR_CODE || 'a');
}
function nearestBasicPaletteCode(color) {
const palette = root.Palette?.PALETTE || [];
const count = root.Palette?.BASIC_PALETTE_COUNT || palette.length;
return nearestPaletteCodeFrom(palette.slice(0, count), root.Palette?.PALETTE_BY_CODE?.[color] || color, palette[0]?.code || '0');
}
function readableTextColor(hex) {
const rgb = parseHex(hex);
if (!rgb) return '#243044';
const yiq = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
return yiq > 140 ? '#243044' : '#fffdf5';
}
root.PixelCodec = {
MAX_DIMENSION,
assetHeight,
assetMaxSize,
assetWidth,
blankPixels,
buildPixelBlob,
clampDimension,
clampInt,
colorToHex,
computePixelBlobId,
ensureAssetBlobId,
encodePixels,
fnv1a,
nearestBasicPaletteCode,
nearestPaletteCode,
nearestPaletteCodeFrom,
normalizePixels,
parseHex,
readableTextColor
};
})(typeof self !== 'undefined' ? self : window);

21
js/pixel-worker.js Normal file
View file

@ -0,0 +1,21 @@
'use strict';
importScripts('./pixel-codec.js');
const PixelCodec = self.PixelIslandModules.PixelCodec;
self.onmessage = (event) => {
const { id, type, payload } = event.data || {};
try {
if (type === 'buildPixelBlobs') {
const palette = Array.isArray(payload?.palette) ? payload.palette : [];
const defaultColorCode = payload?.defaultColorCode || 'a';
const blobs = (payload?.assets || []).map((asset) => PixelCodec.buildPixelBlob(asset?.faces?.right || asset?.pixels || '', PixelCodec.assetWidth(asset), PixelCodec.assetHeight(asset), palette, defaultColorCode));
self.postMessage({ id, ok: true, result: blobs });
return;
}
self.postMessage({ id, ok: false, error: 'unsupported_worker_request' });
} catch (error) {
self.postMessage({ id, ok: false, error: error?.message || 'worker_error' });
}
};

53
js/worker-client.js Normal file
View file

@ -0,0 +1,53 @@
(function () {
'use strict';
const root = window.PixelIslandModules ||= {};
let worker = null;
let nextId = 1;
const pending = new Map();
function canUseWorkers() {
return typeof Worker === 'function';
}
function getWorker() {
if (!canUseWorkers()) return null;
if (worker) return worker;
worker = new Worker('./js/pixel-worker.js');
worker.onmessage = (event) => {
const { id, ok, result, error } = event.data || {};
const entry = pending.get(id);
if (!entry) return;
pending.delete(id);
if (ok) entry.resolve(result);
else entry.reject(new Error(error || 'worker_error'));
};
worker.onerror = (event) => {
const error = new Error(event.message || 'worker_error');
for (const entry of pending.values()) entry.reject(error);
pending.clear();
worker?.terminate();
worker = null;
};
return worker;
}
function request(type, payload) {
const target = getWorker();
if (!target) return Promise.reject(new Error('workers_unavailable'));
const id = nextId++;
const promise = new Promise((resolve, reject) => pending.set(id, { resolve, reject }));
target.postMessage({ id, type, payload });
return promise;
}
function buildPixelBlobs(assets) {
return request('buildPixelBlobs', {
assets,
palette: root.Palette?.PALETTE || [],
defaultColorCode: root.Palette?.DEFAULT_SELECTED_COLOR_CODE || 'a'
});
}
root.WorkerClient = { canUseWorkers, buildPixelBlobs };
})();

33
styles.css
View file

@ -2937,3 +2937,36 @@ body, button, input, select, textarea { font-size: 15px; }
.reportDialog { z-index: 9998; }
.assetStatus.validating { background: #fff2a8; }
.assetStatus.failed { background: #ffe2e2; color: #8b2424; }
/* Shared-only editor polish: five obvious primary draw controls. */
.editorToolRow,
.basicEditorTools,
.studioDrawer.advancedTools .editorToolRow,
.studioDrawer.advancedTools .basicEditorTools {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.basicEditorTools #toolBrush {
background: linear-gradient(180deg, #dcfce7, #86efac) !important;
color: #12422a !important;
}
.basicEditorTools #toolErase {
background: linear-gradient(180deg, #fee2e2, #fca5a5) !important;
color: #6f1515 !important;
}
.basicEditorTools #toolFill {
background: linear-gradient(180deg, #dbeafe, #93c5fd) !important;
color: #123f7a !important;
}
.basicEditorTools #toolPick {
background: linear-gradient(180deg, #fef3c7, #fde68a) !important;
color: #70470a !important;
}
.basicEditorTools #clearPaint {
background: linear-gradient(180deg, #ffe4e6, #fb7185) !important;
color: #711827 !important;
}
.basicEditorTools .tool.active {
outline: 4px solid rgba(36, 48, 68, .55) !important;
outline-offset: -6px !important;
color: #111827 !important;
}