@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/actions.ts

@@ -0,0 +1,319 @@
+/*
+
+  Actions.ts
+
+  Single page UI for Explo using the Mithril library
+
+  Copyright (C) 2024 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
+
+  This file implements the Actions class.
+
+*/
+
+import { ServerGame } from "./types";
+import { Params, scrollMovelistToBottom } from "./util";
+import { m } from "./mithril";
+import {
+  attachFirebaseListener, detachFirebaseListener, logEvent
+} from "./channel";
+import { Model } from "./model";
+import { View } from "./page";
+
+export class Actions {
+
+  model: Model;
+  view: View;
+
+  constructor(model: Model, view: View) {
+    this.model = model;
+    this.view = view;
+    this.initMediaListener();
+    // this.attachListenerToUser();
+  }
+
+  onNavigateTo(routeName: string, params: Params) {
+    // We have navigated to a new route
+    // If navigating to something other than help,
+    // we need to have a logged-in user
+    const model = this.model;
+    this.view.boardScale = 1.0;
+    model.routeName = routeName;
+    model.params = params;
+    const uuid = params.uuid ?? "";
+    if (routeName == "game") {
+      // New game route: initiate loading of the game into the model
+      if (model.game !== null) {
+        this.detachListenerFromGame(model.game.uuid);
+      }
+      // If opening this game as a zombie, remove zombie status
+      const deleteZombie = params.zombie === "1";
+      // Load the game, and attach it to the Firebase listener once it's loaded
+      model.loadGame(
+        uuid,
+        () => {
+          this.attachListenerToGame(uuid);
+          setTimeout(scrollMovelistToBottom);
+        },
+        deleteZombie
+      );
+      if (model.game !== null && model.game !== undefined) {
+        logEvent("game_open",
+          {
+            locale: model.game.locale,
+            uuid: params.uuid,
+          }
+        );
+      }
+    } else if (routeName == "review") {
+      // A game review: detach listener, if any, and load
+      // new game if necessary
+      if (model.game !== null) {
+        // !!! This may cause an extra detach - we assume that's OK
+        this.detachListenerFromGame(model.game.uuid);
+      }
+      // Find out which move we should show in the review
+      let moveParam: string = params.move || "0";
+      // Start with move number 0 by default
+      let move = parseInt(moveParam);
+      if (isNaN(move) || !move || move < 0)
+        move = 0;
+      if (model.game === null || model.game.uuid != params.uuid) {
+        // Different game than we had before: load it, and then
+        // fetch the best moves
+        model.loadGame(uuid, () => {
+          model.loadBestMoves(move);
+          setTimeout(scrollMovelistToBottom);
+        });
+      } else if (model.game !== null) {
+        // Already have the right game loaded:
+        // Fetch the best moves and show them once they're available
+        model.loadBestMoves(move);
+      }
+    } else {
+      // Not a game route: delete the previously loaded game, if any
+      if (model.game !== null) {
+        this.detachListenerFromGame(model.game.uuid);
+        model.game.cleanup();
+        model.game = null;
+      }
+      const locale = model.state?.locale || "is_IS";
+      if (routeName == "help") {
+        // Make sure that the help HTML is loaded upon first use
+        model.loadHelp();
+        logEvent("help", { locale });
+      } else if (routeName == "thanks") {
+        // Log a conversion event
+        if (model.state?.userId) {
+          logEvent("init_plan",
+            {
+              userid: model.state.userId,
+              locale,
+              // TODO: Add plan identifiers here
+              plan: "friend"
+            }
+          );
+        }
+      } else if (routeName == "main") {
+        // Force reload of lists
+        // TODO: This may not be necessary,
+        // if all Firebase notifications are acted upon
+        model.gameList = null;
+        model.userListCriteria = null;
+        model.userList = null;
+        model.challengeList = null;
+        model.recentList = null;
+      }
+    }
+  }
+
+  onMoveMessage(json: ServerGame, firstAttach: boolean) {
+    // Handle a move message from Firebase
+    console.log("Move message received: " + JSON.stringify(json));
+    this.model.handleMoveMessage(json, firstAttach);
+  }
+
+  onUserMessage(json: any, firstAttach: boolean) {
+    // Handle a user message from Firebase
+    console.log("User message received: " + JSON.stringify(json));
+    this.model.handleUserMessage(json, firstAttach);
+  }
+
+  onChatMessage(
+    json: { from_userid: string; game: string; msg: string; ts: string; },
+    firstAttach: boolean
+  ) {
+    // Handle an incoming chat message
+    if (firstAttach)
+      console.log("First attach of chat: " + JSON.stringify(json));
+    else {
+      console.log("Chat message received: " + JSON.stringify(json));
+      if (this.model.addChatMessage(json.game, json.from_userid, json.msg, json.ts)) {
+        // A chat message was successfully added
+        this.view.notifyChatMessage();
+      }
+    }
+  }
+
+  onFullScreen() {
+    // Take action when min-width exceeds 768
+    const state = this.model.state;
+    if (state && !state.uiFullscreen) {
+      state.uiFullscreen = true;
+      this.view.notifyMediaChange();
+      m.redraw();
+    }
+  }
+
+  onMobileScreen() {
+    const state = this.model.state;
+    if (state && state.uiFullscreen !== false) {
+      state.uiFullscreen = false;
+      this.view.notifyMediaChange();
+      m.redraw();
+    }
+  }
+
+  onLandscapeScreen() {
+    const state = this.model.state;
+    if (state && !state.uiLandscape) {
+      state.uiLandscape = true;
+      this.view.notifyMediaChange();
+      m.redraw();
+    }
+  }
+
+  onPortraitScreen() {
+    const state = this.model.state;
+    if (state && state.uiLandscape !== false) {
+      state.uiLandscape = false;
+      this.view.notifyMediaChange();
+      m.redraw();
+    }
+  }
+
+  mediaMinWidth667(mql: MediaQueryList) {
+    if (mql.matches) {
+      // Take action when min-width exceeds 667
+      // (usually because of rotation from portrait to landscape)
+      // The board tab is not visible, so the movelist is default
+      this.onLandscapeScreen();
+    }
+    else {
+      // min-width is below 667
+      // (usually because of rotation from landscape to portrait)
+      // Make sure the board tab is selected
+      this.onPortraitScreen();
+    }
+  }
+
+  mediaMinWidth768(mql: MediaQueryList) {
+    if (mql.matches) {
+      this.onFullScreen();
+    }
+    else {
+      this.onMobileScreen();
+    }
+  }
+
+  initMediaListener() {
+    // Install listener functions for media changes
+
+    function addEventListener(mql: MediaQueryList, func: (ev: MediaQueryListEvent) => void) {
+      // Hack to make addEventListener work on older Safari platforms
+      try {
+        // Chrome & Firefox
+        mql.addEventListener('change', func, { passive: true });
+      } catch (e1) {
+        try {
+          // Safari
+          mql.addListener(func);
+        } catch (e2) {
+          console.error(e2);
+        }
+      }
+    }
+
+    let mql: MediaQueryList = window.matchMedia("(min-width: 667px)");
+    let view = this;
+    if (mql) {
+      this.mediaMinWidth667(mql);
+      addEventListener(mql, () => view.mediaMinWidth667(mql));
+    }
+    mql = window.matchMedia("(min-width: 768px)");
+    if (mql) {
+      this.mediaMinWidth768(mql);
+      addEventListener(mql, () => view.mediaMinWidth768(mql));
+    }
+  }
+
+  attachListenerToUser() {
+    const state = this.model.state;
+    if (state && state.userId)
+      attachFirebaseListener('user/' + state.userId,
+        (json, firstAttach) => this.onUserMessage(json, firstAttach)
+      );
+  }
+
+  detachListenerFromUser() {
+    // Stop listening to Firebase notifications for the current user
+    const state = this.model.state;
+    if (state && state.userId)
+      detachFirebaseListener('user/' + state.userId);
+  }
+
+  attachListenerToGame(uuid: string) {
+    // Listen to Firebase events on the /game/[gameId]/[userId] path
+    const state = this.model.state;
+    if (!uuid || !state) return;
+    const basepath = 'game/' + uuid + "/" + state.userId + "/";
+    // New moves
+    attachFirebaseListener(basepath + "move",
+      (json, firstAttach) => this.onMoveMessage(json, firstAttach)
+    );
+    // New chat messages
+    attachFirebaseListener(basepath + "chat",
+      (json, firstAttach) => this.onChatMessage(json, firstAttach)
+    );
+  }
+
+  detachListenerFromGame(uuid: string) {
+    // Stop listening to Firebase events on the /game/[gameId]/[userId] path
+    const state = this.model.state;
+    if (!uuid || !state) return;
+    const basepath = 'game/' + uuid + "/" + state.userId + "/";
+    detachFirebaseListener(basepath + "move");
+    detachFirebaseListener(basepath + "chat");
+  }
+
+} // class Actions
+
+export function createRouteResolver(actions: Actions): m.RouteDefs {
+
+  // Return a map of routes to onmatch and render functions
+
+  let model = actions.model;
+  let view = actions.view;
+  // let state = model.state;
+
+  return model.paths.reduce((acc, item) => {
+    acc[item.route] = {
+
+      // Navigating to a new route (passed in the second parameter)
+      onmatch: (args: Params) => {
+        // Automatically close all dialogs
+        view.popAllDialogs();
+        actions.onNavigateTo(item.name, args);
+      },
+
+      // Render a view on a model
+      render: () => { return view.appView(item.name); }
+
+    };
+    return acc;
+  }, {} as m.RouteDefs);
+}

package/src/mithril/bag.ts

@@ -0,0 +1,65 @@
+/*
+
+  Bag.ts
+
+  Bag of tiles 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 { ComponentFunc, m, VnodeChildren } from "./mithril";
+import { RACK_SIZE } from "./types";
+
+const BAG_TILES_PER_LINE = 19;
+
+interface IAttributes {
+  bag: string;
+  newbag: boolean;
+}
+
+export const Bag: ComponentFunc<IAttributes> = () => {
+  // The bag of tiles
+
+  function tiles(bag: string): VnodeChildren {
+    let r: VnodeChildren = [];
+    let ix = 0;
+    let count = bag.length;
+    while (count > 0) {
+      // Rows
+      let cols: VnodeChildren = [];
+      // Columns: max BAG_TILES_PER_LINE tiles per row
+      for (let i = 0; i < BAG_TILES_PER_LINE && count > 0; i++) {
+        let tile = bag[ix++];
+        if (tile == "?")
+          // Show wildcard tiles '?' as blanks
+          tile = "&nbsp;";
+        cols.push(m("td", m.trust(tile)));
+        count--;
+      }
+      r.push(m("tr", cols));
+    }
+    return r;
+  }
+
+  return {
+    view: (vnode) => {
+      const { bag, newbag } = vnode.attrs;
+      let cls = "";
+      if (bag.length <= RACK_SIZE)
+        cls += ".empty";
+      else if (newbag)
+        cls += ".new";
+      return m(".bag",
+        { title: ts("Flísar sem eftir eru") },
+        m("table.bag-content" + cls, tiles(bag))
+      );
+    }
+  };
+};

package/src/mithril/bestdisplay.ts

@@ -0,0 +1,74 @@
+/*
+
+  Bestdisplay.ts
+
+  Best words and 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 { ts } from "./i18n";
+import { ComponentFunc, VnodeChildren, m } from "./mithril";
+
+interface IAttributes {
+  ownStats: Record<string, any>;
+  myself: boolean;
+  id: string;
+}
+
+export const BestDisplay: ComponentFunc<IAttributes> = () => {
+  // Display the best words and best games played for a given user
+
+  return {
+
+    view: (vnode) => {
+      // Populate the highest score/best word field
+      const json = vnode.attrs.ownStats || {};
+      const best: VnodeChildren = [];
+      if (json.highest_score) {
+        best.push(ts("Hæsta skor "));
+        best.push(m("b",
+          m(m.route.Link,
+            { href: "/game/" + json.highest_score_game },
+            json.highest_score
+          )
+        ));
+      }
+      if (json.best_word) {
+        if (best.length)
+          if (vnode.attrs.myself)
+            best.push(m("br")); // Own stats: Line break between parts
+          else
+            best.push(" | "); // Opponent stats: Divider bar between parts
+        let bw = json.best_word;
+        let s = [];
+        // Make sure blank tiles get a different color
+        for (let i = 0; i < bw.length; i++)
+          if (bw[i] == '?') {
+            s.push(m("span.blanktile", bw[i + 1]));
+            i += 1;
+          }
+          else
+            s.push(bw[i]);
+        best.push(ts("Besta orð "));
+        best.push(m("span.best-word", s));
+        best.push(", ");
+        best.push(m("b",
+          m(m.route.Link,
+            { href: "/game/" + json.best_word_game },
+            json.best_word_score
+          )
+        ));
+        best.push(ts(" stig"));
+      }
+      return m("p", { id: vnode.attrs.id }, best);
+    }
+
+  };
+}

package/src/mithril/blankdialog.ts

@@ -0,0 +1,94 @@
+/*
+
+  BlankDialog.ts
+
+  Blank tile 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, IGame } from "./types";
+import { ComponentFunc, m, VnodeChildren } from "./mithril";
+import { buttonOut, buttonOver, glyph } from "./util";
+import { mt, ts } from "./i18n";
+import { DialogButton } from "./components";
+
+const BLANK_TILES_PER_LINE = 6;
+
+interface IAttributes {
+  view: IView;
+}  
+
+export const BlankDialog: ComponentFunc<IAttributes> = (initialVnode) => {
+  // A dialog for choosing the meaning of a blank tile
+
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+
+  function blankLetters(game: IGame): VnodeChildren {
+    let legalLetters = game.alphabet;
+    let len = legalLetters.length;
+    let ix = 0;
+    let r: VnodeChildren = [];
+
+    while (len > 0) {
+      /* Rows */
+      let c = [];
+      /* Columns: max BLANK_TILES_PER_LINE tiles per row */
+      for (let i = 0; i < BLANK_TILES_PER_LINE && len > 0; i++) {
+        let letter = legalLetters[ix++];
+        c.push(
+          m("td",
+            {
+              onclick: (ev: Event) => { game.placeBlank(letter); ev.preventDefault(); },
+              onmouseover: buttonOver,
+              onmouseout: buttonOut
+            },
+            m(".blank-choice.tile.racktile", letter)
+          )
+        );
+        len--;
+      }
+      r.push(m("tr", c));
+    }
+    return r;
+  }
+
+  return {
+    view: () => {
+      const game = model.game;
+      if (!game) return undefined;
+      return m(".modal-dialog",
+        {
+          id: 'blank-dialog',
+          style: { visibility: "visible" }
+        },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { id: 'blank-form' },
+          [
+            mt("p", "Hvaða staf táknar auða flísin?"),
+            m(".rack.blank-rack",
+              m("table.board", { id: 'blank-meaning' }, blankLetters(game))
+            ),
+            m(DialogButton,
+              {
+                id: 'blank-close',
+                title: ts("Hætta við"),
+                onclick: (ev: Event) => {
+                  ev.preventDefault();
+                  game.cancelBlankDialog();
+                }
+              },
+              glyph("remove")
+            )
+          ]
+        )
+      );
+    }
+  };
+};