thejayman77/upbeatBytes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/play motifs: shrink word-search + memory-match, smaller/raised bubbles w/ angled aim

Browse Source 
- Word Search grid: smaller fixed cells, centered, sits clear of the title.
- Memory Match: smaller tiles (capped, centered) so the motif isn't oversized.
- Bubble Blaster: smaller bubbles raised into a tighter cluster (clears the
  title), shooter a touch smaller, and the aim line is now a diagonal dashed
  line tilted up — reads like the user is aiming.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-25 20:05:21 -04:00
parent aa15cf119c
commit f6ae44e126
1 changed files with 21 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/play/+page.svelte
+21 -20
View File
@@ -355,18 +355,18 @@
<!-- teased, not built yet -->
<div class="tile tile-bubble soon">
<span class="motif m-bubble" aria-hidden="true">
<span class="bub b-a" style="left:22px;top:16px"></span>
<span class="bub b-b" style="left:62px;top:16px"></span>
<span class="bub b-c" style="left:102px;top:16px"></span>
<span class="bub b-d" style="left:142px;top:16px"></span>
<span class="bub b-a" style="left:182px;top:16px"></span>
<span class="bub b-d" style="left:42px;top:50px"></span>
<span class="bub b-c" style="left:82px;top:50px"></span>
<span class="bub b-b" style="left:122px;top:50px"></span>
<span class="bub b-a" style="left:162px;top:50px"></span>
<span class="bub b-b" style="left:62px;top:84px"></span>
<span class="bub b-a" style="left:102px;top:84px"></span>
<span class="bub b-d" style="left:142px;top:84px"></span>
<span class="bub b-a" style="left:38px;top:12px"></span>
<span class="bub b-b" style="left:73px;top:12px"></span>
<span class="bub b-c" style="left:108px;top:12px"></span>
<span class="bub b-d" style="left:143px;top:12px"></span>
<span class="bub b-a" style="left:178px;top:12px"></span>
<span class="bub b-d" style="left:55px;top:41px"></span>
<span class="bub b-c" style="left:90px;top:41px"></span>
<span class="bub b-b" style="left:125px;top:41px"></span>
<span class="bub b-a" style="left:160px;top:41px"></span>
<span class="bub b-b" style="left:73px;top:70px"></span>
<span class="bub b-a" style="left:108px;top:70px"></span>
<span class="bub b-d" style="left:143px;top:70px"></span>
<span class="bub-aim"></span>
<span class="bub-shooter b-c"></span>
</span>
@@ -535,8 +535,8 @@
.m-word { padding: 22px 22px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-content: start; }
.wt { aspect-ratio: 1; box-sizing: border-box; border: 2.5px solid rgba(255, 255, 255, 0.45); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: clamp(15px, 3.4vw, 22px); color: #cf7d1c; }
.wt.on { background: #fff; border-color: #fff; }
.m-ws { padding: 20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; align-content: start; }
.wc { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: clamp(11px, 2.6vw, 15px); color: rgba(255, 255, 255, 0.42); }
.m-ws { padding: 16px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: start; }
.wc { width: 29px; height: 29px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); }
.wc.hl { background: rgba(255, 255, 255, 0.93); color: #2f7fb0; border-radius: 7px; box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12); }
.m-bloom .petal { position: absolute; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: #4f8a58; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1); }
.m-bloom .pc { width: 50px; height: 50px; background: #3e7a47; color: #fff; font-size: 22px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 1; left: 50%; top: 40%; transform: translate(-50%, -50%); }
@@ -546,15 +546,16 @@
.m-bloom .p4 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(0, 56px); }
.m-bloom .p5 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(-48px, 28px); }
.m-bloom .p6 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(-48px, -28px); }
.m-match { padding: 24px 24px 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; align-content: start; }
.mm { aspect-ratio: 1; border-radius: 9px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; }
.m-match { padding: 22px; display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; justify-content: center; align-content: start; }
.mm { width: 50px; height: 50px; border-radius: 9px; background: rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; }
.mm.flip { background: #fff; }
.mm .dot { width: 17px; height: 17px; border-radius: 50%; background: #c0688c; }
/* bubble shooter: a packed cluster up top, a dashed aim line, a loaded shooter below */
.bub { position: absolute; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); }
.bub-aim { position: absolute; left: 50%; top: 122px; bottom: 72px; width: 2px; transform: translateX(-50%);
background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0 5px, transparent 5px 11px); }
.bub-shooter { position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); }
.bub { position: absolute; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); }
/* diagonal dashed aim line, anchored at the shooter and tilted up-left like it's being aimed */
.bub-aim { position: absolute; left: 50%; bottom: 84px; width: 2px; height: 64px; transform-origin: bottom center; transform: translateX(-50%) rotate(-22deg);
background: repeating-linear-gradient(to top, rgba(255, 255, 255, 0.65) 0 5px, transparent 5px 11px); }
.bub-shooter { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24); }
.b-a { background: radial-gradient(circle at 32% 28%, #fff, #f0a830 62%); }
.b-b { background: radial-gradient(circle at 32% 28%, #fff, #e8607f 62%); }
.b-c { background: radial-gradient(circle at 32% 28%, #fff, #4fb0e0 62%); }