# lucashazardous/opensourcecasino architecture

> Architecture diagram of the GitHub repository lucashazardous/opensourcecasino, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-14). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/lucashazardous/opensourcecasino
- Repository: https://github.com/lucashazardous/opensourcecasino

## Overview

Open Source Casino is a browser casino for wagering fake points on slots, roulette, and blackjack. Users enter through the home page, choose a game, select a bet, play a round, and receive any reward as points; the app persists the balance in browser local storage. The graph shows the documented routes and sampled game interactions, plus shared UI and balance handling. Some listed components were not excerpted, so their internal behavior and any connections not documented or shown are omitted.

Main entry points: [`src/App.vue`](https://github.com/lucashazardous/opensourcecasino/blob/main/src/App.vue) (App shell), [`src/views/RouletteView.vue`](https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/RouletteView.vue) (Roulette round), [`src/views/SlotsView.vue`](https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/SlotsView.vue) (Slots round), [`src/router/index.js`](https://github.com/lucashazardous/opensourcecasino/blob/main/src/router/index.js) (Route table)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["App and routing"]
  node_entry["Vue entry<br/>[main.js]"]
  node_app["App shell<br/>[App.vue]"]
  node_router["Route table<br/>[index.js]"]
  node_home["Game home<br/>[HomeView.vue]"]
  node_game_model["Game metadata<br/>[Game.js]"]
end

subgraph group_gameplay["Casino games"]
  node_blackjack["Blackjack round<br/>[BlackjackView.vue]"]
  node_roulette["Roulette round<br/>[RouletteView.vue]"]
  node_slots["Slots round<br/>[SlotsView.vue]"]
  node_roulette_wheel["Roulette wheel"]
  node_slot_reel["Slot reel<br/>[SlotComponent.vue]"]
  node_blackjack_table["Blackjack table"]
end

subgraph group_shared_ui["Shared interface"]
  node_nav["Navigation bar<br/>[NavBar.vue]"]
  node_game_card["Game card<br/>[GameCard.vue]"]
  node_bet_select["Bet selector"]
  node_info["Odds information<br/>[InfoComponent.vue]"]
  node_toast["Reward notification"]
end

subgraph group_balance["Points and persistence"]
  node_points_store[("Browser local storage")]
end

node_user(("Player"))

node_user -->|"plays"| node_app
node_entry -->|"mounts"| node_app
node_entry -->|"installs"| node_router
node_app -->|"renders routes"| node_router
node_router -->|"routes to"| node_home
node_router -->|"routes to"| node_slots
node_router -->|"routes to"| node_roulette
node_router -->|"routes to"| node_blackjack
node_app -->|"renders"| node_nav
node_app -->|"creates"| node_game_model
node_home -->|"renders"| node_game_card
node_app -->|"reads and writes"| node_points_store
node_blackjack -->|"emits balance changes"| node_app
node_slots -->|"emits balance changes"| node_app
node_roulette -->|"emits balance changes"| node_app
node_blackjack -->|"uses"| node_bet_select
node_blackjack -->|"renders"| node_blackjack_table
node_blackjack -->|"renders"| node_toast
node_roulette -->|"uses"| node_bet_select
node_roulette -->|"spins"| node_roulette_wheel
node_roulette -->|"renders"| node_toast
node_roulette -->|"renders"| node_info
node_slots -->|"uses"| node_bet_select
node_slots -->|"spins"| node_slot_reel
node_slots -->|"renders"| node_toast
node_slots -->|"renders"| node_info

click node_entry "https://github.com/lucashazardous/opensourcecasino/blob/main/src/main.js"
click node_app "https://github.com/lucashazardous/opensourcecasino/blob/main/src/App.vue"
click node_router "https://github.com/lucashazardous/opensourcecasino/blob/main/src/router/index.js"
click node_home "https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/HomeView.vue"
click node_game_model "https://github.com/lucashazardous/opensourcecasino/blob/main/src/Game.js"
click node_blackjack "https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/BlackjackView.vue"
click node_roulette "https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/RouletteView.vue"
click node_slots "https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/SlotsView.vue"
click node_roulette_wheel "https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/RouletteComponent.vue"
click node_slot_reel "https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/SlotComponent.vue"
click node_blackjack_table "https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/BlackjackCardTable.vue"
click node_nav "https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/NavBar.vue"
click node_game_card "https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/GameCard.vue"
click node_bet_select "https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/BetSelectButton.vue"
click node_info "https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/InfoComponent.vue"
click node_toast "https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/ToastNotification.vue"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_entry,node_app,node_router,node_home,node_game_model toneBlue
class node_blackjack,node_roulette,node_slots,node_roulette_wheel,node_slot_reel,node_blackjack_table toneAmber
class node_nav,node_game_card,node_bet_select,node_info,node_toast toneMint
class node_points_store toneRose
class node_user toneIndigo
```

## Components

### App and routing

- [Vue entry](https://github.com/lucashazardous/opensourcecasino/blob/main/src/main.js): `src/main.js`
- [App shell](https://github.com/lucashazardous/opensourcecasino/blob/main/src/App.vue): `src/App.vue`
- [Route table](https://github.com/lucashazardous/opensourcecasino/blob/main/src/router/index.js): `src/router/index.js`
- [Game home](https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/HomeView.vue): `src/views/HomeView.vue`
- [Game metadata](https://github.com/lucashazardous/opensourcecasino/blob/main/src/Game.js): `src/Game.js`

### Casino games

- [Blackjack round](https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/BlackjackView.vue): `src/views/BlackjackView.vue`
- [Roulette round](https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/RouletteView.vue): `src/views/RouletteView.vue`
- [Slots round](https://github.com/lucashazardous/opensourcecasino/blob/main/src/views/SlotsView.vue): `src/views/SlotsView.vue`
- [Roulette wheel](https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/RouletteComponent.vue): `src/components/RouletteComponent.vue`
- [Slot reel](https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/SlotComponent.vue): `src/components/SlotComponent.vue`
- [Blackjack table](https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/BlackjackCardTable.vue): `src/components/BlackjackCardTable.vue`

### Shared interface

- [Navigation bar](https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/NavBar.vue): `src/components/NavBar.vue`
- [Game card](https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/GameCard.vue): `src/components/GameCard.vue`
- [Bet selector](https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/BetSelectButton.vue): `src/components/BetSelectButton.vue`
- [Odds information](https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/InfoComponent.vue): `src/components/InfoComponent.vue`
- [Reward notification](https://github.com/lucashazardous/opensourcecasino/blob/main/src/components/ToastNotification.vue): `src/components/ToastNotification.vue`

### Points and persistence

- **Browser local storage**

### Other components

- **Player**

## Connections

- Player → App shell: plays
- Vue entry → App shell: mounts (evidence: `src/main.js`)
- Vue entry → Route table: installs (evidence: `src/main.js`)
- App shell → Route table: renders routes (evidence: `src/App.vue`)
- Route table → Game home: routes to (evidence: `src/router/index.js`)
- Route table → Slots round: routes to (evidence: `src/router/index.js`)
- Route table → Roulette round: routes to (evidence: `src/router/index.js`)
- Route table → Blackjack round: routes to (evidence: `src/router/index.js`)
- App shell → Navigation bar: renders (evidence: `src/App.vue`)
- App shell → Game metadata: creates (evidence: `src/App.vue`)
- Game home → Game card: renders (evidence: `src/views/HomeView.vue`)
- App shell → Browser local storage: reads and writes (evidence: `src/App.vue`)
- Blackjack round → App shell: emits balance changes (evidence: `src/views/BlackjackView.vue`)
- Slots round → App shell: emits balance changes (evidence: `src/views/SlotsView.vue`)
- Roulette round → App shell: emits balance changes (evidence: `src/views/RouletteView.vue`)
- Blackjack round → Bet selector: uses (evidence: `src/views/BlackjackView.vue`)
- Blackjack round → Blackjack table: renders (evidence: `src/views/BlackjackView.vue`)
- Blackjack round → Reward notification: renders (evidence: `src/views/BlackjackView.vue`)
- Roulette round → Bet selector: uses (evidence: `src/views/RouletteView.vue`)
- Roulette round → Roulette wheel: spins (evidence: `src/views/RouletteView.vue`)
- Roulette round → Reward notification: renders (evidence: `src/views/RouletteView.vue`)
- Roulette round → Odds information: renders (evidence: `src/views/RouletteView.vue`)
- Slots round → Bet selector: uses (evidence: `src/views/SlotsView.vue`)
- Slots round → Slot reel: spins (evidence: `src/views/SlotsView.vue`)
- Slots round → Reward notification: renders (evidence: `src/views/SlotsView.vue`)
- Slots round → Odds information: renders (evidence: `src/views/SlotsView.vue`)