# vaibhavsirana8474/stone_paper_scissor architecture

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

- Interactive diagram: https://gitdiagram.com/vaibhavsirana8474/stone_paper_scissor
- Repository: https://github.com/vaibhavsirana8474/stone_paper_scissor

## Overview

This is a browser-based rock-paper-scissors game. A player selects a move; the script generates a machine move, determines the round result, and updates the message and scores. The source shows the game logic and its DOM interactions. The HTML and CSS are represented from the repository tree, but their contents were not sampled, so their specific elements and styling links are not detailed.

Main entry points: [`script.js`](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js) (Click handler), [`index.html`](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/index.html) (Game page)

## Diagram (Mermaid)

```mermaid
flowchart TD

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

subgraph group_logic["Game logic"]
  node_controller["Click handler<br/>[script.js]"]
  node_random["Move selection<br/>[script.js]"]
  node_result["Round outcome<br/>[script.js]"]
  node_draw["Draw message<br/>[script.js]"]
  node_score["Score update<br/>[script.js]"]
end

node_player(("Player"))

node_player -->|"selects move"| node_page
node_page -->|"click event"| node_controller
node_controller -->|"chooses move"| node_random
node_controller -->|"compares moves"| node_result
node_controller -->|"on tie"| node_draw
node_controller -->|"on win or loss"| node_score
node_draw -->|"updates message"| node_page
node_result -->|"updates message"| node_page
node_score -->|"updates scores"| node_page

click node_page "https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/index.html"
click node_styles "https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/style.css"
click node_controller "https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js"
click node_random "https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js"
click node_result "https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js"
click node_draw "https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js"
click node_score "https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.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_page,node_styles toneBlue
class node_controller,node_random,node_result,node_draw,node_score toneAmber
class node_player toneIndigo
```

## Components

### Game interface

- [Game page](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/index.html): `index.html`
- [Game styling](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/style.css): `style.css`

### Game logic

- [Click handler](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js): `script.js`
- [Move selection](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js): `script.js`
- [Round outcome](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js): `script.js`
- [Draw message](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js): `script.js`
- [Score update](https://github.com/vaibhavsirana8474/stone_paper_scissor/blob/main/script.js): `script.js`

### Other components

- **Player**

## Connections

- Player → Game page: selects move
- Game page → Click handler: click event
- Click handler → Move selection: chooses move
- Click handler → Round outcome: compares moves
- Click handler → Draw message: on tie
- Click handler → Score update: on win or loss
- Draw message → Game page: updates message
- Round outcome → Game page: updates message
- Score update → Game page: updates scores