diff --git a/style.css b/style.css index 96215ff..3730e0f 100644 --- a/style.css +++ b/style.css @@ -4,18 +4,26 @@ html { --color-regular-text: white; --color-regular-background: lch(from black calc(l + 10) c h); + --color-regular-field: black; --color-alter-text: white; --color-alter-background: black; + --color-alter-field: var(--color-regular-background); --color-primary-text: black; --color-primary-background: lch(from orange calc(l + 10) c h); + --color-primary-field: + lch(from var(--color-primary-background) calc(l + 25) c h); @media (prefers-color-scheme: light) { --color-regular-text: black; --color-regular-background: white; + --color-regular-field: var(--color-alter-background); --color-alter-text: black; --color-alter-background: lch(from white calc(l - 10) c h); + --color-alter-field: white; --color-primary-text: black; --color-primary-background: lch(from orange calc(l + 10) c h); + --color-primary-field: + lch(from var(--color-primary-background) calc(l + 25) c h); } color: var(--color-regular-text); @@ -23,6 +31,7 @@ html { --color-active-text: var(--color-regular-text); --color-active-background: var(--color-regular-background); + --color-active-field: var(--color-regular-field); } .background { @@ -32,28 +41,35 @@ html { .regular, .alter, .primary { - color: var(--color-alter-text); + color: var(--color-active-text); } .regular { --color-active-text: var(--color-regular-text); --color-active-background: var(--color-regular-background); + --color-active-field: var(--color-regular-field); } .alter { --color-active-text: var(--color-alter-text); --color-active-background: var(--color-alter-background); + --color-active-field: var(--color-alter-field); } .primary { --color-active-text: var(--color-primary-text); --color-active-background: var(--color-primary-background); + --color-active-field: var(--color-primary-field); } .positioned { margin: 0; } +.padded { + padding: 1em; +} + body { min-height: 100%; height: 1px; @@ -63,26 +79,38 @@ body { h1 { font-size: 2em; + margin-top: 0.75em; + margin-bottom: 0.5em; } h2 { font-size: 1.75em; + margin-top: 0.75em; + margin-bottom: 0.5em; } h3 { font-size: 1.5em; + margin-top: 0.75em; + margin-bottom: 0.5em; } h4 { font-size: 1.35em; + margin-top: 0.75em; + margin-bottom: 0.5em; } h5 { font-size: 1.25em; + margin-top: 0.75em; + margin-bottom: 0.5em; } h6 { font-size: 1.1em; + margin-top: 0.75em; + margin-bottom: 0.5em; } button { @@ -162,7 +190,7 @@ main.layout { align-items: center; } - >.spacer { + :nth-last-child(2) { flex-grow: 1; } @@ -248,4 +276,53 @@ main.layout { button { width: 100%; } +} + +.field { + display: grid; + grid-template-areas: "label" "field" "description"; + grid-template-columns: 1fr; + grid-template-rows: repeat(3, min-content); + column-gap: 1ch; + row-gap: 0.5ch; + + &:not(:last-child) { + margin-bottom: 1em; + } + + &:has(input[type=radio]), + &:has(input[type=checkbox]) { + grid-template-areas: "field label" ". description"; + grid-template-columns: min-content 1fr; + grid-template-rows: repeat(2, min-content); + } + + .label { + grid-area: label; + font-weight: bold; + } + + input { + grid-area: field; + padding: 0.5em; + border-radius: 5px; + + background-color: var(--color-active-field); + border: solid 1px var(--color-active-text); + color: var(--color-active-text); + } + + .description { + grid-area: description; + } +} + +.session-head { + >:first-child { + margin-top: 0; + } + + >:last-child { + margin-bottom: 0; + } } \ No newline at end of file diff --git a/ui/session.js b/ui/session.js index a548e39..52f10e8 100644 --- a/ui/session.js +++ b/ui/session.js @@ -14,20 +14,22 @@ export default class SessionView { let res = model.result; return m("article.session-view", [ - m(".session-view-header", [ - m("h2.positioned", "Satz"), - (model.games.length !== 0) - ? m( - "button.positioned", - { onclick: () => this.#headOpen = !this.#headOpen }, - "Regln" - ) - : null, - ]), ( model.games.length === 0 && model.currentGame === null) ? m(SessionHead, { model }) : m.fragment([ - this.#headOpen ? m(SessionHead, { model }) : null, + m(".session-view-header", [ + m("h2.positioned", "Satz"), + m( + "button.positioned", + { onclick: () => this.#headOpen = !this.#headOpen }, + "Regln" + ), + ]), + + this.#headOpen + ? m(".alter.background.padded", m(SessionHead, { model })) + : null, + m("section.record", [ this.#headOpen ? m("h3", "Mitschrift") : null, m("table", [ @@ -52,7 +54,7 @@ export default class SessionView { ]) ]), ]), - m(".spacer"), + model.currentGame !== null ? model.currentGame.currentRound !== null ? m(RoundView, { model: model.currentGame.currentRound }) diff --git a/ui/session_head.js b/ui/session_head.js index f8dafca..c2e2c1a 100644 --- a/ui/session_head.js +++ b/ui/session_head.js @@ -6,20 +6,20 @@ 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", [ + return m("section.session-head", [ m("h3", "Satzeinstellungen"), m("section.session-head-names", [ m("h4", "Teamnamen"), - m("label", [ - "Nam von eana", + m("label.field", [ + m("span.label", "Nam von eana"), m("input", { placeholder: "Se", value: model.theirTeam, oninput: (e) => model.theirTeam = e.target.value, }), ]), - m("label", [ - "Nam von ins", + m("label.field", [ + m("span.label", "Nam von ins"), m("input", { placeholder: "Mia", value: model.ourTeam, @@ -29,13 +29,13 @@ export default class SessionHead { ]), m("section.session-head-base", [ m("h4", "Grundregln"), - m("label", [ - "Punkte zum gwinna", + m("label.field", [ + m("span.label", "Punkte zum gwinna"), m("input", { placeholder: "mindestns 1", type: "number", value: model.rules.goal, - oninput: (e) => { + onchange: (e) => { let num = parseInt(e.target.value); if (!isNaN(num) && num >= 1) model.rules.goal = num; @@ -47,21 +47,31 @@ export default class SessionHead { ]), m("section.session-head-raising", [ m("h4", "Erhöhn"), - m("label", [ + m("label.field", [ m("input", { type: "radio", checked: model.rules.raising === RaisingRule.UnlessStricken, oninput: () => model.rules.raising = RaisingRule.UnlessStricken, }), - "Außa wenn gstrichn", + m("span.label", "Außa wenn gstrichn"), + m("span.description", [ + "Di Spiela kennen di Punkte erhöhn, so viel wia's wolln, außa " + + "wenn's scho gstrichn sen.", + m("br"), + m("em", "So steht's in di Regln von da Tirola Wattagmeinschaft"), + ]), ]), - m("label", [ + m("label.field", [ m("input", { type: "radio", checked: model.rules.raising === RaisingRule.UntilEnough, oninput: () => model.rules.raising = RaisingRule.UntilEnough, }), - "Bis es langt", + m("span.label", "Bis es langt"), + m("span.description", [ + "Di Spiela kennen so lang di Punkte erhöhn, bis se mit am Sieg " + + "in da Rundn es ganze Spiel gwonnen hättn.", + ]) ]), ]), ])