Spaces:

deucebucket
/

clanker

Running

App Files Files Community

deucebucket Claude Sonnet 4.6 commited on Jun 15

Commit

dcb589c

1 Parent(s): d888911

feat: compact pet-home frontend (blob + chat + soul drawer)

Browse files

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Files changed (4) hide show

static/app.js +61 -0
static/index.html +32 -0
static/styles.css +27 -0
tests/test_api.py +8 -0

static/app.js ADDED Viewed

	@@ -0,0 +1,61 @@

+const $ = (s) => document.querySelector(s);
+const DIMS = ["V","A","D","U","G","W","I"];
+const FACES = {
+  content: '<circle cx="65" cy="114" r="8" fill="#222"/><circle cx="95" cy="114" r="8" fill="#222"/><path d="M67 134 Q80 146 93 134" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>',
+  excited: '<circle cx="65" cy="112" r="10" fill="#222"/><circle cx="95" cy="112" r="10" fill="#222"/><path d="M64 132 Q80 150 96 132 Q80 142 64 132 Z" fill="#222"/>',
+  sad: '<path d="M58 116 q8 -6 16 0" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M86 116 q8 -6 16 0" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/><path d="M70 146 Q80 138 90 146" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>',
+  angry: '<path d="M56 110 L78 117" stroke="#222" stroke-width="4" stroke-linecap="round"/><path d="M104 110 L82 117" stroke="#222" stroke-width="4" stroke-linecap="round"/><path d="M70 146 Q80 138 90 146" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>',
+  neutral: '<circle cx="65" cy="116" r="7" fill="#222"/><circle cx="95" cy="116" r="7" fill="#222"/><path d="M70 138 L90 138" stroke="#222" stroke-width="4" stroke-linecap="round"/>',
+};
+function render(state) {
+  const ap = state.appearance;
+  const fill = `hsl(${ap.hue} ${ap.saturation}% ${ap.lightness}%)`;
+  const foot = `hsl(${ap.hue} ${ap.saturation}% ${ap.lightness - 12}%)`;
+  $("#body").setAttribute("fill", fill);
+  document.querySelectorAll(".foot").forEach(f => f.setAttribute("fill", foot));
+  $("#face").innerHTML = FACES[ap.face] || FACES.neutral;
+  const aura = $("#aura");
+  aura.style.background = `radial-gradient(circle, hsl(${ap.hue} ${ap.saturation}% ${ap.lightness}% / ${ap.aura}), transparent 65%)`;
+  const lean = (ap.lean || 0) * 10;
+  const dy = (ap.droop || 0) * 14;
+  $("#blob").style.transform = `translateX(-50%) translateY(${dy}px) scale(${ap.scale}) rotate(${lean}deg)`;
+  $("#moodword").textContent = state.mood_word;
+  if (ap.mood) {
+    $("#moodReadout").textContent = DIMS.map((d, i) => `${d}  ${String(ap.mood[i]).padStart(3)}`).join("\n");
+  }
+}
+function bubble(text) {
+  const b = $("#bubble");
+  b.textContent = text; b.classList.remove("hidden");
+  clearTimeout(b._t); b._t = setTimeout(() => b.classList.add("hidden"), 4500);
+}
+function speak(text, voice) {
+  if (!text || !window.speechSynthesis) return;
+  const u = new SpeechSynthesisUtterance(text);
+  u.pitch = (voice && voice.pitch) || 1.4;   // pitched up = cute Tomodachi voice
+  u.rate = (voice && voice.rate) || 1.0;
+  window.speechSynthesis.cancel();
+  window.speechSynthesis.speak(u);
+}
+async function say() {
+  const inp = $("#msg"); const text = inp.value.trim(); if (!text) return;
+  inp.value = "";
+  const r = await fetch("/say", {method:"POST", headers:{"Content-Type":"application/json"}, body: JSON.stringify({text})});
+  if (!r.ok) return;
+  const state = await r.json();
+  render(state);
+  bubble(state.emoticon);          // the "words" are an emoticon
+  speak(state.simlish, state.voice); // the sound is simlish babble, client-side
+}
+$("#send").onclick = say;
+$("#msg").addEventListener("keydown", (e) => { if (e.key === "Enter") say(); });
+$("#soulHandle").onclick = () => $("#soulDrawer").classList.remove("hidden");
+$("#closeSoul").onclick = () => $("#soulDrawer").classList.add("hidden");
+fetch("/snapshot").then(r => r.json()).then(render);

static/index.html ADDED Viewed

	@@ -0,0 +1,32 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>clanker</title><link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+<div id="habitat">
+  <div id="window"></div><div id="plant">🪴</div><div id="rug"></div>
+  <div id="aura"></div>
+  <svg id="blob" viewBox="0 0 160 200" width="150" height="185">
+    <ellipse cx="80" cy="186" rx="46" ry="8" fill="#0002"/>
+    <ellipse class="foot" cx="62" cy="176" rx="12" ry="8"/><ellipse class="foot" cx="98" cy="176" rx="12" ry="8"/>
+    <path id="body" d="M80 64 C128 64 138 120 132 150 C126 178 96 182 80 182 C64 182 34 178 28 150 C22 120 32 64 80 64 Z"/>
+    <g id="face"></g>
+  </svg>
+  <div class="chip" id="who">🙂 guest</div>
+  <div class="chip" id="moodword">calm</div>
+  <div id="dock">
+    <input id="msg" placeholder="say something to it…" autocomplete="off">
+    <button id="send">send</button>
+  </div>
+  <div class="handle" id="soulHandle">◐ soul</div>
+  <div id="soulDrawer" class="drawer hidden">
+    <h3>◐ soul</h3>
+    <div id="moodReadout" class="readout"></div>
+    <button id="closeSoul">close</button>
+  </div>
+  <div id="bubble" class="hidden"></div>
+</div>
+<script src="/static/app.js"></script>
+</body></html>

static/styles.css ADDED Viewed

	@@ -0,0 +1,27 @@

+*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;font-family:system-ui,sans-serif}
+#habitat{position:relative;width:100vw;height:100vh;
+  background:linear-gradient(#cfe8f7 0%,#e9f3df 58%,#dfe7c8 58%,#e7eccb 100%)}
+#window{position:absolute;top:6vh;left:8vw;width:140px;height:104px;border:7px solid #fff;border-radius:8px;
+  background:linear-gradient(#bfe3ff,#e9f7ff)}
+#plant{position:absolute;bottom:12vh;right:8vw;font-size:52px}
+#rug{position:absolute;bottom:9vh;left:50%;transform:translateX(-50%);width:340px;height:64px;border-radius:50%;background:#e7c98f88}
+#aura{position:absolute;left:50%;bottom:16vh;width:340px;height:340px;transform:translate(-50%,40%);border-radius:50%;
+  pointer-events:none;transition:background .6s,opacity .6s}
+#blob{position:absolute;left:50%;bottom:16vh;transform:translateX(-50%);transition:transform .5s}
+#body{transition:fill .6s}.foot{transition:fill .6s}
+.chip{position:absolute;top:16px;background:rgba(255,255,255,.85);border-radius:20px;padding:6px 13px;font-size:13px;font-weight:600;box-shadow:0 2px 6px #0002}
+#who{left:16px}#moodword{right:16px}
+#dock{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;gap:7px;width:min(62vw,520px)}
+#dock input{flex:1;border:none;border-radius:22px;padding:11px 16px;font-size:14px;box-shadow:0 2px 6px #0002}
+#dock button{border:none;border-radius:22px;padding:0 18px;font-weight:700;background:#ffcf4d;box-shadow:0 2px 6px #0002;cursor:pointer}
+.handle{position:absolute;left:0;top:40%;background:rgba(255,255,255,.9);font-weight:700;font-size:12px;
+  padding:10px 7px;border-radius:0 10px 10px 0;writing-mode:vertical-rl;cursor:pointer;box-shadow:0 2px 8px #0002}
+.drawer{position:absolute;top:0;left:0;height:100%;width:min(46vw,420px);background:rgba(28,30,40,.94);color:#e7e7ee;
+  padding:18px;box-shadow:6px 0 24px #0004;border-radius:0 14px 14px 0;transition:transform .3s}
+.drawer.hidden{transform:translateX(-105%)}
+.drawer h3{margin:2px 0 14px;font-size:14px;text-transform:uppercase;color:#9fb}
+.readout{font-family:ui-monospace,monospace;font-size:13px;line-height:1.9;white-space:pre}
+.drawer button{margin-top:16px;background:#ffffff22;color:#fff;border:none;border-radius:8px;padding:8px 14px;cursor:pointer}
+#bubble{position:absolute;left:50%;bottom:46vh;transform:translateX(-50%);background:#fff;border-radius:16px;
+  padding:8px 18px;font-size:30px;line-height:1;max-width:60vw;box-shadow:0 4px 14px #0003;transition:opacity .4s}
+.hidden{opacity:0;pointer-events:none}

tests/test_api.py CHANGED Viewed

@@ -31,3 +31,11 @@ def test_say_returns_voice_and_appearance():
 def test_say_rejects_empty():
     r = client.post("/say", json={"text": "   "})
     assert r.status_code == 422

 def test_say_rejects_empty():
     r = client.post("/say", json={"text": "   "})
     assert r.status_code == 422
+def test_index_serves_html():
+    r = client.get("/")
+    assert r.status_code == 200
+    html = r.text
+    assert 'id="blob"' in html
+    assert "say something" in html.lower()