@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/util.ts

@@ -0,0 +1,304 @@
+/*
+
+  Util.ts
+
+	Utility functions for the Explo/Netskrafl user interface
+
+  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
+
+  The following code is based on
+  https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events/Pinch_zoom_gestures
+
+*/
+
+import { m, MithrilDragEvent, Vnode } from "./mithril";
+import { BOARD_SIZE, ROWIDS } from "./types";
+
+type UrlParams = "uuid" | "move" | "tab" | "faq" | "zombie";
+
+// Possible URL parameters that are passed to routes
+export type Params = Partial<Record<UrlParams, string>>;
+
+type ZoomFunc = () => void;
+
+// Global vars to cache event state
+var evCache: PointerEvent[] = [];
+var origDistance = -1;
+const PINCH_THRESHOLD = 10; // Minimum pinch movement
+var hasZoomed = false;
+
+// Old-style (non-single-page) game URL prefix
+const BOARD_PREFIX = "/board?game=";
+const BOARD_PREFIX_LEN = BOARD_PREFIX.length;
+
+export function addPinchZoom(attrs: any, funcZoomIn: ZoomFunc, funcZoomOut: ZoomFunc) {
+  // Install event handlers for the pointer target
+  attrs.onpointerdown = pointerdown_handler;
+  attrs.onpointermove = pointermove_handler.bind(null, funcZoomIn, funcZoomOut);
+  // Use same handler for pointer{up,cancel,out,leave} events since
+  // the semantics for these events - in this app - are the same.
+  attrs.onpointerup = pointerup_handler;
+  attrs.onpointercancel = pointerup_handler;
+  attrs.onpointerout = pointerup_handler;
+  attrs.onpointerleave = pointerup_handler;
+}
+
+function pointerdown_handler(ev: PointerEvent) {
+  // The pointerdown event signals the start of a touch interaction.
+  // This event is cached to support 2-finger gestures
+  evCache.push(ev);
+}
+
+function pointermove_handler(funcZoomIn: ZoomFunc, funcZoomOut: ZoomFunc, ev: PointerEvent) {
+  // This function implements a 2-pointer horizontal pinch/zoom gesture. 
+  //
+  // If the distance between the two pointers has increased (zoom in), 
+  // the target element's background is changed to "pink" and if the 
+  // distance is decreasing (zoom out), the color is changed to "lightblue".
+  //
+  // Find this event in the cache and update its record with this event
+  for (let i = 0; i < evCache.length; i++) {
+    if (ev.pointerId === evCache[i].pointerId) {
+      evCache[i] = ev;
+      break;
+    }
+  }
+ 
+  // If two pointers are down, check for pinch gestures
+  if (evCache.length == 2) {
+    // Calculate the distance between the two pointers
+    const curDistance = Math.sqrt(
+      Math.pow(evCache[0].clientX - evCache[1].clientX, 2) +
+      Math.pow(evCache[0].clientY - evCache[1].clientY, 2)
+    );
+ 
+    if (origDistance > 0) {
+      if (curDistance - origDistance >= PINCH_THRESHOLD) {
+        // The distance between the two pointers has increased
+        if (!hasZoomed)
+          funcZoomIn();
+        hasZoomed = true;
+      }
+      else
+      if (origDistance - curDistance >= PINCH_THRESHOLD) {
+        // The distance between the two pointers has decreased
+        if (!hasZoomed)
+          funcZoomOut();
+        hasZoomed = true;
+      }
+    }
+    else
+    if (origDistance < 0) {
+      // Note the original difference between two pointers
+      origDistance = curDistance;
+      hasZoomed = false;
+    }
+  }
+}
+
+function pointerup_handler(ev: PointerEvent) {
+  // Remove this pointer from the cache and reset the target's
+  // background and border
+  remove_event(ev);
+  // If the number of pointers down is less than two then reset diff tracker
+  if (evCache.length < 2) {
+    origDistance = -1;
+  }
+}
+
+function remove_event(ev: PointerEvent) {
+  // Remove this event from the target's cache
+  for (let i = 0; i < evCache.length; i++) {
+    if (evCache[i].pointerId === ev.pointerId) {
+      evCache.splice(i, 1);
+      break;
+    }
+  }
+}
+
+export function buttonOver(ev: Event) {
+  const clist = (ev.currentTarget as HTMLElement).classList;
+  if (clist !== undefined && !clist.contains("disabled"))
+    clist.add("over");
+  (ev as MithrilDragEvent).redraw = false;
+}
+
+export function buttonOut(ev: Event) {
+  const clist = (ev.currentTarget as HTMLElement).classList;
+  if (clist !== undefined)
+    clist.remove("over");
+  (ev as MithrilDragEvent).redraw = false;
+}
+
+// Glyphicon utility function: inserts a glyphicon span
+export function glyph(icon: string, attrs?: any, grayed?: boolean): Vnode {
+  return m("span.glyphicon.glyphicon-" + icon + (grayed ? ".grayed" : ""), attrs);
+}
+
+export function glyphGrayed(icon: string, attrs?: any): Vnode {
+  return m("span.glyphicon.glyphicon-" + icon + ".grayed", attrs);
+}
+
+// Utility function: inserts non-breaking space
+export function nbsp(n?: number): Vnode {
+  if (!n || n === 1)
+    return m.trust("&nbsp;");
+  let r: Vnode[] = [];
+  for (let i = 0; i < n; i++)
+    r.push(m.trust("&nbsp;"));
+  return m.fragment({}, r);
+}
+
+// Utility functions
+
+export function escapeHtml(string: string): string {
+  /* Utility function to properly encode a string into HTML */
+  const entityMap: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': '&quot;',
+    "'": '&#39;',
+    "/": '&#x2F;'
+  };
+  return String(string).replace(/[&<>"'/]/g, (s) => entityMap[s] ?? "");
+}
+
+export function getUrlVars(url: string): Params {
+  // Get values from a URL query string
+  const hashes = url.split('&');
+  const vars: Params = {};
+  for (let i = 0; i < hashes.length; i++) {
+    const hash = hashes[i].split('=');
+    if (hash.length == 2)
+      vars[hash[0] as keyof Params] = decodeURIComponent(hash[1]);
+  }
+  return vars;
+}
+
+export function getInput(id: string): string {
+  // Return the current value of a text input field
+  const elem = document.getElementById(id) as HTMLInputElement;
+  return elem.value;
+}
+
+export function setInput(id: string, val: string) {
+  // Set the current value of a text input field
+  const elem = document.getElementById(id) as HTMLInputElement;
+  elem.value = val;
+}
+
+export function playAudio(elemId: string) {
+  // Play an audio file
+  const sound = document.getElementById(elemId) as HTMLMediaElement;
+  if (sound)
+    sound.play();
+}
+
+export function arrayEqual(a: any[], b: any[]): boolean {
+  // Return true if arrays a and b are equal
+  if (a.length != b.length)
+    return false;
+  for (let i = 0; i < a.length; i++)
+    if (a[i] != b[i])
+      return false;
+  return true;
+}
+
+export function gameUrl(url: string): string {
+  // Convert old-style game URL to new-style single-page URL
+  // The URL format is "/board?game=ed27b9f0-d429-11eb-8bc7-d43d7ee303b2&zombie=1"
+  if (url.slice(0, BOARD_PREFIX_LEN) == BOARD_PREFIX)
+    // Cut off "/board?game="
+    url = url.slice(BOARD_PREFIX_LEN);
+  // Isolate the game UUID
+  const uuid = url.slice(0, 36);
+  // Isolate the other parameters, if any
+  let params = url.slice(36);
+  // Start parameter section of URL with a ? sign
+  if (params.length > 0 && params.charAt(0) == "&")
+    params = "?" + params.slice(1);
+  // Return the single-page URL, to be consumed by m.route.Link()
+  return "/game/" + uuid + params;
+}
+
+export function scrollMovelistToBottom(): void {
+  // If the length of the move list has changed,
+  // scroll the last move into view
+  let movelist = document.querySelectorAll("div.movelist .move");
+  if (!movelist || !movelist.length)
+    return;
+  let target = movelist[movelist.length - 1] as HTMLElement;
+  let parent = target.parentNode as HTMLElement;
+  let len = parent.getAttribute("data-len");
+  let intLen = (!len) ? 0 : parseInt(len);
+  if (movelist.length > intLen) {
+    // The list has grown since we last updated it:
+    // scroll to the bottom and mark its length
+    parent.scrollTop = target.offsetTop;
+  }
+  parent.setAttribute("data-len", movelist.length.toString());
+}
+
+export function coord(row: number, col: number): string | null {
+  // Return the co-ordinate string for the given 0-based row and col
+  if (row < 0 || row >= BOARD_SIZE || col < 0 || col >= BOARD_SIZE)
+    return null;
+  return ROWIDS[row] + (col + 1);
+}
+
+export function toVector(co: string): { col: number, row: number, dx: number, dy: number } {
+  // Convert a co-ordinate string to a 0-based row, col and direction vector
+  var dx = 0, dy = 0;
+  var col = 0;
+  var row = ROWIDS.indexOf(co[0]);
+  if (row >= 0) {
+    /* Horizontal move */
+    col = parseInt(co.slice(1)) - 1;
+    dx = 1;
+  }
+  else {
+    /* Vertical move */
+    row = ROWIDS.indexOf(co.slice(-1));
+    col = parseInt(co) - 1;
+    dy = 1;
+  }
+  return { col: col, row: row, dx: dx, dy: dy };
+}
+
+export function valueOrK(value: number, breakpoint: number = 10000): string {
+  // Return a numeric value as a string, but in kilos (thousands)
+  // if it exceeds a breakpoint, in that case suffixed by "K"
+  const sign = value < 0 ? "-" : "";
+  value = Math.abs(value);
+  if (value < breakpoint)
+    return `${sign}${value}`;
+  value = Math.round(value / 1000);
+  return `${sign}${value}K`;
+}
+
+// SalesCloud stuff
+function doRegisterSalesCloud(i: any,s: any,o: any,g: any,r: any,a?:any,m?:any) {
+  i.SalesCloudObject=r;
+  i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments);};
+  i[r].l=1*(new Date() as any);
+  a=s.createElement(o);
+  m=s.getElementsByTagName(o)[0];
+  a.src=g;
+  m.parentNode.insertBefore(a,m);
+}
+
+export function registerSalesCloud() {
+  doRegisterSalesCloud(
+     window,
+     document,
+     'script',
+     'https://cdn.salescloud.is/js/salescloud.min.js',
+     'salescloud'
+  );
+}

package/src/mithril/wait.ts

@@ -0,0 +1,246 @@
+/*
+
+  Wait.ts
+
+  Code for the WaitDialog and AcceptDialog components,
+  used in the UI flow for timed games
+
+  Copyright (C) 2024 Miðeind ehf.
+  Original 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 { IView } from "./types";
+import { m, ComponentFunc } from "./mithril";
+import { mt, ts } from "./i18n";
+import { request } from "./request";
+import { DialogButton, OnlinePresence } from "./components";
+import { glyph } from "./util";
+import { attachFirebaseListener, detachFirebaseListener } from "./channel";
+
+export const WaitDialog: ComponentFunc<{
+  view: IView;
+  oppId: string;
+  oppNick: string;
+  oppName: string;
+  duration: number;
+  challengeKey: string;
+}> = (initialVnode) => {
+
+  // A dialog that is shown while the user waits for the opponent,
+  // who issued a timed game challenge, to be ready
+
+  const attrs = initialVnode.attrs;
+  const view = attrs.view;
+  const model = view.model;
+  const duration = attrs.duration;
+  const oppId = attrs.oppId;
+  const key = attrs.challengeKey;
+  let oppNick = attrs.oppNick;
+  let oppName = attrs.oppName;
+  let oppOnline = false;
+  const userId = model.state?.userId ?? "";
+  // Firebase path
+  const path = 'user/' + userId + "/wait/" + oppId;
+  // Flag set when the new game has been initiated
+  let pointOfNoReturn = false;
+
+  async function updateOnline() {
+    // Initiate an online check on the opponent
+    try {
+      if (!oppId || !key) return;
+      const json: { online: boolean; waiting: boolean; } = await request({
+        method: "POST",
+        url: "/initwait",
+        body: { opp: oppId, key }
+      });
+      // If json.waiting is false, the initiation failed
+      // and there is really no point in continuing to wait
+      if (json && json.online && json.waiting)
+        // The user is online
+        oppOnline = true;
+    }
+    catch(e) {
+    }
+  }
+
+  async function cancelWait() {
+    // Cancel a pending wait for a timed game
+    try {
+      await request({
+        method: "POST",
+        url: "/cancelwait",
+        body: {
+          user: userId,
+          opp: oppId,
+          key
+        }
+      });
+    }
+    catch(e) {
+    }
+  }
+
+  return {
+    oninit: () => {
+      if (!userId || !oppId) return; // Should not happen
+      updateOnline();
+      // Attach a Firebase listener to the wait path
+      attachFirebaseListener(path, (json: true | { game: string }) => {
+        if (json !== true && json.game) {
+          // A new game has been created and initiated by the server
+          pointOfNoReturn = true;
+          detachFirebaseListener(path);
+          // We don't need to pop the dialog; that is done automatically
+          // by the route resolver upon m.route.set()
+          // Navigate to the newly initiated game
+          m.route.set("/game/" + json.game);
+        }
+      });
+    },
+    view: () => {
+      return m(".modal-dialog",
+        { id: "wait-dialog", style: { visibility: "visible" } },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { "id": "wait-form" },
+          [
+            m(".chall-hdr",
+              m("table", 
+                m("tbody", 
+                  m("tr", [
+                    m("td", m("h1.chall-icon", glyph("time"))),
+                    m("td.l-border", [
+                      m(OnlinePresence, { id: "chall-online", userId: oppId, online: oppOnline }),
+                      m("h1", oppNick),
+                      m("h2", oppName)
+                    ])
+                  ])
+                )
+              )
+            ),
+            m(".wait-explain", [
+              mt("p", [
+                "Þú ert reiðubúin(n) að taka áskorun um viðureign með klukku, ",
+                m("strong", [ "2 x ", duration.toString(), ts(" mínútur.") ])
+              ]),
+              mt("p", [
+                "Beðið er eftir að áskorandinn ", m("strong", oppNick),
+                " sé ", oppOnline ? "" : mt("span#chall-is-online", "álínis og "), "til í tuskið."
+              ]),
+              mt("p", "Leikur hefst um leið og áskorandinn bregst við. Handahóf ræður hvor byrjar."),
+              mt("p", "Ef þér leiðist biðin geturðu hætt við og reynt aftur síðar.")
+            ]),
+            m(DialogButton,
+              {
+                id: "wait-cancel",
+                title: ts("Hætta við"),
+                onclick: (ev: Event) => {
+                  // Cancel the wait status and navigate back to the main page
+                  if (pointOfNoReturn) {
+                    // Actually, it's too late to cancel
+                    ev.preventDefault();
+                    return;
+                  }
+                  detachFirebaseListener(path);
+                  cancelWait();
+                  view.popDialog();
+                  ev.preventDefault();
+                }
+              },
+              glyph("remove")
+            )
+          ]
+        )
+      );
+    }
+  }
+};
+
+export const AcceptDialog: ComponentFunc<{
+  view: IView; oppId: string; oppNick: string; challengeKey: string;
+}> = (initialVnode) => {
+
+  // A dialog that is shown (usually briefly) while
+  // the user who originated a timed game challenge
+  // is linked up with her opponent and a new game is started
+
+  const attrs = initialVnode.attrs;
+  const view = attrs.view;
+  const model = view.model;
+  const oppId = attrs.oppId;
+  const key = attrs.challengeKey;
+  let oppNick = attrs.oppNick;
+  let oppReady = true;
+
+  async function waitCheck() {
+    // Initiate a wait status check on the opponent
+    try {
+      const json: { waiting: boolean; } = await request({
+        method: "POST",
+        url: "/waitcheck",
+        body: { user: oppId, key }
+      });
+      if (json?.waiting) {
+        // Both players are now ready: Start the timed game.
+        // The newGame() call switches to a new route (/game),
+        // and all open dialogs are thereby closed automatically.
+        model.newGame(oppId, true);
+      }
+      else
+        // Something didn't check out: keep the dialog open
+        // until the user manually closes it
+        oppReady = false;
+    }
+    catch(e) {
+    }
+  }
+
+  return {
+    oninit: () => waitCheck(),
+    view: () => {
+      return m(".modal-dialog",
+        { id: "accept-dialog", style: { visibility: "visible" } },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { id: "accept-form" },
+          [
+            m(".chall-hdr", 
+              m("table", 
+                m("tbody", 
+                  m("tr",
+                    [
+                      m("td", m("h1.chall-icon", glyph("time"))),
+                      m("td.l-border", m("h1", oppNick))
+                    ]
+                  )
+                )
+              )
+            ),
+            m("div", { "style": { "text-align": "center", "padding-top": "32px" }},
+              [
+                m("p", mt("strong", "Viðureign með klukku")),
+                mt("p",
+                  oppReady ? "Athuga hvort andstæðingur er reiðubúinn..."
+                  : ["Andstæðingurinn ", m("strong", oppNick), " er ekki reiðubúinn"]
+                )
+              ]
+            ),
+            m(DialogButton,
+              {
+                id: 'accept-cancel',
+                title: ts('Reyna síðar'),
+                onclick: (ev: Event) => {
+                  // Abort mission
+                  view.popDialog();
+                  ev.preventDefault();
+                }
+              },
+              glyph("remove")
+            )
+          ]
+        )
+      );
+    }
+  }
+};

package/src/mithril/wordcheck.ts

@@ -0,0 +1,102 @@
+/*
+
+  Wordcheck.ts
+
+  Wrapper for word checking and caching
+
+  Copyright (C) 2024 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 { requestMoves } from "./request";
+
+interface WordCheckResult {
+  word: string;
+  ok: boolean;
+  valid: [string, boolean][];
+}
+
+class WordChecker {
+
+  // Global cache for word check results. The cache is first indexed
+  // by locale, and then by word.
+
+  private wordCheckCache: Record<string, Record<string, boolean>> = {};
+
+  constructor() {}
+
+  ingestTwoLetterWords(locale: string, twoLetterWords: string[][]) {
+    // Initialize the cache with a list of known two-letter words
+    // The two-letter word list contains a list of entries where each
+    // entry is an initial letter followed by a list of two-letter words
+    // starting with that letter.
+    const cache = this.wordCheckCache[locale] ?? (this.wordCheckCache[locale] = {});
+    for (const [/* firstLetter */, wordList] of twoLetterWords) {
+      for (const word of wordList) {
+        cache[word] = true;
+      }
+    }
+  }
+
+  async checkWords(locale: string, words: string[]): Promise<boolean> {
+    // Return true if all words are valid in the given locale,
+    // or false otherwise. Lookups are cached for efficiency.
+    let cache = this.wordCheckCache[locale];
+    if (cache) {
+      let allValid = true;
+      for (const word of words) {
+        if (cache[word] === undefined) {
+          if (word.length === 2)
+            // Special case for two-letter words: if they are not
+            // in the cache, they are not valid - no roundtrip needed
+            return false;
+          // Word not found in cache; we need a server roundtrip
+          allValid = false;
+          break;
+        } else if (cache[word] === false) {
+          // Word is known to be invalid
+          return false;
+        }
+      }
+      if (allValid) {
+        // All words are known to be valid
+        return true;
+      }
+    }
+
+    // We need a server roundtrip
+    try {
+      const response = await requestMoves<WordCheckResult>({
+        url: "/wordcheck",
+        body: {
+          locale,
+          word: words[0],
+          words,
+        }
+      });
+      if (response?.word === words[0] && response?.valid) {
+        // Looks like a valid response
+        if (!cache) {
+          // We didn't already have a cache for this locale
+          cache = this.wordCheckCache[locale] = {};
+        }
+        // Harvest the returned data into the cache
+        for (const [word, result] of response.valid) {
+          cache[word] = result;
+        }
+      }
+      return !!response.ok;
+    }
+    catch (e) {
+    }
+    return false;
+  }
+}
+
+// Global word checker cache
+export const wordChecker = new WordChecker();

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "rollup.config.js"],
+  "compilerOptions": {
+    "target": "ES2018",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "lib": [
+      "dom",
+      "dom.iterable", 
+      "esnext"
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,12 @@
+
+import path from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig(
+{
+    resolve: {
+        alias: [
+            { find: '@', replacement: path.resolve(__dirname, 'src') }
+          ]
+    }
+});