@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/movelistitem.ts

@@ -0,0 +1,226 @@
+/*
+
+  MovelistItem.ts
+
+  An item in a move list
+
+  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, Move, MoveInfo } from "./types";
+import { t, ts } from "./i18n";
+import { nbsp, coord, toVector } from "./util";
+import { VnodeChildren, ComponentFunc, m, VnodeAttrs } from "./mithril";
+import { logEvent } from "./channel";
+
+interface IAttributes {
+  view: IView;
+  move: Move;
+  info: MoveInfo;
+}
+
+export const MoveListItem: ComponentFunc<IAttributes> = (initialVnode) => {
+  // Displays a single move
+
+  const { view } = initialVnode.attrs;
+  const model = view.model;
+  const game = model.game!;
+  const state = model.state!;
+
+  function highlightMove(co: string, tiles: string, playerColor: 0 | 1, show: boolean) {
+    /* Highlight a move's tiles when hovering over it in the move list */
+    const vec = toVector(co);
+    let col = vec.col;
+    let row = vec.row;
+    for (const tile of tiles) {
+      if (tile == '?')
+        continue;
+      const sq = coord(row, col);
+      if (sq && game.tiles.hasOwnProperty(sq))
+        game.tiles[sq].highlight = show ? playerColor : undefined;
+      col += vec.dx;
+      row += vec.dy;
+    }
+  }
+
+  function gameOverMove(tiles: string): VnodeChildren {
+    // Add a 'game over' div at the bottom of the move list
+    // of a completed game. The div includes a button to
+    // open a review of the game, if the user is a subscriber.
+    return m(".move.gameover",
+      [
+        m("span.gameovermsg", tiles),
+        m("span.statsbutton",
+          {
+            onclick: (ev: Event) => {
+              ev.preventDefault();
+              if (state.hasPaid) {
+                // Show the game review
+                m.route.set("/review/" + game.uuid);
+                if (game !== null && game !== undefined) {
+                  // Log an event for this action
+                  logEvent("game_review",
+                    {
+                      locale: game.locale,
+                      uuid: game.uuid
+                    }
+                  );
+                }
+              }
+              else {
+                // Show a friend promotion dialog
+                logEvent("click_review",
+                  {
+                    userid: state.userId, locale: state.locale
+                  }
+                );
+                view.showFriendPromo();
+              }
+            }
+          },
+          t("Skoða yfirlit")
+        )
+      ]
+    );
+  }
+
+  function createItem(move: Move, info: MoveInfo): VnodeChildren {
+    // Add a single move to the move list
+    const { leftTotal, rightTotal, player } = info;
+    let { co, tiles } = info;
+    let score: string | number = info.score;
+    let wrdclass = "wordmove";
+    let rawCoord = co;
+    let tileMoveIncrement = 0; // +1 for tile moves, -1 for successful challenges
+    if (co === "") {
+      /* Not a regular tile move */
+      wrdclass = "othermove";
+      if (tiles == "PASS") {
+        /* Pass move */
+        tiles = " " + ts("Pass") + " ";
+        score = "";
+      }
+      else
+      if (tiles.indexOf("EXCH") === 0) {
+        /* Exchange move - we don't show the actual tiles exchanged, only their count */
+        let numtiles = tiles.slice(5).length;
+        const letters = ts(numtiles == 1 ? "letter" : "letters");
+        // Exchanged {numtiles} {letters}
+        tiles = " " + ts("exchanged", { numtiles: numtiles.toString(), letters: letters }) + " ";
+        score = "";
+      }
+      else
+      if (tiles == "RSGN")
+        /* Resigned from game */
+        tiles = " " + ts("Gaf viðureign") + " ";
+      else
+      if (tiles == "CHALL") {
+        /* Challenge issued */
+        tiles = " " + ts("Véfengdi lögn") + " ";
+        score = "";
+      }
+      else
+      if (tiles == "RESP") {
+        /* Challenge response */
+        if (score < 0) {
+          // Invalid move
+          tiles = " " + ts("Óleyfileg lögn") + " ";
+          tileMoveIncrement = -1; // Subtract one from the actual tile moves on the board
+        }
+        else
+          // Unsuccessful challenge
+          tiles = " " + ts("Röng véfenging") + " ";
+      }
+      else
+      if (tiles == "TIME") {
+        /* Overtime adjustment, 'Extra time' */
+        tiles = " " + ts("Umframtími") + " ";
+      }
+      else
+      if (tiles == "OVER") {
+        /* Game over */
+        tiles = ts("Viðureign lokið");
+        wrdclass = "gameover";
+      }
+      else {
+        /* The rack leave at the end of the game (which is always in lowercase
+            and thus cannot be confused with the above abbreviations) */
+        wrdclass = "wordmove";
+      }
+    }
+    else {
+      // Normal tile move
+      co = "(" + co + ")";
+      // Note: String.replace() will not work here since there may be two question marks in the string
+      tiles = tiles.split("?").join(""); /* TBD: Display wildcard characters differently? */
+      tileMoveIncrement = 1;
+    }
+    if (wrdclass == "gameover") {
+      // Game over message at bottom of move list
+      return gameOverMove(tiles);
+    }
+    // Normal game move
+    let title = (tileMoveIncrement > 0 && !game.manual) ? ts("Smelltu til að fletta upp") : "";
+    let playerColor: 0 | 1 = 0;
+    let lcp = game.player;
+    let cls: string;
+    if (player === lcp || (lcp === null && player === 0))
+      cls = "humangrad" + (player === 0 ? "_left" : "_right"); /* Local player or player 0 */
+    else {
+      cls = "autoplayergrad" + (player === 0 ? "_left" : "_right"); /* Remote player or player 1 */
+      playerColor = 1;
+    }
+    const attribs: VnodeAttrs = { };
+    if (state.uiFullscreen && tileMoveIncrement > 0) {
+      if (!game.manual) {
+        if (game.locale == "is_IS") {
+          // Tile move and not a manual game: allow word lookup for Icelandic
+          attribs.onclick = () => { window.open('https://malid.is/leit/' + tiles, 'malid'); };
+          attribs.title = title;
+        }
+      }
+      // Highlight the move on the board while hovering over it
+      attribs.onmouseout = () => {
+        move[2] = false; // highlighted
+        highlightMove(rawCoord, tiles, playerColor, false);
+      };
+      attribs.onmouseover = () => {
+        move[2] = true; // highlighted
+        highlightMove(rawCoord, tiles, playerColor, true);
+      };
+    }
+    if (player === 0) {
+      // Move by left side player
+      return m(".move.leftmove." + cls, attribs,
+        [
+          m("span.total" + (player == lcp ? ".human" : ".autoplayer"), leftTotal),
+          m("span.score" + (move[2] ? ".highlight" : ""), score),
+          m("span." + wrdclass, [m("i", tiles), nbsp(), co])
+        ]
+      );
+    }
+    else {
+      // Move by right side player
+      return m(".move.rightmove." + cls, attribs,
+        [
+          m("span." + wrdclass, [co, nbsp(), m("i", tiles)]),
+          m("span.score" + (move[2] ? ".highlight" : ""), score),
+          m("span.total" + (player == lcp ? ".human" : ".autoplayer"), rightTotal)
+        ]
+      );
+    }
+  }
+
+  return {
+    view: (vnode) => {
+      const { move, info } = vnode.attrs;
+      return createItem(move, info);
+    }
+  };
+};