restructure basic UI for better semantics
This commit is contained in:
parent
979dfb9b08
commit
0cc3c991e5
40
ui/game.js
40
ui/game.js
@ -11,33 +11,19 @@ export default class GameView {
|
||||
|
||||
let markers = "•".repeat(points);
|
||||
|
||||
return m("section", [
|
||||
m("table", [
|
||||
m("thead", [
|
||||
m("tr", [
|
||||
m("th", "se"), m("th", "mia"),
|
||||
]),
|
||||
winner !== null
|
||||
? m("tr", [
|
||||
m("td", winner === Team.We ? markers : ""),
|
||||
m("td", winner === Team.They ? markers : ""),
|
||||
])
|
||||
: null,
|
||||
]),
|
||||
m("tbody", model.rounds.map(function(round) {
|
||||
return m("tr", [
|
||||
m("td", round.winner === Team.They ? round.points : ""),
|
||||
m("td", round.winner === Team.We ? round.points : ""),
|
||||
]);
|
||||
})),
|
||||
m("tfoot", [
|
||||
m("tr", [
|
||||
m("th", theirPoints), m("th", ourPoints),
|
||||
]),
|
||||
]),
|
||||
]),
|
||||
(model.currentRound !== null)
|
||||
? m(RoundView, { model: model.currentRound })
|
||||
return m("[", [
|
||||
m("tbody", model.rounds.map(function(round) {
|
||||
return m("tr", [
|
||||
m("td", round.winner === Team.They ? round.points : ""),
|
||||
m("td", round.winner === Team.We ? round.points : ""),
|
||||
]);
|
||||
})),
|
||||
(!model.decided)
|
||||
? m("tfoot", [
|
||||
m("tr", [
|
||||
m("th", theirPoints), m("th", ourPoints),
|
||||
]),
|
||||
])
|
||||
: null,
|
||||
]);
|
||||
}
|
||||
|
||||
@ -2,15 +2,37 @@
|
||||
|
||||
import Session from "../models/session.js";
|
||||
import GameView from "./game.js";
|
||||
import RoundView from "./round.js";
|
||||
|
||||
export default class SessionView {
|
||||
/** @param {{ attrs: { model: Session } }} param The session model to use. */
|
||||
view({ attrs: { model, onDeselect } }) {
|
||||
return m("article", [
|
||||
|
||||
let res = model.result;
|
||||
|
||||
return m("article", {
|
||||
class: ["session-view"],
|
||||
}, [
|
||||
m("button", { onclick: () => onDeselect() }, "Zruck"),
|
||||
model.games.map((g) => m(GameView, { model: g })),
|
||||
m("table", [
|
||||
m("thead", [
|
||||
m("tr", [
|
||||
m("th", "se"), m("th", "mia"),
|
||||
]),
|
||||
m("tr", [
|
||||
m("td", "•".repeat(res.theirPoints)),
|
||||
m("td", "•".repeat(res.ourPoints)),
|
||||
]),
|
||||
]),
|
||||
model.games.map((g) => m(GameView, { model: g })),
|
||||
model.currentGame !== null
|
||||
? m(GameView, { model: model.currentGame })
|
||||
: null,
|
||||
]),
|
||||
model.currentGame !== null
|
||||
? m(GameView, { model: model.currentGame })
|
||||
? model.currentGame.currentRound !== null
|
||||
? m(RoundView, { model: model.currentGame.currentRound })
|
||||
: null
|
||||
: m("button", { onclick: () => model.anotherGame() }, "no a spiel"),
|
||||
]);
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export default class Shell {
|
||||
if (this.#currentSession !== null)
|
||||
return m(SessionView, {
|
||||
model: this.#currentSession,
|
||||
onDeselect: () => this.#currentSession = null;
|
||||
onDeselect: () => this.#currentSession = null,
|
||||
});
|
||||
|
||||
if (this.#sessions !== null)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user