# ivantrujillotech/fuggler-frenzy architecture

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

- Interactive diagram: https://gitdiagram.com/ivantrujillotech/fuggler-frenzy
- Repository: https://github.com/ivantrujillotech/fuggler-frenzy

## Overview

1. **What this repo is**
   - `Fuggler Frenzy` is a **client-side Vue 3 game SPA** built with **Vite**.
   - The app is organized around a central game loop: manage resources, buy units, place them on a board, and consult a compendium of units/items.

2. **App bootstrap and shell**
   - `index.html` is the Vite entry page.
   - `src/main.js` boots Vue, mounts the root app, and wires in the router and global state.
   - `src/App.vue` is the top-level shell, likely hosting the route outlet and shared layout/styling.

3. **Routing splits the product into three screens**
   - `src/router/index.js` separates the app into:
     - `LandingView.vue` for the start/menu screen,
     - `GameView.vue` for active gameplay,
     - `PediaView.vue` for the encyclopedia/compendium.
   - This is a single-page app with route-based screen switching rather than separate pages or services.

4. **Central game state is the core boundary**
   - `src/stores/gameStore.js` is the main orchestrator.
   - It likely owns the authoritative state for:
     - gold and rerolls,
     - shop inventory,
     - player bench,
     - board placement,
     - round/combat progression.
   - Most gameplay components should read from and write to this store rather than holding duplicated local state.

5. **Gameplay view composition**
   - `src/views/GameView.vue` is the main arena and composes the battle/shop UI.
   - The visible gameplay is split into two major panels:
     - `BoardArea.vue` for placement/combat board interactions,
     - `ShopArea.vue` for buying and refreshing available Fugglers.
   - This view is the main consumer of the game store.

6. **Board and unit subsystem**
   - `src/components/BoardArea.vue` appears to represent the tactical board and bench management area.
   - `src/components/FugglerUnit.vue` is the unit card/token used on the board and/or bench.
   - The README indicates drag-and-drop placement, so this subsystem is the interaction boundary between rendered unit state and board slots.
   - The board enforces gameplay constraints such as maximum active units and valid placement.

7. **Shop and economy subsystem**
   - `src/components/ShopArea.vue` is the purchasing interface.
   - It likely displays generated shop units, purchase actions, and the reroll mechanic.
   - The flow is: store exposes current shop state → ShopArea renders options → player action updates the store → board/bench state changes.

8. **Compendium and metadata subsystem**
   - `src/views/PediaView.vue` provides a reference screen for game knowledge.
   - `src/data/fugglerPedia.js` and `src/data/items.js` are the static content sources for Fugglers, items, and likely combo/upgrade descriptions.
   - `FugglerTooltip.vue` and `ItemTooltip.vue` are used to surface detailed metadata without leaving the page.

9. **Visual assets and UI chrome**
   - `src/assets/units` and `src/assets/HUD/**` contain game art, unit imagery, and interface decorations.
   - `src/style.css` provides the global visual system: custom layout, HUD treatment, and the game’s distinctive presentation.
   - The repo uses CSS rather than a component library for the core look and feel.

10. **Interaction and UX technologies**
   - The README explicitly calls out **VueDraggable Pro** for drag-and-drop unit movement.
   - It also uses **@floating-ui/vue** for tooltips/popovers, which matters because compendium and item details are shown in overlays rather than inline panels.
   - These libraries define the main interaction boundaries: draggable battlefield objects and hover/click metadata overlays.

11. **Data flow to diagram**
   - Static content lives in `src/data/*`.
   - `gameStore` turns that content into mutable game state.
   - Views consume store state and delegate interaction to child components.
   - Components emit actions back into the store, which then updates the rendered board/shop/tooltip views.

12. **System boundary**
   - There is no backend or external API in the tree.
   - This is a self-contained front-end game client: all gameplay logic, UI state, and reference data appear to live inside the Vue app.
   - `temp_backup/GDD.md` is documentation/reference only, not part of the runtime architecture.

Main entry points: [`src/stores/gameStore.js`](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/stores/gameStore.js) (Game store), [`src/main.js`](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/main.js) (Main boot), [`src/views/PediaView.vue`](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/views/PediaView.vue) (Pedia view), [`src/router/index.js`](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/router/index.js) (Router)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shell["Shell"]
  node_index_html["Entry page<br/>entry html<br/>[index.html]"]
  node_main_js["Main boot<br/>vue bootstrap<br/>[main.js]"]
  node_app_vue["App shell<br/>vue shell<br/>[App.vue]"]
  node_router_js["Router<br/>[index.js]"]
  node_landing_view["Landing<br/>screen<br/>[LandingView.vue]"]
  node_style_css["Global style<br/>styles<br/>[style.css]"]
end

subgraph group_gameplay["Gameplay"]
  node_game_view["Game view<br/>screen<br/>[GameView.vue]"]
  node_board_area["Board area<br/>board UI<br/>[BoardArea.vue]"]
  node_shop_area["Shop area<br/>shop UI<br/>[ShopArea.vue]"]
  node_fuggler_unit["Unit card<br/>unit UI<br/>[FugglerUnit.vue]"]
end

subgraph group_reference["Pedia"]
  node_pedia_view["Pedia view<br/>screen<br/>[PediaView.vue]"]
  node_fuggler_tooltip["Fuggler tip<br/>tooltip UI<br/>[FugglerTooltip.vue]"]
  node_item_tooltip["Item tip<br/>tooltip UI<br/>[ItemTooltip.vue]"]
end

subgraph group_state["State"]
  node_game_store[("Game store<br/>state store<br/>[gameStore.js]")]
  node_fuggler_pedia["Fuggler data<br/>reference data<br/>[fugglerPedia.js]"]
  node_items_data["Item data<br/>reference data<br/>[items.js]"]
end

subgraph group_assets["Assets"]
  node_assets_dir[("Game assets")]
  node_units_assets[("Unit art<br/>asset set")]
  node_hud_assets[("HUD art<br/>asset set")]
end

node_index_html -->|"loads"| node_main_js
node_main_js -->|"mounts"| node_app_vue
node_main_js -->|"installs"| node_router_js
node_main_js -->|"installs"| node_game_store
node_main_js -->|"imports"| node_style_css
node_app_vue -->|"hosts"| node_router_js
node_router_js -->|"routes to"| node_landing_view
node_router_js -->|"routes to"| node_game_view
node_router_js -->|"routes to"| node_pedia_view
node_game_view -->|"composes"| node_board_area
node_game_view -->|"composes"| node_shop_area
node_game_view -->|"consumes"| node_game_store
node_board_area -->|"renders"| node_fuggler_unit
node_board_area -->|"updates"| node_game_store
node_shop_area -->|"updates"| node_game_store
node_shop_area -->|"renders"| node_fuggler_unit
node_pedia_view -->|"reads"| node_fuggler_pedia
node_pedia_view -->|"reads"| node_items_data
node_pedia_view -->|"shows"| node_fuggler_tooltip
node_pedia_view -->|"shows"| node_item_tooltip
node_game_store -->|"derives from"| node_fuggler_pedia
node_game_store -->|"derives from"| node_items_data
node_fuggler_unit -.->|"reveals"| node_fuggler_tooltip
node_fuggler_unit -.->|"uses art"| node_hud_assets
node_style_css -.->|"styles"| node_assets_dir
node_assets_dir -->|"contains"| node_units_assets
node_assets_dir -->|"contains"| node_hud_assets

click node_index_html "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/index.html"
click node_main_js "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/main.js"
click node_app_vue "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/App.vue"
click node_router_js "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/router/index.js"
click node_landing_view "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/views/LandingView.vue"
click node_game_view "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/views/GameView.vue"
click node_board_area "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/BoardArea.vue"
click node_shop_area "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/ShopArea.vue"
click node_fuggler_unit "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/FugglerUnit.vue"
click node_game_store "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/stores/gameStore.js"
click node_pedia_view "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/views/PediaView.vue"
click node_fuggler_tooltip "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/FugglerTooltip.vue"
click node_item_tooltip "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/ItemTooltip.vue"
click node_fuggler_pedia "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/data/fugglerPedia.js"
click node_items_data "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/data/items.js"
click node_style_css "https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/style.css"
click node_assets_dir "https://github.com/ivantrujillotech/fuggler-frenzy/tree/main/src/assets"
click node_units_assets "https://github.com/ivantrujillotech/fuggler-frenzy/tree/main/src/assets/units"
click node_hud_assets "https://github.com/ivantrujillotech/fuggler-frenzy/tree/main/src/assets/HUD"

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_index_html,node_main_js,node_app_vue,node_router_js,node_landing_view,node_style_css toneBlue
class node_game_view,node_board_area,node_shop_area,node_fuggler_unit toneAmber
class node_pedia_view,node_fuggler_tooltip,node_item_tooltip toneMint
class node_game_store,node_fuggler_pedia,node_items_data toneRose
class node_assets_dir,node_units_assets,node_hud_assets toneIndigo
```

## Components

### Shell

Bootstrapping and route shell

- [Entry page](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/index.html): entry html · Vite entry document · `index.html`
- [Main boot](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/main.js): vue bootstrap · Mounts Vue app and wires runtime · `src/main.js`
- [App shell](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/App.vue): vue shell · Top-level layout and router outlet · `src/App.vue`
- [Router](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/router/index.js): vue router · Routes between screens · `src/router/index.js`
- [Landing](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/views/LandingView.vue): screen · Start and menu screen · `src/views/LandingView.vue`
- [Global style](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/style.css): styles · App-wide visual system · `src/style.css`

### Gameplay

Core play loop and board/shop interaction

- [Game view](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/views/GameView.vue): screen · Main gameplay screen · `src/views/GameView.vue`
- [Board area](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/BoardArea.vue): board UI · Placement, combat, and bench interactions · `src/components/BoardArea.vue`
- [Shop area](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/ShopArea.vue): shop UI · Buy and reroll interface · `src/components/ShopArea.vue`
- [Unit card](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/FugglerUnit.vue): unit UI · Rendered Fuggler token/card · `src/components/FugglerUnit.vue`

### Pedia

Compendium and metadata screens

- [Pedia view](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/views/PediaView.vue): screen · Compendium and reference screen · `src/views/PediaView.vue`
- [Fuggler tip](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/FugglerTooltip.vue): tooltip UI · Metadata overlay for units · `src/components/FugglerTooltip.vue`
- [Item tip](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/components/ItemTooltip.vue): tooltip UI · Metadata overlay for items · `src/components/ItemTooltip.vue`

### State

Central mutable game state and static data

- [Game store](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/stores/gameStore.js): state store · Authoritative gameplay state and actions · `src/stores/gameStore.js`
- [Fuggler data](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/data/fugglerPedia.js): reference data · Static unit and synergy metadata · `src/data/fugglerPedia.js`
- [Item data](https://github.com/ivantrujillotech/fuggler-frenzy/blob/main/src/data/items.js): reference data · Static item metadata · `src/data/items.js`

### Assets

Artwork and HUD resources

- [Game assets](https://github.com/ivantrujillotech/fuggler-frenzy/tree/main/src/assets): assets · HUD art and unit imagery · `src/assets`
- [Unit art](https://github.com/ivantrujillotech/fuggler-frenzy/tree/main/src/assets/units): asset set · Unit imagery and sprites · `src/assets/units`
- [HUD art](https://github.com/ivantrujillotech/fuggler-frenzy/tree/main/src/assets/HUD): asset set · Interface decoration and HUD resources · `src/assets/HUD`

## Connections

- Entry page → Main boot: loads · HTML entry loads the app bootstrap
- Main boot → App shell: mounts · Vue app is mounted into the shell
- Main boot → Router: installs · Router is registered during bootstrap
- Main boot → Game store: installs · Global game state is wired at startup
- Main boot → Global style: imports · Global styles are applied at bootstrap
- App shell → Router: hosts · Shell provides the route outlet
- Router → Landing: routes to · Start screen route
- Router → Game view: routes to · Active play route
- Router → Pedia view: routes to · Reference screen route
- Game view → Board area: composes · Gameplay screen includes board interactions
- Game view → Shop area: composes · Gameplay screen includes shop interactions
- Game view → Game store: consumes · Reads and mutates core game state
- Board area → Unit card: renders · Board uses unit cards/tokens
- Board area → Game store: updates · Placement and bench actions flow to store
- Shop area → Game store: updates · Purchase and reroll actions flow to store
- Shop area → Unit card: renders · Shop displays available units
- Pedia view → Fuggler data: reads · Compendium data source for Fugglers
- Pedia view → Item data: reads · Compendium data source for items
- Pedia view → Fuggler tip: shows · Unit details are presented in overlays
- Pedia view → Item tip: shows · Item details are presented in overlays
- Game store → Fuggler data: derives from · Game state is informed by unit metadata
- Game store → Item data: derives from · Game state is informed by item metadata
- Unit card → Fuggler tip: reveals · Unit UI can surface detailed metadata
- Unit card → HUD art: uses art · Unit presentation relies on HUD styling and assets
- Global style → Game assets: styles · Global theme coordinates the visual asset system
- Game assets → Unit art: contains · Unit imagery subfolder
- Game assets → HUD art: contains · HUD imagery subfolder