@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/review.ts

@@ -0,0 +1,634 @@
+/*
+
+  Review.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
+
+*/
+
+import { ts } from "./i18n";
+import { IView, Move, MoveInfo } from "./types";
+import { glyph, coord, toVector, nbsp, buttonOver, buttonOut } from "./util";
+import {
+  m, Vnode, VnodeChildren, VnodeAttrs,
+  ComponentFunc,
+} from "./mithril";
+import { ExploLogoOnly } from "./logo";
+import { PlayerName } from "./playername";
+import { makeButton } from "./buttons";
+import { Info, LeftLogo } from "./components";
+import { Board, Rack } from "./board";
+  
+export const vwReview = (view: IView): VnodeChildren => {
+  // A review of a finished game
+
+  const model = view.model;
+  if (!model.game) return undefined;
+  const game = model.game;
+  let moveIndex = model.reviewMove ?? 0;
+  let bestMoves = model.bestMoves || [];
+
+  function vwRightColumn(): Vnode {
+    // A container for the right-side header and area components
+
+    function vwRightHeading(): Vnode {
+      // The right-side heading on the game screen
+
+      const fairplay = game.fairplay;
+      const player = game.player;
+      let sc0 = "";
+      let sc1 = "";
+      if (moveIndex) {
+        let s0 = 0;
+        let s1 = 0;
+        for (let i = 0; i < moveIndex; i++) {
+          // Add up the scores until and including this move
+          let m = game.moves[i];
+          if (i % 2 === 0)
+            s0 += m[1][2];
+          else
+            s1 += m[1][2];
+        }
+        sc0 = s0.toString();
+        sc1 = s1.toString();
+      }
+      return m(".heading",
+        [
+          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") }))
+          ])
+        ]
+      );
+    }
+
+    function vwRightArea(): Vnode {
+      // A container for the list of best possible moves
+      return m(".right-area", vwBestMoves(view, moveIndex, bestMoves));
+    }
+
+    return m(".rightcol", [vwRightHeading(), vwRightArea()]);
+  }
+
+  let r: VnodeChildren = [];
+  if (game) {
+    // Create a list of major elements that we're showing
+    r.push(vwRightColumn());
+    r.push(m(BoardReview, { view, moveIndex }));
+    if (model.reviewMove !== null && moveIndex === 0) {
+      // Only show the stats overlay if moveIndex is 0
+      const n = vwStatsReview(view);
+      n && r.push(n);
+    }
+  }
+  return m("div", // Removing this div messes up Mithril
+    [
+      m(".game-container", r),
+      m(LeftLogo), // Button to go back to main screen
+      m(Info) // Help button
+    ]
+  );
+}
+
+const vwBestMoves = (view: IView, moveIndex: number, bestMoves: Move[]): VnodeChildren => {
+  // List of best moves, in a game review
+
+  const model = view.model;
+  const game = model.game;
+
+  function bestHeader(co: string, tiles: string, score: number): Vnode {
+    // Generate the header of the best move list
+    let wrdclass = "wordmove";
+    let dispText: string | any[];
+    if (co.length > 0) {
+      // Regular move
+      dispText = [
+        m("i", tiles.split("?").join("")),
+        " (" + co + ")"
+      ];
+    }
+    else {
+      /* Not a regular tile move */
+      wrdclass = "othermove";
+      if (tiles == "PASS")
+        /* Pass move */
+        dispText = ts("Pass");
+      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");
+        dispText = ts("exchanged", { numtiles: numtiles.toString(), letters: letters });
+      }
+      else
+      if (tiles == "RSGN")
+        /* Resigned from game */
+        dispText = ts("Gaf viðureign");
+      else
+      if (tiles == "CHALL")
+        /* Challenge issued */
+        dispText = ts("Véfengdi lögn");
+      else
+      if (tiles == "RESP") {
+        /* Challenge response */
+        if (score < 0)
+          dispText = ts("Óleyfileg lögn");
+        else
+          dispText = ts("Röng véfenging");
+      }
+      else
+      if (tiles == "TIME") {
+        /* Score adjustment for time */
+        dispText = ts("Umframtími");
+      }
+      else
+      if (tiles == "OVER") {
+        /* Game over */
+        dispText = 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 = "othermove";
+        if (tiles == "--")
+          dispText = ts("Stafaleif: (engin)");
+        else
+          dispText = [ts("Stafaleif: "), m("i.upper", tiles)];
+      }
+    }
+    return m(".reviewhdr",
+      [
+        m("span.movenumber", "#" + moveIndex),
+        m("span", { class: wrdclass }, dispText)
+      ]
+    );
+  }
+
+  function bestMoveList(): VnodeChildren {
+    let r: VnodeChildren = [];
+    // Use a 1-based index into the move list
+    // (We show the review summary if move==0)
+    if (!game || !moveIndex || moveIndex > game.moves.length)
+      return r;
+    // Prepend a header that describes the move being reviewed
+    const m = game.moves[moveIndex - 1];
+    const [co, tiles, score] = m[1];
+    r.push(bestHeader(co, tiles, score));
+    const mlist = bestMoves;
+    for (let i = 0; i < mlist.length; i++) {
+      const [player, [co, tiles, score]] = mlist[i];
+      const n = vwBestMove(view, moveIndex, i, mlist[i],
+        {
+          key: i.toString(),
+          player: player, co: co, tiles: tiles,
+          score: score, leftTotal: 0, rightTotal: 0
+        }
+      );
+      n && r.push(n);
+    }
+    return r;
+  }
+
+  return m(".movelist-container", [m(".movelist.bestmoves", bestMoveList())]);
+}
+
+const vwBestMove = (
+  view: IView,
+  moveIndex: number,
+  bestMoveIndex: number,
+  move: Move,
+  info: MoveInfo,
+): VnodeChildren => {
+  // Displays a move in a list of best available moves
+
+  const model = view.model;
+  if (!model.game) return undefined;
+  const game = model.game;
+  const { player, co, tiles, score } = info;
+
+  function highlightMove(co: string, tiles: string, playerColor: 0 | 1, show: boolean) {
+    /* Highlight a move's tiles when hovering over it in the best move list */
+    const vec = toVector(co);
+    let col = vec.col;
+    let row = vec.row;
+    let nextBlank = false;
+    // If we're highlighting a move, show all moves leading up to it on the board
+    if (show) {
+      model.highlightedMove = bestMoveIndex;
+      game.placeTiles(moveIndex - 1, true); // No highlight
+    }
+    for (let tile of tiles) {
+      if (tile === "?") {
+        nextBlank = true;
+        continue;
+      }
+      const sq = coord(row, col);
+      if (sq === null) continue; // Should not happen
+      const letter = tile;
+      if (nextBlank)
+        tile = '?';
+      const tscore = game.tilescore(tile);
+      if (show) {
+        if (!(sq in game.tiles)) {
+          // Showing a tile that was not already on the board
+          game.tiles[sq] = {
+            player,
+            tile,
+            letter,
+            score: tscore,
+            draggable: false,
+            freshtile: false,
+            index: 0,
+            xchg: false,
+            review: true, // Mark as a 'review tile'
+            highlight: playerColor
+          };
+        }
+        else {
+          // Highlighting a tile that was already on the board
+          game.tiles[sq].highlight = playerColor;
+        }
+      }
+      col += vec.dx;
+      row += vec.dy;
+      nextBlank = false;
+    }
+    if (!show) {
+      model.highlightedMove = null;
+      model.reviewMove !== null && game.placeTiles(model.reviewMove);
+    }
+  }
+
+  // Add a single move to the move list
+  // Normal tile move
+  const coParens = "(" + co + ")";
+  // Note: String.replace() will not work here since there may be two question marks in the string
+  const word = tiles.split("?").join(""); /* TBD: Display wildcard characters differently? */
+  // Normal game move
+  let title = "Smelltu til að fletta upp";
+  let playerColor: 0 | 1 = 0;
+  const lcp = game.player;
+  let cls: string;
+  if (player === lcp || (lcp === null && player === 0))
+    cls = "humangrad" + (player === 0 ? "_left" : "_right"); /* Local player */
+  else {
+    cls = "autoplayergrad" + (player === 0 ? "_left" : "_right"); /* Remote player */
+    playerColor = 1;
+  }
+  const attribs: VnodeAttrs = { title };
+  // Word lookup, if Icelandic game
+  if (game.locale === "is_IS")
+    attribs.onclick = () => { window.open('https://malid.is/leit/' + word, 'malid'); };
+  // Highlight the move on the board while hovering over it
+  attribs.onmouseover = () => {
+    move[2] = true; // highlighted
+    highlightMove(co, tiles, playerColor, true);
+  };
+  attribs.onmouseout = () => {
+    move[2] = false; // highlighted
+    highlightMove(co, tiles, playerColor, false);
+  };
+  if (player === 0) {
+    // Move by left side player
+    return m(".move.leftmove." + cls, attribs,
+      [
+        m("span.score" + (move[2] ? ".highlight" : ""), score),
+        m("span.wordmove", [m("i", word), nbsp(), coParens])
+      ]
+    );
+  }
+  else {
+    // Move by right side player
+    return m(".move.rightmove." + cls, attribs,
+      [
+        m("span.wordmove", [coParens, nbsp(), m("i", word)]),
+        m("span.score" + (move[2] ? ".highlight" : ""), score)
+      ]
+    );
+  }
+}
+
+const vwScoreReview = (view: IView, moveIndex: number): VnodeChildren => {
+  // Shows the score of the current move within a game review screen
+  const game = view.model.game;
+  if (!game) return undefined;
+  const mv = moveIndex ? game.moves[moveIndex - 1] : undefined;
+  if (mv === undefined)
+    return undefined;
+  const [_, [coord, tiles, score]] = mv;
+  if (score === undefined || (coord === "" && tiles === "OVER"))
+    // No score available, or this is a "game over" sentinel move: don't display
+    return undefined;
+  let sc = [".score"];
+  if (moveIndex > 0) {
+    if (moveIndex % 2 === (game.player ?? 0))
+      // Opponent's move
+      sc.push("opponent");
+    else
+      // Local player's move
+      sc.push("localplayer");
+  }
+  return m(sc.join("."), score.toString());
+}
+
+const vwScoreDiff = (view: IView, moveIndex: number): VnodeChildren => {
+  // Shows the score of the current move within a game review screen
+  const model = view.model;
+  const game = model.game;
+  if (!game) return undefined;
+  let sc = [".scorediff"];
+  const mv = moveIndex ? game.moves[moveIndex - 1] : undefined;
+  let score = mv ? mv[1][2] : undefined;
+  let diff = "";
+  if (score === undefined || model.bestMoves === null || model.highlightedMove === null) {
+    // Unable to display score difference
+  } else {
+    const bestScore = model.bestMoves[model.highlightedMove][1][2];
+    diff = (score - bestScore).toString();
+    if (diff[0] != "-" && diff[0] != "0")
+      diff = "+" + diff;
+    if (score >= bestScore)
+      sc.push("posdiff");
+  }
+  return m(sc.join("."), { style: { visibility: "visible" } }, diff);
+}
+
+const vwStatsReview = (view: IView): VnodeChildren => {
+  // Shows the game statistics overlay
+  if (view.model.game === null) return undefined;
+  const game = view.model.game;
+  if (game.stats === null)
+    // No stats yet loaded: do it now
+    game.loadStats();
+
+  function fmt(p: string, digits?: number, value?: string | number): string {
+    let txt = value;
+    if (txt === undefined && game.stats)
+      txt = game.stats[p];
+    if (txt === undefined)
+      return "";
+    if (typeof txt == "number") {
+      if (digits !== undefined && digits > 0)
+        txt = txt.toFixed(digits).replace(".", ","); // Convert decimal point to comma
+      else
+        txt = txt.toString();
+    }
+    return txt;
+  }
+
+  let leftPlayerColor: string, rightPlayerColor: string;
+
+  if (game.player === 1) {
+    rightPlayerColor = "humancolor";
+    leftPlayerColor = "autoplayercolor";
+  }
+  else {
+    leftPlayerColor = "humancolor";
+    rightPlayerColor = "autoplayercolor";
+  }
+
+  return m(
+    ".gamestats", { style: { visibility: "visible" } },
+    [
+      m("div", { style: { position: "relative", width: "100%" } },
+        [
+          m(".player", { class: leftPlayerColor, style: { width: "50%" } },
+            m(".robot-btn.left",
+              game.autoplayer[0] ?
+                [glyph("cog"), nbsp(), game.nickname[0]]
+                :
+                game.nickname[0]
+            )
+          ),
+          m(".player", { class: rightPlayerColor, style: { width: "50%", "text-align": "right" } },
+            m(".robot-btn.right",
+              game.autoplayer[1] ?
+                [glyph("cog"), nbsp(), game.nickname[1]]
+                :
+                game.nickname[1]
+            )
+          )
+        ]
+      ),
+      m("div", { id: "gamestarted" },
+        [
+          m("p",
+            [
+              "Viðureignin hófst ",
+              m("span", fmt("gamestart")), m("br"),
+              "og henni lauk ",
+              m("span", fmt("gameend"))
+            ]
+          ),
+          game.manual ? m("p", "Leikið var í keppnisham") : ""
+        ]
+      ),
+      m(".statscol", { style: { clear: "left" } },
+        [
+          m("p",
+            ["Fjöldi leikja: ", m("span", fmt("moves0"))]
+          ),
+          m("p",
+            [
+              "Fjöldi bingóa: ", m("span", fmt("bingoes0")),
+              " (bónus ",
+              m(
+                "span",
+                fmt("bingopoints0", 0, !game.stats ? 0 : game.stats.bingoes0 * 50)
+              ),
+              " stig)"
+            ]
+          ),
+          m("p",
+            [
+              "Stafir lagðir niður: ", m("span", fmt("tiles0")),
+              " (þar af ", m("span", fmt("blanks0")), " auðir)"
+            ]
+          ),
+          m("p", ["Meðalstig stafa (án auðra): ", m("span", fmt("average0", 2))]),
+          m("p", ["Samanlögð stafastig: ", m("span", fmt("letterscore0"))]),
+          m("p", ["Margföldun stafastiga: ", m("span", fmt("multiple0", 2))]),
+          m("p", ["Stig án stafaleifar í lok: ", m("span", fmt("cleantotal0"))]),
+          m("p", ["Meðalstig hvers leiks: ", m("span", fmt("avgmove0", 2))]),
+          game.manual ? m("p", ["Rangar véfengingar andstæðings x 10: ", m("span", fmt("wrongchall0"))]) : "",
+          m("p", ["Stafaleif og frádráttur í lok: ", m("span", fmt("remaining0"))]),
+          m("p", ["Umframtími: ", m("span", fmt("overtime0"))]),
+          m("p",
+            [
+              "Stig: ",
+              m(
+                "span",
+                fmt("total0", 0, !game.stats ? 0 : game.stats.scores[0])
+              ),
+              " (", m("span", fmt("ratio0", 1)), "%)"
+            ]
+          )
+        ]
+      ),
+      m(".statscol",
+        [
+          m("p",
+            ["Fjöldi leikja: ", m("span", fmt("moves1"))]
+          ),
+          m("p",
+            [
+              "Fjöldi bingóa: ", m("span", fmt("bingoes1")),
+              " (bónus ",
+              m(
+                "span",
+                fmt("bingopoints0", 0, !game.stats ? 0 : game.stats.bingoes1 * 50)
+              ),
+              " stig)"
+            ]
+          ),
+          m("p",
+            [
+              "Stafir lagðir niður: ", m("span", fmt("tiles1")),
+              " (þar af ", m("span", fmt("blanks1")), " auðir)"
+            ]
+          ),
+          m("p", ["Meðalstig stafa (án auðra): ", m("span", fmt("average1", 2))]),
+          m("p", ["Samanlögð stafastig: ", m("span", fmt("letterscore1"))]),
+          m("p", ["Margföldun stafastiga: ", m("span", fmt("multiple1", 2))]),
+          m("p", ["Stig án stafaleifar í lok: ", m("span", fmt("cleantotal1"))]),
+          m("p", ["Meðalstig hvers leiks: ", m("span", fmt("avgmove1", 2))]),
+          game.manual ? m("p", ["Rangar véfengingar andstæðings x 10: ", m("span", fmt("wrongchall1"))]) : "",
+          m("p", ["Stafaleif og frádráttur í lok: ", m("span", fmt("remaining1"))]),
+          m("p", ["Umframtími: ", m("span", fmt("overtime1"))]),
+          m("p",
+            [
+              "Stig: ",
+              m(
+                "span",
+                fmt("total1", 0, !game.stats ? 0 : game.stats.scores[1])
+              ),
+              " (", m("span", fmt("ratio1", 1)), "%)"
+            ]
+          )
+        ]
+      ),
+      m(".closebtn",
+        {
+          id: "review-close",
+          onclick: (ev: Event) => {
+            // Navigate to move #1
+            setTimeout(() => {
+              m.route.set("/review/" + game.uuid, { move: 1 });
+            });
+            ev.preventDefault();
+          },
+          onmouseover: buttonOver,
+          onmouseout: buttonOut
+        },
+        [glyph("play"), " Rekja"]
+      )
+    ]
+  );
+}
+
+const vwButtonsReview = (view: IView, moveIndex: number): VnodeChildren => {
+  // The navigation buttons below the board on the review screen
+  const model = view.model;
+  const game = model.game;
+  const numMoves = game?.moves.length ?? 0;
+  const gameUuid = game?.uuid ?? "";
+  let r: VnodeChildren = [];
+  if (!gameUuid) return r;
+  r.push(
+    makeButton(
+      "navbtn", !moveIndex, // Disabled if at moveIndex 0 (initial review dialog)
+      () => {
+        // Navigate to previous moveIndex
+        model.loadBestMoves(moveIndex ? moveIndex - 1 : 0);
+      },
+      "Sjá fyrri leik",
+      m("span",
+        { id: "nav-prev-visible" },
+        [glyph("chevron-left"), " Fyrri"]
+      ),
+      "navprev"
+    )
+  );
+  r.push(
+    makeButton(
+      "navbtn", (!moveIndex) || (moveIndex >= numMoves),
+      () => {
+        // Navigate to next moveIndex
+        model.loadBestMoves(moveIndex + 1);
+      },
+      "Sjá næsta leik",
+      m("span",
+        { id: "nav-next-visible" },
+        ["Næsti ", glyph("chevron-right")]
+      ),
+      "navnext"
+    )
+  );
+  // Show the score difference between an actual moveIndex and
+  // a particular moveIndex on the best moveIndex list
+  if (model.highlightedMove !== null) {
+    const n = vwScoreDiff(view, moveIndex);
+    if (n !== undefined)
+      r.push(n);
+  }
+  const n = vwScoreReview(view, moveIndex);
+  if (n !== undefined)
+    r.push(n);
+  return r;
+}
+
+interface IBoardReviewAttributes {
+  view: IView;
+  moveIndex: number;
+}
+
+export const BoardReview: ComponentFunc<IBoardReviewAttributes> = (initialVnode) => {
+  // The board area within a game review screen
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  return {
+    view: (vnode) => {
+      const game = model.game;
+      let r: VnodeChildren = [];
+      if (game) {
+        r = [
+          m(Board, { view, review: true }),
+          m(Rack, { view, review: true }),
+        ];
+        const moveIndex = vnode.attrs.moveIndex;
+        if (moveIndex !== null)
+          // Don't show navigation buttons if currently at overview (move==null)
+          r = r.concat(vwButtonsReview(view, moveIndex));
+      }
+      return m(".board-area", r);
+    }
+  };
+}