Adrian Wannenmacher
eb20849bd8
By main buttons I mean the "new game", "they win" and "we win" buttons. They have in common that they scroll to the bottom of the view, to make sure the user can immediately see their effect. This change fixes two bugs: 1. The scrolling did not work reliably. While it would always scroll a bit, it would usually not go to the bottom exactly. This meant that most of the time the bottom digits were only half visible. Now it scrolls reliably all the way. 2. When hitting the win buttons in rapid succession it was possible to trigger both within a single redraw cycle. This caused the UI to set a single rounds winner to both teams, which the round model rightly rejected. Now, by the time the second event is registered, the button has already been disabled, or the round been replaced by a new one.
81 lines
2.5 KiB
JavaScript
81 lines
2.5 KiB
JavaScript
"use strict";
|
|
|
|
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 {
|
|
#headOpen = false;
|
|
|
|
/** @param {{ attrs: { model: Session } }} param The session model to use. */
|
|
view({ attrs: { model } }) {
|
|
|
|
let res = model.result;
|
|
|
|
return m("article.wb-session-view", [
|
|
( model.games.length === 0 && model.currentGame === null)
|
|
? m(".spacer", m(SessionHead, { model }))
|
|
: m.fragment([
|
|
m("header.header", [
|
|
m("h2._positioned", "Satz"),
|
|
m(
|
|
"button.wb-button._positioned",
|
|
{ onclick: () => this.#headOpen = !this.#headOpen },
|
|
"Regln"
|
|
),
|
|
]),
|
|
|
|
this.#headOpen
|
|
? m("._alternate._apply.wb-box", m(SessionHead, { model }))
|
|
: null,
|
|
|
|
m("section.spacer", [
|
|
this.#headOpen ? m("h3._positioned-top", "Mitschrift") : null,
|
|
m("table.results", [
|
|
m("thead._sticky-top._apply", [
|
|
m("tr", [
|
|
m("th", [
|
|
model.theirTeam ? model.theirTeam : "Se",
|
|
" ",
|
|
"•".repeat(res.theirPoints),
|
|
]),
|
|
m("th", [
|
|
model.ourTeam ? model.ourTeam : "Mia",
|
|
" ",
|
|
"•".repeat(res.ourPoints),
|
|
]),
|
|
]),
|
|
]),
|
|
model.games.map((g) => m(GameView, { model: g })),
|
|
model.currentGame !== null
|
|
? m(GameView, { model: model.currentGame })
|
|
: null,
|
|
])
|
|
]),
|
|
]),
|
|
|
|
m(".wb-box._alternate._apply._sticky-bottom", [
|
|
model.currentGame !== null
|
|
&& model.currentGame.currentRound !== null
|
|
? m(RoundView, { model: model.currentGame.currentRound })
|
|
: m(
|
|
"button.wb-button._positioned",
|
|
{
|
|
onclick: (event) => {
|
|
event.redraw = false;
|
|
model.anotherGame();
|
|
m.redraw.sync();
|
|
window.scrollTo({
|
|
top: document.body.scrollHeight,
|
|
behavior: "smooth",
|
|
});
|
|
},
|
|
},
|
|
"no a spiel"
|
|
),
|
|
]),
|
|
]);
|
|
}
|
|
}
|