@mideind/netskrafl-react 1.0.0-beta.6 → 1.0.0-beta.8

package/src/mithril/challengedialog.ts

@@ -1,186 +0,0 @@
-/*
-
-  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

@@ -1,162 +0,0 @@
-/*
-
-  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

@@ -1,228 +0,0 @@
-/*
-
-  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-container",
-      {
-        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"),
-            )
-          ]
-        )
-      ]
-    )
-  }
-};