@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/components.ts

@@ -0,0 +1,496 @@
+
+import { IView, UserListItem } from "./types";
+import { VnodeAttrs, Component, m, ComponentFunc, EventHandler, VnodeDOM, VnodeChildren } from "./mithril";
+import { AnimatedExploLogo, ExploLogoOnly } from "./logo";
+import { buttonOut, buttonOver, glyph, nbsp, playAudio } from "./util";
+import { ts } from "./i18n";
+import { request } from "./request";
+
+const SPINNER_INITIAL_DELAY = 800; // milliseconds
+
+export const Spinner: Component<
+  {},
+  {
+    ival: ReturnType<typeof setTimeout> | number;
+    show: boolean;
+  }
+> = {
+  // Show a spinner wait box, after an initial delay
+  oninit: (vnode) => {
+    vnode.state.show = false;
+    vnode.state.ival = setTimeout(() => {
+      vnode.state.show = true; vnode.state.ival = 0; m.redraw();
+    }, SPINNER_INITIAL_DELAY);
+  },
+  onremove: (vnode) => {
+    if (vnode.state.ival)
+      clearTimeout(vnode.state.ival);
+    vnode.state.ival = 0;
+  },
+  view: (vnode) => {
+    if (!vnode.state.show)
+      return undefined;
+    return m(
+      ".modal-dialog",
+      { id: 'spinner-dialog', style: { visibility: 'visible' } },
+      m("div.animated-spinner",
+        m(AnimatedExploLogo, { msStepTime: 200, width: 120, withCircle: true })
+      )
+    );
+  }
+};
+
+export const TextInput: ComponentFunc<{
+  initialValue: string;
+  class: string;
+  maxlength: number;
+  id: string;
+  tabindex?: number;
+  autocomplete?: string;
+}> = () => {
+
+  // Generic text input field
+
+  let value = "";
+  let cls = "";
+
+  return {
+    oninit: (vnode) => {
+      value = vnode.attrs.initialValue + "";
+      cls = vnode.attrs.class;
+      if (cls)
+        cls = "." + cls.split(" ").join(".");
+      else
+        cls = "";
+    },
+    view: (vnode) => {
+      const { id, maxlength, tabindex, autocomplete } = vnode.attrs;
+      return m("input.text" + cls,
+        {
+          id,
+          name: id,
+          maxlength,
+          tabindex,
+          autocomplete,
+          value,
+          oninput: (ev: Event) => { value = (ev.target as HTMLInputElement).value + ""; }
+        }
+      );
+    }
+  };
+
+}
+
+export const DialogButton: Component<{
+  id: string;
+  title: string;
+  onclick: EventHandler;
+  tabindex?: number;
+}> = {
+  view: (vnode) => {
+    const attrs: VnodeAttrs = {
+      onmouseout: buttonOut,
+      onmouseover: buttonOver
+    };
+    Object.assign(attrs, vnode.attrs);
+    return m(".modal-close", attrs, vnode.children);
+  }
+};
+
+export const ChallengeButton: Component<{
+  view: IView;
+  item: UserListItem;
+}> = {
+  view: (vnode) => {
+    const item = vnode.attrs.item;
+    const outerView = vnode.attrs.view;
+    const model = outerView.model;
+    const isRobot = item.userid.indexOf("robot-") === 0;
+
+    function modifyChallenge() {
+      if (item.chall) {
+        // Retracting challenge
+        item.chall = false;
+        // Note: the effect of this is to retract all challenges
+        // that this user has issued to the destination user
+        model.modifyChallenge({ destuser: item.userid, action: "retract" });
+      }
+      else if (isRobot) {
+          // Challenging a robot: game starts immediately
+          model.newGame(item.userid, false);
+      } else {
+          // Challenging a user: show a challenge dialog
+          outerView.pushDialog("challenge", item);
+      }
+    }
+
+    return m("span.list-ch",
+      {
+        title: ts("Skora á"),
+        onclick: (ev: Event) => {
+          modifyChallenge();
+          ev.preventDefault();
+        }
+      },
+      glyph("hand-right", undefined, !item.chall),
+    );
+  }
+};
+
+export const UserInfoButton: Component<{
+  view: IView;
+  item: { userid: string; nick: string; fullname: string; };
+}> = {
+  view: (vnode) => {
+    const item = vnode.attrs.item;
+    const outerView = vnode.attrs.view;
+    const isRobot = !item.userid || item.userid.indexOf("robot-") === 0;
+    return m("span.list-info",
+      {
+        title: ts("Skoða feril"),
+        // Show opponent track record
+        onclick: (ev: Event) => {
+          if (!isRobot)
+            outerView.showUserInfo(item.userid, item.nick, item.fullname);
+          ev.preventDefault();
+        }
+      },
+      isRobot ? "" : m("span.usr-info"),
+    );
+  }
+};
+
+export const OnlinePresence: ComponentFunc<{
+  id: string; userId: string; online?: boolean;
+}> = (initialVnode) => {
+
+  // Shows an icon in grey or green depending on whether a given user
+  // is online or not. If attrs.online is given (i.e. not undefined),
+  // that value is used and displayed; otherwise the server is asked.
+
+  const attrs = initialVnode.attrs;
+  let online = attrs.online ? true : false;
+  const askServer = attrs.online === undefined;
+  const id = attrs.id;
+  const userId = attrs.userId;
+
+  async function _update() {
+    if (askServer) {
+      const json = await request<{ online: boolean; }>({
+        method: "POST",
+        url: "/onlinecheck",
+        body: { user: userId }
+      });
+      online = json && json.online;
+    }
+  }
+
+  return {
+    oninit: _update,
+
+    view: (vnode) => {
+      if (!askServer)
+        // Display the state of the online attribute as-is
+        online = vnode.attrs?.online ?? false;
+      return m("span",
+        {
+          id: id,
+          title: online ? ts("Er álínis") : ts("Álínis?"),
+          class: online ? "online" : ""
+        }
+      );
+    }
+  };
+
+};
+
+export const UserId: Component<{ view: IView }> = {
+  // User identifier at top right, opens user preferences
+  view: (vnode) => {
+    const view = vnode.attrs.view;
+    const model = view.model;
+    if (!model.state?.userId)
+      // Don't show the button if there is no logged-in user
+      return "";
+    return m(".userid",
+      {
+        title: ts("player_info"), // "Player information"
+        onclick: (ev: Event) => {
+          // Overlay the userprefs dialog
+          view.pushDialog("userprefs");
+          ev.preventDefault();
+        }
+      },
+      [glyph("address-book"), nbsp(), model.state.userNick]
+    );
+  }
+};
+
+export const MultiSelection: ComponentFunc<{
+  initialSelection?: number;
+  defaultClass?: string;
+  selectedClass?: string;
+}> = (initialVnode) => {
+
+  // A multiple-selection div where users can click on child nodes
+  // to select them, giving them an addional selection class,
+  // typically .selected
+
+  let sel = initialVnode.attrs.initialSelection ?? 0;
+  const defaultClass = initialVnode.attrs.defaultClass ?? "";
+  const selectedClass = initialVnode.attrs.selectedClass || "selected";
+
+  return {
+    view: (vnode) => {
+      const children = vnode.children;
+      if (!Array.isArray(children)) return undefined;
+      return m("div",
+        {
+          onclick: (ev: Event) => {
+            // Catch clicks that are propagated from children up
+            // to the parent div. Find which child originated the
+            // click (possibly in descendant nodes) and set
+            // the current selection accordingly.
+            const childNodes = children.map((c) => (c as VnodeDOM).dom);
+            for (let i = 0; i < childNodes.length; i++)
+              if (childNodes[i].contains(ev.target as Node))
+                sel = i;
+            ev.stopPropagation();
+          }
+        },
+        children.map((item, i) => {
+          // A pretty gross approach, but it works: clobber the childrens' className
+          // attribute depending on whether they are selected or not
+          const it = item as m.Vnode<{ className: string }>;
+          if (i === sel)
+            it.attrs.className = defaultClass + " " + selectedClass;
+          else
+            it.attrs.className = defaultClass;
+          return item;
+        })
+      );
+    }
+  };
+
+};
+
+export const Info: Component = {
+  // Info icon, invoking the help screen
+  view: () => m(".info",
+    { title: ts("Upplýsingar og hjálp") },
+    m(m.route.Link,
+      { href: "/help", class: "iconlink" },
+      glyph("info-sign")
+    )
+  )
+};
+
+export const LeftLogo: Component = {
+  view: () => m(".logo",
+    m(m.route.Link,
+      { href: '/main', class: "nodecorate" },
+      m(ExploLogoOnly, { scale: 1.6 })
+    )
+  )
+};
+
+// A nice graphical toggler control
+
+interface ITogglerAttributes {
+  id: string;
+  state: boolean;
+  tabindex: number;
+  opt1: VnodeChildren;
+  opt2: VnodeChildren;
+  funcToggle?: (state: boolean) => void;
+  small?: boolean;
+  title?: string;
+}
+
+export const Toggler: ComponentFunc<ITogglerAttributes> = () => {
+
+  function doToggle(togglerId: string, funcToggle?: (state: boolean) => void) {
+    // Perform the toggling, on a mouse click or keyboard input (space bar)
+    const cls1 = document.querySelector("#" + togglerId + " #opt1")?.classList;
+    const cls2 = document.querySelector("#" + togglerId + " #opt2")?.classList;
+    cls1 && cls1.toggle("selected");
+    cls2 && cls2.toggle("selected");
+    if (funcToggle !== undefined && cls2)
+      // Toggling the switch and we have an associated function:
+      // call it with the boolean state of the switch
+      funcToggle(cls2.contains("selected"));
+  }
+
+  return {
+    view: ({attrs: { id, small, funcToggle, state, tabindex, title, opt1, opt2 }}) => {
+      const togglerId = id + "-toggler";
+      const optionClass = ".option" + (small ? ".small" : "");
+      return m.fragment({}, [
+        m("input.checkbox." + id,
+          {
+            type: "checkbox",
+            id: id,
+            name: id,
+            checked: state,
+            value: 'True'
+          }
+        ),
+        m(".toggler",
+          {
+            id: togglerId,
+            tabindex,
+            title,
+            onclick: (ev: Event) => {
+              doToggle(togglerId, funcToggle);
+              ev.preventDefault();
+            },
+            onkeypress: (ev: KeyboardEvent) => {
+              if (ev.key == " ") {
+                doToggle(togglerId, funcToggle);
+                ev.preventDefault();
+              }
+            }
+          },
+          [
+            m(optionClass + (state ? "" : ".selected"), { id: "opt1" }, opt1),
+            m(optionClass + (state ? ".selected" : ""), { id: "opt2" }, opt2)
+          ]
+        )
+      ]);
+    }
+  };
+};
+
+export const TogglerReady: ComponentFunc<{ view: IView }> = (initialVnode) => {
+  // Toggle on left-hand side of main screen:
+  // User ready and willing to accept challenges
+
+  const outerView = initialVnode.attrs.view;
+  const model = outerView.model;
+
+  function toggleFunc(state: boolean) {
+    if (model.state) {
+      model.state.ready = state;
+      model.setUserPref({ ready: state });
+    }
+  }
+
+  return {
+    view: () => m(Toggler, {
+      id: "ready",
+      state: model.state?.ready ?? false,
+      tabindex: 2,
+      opt1: nbsp(),
+      opt2: glyph("thumbs-up"),
+      funcToggle: toggleFunc,
+      small: true,
+      title: ts("Tek við áskorunum!"),
+    })
+  };
+};
+
+export const TogglerReadyTimed: ComponentFunc<{ view: IView }> = (initialVnode) => {
+  // Toggle on left-hand side of main screen:
+  // User ready and willing to accept timed challenges
+
+  const outerView = initialVnode.attrs.view;
+  const model = outerView.model;
+
+  function toggleFunc(state: boolean) {
+    if (model.state) {
+      model.state.readyTimed = state;
+      model.setUserPref({ ready_timed: state });
+    }
+  }
+
+  return {
+    view: () => m(Toggler, {
+      id: "timed",
+      state: model.state?.readyTimed ?? false,
+      tabindex: 3,
+      opt1: nbsp(),
+      opt2: glyph("time"),
+      funcToggle: toggleFunc,
+      small: true,
+      title: ts("Til í viðureign með klukku!"),
+    })
+  };
+};
+
+interface IBooleanAttributes {
+  view: IView;
+  state: boolean;
+  tabindex: number;
+}
+
+export const TogglerAudio: ComponentFunc<IBooleanAttributes> = () => {
+  // Toggle for audio on/off
+
+  function toggleFunc(state: boolean) {
+    if (state) playAudio("your-turn");
+  }
+
+  return {
+    view: ({attrs: { state, tabindex }}) => m(Toggler, {
+      id: "audio",
+      state,
+      tabindex,
+      opt1: glyph("volume-off"),
+      opt2: glyph("volume-up"),
+      funcToggle: toggleFunc,
+      small: true,
+      title: ts("Hljóð á/af"),
+    })
+  };
+};
+
+export const TogglerFanfare: ComponentFunc<IBooleanAttributes> = () => {
+  // Toggle for fanfare on/off
+
+  function toggleFunc(state: boolean) {
+    if (state) playAudio("you-win");
+  }
+
+  return {
+    view: ({attrs: { state, tabindex }}) => m(Toggler, {
+      id: "fanfare",
+      state,
+      tabindex,
+      opt1: glyph("volume-off"),
+      opt2: glyph("volume-up"),
+      funcToggle: toggleFunc,
+      small: true,
+      title: ts("Lúðraþytur á/af"),
+    })
+  };
+};
+
+export const TogglerBeginner: ComponentFunc<IBooleanAttributes> = () => {
+  // Toggle for beginner mode, on/off
+
+  return {
+    view: ({attrs: { state, tabindex }}) => m(Toggler, {
+      id: "beginner",
+      state,
+      tabindex,
+      opt1: nbsp(),
+      opt2: glyph("ok"),
+      small: true,
+    })
+  };
+};
+
+export const TogglerFairplay: ComponentFunc<IBooleanAttributes> = () => {
+  // Toggle for fairplay setting, on/off
+
+  return {
+    view: ({attrs: { state, tabindex }}) => m(Toggler, {
+      id: "fairplay",
+      state,
+      tabindex,
+      opt1: nbsp(),
+      opt2: glyph("edit"),
+      small: true,
+    })
+  };
+};

package/src/mithril/dragdrop.ts

@@ -0,0 +1,219 @@
+/*
+
+  Dragdrop.ts
+
+  Single page 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 module implements drag-and-drop functionality for rack tiles,
+  using custom handlers for mouse and touch events. Standard HTML5
+  drag-and-drop does not offer enough flexibility for our requirements.
+
+*/
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+type DropHandler = (draggedTile: HTMLElement, dropTarget: HTMLElement) => void;
+
+class DragManager {
+
+  // Global drag/drop state. Note that only one drag/drop operation
+  // can be active at each time.
+
+  draggedElement: HTMLElement;
+  parentElement: HTMLElement | null = null;
+  parentRect: DOMRect | null = null;
+  offsetX: number = 0;
+  offsetY: number = 0;
+  centerX: number = 0;
+  centerY: number = 0;
+  lastX: number = 0;
+  lastY: number = 0;
+  currentDropTarget: HTMLElement | null = null;
+  boundEventHandlers: { [key: string]: (e: MouseEvent | TouchEvent) => void };
+  dropHandler: DropHandler;
+
+  getEventCoordinates(e: MouseEvent | TouchEvent): Point {
+    if (e instanceof MouseEvent) {
+      return { x: e.clientX, y: e.clientY };
+    }
+    if (e instanceof TouchEvent) {
+      const touch = e.touches[0];
+      return touch ? { x: touch.clientX, y: touch.clientY } : { x: this.lastX, y: this.lastY };
+    }
+    return { x: 0, y: 0 };
+  }
+
+  static rectContains(rect: DOMRect, p: Point): boolean {
+    return (p.x >= rect.left) && (p.x < rect.right) && (p.y >= rect.top) && (p.y < rect.bottom);
+  }
+
+  constructor(e: MouseEvent | TouchEvent, dropHandler: DropHandler) {
+    e.preventDefault();
+    // Note: We use e.currentTarget here, not e.target, as we may be
+    // handling events that were originally targeted at a child element
+    // (such as the letter or score elements within a tile).
+    const dragged = e.currentTarget as HTMLElement;
+    const coords = this.getEventCoordinates(e);
+    this.lastX = coords.x;
+    this.lastY = coords.y;
+    this.draggedElement = dragged;
+    this.dropHandler = dropHandler;
+    this.parentElement = dragged.parentElement;
+    this.parentRect = this.parentElement?.getBoundingClientRect() ?? null;
+    // Find out the bounding rectangle of the element
+    // before starting to apply modifications
+    const rect = dragged.getBoundingClientRect();
+    const { offsetWidth: originalWidth, offsetHeight: originalHeight } = dragged;
+    // Add a class to the dragged element to indicate that it is being dragged.
+    // This may change its size and appearance.
+    dragged.classList.add("dragging");
+    // Make the dragged element an immediate child of the document body,
+    // allowing it to be dragged anywhere on the screen and not subject to
+    // clipping (overflow: hidden).
+    document.body.appendChild(dragged);
+    // Find out the dimensions of the element in its dragged state
+    const { offsetWidth, offsetHeight } = dragged;
+    // Offset of the click or touch within the dragged element
+    this.offsetX = coords.x - rect.left + (offsetWidth - originalWidth) / 2;
+    this.offsetY = coords.y - rect.top + (offsetHeight - originalHeight) / 2;
+    this.centerX = offsetWidth / 2;
+    this.centerY = offsetHeight / 2;
+    // Create bound event handlers that properly assign 'this'
+    this.boundEventHandlers = {
+      drag: this.drag.bind(this),
+      endDrag: this.endDrag.bind(this),
+    };
+    const { drag, endDrag } = this.boundEventHandlers;
+    if (e instanceof MouseEvent) {
+      document.addEventListener("mousemove", drag);
+      document.addEventListener("mouseup", endDrag);
+    } else if (e instanceof TouchEvent) {
+      document.addEventListener("touchmove", drag, { passive: false });
+      document.addEventListener("touchend", endDrag);
+    }
+    // Do an initial position update, as the size of the dragged element
+    // may have changed, and it should remain centered
+    this.updatePosition(coords.x, coords.y);
+  }
+
+  removeDragListeners(): void {
+    const { drag, endDrag } = this.boundEventHandlers;
+    document.removeEventListener("mousemove", drag);
+    document.removeEventListener("mouseup", endDrag);
+    document.removeEventListener("touchmove", drag);
+    document.removeEventListener("touchend", endDrag);
+  }
+
+  elementCenter(clientX: number, clientY: number): Point {
+    return {
+      x: clientX - this.offsetX + this.centerX,
+      y: clientY - this.offsetY + this.centerY,
+    };
+  }
+
+  findDropTargetAtPoint(x: number, y: number): HTMLElement | null {
+    // Look for a drop target element at the given coordinates.
+    // A drop target is identified by the 'drop-target' class.
+    // To stop the search at a particular type of element,
+    // such as a previously played board tile, mark it with
+    // the 'not-target' class.
+    const { x: centerX, y: centerY } = this.elementCenter(x, y);
+    for (const el of document.elementsFromPoint(centerX, centerY)) {
+      if (el.classList.contains("drop-target")) {
+        return el as HTMLElement;
+      }
+      if (el.classList.contains("not-target")) {
+        // To stop the search at a particular type of element,
+        // such as a previously played board tile, mark it with
+        // the 'not-target' class.
+        return null;
+      }
+    }
+    return null;
+  }
+
+  updatePosition(clientX: number, clientY: number): void {
+    this.lastX = clientX;
+    this.lastY = clientY;
+    this.draggedElement.style.left = `${clientX - this.offsetX}px`;
+    this.draggedElement.style.top = `${clientY - this.offsetY}px`;
+  }
+
+  updateDropTarget(x: number, y: number): void {
+    const dropTarget = this.findDropTargetAtPoint(x, y);
+    if (dropTarget === this.currentDropTarget) return;
+    if (this.currentDropTarget) {
+      this.currentDropTarget.classList.remove("over");
+    }
+    if (dropTarget) {
+      // The element is droppable here
+      dropTarget.classList.add("over");
+    }
+    this.currentDropTarget = dropTarget;
+  }
+
+  drag(e: MouseEvent | TouchEvent): void {
+    e.preventDefault();
+    const coords = this.getEventCoordinates(e);
+    // Update position for both mouse and touch events
+    this.updatePosition(coords.x, coords.y);
+    this.updateDropTarget(coords.x, coords.y);
+    // If a drop is not allowed, add the "no-drop" class
+    // to the dragged element. However, a hack applies:
+    // if the dragged element is still over its original
+    // parent element, we show the drop as allowed in any case.
+    const allowDrop = (
+      (this.currentDropTarget !== null) ||
+      (this.parentRect && DragManager.rectContains(this.parentRect, coords))
+    );
+    this.draggedElement.classList.toggle(
+      "no-drop",
+      !allowDrop,
+    );
+  }
+
+  resetPosition(): void {
+    this.draggedElement.style.left = "";
+    this.draggedElement.style.top = "";
+    this.draggedElement.classList.remove("dragging", "no-drop");
+    if (this.parentElement) {
+      // Restore the original parent of the dragged element
+      this.parentElement.appendChild(this.draggedElement);
+    }
+  }
+
+  endDrag(e: MouseEvent | TouchEvent): void {
+    e.preventDefault();
+    const coords = this.getEventCoordinates(e);
+    const dropTarget = this.findDropTargetAtPoint(coords.x, coords.y);
+    if (this.currentDropTarget) {
+      this.currentDropTarget.classList.remove("over");
+    }
+    this.removeDragListeners();
+    // Avoid flicker by hiding the element while we are manipulating its
+    // position in the DOM tree and completing the drop operation
+    this.draggedElement.style.visibility = "hidden";
+    this.resetPosition();
+    if (dropTarget) {
+      // Complete the drop operation by calling the provided handler
+      this.dropHandler(this.draggedElement, dropTarget);
+    }
+    setTimeout(() => {
+      this.draggedElement.style.visibility = "visible";
+    });
+  }
+}
+
+export const startDrag = (e: MouseEvent | TouchEvent, dropHandler: DropHandler): void => {
+  new DragManager(e, dropHandler);
+};