ArtechFuz3D
🚧

UPDATES IN PROGRESS...

🚧
Back to projects
Mar 05, 2025
10 min read

Iconix Bingo

Multiplayer Icon Bingo

GDD

Version: 1.3
Date: March 04, 2025
Authors: ArtechFuz3D, [Co-Creator Name]
Project: Iconix Bingo (Bingo-style multiplayer game with community-made art)
Deployment: Frontend on itch.io (https://artechfuz3d.itch.io/iconix-bingo), Backend on Render (https://iconix-bingo-backend.onrender.com)

1. Overview

1.1 Game Concept

Iconix Bingo is a digital, multiplayer reimagination of Bingo, infused with a creative twist featuring community-designed icons. Players match icons called by a host to their 4x4 boards, aiming to complete host-selected patterns (row, column, diagonal, full board, or combinations). The game uses a deck of 54 unique icons (currently placeholder SVGs from game-icons, to be replaced with community art), fostering a collaborative, artistic experience. Players mark matches with a red “X” (planned to evolve into virtual “beans”), and the first to complete a pattern declares “¡Bingo!” to win.

1.2 Genre

  • Casual Multiplayer
  • Real-Time Social Game
  • Board Game Adaptation

1.3 Target Audience

  • Casual gamers aged 10+.
  • Fans of Bingo or similar pattern-matching games.
  • Art enthusiasts drawn to community-driven visuals.

1.4 Platforms

  • Web-based (itch.io frontend, Render backend).
  • Compatible with modern browsers (Chrome, Firefox, Safari) on desktop and mobile.

2. Gameplay

2.1 Core Mechanics

  • Host Setup:
    • Host selects one or more winning patterns (row, column, diagonal, full board) before starting.
    • A unique 6-character room code and shareable link (e.g., https://artechfuz3d.itch.io/iconix-bingo#code=[CODE]) are generated for invites, stored server-side for auto-joining.
  • Player Setup:
    • Players join via code or link, auto-joining if the link matches an active lobby; each receives a 4x4 board with 16 unique icons from a 54-icon pool.
    • Boards are randomized, ensuring no duplicates among players.
  • Gameplay:
    • Host initiates icon calls at a customizable speed (1s, 3s, 5s, 10s, 30s).
    • Players mark matching icons with a red “X” by clicking, with toggleable marking (on/off).
    • The first player to complete a selected pattern clicks “¡Bingo!” to win, verified server-side.
  • Review: Host can pause and review called icons in a popup overlay with resume/close options.
  • Game Over: On win or host disconnect, the game pauses, displaying the winner or end message, with “Restart Game” (host-only) or “Exit to Menu” options.

2.2 Game Flow

  1. Menu:
    • Players enter an optional name and choose to create or join a game.
    • Host creates a room, generating a code and shareable link stored server-side.
    • Players join via code (manual entry) or link (auto-joins using server-stored URL).
    • Connected players list updates in real-time.
  2. Lobby:
    • Displays room code, shareable link (host-only), player list (names, ready status, host tag), and winning patterns.
    • Players toggle “Ready”; host selects call speed and starts when all are ready.
  3. Playing:
    • Host calls icons at the chosen interval; the last called icon is shown prominently.
    • Players mark/unmark matches with “X”; host can pause and review called icons.
    • Player declares “¡Bingo!” on pattern completion, triggering server verification.
  4. End:
    • Winner announced (e.g., “[Name] won with: Row 1”); game pauses.
    • Host sees “Restart Game” to reset boards and resume in the same lobby; all see “Exit to Menu.”
    • Game ends if host disconnects, notifying players with “Host disconnected.”

2.3 Winning Conditions

  • First player to cover one or more host-selected patterns (row, column, diagonal, full board, or combination) wins by clicking “¡Bingo!”, validated by the server.

3. Features

3.1 Current Features (Implemented)

  • Multiplayer:
    • Real-time room-based play via Socket.IO.
    • Host and players connect using a 6-character room code or shareable link (e.g., https://artechfuz3d.itch.io/iconix-bingo#code=ABC123).
    • Auto-joining via server-stored lobby URLs when using share links.
  • Board:
    • 4x4 grid with 16 random icons from a 54-icon pool (currently game-icons:abstract-001 to 054 SVGs).
    • Players toggle matches with a red “X”.
  • Lobby:
    • Players toggle “Ready” status; list shows names, readiness, and host tag.
    • Names customizable or auto-generated (Player_[ID]).
    • Host selects winning pattern(s) via checkboxes and call speed (1s, 3s, 5s, 10s, 30s) via dropdown.
    • Shareable link auto-joins players to the lobby server-side.
    • Real-time connected players list in menu.
  • Gameplay:
    • Host initiates icon calls at selected intervals; last called icon displayed with SVG.
    • Players mark/unmark with “X”; win detection for chosen pattern(s).
    • ”¡Bingo!” button triggers server-side win check.
    • Ends if all 54 icons are called without a winner.
  • Review Mode:
    • Host’s “Review Cards” button pauses the game and shows called icons in a popup overlay.
    • ”Resume Game” restarts calling; “Close” hides the popup without resuming.
  • Game Over:
    • On win, game pauses; winner announced (e.g., “[Name] won with: Diagonal”).
    • ”Restart Game” (host-only) resets boards and resumes play in the same lobby.
    • ”Exit to Menu” returns players to the main menu, notifying the server.
    • Host disconnect ends the game with a message (“Game ended: Host disconnected”).
  • Deployment:
    • Frontend: itch.io (https://artechfuz3d.itch.io/iconix-bingo), local (npm run dev on http://localhost:4321).
    • Backend: Render (https://iconix-bingo-backend.onrender.com), local (node server.js on http://localhost:3000).

3.2 Planned Features (Co-Creator Notes - Updated)

  • Board Selection:
    • Replace game-icons SVGs with 54 community-made LoterĂ­a-inspired icons.
  • Bean Marking:
    • Swap red “X” with a community-designed virtual bean token.
  • Victory Feedback:
    • Add visual (e.g., animation) and optional audio cues for “¡Bingo!” wins.
  • Audio:
    • Implement optional sound effects (icon calls, win declaration).

4. Technical Design

4.1 Architecture

  • Frontend: Astro, deployed on itch.io as static HTML/CSS/JS.
    • index.astro: Single-page app handling UI and Socket.IO client logic (plain JS).
    • Built with npm run build to dist/ folder, uploaded to itch.io.
  • Backend: Node.js + Socket.IO, hosted on Render.
    • server.js: Manages game state, rooms, and real-time events.
  • Communication: Socket.IO over WebSocket (fallback to polling).
    • CORS: http://localhost:4321 (dev), https://artechfuz3d.itch.io (prod).

4.2 Game State

  • Lobby (Server):
    • players: Map of { id, name, ready, isHost, card, originalCard }.
    • lobbyUrls: Map of { code: shareUrl } for auto-joining via share links.
    • Stored in games Map, keyed by room code.
  • Playing (Server):
    • calledIcons: Set of called icon indices (0-53).
    • started: Boolean for game status.
    • callInterval: Interval ID for icon calling.
    • paused: Boolean for pause state (true on win or review).
    • callSpeed: Integer (ms) for call interval (1000, 3000, 5000, 10000, 30000).
    • pattern: Array of winning patterns (e.g., ["row", "diagonal"]).
  • Client:
    • Local variables mirror server state: gameState (menu, lobby, playing), lobbyCode, isHost, players, card, calledCards, winner, etc.

4.3 Data Flow

  • Connect: Client emits 'clientInfo' with socketId; server matches to lobbyUrls and emits 'autoJoin' if found.
  • Create Game: Host emits 'createGame' with { pattern, shareUrl }, server generates code, stores URL in lobbyUrls, returns 'lobbyCreated' with full shareUrl.
  • Join Game: Player emits 'joinGame', server adds to room, emits 'joinedLobby'.
  • Set Name: Player emits 'setName', server updates, broadcasts 'playerUpdate' and 'connectedPlayersUpdate'.
  • Toggle Ready: Player emits 'ready', server toggles, broadcasts 'playerUpdate'.
  • Start Game: Host emits 'startGame' with { lobbyCode, callSpeed }, server generates cards, emits 'init' and 'gameStarted'.
  • Call Icon: Server emits 'newIcon' at intervals (pausable), ends with 'allIconsCalled' if 54 icons are exhausted.
  • Mark Icon: Player emits 'markNumber' with { lobbyCode, row, col, toggle }, server updates, emits 'cardUpdate'.
  • Pause Game: Host emits 'pauseGame', server pauses interval.
  • Resume Game: Host emits 'resumeGame', server resumes interval.
  • Review Icons: Host emits 'reviewCards', server returns called icons to host.
  • Declare Win: Player emits 'callBingo', server verifies, pauses game, emits 'gameOver' with { winner, wins }.
  • Restart Game: Host emits 'restartGame', server resets state, emits 'init' and 'gameStarted'.
  • Leave Game: Player emits 'leaveGame', server updates players, deletes empty game and URL.
  • Disconnect: Server detects, ends game if host, updates players otherwise.

5. Art & UI

5.1 Visual Style

  • Clean, centered layout with a modern, minimalist design.
  • Uses game-icons:abstract-001 to -054 SVGs as placeholders; planned for community art.
  • Background features a twinkling stars effect (TwinklingStars.astro).

5.2 UI Elements

  • Menu:
    • Name input, “Create Game” button, “Join Game” input/button (manual code entry), connected players list.
  • Lobby:
    • Room code (displayed), shareable link (host-only, clickable), player list (name, ready status, host tag), pattern checkboxes, call speed dropdown (host-only), “Toggle Ready” button, “Start Game” (host-only).
  • Playing:
    • 4x4 clickable board (toggles “X”), last called icon (SVG + text placeholder), player list, “¡Bingo!” button, “Review Cards” (host-only), game-over buttons (“Restart Game” host-only, “Exit to Menu”).
    • Review overlay: Called icons list (SVGs), “Close”, “Resume Game”.
  • Feedback: Errors in red (clear after 5s), winner in default text (planned for green, 24px).

5.3 Art (Artist Edition)

  • Icons: 54 unique SVGs (game-icons now, community LoterĂ­a-inspired art planned).
  • Bean Token: Red “X” placeholder, to be a community-designed bean.
  • Credit: Planned in-game credit (e.g., “Artist Edition by [Community Names]”).

6. Audio

  • Current:
    • Polytone effects via Web Audio API: card clicks (sawtooth), wins (square fanfare), button hovers (triangle), new icons (sine blip), background music (bingo-themed melody).
  • Planned:
    • Enhance .

7. Development Plan

7.1 Current Status

  • Fully functional multiplayer game with Socket.IO.
  • Features: Room codes/links with server-side auto-joining, pattern selection, ready toggles, unique boards, real-time play, toggleable marking, pause/review, win detection, restart/exit options.
  • Deployed: Backend on Render (https://iconix-bingo-backend.onrender.com); Frontend on itch.io (https://artechfuz3d.itch.io/iconix-bingo).

7.2 Next Steps

  1. Board Selection:
    • Replace game-icons SVGs with 54 community LoterĂ­a-inspired images.
  2. Bean Token:
    • Swap red “X” with a community bean image.
  3. Victory Feedback:
    • Add visual (e.g., animation) and optional audio cues for “¡Bingo!” wins.
  4. Audio:
  • Enhance .

7.3 Deployment

  • Frontend: itch.io (https://artechfuz3d.itch.io/iconix-bingo), local (npm run dev on http://localhost:4321).
  • Backend: Render (iconix-bingo-backend repo, https://iconix-bingo-backend.onrender.com), local (node server.js on http://localhost:3000).
  • Testing: Local and deployed testing complete; itch.io iframe fully functional.

8. Notes from Co-Creator (Updated)

  • Pattern Choice: Host selects multiple patterns pre-game - implemented (row, column, diagonal, full).
  • Joining: Room code and link with server-side auto-joining - implemented, links auto-join via stored URLs.
  • Board: 4x4 with 16/54 unique icons, no duplicates - implemented.
  • Gameplay: Host calls at adjustable speeds (1s, 3s, 5s, 10s, 30s); players mark with toggleable “X” - implemented.
  • Review: Host pauses and reviews called icons - implemented with resume/close options.
  • Win: “¡Bingo!” triggers win check; pauses with restart/exit options - implemented.

9. Technical Notes

  • Icon Deck: 54 icons (SVGs now, community art planned).
  • Latency: Socket.IO ensures real-time updates; tested on Render and itch.io, performs well.
  • Scalability: Render free tier suits small groups; scale if needed.
  • Art Source: Community LoterĂ­a-inspired icons to replace game-icons.
  • itch.io iframe: Server-side URL storage bypasses cross-origin hash access issues.

Deployment URLs

  • Frontend: https://artechfuz3d.itch.io/iconix-bingo (live; local: http://localhost:4321)
  • Backend: https://iconix-bingo-backend.onrender.com (live; local: http://localhost:3000)
Prev
Under The Sea
Next
Loteria II - Artist Edition