@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/playername.ts

@@ -0,0 +1,91 @@
+/*
+
+  Playername.ts
+
+  Player name 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 { IGame, IView } from "./types";
+import { ComponentFunc, m } from "./mithril";
+import { glyph, nbsp } from "./util";
+
+interface IAttributes {
+  view: IView;
+  side: string;
+}
+
+export const PlayerName: ComponentFunc<IAttributes> = (initialVnode) => {
+  // Displays a player name, handling both human and robot players
+  // as well as left and right side, and local and remote colors
+  const { view } = initialVnode.attrs;
+  const model = view.model;
+
+  function lookAtPlayer(game: IGame, ev: Event, player: number | null, side: number) {
+    if (!(model.state?.uiFullscreen))
+      // Don't do anything on mobile, and allow the click
+      // to propagate to the parent
+      return;
+    if (player === side) {
+      // The player is clicking on himself:
+      // overlay a user preference dialog
+      view.pushDialog("userprefs");
+    }
+    else if (!game.autoplayer[side]) {
+      // Clicking on another human player: show their track record
+      view.showUserInfo(
+        game.userid[side],
+        game.nickname[side],
+        game.fullname[side]
+      );
+    }
+    ev.stopPropagation();
+    ev.preventDefault();
+  }
+
+  return {
+    view: (vnode) => {
+      const game = model.game;
+      if (!game) return undefined;
+      const apl0 = game.autoplayer[0];
+      const apl1 = game.autoplayer[1];
+      const nick0 = game.nickname[0];
+      const nick1 = game.nickname[1];
+      const player = game.player;
+      const localturn = game.localturn;
+      const gameover = game.over;
+      const side = vnode.attrs.side;
+      if (side == "left") {
+        // Left side player
+        if (apl0)
+          // Player 0 is a robot (autoplayer)
+          return m(".robot-btn.left", [glyph("cog"), nbsp(), nick0]);
+        const tomove = gameover || (localturn !== (player === 0)) ? "" : ".tomove";
+        return m(
+          ".player-btn.left" + tomove,
+          { id: "player-0", onclick: (ev: Event) => lookAtPlayer(game, ev, player, 0) },
+          [m("span.left-to-move"), nick0]
+        );
+      }
+      else {
+        // Right side player
+        if (apl1)
+          // Player 1 is a robot (autoplayer)
+          return m(".robot-btn.right", [glyph("cog"), nbsp(), nick1]);
+        const tomove = gameover || (localturn !== (player === 1)) ? "" : ".tomove";
+        return m(
+          ".player-btn.right" + tomove,
+          { id: "player-1", onclick: (ev: Event) => lookAtPlayer(game, ev, player, 1) },
+          [m("span.right-to-move"), nick1]
+        );
+      }
+    }
+  };
+};

package/src/mithril/promodialog.ts

@@ -0,0 +1,82 @@
+/*
+
+  PromoDialog.ts
+
+  Promotion dialog 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 { ComponentFunc, m, VnodeDOM } from "./mithril";
+import { buttonOut, buttonOver } from "./util";
+
+interface IAttributes {
+  view: IView;
+  kind: string;
+  initFunc: () => void;
+}
+
+export const PromoDialog: ComponentFunc<IAttributes> = (initialVnode) => {
+
+  // A dialog showing promotional content fetched from the server
+
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  let html = "";
+
+  function _fetchContent(vnode: typeof initialVnode) {
+    // Fetch the content
+    model.loadPromoContent(
+      vnode.attrs.kind, (contentHtml) => { html = contentHtml; }
+    );
+  }
+
+  function _onUpdate(vnode: VnodeDOM, initFunc: () => void) {
+    var noButtons = vnode.dom.getElementsByClassName("btn-promo-no") as HTMLCollectionOf<HTMLElement>;
+    // Override onclick, onmouseover and onmouseout for No buttons
+    for (let i = 0; i < noButtons.length; i++) {
+      noButtons[i].onclick = () => view.popDialog();
+      noButtons[i].onmouseover = buttonOver;
+      noButtons[i].onmouseout = buttonOut;
+    }
+    // Override onmouseover and onmouseout for Yes buttons
+    var yesButtons = vnode.dom.getElementsByClassName("btn-promo-yes") as HTMLCollectionOf<HTMLElement>;
+    for (let i = 0; i < yesButtons.length; i++) {
+      yesButtons[i].onmouseover = buttonOver;
+      yesButtons[i].onmouseout = buttonOut;
+    }
+    // Run an initialization function, if specified
+    if (initFunc !== undefined)
+      initFunc();
+  }
+
+  return {
+
+    oninit: _fetchContent,
+
+    view: (vnode) => {
+      let initFunc = vnode.attrs.initFunc;
+      return m(".modal-dialog",
+        { id: "promo-dialog", style: { visibility: "visible" } },
+        m(".ui-widget.ui-widget-content.ui-corner-all",
+          { id: "promo-form", className: "promo-" + vnode.attrs.kind },
+          m("div",
+            {
+              id: "promo-content",
+              onupdate: (vnode) => _onUpdate(vnode, initFunc)
+            },
+            m.trust(html)
+          )
+        )
+      );
+    }
+  };
+
+};

package/src/mithril/recentlist.ts

@@ -0,0 +1,148 @@
+/*
+
+  Recentlist.ts
+
+  List of recent games 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, RecentListItem } from "./types";
+import { ts } from "./i18n";
+import { ComponentFunc, VnodeChildren, m } from "./mithril";
+import { gameUrl, glyph, glyphGrayed, nbsp } from "./util";
+
+interface IAttributes {
+  view: IView;
+  recentList: RecentListItem[];
+  id: string;
+}
+
+export const RecentList: ComponentFunc<IAttributes> = () => {
+  // Shows a list of recent games, stored in vnode.attrs.recentList
+
+  function itemize(item: RecentListItem, i: number): VnodeChildren {
+
+    // Generate a list item about a recently completed game
+
+    function durationDescription(): VnodeChildren {
+      // Format the game duration
+      let duration: VnodeChildren = "";
+      if (!item.duration) {
+        // Regular (non-timed) game
+        if (item.days || item.hours || item.minutes) {
+          if (item.days > 1)
+            duration = item.days.toString() + ts(" dagar");
+          else
+            if (item.days == 1)
+              duration = ts("1 dagur");
+          if (item.hours > 0) {
+            if (duration.length)
+              duration += ts(" og ");
+            if (item.hours == 1)
+              duration += ts("1 klst");
+            else
+              duration += item.hours.toString() + ts(" klst");
+          }
+          if (item.days === 0) {
+            if (duration.length)
+              duration += ts(" og ");
+            if (item.minutes == 1)
+              duration += ts("1 mínúta");
+            else
+              duration += item.minutes.toString() + ts(" mínútur");
+          }
+        }
+      }
+      else {
+        // This was a timed game
+        duration = [
+          m("span.timed-btn", { title: ts('Viðureign með klukku') }),
+          " 2 x " + item.duration + ts(" mínútur")
+        ];
+      }
+      return duration;
+    }
+
+    // Show the Elo point adjustments resulting from the game
+    let eloAdj: VnodeChildren = item.elo_adj ? item.elo_adj.toString() : "";
+    let eloAdjHuman: VnodeChildren = item.human_elo_adj ? item.human_elo_adj.toString() : "";
+    let eloAdjClass = "";
+    let eloAdjHumanClass = "";
+    // Find out the appropriate class to use depending on the adjustment sign
+    if (item.elo_adj !== null) {
+      if (item.elo_adj > 0) {
+        eloAdj = "+" + eloAdj;
+        eloAdjClass = "elo-win";
+      }
+      else
+      if (item.elo_adj < 0)
+        eloAdjClass = "elo-loss";
+      else {
+        eloAdjClass = "elo-neutral";
+        eloAdj = glyph("stroller", { title: 'Byrjandi' });
+      }
+    if (item.human_elo_adj !== null)
+      if (item.human_elo_adj > 0) {
+        eloAdjHuman = "+" + eloAdjHuman;
+        eloAdjHumanClass = "elo-win";
+      }
+      else
+      if (item.human_elo_adj < 0)
+        eloAdjHumanClass = "elo-loss";
+      else {
+        eloAdjHumanClass = "elo-neutral";
+        eloAdjHuman = glyph("stroller", { title: 'Byrjandi' });
+      }
+    }
+    eloAdj = m("span",
+      { class: 'elo-btn right ' + eloAdjClass + (eloAdj == "" ? " invisible" : "") },
+      eloAdj
+    );
+    eloAdjHuman = m("span",
+      { class: 'elo-btn left ' + eloAdjHumanClass + (eloAdjHuman == "" ? " invisible" : "") },
+      eloAdjHuman
+    );
+
+    return m(".listitem" + (i % 2 === 0 ? ".oddlist" : ".evenlist"),
+      m(m.route.Link,
+        // Clicking on the link opens up the game
+        { href: gameUrl(item.url) },
+        [
+          m("span.list-win",
+            item.sc0 >= item.sc1 ?
+              glyph("bookmark", { title: item.sc0 == item.sc1 ? ts("Jafntefli") : ts("Sigur") }) :
+              glyphGrayed("bookmark", { title: ts("Tap") })
+          ),
+          m("span.list-ts-short", item.ts_last_move),
+          m("span.list-nick",
+            item.opp_is_robot ? [glyph("cog"), nbsp(), item.opp] : item.opp
+          ),
+          m("span.list-s0", item.sc0),
+          m("span.list-colon", ":"),
+          m("span.list-s1", item.sc1),
+          m("div.list-elo-adj", eloAdjHuman),
+          m("div.list-elo-adj", eloAdj),
+          m("span.list-duration", durationDescription()),
+          m("span.list-manual",
+            item.manual ? { title: ts("Keppnishamur") } : {},
+            glyph("lightbulb", undefined, !item.manual)
+          )
+        ]
+      )
+    );
+  }
+
+  return {
+    view: (vnode) => {
+      const list = vnode.attrs.recentList;
+      return m("div", { id: vnode.attrs.id }, !list ? "" : list.map(itemize));
+    }
+  };
+};

package/src/mithril/request.ts

@@ -0,0 +1,52 @@
+
+import m, { RequestOptions } from "mithril";
+
+let BACKEND_SERVER_PREFIX = "http://127.0.0.1:3000"; // Default for development
+let MOVES_SERVER_PREFIX = "https://moves-dot-explo-dev.appspot.com"; // Default for development
+let MOVES_ACCESS_KEY = "None";
+
+export const setServerUrl = (backendUrl: string, movesUrl: string, movesAccessKey: string) => {
+  // If the last character of the url is a slash, cut it off,
+  // since path URLs always start with a slash
+  const cleanupUrl = (url: string) => {
+    if (url.length > 0 && url[url.length - 1] === "/") {
+      url = url.slice(0, -1);
+    }
+    return url;
+  };
+  if (backendUrl)
+    BACKEND_SERVER_PREFIX = cleanupUrl(backendUrl);
+  if (movesUrl)
+    MOVES_SERVER_PREFIX = cleanupUrl(movesUrl);
+  if (movesAccessKey)
+    MOVES_ACCESS_KEY = movesAccessKey;
+}
+
+export const serverUrl = (path: string): string => {
+  return `${BACKEND_SERVER_PREFIX}${path}`;
+};
+
+export const request = <T>(options: RequestOptions<T> & { url: string }) => {
+  // Call the default service on the Google App Engine backend
+  return m.request<T>({
+    withCredentials: true,
+    ...options,
+    url: serverUrl(options.url),
+  });
+};
+
+export const requestMoves = <T>(options: RequestOptions<T> & { url: string }) => {
+  // Call the moves service on the Google App Engine backend
+  const headers = {
+    "Content-Type": "application/json; charset=UTF-8",
+    Authorization: `Bearer ${MOVES_ACCESS_KEY}`,
+    ...options?.headers,
+  };
+  return m.request<T>({
+    withCredentials: false,
+    method: "POST",
+    ...options,
+    url: `${MOVES_SERVER_PREFIX}${options.url}`,
+    headers,
+  });
+};