diff --git a/jass-scoreboard/js/renderer.js b/jass-scoreboard/js/renderer.js
index 5285ee3..f003b29 100644
--- a/jass-scoreboard/js/renderer.js
+++ b/jass-scoreboard/js/renderer.js
@@ -2,35 +2,88 @@
import { getState } from "./state.js";
+// ββ SVG Z geometry constants ββββββββββββββββββββββββββββββββββββββ
+const Z_W = 400; // viewBox width
+const Z_H = 170; // viewBox height
+const X_L = 12; // left x bound
+const X_R = 388; // right x bound
+const TOP_Y = 42; // top bar y
+const BOT_Y = 128; // bottom bar y
+// Diagonal: (X_R, TOP_Y) β (X_L, BOT_Y)
+
+// Mark spacing limits (SVG viewBox units)
+const MIN_SPACING = 6;
+const MAX_SPACING = 13;
+const DIAG_MARGIN = 14; // gap to leave at each end of the diagonal
+
/**
- * Converts a point value into tally mark strings.
- * Groups of 5 become "||||\" and remainders are "|".
+ * Build perpendicular tick marks along the top or bottom horizontal bar.
*/
-function renderTallies(points) {
- const groups = Math.floor(points / 5);
- const remainder = points % 5;
- let result = "";
- for (let i = 0; i < groups; i++) {
- result += "||||\\ ";
+function hMarks(count, y) {
+ if (!count) return "";
+ const usable = X_R - X_L - 16; // ~360 px
+ const spacing = Math.max(MIN_SPACING, Math.min(MAX_SPACING, count > 1 ? usable / (count - 1) : usable));
+ const totalSpan = spacing * (count - 1);
+ const startX = X_L + 8 + (usable - totalSpan) / 2;
+
+ let out = "";
+ for (let i = 0; i < count; i++) {
+ const x = +(startX + i * spacing).toFixed(1);
+ out += `
`;
}
- for (let i = 0; i < remainder; i++) {
- result += "| ";
+ return out;
+}
+
+/**
+ * Build perpendicular tick marks along the diagonal of the Z.
+ * Marks are drawn as short vertical lines since preserveAspectRatio="none"
+ * would skew true perpendiculars; vertical ticks look authentic on a chalk board.
+ */
+function diagMarks(count) {
+ if (!count) return "";
+ const dx = X_L - X_R; // -376
+ const dy = BOT_Y - TOP_Y; // 86
+ const len = Math.sqrt(dx * dx + dy * dy);
+ const ux = dx / len; const uy = dy / len; // unit along diagonal
+
+ const usable = len - 2 * DIAG_MARGIN;
+ const spacing = Math.max(MIN_SPACING, Math.min(MAX_SPACING, count > 1 ? usable / (count - 1) : usable));
+ const totalSpan = spacing * (count - 1);
+ const tStart = DIAG_MARGIN + (usable - totalSpan) / 2;
+
+ let out = "";
+ for (let i = 0; i < count; i++) {
+ const t = tStart + i * spacing;
+ const cx = +(X_R + ux * t).toFixed(1);
+ const cy = +(TOP_Y + uy * t).toFixed(1);
+ // Vertical tick crossing the diagonal line
+ out += `
`;
}
- return result.trim();
+ return out;
}
/**
- * Build the HTML for one team's entry list.
+ * Build the complete SVG Z shape with marks on lines for one team.
*/
-function buildEntriesHTML(teamId) {
+function buildZsvg(teamId) {
const state = getState();
- const teamEntries = state.entries.filter(e => e.teamId === teamId);
- if (teamEntries.length === 0) {
- return '
β';
- }
- return teamEntries
- .map(e => `
${renderTallies(e.points)}
`)
- .join("");
+ const entries = state.entries.filter(e => e.teamId === teamId);
+
+ // Count marks per bar (support legacy entries that only have points/no barType)
+ const topN = entries.filter(e => e.barType === "top").length;
+ const diagN = entries.filter(e => e.barType === "diagonal").length;
+ const botN = entries.filter(e => e.barType === "bottom").length;
+
+ return `
`;
}
/**
@@ -43,13 +96,15 @@ function render() {
? [state.teams[1], state.teams[0]]
: [state.teams[0], state.teams[1]];
- // Team name headers
+ // Team name headers inside panels
document.getElementById("team-a-name").textContent = topTeam.name;
document.getElementById("team-b-name").textContent = bottomTeam.name;
- // Entries (tally marks)
- document.getElementById("entries-a").innerHTML = buildEntriesHTML(topTeam.id);
- document.getElementById("entries-b").innerHTML = buildEntriesHTML(bottomTeam.id);
+ // SVG Z marks
+ const svgA = document.getElementById("z-svg-a");
+ const svgB = document.getElementById("z-svg-b");
+ if (svgA) svgA.innerHTML = buildZsvg(topTeam.id);
+ if (svgB) svgB.innerHTML = buildZsvg(bottomTeam.id);
// Totals
document.getElementById("total-a").textContent = state.totals[topTeam.id] || 0;
@@ -59,26 +114,22 @@ function render() {
const targetEl = document.getElementById("target-score-display");
if (targetEl) targetEl.textContent = state.targetScore;
+ // Update team toggle button labels
+ const btnTeamA = document.getElementById("btn-team-a");
+ const btnTeamB = document.getElementById("btn-team-b");
+ if (btnTeamA) btnTeamA.textContent = state.teams[0].name;
+ if (btnTeamB) btnTeamB.textContent = state.teams[1].name;
+
// Win state
renderWinState(topTeam, bottomTeam);
- // Update team select options to reflect current names
- const teamSelect = document.getElementById("select-team");
- if (teamSelect) {
- for (const opt of teamSelect.options) {
- const team = state.teams.find(t => t.id === opt.value);
- if (team) opt.textContent = team.name;
- }
- }
-
// Input area enable/disable (undo and reset always stay enabled)
const inputArea = document.getElementById("score-input-area");
if (inputArea) {
inputArea.classList.toggle("disabled", state.gameFinished);
- const inputs = inputArea.querySelectorAll("input, select");
- inputs.forEach(el => { el.disabled = state.gameFinished; });
- const addBtn = document.getElementById("btn-add");
- if (addBtn) addBtn.disabled = state.gameFinished;
+ inputArea.querySelectorAll(".btn-mark, .btn-team").forEach(el => {
+ el.disabled = state.gameFinished;
+ });
}
// Highlight winning panel
@@ -88,10 +139,9 @@ function render() {
panelA.classList.remove("winner-panel");
panelB.classList.remove("winner-panel");
if (state.gameFinished && state.winner) {
- const winnerId = state.winner;
- const winnerIsTop = topTeam.id === winnerId;
+ const winnerIsTop = topTeam.id === state.winner;
if (winnerIsTop) panelA.classList.add("winner-panel");
- else panelB.classList.add("winner-panel");
+ else panelB.classList.add("winner-panel");
}
}
}
@@ -102,8 +152,7 @@ function renderWinState(topTeam, bottomTeam) {
if (!overlay) return;
if (state.gameFinished && state.winner) {
- const winningTeam =
- state.winner === topTeam.id ? topTeam : bottomTeam;
+ const winningTeam = state.winner === topTeam.id ? topTeam : bottomTeam;
document.getElementById("win-team-name").textContent = winningTeam.name;
overlay.classList.add("active");
} else {
@@ -111,4 +160,4 @@ function renderWinState(topTeam, bottomTeam) {
}
}
-export { render, renderTallies };
+export { render };
diff --git a/jass-scoreboard/js/scoring.js b/jass-scoreboard/js/scoring.js
index 1cb5451..6467b08 100644
--- a/jass-scoreboard/js/scoring.js
+++ b/jass-scoreboard/js/scoring.js
@@ -2,17 +2,19 @@
import { getState } from "./state.js";
-function addEntry(teamId, points) {
+// Each bar type and its point value per mark
+const BAR_VALUES = { top: 100, diagonal: 50, bottom: 20 };
+
+function addEntry(teamId, barType) {
const state = getState();
if (state.gameFinished) return false;
-
- const p = parseInt(points, 10);
- if (isNaN(p) || p <= 0 || p > 500) return false;
+ if (!BAR_VALUES[barType]) return false;
if (!state.teams.find(t => t.id === teamId)) return false;
state.entries.push({
teamId,
- points: p,
+ barType,
+ value: BAR_VALUES[barType],
timestamp: Date.now()
});
@@ -36,7 +38,9 @@ function recalcTotals() {
const state = getState();
state.totals = { A: 0, B: 0 };
for (const entry of state.entries) {
- state.totals[entry.teamId] = (state.totals[entry.teamId] || 0) + entry.points;
+ // Support both new (value) and legacy (points) saved entries
+ const pts = entry.value || entry.points || 0;
+ state.totals[entry.teamId] = (state.totals[entry.teamId] || 0) + pts;
}
}
diff --git a/jass-scoreboard/js/ui.js b/jass-scoreboard/js/ui.js
index a74a883..8e63b69 100644
--- a/jass-scoreboard/js/ui.js
+++ b/jass-scoreboard/js/ui.js
@@ -5,6 +5,8 @@ import { addEntry, undoLastEntry } from "./scoring.js";
import { render } from "./renderer.js";
import { saveState } from "./storage.js";
+// Currently-active team for mark entry
+let activeTeamId = "A";
let errorTimeout = null;
function persist() {
@@ -12,18 +14,21 @@ function persist() {
}
function bindEvents() {
- // Score entry form
- const addBtn = document.getElementById("btn-add");
- if (addBtn) {
- addBtn.addEventListener("click", handleAddScore);
- }
-
- // Allow pressing Enter in the points input
- const pointsInput = document.getElementById("input-points");
- if (pointsInput) {
- pointsInput.addEventListener("keydown", e => {
- if (e.key === "Enter") handleAddScore();
- });
+ // Team toggle buttons
+ const btnTeamA = document.getElementById("btn-team-a");
+ const btnTeamB = document.getElementById("btn-team-b");
+ if (btnTeamA) btnTeamA.addEventListener("click", () => setActiveTeam("A"));
+ if (btnTeamB) btnTeamB.addEventListener("click", () => setActiveTeam("B"));
+
+ // Mark entry buttons (+100 / +50 / +20)
+ const markDefs = [
+ { id: "btn-mark-top", barType: "top" },
+ { id: "btn-mark-diag", barType: "diagonal" },
+ { id: "btn-mark-bot", barType: "bottom" }
+ ];
+ for (const { id, barType } of markDefs) {
+ const btn = document.getElementById(id);
+ if (btn) btn.addEventListener("click", () => handleMarkAdd(barType));
}
// Undo button
@@ -44,13 +49,7 @@ function bindEvents() {
resetState();
render();
persist();
- // Re-enable score input
- const inputArea = document.getElementById("score-input-area");
- if (inputArea) {
- const inputs = inputArea.querySelectorAll("input, button, select");
- inputs.forEach(el => { el.disabled = false; });
- inputArea.classList.remove("disabled");
- }
+ document.getElementById("score-input-area")?.classList.remove("disabled");
document.getElementById("win-overlay")?.classList.remove("active");
}
});
@@ -66,7 +65,7 @@ function bindEvents() {
});
}
- // Team name edits (blur to save)
+ // Team name edits (save on blur/change)
const nameA = document.getElementById("edit-name-a");
if (nameA) {
nameA.addEventListener("change", () => {
@@ -94,7 +93,7 @@ function bindEvents() {
const ok = setTargetScore(targetInput.value);
if (!ok) {
targetInput.value = getState().targetScore;
- showError("Target score must be between 100 and 10000.");
+ showError("Ziel muss zwischen 100 und 10000 liegen.");
} else {
render();
persist();
@@ -102,7 +101,7 @@ function bindEvents() {
});
}
- // Close win overlay (click anywhere on it)
+ // Close win overlay on click
const winOverlay = document.getElementById("win-overlay");
if (winOverlay) {
winOverlay.addEventListener("click", () => {
@@ -111,34 +110,19 @@ function bindEvents() {
}
}
-function handleAddScore() {
+function setActiveTeam(teamId) {
+ activeTeamId = teamId;
+ // Update visual state of toggle buttons
+ document.getElementById("btn-team-a")?.classList.toggle("is-active", teamId === "A");
+ document.getElementById("btn-team-b")?.classList.toggle("is-active", teamId === "B");
+}
+
+function handleMarkAdd(barType) {
const state = getState();
if (state.gameFinished) return;
- const teamSelect = document.getElementById("select-team");
- const pointsInput = document.getElementById("input-points");
-
- const teamId = teamSelect ? teamSelect.value : null;
- const pointsRaw = pointsInput ? pointsInput.value : "";
-
- if (!teamId) {
- showError("Please select a team.");
- return;
- }
-
- const points = parseInt(pointsRaw, 10);
- if (isNaN(points) || points <= 0 || points > 500) {
- showError("Points must be a whole number between 1 and 500.");
- pointsInput && pointsInput.focus();
- return;
- }
-
- const ok = addEntry(teamId, points);
+ const ok = addEntry(activeTeamId, barType);
if (ok) {
- if (pointsInput) {
- pointsInput.value = "";
- pointsInput.focus();
- }
render();
persist();
}
@@ -150,9 +134,7 @@ function showError(msg) {
errEl.textContent = msg;
errEl.classList.add("visible");
clearTimeout(errorTimeout);
- errorTimeout = setTimeout(() => {
- errEl.classList.remove("visible");
- }, 3000);
+ errorTimeout = setTimeout(() => errEl.classList.remove("visible"), 3000);
}
function initInputValues() {
@@ -164,6 +146,9 @@ function initInputValues() {
if (nameA) nameA.value = state.teams[0].name;
if (nameB) nameB.value = state.teams[1].name;
if (targetInput) targetInput.value = state.targetScore;
+
+ // Sync active team button visual
+ setActiveTeam(activeTeamId);
}
export { bindEvents, initInputValues };