@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/board.ts

@@ -0,0 +1,336 @@
+/*
+
+  Board.ts
+
+  Board, Tile and Rack components
+
+  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 { ERROR_MESSAGES, IGame, IView, RACK_SIZE } from "./types";
+import { addPinchZoom, glyph } from "./util";
+import { Component, ComponentFunc, m, VnodeAttrs, VnodeChildren } from "./mithril";
+import { Buttons, ButtonsLeftOfRack } from "./buttons";
+import { Tile } from "./tile";
+import { mt, ts } from "./i18n";
+
+const GameOver: Component<{ game: IGame }> = {
+  view: (vnode) => {
+    // Show message at end of game, either congratulating a win or
+    // solemnly informing the player that the game is over
+    const { game } = vnode.attrs;
+    if (game.congratulate) {
+      return m("div", { id: "congrats" },
+        [
+          glyph("bookmark"),
+          " ",
+          mt("strong", "Til hamingju með sigurinn!")
+        ]
+      );
+    }
+    if (game.over) {
+      return m("div", { id: "gameover" },
+        [
+          glyph("info-sign"),
+          " ",
+          mt("strong", "Viðureigninni er lokið")
+        ]
+      );
+    }
+    return undefined;
+  }
+};
+
+const Errors: Component<{ game: IGame }> = {
+  view: (vnode) => {
+    // Error messages, selectively displayed
+    const { game } = vnode.attrs;
+    const err = game.currentError || "";
+    if (err && err in ERROR_MESSAGES) {
+      const msg: string = game.currentMessage || "";
+      const txt: string = ts(ERROR_MESSAGES[err]);
+      const wix = txt.indexOf("{word}");
+      let children: VnodeChildren[];
+      if (wix >= 0) {
+        // Found {word} macro: create three child nodes
+        children = [ txt.slice(0, wix), m("span.errword", msg), txt.slice(wix + 6) ];
+      }
+      else {
+        // No {word} macro: just return the message as-is
+        children = [ txt ];
+      }
+      return m(".error",
+        {
+          style: { visibility: "visible" },
+          onclick: (ev: Event) => { game.resetError(); ev.preventDefault(); }
+        },
+        [ glyph("exclamation-sign"), ...children ]
+      );
+    }
+    return undefined;
+  }
+};
+
+interface IAttributes {
+  view: IView;
+}
+
+export const BoardArea: ComponentFunc<IAttributes> = (initialVnode) => {
+  // Collection of components in the board (left-side) area
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  return {
+    view: () => {
+      const game = model.game;
+      let r: VnodeChildren = [];
+      if (game) {
+        r = [
+          m(Board, { view, review: false }),
+          m(Rack, { view, review: false }),
+          m(Buttons, { view }),
+          m(Errors, { game }),
+          m(GameOver, { game }),
+        ];
+        r = r.concat(view.vwDialogs());
+      }
+      return m(".board-area", r);
+    }
+  };
+};
+
+interface ITileSquareAttributes {
+  view: IView;
+  coord: string;
+  opponent: boolean;
+}
+
+export const TileSquare: ComponentFunc<ITileSquareAttributes> = (initialVnode) => {
+  // Return a td element that wraps a tile on the board.
+  // If the opponent flag is true, we put an '.opp' class on the td
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  return {
+    view: (vnode) => {
+      const coord = vnode.attrs.coord;
+      const game = model.game;
+      if (!game) return undefined;
+      // The square contains a tile, so we don't allow dropping a tile on it
+      // and don't wish to allow a parent element to accept a drop either.
+      // Indicate this by including the not-target class.
+      return m("td.not-target",
+        {
+          id: "sq_" + coord,
+          class: game.squareClass(coord),
+        },
+        m(Tile, { view, coord: coord, opponent: false })
+      );
+    }
+  };
+};
+
+export const ReviewTileSquare: ComponentFunc<ITileSquareAttributes> = (initialVnode) => {
+  // Return a td element that wraps an 'inert' tile in a review screen.
+  // If the opponent flag is true, we put an '.opp' class on the td
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  return {
+    view: (vnode) => {
+      const game = model.game;
+      if (!game) return undefined;
+      const coord = vnode.attrs.coord;
+      let cls = game.squareClass(coord) || "";
+      if (cls)
+        cls = "." + cls;
+      if (vnode.attrs.opponent)
+        cls += ".opp";
+      return m("td" + cls, { id: "sq_" + coord }, vnode.children);
+    }
+  };
+};
+
+interface IDropTargetSquareAttributes {
+  view: IView;
+  coord: string;
+}
+
+export const DropTargetSquare: ComponentFunc<IDropTargetSquareAttributes> = (initialVnode) => {
+  // Return a td element that is a target for dropping tiles
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  return {
+    view: (vnode) => {
+      const game = model.game;
+      if (!game) return undefined;
+      const coord = vnode.attrs.coord;
+      let cls = game.squareClass(coord) || "";
+      if (cls)
+        cls = "." + cls;
+      // Mark the cell with the 'blinking' class if it is the drop
+      // target of a pending blank tile dialog
+      if (game.askingForBlank !== null && game.askingForBlank.to == coord)
+        cls += ".blinking";
+      if (coord == game.startSquare && game.localturn)
+        // Unoccupied start square, first move
+        cls += ".center";
+      return m("td.drop-target" + cls,
+        {
+          id: "sq_" + coord,
+          onclick: (ev: Event) => {
+            // If a square is selected (blinking red) and
+            // we click on an empty square, move the selected tile
+            // to the clicked square
+            if (game.selectedSq !== null) {
+              ev.stopPropagation();
+              game.attemptMove(game.selectedSq, coord);
+              game.selectedSq = null;
+              (ev.currentTarget as HTMLElement).classList.remove("sel");
+              view.updateScale();
+              return false;
+            }
+          },
+          onmouseover: (ev: Event) => {
+            // If a tile is selected, show a red selection square
+            // around this square when the mouse is over it
+            if (game.selectedSq !== null)
+              (ev.currentTarget as HTMLElement).classList.add("sel");
+          },
+          onmouseout: (ev: Event) => {
+            (ev.currentTarget as HTMLElement).classList.remove("sel");
+          }
+        },
+        vnode.children
+      );
+    }
+  };
+}
+
+interface IBoardAttributes {
+  view: IView;
+  review: boolean;
+}
+
+export const Board: ComponentFunc<IBoardAttributes> = (initialVnode) => {
+  // The game board, a 15x15 table plus row (A-O) and column (1-15) identifiers
+
+  const { view, review } = initialVnode.attrs;
+  const model = view.model;
+
+  function colid(): VnodeChildren {
+    // The column identifier row
+    let r: VnodeChildren = [];
+    r.push(m("td"));
+    for (let col = 1; col <= 15; col++)
+      r.push(m("td", col.toString()));
+    return m("tr.colid", r);
+  }
+
+  function row(rowid: string): VnodeChildren {
+    // Each row of the board
+    let r: VnodeChildren = [];
+    const game = model.game;
+    r.push(m("td.rowid", { key: "R" + rowid }, rowid));
+    for (let col = 1; col <= 15; col++) {
+      const coord = rowid + col.toString();
+      if (game && (coord in game.tiles))
+        // There is a tile in this square: render it
+        r.push(m(TileSquare, { view, key: coord, coord: coord, opponent: false }));
+      else if (review)
+        // Empty, inert square
+        r.push(m(ReviewTileSquare, { view, key: coord, coord: coord, opponent: false }));
+      else
+        // Empty square which is a drop target
+        r.push(m(DropTargetSquare, { view, key: coord, coord: coord }));
+    }
+    return m("tr", r);
+  }
+
+  function allrows(): VnodeChildren {
+    // Return a list of all rows on the board
+    let r: VnodeChildren = [];
+    r.push(colid());
+    const rows = "ABCDEFGHIJKLMNO";
+    for (const rw of rows)
+      r.push(row(rw));
+    return r;
+  }
+
+  function zoomIn() {
+    view.boardScale = 1.5;
+  }
+
+  function zoomOut() {
+    if (view.boardScale != 1.0) {
+      view.boardScale = 1.0;
+      setTimeout(view.resetScale);
+    }
+  }
+
+  return {
+    view: (vnode) => {
+      const scale = view.boardScale || 1.0;
+      let attrs: VnodeAttrs = {};
+      // Add handlers for pinch zoom functionality
+      addPinchZoom(attrs, zoomIn, zoomOut);
+      if (scale != 1.0)
+        attrs.style = `transform: scale(${scale})`;
+      return m(".board",
+        { id: "board-parent" },
+        m("table.board", attrs, m("tbody", allrows()))
+      );
+    }
+  };
+}
+
+export const Rack: ComponentFunc<IBoardAttributes> = (initialVnode) => {
+  // A rack of 7 tiles
+  const { view, review } = initialVnode.attrs;
+  const model = view.model;
+  return {
+    view: () => {
+      const game = model.game;
+      if (!game) return undefined;
+      let r: VnodeChildren = [];
+      // If review==true, this is a review rack
+      // that is not a drop target and whose color reflects the
+      // currently shown move.
+      // If opponent==true, we're showing the opponent's rack
+      const reviewMove = model.reviewMove ?? 0;
+      const opponent = review && (reviewMove > 0) && (reviewMove % 2 === game.player);
+      for (let i = 1; i <= RACK_SIZE; i++) {
+        const coord = 'R' + i.toString();
+        if (game && (coord in game.tiles)) {
+          // We have a tile in this rack slot, but it is a drop target anyway
+          if (review) {
+            r.push(
+              m(ReviewTileSquare, { view, coord: coord, opponent: opponent },
+                m(Tile, { view, coord: coord, opponent: opponent })
+              )
+            );
+          } else {
+            r.push(
+              m(DropTargetSquare, { view, coord: coord },
+                m(Tile, { view, coord: coord, opponent: false })
+              )
+            );
+          }
+        }
+        else if (review) {
+          r.push(m(ReviewTileSquare, { view, coord: coord, opponent: false }));
+        }
+        else {
+          r.push(m(DropTargetSquare, { view, coord: coord }));
+        }
+      }
+      return m(".rack-row", [
+        m(".rack-left", m(ButtonsLeftOfRack, { view })),
+        m(".rack", m("table.board", m("tbody", m("tr", r))))
+      ]);
+    }
+  };
+};

package/src/mithril/buttons.ts

@@ -0,0 +1,303 @@
+/*
+
+  Buttons.ts
+
+  Buttons below rack 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 { ts } from "./i18n";
+import { AnimatedExploLogo } from "./logo";
+import { Component, ComponentFunc, m, VnodeAttrs, VnodeChildren } from "./mithril";
+import { IGame, IView } from "./types";
+import { buttonOut, buttonOver, glyph, nbsp } from "./util";
+
+export function makeButton(
+  cls: string, disabled: boolean, onclick: () => void,
+  title?: string, children?: VnodeChildren, id?: string
+): VnodeChildren {
+  // Create a button element, wrapping the disabling logic
+  // and other boilerplate
+  const attr: VnodeAttrs = {
+    onmouseout: buttonOut,
+    onmouseover: buttonOver,
+  };
+  if (title)
+    attr.title = title;
+  if (id)
+    attr.id = id;
+  if (disabled)
+    attr.onclick = (ev: Event) => ev.preventDefault();
+  else
+    attr.onclick = (ev: Event) => {
+      onclick && onclick();
+      ev.preventDefault();
+    };
+  return m(
+    "." + cls + (disabled ? ".disabled" : ""),
+    attr, children // children may be omitted
+  );
+}
+
+const Score: Component<{ game: IGame }> = {
+  view: (vnode) => {
+    // Shows the score of the current word
+    const { game } = vnode.attrs;
+    let sc = [".score"];
+    if (game.manual)
+      sc.push("manual");
+    else
+      if (game.wordGood) {
+        sc.push("word-good");
+        if (game.currentScore !== undefined && game.currentScore >= 50)
+          sc.push("word-great");
+      }
+    let txt = (game.currentScore === undefined ? "?" : game.currentScore.toString())
+    return m(sc.join("."), { title: txt }, txt);
+  }
+};
+
+const RecallButton: Component<{ view: IView; disabled?: boolean; }> = {
+  view: (vnode) => {
+    // Create a tile recall button
+    const { view, disabled } = vnode.attrs;
+    const game = view.model.game;
+    if (!game) return undefined;
+    return makeButton(
+      "recallbtn", !!disabled,
+      () => { game.resetRack(); view.updateScale(); },
+      ts("Færa stafi aftur í rekka"), glyph("down-arrow")
+    );
+  }
+};
+
+const ScrambleButton: Component<{ view: IView; disabled?: boolean; }> = {
+  view: (vnode) => {
+    // Create a tile scramble button
+    const { view, disabled } = vnode.attrs;
+    const game = view.model.game;
+    if (!game) return undefined;
+    return makeButton(
+      "scramblebtn", !!disabled,
+      () => game.rescrambleRack(), // Note: plain game.rescrambleRack doesn't work here
+      ts("Stokka upp rekka"), glyph("random")
+    );
+  }
+};
+
+export const ButtonsLeftOfRack: Component<{ view: IView }> = {
+  view: (vnode) => {
+    // The button to the left of the rack in the mobile UI
+    const { view } = vnode.attrs;
+    const game = view.model.game;
+    if (!game) return undefined;
+    const s = game.buttonState();
+    if (s.showRecall && !s.showingDialog)
+      // Show a 'Recall tiles' button
+      return m(RecallButton, { view });
+    if (s.showScramble && !s.showingDialog)
+      return m(ScrambleButton, { view });
+    return undefined;
+  }
+};
+
+interface IAttributes {
+  view: IView;
+}
+
+export const Buttons: ComponentFunc<IAttributes> = (initialVnode) => {
+
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+
+  return {
+    view: () => {
+      // The set of buttons below the game board, alongside the rack (fullscreen view)
+      // or below the rack (mobile view)
+      const game = model.game;
+      let r: VnodeChildren = [];
+      if (!game) return undefined;
+      const s = game.buttonState();
+      r.push(m(".word-check" +
+        (s.wordGood ? ".word-good" : "") +
+        (s.wordBad ? ".word-bad" : "")));
+      if (s.showChallenge) {
+        // Show a button that allows the player to challenge the opponent's
+        // last move
+        const disabled = (s.tilesPlaced || s.showingDialog) && !s.lastChallenge;
+        r.push(
+          makeButton(
+            "challenge", disabled,
+            () => game.submitChallenge(), // Note: plain game.submitChallenge doesn't work here
+            'Véfenging (röng kostar 10 stig)', glyph("ban-circle")
+          )
+        );
+      }
+      if (s.showRecall) {
+        // Show button to recall tiles from the board into the rack
+        r.push(m(RecallButton, { view, disabled: s.showingDialog }));
+      }
+      if (s.showScramble) {
+        // Show button to scramble (randomly reorder) the rack tiles
+        r.push(m(ScrambleButton, { view, disabled: s.showingDialog }));
+      }
+      if (s.showMove) {
+        // "Plain" move button for fullscreen
+        const submit_move = ts("submit_move"); // 'Move' or 'Leika'
+        r.push(
+          makeButton(
+            "submitmove", !s.tilesPlaced || s.showingDialog,
+            () => { game.submitMove(); view.updateScale(); },
+            submit_move, [submit_move, glyph("play")]
+          )
+        );
+      }
+      if (s.showMoveMobile) {
+        // Submit-Move button on mobile, which also shows the score
+        // and whether the move is good or bad
+        let classes: string[] = ["submitmove"];
+        let wordIsPlayable = game.currentScore !== undefined;
+        if (game.manual) {
+          classes.push("manual")
+        } else if (s.wordGood) {
+          classes.push("word-good");
+          if (game.currentScore !== undefined && game.currentScore >= 50)
+            classes.push("word-great");
+        } else if (s.wordBad) {
+          classes.push("word-bad");
+          wordIsPlayable = false;
+        }
+        const text = (game.currentScore === undefined) ? "?" : game.currentScore.toString();
+        let legend: VnodeChildren[] = [m("span.score-mobile", text)];
+        if (s.canPlay && wordIsPlayable)
+          legend.push(glyph("play"));
+        else
+          legend.push(glyph("remove"));
+        let action: () => void;
+        if (s.canPlay) {
+          if (wordIsPlayable)
+            action = () => { game.submitMove(); view.updateScale(); };
+          else
+            action = () => { /* TODO: Add some kind of feedback? */ };
+        }
+        else {
+          action = () => {
+            // Make the 'opp-turn' flash, to remind the user that it's not her turn
+            const el = document.querySelector("div.opp-turn") as HTMLElement;
+            if (el) {
+              el.classList.toggle("flashing", true);
+              setTimeout(() => el.classList.toggle("flashing", false), 1200);
+            }
+          };
+        }
+        r.push(
+          makeButton(
+            classes.join("."), s.showingDialog, action, text, legend, "move-mobile"
+          )
+        );
+      }
+      if (s.showForceResignMobile) {
+        // Force resignation button (only shown on mobile,
+        // and only if submit move button is not shown)
+        const txt = ts("Þvinga til uppgjafar");
+        r.push(
+          makeButton(
+            "force-resign",
+            s.showingDialog,
+            () => game.forceResign(), // Note: plain game.forceResign doesn't work here
+            txt,
+            txt
+          )
+        );
+      }
+      if (s.showPass) {
+        // Pass move: shown if no tiles have been placed
+        // and we're not showing a dialog, or if this is
+        // the last move by the opponent in a manual game
+        r.push(
+          makeButton(
+            "submitpass",
+            (s.tilesPlaced || s.showingDialog) && !s.lastChallenge,
+            () => game.submitPass(), // Note: plain game.submitPass doesn't work here
+            ts("Pass"), glyph("forward")
+          )
+        );
+      }
+      if (s.showExchange) {
+        // Exchange tiles from the rack
+        r.push(
+          makeButton(
+            "submitexchange",
+            s.tilesPlaced || s.showingDialog || !s.exchangeAllowed,
+            () => game.submitExchange(), // Note: plain game.submitExchange doesn't work here
+            ts("Skipta stöfum"), glyph("refresh")
+          )
+        );
+      }
+      if (s.showResign) {
+        // Resign the game
+        r.push(
+          makeButton(
+            "submitresign", s.showingDialog,
+            () => game.submitResign(), // Note: plain game.submitResign doesn't work here
+            ts("Gefa viðureign"), glyph("fire")
+          )
+        );
+      }
+      if (!s.gameOver && !s.localTurn && !game.moveInProgress && game.player !== null) {
+        // Indicate that it is the opponent's turn; offer to force a resignation
+        // if the opponent hasn't moved for 14 days
+        r.push(
+          m(".opp-turn",
+            { style: { visibility: "visible" } },
+            [
+              m("span.move-indicator"),
+              nbsp(),
+              m("strong", game.nickname[1 - game.player]),
+              ts(" á leik"),
+              nbsp(),
+              // The following inline button is only
+              // displayed in the fullscreen UI
+              s.tardyOpponent ? m("span.yesnobutton",
+                {
+                  id: 'force-resign',
+                  onclick: (ev: Event) => {
+                    ev.preventDefault();
+                    game.forceResign();
+                  },
+                  onmouseout: buttonOut,
+                  onmouseover: buttonOver,
+                  title: ts("14 dagar liðnir án leiks")
+                },
+                ts("Þvinga til uppgjafar")
+              ) : ""
+            ]
+          )
+        );
+      }
+      if (s.tilesPlaced) {
+        // Show the score of the current move (not visible on mobile)
+        const sc = m(Score, { game });
+        sc && r.push(sc);
+      }
+      // Is the server processing a move?
+      if (game?.moveInProgress) {
+        r.push(
+          m(".waitmove",
+            m(".animated-waitmove",
+              m(AnimatedExploLogo, { msStepTime: 100, width: 38, withCircle: false })
+            )
+          )
+        );
+      }
+      return m(".buttons", r);
+    }
+  };
+};