# parreyarnav69/stills.website architecture

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

- Interactive diagram: https://gitdiagram.com/parreyarnav69/stills.website
- Repository: https://github.com/parreyarnav69/stills.website

## Overview

Film Guess is a browser-based daily movie-identification game with an archive, limited guesses, progressively revealed frames, and player statistics. The player starts in the game view: the app selects today’s film, initializes the rules engine, and displays a frame; guesses or skips advance play until a win or loss. Completed daily games update persistent stats, while archive games do not. The source shows these module calls and the localStorage behavior; the HTML and image contents were not sampled, so UI and asset links reflect only the paths and behavior supported by the tree and code.

Main entry points: [`film-guess/js/app.js`](https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/app.js) (Game UI and flow), [`film-guess/js/statsStore.js`](https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/statsStore.js) (Stats logic), [`film-guess/js/movies.js`](https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/movies.js) (Movie catalog), [`film-guess/js/gameEngine.js`](https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/gameEngine.js) (Game rules)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_play["Game play"]
  node_app["Game UI and flow<br/>[app.js]"]
  node_engine["Game rules<br/>[gameEngine.js]"]
end

subgraph group_catalog["Film catalog"]
  node_movies["Movie catalog<br/>[movies.js]"]
  node_frames["Movie frame assets"]
end

subgraph group_stats["Player stats"]
  node_stats["Stats logic<br/>[statsStore.js]"]
  node_storage[("Browser localStorage")]
end

node_player(("Player"))

node_player -->|"plays and navigates"| node_app
node_app -->|"requests daily film"| node_movies
node_app -->|"requests archive"| node_movies
node_movies -->|"returns film data"| node_app
node_app -->|"loads referenced frames"| node_frames
node_app -->|"starts and submits play"| node_engine
node_engine -->|"returns state and outcome"| node_app
node_app -->|"checks daily play"| node_stats
node_app -->|"records eligible result"| node_stats
node_app -->|"requests displayed stats"| node_stats
node_stats -->|"reads and writes"| node_storage
node_stats -->|"returns derived stats"| node_app

click node_app "https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/app.js"
click node_engine "https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/gameEngine.js"
click node_movies "https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/movies.js"
click node_frames "https://github.com/parreyarnav69/stills.website/tree/main/film-guess/assets/movies"
click node_stats "https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/statsStore.js"

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_engine toneBlue
class node_movies,node_frames toneAmber
class node_stats,node_storage toneMint
class node_player toneIndigo
```

## Components

### Game play

- [Game UI and flow](https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/app.js): `film-guess/js/app.js`
- [Game rules](https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/gameEngine.js): `film-guess/js/gameEngine.js`

### Film catalog

- [Movie catalog](https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/movies.js): `film-guess/js/movies.js`
- [Movie frame assets](https://github.com/parreyarnav69/stills.website/tree/main/film-guess/assets/movies): `film-guess/assets/movies`

### Player stats

- [Stats logic](https://github.com/parreyarnav69/stills.website/blob/main/film-guess/js/statsStore.js): `film-guess/js/statsStore.js`
- **Browser localStorage**

### Other components

- **Player**

## Connections

- Player → Game UI and flow: plays and navigates
- Game UI and flow → Movie catalog: requests daily film
- Game UI and flow → Movie catalog: requests archive
- Movie catalog → Game UI and flow: returns film data
- Game UI and flow → Movie frame assets: loads referenced frames
- Game UI and flow → Game rules: starts and submits play
- Game rules → Game UI and flow: returns state and outcome
- Game UI and flow → Stats logic: checks daily play
- Game UI and flow → Stats logic: records eligible result
- Game UI and flow → Stats logic: requests displayed stats
- Stats logic → Browser localStorage: reads and writes
- Stats logic → Game UI and flow: returns derived stats