Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e207478e79 | ||
|
|
3f6fe5abf1 |
@@ -70,7 +70,10 @@ everything works except installation and the service worker.
|
|||||||
stray thumb can't wipe a live match. It's absent on a fresh match, where there
|
stray thumb can't wipe a live match. It's absent on a fresh match, where there
|
||||||
is nothing yet to wipe.
|
is nothing yet to wipe.
|
||||||
- **Pause** freezes mid-turn and resumes exactly where it stopped, delay
|
- **Pause** freezes mid-turn and resumes exactly where it stopped, delay
|
||||||
included. Opening either sheet pauses automatically. The settings sheet leaves
|
included. Both halves read **Paused** underneath the delay bar while it is, in
|
||||||
|
the same ink as the clock above it, and the play button lights up — so a
|
||||||
|
stopped clock can't be mistaken for a running one from either side of the
|
||||||
|
board. Opening either sheet pauses automatically. The settings sheet leaves
|
||||||
it paused — everything in there resets the clocks anyway — while the score
|
it paused — everything in there resets the clocks anyway — while the score
|
||||||
sheet picks the turn back up when you close it, so glancing at the score
|
sheet picks the turn back up when you close it, so glancing at the score
|
||||||
doesn't cost you a tap on play. It's absent whenever there's no clock running
|
doesn't cost you a tap on play. It's absent whenever there's no clock running
|
||||||
|
|||||||
@@ -12,8 +12,8 @@ android {
|
|||||||
applicationId = "nl.hansdezwart.bgclock"
|
applicationId = "nl.hansdezwart.bgclock"
|
||||||
minSdk = 26
|
minSdk = 26
|
||||||
targetSdk = 36
|
targetSdk = 36
|
||||||
versionCode = 5
|
versionCode = 6
|
||||||
versionName = "1.4"
|
versionName = "1.5"
|
||||||
}
|
}
|
||||||
|
|
||||||
compileOptions {
|
compileOptions {
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
Added a 'Paused' indicator when the clock is paused.
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 117 KiB After Width: | Height: | Size: 123 KiB |
+60
-1
@@ -182,6 +182,49 @@
|
|||||||
text-align:right;
|
text-align:right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ---------- paused ----------
|
||||||
|
A stopped clock used to look exactly like a running one: the panel keeps its
|
||||||
|
accent, and the delay bar simply freezes mid-drain. The only tell was the
|
||||||
|
play glyph in the bar — small, grey, and upside down for one of the two
|
||||||
|
players. So both halves say it in words.
|
||||||
|
|
||||||
|
Hung off the delay row rather than added to .stack, so the big clock does
|
||||||
|
not move a pixel when the clock stops — the same promise .btn--vacant makes
|
||||||
|
in the bar, and the reason .delay fades rather than hides. It also cannot
|
||||||
|
live *inside* .delay: that is opacity:0 whenever no delay is running, and a
|
||||||
|
child can never be more opaque than its parent, which would lose the word on
|
||||||
|
the waiting half, on a spent delay, and at a delay of 0. */
|
||||||
|
.foot{position:relative}
|
||||||
|
.paused{
|
||||||
|
position:absolute;
|
||||||
|
top:100%;
|
||||||
|
left:50%;
|
||||||
|
/* the bar and its number sit dead centre of the panel (see .dnum), so
|
||||||
|
centring on that row centres on the panel, whatever the count reads */
|
||||||
|
transform:translateX(-50%);
|
||||||
|
/* a clear step below the bar rather than .stack's gap: near enough to belong
|
||||||
|
to the delay row, far enough not to crowd it */
|
||||||
|
margin-top:clamp(21px,5.8vw,41px);
|
||||||
|
white-space:nowrap;
|
||||||
|
line-height:1;
|
||||||
|
/* Wider than the delay bar, narrower than the clock — the band is tighter
|
||||||
|
than it sounds, since "3:00" is only about 2.2x the bar. The crossovers
|
||||||
|
are .track's own (20vw between 360 and 700px wide), so the word holds its
|
||||||
|
proportion to the bar at every size instead of drifting at the ends.
|
||||||
|
Part of the width comes from the tracking rather than the glyph size:
|
||||||
|
spaced letters carry "held" without shouting over the clock. */
|
||||||
|
font-size:clamp(34px,9.4vw,66px);
|
||||||
|
font-weight:700;
|
||||||
|
letter-spacing:.08em;
|
||||||
|
/* no colour of its own: it inherits the panel's, which is what the clock and
|
||||||
|
the delay count are already wearing. Each theme picks its own --accent-ink
|
||||||
|
(white on most of them), so the word follows the palette without a rule
|
||||||
|
per theme, and the paused half never has two different inks on it. */
|
||||||
|
opacity:0;
|
||||||
|
transition:opacity .16s ease;
|
||||||
|
}
|
||||||
|
.paused.on{opacity:1}
|
||||||
|
|
||||||
/* ---------- control bar ---------- */
|
/* ---------- control bar ---------- */
|
||||||
.bar{
|
.bar{
|
||||||
background:var(--bar);
|
background:var(--bar);
|
||||||
@@ -199,6 +242,9 @@
|
|||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
}
|
}
|
||||||
.btn:active{color:var(--icon-hot)}
|
.btn:active{color:var(--icon-hot)}
|
||||||
|
/* the way back from a paused clock, lit like a held Reset: the bar is the only
|
||||||
|
thing either player can act on while the clocks are stopped */
|
||||||
|
#playpause.lit{color:var(--icon-hot)}
|
||||||
.btn[aria-pressed="false"]{color:#5E5954}
|
.btn[aria-pressed="false"]{color:#5E5954}
|
||||||
.btn svg{width:clamp(23px,6.4vw,32px);height:auto;display:block}
|
.btn svg{width:clamp(23px,6.4vw,32px);height:auto;display:block}
|
||||||
.btn svg[hidden]{display:none}
|
.btn svg[hidden]{display:none}
|
||||||
@@ -432,10 +478,13 @@
|
|||||||
<div class="stack">
|
<div class="stack">
|
||||||
<div class="time" data-time>3:00</div>
|
<div class="time" data-time>3:00</div>
|
||||||
<div class="out" data-out hidden>Out of<br>time</div>
|
<div class="out" data-out hidden>Out of<br>time</div>
|
||||||
|
<div class="foot">
|
||||||
<div class="delay" data-delay>
|
<div class="delay" data-delay>
|
||||||
<span class="track"><i class="fill" data-fill></i></span>
|
<span class="track"><i class="fill" data-fill></i></span>
|
||||||
<span class="dnum" data-dnum>15</span>
|
<span class="dnum" data-dnum>15</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="paused" data-paused>Paused</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -498,10 +547,13 @@
|
|||||||
<div class="stack">
|
<div class="stack">
|
||||||
<div class="time" data-time>3:00</div>
|
<div class="time" data-time>3:00</div>
|
||||||
<div class="out" data-out hidden>Out of<br>time</div>
|
<div class="out" data-out hidden>Out of<br>time</div>
|
||||||
|
<div class="foot">
|
||||||
<div class="delay" data-delay>
|
<div class="delay" data-delay>
|
||||||
<span class="track"><i class="fill" data-fill></i></span>
|
<span class="track"><i class="fill" data-fill></i></span>
|
||||||
<span class="dnum" data-dnum>15</span>
|
<span class="dnum" data-dnum>15</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="paused" data-paused>Paused</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@@ -709,7 +761,8 @@
|
|||||||
scoreLines: [].slice.call(p.querySelectorAll(".line:not(.line--moves)")),
|
scoreLines: [].slice.call(p.querySelectorAll(".line:not(.line--moves)")),
|
||||||
delay: p.querySelector("[data-delay]"),
|
delay: p.querySelector("[data-delay]"),
|
||||||
fill: p.querySelector("[data-fill]"),
|
fill: p.querySelector("[data-fill]"),
|
||||||
dnum: p.querySelector("[data-dnum]")
|
dnum: p.querySelector("[data-dnum]"),
|
||||||
|
paused: p.querySelector("[data-paused]")
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
var btnPlay = document.getElementById("playpause");
|
var btnPlay = document.getElementById("playpause");
|
||||||
@@ -886,6 +939,11 @@
|
|||||||
setText(el[i].dnum, Math.ceil(dLeft / 1000));
|
setText(el[i].dnum, Math.ceil(dLeft / 1000));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// both halves, not just the one whose turn it is: the waiting player's
|
||||||
|
// clock is stopped too, and they are the one who can't read the bar's
|
||||||
|
// play glyph the right way up
|
||||||
|
el[i].paused.classList.toggle("on", st.phase === PAUSE);
|
||||||
|
|
||||||
setAttr(el[i].root, "data-state",
|
setAttr(el[i].root, "data-state",
|
||||||
(st.phase === FLAG && i === st.active) ? "flagged"
|
(st.phase === FLAG && i === st.active) ? "flagged"
|
||||||
: (i === st.active && st.phase !== IDLE) ? "active" : "idle");
|
: (i === st.active && st.phase !== IDLE) ? "active" : "idle");
|
||||||
@@ -901,6 +959,7 @@
|
|||||||
// nothing running to pause: before a game's first tap, and after a flag,
|
// nothing running to pause: before a game's first tap, and after a flag,
|
||||||
// where togglePause is inert anyway — the game is over, Reset is the way out
|
// where togglePause is inert anyway — the game is over, Reset is the way out
|
||||||
btnPlay.classList.toggle("btn--vacant", st.phase === IDLE || st.phase === FLAG);
|
btnPlay.classList.toggle("btn--vacant", st.phase === IDLE || st.phase === FLAG);
|
||||||
|
btnPlay.classList.toggle("lit", st.phase === PAUSE);
|
||||||
}
|
}
|
||||||
|
|
||||||
function loop(){ render(); requestAnimationFrame(loop); }
|
function loop(){ render(); requestAnimationFrame(loop); }
|
||||||
|
|||||||
+1
-1
@@ -1,5 +1,5 @@
|
|||||||
/* Cache-first: once installed the clock never touches the network again. */
|
/* Cache-first: once installed the clock never touches the network again. */
|
||||||
const CACHE = "bgclock-v20";
|
const CACHE = "bgclock-v21";
|
||||||
const FILES = [
|
const FILES = [
|
||||||
"./",
|
"./",
|
||||||
"./index.html",
|
"./index.html",
|
||||||
|
|||||||
Reference in New Issue
Block a user