326 lines
9.2 KiB
HTML
326 lines
9.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Pokémon Party Overlay</title>
|
|
<style>
|
|
:root {
|
|
--slot-width: 190px;
|
|
--slot-height: 170px;
|
|
--accent: #f6d35b;
|
|
--accent-2: #79d2ff;
|
|
--panel: rgba(13, 23, 42, 0.78);
|
|
--panel-strong: rgba(6, 12, 28, 0.9);
|
|
--text: #fff7d6;
|
|
--muted: #bdd7ff;
|
|
--dead: #8b94a7;
|
|
--empty: rgba(255,255,255,0.11);
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
|
|
html, body {
|
|
margin: 0;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
background: transparent;
|
|
font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
|
|
color: var(--text);
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
padding: 18px;
|
|
}
|
|
|
|
.party {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, var(--slot-width));
|
|
gap: 14px;
|
|
align-items: end;
|
|
width: max-content;
|
|
filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
|
|
}
|
|
|
|
.slot {
|
|
position: relative;
|
|
width: var(--slot-width);
|
|
min-height: var(--slot-height);
|
|
padding: 12px 12px 10px;
|
|
border-radius: 22px 22px 14px 14px;
|
|
background:
|
|
linear-gradient(135deg, rgba(255,255,255,.18), transparent 22%),
|
|
linear-gradient(180deg, var(--panel), var(--panel-strong));
|
|
border: 3px solid rgba(255,255,255,.32);
|
|
box-shadow:
|
|
inset 0 0 0 2px rgba(0,0,0,.24),
|
|
0 8px 0 rgba(0,0,0,.28);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slot::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 7px;
|
|
border-radius: 17px 17px 10px 10px;
|
|
border: 1px solid rgba(121, 210, 255, .35);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.slot.empty {
|
|
background:
|
|
repeating-linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.08) 10px, transparent 10px, transparent 20px),
|
|
linear-gradient(180deg, rgba(13,23,42,.45), rgba(6,12,28,.65));
|
|
}
|
|
|
|
.slot.dead .sprite {
|
|
filter: grayscale(1) opacity(.58);
|
|
transform: translateY(4px) scale(.94);
|
|
}
|
|
|
|
.slot.dead .nickname,
|
|
.slot.dead .species {
|
|
color: var(--dead);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.sprite-wrap {
|
|
position: relative;
|
|
height: 104px;
|
|
display: grid;
|
|
place-items: center;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.sprite-wrap::after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 112px;
|
|
height: 22px;
|
|
border-radius: 999px;
|
|
bottom: 4px;
|
|
background: radial-gradient(ellipse, rgba(0,0,0,.38), rgba(0,0,0,0) 72%);
|
|
}
|
|
|
|
.sprite {
|
|
position: relative;
|
|
z-index: 1;
|
|
image-rendering: pixelated;
|
|
image-rendering: crisp-edges;
|
|
max-width: 122px;
|
|
max-height: 96px;
|
|
object-fit: contain;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.pokeball {
|
|
width: 78px;
|
|
height: 78px;
|
|
border-radius: 50%;
|
|
background:
|
|
radial-gradient(circle at center, #fff 0 8px, #111 9px 13px, transparent 14px),
|
|
linear-gradient(#dc3144 0 46%, #161616 47% 53%, #f4f4f4 54% 100%);
|
|
opacity: .42;
|
|
border: 4px solid #111;
|
|
box-shadow: inset 0 -7px 0 rgba(0,0,0,.18);
|
|
}
|
|
|
|
.nickname {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 4px;
|
|
font-weight: 900;
|
|
font-size: 25px;
|
|
line-height: 1.05;
|
|
text-align: center;
|
|
letter-spacing: .5px;
|
|
color: var(--text);
|
|
text-shadow: 0 3px 0 rgba(0,0,0,.58), 0 0 10px rgba(0,0,0,.5);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.species {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 3px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
letter-spacing: 1.4px;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
opacity: .92;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.badge {
|
|
position: absolute;
|
|
top: 9px;
|
|
left: 10px;
|
|
z-index: 2;
|
|
display: inline-grid;
|
|
place-items: center;
|
|
min-width: 26px;
|
|
height: 26px;
|
|
padding: 0 7px;
|
|
border-radius: 999px;
|
|
background: linear-gradient(180deg, var(--accent), #cf8e24);
|
|
color: #241400;
|
|
font-size: 13px;
|
|
font-weight: 1000;
|
|
border: 2px solid rgba(255,255,255,.68);
|
|
box-shadow: 0 3px 0 rgba(0,0,0,.3);
|
|
}
|
|
|
|
.status {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 2;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
background: rgba(0,0,0,.45);
|
|
color: #fff;
|
|
font-size: 11px;
|
|
font-weight: 900;
|
|
letter-spacing: .9px;
|
|
text-transform: uppercase;
|
|
border: 1px solid rgba(255,255,255,.25);
|
|
}
|
|
|
|
.status.alive { color: #8effa9; }
|
|
.status.dead { color: #ff8e8e; }
|
|
.status.boxed { color: #ffd37a; }
|
|
|
|
.party.vertical {
|
|
grid-template-columns: var(--slot-width);
|
|
}
|
|
|
|
.party.grid {
|
|
grid-template-columns: repeat(3, var(--slot-width));
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main id="party" class="party" aria-label="Current Pokémon party"></main>
|
|
|
|
<script>
|
|
const DEFAULT_PARTY = [
|
|
{ "species": "cyndaquil", "nickname": "Toast", "sprite": "sprites/cyndaquil.png", "status": "alive" },
|
|
{ "species": "totodile", "nickname": "Chomps", "sprite": "sprites/totodile.png", "status": "alive" },
|
|
{ "species": "pidgey", "nickname": "Gale", "sprite": "sprites/pidgey.png", "status": "alive" },
|
|
{ "species": "mareep", "nickname": "Static", "sprite": "sprites/mareep.png", "status": "alive" },
|
|
{ "species": "", "nickname": "", "sprite": "", "status": "empty" },
|
|
{ "species": "", "nickname": "", "sprite": "", "status": "empty" }
|
|
];
|
|
|
|
const params = new URLSearchParams(location.search);
|
|
const STORAGE_KEY = 'pokemonPartyOverlay.party';
|
|
|
|
const settings = {
|
|
refreshMs: 2000,
|
|
layout: params.get('layout') || 'horizontal',
|
|
source: params.get('source') || 'json'
|
|
};
|
|
|
|
function niceName(value) {
|
|
return String(value || '')
|
|
.replace(/[-_]/g, ' ')
|
|
.replace(/\b\w/g, c => c.toUpperCase());
|
|
}
|
|
|
|
function normalizeParty(data) {
|
|
const party = Array.isArray(data) ? data : data.party;
|
|
return Array.from({ length: 6 }, (_, i) => party?.[i] || {});
|
|
}
|
|
|
|
function render(party) {
|
|
const root = document.getElementById('party');
|
|
root.className = `party ${settings.layout}`;
|
|
root.innerHTML = '';
|
|
|
|
normalizeParty(party).forEach((mon, index) => {
|
|
const status = (mon.status || (mon.species ? 'alive' : 'empty')).toLowerCase();
|
|
const hasMon = Boolean(mon.species || mon.nickname || mon.sprite);
|
|
const slot = document.createElement('section');
|
|
slot.className = `slot ${hasMon ? status : 'empty'}`;
|
|
|
|
const badge = document.createElement('div');
|
|
badge.className = 'badge';
|
|
badge.textContent = index + 1;
|
|
slot.appendChild(badge);
|
|
|
|
if (hasMon && status !== 'empty') {
|
|
const statusEl = document.createElement('div');
|
|
statusEl.className = `status ${status}`;
|
|
statusEl.textContent = status;
|
|
slot.appendChild(statusEl);
|
|
}
|
|
|
|
const spriteWrap = document.createElement('div');
|
|
spriteWrap.className = 'sprite-wrap';
|
|
|
|
if (mon.sprite) {
|
|
const img = document.createElement('img');
|
|
img.className = 'sprite';
|
|
img.alt = mon.species || mon.nickname || `Party slot ${index + 1}`;
|
|
img.src = mon.sprite;
|
|
img.onerror = () => {
|
|
img.remove();
|
|
const ball = document.createElement('div');
|
|
ball.className = 'pokeball';
|
|
spriteWrap.appendChild(ball);
|
|
};
|
|
spriteWrap.appendChild(img);
|
|
} else {
|
|
const ball = document.createElement('div');
|
|
ball.className = 'pokeball';
|
|
spriteWrap.appendChild(ball);
|
|
}
|
|
|
|
slot.appendChild(spriteWrap);
|
|
|
|
const nickname = document.createElement('div');
|
|
nickname.className = 'nickname';
|
|
nickname.textContent = mon.nickname || (hasMon ? niceName(mon.species) : 'Empty');
|
|
slot.appendChild(nickname);
|
|
|
|
const species = document.createElement('div');
|
|
species.className = 'species';
|
|
species.textContent = hasMon ? niceName(mon.species) : 'Party Slot';
|
|
slot.appendChild(species);
|
|
|
|
root.appendChild(slot);
|
|
});
|
|
}
|
|
|
|
async function loadParty() {
|
|
try {
|
|
if (settings.source === 'browser') {
|
|
const saved = localStorage.getItem(STORAGE_KEY);
|
|
if (!saved) throw new Error('No party saved in browser storage yet. Open editor.html and click Save to browser preview.');
|
|
render(JSON.parse(saved));
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(`party.json?cacheBust=${Date.now()}`, { cache: 'no-store' });
|
|
if (!response.ok) throw new Error(`party.json returned ${response.status}`);
|
|
const data = await response.json();
|
|
render(data);
|
|
} catch (error) {
|
|
console.warn('Using built-in sample party. Serve this folder over HTTP to load party.json.', error);
|
|
render(DEFAULT_PARTY);
|
|
}
|
|
}
|
|
|
|
loadParty();
|
|
setInterval(loadParty, settings.refreshMs);
|
|
</script>
|
|
</body>
|
|
</html>
|