# c0der8627/flipzy architecture

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

- Interactive diagram: https://gitdiagram.com/c0der8627/flipzy
- Repository: https://github.com/c0der8627/flipzy

## Overview

This is a browser-based memory matching game. The player selects a level, flips cards to find matching pairs, and advances when all pairs are matched; progress is saved between visits. The JavaScript coordinates level selection, board generation, turn and match handling, and completion. The tree also includes the page shell, styling, and an assets directory. The README is empty, and HTML, CSS, and asset contents were not sampled, so their specific behavior and wiring are not inferred.

Main entry points: [`site/script.js`](https://github.com/c0der8627/flipzy/blob/main/site/script.js) (Game controller), [`site/index.html`](https://github.com/c0der8627/flipzy/blob/main/site/index.html) (Page shell), [`assets`](https://github.com/c0der8627/flipzy/tree/main/assets) (Game assets)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Browser interface"]
  node_page["Page shell<br/>[index.html]"]
  node_styles["Game styling<br/>[style.css]"]
  node_assets["Game assets"]
end

subgraph group_gameplay["Game flow"]
  node_controller["Game controller<br/>[script.js]"]
  node_board["Card board<br/>[script.js]"]
  node_levels["Level selection<br/>[script.js]"]
  node_matching["Card matching<br/>[script.js]"]
  node_completion["Level completion<br/>[script.js]"]
end

subgraph group_progress["Progress state"]
  node_progress_logic["Progress handling<br/>[script.js]"]
  node_storage[("Browser storage")]
end

node_player(("Player"))

node_player -->|"selects and plays"| node_controller
node_controller -->|"updates screens"| node_page
node_controller -->|"renders levels"| node_levels
node_controller -->|"builds board"| node_board
node_board -->|"handles flips"| node_matching
node_matching -->|"checks victory"| node_completion
node_completion -->|"shows modal"| node_controller
node_controller -->|"loads and saves"| node_progress_logic
node_progress_logic -->|"reads and writes"| node_storage
node_board -->|"references logo"| node_assets

click node_page "https://github.com/c0der8627/flipzy/blob/main/site/index.html"
click node_styles "https://github.com/c0der8627/flipzy/blob/main/site/style.css"
click node_controller "https://github.com/c0der8627/flipzy/blob/main/site/script.js"
click node_board "https://github.com/c0der8627/flipzy/blob/main/site/script.js"
click node_levels "https://github.com/c0der8627/flipzy/blob/main/site/script.js"
click node_matching "https://github.com/c0der8627/flipzy/blob/main/site/script.js"
click node_completion "https://github.com/c0der8627/flipzy/blob/main/site/script.js"
click node_progress_logic "https://github.com/c0der8627/flipzy/blob/main/site/script.js"
click node_assets "https://github.com/c0der8627/flipzy/tree/main/assets"

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_page,node_styles,node_assets toneBlue
class node_controller,node_board,node_levels,node_matching,node_completion toneAmber
class node_progress_logic,node_storage toneMint
class node_player toneIndigo
```

## Components

### Browser interface

- [Page shell](https://github.com/c0der8627/flipzy/blob/main/site/index.html): `site/index.html`
- [Game styling](https://github.com/c0der8627/flipzy/blob/main/site/style.css): `site/style.css`
- [Game assets](https://github.com/c0der8627/flipzy/tree/main/assets): `assets`

### Game flow

- [Game controller](https://github.com/c0der8627/flipzy/blob/main/site/script.js): `site/script.js`
- [Card board](https://github.com/c0der8627/flipzy/blob/main/site/script.js): `site/script.js`
- [Level selection](https://github.com/c0der8627/flipzy/blob/main/site/script.js): `site/script.js`
- [Card matching](https://github.com/c0der8627/flipzy/blob/main/site/script.js): `site/script.js`
- [Level completion](https://github.com/c0der8627/flipzy/blob/main/site/script.js): `site/script.js`

### Progress state

- [Progress handling](https://github.com/c0der8627/flipzy/blob/main/site/script.js): `site/script.js`
- **Browser storage**

### Other components

- **Player**

## Connections

- Player → Game controller: selects and plays
- Game controller → Page shell: updates screens
- Game controller → Level selection: renders levels
- Game controller → Card board: builds board
- Card board → Card matching: handles flips
- Card matching → Level completion: checks victory
- Level completion → Game controller: shows modal
- Game controller → Progress handling: loads and saves
- Progress handling → Browser storage: reads and writes
- Card board → Game assets: references logo