@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/page.ts

@@ -0,0 +1,852 @@
+/*
+
+  Page.ts
+
+  Single page UI for Explo using the Mithril library
+
+  Copyright (C) 2024 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  The Creative Commons Attribution-NonCommercial 4.0
+  International Public License (CC-BY-NC 4.0) applies to this software.
+  For further information, see https://github.com/mideind/Netskrafl
+
+  This UI is built on top of Mithril (https://mithril.js.org), a lightweight,
+  straightforward JavaScript single-page reactive UI library.
+
+  The page is structured into models, actions and views,
+  cf. https://github.com/pakx/the-mithril-diaries/wiki/Basic-App-Structure
+
+*/
+
+import { mt, t, ts } from "./i18n";
+import { GlobalState } from "./globalstate";
+import { IView, DialogViewEnum } from "./types";
+import { setServerUrl } from "./request";
+import {
+  glyph, nbsp, getInput,
+  scrollMovelistToBottom, coord, toVector,
+} from "./util";
+import {
+  m, Vnode, VnodeDOM, VnodeChildren, EventHandler,
+} from "./mithril";
+import { logEvent, loginFirebase } from "./channel";
+import { Model, getSettings } from "./model";
+import { Actions, createRouteResolver } from "./actions";
+import { WaitDialog, AcceptDialog } from "./wait";
+import {
+  FriendPromoteDialog, FriendThanksDialog,
+  FriendCancelDialog, FriendCancelConfirmDialog
+} from "./friend";
+import { LoginError, LoginForm, loginUserByEmail } from "./login";
+import {
+  DialogButton, Spinner,
+  UserId,
+  LeftLogo,
+  TogglerAudio,
+  TogglerFanfare,
+  TogglerBeginner,
+  TogglerFairplay,
+  TextInput
+} from "./components";
+import { ChallengeDialog } from "./challengedialog";
+import { Main } from "./main";
+import { makeTabs, selectTab, TabVnode } from "./tabs";
+import { PromoDialog } from "./promodialog";
+import { UserInfoDialog } from "./userinfodialog";
+import { GameView } from "./gameview";
+import { vwReview } from "./review";
+
+/*
+// EXPERIMENTAL
+function insertStyleSheet(url: string) {
+  // Insert a link rel="stylesheet" element into the document head,
+  // if it isn't there already
+  const head = document.head;
+  if (!head) return;
+  const links = head.getElementsByTagName("link");
+  for (const link of links) {
+    if (link.href === url) return;
+  }
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  head.appendChild(link);
+}
+*/
+
+function updateFontFaceUrls(serverUrl: string) {
+  // Get all stylesheets in the document
+  const styleSheets = document.styleSheets;
+  // Iterate through each stylesheet
+  for (const styleSheet of styleSheets) {
+    // Iterate through each CSS rule in the stylesheet
+    for (const rule of styleSheet.cssRules) {
+      // Check if the rule is a @font-face rule
+      if (rule instanceof CSSFontFaceRule) {
+        // Update the src property with new URLs
+        const src = rule.style.getPropertyValue("src");
+        if (src.includes("glyphicons-")) {
+          rule.style.setProperty("src", `
+            url('${serverUrl}/static/glyphicons-regular.eot') format('embedded-opentype'),
+            url('${serverUrl}/static/glyphicons-regular.woff') format('woff'),
+            url('${serverUrl}/static/glyphicons-regular.ttf') format('truetype')
+          `);
+        }
+      }
+    }
+  }
+}
+
+export type LoginResult = "success" | "expired" | "error";
+
+export async function main(state: GlobalState, container: HTMLElement): Promise<LoginResult> {
+  // The main UI entry point, called from page.html
+
+  if (!container) {
+    console.error("No container element found");
+    return "error";
+  }
+  // Set up Netskrafl backend server URLs
+  setServerUrl(state.serverUrl, state.movesUrl, state.movesAccessKey);
+
+  // Insert the Explo CSS stylesheet
+  // insertStyleSheet("./index.css");
+
+  // Update font URLs to point to the backend server
+  updateFontFaceUrls(state.serverUrl);
+
+  try {
+    const loginData = await loginUserByEmail(
+      state.userEmail,
+      state.userNick,
+      state.userFullname,
+      state.token,
+    );
+    if (loginData.status === "expired") {
+      // The current Málstaður JWT has expired;
+      // we need to obtain a new one
+      return "expired";
+    }
+    if (loginData.status === "success") {
+      state.userId = loginData.user_id;
+      // Log in to Firebase with the token passed from the server
+      await loginFirebase(state, loginData.firebase_token);
+      // Everything looks OK:
+      // Create the model, view and actions objects
+      const settings = getSettings();
+      const model = new Model(settings, state);
+      const view = new View(model);
+      const actions = new Actions(model, view);
+      // Run the Mithril router
+      const routeResolver = createRouteResolver(actions);
+      m.route(container, settings.defaultRoute, routeResolver);
+      return "success";
+    }
+  } catch(e) {
+    console.error("Exception during login: ", e);
+  }
+  m.mount(container, LoginError);
+  return "error";
+}
+
+export function unmount(container: HTMLElement) {
+  // Unmount the Mithril UI
+  m.mount(container, null);
+}
+
+type DialogFunc = (view: View, args: any) => VnodeChildren;
+
+type DialogViews = Record<DialogViewEnum, DialogFunc>;
+
+interface Dialog {
+  name: DialogViewEnum;
+  args: any;
+}
+
+export class View implements IView {
+
+  // The View class exposes the vwApp view function.
+  // Each instance maintains a current dialog window stack.
+
+  // The model that the view is attached to
+  model: Model;
+
+  // The currently displayed dialogs
+  private dialogStack: Dialog[] = [];
+
+  // Map of available dialogs
+  private static dialogViews: DialogViews = {
+    userprefs:
+      (view) => view.vwUserPrefs(),
+    userinfo:
+      (view, args) => view.vwUserInfo(args),
+    challenge:
+      (view, args) => m(ChallengeDialog, { view, item: args }),
+    promo:
+      (view, args) => view.vwPromo(args),
+    friend:
+      (view) => m(FriendPromoteDialog, { view }),
+    thanks:
+      (view) => m(FriendThanksDialog, { view }),
+    cancel:
+      (view) => m(FriendCancelDialog, { view }),
+    confirm:
+      (view) => m(FriendCancelConfirmDialog, { view }),
+    wait:
+      (view, args) => view.vwWait(args),
+    accept:
+      (view, args) => view.vwAccept(args)
+  };
+
+  // The current scaling of the board
+  boardScale: number = 1.0;
+
+  constructor(model: Model) {
+
+    this.model = model;
+
+    // Start a blinker interval function
+    window.setInterval(this.blinker, 500);
+
+  }
+
+  appView(routeName: string): VnodeChildren {
+    // Returns a view based on the current route.
+    // Displays the appropriate content for the route,
+    // also considering active dialogs.
+    const model = this.model;
+    let views: VnodeChildren = [];
+    switch (routeName) {
+      case "login":
+        // The login screen is displayed by default
+        views.push(this.vwLogin());
+        break;
+      case "loginerror":
+        views.push(m(LoginError));
+        break;
+      case "main":
+        views.push(m(Main, { view: this }));
+        break;
+      case "game":
+        views.push(m(GameView, { view: this }));
+        break;
+      case "review":
+        const n = vwReview(this);
+        n && views.push(n);
+        break;
+      case "thanks":
+        // Display a thank-you dialog on top of the normal main screen
+        views.push(m(Main, { view: this }));
+        // Be careful to add the Thanks dialog only once to the stack
+        if (!this.dialogStack.length)
+          this.showThanks();
+        break;
+      case "help":
+        // A route parameter of ?q=N goes directly to the FAQ number N
+        // A route parameter of ?tab=N goes directly to tab N (0-based)
+        views.push(
+          this.vwHelp(
+            parseInt(m.route.param("tab") || ""),
+            parseInt(m.route.param("faq") || "")
+          )
+        );
+        break;
+      default:
+        // console.log("Unknown route name: " + model.routeName);
+        return [ m("div", t("Þessi vefslóð er ekki rétt")) ];
+    }
+    // Push any open dialogs
+    for (const dialog of this.dialogStack) {
+      const v = View.dialogViews[dialog.name];
+      if (v === undefined) {
+        console.error("Unknown dialog name: " + dialog.name);
+      } else {
+        const n = v(this, dialog.args);
+        n && views.push(n);
+      }
+    }
+    // Overlay a spinner, if active
+    if (model.spinners)
+      views.push(m(Spinner));
+    return views;
+  }
+
+  // Dialog support
+
+  pushDialog(dialogName: DialogViewEnum, dialogArgs?: any) {
+    this.dialogStack.push({ name: dialogName, args: dialogArgs });
+    m.redraw(); // Ensure that the dialog is shown
+  }
+
+  popDialog() {
+    if (this.dialogStack.length > 0) {
+      this.dialogStack.pop();
+      m.redraw();
+    }
+  }
+
+  popAllDialogs() {
+    if (this.dialogStack.length > 0) {
+      this.dialogStack = [];
+      m.redraw();
+    }
+  }
+
+  isDialogShown() {
+    return this.dialogStack.length > 0;
+  }
+
+  startSpinner() {
+    this.model.spinners++;
+  }
+
+  stopSpinner() {
+    if (this.model.spinners) {
+      this.model.spinners--;
+    }
+  }
+
+  async cancelFriendship() {
+    // Initiate cancellation of the user's friendship
+    let spinner = true;
+    try {
+      this.startSpinner();
+      if (await this.model.cancelFriendship()) {
+        // Successfully cancelled the friendship
+        this.stopSpinner();
+        spinner = false;
+        // Show a confirmation of the cancellation
+        this.pushDialog("confirm", {});
+      }
+    } catch (e) {
+      // Simply display no confirmation in this case
+    }
+    finally {
+      if (spinner)
+        this.stopSpinner();
+    }
+  }
+
+  notifyMediaChange() {
+    // The view is changing, between mobile and fullscreen
+    // and/or between portrait and landscape: ensure that
+    // we don't end up with a selected game tab that is not visible
+    const model = this.model;
+    if (model.game) {
+      if (model.state?.uiFullscreen || model.state?.uiLandscape) {
+        // In this case, there is no board tab:
+        // show the movelist
+        if (model.game.setSelectedTab("movelist"))
+          setTimeout(scrollMovelistToBottom);
+      }
+      else {
+        // Mobile: we default to the board tab
+        model.game.setSelectedTab("board");
+      }
+    }
+    // When switching between landscape and portrait,
+    // close all current dialogs
+    this.popAllDialogs();
+  }
+
+  notifyChatMessage() {
+    // A fresh chat message has arrived
+    // and has been added to the chat message list
+    m.redraw();
+  }
+
+  resetScale() {
+    // Reset the board scale (zoom) to 100% and the scroll origin to (0, 0)
+    this.boardScale = 1.0;
+    const boardParent = document.getElementById("board-parent");
+    const board = boardParent?.children[0];
+    if (board)
+      board.setAttribute("style", "transform: scale(1.0)");
+    if (boardParent)
+      boardParent.scrollTo(0, 0);
+  }
+
+  updateScale() {
+
+    const model = this.model;
+    const game = model.game;
+
+    // Update the board scale (zoom)
+
+    function scrollIntoView(sq: string) {
+      // Scroll a square above and to the left of the placed tile into view
+      const offset = 3;
+      const vec = toVector(sq);
+      const row = Math.max(0, vec.row - offset);
+      const col = Math.max(0, vec.col - offset);
+      const c = coord(row, col);
+      const boardParent = document.getElementById("board-parent");
+      const board = boardParent?.children[0];
+      // The following seems to be needed to ensure that
+      // the transform and hence the size of the board has been 
+      // updated in the browser, before calculating the client rects
+      if (board)
+        board.setAttribute("style", "transform: scale(1.5)");
+      const el = document.getElementById("sq_" + c);
+      const elRect = el?.getBoundingClientRect();
+      const boardRect = boardParent?.getBoundingClientRect();
+      if (boardParent && elRect && boardRect) {
+        boardParent.scrollTo(
+          {
+            left: elRect.left - boardRect.left,
+            top: elRect.top - boardRect.top,
+            behavior: "smooth"
+          }
+        );
+      }
+    }
+
+    if (!game || model.state?.uiFullscreen || game.moveInProgress) {
+      // No game or we're in full screen mode: always 100% scale
+      // Also, as soon as a move is being processed by the server, we zoom out
+      this.boardScale = 1.0; // Needs to be done before setTimeout() call
+      setTimeout(this.resetScale);
+      return;
+    }
+    const tp = game.tilesPlaced();
+    const numTiles = tp.length;
+    if (numTiles === 1 && this.boardScale === 1.0) {
+      // Laying down first tile: zoom in & position
+      this.boardScale = 1.5;
+      setTimeout(() => scrollIntoView(tp[0]));
+    }
+    else if (numTiles === 0 && this.boardScale > 1.0) {
+      // Removing only remaining tile: zoom out
+      this.boardScale = 1.0; // Needs to be done before setTimeout() call
+      setTimeout(() => this.resetScale());
+    }
+  }
+
+  showUserInfo(userid: string, nick: string, fullname: string) {
+    // Show a user info dialog
+    this.pushDialog("userinfo", { userid: userid, nick: nick, fullname: fullname });
+  }
+
+  showFriendPromo() {
+    // Show a friendship promotion
+    this.pushDialog("friend", { });
+  }
+
+  showThanks() {
+    // Show thanks for becoming a friend
+    this.pushDialog("thanks", { });
+  }
+
+  showFriendCancel() {
+    // Show a friendship cancellation dialog
+    this.pushDialog("cancel", { });
+  }
+
+  showAcceptDialog(oppId: string, oppNick: string, challengeKey: string) {
+    this.pushDialog("accept", { oppId, oppNick, challengeKey });
+  }
+
+  // Globally available view functions
+
+  vwDialogButton(
+    id: string, title: string, func: EventHandler,
+    content: VnodeChildren, tabindex: number
+  ): VnodeChildren {
+    // Create a .modal-close dialog button
+    const attrs = {
+      id: id,
+      onclick: func,
+      title,
+      tabindex
+    };
+    return m(DialogButton, attrs, content);
+  }
+
+  blinker() {
+    // Toggle the 'over' class on all elements having the 'blinking' class
+    const blinkers = document.getElementsByClassName('blinking');
+    for (let b of blinkers)
+      b.classList.toggle("over");
+  }
+
+  // A control that rigs up a tabbed view of raw HTML
+
+  vwTabsFromHtml(
+    html: string, id: string, tabNumber: number, createFunc: (vnode: TabVnode) => void
+  ): VnodeChildren {
+    // The function assumes that 'this' is the current view object
+    if (!html)
+      return "";
+    return m("div",
+      {
+        oninit: (vnode) => { vnode.state.selected = tabNumber || 1; },
+        oncreate: (vnode) => { makeTabs(this, id, createFunc, true, vnode); }
+        /* onupdate: updateSelection */
+      },
+      m.trust(html)
+    );
+  }
+
+  // Help screen
+
+  vwHelp(tabNumber: number, faqNumber: number): Vnode {
+
+    const model = this.model;
+
+    function wireQuestions(vnode: TabVnode) {
+      // Clicking on a question brings the corresponding answer into view
+      // This is achieved by wiring up all contained a[href="#faq-*"] links
+
+      function showAnswer(ev: Event, href: string) {
+        // this points to the vnode
+        vnode.state.selected = 1; // FAQ tab
+        vnode.dom.querySelector(href)?.scrollIntoView();
+        ev.preventDefault();
+      }
+
+      const anchors = vnode.dom.querySelectorAll("a");
+      for (const anchor of anchors) {
+        const href = anchor.getAttribute("href");
+        if (href && href.slice(0, 5) == "#faq-")
+          // This is a direct link to a question: wire it up
+          anchor.onclick = (ev) => { showAnswer(ev, href); };
+      }
+      if (faqNumber !== undefined && !isNaN(faqNumber)) {
+        // Go to the FAQ tab and scroll the requested question into view
+        selectTab(vnode, 1);
+        vnode.state.selected = 1; // FAQ tab
+        vnode.dom.querySelector("#faq-" + faqNumber.toString())?.scrollIntoView();
+      }
+    }
+
+    // Output literal HTML obtained from rawhelp.html on the server
+    return m.fragment({}, [
+      m(LeftLogo),
+      m(UserId, { view: this }),
+      this.vwTabsFromHtml(model.helpHTML || "", "tabs", tabNumber, wireQuestions),
+    ]);
+  }
+
+  // User preferences screen
+
+  vwUserPrefsDialog(): VnodeChildren {
+
+    const model = this.model;
+    if (!model.user) return undefined;
+    const user = model.user;
+    if (!model.state) return undefined;
+    const state = model.state;
+    const err = model.userErrors || {};
+    const view = this;
+
+    function vwErrMsg(propname: keyof typeof err) {
+      // Show a validation error message returned from the server
+      return err.hasOwnProperty(propname) ?
+        m(".errinput", [glyph("arrow-up"), nbsp(), err[propname] || ""]) : "";
+    }
+
+    function getToggle(elemId: string): boolean {
+      const cls2 = document.querySelector("#" + elemId + "-toggler #opt2")?.classList;
+      if (!cls2) return false;
+      return cls2.contains("selected");
+    }
+
+    function validate() {
+      // Move data back to the model.user object
+      // before sending it to the server
+      user.nickname = getInput("nickname");
+      user.full_name = getInput("full_name");
+      user.audio = getToggle("audio");
+      user.fanfare = getToggle("fanfare");
+      user.beginner = getToggle("beginner");
+      user.fairplay = getToggle("fairplay");
+      // When done, pop the current dialog
+      model.saveUser(() => { view.popDialog(); });
+    }
+
+    function initFocus(vnode: VnodeDOM) {
+      // Set the focus on the nickname field when the dialog is displayed
+      (vnode.dom.querySelector("#nickname") as HTMLElement).focus();
+    }
+
+    return m(".modal-dialog",
+      {
+        id: "user-dialog",
+        oncreate: initFocus
+        // onupdate: initFocus
+      },
+      m(".ui-widget.ui-widget-content.ui-corner-all", { id: 'user-form' },
+        [
+          m(".loginhdr", [glyph("address-book"), " " + ts("player_info")]), // "Player information"
+          m("div",
+            m("form", { action: '', id: 'frm1', method: 'post', name: 'frm1' },
+              [
+                m(".dialog-spacer",
+                  [
+                    m("span.caption", t("Einkenni:")),
+                    m(TextInput,
+                      {
+                        initialValue: user.nickname || "",
+                        class: "username",
+                        maxlength: 15,
+                        id: "nickname",
+                        // autocomplete: "nickname", // Chrome doesn't like this
+                      }
+                    ),
+                    nbsp(), m("span.asterisk", "*")
+                  ]
+                ),
+                m(".explain", t("Verður að vera útfyllt")),
+                vwErrMsg("nickname"),
+                m(".dialog-spacer",
+                  [
+                    m("span.caption", t("Fullt nafn:")),
+                    m(TextInput,
+                      {
+                        initialValue: user.full_name || "",
+                        class: "fullname",
+                        maxlength: 32,
+                        id: "full_name",
+                        autocomplete: "name",
+                      }
+                    )
+                  ]
+                ),
+                m(".explain", t("Valfrjálst - sýnt í notendalistum Netskrafls")),
+                vwErrMsg("full_name"),
+                m(".dialog-spacer",
+                  [
+                    m("span.caption.sub", t("Hljóðmerki:")),
+                    m(TogglerAudio, { view, state: user.audio, tabindex: 4 }),
+                    m("span.subcaption", t("Lúðraþytur eftir sigur:")),
+                    m(TogglerFanfare, { view, state: user.fanfare, tabindex: 5 }),
+                  ]
+                ),
+                m(".explain", t("explain_sound")),
+                m(".dialog-spacer",
+                  [
+                    m("span.caption.sub", t("Sýna reitagildi:")),
+                    m(TogglerBeginner, { view, state: user.beginner, tabindex: 6 }),
+                    mt(".subexplain",
+                      [
+                        "Stillir hvort ",
+                        mt("strong", "minnismiði"),
+                        " um margföldunargildi reita er sýndur við borðið"
+                      ]
+                    )
+                  ]
+                ),
+                m(".dialog-spacer",
+                  [
+                    m("span.caption.sub", t("Án hjálpartækja:")),
+                    m(TogglerFairplay, { view, state: user.fairplay, tabindex: 7 }),
+                    mt(".subexplain",
+                      [
+                        "no_helpers",
+                        mt("strong", "án stafrænna hjálpartækja"),
+                        " af nokkru tagi"
+                      ]
+                    )
+                  ]
+                )
+              ]
+            )
+          ),
+          this.vwDialogButton("user-ok", ts("Vista"), validate, glyph("ok"), 8),
+          this.vwDialogButton("user-cancel", ts("Hætta við"),
+            (ev) => { this.popDialog(); ev.preventDefault(); },
+            glyph("remove"), 9),
+          user.friend ?
+            this.vwDialogButton("user-unfriend", ts("Hætta sem vinur"),
+              (ev) => {
+                ev.preventDefault();
+                view.showFriendCancel()
+              },
+              [glyph("coffee-cup"), nbsp(), nbsp(), ts("Þú ert vinur Netskrafls!")], 10
+            )
+            :
+            this.vwDialogButton("user-friend", ts("Gerast vinur"),
+              (ev) => {
+                // Invoke the friend promo dialog
+                ev.preventDefault();
+                logEvent("click_friend",
+                  {
+                    userid: state.userId, locale: state.locale
+                  }
+                );
+                view.showFriendPromo();
+              },
+              [glyph("coffee-cup"), nbsp(), nbsp(), ts("Gerast vinur Netskrafls")], 11
+            )
+        ]
+      )
+    );
+  }
+
+  vwUserPrefs(): VnodeChildren {
+    const model = this.model;
+    if (model.user === null && !model.userLoadError)
+      model.loadUser(true); // Activate spinner while loading
+    if (!model.user)
+      // Nothing to edit (the spinner should be showing in this case)
+      return m.fragment({}, []);
+    return this.vwUserPrefsDialog();
+  }
+
+  vwUserInfo(args: { userid: string; nick: string; fullname: string; }): VnodeChildren {
+    return m(UserInfoDialog,
+      {
+        view: this,
+        userid: args.userid,
+        nick: args.nick,
+        fullname: args.fullname
+      }
+    );
+  }
+
+  vwPromo(args: { kind: string; initFunc: () => void; }): VnodeChildren {
+    return m(PromoDialog,
+      {
+        view: this,
+        kind: args.kind,
+        initFunc: args.initFunc
+      }
+    );
+  }
+
+  vwWait(args: {
+    oppId: string;
+    oppNick: string;
+    oppName: string;
+    duration: number;
+    challengeKey: string;
+  }): VnodeChildren {
+    return m(WaitDialog, {
+      view: this,
+      oppId: args.oppId,
+      oppNick: args.oppNick,
+      oppName: args.oppName,
+      duration: args.duration,
+      challengeKey: args.challengeKey,
+    });
+  }
+
+  vwAccept(args: { oppId: string; oppNick: string; challengeKey: string; }): VnodeChildren {
+    return m(AcceptDialog, {
+      view: this,
+      oppId: args.oppId,
+      oppNick: args.oppNick,
+      challengeKey: args.challengeKey,
+    });
+  }
+
+  vwLogin(): VnodeChildren {
+    const model = this.model;
+    const loginUrl = model.state?.loginUrl || "";
+    return m(LoginForm, { loginUrl });
+  }
+
+  vwDialogs(): VnodeChildren {
+    // Show prompt dialogs below game board, if any
+    const game = this.model.game;
+    let r: Vnode[] = [];
+    if (!game || game.showingDialog === null && !game.last_chall)
+      return r;
+    // The dialogs below, specifically the challenge and pass
+    // dialogs, have priority over the last_chall dialog - since
+    // they can be invoked while the last_chall dialog is being
+    // displayed. We therefore allow them to cover the last_chall
+    // dialog. On mobile, both dialogs are displayed simultaneously.
+    if (game.last_chall)
+      r.push(m(".chall-info", { style: { visibility: "visible" } },
+        [
+          glyph("info-sign"), nbsp(),
+          // "Your opponent emptied the rack - you can challenge or pass"
+          mt("span.pass-explain", "opponent_emptied_rack")
+        ]
+      ));
+    if (game.showingDialog == "resign")
+      r.push(m(".resign", { style: { visibility: "visible" } },
+        [
+          glyph("exclamation-sign"), nbsp(), ts("Viltu gefa leikinn?"), nbsp(),
+          m("span.mobile-break", m("br")),
+          m("span.yesnobutton", { onclick: () => game.confirmResign(true) },
+            [glyph("ok"), ts(" Já")]
+          ),
+          m("span.mobile-space"),
+          m("span.yesnobutton", { onclick: () => game.confirmResign(false) },
+            [glyph("remove"), ts(" Nei")]
+          )
+        ]
+      ));
+    if (game.showingDialog == "pass") {
+      if (game.last_chall)
+        r.push(m(".pass-last", { style: { visibility: "visible" } },
+          [
+            glyph("forward"), nbsp(), ts("Segja pass?"),
+            mt("span.pass-explain", "Viðureign lýkur þar með"),
+            nbsp(),
+            m("span.mobile-break", m("br")),
+            m("span.yesnobutton", { onclick: () => game.confirmPass(true) },
+              [glyph("ok"), ts(" Já")]
+            ),
+            m("span.mobile-space"),
+            m("span.yesnobutton", { onclick: () => game.confirmPass(false) },
+              [glyph("remove"), ts(" Nei")]
+            )
+          ]
+        ));
+      else
+        r.push(m(".pass", { style: { visibility: "visible" } },
+          [
+            glyph("forward"), nbsp(), ts("Segja pass?"),
+            mt("span.pass-explain", "2x3 pöss í röð ljúka viðureign"),
+            nbsp(), m("span.mobile-break", m("br")),
+            m("span.yesnobutton", { onclick: () => game.confirmPass(true) },
+              [glyph("ok"), ts(" Já")]
+            ),
+            m("span.mobile-space"),
+            m("span.yesnobutton", { onclick: () => game.confirmPass(false) },
+              [glyph("remove"), ts(" Nei")]
+            )
+          ]
+        ));
+    }
+    if (game.showingDialog == "exchange")
+      r.push(m(".exchange", { style: { visibility: "visible" } },
+        [
+          glyph("refresh"), nbsp(),
+          ts("Smelltu á flísarnar sem þú vilt skipta"), nbsp(),
+          m("span.mobile-break", m("br")),
+          m("span.yesnobutton",
+            { title: ts('Skipta'), onclick: () => game.confirmExchange(true) },
+            glyph("ok")
+          ),
+          m("span.mobile-space"),
+          m("span.yesnobutton",
+            { title: ts('Hætta við'), onclick: () => game.confirmExchange(false) },
+            glyph("remove"))
+        ]
+      ));
+    if (game.showingDialog == "chall")
+      r.push(m(".chall", { style: { visibility: "visible" } },
+        [
+          glyph("ban-circle"), nbsp(), ts("Véfengja lögn?"),
+          mt("span.pass-explain", "Röng véfenging kostar 10 stig"), nbsp(),
+          m("span.mobile-break", m("br")),
+          m("span.yesnobutton",
+            { onclick: () => game.confirmChallenge(true) },
+            [glyph("ok"), ts(" Já")]
+          ),
+          m("span.mobile-space"),
+          m("span.yesnobutton",
+            { onclick: () => game.confirmChallenge(false) },
+            [glyph("remove"), ts(" Nei")]
+          )
+        ]
+      ));
+    return r;
+  }
+
+} // class View