# aditya-rai08/rock-paper-scissors architecture

> Architecture diagram of the GitHub repository aditya-rai08/rock-paper-scissors, 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/aditya-rai08/rock-paper-scissors
- Repository: https://github.com/aditya-rai08/rock-paper-scissors

## Overview

This is a small browser-based Rock–Paper–Scissors game. The player selects a move and number of rounds, then submits each round; the game generates a computer move, compares choices, updates scores, and displays round and final results. The game logic is all in script.js. The HTML structure was not sampled, so UI connections reflect the documented interface and DOM usage rather than verified markup details.

Main entry points: [`script.js`](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js) (Round handler), [`index.html`](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/index.html) (Game page), [`images`](https://github.com/aditya-rai08/rock-paper-scissors/tree/main/images) (Move images), [`style.css`](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/style.css) (Game styling)

## Diagram (Mermaid)

```mermaid
flowchart TD

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

subgraph group_gameplay["Game flow"]
  node_selection["Move selection<br/>[script.js]"]
  node_round["Round handler<br/>[script.js]"]
  node_computer["Computer choice<br/>[script.js]"]
  node_comparison["Winner comparison<br/>[script.js]"]
  node_score["Score tracking<br/>[script.js]"]
  node_results["Result display<br/>[script.js]"]
end

subgraph group_assets["Visual assets"]
  node_images["Move images"]
end

node_player(("Player"))

node_player -->|"plays"| node_page
node_page -->|"move events"| node_selection
node_page -->|"submit round"| node_round
node_selection -->|"updates selection"| node_page
node_selection -->|"sets player image"| node_images
node_round -->|"requests choice"| node_computer
node_round -->|"compares choices"| node_comparison
node_round -->|"updates score"| node_score
node_round -->|"updates display"| node_results
node_round -->|"updates round UI"| node_page
node_round -->|"sets computer image"| node_images
node_results -->|"shows results"| node_page
node_page -->|"uses styles"| node_styles

click node_page "https://github.com/aditya-rai08/rock-paper-scissors/blob/main/index.html"
click node_styles "https://github.com/aditya-rai08/rock-paper-scissors/blob/main/style.css"
click node_selection "https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js"
click node_round "https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js"
click node_computer "https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js"
click node_comparison "https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js"
click node_score "https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js"
click node_results "https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js"
click node_images "https://github.com/aditya-rai08/rock-paper-scissors/tree/main/images"

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 toneBlue
class node_selection,node_round,node_computer,node_comparison,node_score,node_results toneAmber
class node_images toneMint
class node_player toneIndigo
```

## Components

### Browser interface

- [Game page](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/index.html): `index.html`
- [Game styling](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/style.css): `style.css`

### Game flow

- [Move selection](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js): `script.js`
- [Round handler](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js): `script.js`
- [Computer choice](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js): `script.js`
- [Winner comparison](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js): `script.js`
- [Score tracking](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js): `script.js`
- [Result display](https://github.com/aditya-rai08/rock-paper-scissors/blob/main/script.js): `script.js`

### Visual assets

- [Move images](https://github.com/aditya-rai08/rock-paper-scissors/tree/main/images): `images`

### Other components

- **Player**

## Connections

- Player → Game page: plays
- Game page → Move selection: move events
- Game page → Round handler: submit round
- Move selection → Game page: updates selection
- Move selection → Move images: sets player image
- Round handler → Computer choice: requests choice
- Round handler → Winner comparison: compares choices
- Round handler → Score tracking: updates score
- Round handler → Result display: updates display
- Round handler → Game page: updates round UI
- Round handler → Move images: sets computer image
- Result display → Game page: shows results
- Game page → Game styling: uses styles