diff --git a/style.css b/style.css index bf2c06e..65dc509 100644 --- a/style.css +++ b/style.css @@ -66,6 +66,7 @@ button { .current-round { display: grid; grid-template-areas: + "title title title title" "they-raise current-points current-points we-raise" "they-win they-win we-win we-win"; grid-template-columns: 1fr auto auto 1fr; @@ -74,25 +75,29 @@ button { position: sticky; bottom: 0; - .current-points { + >h3 { + grid-area: title; + } + + >.current-points { grid-area: current-points; align-content: center; margin: 0 1em; } - .they-raise { + >.they-raise { grid-area: they-raise; } - .we-raise { + >.we-raise { grid-area: we-raise; } - .they-win { + >.they-win { grid-area: they-win; } - .we-win { + >.we-win { grid-area: we-win; } } diff --git a/ui/round.js b/ui/round.js index 231a414..ee8ebe4 100644 --- a/ui/round.js +++ b/ui/round.js @@ -7,6 +7,7 @@ export default class RoundView { /** @param { { attrs: { model: Round } } } param The round model to use. */ view({ attrs: { model } }) { return m("section.current-round", [ + m("h3", "Rundnschreiba"), m("span.current-points", `${model.points}`), m("button.they-raise", { diff --git a/ui/session.js b/ui/session.js index d7c1076..7fe1505 100644 --- a/ui/session.js +++ b/ui/session.js @@ -3,6 +3,7 @@ import Session from "/models/session.js"; import GameView from "/ui/game.js"; import RoundView from "/ui/round.js"; +import SessionHead from "/ui/session_head.js"; export default class SessionView { /** @param {{ attrs: { model: Session } }} param The session model to use. */ @@ -12,17 +13,28 @@ export default class SessionView { return m("article.session-view", [ m(m.route.Link, { href: "/", selector: "button" }, "Zruck"), - m("table", [ - m("thead", [ - m("tr", [ - m("th", ["se", " ", "•".repeat(res.theirPoints)]), - m("th", ["mia", " ", "•".repeat(res.ourPoints)]), - ]), - ]), - model.games.map((g) => m(GameView, { model: g })), - model.currentGame !== null - ? m(GameView, { model: model.currentGame }) - : null, + ( model.games.length === 0 && model.currentGame === null) + ? m(SessionHead, { model }) + : m.fragment([ + m("details", [ + m("summary", "Einstellungen"), + m(SessionHead, { model }), + ]), + m("section.record", [ + m("h3", "Mitschrift"), + m("table", [ + m("thead", [ + m("tr", [ + m("th", ["se", " ", "•".repeat(res.theirPoints)]), + m("th", ["mia", " ", "•".repeat(res.ourPoints)]), + ]), + ]), + model.games.map((g) => m(GameView, { model: g })), + model.currentGame !== null + ? m(GameView, { model: model.currentGame }) + : null, + ]) + ]), ]), m(".spacer"), model.currentGame !== null diff --git a/ui/session_head.js b/ui/session_head.js new file mode 100644 index 0000000..f3c743f --- /dev/null +++ b/ui/session_head.js @@ -0,0 +1,69 @@ +"use strict"; + +import { RaisingRule } from "/models/game_rules.js"; +import Session from "/models/session.js"; + +export default class SessionHead { + /** @param {{ attrs: { model: Session } }} param The session model to use. */ + view({ attrs: { model } }) { + return m("section.session_head", [ + m("h3", "Satzeinstellungen"), + m("section.session_head_names", [ + m("h4", "Teamnamen"), + m("label", [ + "Nam von eana", + m("input", { + placeholder: "Se", + value: model.theirTeam, + oninput: (e) => model.theirTeam = e.target.value, + }), + ]), + m("label", [ + "Nam von ins", + m("input", { + placeholder: "Mia", + value: model.ourTeam, + oninput: (e) => model.ourTeam = e.target.value, + }), + ]), + ]), + m("section.session_head_base", [ + m("h4", "Grundregln"), + m("label", [ + "Punkte zum gwinna", + m("input", { + placeholder: "mindestns 1", + type: "number", + value: model.rules.goal, + oninput: (e) => { + let num = parseInt(e.target.value); + if (!isNaN(num) && num >= 1) + model.rules.goal = num; + else + alert("Es Punkteziel muas a Nummer größer als null sein."); + }, + }), + ]), + ]), + m("section.session_head_raising", [ + m("h4", "Erhöhn"), + m("label", [ + m("input", { + type: "radio", + checked: model.rules.raising === RaisingRule.UnlessStricken, + oninput: () => model.rules.raising = RaisingRule.UnlessStricken, + }), + "Außa wenn gstrichn", + ]), + m("label", [ + m("input", { + type: "radio", + checked: model.rules.raising === RaisingRule.UntilEnough, + oninput: () => model.rules.raising = RaisingRule.UntilEnough, + }), + "Bis es langt", + ]), + ]), + ]) + } +}