jasstafel application

[LFDave]

Product Requirements Document

Digital Jass Scoreboard (Schiefertafel Z/Z)

Version: 1.0
Target: Agentic Implementation
Technology: HTML, CSS, Vanilla JavaScript

---

1. Product Overview

1.1 Product Name

Digital Jass Scoreboard (Schiefertafel Z/Z)

1.2 Product Description

A browser-based web application that replicates a traditional Swiss Jass slate scoreboard with Z/Z representation.

The application allows two teams to record points during a Jass game while preserving the visual appearance of a chalk slate board.

The application is designed to be:

extremely fast to use during gameplay

visually similar to physical Jasstafeln

deployable as a static web app

---

2. Implementation Constraints

2.1 Allowed Technologies

The application must use only:

HTML5

CSS3

Vanilla JavaScript (ES6+)

2.2 Forbidden Technologies

The following are not allowed:

React

Angular

Vue

jQuery

TypeScript

external JS frameworks

External CSS libraries should be avoided.

---

3. Project Structure

The application must create a dedicated project folder containing all files.

Example root folder name:

jass-scoreboard

---

3.1 Folder Structure

The implementation must use the following folder structure.

jass-scoreboard/
│
├── index.html
│
├── css/
│ └── styles.css
│
├── js/
│ ├── app.js
│ ├── state.js
│ ├── storage.js
│ ├── scoring.js
│ ├── renderer.js
│ └── ui.js
│
├── assets/
│ ├── textures/
│ │ └── slate-bg.png
│ └── fonts/
│
└── README.md

---

3.2 File Responsibilities

index.html

Responsibilities:

root HTML structure

load CSS

load JavaScript modules

define DOM containers

---

styles.css

Responsibilities:

layout

chalkboard styling

Z/Z board grid

responsive layout

animations

win animation

---

app.js

Responsibilities:

application bootstrap

initialize state

attach UI events

start render cycle

---

state.js

Responsibilities:

global state definition

state mutations

state validation

---

storage.js

Responsibilities:

localStorage persistence

state serialization

state restoration

---

scoring.js

Responsibilities:

add score

calculate totals

check winner

---

renderer.js

Responsibilities:

render board

render tallies

render totals

render win state

---

ui.js

Responsibilities:

handle user input

bind event listeners

validate inputs

---

4. Data Model

The application uses a single global state object.

---

4.1 Global State

state = {
teams: [
{ id: "A", name: "Team A" },
{ id: "B", name: "Team B" }
],

entries: [],

totals: {
A: 0,
B: 0
},

targetScore: 2500,

flipped: false,

winner: null,

gameFinished: false
}

---

4.2 Entry Model

Each score entry must be stored as:

{
teamId: "A",
points: 120,
timestamp: 1710000000000
}

---

5. Game Rules

5.1 Teams

Exactly two teams.

Team names are editable.

Constraints:

min length: 1
max length: 30

---

5.2 Target Score

Default value:

2500

Editable by user.

Valid range recommended:

100 – 10000

---

5.3 Win Condition

A team wins when:

team_total > targetScore

Important:

The score must exceed the target.

---

5.4 Game End State

When a team wins:

state.gameFinished = true
state.winner = teamId

Score entry must then be disabled.

Undo remains allowed.

---

6. Score Entry System

6.1 Input Workflow

User steps:

1. Select team

2. Enter points

3. Click "Add"

---

6.2 Validation

Points must satisfy:

integer
points > 0
points ≤ 500 (recommended)

---

6.3 Score Calculation

Totals are computed as:

team_total = sum(points for team)

Totals must never be manually edited.

---

7. Visual Representation

7.1 Slate Board Style

Visual design must resemble:

traditional chalk slate board

Required elements:

dark background

chalk text

red guide lines

diagonal Z/Z layout

---

8. Tally Mark Rendering

8.1 Rule

Round entries must not display numeric values.

Instead they use tally marks.

Example:

5 points

||||\

---

8.2 Rendering Algorithm

Pseudo logic:

function renderTallies(points):

groups = floor(points / 5)
remainder = points % 5

for each group:
    render "||||\"

for remainder:
    render "|"

---

9. Board Layout (Z/Z)

The board must visually divide into two mirrored areas.

Simplified layout:

Team A board | Team B board

With diagonal guideline elements to mimic Z/Z chalk layout.

CSS grid recommended.

---

10. Board Orientation Feature

10.1 Purpose

Players sitting on opposite sides of the table must read the board.

---

10.2 Behavior

Flip button toggles:

state.flipped = !state.flipped

Rendering must swap team panel positions.

Important:

Data model remains unchanged.

---

11. Undo System

Undo removes the last entry.

entries.pop()

Then:

recalculate totals
check winner
re-render board

---

12. Reset System

Reset must clear:

entries
totals
winner
gameFinished

But keep:

team names
target score
flip state

---

13. Persistence

13.1 Storage

Use:

localStorage

---

13.2 Storage Key

jassScoreboardState

---

13.3 Saved Fields

teams
entries
targetScore
flipped
winner
gameFinished

---

14. DOM Structure

Minimum DOM layout:

Jass Scoreboard

<div class="team-panel" id="teamA">
    <div class="team-name"></div>
    <div class="team-total"></div>
    <div class="tally-area"></div>
</div>

<div class="team-panel" id="teamB">
    <div class="team-name"></div>
    <div class="team-total"></div>
    <div class="tally-area"></div>
</div>

<select id="teamSelect"></select>

<input id="pointsInput">

<button id="addScore">Add</button>

<button id="undoBtn">Undo</button>

<button id="resetBtn">Reset</button>

<button id="flipBoard">Flip Board</button>

---

15. Win Animation

Triggered when winner detected.

Possible CSS animation:

glow effect

chalk dust particles

pulse animation

Winning team panel must remain highlighted.

---

16. Responsiveness

Must support:

mobile portrait
tablet
desktop

Minimum width:

320px

Preferred layout method:

CSS Grid

---

17. Performance Targets

Initial load < 1s
Score update < 50ms

---

18. Accessibility

Basic requirements:

large buttons

high contrast

keyboard navigation

---

19. MVP Acceptance Criteria

The MVP is complete when a user can:

1. open the web app

2. see a Z/Z slate board

3. record scores for two teams

4. see tally marks for rounds

5. see numeric totals

6. play to 2500 points by default

7. change target score

8. win by exceeding target score

9. see win animation

10. undo last entry

11. reset game

12. flip board orientation

13. reload page and resume game

---

20. Future Extensions (Out of Scope)

Possible future features:

multiple Jass variants

multiplayer sync

PWA install

statistics

export screenshot

tournament mode