daddy32/Physilinks
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Make pause button width consistent and rearrange HUD

Browse Source 
Makes the pause button width consistent across 'Pause' and 'Resume' states to prevent layout shifts. Uses 'rem' units for responsive scaling.

Also rearranges the HUD elements for a more logical grouping.
This commit is contained in:
Daddy32
2025-12-16 20:04:49 +01:00
parent d4fbd0247b
commit c4053ad8b7
2 changed files with 17 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
index.html
View File

@@ -17,7 +17,6 @@
<header> <header>
<h1>Physilinks</h1> <h1>Physilinks</h1>
<div class="meta"> <div class="meta">
<span class="pill">Physics</span>
<span>Link same-colored balls to clear them.</span> <span>Link same-colored balls to clear them.</span>
</div> </div>
<button class="pause-btn" id="pause-btn">Pause</button> <button class="pause-btn" id="pause-btn">Pause</button>
@@ -48,10 +47,21 @@
</div> </div>
<div class="hud-bar"> <div class="hud-bar">
<div class="card"> <div class="card">
<strong>Spawn</strong> <span id="spawn-rate"></span> <strong>Scene</strong>
<select id="scene-select" class="selector"></select>
</div>
<div class="card progress-card">
<strong>Goal</strong>
<span id="goal-label">—</span>
<div class="progress">
<div class="progress__bar" id="goal-progress"></div>
</div>
</div> </div>
<div class="card"> <div class="card">
<strong>Min link</strong> <span id="min-link"></span> <strong>Score</strong> <span id="score">0</span>
</div>
<div class="card">
<strong>High score</strong> <span id="high-score">0</span>
</div> </div>
<div class="card"> <div class="card">
<strong>Active color</strong> <strong>Active color</strong>
@@ -62,21 +72,10 @@
<span id="chain-length">0</span> <span id="chain-length">0</span>
</div> </div>
<div class="card"> <div class="card">
<strong>Score</strong> <span id="score">0</span> <strong>Spawn</strong> <span id="spawn-rate"></span>
</div> </div>
<div class="card"> <div class="card">
<strong>High score</strong> <span id="high-score">0</span> <strong>Min link</strong> <span id="min-link"></span>
</div>
<div class="card progress-card">
<strong>Goal</strong>
<span id="goal-label">—</span>
<div class="progress">
<div class="progress__bar" id="goal-progress"></div>
</div>
</div>
<div class="card">
<strong>Scene</strong>
<select id="scene-select" class="selector"></select>
</div> </div>
</div> </div>
<div class="instructions"> <div class="instructions">

2
styles.css
View File

@@ -88,6 +88,8 @@ header .pill {
padding: 8px 12px; padding: 8px 12px;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
width: 6rem;
text-align: center;
transition: transition:
transform 120ms ease, transform 120ms ease,
filter 120ms ease; filter 120ms ease;