/play polish: center motifs, fill Daily Word 2nd row, tighten bubble aim
- Motifs (Word/Word Search/Memory Match) now vertically center in the space above the title bar (was top-anchored with dead space); Bloom flower nudged to match. - Daily Word: second row filled (BYTE / CALM) so it's as lively as the others. - Bubble Blaster: aim line now starts at the shooter (no gap) and the cluster has a single blue target bubble matching the shooter (others recolored) so the matching-shot read is clear. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -304,7 +304,7 @@
|
||||
<div class="arcade">
|
||||
<button class="tile tile-word" onclick={() => openGame('word')}>
|
||||
<span class="motif m-word" aria-hidden="true">
|
||||
{#each ['B', 'Y', 'T', 'E', '', '', '', '', '', ''] as ch}
|
||||
{#each ['B', 'Y', 'T', 'E', '', 'C', 'A', 'L', 'M', ''] as ch}
|
||||
<span class="wt" class:on={ch}>{ch}</span>
|
||||
{/each}
|
||||
</span>
|
||||
@@ -357,13 +357,13 @@
|
||||
<span class="motif m-bubble" aria-hidden="true">
|
||||
<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:108px;top:12px"></span>
|
||||
<span class="bub b-a" style="left:143px;top:12px"></span>
|
||||
<span class="bub b-b" 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-a" 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-d" style="left:160px;top:41px"></span>
|
||||
<span class="bub b-b" style="left:73px;top:70px"></span>
|
||||
<span class="bub b-c" style="left:108px;top:70px"></span>
|
||||
<span class="bub b-d" style="left:143px;top:70px"></span>
|
||||
@@ -532,21 +532,21 @@
|
||||
|
||||
/* tile motifs — decorative; clipped by the tile's overflow:hidden */
|
||||
.motif { position: absolute; inset: 0; pointer-events: none; }
|
||||
.m-word { padding: 22px 22px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-content: start; }
|
||||
.m-word { padding: 18px 22px 66px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; align-content: center; }
|
||||
.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: 16px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: start; }
|
||||
.m-ws { padding: 12px 16px 66px; display: grid; grid-template-columns: repeat(6, 29px); gap: 4px; justify-content: center; align-content: center; }
|
||||
.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%); }
|
||||
.m-bloom .p1 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(0, -56px); }
|
||||
.m-bloom .p2 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(48px, -28px); }
|
||||
.m-bloom .p3 { left: 50%; top: 40%; transform: translate(-50%, -50%) translate(48px, 28px); }
|
||||
.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: 22px; display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; justify-content: center; align-content: start; }
|
||||
.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: 37%; transform: translate(-50%, -50%); }
|
||||
.m-bloom .p1 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(0, -56px); }
|
||||
.m-bloom .p2 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(48px, -28px); }
|
||||
.m-bloom .p3 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(48px, 28px); }
|
||||
.m-bloom .p4 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(0, 56px); }
|
||||
.m-bloom .p5 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(-48px, 28px); }
|
||||
.m-bloom .p6 { left: 50%; top: 37%; transform: translate(-50%, -50%) translate(-48px, -28px); }
|
||||
.m-match { padding: 18px 22px 66px; display: grid; grid-template-columns: repeat(4, 50px); gap: 10px; justify-content: center; align-content: center; }
|
||||
.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; }
|
||||
@@ -554,7 +554,7 @@
|
||||
.bub { position: absolute; width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.16); }
|
||||
/* shooter sits to the RIGHT (clear of the title); a diagonal dashed aim line runs up-left
|
||||
to the matching blue bubble at the cluster's center, like a shot being lined up */
|
||||
.bub-aim { position: absolute; left: 62%; bottom: 82px; width: 2px; height: 90px; transform-origin: bottom center; transform: translateX(-50%) rotate(-33deg);
|
||||
.bub-aim { position: absolute; left: 62%; bottom: 74px; width: 2px; height: 96px; transform-origin: bottom center; transform: translateX(-50%) rotate(-33deg);
|
||||
background: repeating-linear-gradient(to top, rgba(255, 255, 255, 0.65) 0 5px, transparent 5px 11px); }
|
||||
.bub-shooter { position: absolute; left: 62%; 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%); }
|
||||
|
||||
Reference in New Issue
Block a user