@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/gameview.ts

@@ -0,0 +1,111 @@
+/*
+
+  Gameview.ts
+
+  Game view component
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjalmur Thorsteinsson
+
+  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
+
+*/
+
+import { IView } from "./types";
+import { t, ts } from "./i18n";
+import { glyph } from "./util";
+import { ComponentFunc, m } from "./mithril";
+import { Info, LeftLogo } from "./components";
+import { BlankDialog } from "./blankdialog";
+import { Bag } from "./bag";
+import { BoardArea } from "./board";
+import { RightColumn } from "./rightcolumn";
+
+const Beginner: ComponentFunc<IAttributes> = (initialVnode) => {
+  // Show the board color guide
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  const state = model.state;
+  return {
+    view: () => m(".board-help",
+      { title: ts("Hvernig reitirnir margfalda stigin") },
+      [
+        m(".board-help-close",
+          {
+            title: ts("Loka þessari hjálp"),
+            onclick: (ev: Event) => {
+              // Close the guide and set a preference not to see it again
+              if (state) {
+                state.beginner = false;
+                model.setUserPref({ beginner: false });
+              }
+              ev.preventDefault();
+            }
+          },
+          glyph("remove")
+        ),
+        m(".board-colors",
+          [
+            m(".board-color[id='triple-word']", ["3 x", m("br"), t("orð")]),
+            m(".board-color[id='double-word']", ["2 x", m("br"), t("orð")]),
+            m(".board-color[id='triple-letter']", ["3 x", m("br"), t("stafur")]),
+            m(".board-color[id='double-letter']", ["2 x", m("br"), t("stafur")]),
+            m(".board-color[id='single-letter']", ["1 x", m("br"), t("stafur")])
+          ]
+        )
+      ]
+    )
+  };
+};
+
+interface IAttributes {
+  view: IView;
+}
+
+export const GameView: ComponentFunc<IAttributes> = () => {
+  // A view of a game, in-progress or finished
+
+  return {
+    view: (vnode) => {
+      const view = vnode.attrs.view;
+      const model = view.model;
+      const game = model.game;
+      if (!game) {
+        // No associated game
+        return m("div", [m(".game-container"), m(LeftLogo)]);
+      }
+      const bag = game.bag;
+      const newbag = game.newbag;
+      const state = model.state;
+      return m(
+        // Allow tiles to be dropped on the background
+        // by marking the div with the drop-target class.
+        // Such a drop sends the tile back into the rack.
+        "div.drop-target",
+        {
+          id: "board-background",
+        },
+        [
+          // The main game area
+          m(".game-container",
+            [
+              m(RightColumn, { view }),
+              m(BoardArea, { view }),
+              // The bag is visible in fullscreen
+              state?.uiFullscreen ? m(Bag, { bag: bag, newbag: newbag }) : "",
+              game.askingForBlank ? m(BlankDialog, { view }) : ""
+            ]
+          ),
+          // The left margin stuff: back button, square color help, info/help button
+          // These elements appear after the game container, since we want
+          // them to be above it in the z-order
+          m(LeftLogo),
+          state?.beginner ? m(Beginner, { view }) : "",
+          m(Info),
+        ]
+      )
+    }
+  };
+};

package/src/mithril/globalstate.ts

@@ -0,0 +1,33 @@
+
+// Global state, for the most part obtained from the server
+// when the single page UI is initialized (i.e. from page.html)
+export interface GlobalState {
+  projectId: string;
+  databaseURL: string;
+  firebaseSenderId: string;
+  firebaseAppId: string;
+  firebaseAPIKey: string;
+  measurementId: string;
+  userEmail: string;
+  userId: string;
+  userNick: string;
+  userFullname: string;
+  locale: string;
+  isExplo: boolean;
+  serverUrl: string;
+  movesUrl: string;
+  movesAccessKey: string;
+  token: string;
+  loginUrl: string;
+  loginMethod: string;
+  newUser: boolean;
+  beginner: boolean;
+  fairPlay: boolean;
+  plan: string;
+  hasPaid: boolean;
+  ready: boolean;
+  readyTimed: boolean;
+  uiFullscreen: boolean;
+  uiLandscape: boolean;
+  runningLocal: boolean;
+}

package/src/mithril/i18n.ts

@@ -0,0 +1,186 @@
+/*
+
+  i8n.ts
+
+  Single page UI for Explo using the Mithril library
+
+  Copyright (C) 2023 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 module contains internationalization (i18n) utility functions,
+  allowing for translation of displayed text between languages.
+
+  Text messages for individual locales are loaded from the
+  /static/assets/messages.json file, which is fetched from the server.
+
+*/
+
+export { t, ts, mt, loadMessages };
+
+import { m, VnodeChildren } from "./mithril";
+import { request } from "./request";
+
+// Type declarations
+type Messages = { [key: string]: { [locale: string]: string | string[] }};
+type FlattenedMessages = { [key: string]: { [locale: string]: VnodeChildren }};
+type Interpolations = { [key: string]: string };
+
+// Current exact user locale and fallback locale ("en" for "en_US"/"en_GB"/...)
+// This is overwritten in setLocale()
+let currentLocale = "is_IS";
+let currentFallback = "is";
+
+// Regex that matches embedded interpolations such as "Welcome, {username}!"
+// Interpolation identifiers should only contain ASCII characters, digits and '_'
+const rex = /{\s*(\w+)\s*}/g;
+
+let messages: FlattenedMessages = {};
+let messagesLoaded = false;
+
+function hasAnyTranslation(msgs: Messages, locale: string): boolean {
+  // Return true if any translation is available for the given locale
+  for (let key in msgs) {
+    if (msgs[key][locale] !== undefined)
+      return true;
+  }
+  return false;
+}
+
+function setLocale(locale: string, msgs: Messages): void {
+  // Set the current i18n locale and fallback
+  currentLocale = locale;
+  currentFallback = locale.split("_")[0];
+  // For unsupported locales, i.e. locales that have no
+  // translations available for them, fall back to English (U.S.).
+  if (!hasAnyTranslation(msgs, currentLocale) && !hasAnyTranslation(msgs, currentFallback)) {
+    currentLocale = "en_US";
+    currentFallback = "en";
+  }
+
+  // Flatten the Messages structure, enabling long strings
+  // to be represented as string arrays in the messages.json file
+  messages = {};
+  for (let key in msgs) {
+    for (let lc in msgs[key]) {
+      let s: VnodeChildren = msgs[key][lc];
+      if (Array.isArray(s))
+        s = s.join("");
+      if (messages[key] === undefined)
+        messages[key] = {};
+      // If the string s contains HTML markup of the form <tag>...</tag>,
+      // convert it into a list of Mithril Vnode children corresponding to
+      // the text and the tags
+      if (s.match(/<[a-z]+>/)) {
+        // Looks like the string contains HTML markup
+        const vnodes: VnodeChildren[] = [];
+        let i = 0;
+        let tagMatch: RegExpMatchArray | null = null;
+        while (i < s.length && (tagMatch = s.slice(i).match(/<[a-z]+>/)) && tagMatch.index !== undefined) {
+          // Found what looks like an HTML tag
+          // Calculate the index of the enclosed text within s
+          const tag = tagMatch[0];
+          let j = i + tagMatch.index + tag.length;
+          // Find the end tag
+          let end = s.indexOf("</" + tag.slice(1), j);
+          if (end < 0) {
+            // No end tag - skip past this weirdness
+            i = j;
+            continue;
+          }
+          // Add the text preceding the tag
+          if (tagMatch.index > 0)
+            vnodes.push(s.slice(i, i + tagMatch.index));
+          // Create the Mithril node corresponding to the tag and the enclosed text
+          // and add it to the list
+          vnodes.push(m(tag.slice(1, -1), s.slice(j, end)));
+          // Advance the index past the end of the tag
+          i = end + tag.length + 1;
+        }
+        // Push the final text part, if any
+        if (i < s.length)
+          vnodes.push(s.slice(i));
+        // Reassign s to the list of vnodes
+        s = vnodes;
+      }
+      messages[key][lc] = s;
+    }
+  }
+  messagesLoaded = true;
+}
+
+async function loadMessages(locale: string) {
+  // Load the internationalization message JSON file from the server
+  // and set the user's locale
+  try {
+    const messages = await request<Messages>({
+      method: "GET",
+      url: "/static/assets/messages.json",
+    });
+    setLocale(locale, messages);
+  }
+  catch {
+    setLocale(locale, {});
+  }
+}
+
+function t(key: string, ips: Interpolations = {}): VnodeChildren {
+  // Main text translation function, supporting interpolation
+  // and HTML tag substitution
+  const msgDict = messages[key];
+  if (msgDict === undefined)
+    // No dictionary for this key - may actually be a missing entry
+    return messagesLoaded ? key : "";
+  // Lookup exact locale, then fallback, then resort to returning the key
+  const message = msgDict[currentLocale] || msgDict[currentFallback] || key;
+  // If we have an interpolation object, do the interpolation first
+  return Object.keys(ips).length ? interpolate(message, ips) : message;
+}
+
+function ts(key: string, ips: Interpolations = {}): string {
+  // String translation function, supporting interpolation
+  // but not HTML tag substitution
+  const msgDict = messages[key];
+  if (msgDict === undefined)
+    // No dictionary for this key - may actually be a missing entry
+    return messagesLoaded ? key : "";
+  // Lookup exact locale, then fallback, then resort to returning the key
+  const message = msgDict[currentLocale] || msgDict[currentFallback] || key;
+  if (typeof message != "string")
+    // This is actually an error - the client should be calling t() instead
+    return "";
+  // If we have an interpolation object, do the interpolation first
+  return Object.keys(ips).length ? interpolate_string(message, ips) : message;
+}
+
+function mt(cls: string, children: VnodeChildren): VnodeChildren {
+  // Wrapper for the Mithril m() function that auto-translates
+  // string and array arguments
+  if (typeof children == "string") {
+    return m(cls, t(children));
+  }
+  if (Array.isArray(children)) {
+    return m(cls, children.map((item) => (typeof item == "string") ? t(item) : item));
+  }
+  return m(cls, children);
+}
+
+function interpolate(message: VnodeChildren, ips: Interpolations): VnodeChildren {
+  // Replace interpolation placeholders with their corresponding values
+  if (typeof message == "string") {
+    return message.replace(rex, (match, key) => ips[key] || match);
+  }
+  if (Array.isArray(message)) {
+    return message.map((item) => interpolate(item, ips));
+  }
+  return message;
+}
+
+function interpolate_string(message: string, ips: Interpolations): string {
+  // Replace interpolation placeholders with their corresponding values
+  return message.replace(rex, (match, key) => ips[key] || match);
+}

package/src/mithril/localstorage.ts

@@ -0,0 +1,133 @@
+/*
+
+  Localstorage.ts
+
+  An interface around HTML5 local storage functionality, if available
+
+  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
+
+*/
+
+import { RACK_SIZE, SavedTile } from "./types";
+
+export interface LocalStorage {
+  getLocalTile: (ix: number) => string;
+  getLocalTileSq: (ix: number) => string;
+  setLocalTile: (ix: number, t: string) => void;
+  setLocalTileSq: (ix: number, sq: string) => void;
+  clearTiles: () => void;
+  saveTiles: (tilesPlaced: SavedTile[]) => void;
+  loadTiles: () => SavedTile[];
+}
+
+let _hasLocal: boolean | null = null; // Is HTML5 local storage supported by the browser?
+
+function hasLocalStorage(): boolean {
+  // Return true if HTML5 local storage is supported by the browser
+  if (_hasLocal === null)
+    try {
+      _hasLocal = ('localStorage' in window) &&
+        (window.localStorage !== null) &&
+        (window.localStorage !== undefined);
+    } catch (e) {
+      _hasLocal = false;
+    }
+  return _hasLocal;
+}
+
+class LocalStorageImpl implements LocalStorage {
+
+  _prefix: string;
+
+  constructor(uuid: string) {
+    // Constructor for local storage associated with a particular game
+    this._prefix = `game.${uuid}`;
+  }
+
+  getLocalTile(ix: number) {
+    return window.localStorage[`${this._prefix}.tile.${ix}.t`];
+  }
+
+  getLocalTileSq(ix: number) {
+    return window.localStorage[`${this._prefix}.tile.${ix}.sq`];
+  }
+
+  setLocalTile(ix: number, t: string) {
+    window.localStorage[`${this._prefix}.tile.${ix}.t`] = t;
+  }
+
+  setLocalTileSq(ix: number, sq: string) {
+    window.localStorage[`${this._prefix}.tile.${ix}.sq`] = sq;
+  }
+
+  clearTiles() {
+    // Clean up local storage when game is over
+    try {
+      const ls = window.localStorage;
+      for (let i = 1; i <= RACK_SIZE; i++) {
+        ls.removeItem(`${this._prefix}.tile.${i}.sq`);
+        ls.removeItem(`${this._prefix}.tile.${i}.t`);
+      }
+    }
+    catch (e) {
+    }
+  }
+
+  saveTiles(tilesPlaced: SavedTile[]) {
+    // Save tile locations in local storage
+    let i: number;
+    for (i = 0; i < tilesPlaced.length; i++) {
+      // Store this placed tile in local storage
+      const sq = tilesPlaced[i].sq;
+      const tile = tilesPlaced[i].tile;
+      // Set the placed tile's square
+      this.setLocalTileSq(i + 1, sq);
+      // Set the letter (or ?+letter if undefined)
+      this.setLocalTile(i + 1, tile);
+    }
+    // Erase all remaining positions in local storage
+    for (; i < RACK_SIZE; i++) {
+      this.setLocalTileSq(i + 1, "");
+      this.setLocalTile(i + 1, "");
+    }
+  }
+
+  loadTiles() {
+    // Return the saved tile locations
+    let sq: string, tile: string;
+    let tp: SavedTile[] = [];
+    for (let i = 0; i < RACK_SIZE; i++) {
+      sq = this.getLocalTileSq(i + 1);
+      tile = this.getLocalTile(i + 1);
+      if (sq && tile)
+        tp.push({sq: sq, tile: tile});
+    }
+    return tp;
+  }
+
+} // class LocalStorageImpl
+
+class NoLocalStorageImpl implements LocalStorage {
+
+  // This class is used if the browser does not implement local storage
+
+  constructor() { }
+
+  getLocalTile(ix: number) { return ""; }
+  getLocalTileSq(ix: number) { return ""; }
+  setLocalTile(ix: number, t: string) { }
+  setLocalTileSq(ix: number, sq: string) { }
+  clearTiles() { }
+  saveTiles(tilesPlaced: SavedTile[]) { }
+  loadTiles(): SavedTile[] { return []; }
+
+} // class NoLocalStorageImpl
+
+export const getLocalStorage = (uuid: string): LocalStorage => {
+  return hasLocalStorage() ? new LocalStorageImpl(uuid) : new NoLocalStorageImpl();
+}

package/src/mithril/login.ts

@@ -0,0 +1,122 @@
+/*
+
+  Login.ts
+
+  Login UI for Explo using the Mithril library
+
+  Copyright (C) 2025 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.
+
+*/
+
+import { m, ComponentFunc, Component } from "./mithril";
+
+import { mt, t } from "./i18n";
+import { AnimatedExploLogo, NetskraflLegend } from "./logo";
+import { request } from "./request";
+
+export interface LoginData {
+  status: string;
+  message?: string;
+  account: string;
+  user_id: string;
+  token: string;
+  firebase_token: string;
+}
+
+export const loginUserByEmail = async (
+  email: string,
+  nickname: string,
+  fullname: string,
+  token: string,
+) => {
+  // Call the /login_malstadur endpoint on the server
+  // to log in the user with the given email and token.
+  // The token is a standard HS256-encoded JWT with aud "netskrafl"
+  // and iss typically "malstadur".
+  return request<LoginData>({
+    method: "POST",
+    url: "/login_malstadur",
+    body: { email, nickname, fullname, token }
+  });
+}
+
+export const LoginError: Component<{ message: string}> = {
+  view: (vnode) => {
+    return m(
+      "div.error",
+      { style: { visibility: "visible" }},
+      vnode.attrs?.message || "Error logging in",
+    );
+  }
+}
+
+export const LoginForm: ComponentFunc<{ loginUrl: string }> = (initialVnode) => {
+
+  const loginUrl = initialVnode.attrs.loginUrl;
+  let loginInProgress = false;
+
+  function doLogin(ev: MouseEvent) {
+    loginInProgress = true;
+    ev.preventDefault();
+    window.location.href = loginUrl;
+  }
+
+  return {
+    view: () => {
+      return m.fragment({}, [
+        // This is visible on large screens
+        m("div.loginform-large", [
+          m(AnimatedExploLogo, {
+            className: "login-logo",
+            width: 200,
+            withCircle: false,
+            msStepTime: 150,
+            once: true
+          }),
+          m(NetskraflLegend, {
+            className: "login-legend",
+            width: 600,
+            msStepTime: 0
+          }),
+          mt("div.welcome", "welcome_0"),
+          mt("div.welcome", "welcome_1"),
+          mt("div.welcome", "welcome_2"),
+          m("div.login-btn-large",
+            { onclick: doLogin },
+            loginInProgress ? t("Skrái þig inn...") : [
+              t("Innskrá") + " ", m("span.glyphicon.glyphicon-play")
+            ]
+          )
+        ]),
+        // This is visible on small screens
+        m("div.loginform-small", [
+          m(AnimatedExploLogo, {
+            className: "login-logo",
+            width: 160,
+            withCircle: false,
+            msStepTime: 150,
+            once: true
+          }),
+          m(NetskraflLegend, {
+            className: "login-legend",
+            width: 650,
+            msStepTime: 0
+          }),
+          m("div.login-btn-small",
+            { onclick: doLogin },
+            loginInProgress ? t("Skrái þig inn...") : t("Innskrá")
+          )
+        ])
+      ]);
+    }
+  };
+
+};