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

/play: bubble shooter to the right aiming a blue center ball; space under top bar

Browse Source 
- Bubble Blaster: shooter moves right (clear of the title), a diagonal dashed aim
  line runs up-left to a now-blue bubble at the cluster center (shooter + target
  share the blue — reads like lining up a matching shot).
- Add breathing room between HubBar and the Play header (arcade-head top margin).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
jay
2026-06-25 20:16:48 -04:00
parent f6ae44e126
commit 5a7c90e7be
1 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/play/+page.svelte
+6 -5
View File
@@ -365,7 +365,7 @@
<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-c" 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>
@@ -495,7 +495,7 @@
@font-face { font-family: 'Newsreader'; src: url('/fonts/newsreader-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/fonts/space-mono-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.arcade-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 2px 0 24px; }
.arcade-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: clamp(16px, 3vw, 28px) 0 24px; }
.head-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-width: 0; }
.hub-back { flex: none; align-self: flex-start; }
.eyelash { width: 34px; height: 4px; border-radius: 2px; background: #f0a830; flex: none; }
@@ -552,10 +552,11 @@
.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: 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);
/* 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);
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); }
.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%); }
.b-b { background: radial-gradient(circle at 32% 28%, #fff, #e8607f 62%); }
.b-c { background: radial-gradient(circle at 32% 28%, #fff, #4fb0e0 62%); }