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

package/src/mithril/tabs.ts

@@ -1,169 +0,0 @@
-/*
-  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

@@ -1,145 +0,0 @@
-/*
-
-  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 } = 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: (vnode) => {
-      const { opponent } = vnode.attrs;
-      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();
-          };
-        }
-      } else 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

@@ -1,76 +0,0 @@
-/*
-
-  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
-        )
-      );
-    }
-  };
-};