@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/rightcolumn.ts

@@ -0,0 +1,398 @@
+/*
+
+  Rightcolumn.ts
+
+  Right column of board view 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 { ts } from "./i18n";
+import { gameUrl, glyph, nbsp, scrollMovelistToBottom } from "./util";
+import { VnodeChildren, ComponentFunc, m } from "./mithril";
+import { ExploLogoOnly } from "./logo";
+import { PlayerName } from "./playername";
+import { TwoLetter } from "./twoletter";
+import { Chat } from "./chat";
+import { Bag } from "./bag";
+import { MoveListItem } from "./movelistitem";
+
+interface IAttributes {
+  view: IView;
+}
+
+const Movelist: ComponentFunc<IAttributes> = (initialVnode) => {
+  // The move list tab
+
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  const game = model.game;
+  const state = model.state;
+
+  function movelist(): VnodeChildren {
+    let mlist = game ? game.moves : []; // All moves made so far in the game
+    let r: VnodeChildren = [];
+    let leftTotal = 0;
+    let rightTotal = 0;
+    for (let i = 0; i < mlist.length; i++) {
+      let move = mlist[i];
+      let [player, [co, tiles, score]] = move;
+      if (player === 0)
+        leftTotal = Math.max(leftTotal + score, 0);
+      else
+        rightTotal = Math.max(rightTotal + score, 0);
+      const n = m(MoveListItem,
+        {
+          view,
+          move,
+          info: {
+            key: i.toString(),
+            leftTotal: leftTotal, rightTotal: rightTotal,
+            player: player, co: co, tiles: tiles, score: score
+          }
+        }
+      );
+      r.push(n);
+    }
+    return r;
+  }
+
+  const bag = game ? game.bag : "";
+  const newbag = game ? game.newbag : true;
+  return {
+    view: () => m(".movelist-container",
+      [
+        m(".movelist",
+          {
+            onupdate: () => { setTimeout(scrollMovelistToBottom); }
+          },
+          movelist()
+        ),
+        // Show the bag here on mobile
+        state?.uiFullscreen ? "" : m(Bag, { bag, newbag })
+      ]
+    )
+  };
+};
+
+const Games: ComponentFunc<IAttributes> = (initialVnode) => {
+  // The game list tab
+
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+
+  function games(): VnodeChildren {
+    let r: VnodeChildren = [];
+    if (model.loadingGameList)
+      return r;
+    let gameList = model.gameList;
+    if (gameList === undefined)
+      // Game list is being loaded
+      return r;
+    if (gameList === null) {
+      // No games to show now, but we'll load them
+      // and they will be automatically refreshed when ready
+      model.loadGameList();
+      return r;
+    }
+    const game = model.game;
+    const gameId = game ? game.uuid : "";
+    for (let item of gameList) {
+      if (item.uuid == gameId)
+        continue; // Don't show this game
+      if (!item.my_turn && !item.zombie)
+        continue; // Only show pending games
+      let opp: VnodeChildren;
+      if (item.oppid === null)
+        // Mark robots with a cog icon
+        opp = [glyph("cog"), nbsp(), item.opp];
+      else
+        opp = [item.opp];
+      let winLose = item.sc0 < item.sc1 ? ".losing" : "";
+      let title = "Staðan er " + item.sc0 + ":" + item.sc1;
+      // Add the game-timed class if the game is a timed game.
+      // These will not be displayed in the mobile UI.
+      r.push(
+        m(".games-item" + (item.timed ? ".game-timed" : ""),
+          { key: item.uuid, title: title },
+          m(m.route.Link,
+            { href: gameUrl(item.url) },
+            [
+              m(".at-top-left", m(".tilecount", m(".oc", opp))),
+              m(".at-top-left",
+                m(".tilecount.trans",
+                  m(".tc" + winLose, { style: { width: item.tile_count.toString() + "%" } }, opp)
+                )
+              )
+            ]
+          )
+        )
+      );
+    }
+    return r;
+  }
+
+  return {
+    view: () => m(".games", { style: "z-index: 6" }, games())
+  };
+};
+
+interface ITabAttributes {
+  game: IGame;
+  tabid: string;
+  title: string;
+  icon: string;
+  alert?: boolean;
+  funcSel?: () => void;
+}
+
+const Tab: ComponentFunc<ITabAttributes> = (initialVnode) => {
+  // A clickable tab for the right-side area content
+  const game = initialVnode.attrs.game;
+  return {
+    view: (vnode) => {
+      const { tabid, title, icon, alert, funcSel } = vnode.attrs;
+      const sel = game?.sel || "movelist";
+      return m(".right-tab" + (sel === tabid ? ".selected" : ""),
+        {
+          id: "tab-" + tabid,
+          className: alert ? "alert" : "",
+          title: title,
+          onclick: (ev: Event) => {
+            // Select this tab
+            if (game && game.showingDialog === null) {
+              if (game.setSelectedTab(tabid)) {
+                // A new tab was actually selected
+                funcSel && funcSel();
+                if (tabid === "movelist")
+                  setTimeout(scrollMovelistToBottom);
+              }
+            }
+            ev.preventDefault();
+          }
+        },
+        glyph(icon)
+      );
+    }
+  };
+};
+
+const TabGroup: ComponentFunc<{ game: IGame }> = () => {
+  return {
+    view: (vnode) => {
+      // A group of clickable tabs for the right-side area content
+      const game = vnode.attrs.game;
+      let showchat = !(game.autoplayer[0] || game.autoplayer[1]);
+      const r: VnodeChildren = [
+        m(Tab, { game, tabid: "board", title: ts("Borðið"), icon: "grid" }),
+        m(Tab, { game, tabid: "movelist", title: ts("Leikir"), icon: "show-lines" }),
+        m(Tab, { game, tabid: "twoletter", title: ts("Tveggja stafa orð"), icon: "life-preserver" }),
+        m(Tab, { game, tabid: "games", title: ts("Viðureignir"), icon: "flag" }),
+      ];
+      if (showchat) {
+        // Add chat tab
+        r.push(
+          m(Tab, {
+            game,
+            tabid: "chat",
+            title: ts("Spjall"),
+            icon: "conversation",
+            funcSel: () => {
+              // The tab has been clicked
+              if (game.markChatShown())
+                // ...and now the user has seen all chat messages up until now
+                m.redraw();
+            },
+            // Show chat icon in red if any chat messages have not been seen
+            // and the chat tab is not already selected
+            alert: !game.chatSeen && game.sel != "chat"
+          })
+        );
+      }
+      return m.fragment({}, r);
+    }
+  };
+};
+
+export const RightColumn: ComponentFunc<IAttributes> = (initialVnode) => {
+  // A container for the right-side header and area components
+
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  const game = model.game;
+
+  function vwClock(): VnodeChildren {
+    // Show clock data if this is a timed game
+    if (!game || !game.showClock())
+      // Not a timed game, or a game that is completed
+      return m.fragment({}, []);
+
+    function vwClockFace(cls: string, txt: string, runningOut: boolean, blinking: boolean): VnodeChildren {
+      return m("h3." + cls
+        + (runningOut ? ".running-out" : "")
+        + (blinking ? ".blink" : ""),
+        txt
+      );
+    }
+
+    return m.fragment({}, [
+      vwClockFace("clockleft", game.clockText0, game.runningOut0, game.blinking0),
+      vwClockFace("clockright", game.clockText1, game.runningOut1, game.blinking1),
+      m(".clockface", glyph("time"))
+    ]);
+  }
+
+  function vwRightHeading(): VnodeChildren {
+    // The right-side heading on the game screen
+
+    const fairplay = game ? game.fairplay : false;
+    const player = game ? game.player : null;
+    const sc0 = game ? game.displayScore(0).toString() : "";
+    const sc1 = game ? game.displayScore(1).toString() : "";
+    return m(".heading",
+      [
+        // The header-logo is not displayed in fullscreen
+        m(".logowrapper",
+          m(".header-logo",
+            m(m.route.Link,
+              {
+                href: "/page",
+                class: "backlink"
+              },
+              m(ExploLogoOnly)
+            )
+          )
+        ),
+        m(".playerwrapper", [
+          m(".leftplayer" + (player === 1 ? ".autoplayercolor" : ".humancolor"), [
+            m(".player", m(PlayerName, { view, side: "left" })),
+            m(".scorewrapper", m(".scoreleft", sc0)),
+          ]),
+          m(".rightplayer" + (player === 1 ? ".humancolor" : ".autoplayercolor"), [
+            m(".player", m(PlayerName, { view, side: "right" })),
+            m(".scorewrapper", m(".scoreright", sc1)),
+          ]),
+          m(".fairplay",
+            { style: { visibility: fairplay ? "visible" : "hidden" } },
+            m("span.fairplay-btn.large", { title: ts("Skraflað án hjálpartækja") })
+          )
+        ]),
+        vwClock(),
+      ]
+    );
+  }
+
+  function vwRightArea(): VnodeChildren {
+    // A container for the tabbed right-side area components
+    if (!game) return undefined;
+    const sel = game.sel || "movelist";
+    // Show the chat tab unless the opponent is an autoplayer
+    let component: VnodeChildren;
+    switch (sel) {
+      case "movelist":
+        component = m(Movelist, { view });
+        break;
+      case "twoletter":
+        component = m(TwoLetter, { view });
+        break;
+      case "chat":
+        component = m(Chat, { view });
+        break;
+      case "games":
+        component = m(Games, { view });
+        break;
+      default:
+        break;
+    }
+    const tabgrp: VnodeChildren = m(TabGroup, { game });
+    return m(".right-area" + (game?.showClock() ? ".with-clock" : ""),
+      component ? [tabgrp, component] : [tabgrp]
+    );
+  }
+
+  function vwRightMessage(): VnodeChildren {
+    // Display a status message in the mobile UI
+    if (!game) return undefined;
+    const s = game.buttonState();
+    let msg: string | any[] = "";
+    const player = game.player;
+    const opp = player === null ? "" : game.nickname[1 - player];
+    const move = game.moves.length ? game.moves[game.moves.length - 1] : undefined;
+    const mtype = move ? move[1][1] : undefined;
+    if (s.congratulate) {
+      // This player won
+      if (mtype == "RSGN")
+        msg = [m("strong", [opp, " resigned!"]), " Congratulations."];
+      else
+        msg = [m("strong", ["You beat ", opp, "!"]), " Congratulations."];
+    } else if (s.gameOver) {
+      // This player lost
+      msg = "Game over!";
+    } else if (!s.localTurn) {
+      // It's the opponent's turn
+      msg = ["It's ", opp, "'s turn. Plan your next move!"];
+    } else if (s.tilesPlaced) {
+      if (game.currentScore === undefined) {
+        if (move === undefined)
+          msg = ["Your first move must cover the ", glyph("target"), " start square."];
+        else
+          msg = "Tiles must be consecutive.";
+      } else if (game.wordGood === false) {
+        msg = ["Move is not valid, but would score ", m("strong", game.currentScore.toString()), " points."];
+      } else {
+        msg = ["Valid move, score ", m("strong", game.currentScore.toString()), " points."];
+      }
+    } else if (move === undefined) {
+      // Initial move
+      msg = [m("strong", "You start!"), " Cover the ", glyph("star"), " asterisk with your move."];
+    }
+    else {
+      const co = move[1][0];
+      let tiles = mtype || "";
+      const score = move[1][2];
+      if (co === "") {
+        // Not a regular tile move
+        if (tiles === "PASS")
+          msg = [opp, " passed."];
+        else if (tiles.indexOf("EXCH") === 0) {
+          const numtiles = tiles.slice(5).length;
+          msg = [
+            opp, " exchanged ",
+            numtiles.toString(),
+            (numtiles === 1 ? " tile" : " tiles"),
+            "."
+          ];
+        } else if (tiles === "CHALL") {
+          msg = [opp, " challenged your move."];
+        } else if (tiles === "RESP") {
+          if (score < 0)
+            msg = [opp, " successfully challenged your move."];
+          else
+            msg = [opp, " unsuccessfully challenged your move and lost 10 points."];
+        }
+      }
+      else {
+        // Regular tile move
+        tiles = tiles.split("?").join(""); /* TBD: Display wildcard characters differently? */
+        msg = [opp, " played ", m("strong", tiles),
+          " for ", m("strong", score.toString()), " points"];
+      }
+    }
+    return m(".message", msg);
+  }
+
+  return {
+    view: () => m(".rightcol", [
+      vwRightHeading(),
+      vwRightArea(),
+      /* vwRightMessage(), */
+    ])
+  };
+};

package/src/mithril/searchbutton.ts

@@ -0,0 +1,118 @@
+/*
+
+  Searchbutton.ts
+
+  Search button 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 { ts } from "./i18n";
+import { ComponentFunc, m } from "./mithril";
+import { glyph, nbsp } from "./util";
+
+interface IAttributes {
+  view: IView;
+}
+
+export const SearchButton: ComponentFunc<IAttributes> = (initialVnode) => {
+
+  // A combination of a button and pattern entry field
+  // for user search
+
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  let spec = ""; // The current search pattern
+  let promise: { result: boolean; p: Promise<boolean>; } | undefined = undefined;
+
+  function newSearch() {
+    // There may have been a change of search parameters: react
+    if (promise !== undefined) {
+      // There was a previous promise, now obsolete: make it
+      // resolve without action
+      promise.result = false;
+      promise = undefined;
+    }
+    let sel = model.userListCriteria?.query || "robots";
+    if (sel !== "search") {
+      // Not already in a search: load the user list immediately
+      model.loadUserList({ query: "search", spec: spec }, true);
+      return;
+    }
+    if (spec === model.userListCriteria?.spec)
+      // We're already looking at the same search spec: done
+      return;
+    // We're changing the search spec.
+    // In order to limit the number of search queries sent to
+    // the server while typing a new criteria, we keep an
+    // outstanding promise that resolves in 0.8 seconds,
+    // unless cancelled by a new keystroke/promise.
+    // Note: since a promise can't be directly cancelled, we use a
+    // convoluted route to associate a boolean result with it.
+    let newP = {
+      result: true,
+      p: new Promise<boolean>((resolve) => {
+        // After 800 milliseconds, resolve to whatever value the
+        // result property has at that time. It will be true
+        // unless the promise has been "cancelled" by setting
+        // its result property to false.
+        setTimeout(() => { resolve(newP.result); }, 800);
+      })
+    };
+    promise = newP;
+    promise.p.then((value: boolean) => {
+      if (value) {
+        // Successfully resolved, without cancellation:
+        // issue the search query to the server as it now stands
+        model.loadUserList({ query: "search", spec: spec }, true);
+        promise = undefined;
+      }
+    });
+  }
+
+  return {
+
+    view: () => {
+      const sel = model.userListCriteria?.query || "robots";
+      return m(".user-cat[id='user-search']",
+        [
+          glyph("search",
+            {
+              id: 'search',
+              className: (sel == "search" ? "shown" : ""),
+              onclick: () => {
+                // Reset the search pattern when clicking the search icon
+                spec = "";
+                newSearch();
+                document.getElementById("search-id")?.focus();
+              }
+            }
+          ),
+          nbsp(),
+          m("input.text.userid",
+            {
+              type: 'text',
+              id: 'search-id',
+              name: 'search-id',
+              maxlength: 16,
+              placeholder: ts('Einkenni eða nafn'),
+              value: spec,
+              onfocus: () => newSearch(),
+              oninput: (ev: Event) => {
+                spec = (ev.target as HTMLInputElement).value + "";
+                newSearch();
+              }
+            }
+          )
+        ]
+      );
+    }
+  };
+};

package/src/mithril/statsdisplay.ts

@@ -0,0 +1,109 @@
+/*
+
+  Statsdisplay.ts
+
+  User status 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 { ComponentFunc, m, VnodeChildren } from "./mithril";
+import { ts } from "./i18n";
+import { glyph, nbsp, valueOrK } from "./util";
+
+interface IAttributes {
+  view: IView;
+  id: string;
+  ownStats: Record<string, any>;
+}
+
+export const StatsDisplay: ComponentFunc<IAttributes> = () => {
+  // Display key statistics, provided via the ownStats attribute
+
+  let sel = 1;
+
+  function vwStat(val?: number, icon?: string, suffix?: string): VnodeChildren {
+    // Display a user statistics figure, eventually with an icon
+    var txt = (val === undefined) ? "" : valueOrK(val);
+    if (suffix !== undefined)
+      txt += suffix;
+    return icon ? [glyph(icon), nbsp(), txt] : txt;
+  }
+
+  return {
+
+    view: (vnode) => {
+
+      // Display statistics about this user
+      var s = vnode.attrs.ownStats;
+      var winRatio = 0, winRatioHuman = 0;
+      var avgScore = 0, avgScoreHuman = 0;
+      if (s !== undefined && s.games !== undefined && s.human_games !== undefined) {
+        if (s.games > 0) {
+          winRatio = Math.round(100.0 * s.wins / s.games);
+          avgScore = Math.round(s.score / s.games);
+        }
+        if (s.human_games > 0) {
+          winRatioHuman = Math.round(100.0 * s.human_wins / s.human_games);
+          avgScoreHuman = Math.round(s.human_score / s.human_games);
+        }
+      }
+
+      return m("div", { id: vnode.attrs.id },
+        [
+          m(".toggler",
+            {
+              id: 'own-toggler',
+              title: ts("stats_choice"), // "With or without robot games"
+              onclick: (ev: Event) => { sel = 3 - sel; ev.preventDefault(); },
+            },
+            [
+              m(".option.small" + (sel === 1 ? ".selected" : ""),
+                { id: 'opt1' },
+                glyph("user")
+              ),
+              m(".option.small" + (sel === 2 ? ".selected" : ""),
+                { id: 'opt2' },
+                glyph("cog")
+              )
+            ]
+          ),
+          sel === 1 ? m("div",
+            { id: 'own-stats-human', className: 'stats-box', style: { display: "inline-block" } },
+            [
+              m(".stats-fig", { title: ts('Elo-stig') },
+                s ? vwStat(s.locale_elo?.human_elo, "crown") : ""),
+              m(".stats-fig.stats-games", { title: ts('Fjöldi viðureigna') },
+                s ? vwStat(s.human_games, "th") : ""),
+              m(".stats-fig.stats-win-ratio", { title: ts('Vinningshlutfall') },
+                vwStat(winRatioHuman, "bookmark", "%")),
+              m(".stats-fig.stats-avg-score", { title: ts('Meðalstigafjöldi') },
+                vwStat(avgScoreHuman, "dashboard"))
+            ]
+          ) : "",
+          sel === 2 ? m("div",
+            { id: 'own-stats-all', className: 'stats-box', style: { display: "inline-block" } },
+            [
+              m(".stats-fig", { title: ts("Elo-stig") },
+                s ? vwStat(s.locale_elo?.elo, "crown") : ""),
+              m(".stats-fig.stats-games", { title: ts('Fjöldi viðureigna') },
+                s ? vwStat(s.games, "th") : ""),
+              m(".stats-fig.stats-win-ratio", { title: ts('Vinningshlutfall') },
+                vwStat(winRatio, "bookmark", "%")),
+              m(".stats-fig.stats-avg-score", { title: ts('Meðalstigafjöldi') },
+                vwStat(avgScore, "dashboard"))
+            ]
+          ) : ""
+        ]
+      );
+    }
+
+  };
+};