lilgotchi 0.0.0-stage → 3.0.2

package/dist/pets/game.css

@@ -0,0 +1,275 @@
+*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
+
+/* === Color Theme Variables === */
+:root{
+  --bg-page:#2a2a2a;
+  --device-bg:linear-gradient(145deg,#e8d5c4,#c9a882);
+  --device-shadow:0 8px 32px rgba(0,0,0,.5);
+  --device-inset:inset 0 2px 4px rgba(255,255,255,.3);
+  --screen-frame:#7b8868;
+  --screen-inset:inset 0 3px 8px rgba(0,0,0,.4);
+  --lcd-bg:#c4cfa1;
+  --lcd-fg:#0f380f;
+  --attn-bar:#7b8868;
+  --attn-active:#ff4444;
+  --btn-bg:linear-gradient(180deg,#5a6650,#3d4636);
+  --btn-border:#2a2e25;
+  --btn-color:#c4cfa1;
+  --btn-shadow:0 3px 6px rgba(0,0,0,.3);
+  --btn-inset:inset 0 1px 1px rgba(255,255,255,.1);
+  --btn-active-bg:linear-gradient(180deg,#8bac0f,#5a6650);
+  --accent:#8bac0f;
+  --accent-dark:#0f380f;
+  --toast-bg:#1a2a1a;
+  --toast-border:#8bac0f;
+  --toast-color:#c4cfa1;
+  --settings-btn-color:#8b7355;
+  --overlay-bg:rgba(0,0,0,.85);
+  --overlay-color:#c4cfa1;
+  --overlay-btn-bg:linear-gradient(180deg,#5a6650,#3d4636);
+  --overlay-btn-border:#8bac0f;
+  --overlay-btn-color:#c4cfa1;
+  --overlay-btn-active-bg:#8bac0f;
+  --overlay-btn-active-color:#0f380f;
+  --overlay-close-color:#888;
+  --overlay-close-border:#555;
+  --overlay-close-active:#333;
+  --stat-border:#3d4636;
+  --stat-hearts:#8bac0f;
+  --input-bg:#1a1a1a;
+  --input-border:#8bac0f;
+  --input-color:#c4cfa1;
+  --info-color:#666;
+  --death-msg:#888;
+  --toggle-bg:#333;
+  --toggle-knob:#888;
+  --toggle-active-bg:#8bac0f;
+  --toggle-active-knob:#fff;
+}
+
+/* === E-ink Theme === */
+.eink{
+  --bg-page:#e8e8e8;
+  --device-bg:linear-gradient(145deg,#f5f5f5,#d8d8d8);
+  --device-shadow:0 4px 16px rgba(0,0,0,.15);
+  --device-inset:inset 0 1px 2px rgba(255,255,255,.6);
+  --screen-frame:#b0b0b0;
+  --screen-inset:inset 0 2px 6px rgba(0,0,0,.2);
+  --lcd-bg:#f0f0f0;
+  --lcd-fg:#111;
+  --attn-bar:#b0b0b0;
+  --attn-active:#222;
+  --btn-bg:linear-gradient(180deg,#e0e0e0,#c8c8c8);
+  --btn-border:#999;
+  --btn-color:#222;
+  --btn-shadow:0 2px 4px rgba(0,0,0,.12);
+  --btn-inset:inset 0 1px 1px rgba(255,255,255,.5);
+  --btn-active-bg:linear-gradient(180deg,#333,#555);
+  --accent:#333;
+  --accent-dark:#f0f0f0;
+  --toast-bg:#fff;
+  --toast-border:#333;
+  --toast-color:#111;
+  --settings-btn-color:#555;
+  --overlay-bg:rgba(240,240,240,.96);
+  --overlay-color:#111;
+  --overlay-btn-bg:linear-gradient(180deg,#e0e0e0,#c8c8c8);
+  --overlay-btn-border:#333;
+  --overlay-btn-color:#111;
+  --overlay-btn-active-bg:#333;
+  --overlay-btn-active-color:#f0f0f0;
+  --overlay-close-color:#555;
+  --overlay-close-border:#999;
+  --overlay-close-active:#ddd;
+  --stat-border:#ccc;
+  --stat-hearts:#111;
+  --input-bg:#fff;
+  --input-border:#555;
+  --input-color:#111;
+  --info-color:#777;
+  --death-msg:#555;
+  --toggle-bg:#ccc;
+  --toggle-knob:#888;
+  --toggle-active-bg:#333;
+  --toggle-active-knob:#fff;
+}
+/* E-ink: hide color emoji, show mono SVG icons */
+.eink .icon-color{display:none!important}
+.eink .icon-mono{display:block!important}
+.eink .ctrl-btn:active{color:#f0f0f0}
+.eink .ctrl-btn:active .icon-mono{color:#f0f0f0}
+
+html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-page);font-family:'Courier New',monospace}
+body{display:flex;flex-direction:column;align-items:center;justify-content:center}
+
+#device{
+  width:100%;max-width:380px;
+  background:var(--device-bg);
+  border-radius:48% 48% 44% 44% / 52% 52% 42% 42%;
+  padding:18px 14px 24px;
+  box-shadow:var(--device-shadow),var(--device-inset);
+  position:relative;
+  display:flex;flex-direction:column;align-items:center;
+}
+
+#screen-frame{
+  background:var(--screen-frame);
+  border-radius:12px;
+  padding:6px;
+  box-shadow:var(--screen-inset);
+  width:92%;
+}
+#lcd{
+  display:block;width:100%;
+  image-rendering:pixelated;
+  image-rendering:crisp-edges;
+  border-radius:6px;
+}
+
+#attention-bar{
+  width:92%;height:6px;margin:6px 0;border-radius:3px;
+  background:var(--attn-bar);transition:background .3s;
+}
+#attention-bar.active{
+  background:var(--attn-active);
+  animation:blink-bar .6s infinite;
+}
+@keyframes blink-bar{0%,100%{opacity:1}50%{opacity:.3}}
+
+#controls{
+  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
+  width:94%;margin-top:10px;
+}
+.ctrl-btn{
+  display:flex;flex-direction:column;align-items:center;justify-content:center;
+  background:var(--btn-bg);
+  border:2px solid var(--btn-border);border-radius:10px;
+  color:var(--btn-color);font-size:10px;font-family:'Courier New',monospace;
+  padding:10px 4px;cursor:pointer;user-select:none;
+  box-shadow:var(--btn-shadow),var(--btn-inset);
+  transition:transform .08s,box-shadow .08s,opacity .2s;
+  min-height:56px;
+  position:relative;
+}
+.ctrl-btn:active{
+  transform:translateY(2px);
+  box-shadow:0 1px 2px rgba(0,0,0,.3);
+  background:var(--btn-active-bg);
+}
+.ctrl-btn.disabled{
+  opacity:.35;
+  pointer-events:none;
+}
+.ctrl-btn .icon{font-size:20px;line-height:1;margin-bottom:2px}
+.ctrl-btn .icon-mono{display:none;width:22px;height:22px;margin-bottom:2px}
+.ctrl-btn .label{font-size:9px;letter-spacing:.5px;text-transform:uppercase;opacity:.8}
+
+/* Toast notification */
+#toast{
+  position:fixed;top:12px;left:50%;transform:translateX(-50%) translateY(-80px);
+  background:var(--toast-bg);border:2px solid var(--toast-border);border-radius:10px;
+  padding:10px 20px;color:var(--toast-color);font-size:13px;
+  font-family:'Courier New',monospace;
+  z-index:300;white-space:nowrap;
+  box-shadow:0 4px 16px rgba(0,0,0,.3);
+  transition:transform .3s ease;
+  pointer-events:none;
+}
+#toast.show{
+  transform:translateX(-50%) translateY(0);
+}
+
+#settings-btn{
+  position:absolute;top:10px;right:16px;
+  background:none;border:none;color:var(--settings-btn-color);font-size:20px;cursor:pointer;
+  opacity:.6;z-index:10;
+}
+#settings-btn:active{opacity:1}
+
+/* Overlays */
+.overlay{
+  position:fixed;top:0;left:0;width:100%;height:100%;
+  background:var(--overlay-bg);
+  display:none;flex-direction:column;align-items:center;justify-content:center;
+  z-index:100;color:var(--overlay-color);font-family:'Courier New',monospace;
+}
+.overlay.show{display:flex}
+.overlay-title{font-size:18px;margin-bottom:20px;color:var(--accent);letter-spacing:2px}
+.overlay-btn{
+  display:block;width:220px;padding:16px;margin:8px;
+  background:var(--overlay-btn-bg);
+  border:2px solid var(--overlay-btn-border);border-radius:12px;
+  color:var(--overlay-btn-color);font-size:16px;text-align:center;cursor:pointer;
+  font-family:'Courier New',monospace;
+  transition:background .1s;
+}
+.overlay-btn:active{background:var(--overlay-btn-active-bg);color:var(--overlay-btn-active-color)}
+.overlay-close{
+  margin-top:20px;color:var(--overlay-close-color);font-size:14px;cursor:pointer;
+  padding:12px 24px;border:1px solid var(--overlay-close-border);border-radius:8px;
+}
+.overlay-close:active{background:var(--overlay-close-active)}
+
+/* Stats overlay */
+#stats-overlay .stat-row{
+  display:flex;align-items:center;justify-content:space-between;
+  width:260px;padding:8px 0;border-bottom:1px solid var(--stat-border);
+  font-size:14px;
+}
+#stats-overlay .hearts{color:var(--stat-hearts);font-size:18px;letter-spacing:2px}
+
+/* Game overlay */
+#game-overlay .game-area{
+  display:flex;align-items:center;justify-content:center;gap:30px;
+  margin:20px 0;
+}
+#game-overlay .game-arrow{
+  width:80px;height:80px;
+  background:var(--overlay-btn-bg);
+  border:2px solid var(--accent);border-radius:50%;
+  color:var(--overlay-btn-color);font-size:36px;
+  display:flex;align-items:center;justify-content:center;
+  cursor:pointer;transition:background .1s;
+}
+#game-overlay .game-arrow:active{background:var(--overlay-btn-active-bg);color:var(--overlay-btn-active-color)}
+#game-overlay .game-arrow.disabled{opacity:.3;pointer-events:none}
+#game-overlay .game-score{font-size:16px;margin:10px 0;color:var(--accent)}
+#game-overlay .game-result{font-size:14px;min-height:20px;color:var(--overlay-color)}
+#game-overlay .game-pet{width:80px;height:80px;display:flex;align-items:center;justify-content:center}
+#game-pet-canvas{image-rendering:pixelated;image-rendering:crisp-edges}
+
+/* Settings modal */
+#settings-overlay{z-index:200}
+#settings-overlay input{
+  width:260px;padding:12px;margin:10px 0;
+  background:var(--input-bg);border:2px solid var(--input-border);border-radius:8px;
+  color:var(--input-color);font-size:14px;font-family:'Courier New',monospace;
+}
+#settings-overlay .settings-info{
+  font-size:11px;color:var(--info-color);max-width:260px;text-align:center;margin:6px 0 16px;
+}
+/* Settings toggle row */
+.settings-row{
+  display:flex;align-items:center;justify-content:space-between;
+  width:260px;padding:10px 0;margin:4px 0;
+}
+.settings-row span{font-size:14px}
+.toggle{
+  width:48px;height:26px;border-radius:13px;
+  background:var(--toggle-bg);
+  position:relative;cursor:pointer;
+  transition:background .2s;border:none;padding:0;
+}
+.toggle::after{
+  content:'';position:absolute;top:3px;left:3px;
+  width:20px;height:20px;border-radius:50%;
+  background:var(--toggle-knob);
+  transition:transform .2s,background .2s;
+}
+.toggle.on{background:var(--toggle-active-bg)}
+.toggle.on::after{transform:translateX(22px);background:var(--toggle-active-knob)}
+
+/* Death overlay */
+#death-overlay{z-index:150}
+#death-overlay .death-msg{font-size:14px;color:var(--death-msg);margin:10px 0}
+

package/dist/pets/game.html

@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>lilgotchi</title>
+<link rel="stylesheet" href="game.css">
+<link rel="stylesheet" href="embed.css">
+<link rel="stylesheet" href="scenery.css">
+<script type="module" src="boot.js"></script>
+</head>
+<body>
+
+
+<div id="device">
+  <svg class="keychain" viewBox="0 0 112 104" aria-hidden="true" focusable="false">
+    <g fill="none" stroke="#77838b" stroke-width="2">
+      <circle cx="94" cy="58" r="14"/>
+      <path d="M99 68a11 11 0 1 1 5-5" stroke-width="1" stroke="#a3adb4"/>
+      <ellipse cx="16" cy="88" rx="4" ry="8" transform="rotate(8 16 88)"/>
+      <ellipse cx="19" cy="73" rx="4" ry="8" transform="rotate(15 19 73)"/>
+      <ellipse cx="23" cy="58" rx="4" ry="8" transform="rotate(20 23 58)"/>
+      <ellipse cx="29" cy="44" rx="4" ry="8" transform="rotate(30 29 44)"/>
+      <ellipse cx="38" cy="32" rx="4" ry="8" transform="rotate(45 38 32)"/>
+      <ellipse cx="50" cy="23" rx="4" ry="8" transform="rotate(65 50 23)"/>
+      <ellipse cx="65" cy="19" rx="4" ry="8" transform="rotate(90 65 19)"/>
+      <ellipse cx="80" cy="22" rx="4" ry="8" transform="rotate(115 80 22)"/>
+      <ellipse cx="90" cy="33" rx="4" ry="8" transform="rotate(150 90 33)"/>
+      <ellipse cx="94" cy="47" rx="4" ry="8" transform="rotate(175 94 47)"/>
+    </g>
+  </svg>
+<div id="egg-shell">
+  <button id="settings-btn" aria-label="Settings">&#9881;</button>
+  <div id="pet-clock" aria-label="Local time"></div>
+  <div id="screen-frame">
+    <div class="scene-window" aria-hidden="true"><span class="scene-orb"></span><span class="scene-land"></span></div>
+    <canvas id="lcd" width="32" height="16" role="img" aria-label="Your pet"></canvas>
+  </div>
+  <div id="attention-bar"></div>
+  <div id="controls">
+    <button class="ctrl-btn" data-action="feed">
+      <span class="icon icon-color">&#127830;</span>
+      <svg class="icon-mono" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="7" y1="3" x2="7" y2="11"/><path d="M7 11c0 2 2 3 2 6h-4c0-3 2-4 2-6"/><line x1="7" y1="17" x2="7" y2="21"/><path d="M17 3v4c0 1.5-1 2-2 2h0c1 0 2 .5 2 2v3"/><line x1="17" y1="14" x2="17" y2="21"/></svg>
+      <span class="label">Feed</span>
+    </button>
+    <button class="ctrl-btn" data-action="play">
+      <span class="icon icon-color">&#127918;</span>
+      <svg class="icon-mono" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polygon points="10,8 16,12 10,16" fill="currentColor" stroke="none"/></svg>
+      <span class="label">Play</span>
+    </button>
+    <button class="ctrl-btn" data-action="care" id="care-btn"><span class="care-symbol" aria-hidden="true">&#9790;</span><span class="label">Sleep</span></button>
+  </div>
+</div>
+<div id="care-panel">
+  <div id="pet-identity"></div>
+  <div id="growth-notice" hidden></div>
+  <div id="pet-needs" aria-live="off"></div>
+  <div id="care-meters" aria-label="Pet needs"></div>
+  <p id="care-hint"></p>
+  <details id="more-care"><summary>More care</summary><div class="secondary-controls">    <button class="ctrl-btn" data-action="light">
+      <span class="icon icon-color">&#128161;</span>
+      <svg class="icon-mono" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M9 18h6"/><path d="M10 21h4"/><path d="M12 2v1"/><path d="M12 7a4 4 0 0 0-4 4c0 2 1.5 3 2 4h4c.5-1 2-2 2-4a4 4 0 0 0-4-4z"/></svg>
+      <span class="label">Light</span>
+    </button>
+    <button class="ctrl-btn" data-action="medicine">
+      <span class="icon icon-color">&#128138;</span>
+      <svg class="icon-mono" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="3" y="8" width="18" height="8" rx="3"/><line x1="12" y1="5" x2="12" y2="19"/></svg>
+      <span class="label">Heal</span>
+    </button>
+    <button class="ctrl-btn" data-action="clean">
+      <span class="icon icon-color">&#129529;</span>
+      <svg class="icon-mono" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="12" y1="3" x2="12" y2="13"/><path d="M8 13l-2 8h12l-2-8z"/><line x1="8" y1="7" x2="5" y2="5"/><line x1="16" y1="7" x2="19" y2="5"/><circle cx="5" cy="4" r="1" fill="currentColor" stroke="none"/><circle cx="19" cy="4" r="1" fill="currentColor" stroke="none"/></svg>
+      <span class="label">Clean</span>
+    </button>
+    <button class="ctrl-btn" data-action="stats">
+      <span class="icon icon-color">&#128202;</span>
+      <svg class="icon-mono" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><rect x="4" y="14" width="4" height="7"/><rect x="10" y="8" width="4" height="13"/><rect x="16" y="3" width="4" height="18"/></svg>
+      <span class="label">Stats</span>
+    </button>
+    <button class="ctrl-btn" data-action="discipline">
+      <span class="icon icon-color">&#9889;</span>
+      <svg class="icon-mono" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="13,2 5,14 11,14 10,22 19,10 13,10"/></svg>
+      <span class="label">Scold</span>
+    </button>
+    <button class="ctrl-btn" data-action="mute" id="mute-btn">
+      <span class="icon icon-color" id="mute-icon-color">&#128263;</span>
+      <svg class="icon-mono" id="mute-icon-mono" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="6,9 2,9 2,15 6,15 11,19 11,5" fill="currentColor" stroke="none"/><path d="M15 9a4 4 0 0 1 0 6"/><path d="M18 7a7 7 0 0 1 0 10"/></svg>
+      <span class="label">Muted</span>
+    </button></div></details>
+</div>
+</div>
+<p id="pet-status" aria-live="off"></p>
+<p id="save-status"></p>
+
+<!-- Toast -->
+<div id="toast" role="status" aria-live="polite"></div>
+
+<!-- Feed overlay -->
+<div role="dialog" aria-modal="true" class="overlay" id="feed-overlay">
+  <div class="overlay-title">FEED</div>
+  <button class="overlay-btn" id="feed-meal-btn" data-feed="meal">&#127834; Meal (+1 Food)</button>
+  <button class="overlay-btn" id="feed-snack-btn" data-feed="snack">&#127852; Snack (+1 Happy)</button>
+  <button type="button" class="overlay-close" data-close="feed-overlay">Cancel</button>
+</div>
+
+<!-- Stats overlay -->
+<div role="dialog" aria-modal="true" class="overlay" id="stats-overlay">
+  <div class="overlay-title">STATUS</div>
+  <div id="stats-content"></div>
+  <button type="button" class="overlay-close" data-close="stats-overlay">Close</button>
+</div>
+
+<!-- Game overlay -->
+<div role="dialog" aria-modal="true" class="overlay" id="game-overlay" aria-labelledby="guess-title">
+  <h2 class="overlay-title" id="guess-title">Left and right</h2>
+  <p class="game-result" id="game-result" role="status">Guess which way your pet will look.</p>
+  <canvas class="guess-field" id="game-pet-canvas" width="256" height="192" aria-label="Your pet guessing game"></canvas>
+  <p class="game-score" id="game-score">Round 1/5 · Wins: 0</p>
+  <div class="game-area" id="guess-actions">
+    <button class="overlay-btn game-arrow" id="guess-left" aria-label="Guess left">← Left</button>
+    <button class="overlay-btn game-arrow" id="guess-right" aria-label="Guess right">Right →</button>
+  </div>
+  <button class="overlay-btn" id="guess-replay" hidden>Play again</button>
+  <button class="overlay-close" id="guess-exit">Back to games</button>
+</div>
+
+<!-- Settings overlay -->
+<div role="dialog" aria-modal="true" class="overlay" id="settings-overlay">
+  <div class="settings-header"><div class="overlay-title">SETTINGS</div><button type="button" class="overlay-close" data-close="settings-overlay" aria-label="Close settings">Close</button></div>
+  <div class="settings-row"><span>Vacation</span><button class="toggle" id="vacation-toggle" role="switch" aria-checked="false" aria-label="Vacation" aria-describedby="vacation-info"></button></div>
+  <p class="settings-info" id="vacation-info">Pause care and growth until you turn Vacation off. Otherwise, up to eight hours pass while you are away.</p>
+  <div class="settings-row" id="eink-row"><span>E-ink Theme</span><button class="toggle" id="eink-toggle" role="switch" aria-checked="false" aria-label="Toggle E-ink theme"></button></div>
+  <div class="settings-row"><span>LCD scanlines</span><button class="toggle" id="scanline-toggle" role="switch" aria-checked="false" aria-label="LCD scanlines" aria-describedby="scanline-info"></button></div>
+  <p class="settings-info" id="scanline-info">Adds faint horizontal lines to the pet screen for an old LCD look. It does not change care or gameplay.</p>
+  <p class="settings-info">Start again replaces this pet with a fresh copy of your selected starting character.</p>
+  <button class="overlay-btn" id="reset-game-btn">&#9888; Start again</button>
+</div>
+
+<!-- Death overlay -->
+<div role="dialog" aria-modal="true" class="overlay" id="death-overlay">
+  <div class="overlay-title">REST IN PEACE</div>
+  <div class="death-msg" id="death-msg"></div>
+  <button class="overlay-btn" id="restart-btn">Start again</button>
+</div>
+
+
+</body>
+</html>