Skip to content

Fix Fast Piggie flash scope and remove canvas border #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
acrosman merged 2 commits into from
Mar 19, 2026
Merged

Fix Fast Piggie flash scope and remove canvas border #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
af0b1d1
Initial plan
Copilot Mar 19, 2026
e1382a7
Fix fast piggie flash to scope to play area and remove canvas border
Copilot Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions app/games/fast-piggie/interface.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,16 +31,18 @@ <h3>How to Play</h3>
</span>
</div>

<!-- Game canvas: keyboard-accessible wedge board -->
<canvas id="fp-canvas" class="fp-canvas" width="500" height="500" tabindex="0" role="application"
aria-label="Game board. Use arrow keys to cycle through wedges, Enter or Space to select."></canvas>
<!-- Game canvas wrapper: contains canvas and flash overlay so flash is scoped to the play area -->
<div class="fp-canvas-wrap">
<canvas id="fp-canvas" class="fp-canvas" width="500" height="500" tabindex="0" role="application"
aria-label="Game board. Use arrow keys to cycle through wedges, Enter or Space to select."></canvas>

<!-- Visual flash overlay (toggled by JS via class names) -->
<div id="fp-flash" class="fp-flash" aria-hidden="true"></div>
</div>

<!-- Screen-reader-only feedback region: assertive = interrupts immediately -->
<div id="fp-feedback" role="status" aria-live="assertive" aria-atomic="true" class="fp-feedback sr-only"></div>

<!-- Visual flash overlay (toggled by JS via class names) -->
<div id="fp-flash" class="fp-flash" aria-hidden="true"></div>

<!-- Controls -->
<div class="fp-controls">
<button id="fp-stop-btn" class="fp-btn fp-btn--secondary">
Expand Down
18 changes: 13 additions & 5 deletions app/games/fast-piggie/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,21 @@
font-size: 1.25rem;
}

/* Canvas wrapper: provides positioning context for the flash overlay */
.fp-canvas-wrap {
position: relative;
display: inline-flex;
width: clamp(280px, 60vmin, 500px);
height: clamp(280px, 60vmin, 500px);
}

/* Canvas */
.fp-canvas {
display: block;
max-width: 100%;
/* Intrinsic size is 500×500; CSS keeps it responsive */
width: clamp(280px, 60vmin, 500px);
height: clamp(280px, 60vmin, 500px);
border: 2px solid #343a40;
width: 100%;
height: 100%;
border-radius: 50%; /* visual hint that it's a circle game */
background-color: #ffffff;
cursor: crosshair;
Expand All @@ -45,10 +52,11 @@
outline-offset: 4px;
}

/* Flash overlay */
/* Flash overlay: scoped to the canvas wrapper, matches the circular play area */
.fp-flash {
position: fixed;
position: absolute;
inset: 0;
border-radius: 50%;
pointer-events: none;
opacity: 0;
}
Expand Down
Loading