# eltobit0/fib-website architecture
> Architecture diagram of the GitHub repository eltobit0/fib-website, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-09). It is an AI-made overview: check details against the source.
- Interactive diagram: https://gitdiagram.com/eltobit0/fib-website
- Repository: https://github.com/eltobit0/fib-website
## Overview
ForceItemBattle is a browser application for a Minecraft item-battle community, with a spin-wheel experience alongside game guides, item-pool editing, and player statistics. The main visitor flow is pathname navigation from the app shell to a selected page; the wheel provides the interactive spin experience, while activity and leaderboard features expose community state. The README describes the item-description/resource-pack context but does not document runtime wiring to the Minecraft plugin. Relationships below are limited to app-shell references, sampled source imports/calls, or explicit documentation; unsampled subsystem links are omitted where not evidenced.
Main entry points: [`src/App.jsx`](https://github.com/eltobit0/fib-website/blob/main/src/App.jsx) (App routing), [`src/components/wheel/WheelSpinner.jsx`](https://github.com/eltobit0/fib-website/blob/main/src/components/wheel/WheelSpinner.jsx) (Wheel experience), [`src/components/wheel/canvas/CanvasSpinningStrip.jsx`](https://github.com/eltobit0/fib-website/blob/main/src/components/wheel/canvas/CanvasSpinningStrip.jsx) (Canvas reel), [`src/pages/ItemPools/ForceItemPools.jsx`](https://github.com/eltobit0/fib-website/blob/main/src/pages/ItemPools/ForceItemPools.jsx) (Item-pool editor)
## Diagram (Mermaid)
```mermaid
flowchart TD
subgraph group_shell["Application shell"]
node_app["App routing
[App.jsx]"]
node_nav["Site navigation
[Navigation.jsx]"]
end
subgraph group_wheel["Wheel experience"]
node_wheel["Wheel experience
[WheelSpinner.jsx]"]
node_reel["Canvas reel"]
node_rarity["Rarity helpers
[rarityHelpers.jsx]"]
node_itemhelpers["Item helpers
[helpers.js]"]
node_wheelconfig["Wheel configuration
[constants.js]"]
end
subgraph group_community["Community services"]
node_activity["Live activity"]
node_leaderboard["Collection leaderboard"]
node_auth["Authentication state
[AuthContext.jsx]"]
node_sound["Sound controls
[SoundContext.jsx]"]
node_audiobus["Audio bus
[audioBus.js]"]
end
subgraph group_knowledge["Guides and tools"]
node_wiki["Wiki shell
[WikiRoot.jsx]"]
node_home["Home guide
[HomePage.jsx]"]
node_gameplay["Gameplay guide
[Gameplay.jsx]"]
node_itempools["Item-pool editor
[ForceItemPools.jsx]"]
node_routes["Item acquisition routes
[routes.js]"]
node_route_data["Route data
[routes.data.js]"]
end
subgraph group_stats["Player statistics"]
node_stats["Statistics pages
[StatsShell.jsx]"]
end
node_visitor(("Visitor"))
node_activityapi[("Activity API")]
node_leaderboardapi[("Leaderboard API")]
node_statsapi[("Statistics API")]
node_visitor -->|"opens"| node_app
node_app -->|"renders"| node_nav
node_app -->|"wraps pages"| node_wiki
node_app -->|"routes to"| node_home
node_app -->|"routes to"| node_gameplay
node_app -->|"routes to"| node_itempools
node_app -->|"routes to"| node_wheel
node_app -->|"routes to"| node_stats
node_wheel -->|"renders"| node_reel
node_reel -->|"uses"| node_itemhelpers
node_reel -->|"uses"| node_rarity
node_wheel -->|"uses"| node_wheelconfig
node_activity -->|"fetches and streams"| node_activityapi
node_leaderboard -->|"fetches"| node_leaderboardapi
node_sound -->|"uses"| node_audiobus
node_itempools -->|"uses item data"| node_routes
node_routes -->|"imports"| node_route_data
click node_app "https://github.com/eltobit0/fib-website/blob/main/src/App.jsx"
click node_nav "https://github.com/eltobit0/fib-website/blob/main/src/components/common/Navigation.jsx"
click node_wheel "https://github.com/eltobit0/fib-website/blob/main/src/components/wheel/WheelSpinner.jsx"
click node_reel "https://github.com/eltobit0/fib-website/blob/main/src/components/wheel/canvas/CanvasSpinningStrip.jsx"
click node_rarity "https://github.com/eltobit0/fib-website/blob/main/src/utils/rarityHelpers.jsx"
click node_itemhelpers "https://github.com/eltobit0/fib-website/blob/main/src/utils/helpers.js"
click node_wheelconfig "https://github.com/eltobit0/fib-website/blob/main/src/components/wheel/config/constants.js"
click node_activity "https://github.com/eltobit0/fib-website/blob/main/src/context/ActivityContext.jsx"
click node_leaderboard "https://github.com/eltobit0/fib-website/blob/main/src/hooks/useCollectionLeaderboard.js"
click node_auth "https://github.com/eltobit0/fib-website/blob/main/src/context/AuthContext.jsx"
click node_sound "https://github.com/eltobit0/fib-website/blob/main/src/context/SoundContext.jsx"
click node_audiobus "https://github.com/eltobit0/fib-website/blob/main/src/utils/audioBus.js"
click node_wiki "https://github.com/eltobit0/fib-website/blob/main/src/wiki/shell/WikiRoot.jsx"
click node_home "https://github.com/eltobit0/fib-website/blob/main/src/pages/HomePage.jsx"
click node_gameplay "https://github.com/eltobit0/fib-website/blob/main/src/pages/Gameplay.jsx"
click node_itempools "https://github.com/eltobit0/fib-website/blob/main/src/pages/ItemPools/ForceItemPools.jsx"
click node_routes "https://github.com/eltobit0/fib-website/blob/main/src/wiki/data/routes.js"
click node_route_data "https://github.com/eltobit0/fib-website/blob/main/src/wiki/data/routes.data.js"
click node_stats "https://github.com/eltobit0/fib-website/blob/main/src/pages/Stats/StatsShell.jsx"
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_app,node_nav toneBlue
class node_wheel,node_reel,node_rarity,node_itemhelpers,node_wheelconfig,node_activityapi,node_leaderboardapi,node_statsapi toneAmber
class node_activity,node_leaderboard,node_auth,node_sound,node_audiobus toneMint
class node_wiki,node_home,node_gameplay,node_itempools,node_routes,node_route_data toneRose
class node_stats,node_visitor toneIndigo
```
## Components
### Application shell
- [App routing](https://github.com/eltobit0/fib-website/blob/main/src/App.jsx): `src/App.jsx`
- [Site navigation](https://github.com/eltobit0/fib-website/blob/main/src/components/common/Navigation.jsx): `src/components/common/Navigation.jsx`
### Wheel experience
- [Wheel experience](https://github.com/eltobit0/fib-website/blob/main/src/components/wheel/WheelSpinner.jsx): `src/components/wheel/WheelSpinner.jsx`
- [Canvas reel](https://github.com/eltobit0/fib-website/blob/main/src/components/wheel/canvas/CanvasSpinningStrip.jsx): `src/components/wheel/canvas/CanvasSpinningStrip.jsx`
- [Rarity helpers](https://github.com/eltobit0/fib-website/blob/main/src/utils/rarityHelpers.jsx): `src/utils/rarityHelpers.jsx`
- [Item helpers](https://github.com/eltobit0/fib-website/blob/main/src/utils/helpers.js): `src/utils/helpers.js`
- [Wheel configuration](https://github.com/eltobit0/fib-website/blob/main/src/components/wheel/config/constants.js): `src/components/wheel/config/constants.js`
### Community services
- [Live activity](https://github.com/eltobit0/fib-website/blob/main/src/context/ActivityContext.jsx): `src/context/ActivityContext.jsx`
- [Collection leaderboard](https://github.com/eltobit0/fib-website/blob/main/src/hooks/useCollectionLeaderboard.js): `src/hooks/useCollectionLeaderboard.js`
- [Authentication state](https://github.com/eltobit0/fib-website/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Sound controls](https://github.com/eltobit0/fib-website/blob/main/src/context/SoundContext.jsx): `src/context/SoundContext.jsx`
- [Audio bus](https://github.com/eltobit0/fib-website/blob/main/src/utils/audioBus.js): `src/utils/audioBus.js`
### Guides and tools
- [Wiki shell](https://github.com/eltobit0/fib-website/blob/main/src/wiki/shell/WikiRoot.jsx): `src/wiki/shell/WikiRoot.jsx`
- [Home guide](https://github.com/eltobit0/fib-website/blob/main/src/pages/HomePage.jsx): `src/pages/HomePage.jsx`
- [Gameplay guide](https://github.com/eltobit0/fib-website/blob/main/src/pages/Gameplay.jsx): `src/pages/Gameplay.jsx`
- [Item-pool editor](https://github.com/eltobit0/fib-website/blob/main/src/pages/ItemPools/ForceItemPools.jsx): `src/pages/ItemPools/ForceItemPools.jsx`
- [Item acquisition routes](https://github.com/eltobit0/fib-website/blob/main/src/wiki/data/routes.js): `src/wiki/data/routes.js`
- [Route data](https://github.com/eltobit0/fib-website/blob/main/src/wiki/data/routes.data.js): `src/wiki/data/routes.data.js`
### Player statistics
- [Statistics pages](https://github.com/eltobit0/fib-website/blob/main/src/pages/Stats/StatsShell.jsx): `src/pages/Stats/StatsShell.jsx`
### Other components
- **Visitor**
- **Activity API**
- **Leaderboard API**
- **Statistics API**
## Connections
- Visitor → App routing: opens (evidence: `src/App.jsx`)
- App routing → Site navigation: renders (evidence: `src/App.jsx`)
- App routing → Wiki shell: wraps pages (evidence: `src/App.jsx`)
- App routing → Home guide: routes to (evidence: `src/App.jsx`)
- App routing → Gameplay guide: routes to (evidence: `src/App.jsx`)
- App routing → Item-pool editor: routes to (evidence: `src/App.jsx`)
- App routing → Wheel experience: routes to (evidence: `src/App.jsx`)
- App routing → Statistics pages: routes to (evidence: `src/App.jsx`)
- Wheel experience → Canvas reel: renders (evidence: `src/components/wheel/WheelSpinner.jsx`)
- Canvas reel → Item helpers: uses (evidence: `src/components/wheel/canvas/CanvasSpinningStrip.jsx`)
- Canvas reel → Rarity helpers: uses (evidence: `src/components/wheel/canvas/CanvasSpinningStrip.jsx`)
- Wheel experience → Wheel configuration: uses (evidence: `src/components/wheel/WheelSpinner.jsx`)
- Live activity → Activity API: fetches and streams (evidence: `src/context/ActivityContext.jsx`)
- Collection leaderboard → Leaderboard API: fetches (evidence: `src/hooks/useCollectionLeaderboard.js`)
- Sound controls → Audio bus: uses (evidence: `src/context/SoundContext.jsx`)
- Item-pool editor → Item acquisition routes: uses item data (evidence: `src/pages/ItemPools/ForceItemPools.jsx`)
- Item acquisition routes → Route data: imports (evidence: `src/wiki/data/routes.js`)