Game Page
The game page (/game) is where the bingo action happens. This is a full-screen game experience with a bingo board, draw controls, active item tracking, and goal progress visualization.
Page Layout
The game page is divided into two main columns on desktop (stacked on mobile):
| Section | Position | Description |
|---|---|---|
| Bingo Board | Left (larger area) | The interactive bingo card grid |
| Draw Controls & Stats | Right (sidebar) | Draw button, confirmations, active items, drawn balls list, and end game button |
| Bingo Goals Progress | Bottom (full width) | Progress bars for each selected bingo goal |
All panels use a dark gradient theme (gray-800 to gray-900) with colored borders to distinguish sections:
- Purple border — Bingo board
- Yellow border — Draw controls
- Green border — Active items
- Blue border — Drawn balls list
- Green border — Bingo goals progress
The Bingo Board
The bingo board is a grid of interactive cells matching the configured card size (e.g., 5×5 = 25 cells).
Cell States
Each cell can be in one of three visual states:
| State | Appearance | Description |
|---|---|---|
| Undrawn | Blue-to-purple gradient, white text | The ball has not been drawn yet — available for drawing |
| Drawn & Marked | Green background | The ball was drawn and confirmed — counts toward bingo goals |
| Drawn & Not Marked | Gray background, reduced opacity | The ball was drawn but the user rejected the confirmation (special fields only) |
Cell Contents
Each cell displays information based on its type:
| Field Type | Top Label | Center Value | Bottom Detail |
|---|---|---|---|
| Ball Slaps | "Ball Slaps" | The slap number (e.g., "15") | Intensity: "Light", "Medium", or "Hard" |
| Cock Ring (Balls) | "Cock Ring" | "Balls" | — |
| Cock Ring (Penis) | "Cock Ring" | "Penis" | — |
| Butt Plug | "Butt Plug" | Size: "Small", "Medium", or "Large" | — |
| Ball Gag | "Ball Gag" | — | — |
| Edges | "Edges" | The edge count (e.g., "3") | — |
| Nipple Clamps | "Nipple Clamps" | — | — |
Winning Highlight
When bingo is achieved, the cells that form the winning pattern are highlighted with a yellow ring (ring-3 ring-yellow-400) to clearly show which cells completed the goal. This applies to all achieved goal patterns simultaneously.
Sticky Board
The bingo board has a sticky top-6 positioning, meaning it stays visible as you scroll the page — especially useful on larger boards.
Drawing Balls
The Draw Button
The main "Draw Ball" button is located in the draw controls panel (right side). It has a dice icon and a gradient yellow-to-orange appearance.
| State | Appearance | Behavior |
|---|---|---|
| Normal | Yellow/orange gradient, clickable | Draws a random ball |
| Disabled | Gray, not clickable | Either bingo is achieved or all balls have been drawn |
| Confirmation Pending | Hidden (replaced by confirmation UI) | A special ball was drawn and needs confirmation |
Draw Algorithm
The ball drawing uses a weighted random selection algorithm to ensure variety:
- All undrawn balls are grouped by type.
- Each type is assigned a weight based on:
- Base weight of 1.0 per available ball of that type.
- Recent draw penalty: If a type was drawn in the last 3 draws, its weight is reduced by a factor of 3× per recent occurrence.
- Ball slaps boost: Ball slap type gets a 1.5× weight multiplier to maintain variety.
- Special field cooldown: If the last draw was an edge or cock ring, other edge/cock ring types get a 0.3× weight multiplier.
- A type is selected randomly based on these weights.
- A random ball is picked from the selected type.
This ensures that you don't get long streaks of the same ball type and that the game feels varied and unpredictable.
What Happens When a Ball Is Drawn
For Ball Slaps:
- The ball is immediately drawn and marked on the board.
- It appears in the drawn balls list.
- Bingo goals are checked automatically.
For Special Fields (Cock Rings, Butt Plug, Ball Gag, Edges, Nipple Clamps):
- The ball is drawn but not yet marked.
- A confirmation prompt appears (see below).
- The draw button is replaced by the confirmation UI until you respond.
Confirmation System
When a special field is drawn, the game pauses and shows a confirmation dialog in the draw controls panel.
Confirmation Messages
| Field Type | Prompt Message |
|---|---|
| Cock Ring (Balls) | "You drew a cock ring! Apply it and confirm. (Balls)" |
| Cock Ring (Penis) | "You drew a cock ring! Apply it and confirm. (Penis)" |
| Butt Plug | "You drew a butt plug! Insert it and confirm. (Size)" |
| Ball Gag | "You drew a ball gag! Insert it and confirm." |
| Edges | "You drew X edge(s)! Complete it/them and confirm." |
| Nipple Clamps | "You drew nipple clamps! Apply them and confirm." |
Confirmation Buttons
| Button | Label | Effect |
|---|---|---|
| Confirm (Green) | Varies by type (e.g., "Cock Ring Applied", "Butt Plug Inserted", "3 Edges Completed") | Marks the ball on the board, clears the confirmation, checks for bingo |
| Cancel (Gray) | "Cancel" | Reverses the draw entirely — the ball is placed back as undrawn, removed from the drawn balls list, and is available to be drawn again |
If you cancel a confirmation, the drawn ball is completely undone. It goes back into the pool of available balls as if it was never drawn. This is useful if you're unable to perform the required action.
Active Items Panel
When one or more special items are currently active (drawn and confirmed), the Active Items panel appears on the right side. It provides a quick visual overview of everything currently in play.
Active Item Types
| Item | Display | Color Scheme |
|---|---|---|
| Cock Ring (Balls) | Ring icon + count | Purple |
| Cock Ring (Penis) | Ring icon + count | Purple |
| Butt Plug | Circle icon + size name | Pink |
| Ball Gag | Comment-slash icon + checkmark | Red |
| Nipple Clamps | Grip-lines icon + checkmark | Orange |
Cock rings show a count because multiple can be active simultaneously (e.g., "2" cock rings on balls). All other items show a simple checkmark since only one can be active.
Drawn Balls List
The Drawn Balls panel shows a chronological, scrollable list of all balls drawn so far, along with a counter showing progress (e.g., "Drawn Balls (12 / 25)").
Ball Display
Each drawn ball shows:
- A sequential number (1, 2, 3, ...)
- The ball type and relevant details
- Color coding by type:
| Type | Color |
|---|---|
| Ball Slaps | Blue background |
| Cock Ring (any) | Purple background |
| Edges | Orange background |
| Butt Plug / Ball Gag / Nipple Clamps | Pink background |
Ball slaps additionally show the intensity on the right side.
Auto-Scroll
The drawn balls list automatically scrolls to the bottom when a new ball is drawn, so you always see the most recent draw.
Bingo Goals Progress
At the bottom of the game page, a Bingo Goals section displays progress toward each selected goal.
Progress Display
For each goal, you see:
- Goal title (e.g., "Any Line", "Four Corners")
- Progress bar with a green gradient fill
- Percentage (e.g., "75%")
- Current / Total count (e.g., "3 / 4")
- Visual grid preview showing which cells need to be completed for that goal
Goal Progress Calculation
| Goal | "Current" Meaning | "Total" | Completion |
|---|---|---|---|
| Any Line | Number of completed lines | 1 | Any line complete = 100% |
| Any 2 Lines | Number of completed lines | 2 | 2 lines complete = 100% |
| Horizontal + Vertical Line | Has horizontal (0 or 1) + Has vertical (0 or 1) | 2 | Both present = 100% |
| Four Corners | Number of marked corners | 4 | All 4 marked = 100% |
| Two Diagonal Lines | Number of completed diagonals | 2 | Both diagonals complete = 100% |
| Outer Edge | Number of marked edge cells | Total perimeter cells (4×size − 4) | All edges marked = 100% |
| All Squares | Number of marked cells | Total cells (size²) | All cells marked = 100% |
Bingo Achievement
When any selected goal's condition is fully met after marking a ball:
- The game state is set to bingo achieved.
- The game end time is recorded.
- The winning cells are highlighted with a yellow ring on the board.
- The draw button becomes disabled.
- All achieved goals are tracked in the
achievedGoalsarray. - The game state is flagged as ended.
Multiple goals can be achieved simultaneously if the same draw completes more than one goal at the same time.
Ending the Game
There are two ways the game can end:
1. Bingo Achieved (Automatic)
When a bingo goal is achieved, the game ends automatically. The winning pattern is highlighted and the draw button is disabled.
2. Manual End
You can click the red "End Game" button at any time to end the game early. This navigates directly to the Session Statistics page (/session-statistics) without triggering a bingo achievement.
The "End Game" button is always available, even before any balls are drawn. Clicking it will take you to the statistics page with whatever progress has been made so far.
Game State Persistence
The entire game state is persisted in localStorage via pinia-plugin-persistedstate. This means:
- If you accidentally close the tab or refresh the page, you can return to
/gameand your game will be exactly where you left off. - The board layout, drawn balls, marked cells, pending confirmations, and timer are all preserved.
- The game state persists until you start a new game or reset the game from the header/footer.
Timer
A game timer starts when the game is initialized (when you click "Start Game" on the configuration page). The elapsed time is calculated from gameStartTime and is displayed on the session statistics page. While on the game page, the timer runs in the background and updates every second.