@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/challengedialog.ts

@@ -0,0 +1,186 @@
+/*
+
+  ChallengeDialog.ts
+
+  Challenge 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, UserListItem } from "./types";
+import { ComponentFunc, m } from "./mithril";
+import { mt, t, ts } from "./i18n";
+import { glyph, nbsp } from "./util";
+import { DialogButton, MultiSelection, OnlinePresence } from "./components";
+
+interface IAttributes {
+  view: IView;
+  item: UserListItem;
+}
+
+export const ChallengeDialog: ComponentFunc<IAttributes> = () => {
+  // Show a dialog box for a new challenge being issued
+  let manualChallenge = false;
+  return {
+    view: (vnode) => {
+      const { view, item } = vnode.attrs;
+      const model = view.model;
+      const state = model.state;
+      if (!state) return undefined;
+      const manual = state.plan !== ""; // If subscriber/friend, allow manual challenges
+      const fairPlay = item.fairplay && state.fairPlay; // Both users are fair-play
+      return m(".modal-dialog",
+        { id: 'chall-dialog', style: { visibility: 'visible' } },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { id: 'chall-form' },
+          [
+            m(".chall-hdr",
+              m("table",
+                m("tbody",
+                  m("tr",
+                    [
+                      m("td", m("h1.chall-icon", glyph("hand-right"))),
+                      m("td.l-border",
+                        [
+                          m(OnlinePresence, { id: "chall-online", userId: item.userid }),
+                          m("h1", item.nick),
+                          m("h2", item.fullname)
+                        ]
+                      )
+                    ]
+                  )
+                )
+              )
+            ),
+            m("div", { style: { "text-align": "center" } },
+              [
+                m(".promo-fullscreen",
+                  [
+                    mt("p", [mt("strong", "Ný áskorun"), " - veldu lengd viðureignar:"]),
+                    m(MultiSelection,
+                      { initialSelection: 0, defaultClass: 'chall-time' },
+                      [
+                        m("div", { id: 'chall-none', tabindex: 1 },
+                          t("Viðureign án klukku")
+                        ),
+                        m("div", { id: 'chall-10', tabindex: 2 },
+                          [glyph("time"), t("2 x 10 mínútur")]
+                        ),
+                        m("div", { id: 'chall-15', tabindex: 3 },
+                          [glyph("time"), t("2 x 15 mínútur")]
+                        ),
+                        m("div", { id: 'chall-20', tabindex: 4 },
+                          [glyph("time"), t("2 x 20 mínútur")]
+                        ),
+                        m("div", { id: 'chall-25', tabindex: 5 },
+                          [glyph("time"), t("2 x 25 mínútur")]
+                        ),
+                        state?.runningLocal ? // !!! TODO Debugging aid
+                          m("div", { id: 'chall-3', tabindex: 6 },
+                            [glyph("time"), t("2 x 3 mínútur")]
+                          )
+                        :
+                          m("div", { id: 'chall-30', tabindex: 6 },
+                            [glyph("time"), t("2 x 30 mínútur")]
+                          )
+                      ]
+                    )
+                  ]
+                ),
+                m(".promo-mobile",
+                  [
+                    m("p", mt("strong", "Ný áskorun")),
+                    m(".chall-time.selected",
+                      { id: 'extra-none', tabindex: 1 },
+                      t("Viðureign án klukku")
+                    )
+                  ]
+                )
+              ]
+            ),
+            manual ? m("div", { id: "chall-manual" },
+              [
+                mt("span.caption.wide",
+                  [
+                    "Nota ", mt("strong", "handvirka véfengingu"),
+                    m("br"), "(\"keppnishamur\")"
+                  ]
+                ),
+                m(".toggler[id='manual-toggler'][tabindex='7']",
+                  {
+                    onclick: (ev: Event) => {
+                      manualChallenge = !manualChallenge;
+                      ev.preventDefault();
+                    }
+                  },
+                  [
+                    m(`.option${manualChallenge ? "" : ".selected"}`,
+                      m("span", nbsp())
+                    ),
+                    m(`.option${manualChallenge ? ".selected" : ""}`,
+                      glyph("lightbulb")
+                    )
+                  ]
+                )
+              ]
+            ) : "",
+            fairPlay ? m("div", { id: "chall-fairplay" },
+              [
+                t("Báðir leikmenn lýsa því yfir að þeir skrafla "),
+                m("br"),
+                mt("strong", "án stafrænna hjálpartækja"),
+                t(" af nokkru tagi"), "."
+              ]
+            ) : "",
+            m(DialogButton,
+              {
+                id: "chall-cancel",
+                title: ts("Hætta við"),
+                tabindex: 8,
+                onclick: (ev: Event) => {
+                  view.popDialog();
+                  ev.preventDefault();
+                }
+              },
+              glyph("remove")
+            ),
+            m(DialogButton,
+              {
+                id: "chall-ok",
+                title: ts("Skora á"),
+                tabindex: 9,
+                onclick: (ev: Event) => {
+                  // Issue a new challenge
+                  let duration: string | number =
+                    document.querySelector("div.chall-time.selected")?.id.slice(6) ?? "0";
+                  if (duration === "none")
+                    duration = 0;
+                  else
+                    duration = parseInt(duration);
+                  item.chall = true;
+                  model.modifyChallenge(
+                    {
+                      destuser: item.userid,
+                      action: "issue",
+                      duration: duration,
+                      fairplay: fairPlay,
+                      manual: manualChallenge
+                    }
+                  );
+                  view.popDialog();
+                  ev.preventDefault();
+                }
+              },
+              glyph("ok")
+            )
+          ]
+        )
+      );
+    }
+  };
+};

package/src/mithril/channel.ts

@@ -0,0 +1,162 @@
+/*
+
+  Channel.ts
+
+  Utility functions for working with Firebase
+
+  Copyright (C) 2024 Miðeind ehf.
+  Original 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 { FirebaseApp, FirebaseOptions, initializeApp } from 'firebase/app';
+import { getAnalytics, logEvent as firebaseLogEvent, Analytics } from 'firebase/analytics';
+import { getAuth, signInWithCustomToken, onAuthStateChanged, Auth } from 'firebase/auth';
+import { Database, getDatabase, off, onDisconnect, onValue, push, ref, remove, set } from 'firebase/database';
+
+import { GlobalState } from "./globalstate";
+
+let app: FirebaseApp;
+let auth: Auth;
+let database: Database;
+let analytics: Analytics;
+
+function initFirebase(state: GlobalState) {
+  try {
+    const projectId = state.projectId;
+    const firebaseOptions: FirebaseOptions = {
+      projectId,
+      apiKey: state.firebaseAPIKey,
+      authDomain: `${projectId}.firebaseapp.com`,
+      databaseURL: state.databaseURL,
+      storageBucket: `${projectId}.firebasestorage.app`,
+      messagingSenderId: state.firebaseSenderId,
+      appId: state.firebaseAppId,
+      measurementId: state.measurementId,
+    };
+    app = initializeApp(firebaseOptions, "netskrafl");
+    if (!app) {
+      console.error("Failed to initialize Firebase");
+    }
+  } catch (e) {
+    console.error("Failed to initialize Firebase", e);
+  }
+}
+
+export async function loginFirebase(
+  state: GlobalState,
+  firebaseToken: string,
+  onLoginFunc?: () => void
+) {
+  if (!app) initFirebase(state);
+  if (!app) return;
+  const userId = state.userId;
+  const locale = state.locale;
+  auth = getAuth(app);
+  if (!auth) {
+    console.error("Failed to initialize Firebase Auth");
+  } else {
+    // Register our login function to execute once the user login is done
+    onAuthStateChanged(auth,
+      (user) => {
+        const signedIn = (user !== null);
+        if (signedIn) {
+          // User is signed in
+          onLoginFunc && onLoginFunc();
+          // For new users, log an additional signup event
+          if (state.newUser) {
+            logEvent("sign_up",
+              {
+                locale: state.locale,
+                method: state.loginMethod,
+                userid: state.userId
+              }
+            );
+          }
+          // And always log a login event
+          logEvent("login",
+            {
+              locale: state.locale,
+              method: state.loginMethod,
+              userid: state.userId
+            }
+          );
+        } else {
+          // No user is signed in
+        }
+      }
+    );
+  }
+  // Log in to Firebase using the provided custom token
+  await signInWithCustomToken(auth, firebaseToken);
+  database = getDatabase(app);
+  if (!database) {
+    console.error("Failed to initialize Firebase Database");
+  }
+  analytics = getAnalytics(app);
+  if (!analytics) {
+    console.error("Failed to initialize Firebase Analytics");
+  }
+  initPresence(state.projectId, userId, locale);
+}
+
+function initPresence(projectId: string, userId: string, locale: string) {
+  // Ensure that this user connection is recorded in Firebase
+  if (!database) return;
+  const connectedRef = ref(database, '.info/connected');
+  // Create a unique connection entry for this user
+  const connectionPath =
+    projectId === "netskrafl"
+    ? `connection/${userId}`
+    : `connection/${locale}/${userId}`;
+  const userRef = push(ref(database, connectionPath));
+  onValue(connectedRef, (snapshot) => {
+    if (snapshot.val()) {
+      // We're connected (or reconnected)
+      // When this user disconnects, remove this entry
+      onDisconnect(userRef).remove();
+      // Set presence
+      set(userRef, true);
+    }
+    else
+      // Unset presence
+      remove(userRef);
+  });
+}
+
+export function attachFirebaseListener(
+  path: string, func: (json: any, firstAttach: boolean) => void
+) {
+  // Attach a message listener to a Firebase path
+  if (!database) return;
+  let cnt = 0;
+  const pathRef = ref(database, path);
+  onValue(pathRef, function(snapshot) {
+      // Note: we need function() here for proper closure
+      // The cnt variable is used to tell the listener whether it's being
+      // called upon the first attach or upon a later data change
+      cnt++;
+      const json = snapshot.val();
+      // console.log("received on path", path, ":", json);
+      if (json) {
+        func(json, cnt == 1);
+      }
+    });
+}
+
+export function detachFirebaseListener(path: string) {
+  // Detach a message listener from a Firebase path
+  if (!database) return;
+  const pathRef = ref(database, path);
+  off(pathRef);
+}
+
+export function logEvent(ev: string, params: any) {
+  // Log a Firebase analytics event
+  if (!analytics) return;
+  firebaseLogEvent(analytics, ev, params);
+}

package/src/mithril/chat.ts

@@ -0,0 +1,228 @@
+/*
+
+  Chat.ts
+
+  Chat component
+
+  Copyright (C) 2025 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, VnodeChildren, VnodeDOM } from "./mithril";
+import { escapeHtml, getInput, glyph, setInput } from "./util";
+import { DialogButton } from "./components";
+import { serverUrl } from "./request";
+
+// Max number of chat messages per game
+const MAX_CHAT_MESSAGES = 250;
+
+interface IAttributes {
+  view: IView;
+}
+
+const EMOTICONS = [
+  { icon: ":-)", image: "/static/icontexto_emoticons_03.png" },
+  { icon: ":-D", image: "/static/icontexto_emoticons_02.png" },
+  { icon: ";-)", image: "/static/icontexto_emoticons_04.png" },
+  { icon: ":-(", image: "/static/icontexto_emoticons_12.png" },
+  { icon: ":-o", image: "/static/icontexto_emoticons_10.png" },
+  { icon: ":-O", image: "/static/icontexto_emoticons_10.png" },
+  { icon: ":-p", image: "/static/icontexto_emoticons_14.png" },
+  { icon: ":-P", image: "/static/icontexto_emoticons_14.png" },
+  { icon: "B-)", image: "/static/icontexto_emoticons_16.png" },
+  { icon: ":)",  image: "/static/icontexto_emoticons_03.png" },
+  { icon: ":D",  image: "/static/icontexto_emoticons_02.png" },
+  { icon: ";)",  image: "/static/icontexto_emoticons_04.png" },
+  { icon: ":(",  image: "/static/icontexto_emoticons_12.png" },
+  { icon: ":o",  image: "/static/icontexto_emoticons_10.png" },
+  { icon: ":O",  image: "/static/icontexto_emoticons_10.png" },
+  { icon: ":p",  image: "/static/icontexto_emoticons_14.png" },
+  { icon: ":P",  image: "/static/icontexto_emoticons_14.png" },
+  { icon: "(y)", image: "/static/thumb-up.png" }
+];
+
+export const Chat: ComponentFunc<IAttributes> = (initialVnode) => {
+  // The chat tab
+
+  const { view } = initialVnode.attrs;
+  const model = view.model;
+  const game = model.game!;
+  const state = model.state!;
+
+  function decodeTimestamp(ts: string) {
+    // Parse and split an ISO timestamp string, formatted as YYYY-MM-DD HH:MM:SS
+    return {
+      year: parseInt(ts.slice(0, 4)),
+      month: parseInt(ts.slice(5, 7)),
+      day: parseInt(ts.slice(8, 10)),
+      hour: parseInt(ts.slice(11, 13)),
+      minute: parseInt(ts.slice(14, 16)),
+      second: parseInt(ts.slice(17, 19))
+    };
+  }
+
+  function dateFromTimestamp(ts: string) {
+    // Create a JavaScript millisecond-based representation of an ISO timestamp
+    var dcTs = decodeTimestamp(ts);
+    return Date.UTC(dcTs.year, dcTs.month - 1, dcTs.day,
+      dcTs.hour, dcTs.minute, dcTs.second);
+  }
+
+  function timeDiff(dtFrom: number, dtTo: number) {
+    // Return the difference between two JavaScript time points, in seconds
+    return Math.round((dtTo - dtFrom) / 1000.0);
+  }
+
+  let dtLastMsg: number | null = null;
+
+  function makeTimestamp(ts: string, key: number): VnodeChildren {
+    // Decode the ISO format timestamp we got from the server
+    let dtTs = dateFromTimestamp(ts);
+    let result: VnodeChildren = null;
+    if (dtLastMsg === null || timeDiff(dtLastMsg, dtTs) >= 5 * 60) {
+      // If 5 minutes or longer interval between messages,
+      // insert a time
+      const ONE_DAY = 24 * 60 * 60 * 1000; // 24 hours expressed in milliseconds
+      const dtNow = new Date().getTime();
+      let dtToday = dtNow - dtNow % ONE_DAY; // Start of today (00:00 UTC)
+      let dtYesterday = dtToday - ONE_DAY; // Start of yesterday
+      let strTs: string;
+      if (dtTs < dtYesterday) {
+        // Older than today or yesterday: Show full timestamp YYYY-MM-DD HH:MM
+        strTs = ts.slice(0, -3);
+      } else if (dtTs < dtToday) {
+        // Yesterday
+        strTs = "Í gær " + ts.slice(11, 16);
+      } else {
+        // Today
+        strTs = ts.slice(11, 16);
+      }
+      result = m(".chat-ts", { key: key }, strTs);
+    }
+    dtLastMsg = dtTs;
+    return result;
+  }
+
+  const player = game ? game.player : null;
+
+  function replaceEmoticons(str: string): string {
+    // Replace all emoticon shortcuts in the string str with a corresponding image URL
+    for (const emoticon of EMOTICONS)
+      if (str.indexOf(emoticon.icon) >= 0) {
+        // The string contains the emoticon: prepare to replace all occurrences
+        const imgUrl = serverUrl(emoticon.image);
+        const img = `<img src='${imgUrl}' height='32' width='32'>`;
+        // Re the following trick, see https://stackoverflow.com/questions/1144783/
+        // replacing-all-occurrences-of-a-string-in-javascript
+        str = str.split(emoticon.icon).join(img);
+      }
+    return str;
+  }
+
+  function chatMessages(): VnodeChildren {
+    let r: VnodeChildren = [];
+    if (game?.chatLoading || !game?.messages)
+      return r;
+    var key = 0;
+    const userId = model.state?.userId ?? "";
+    for (const msg of game.messages) {
+      let p = player ?? 0;
+      if (msg.from_userid != userId)
+        p = 1 - p;
+      const mTs = makeTimestamp(msg.ts, key);
+      if (mTs !== null) {
+        r.push(mTs);
+        key++;
+      }
+      let escMsg = escapeHtml(msg.msg);
+      escMsg = replaceEmoticons(escMsg);
+      r.push(m(".chat-msg" +
+        (p === 0 ? ".left" : ".right") +
+        (p === player ? ".local" : ".remote"),
+        { key: key++ },
+        m.trust(escMsg))
+      );
+    }
+    return r;
+  }
+
+  function scrollChatToBottom(): void {
+    // Scroll the last chat message into view
+    const chatlist = document.querySelectorAll("#chat-area .chat-msg");
+    if (!chatlist.length)
+      return;
+    const target: HTMLElement = chatlist[chatlist.length - 1] as HTMLElement;
+    (target.parentNode as HTMLElement).scrollTop = target.offsetTop;
+  }
+
+  function focus(vnode: VnodeDOM) {
+    // Put the focus on the DOM object associated with the vnode
+    if (!view.isDialogShown()) {
+      // Don't hijack the focus from a dialog overlay
+      (vnode.dom as HTMLElement).focus();
+    }
+  }
+
+  function sendMessage(): void {
+    let msg = getInput("msg").trim();
+    if (game && msg.length > 0) {
+      game.sendMessage(msg);
+      setInput("msg", "");
+    }
+  }
+
+  const numMessages = game?.messages ? game.messages.length : 0;
+
+  return {
+    view: () => m(".chat",
+      {
+        style: "z-index: 6" // Appear on top of board on mobile
+        // key: uuid
+      },
+      [
+        m(".chat-area" + (game?.showClock() ? ".with-clock" : ""),
+          {
+            id: 'chat-area',
+            // Make sure that we see the bottom-most chat message
+            oncreate: scrollChatToBottom,
+            onupdate: scrollChatToBottom
+          },
+          chatMessages()
+        ),
+        m(".chat-input",
+          [
+            m("input.chat-txt",
+              {
+                type: "text",
+                id: "msg",
+                name: "msg",
+                maxlength: 254,
+                disabled: (numMessages >= MAX_CHAT_MESSAGES),
+                oncreate: (vnode) => { focus(vnode); },
+                onupdate: (vnode) => { focus(vnode); },
+                onkeypress: (ev: KeyboardEvent) => {
+                  if (ev.key == "Enter") { sendMessage(); ev.preventDefault(); }
+                }
+              }
+            ),
+            m(DialogButton,
+              {
+                id: "chat-send",
+                title: ts("Senda"),
+                onclick: (ev: Event) => { sendMessage(); ev.preventDefault(); }
+              },
+              glyph("chat"),
+            )
+          ]
+        )
+      ]
+    )
+  }
+};