@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/tabs.ts

@@ -0,0 +1,169 @@
+/*
+  Tabs.ts
+
+  Utility functions to set up tabbed views
+
+  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 { IView } from "./types";
+import { m } from "./mithril";
+import { getUrlVars } from "./util";
+
+const ROUTE_PREFIX = "/page#!";
+const ROUTE_PREFIX_LEN = ROUTE_PREFIX.length;
+
+export type TabVnode = m.VnodeDOM<
+  Record<string, any>,
+  {
+    selected: number;
+    lis: HTMLElement[];
+    ids: string[];
+  }
+>;
+
+export function makeTabs(view: IView, id: string, createFunc: ((vnode: TabVnode) => void) | undefined, wireHrefs: boolean, vnode: TabVnode) {
+  // When the tabs are displayed for the first time, wire'em up
+  let tabdiv = document.getElementById(id);
+  if (!tabdiv)
+    return;
+  // Add bunch of jQueryUI compatible classes
+  tabdiv.setAttribute("class", "ui-tabs ui-widget ui-widget-content ui-corner-all");
+  const tabul = document.querySelector("#" + id + " > ul");
+  if (tabul) {
+    tabul.setAttribute("class", "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all");
+    tabul.setAttribute("role", "tablist");
+  }
+  let tablist = document.querySelectorAll("#" + id + " > ul > li > a") as NodeListOf<HTMLElement>;
+  let tabitems = document.querySelectorAll("#" + id + " > ul > li") as NodeListOf<HTMLElement>;
+  let ids: string[] = [];
+  let lis: HTMLElement[] = []; // The <li> elements
+  // Iterate over the <a> elements inside the <li> elements inside the <ul>
+  for (let i = 0; i < tablist.length; i++) {
+    const href = tablist[i].getAttribute("href");
+    if (!href) continue;
+    ids.push(href.slice(1));
+    // Decorate the <a> elements
+    tablist[i].onclick = (ev) => { selectTab(vnode, i); ev.preventDefault(); };
+    tablist[i].removeAttribute("href");
+    tablist[i].setAttribute("class", "ui-tabs-anchor sp"); // Single-page marker
+    tablist[i].setAttribute("role", "presentation");
+    // Also decorate the <li> elements
+    lis.push(tabitems[i]);
+    tabitems[i].setAttribute("class", "ui-state-default ui-corner-top");
+    tabitems[i].setAttribute("role", "tab");
+    tabitems[i].onmouseover = (ev) => {
+      (ev.currentTarget as HTMLElement).classList.toggle("ui-state-hover", true);
+    };
+    tabitems[i].onmouseout = (ev) => {
+      (ev.currentTarget as HTMLElement).classList.toggle("ui-state-hover", false);
+    };
+    // Find the tab's content <div>
+    const tabcontent = document.getElementById(ids[i]);
+    // Decorate it
+    if (tabcontent) {
+      tabcontent.setAttribute("class", "ui-tabs-panel ui-widget-content ui-corner-bottom");
+      tabcontent.setAttribute("role", "tabpanel");
+    }
+  }
+  // Save the list of tab identifiers
+  vnode.state.ids = ids;
+  // Save the list of <li> elements
+  vnode.state.lis = lis;
+  // Select the first tab by default
+  vnode.state.selected = 0;
+  if (wireHrefs) {
+    // Wire all hrefs that point to single-page URLs
+    const model = view.model;
+    const clickURL = (ev: Event, href: string) => {
+      let uri = href.slice(ROUTE_PREFIX_LEN); // Cut the /page#!/ prefix off the route
+      let qix = uri.indexOf("?");
+      let route = (qix >= 0) ? uri.slice(0, qix) : uri;
+      let qparams = uri.slice(route.length + 1);
+      let params = qparams.length ? getUrlVars(qparams) : {};
+      m.route.set(route, params);
+      if (window.history)
+        window.history.pushState({}, "", href); // Enable the back button
+      ev.preventDefault();
+    };
+    const clickUserPrefs = (ev: Event) => {
+      if (model?.state?.userId)
+        // Don't show the userprefs if no user logged in
+        view.pushDialog("userprefs");
+      ev.preventDefault();
+    };
+    const clickTwoLetter = (ev: Event) => {
+      selectTab(vnode, 2); // Select tab number 2
+      ev.preventDefault();
+    };
+    const clickNewBag = (ev: Event) => {
+      selectTab(vnode, 3); // Select tab number 3
+      ev.preventDefault();
+    };
+    let anchors = tabdiv.querySelectorAll("a");
+    for (let i = 0; i < anchors.length; i++) {
+      let a = anchors[i];
+      let href = a.getAttribute("href");
+      if (href && href.slice(0, ROUTE_PREFIX_LEN) == ROUTE_PREFIX) {
+        // Single-page URL: wire it up (as if it had had an m.route.Link on it)
+        a.onclick = (ev) => clickURL(ev, href);
+      }
+      else
+        if (href && href === "$$userprefs$$") {
+          // Special marker indicating that this link invokes
+          // a user preference dialog
+          a.onclick = clickUserPrefs;
+        }
+        else
+          if (href && href === "$$twoletter$$") {
+            // Special marker indicating that this link invokes
+            // the two-letter word list or the opponents tab
+            a.onclick = clickTwoLetter;
+          }
+          else
+            if (href && href === "$$newbag$$") {
+              // Special marker indicating that this link invokes
+              // the explanation of the new bag
+              a.onclick = clickNewBag;
+            }
+    }
+  }
+  // If a createFunc was specified, run it now
+  if (createFunc)
+    createFunc(vnode);
+  // Finally, make the default tab visible and hide the others
+  updateTabVisibility(vnode);
+}
+
+function updateTabVisibility(vnode: TabVnode) {
+  // Shows the tab that is currently selected,
+  // i.e. the one whose index is in vnode.state.selected
+  const selected: number = vnode.state.selected;
+  const lis = vnode.state.lis;
+  vnode.state.ids.map((id: string, i: number) => {
+    document.getElementById(id)?.setAttribute("style", "display: " +
+      (i == selected ? "block" : "none"));
+    lis[i].classList.toggle("ui-tabs-active", i === selected);
+    lis[i].classList.toggle("ui-state-active", i === selected);
+  }
+  );
+}
+
+export function selectTab(vnode: TabVnode, i: number) {
+  // Selects the tab with the given index under the tab control vnode
+  vnode.state.selected = i;
+  updateTabVisibility(vnode);
+}
+
+export function updateSelection(vnode: TabVnode) {
+  // Select a tab according to the ?tab= query parameter in the current route
+  var tab = m.route.param("tab");
+  if (tab !== undefined)
+    selectTab(vnode, parseInt(tab) || 0);
+}

package/src/mithril/tile.ts

@@ -0,0 +1,145 @@
+/*
+
+  Tile.ts
+
+  Tile 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 { EXTRA_WIDE_LETTERS, IView, WIDE_LETTERS } from "./types";
+import { VnodeAttrs, ComponentFunc, m, MithrilMouseEvent, MithrilTouchEvent } from "./mithril";
+import { nbsp } from "./util";
+import { startDrag } from "./dragdrop";
+
+interface IAttributes {
+  view: IView;
+  coord: string;
+  opponent: boolean;
+}
+
+export const Tile: ComponentFunc<IAttributes> = (initialVnode) => {
+  // Display a tile on the board or in the rack
+  const { view, coord, opponent } = initialVnode.attrs;
+  const model = view.model;
+
+  const dragHandler = (ev: MithrilMouseEvent | MithrilTouchEvent) => {
+    // Start a drag-and-drop process, for mouse or touch interaction
+    startDrag(ev, (_, target) => {
+      // Drop handler
+      const game = model.game;
+      if (!game) return;
+      const id = target.id;
+      if (!id) return;
+      let targetCoord: string = "";
+      if (id === "board-background") {
+        // Drop on the background: transfer back to the rack
+        targetCoord = "R1";
+      } else if (id.startsWith("sq_")) {
+        // Drop on a board square
+        targetCoord = id.slice(3);
+      }
+      if (targetCoord) {
+        try {
+          game.attemptMove(coord, targetCoord);
+          view.updateScale();
+          // Make sure that Mithril draws the updated state
+          m.redraw();
+        } catch (e) {
+          // Something went wrong: display a console error
+          console.error(e);
+        }
+      }
+    });
+    ev.redraw = false;
+    return false;
+  };
+
+  return {
+    view: () => {
+      const game = model.game;
+      if (!game) return undefined;
+      const isRackTile = coord[0] === 'R';
+      // A single tile, on the board or in the rack
+      const t = game.tiles[coord];
+      let classes = [".tile"];
+      let attrs: VnodeAttrs = {};
+      if (t.tile === '?')
+        classes.push("blanktile");
+      if (EXTRA_WIDE_LETTERS.includes(t.letter))
+        // Extra wide letter: handle specially
+        classes.push("extra-wide");
+      else if (WIDE_LETTERS.includes(t.letter))
+        // Wide letter: handle specially
+        classes.push("wide");
+      if (isRackTile || t.draggable) {
+        // Rack tile, or at least a draggable one
+        classes.push(opponent ? "freshtile" : "racktile");
+        if (isRackTile && game.showingDialog === "exchange") {
+          // Rack tile, and we're showing the exchange dialog
+          if (t.xchg)
+            // Chosen as an exchange tile
+            classes.push("xchgsel");
+          // Exchange dialog is live: add a click handler for the
+          // exchange state
+          attrs.onclick = (ev: Event) => {
+            // Toggle the exchange status of this tile
+            t.xchg = !t.xchg;
+            ev.preventDefault();
+          };
+        }
+      }
+      if (t.freshtile) {
+        // A fresh tile on the board that has
+        // just been played by the opponent
+        classes.push("freshtile");
+      }
+      if (t.index) {
+        // Make fresh or highlighted tiles appear sequentally by animation
+        const ANIMATION_STEP = 150; // Milliseconds
+        const delay = (t.index * ANIMATION_STEP).toString() + "ms";
+        attrs.style = `animation-delay: ${delay}`;
+      }
+      if (coord === game.selectedSq)
+        // Currently selected square
+        classes.push("sel"); // Blinks red
+      if (t.highlight !== undefined) {
+        // highlight0 is the local player color
+        // highlight1 is the remote player color
+        classes.push("highlight" + t.highlight);
+        /*
+        if (t.player == parseInt(t.highlight))
+          // This tile was originally laid down by the other player
+          classes.push("dim");
+        */
+      }
+      if (game.showingDialog === null && !game.over) {
+        if (t.draggable) {
+          attrs.onmousedown = dragHandler;
+          attrs.ontouchstart = dragHandler;
+          /*
+          attrs.onclick = (ev: MouseEvent) => {
+            // When clicking a tile, make it selected (blinking)
+            if (coord === game.selectedSq)
+              // Clicking again: deselect
+              game.selectedSq = null;
+            else
+              game.selectedSq = coord;
+            ev.stopPropagation();
+            return false;
+          };
+          */
+        }
+      }
+      return m(classes.join("."), attrs,
+        [t.letter === " " ? nbsp() : t.letter, m(".letterscore", t.score)]
+      );
+    }
+  };
+}

package/src/mithril/twoletter.ts

@@ -0,0 +1,76 @@
+/*
+
+  Twoletter.ts
+
+  Two Letter Word display component
+
+  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 { IView } from "./types";
+import { Vnode, ComponentFunc, m, VnodeChildren } from "./mithril";
+import { ts } from "./i18n";
+
+interface IAttributes {
+  view: IView;
+}
+
+export const TwoLetter: ComponentFunc<IAttributes> = (initialVnode) => {
+
+  // The two-letter-word list tab
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  let page = 0;
+
+  function renderWord(bold: boolean, w: string): Vnode {
+    // For the first two-letter word in each group,
+    // render the former letter in bold
+    if (!bold)
+      return m(".twoletter-word", w);
+    if (page == 0)
+      return m(".twoletter-word", [m("b", w[0]), w[1]]);
+    else
+      return m(".twoletter-word", [w[0], m("b", w[1])]);
+  }
+
+  return {
+    view: () => {
+      if (!model.game) return;
+      const game = model.game;
+      const twoLetters = game.twoLetterWords();
+      const twoLetterWords = twoLetters[page];
+      const twoLetterList: VnodeChildren = [];
+      for (const tw of twoLetterWords) {
+        const twl = tw[1];
+        const sublist: VnodeChildren = [];
+        for (let j = 0; j < twl.length; j++)
+          sublist.push(renderWord(j == 0, twl[j]));
+        twoLetterList.push(
+          m(".twoletter-group", sublist)
+        );
+      }
+      return m(".twoletter",
+        {
+          // Switch between pages when clicked
+          onclick: () => { page = 1 - page; },
+          style: "z-index: 6" // Appear on top of board on mobile
+        },
+        // Show the requested page
+        m(".twoletter-area" + (game.showClock() ? ".with-clock" : ""),
+          {
+            title: page == 0 ?
+              ts("Smelltu til að raða eftir seinni staf") :
+              ts("Smelltu til að raða eftir fyrri staf")
+          },
+          twoLetterList
+        )
+      );
+    }
+  };
+};