@mideind/netskrafl-react 1.0.0-beta.5 → 1.0.0-beta.7

package/src/mithril/page.ts

@@ -1,856 +0,0 @@
-/*
-
-  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
-  try {
-    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')
-            `);
-          }
-        }
-      }
-    }
-  } catch (e) {
-    // Handle any errors that occur while accessing stylesheets
-    console.error("Error when updating font face URLs: ", e);
-  }
-}
-
-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:
-        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.help-tabs",
-      {
-        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"), 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