ivantrujillotech/fuggler-frenzy

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.