@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/elopage.ts

@@ -0,0 +1,180 @@
+/*
+
+  EloPage.ts
+
+  Elo status list 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, VnodeChildren, m } from "./mithril";
+import { ts, mt } from "./i18n";
+import { glyph, glyphGrayed, nbsp } from "./util";
+import { ChallengeButton, UserInfoButton } from "./components";
+
+type EloListSelection = "human" | "all" | "manual";
+
+interface IAttributes {
+  view: IView;
+  id: string;
+  key: string;
+}
+
+export const EloPage: ComponentFunc<IAttributes> = () => {
+
+  // Show the header of an Elo ranking list and then the list itself
+
+  let sel: EloListSelection = "human"; // Default: show ranking for human games only
+
+  return {
+    view: (vnode) => {
+      return m.fragment({}, [
+        m(".listitem.listheader", { key: "header" },
+          [
+            m("span.list-ch", glyphGrayed("hand-right", { title: ts('Skora á') })),
+            mt("span.list-rank", "Röð"),
+            m("span.list-rank-no-mobile", { title: ts('Röð í gær') }, ts("1d")),
+            m("span.list-rank-no-mobile", { title: ts('Röð fyrir viku') }, ts("7d")),
+            mt("span.list-nick-elo", "Einkenni"),
+            m("span.list-elo", { title: ts('Elo-stig') }, ts("Elo")),
+            m("span.list-elo-no-mobile", { title: ts('Elo-stig í gær') }, ts("1d")),
+            m("span.list-elo-no-mobile", { title: ts('Elo-stig fyrir viku') }, ts("7d")),
+            m("span.list-elo-no-mobile", { title: ts('Elo-stig fyrir mánuði') }, ts("30d")),
+            m("span.list-games", { title: ts('Fjöldi viðureigna') }, glyph("th")),
+            m("span.list-ratio", { title: ts('Vinningshlutfall') }, glyph("bookmark")),
+            m("span.list-avgpts", { title: ts('Meðalstigafjöldi') }, glyph("dashboard")),
+            mt("span.list-info-hdr", "Ferill"),
+            // m("span.list-newbag", glyphGrayed("shopping-bag", { title: ts('Gamli pokinn') })),
+            m(".toggler[id='elo-toggler']", { title: ts("elo_list_choice") },
+              [
+                m(".option.x-small",
+                  {
+                    // Show ranking for human games only
+                    className: (sel === "human" ? "selected" : ""),
+                    onclick: (ev: Event) => { sel = "human"; ev.preventDefault(); },
+                  },
+                  glyph("user")
+                ),
+                m(".option.x-small",
+                  {
+                    // Show ranking for all games, including robots
+                    className: (sel === "all" ? "selected" : ""),
+                    onclick: (ev: Event) => { sel = "all"; ev.preventDefault(); },
+                  },
+                  glyph("cog")
+                ),
+                m(".option.x-small",
+                  {
+                    // Show ranking for manual games only
+                    className: (sel === "manual" ? "selected" : ""),
+                    onclick: (ev: Event) => { sel = "manual"; ev.preventDefault(); },
+                  },
+                  glyph("lightbulb")
+                )
+              ]
+            )
+          ]
+        ),
+        m(EloList,
+          {
+            id: vnode.attrs.id,
+            sel: sel,
+            view: vnode.attrs.view,
+            key: sel,
+          }
+        )
+      ]);
+    }
+  };
+
+};
+
+const EloList: ComponentFunc<{
+  view: IView;
+  id: string;
+  sel: EloListSelection;
+}> = (initialVnode) => {
+
+  const outerView = initialVnode.attrs.view;
+  const model = outerView.model;
+  const state = model.state;
+
+  return {
+
+    view: (vnode) => {
+
+      function itemize(item: UserListItem, i: number) {
+
+        // Generate a list item about a user in an Elo ranking table
+
+        const isRobot = item.userid.indexOf("robot-") === 0;
+
+        function rankStr(rank: number, ref?: number): string {
+          // Return a rank string or dash if no rank or not meaningful
+          // (i.e. if the reference, such as the number of games, is zero)
+          if (rank === 0 || (ref !== undefined && ref === 0))
+            return "--";
+          return rank.toString();
+        }
+
+        let nick: VnodeChildren = item.nick;
+        let ch = m("span.list-ch", nbsp());
+        const userId = state?.userId ?? "";
+        if (item.userid != userId && !item.inactive) {
+          ch = m(ChallengeButton, { view: outerView, item });
+        }
+        if (isRobot) {
+          nick = m("span", [glyph("cog"), nbsp(), nick]);
+        }
+        if (item.fairplay && !isRobot)
+          nick = m("span",
+            [m("span.fairplay-btn", { title: ts("Skraflar án hjálpartækja") }), nick]);
+
+        return m(".listitem",
+          {
+            key: vnode.attrs.sel + i,
+            className: (i % 2 === 0 ? "oddlist" : "evenlist")
+          },
+          [
+            ch, // Challenge icon (right-hand)
+            m("span.list-rank.bold", rankStr(item.rank)),
+            m("span.list-rank-no-mobile", rankStr(item.rank_yesterday)),
+            m("span.list-rank-no-mobile", rankStr(item.rank_week_ago)),
+            m("span.list-nick-elo", { title: item.fullname }, nick),
+            m("span.list-elo.bold", item.elo),
+            m("span.list-elo-no-mobile", rankStr(item.elo_yesterday, item.games_yesterday)),
+            m("span.list-elo-no-mobile", rankStr(item.elo_week_ago, item.games_week_ago)),
+            m("span.list-elo-no-mobile", rankStr(item.elo_month_ago, item.games_month_ago)),
+            m("span.list-games.bold", item.games >= 100000 ? Math.round(item.games / 1000) + "K" : item.games),
+            m("span.list-ratio", item.ratio + "%"),
+            m("span.list-avgpts", item.avgpts),
+            item.userid === userId ? nbsp() : m(UserInfoButton, { view: outerView, item }),
+          ]
+        );
+      }
+
+      let list: UserListItem[] = [];
+      if (model.userList === undefined) {
+        // Loading in progress
+        // pass
+      }
+      else if (model.userList === null || model.userListCriteria?.query !== "elo" ||
+        model.userListCriteria.spec !== vnode.attrs.sel.toString()) {
+        // We're not showing the correct list: request a new one
+        model.loadUserList({ query: "elo", spec: vnode.attrs.sel }, true);
+      }
+      else {
+        list = model.userList;
+      }
+      return m("div", { id: vnode.attrs.id }, list.map(itemize));
+    }
+
+  };
+};

package/src/mithril/friend.ts

@@ -0,0 +1,227 @@
+/*
+
+  Friend.ts
+
+  Code for dialog components used in management of friends
+
+  Copyright (C) 2023 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
+
+*/
+
+export {
+  FriendPromoteDialog, FriendThanksDialog,
+  FriendCancelDialog, FriendCancelConfirmDialog
+};
+
+import { m, ComponentFunc, VnodeDOM } from "./mithril";
+import { IView } from "./types";
+import { DialogButton } from "./components";
+import { glyph, nbsp, buttonOver, buttonOut, registerSalesCloud } from "./util";
+
+const FriendPromoteDialog: ComponentFunc<{
+  view: IView;
+}> = (initialVnode) => {
+
+  // A dialog that offers friendship to the user
+
+  const attrs = initialVnode.attrs;
+  const view = attrs.view;
+  const model = view.model;
+
+  // Load the friendHTML if not already loaded
+  model.loadFriendPromo();
+
+  function onUpdate(vnode: VnodeDOM) {
+    if (!vnode || !vnode.dom)
+      return;
+    const noButtons = vnode.dom.getElementsByClassName("btn-promo-no") as HTMLCollectionOf<HTMLElement>;
+    if (noButtons) {
+      // Override onclick, onmouseover and onmouseout for No buttons
+      for (let btn of noButtons) {
+        btn.onclick = (ev: MouseEvent) => { view.popDialog(); ev.preventDefault(); };
+        btn.onmouseover = buttonOver;
+        btn.onmouseout = buttonOut;
+      }
+    }
+    // Override onmouseover and onmouseout for Yes buttons
+    const yesButtons = vnode.dom.getElementsByClassName("btn-promo-yes") as HTMLCollectionOf<HTMLElement>;
+    if (yesButtons) {
+      for (let btn of yesButtons) {
+        btn.onmouseover = buttonOver;
+        btn.onmouseout = buttonOut;
+      }
+      // We have a 'yes' button: register SalesCloud to handle it
+      registerSalesCloud();
+    }
+  }
+
+  return {
+    view: () => {
+      return m(".modal-dialog",
+        { id: "promo-dialog", style: { visibility: "visible" } },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { id: "promo-form" },
+          m(".promo-content",
+            {
+              oncreate: (vnode) => onUpdate(vnode),
+              onupdate: (vnode) => onUpdate(vnode)
+            },
+            m.trust(model.friendHTML || "<p>Sæki texta...</p>")
+          )
+        )
+      );
+    }
+  }
+};
+
+const FriendThanksDialog: ComponentFunc<{
+  view: IView;
+}> = (initialVnode) => {
+
+  // A dialog that offers friendship to the user
+
+  return {
+    view: () => {
+      return m(".modal-dialog",
+        { id: "thanks-dialog", style: { visibility: "visible" } },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { id: "thanks-form" },
+          [
+            m(".thanks-content", [
+              m("h3", "Frábært!"),
+              m("p", [
+                "Bestu þakkir fyrir að gerast ", glyph("coffee-cup"), nbsp(), m("b", "Vinur Netskrafls"), "."
+              ]),
+              m("p", [
+                "Fríðindi þín virkjast um leið og greiðsla hefur verið staðfest. ",
+                m("b", "Það getur tekið nokkrar mínútur."),
+                " Þú færð staðfestingu og kvittun í tölvupósti."
+              ]),
+            ]),
+            m(DialogButton,
+              {
+                id: "btn-thanks",
+                title: "Áfram",
+                onclick: (ev: Event) => {
+                  // Go back to the main page
+                  // The dialog is popped automatically upon the route change
+                  m.route.set("/main");
+                  ev.preventDefault();
+                }
+              },
+              glyph("ok")
+            )
+          ]
+        )
+      );
+    }
+  }
+};
+
+const FriendCancelDialog: ComponentFunc<{
+  view: IView;
+}> = (initialVnode) => {
+
+  // A dialog that offers friendship to the user
+
+  const attrs = initialVnode.attrs;
+  const view = attrs.view;
+
+  return {
+    view: () => {
+      return m(".modal-dialog",
+        { id: "cancel-dialog", style: { visibility: "visible" } },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { id: "cancel-form" }, [
+          m("div", { id: "cancel-content" }, [
+            m("h3", "Hætta sem vinur Netskrafls?"),
+            m("p", [
+              "Viltu hætta sem ", glyph("coffee-cup"), nbsp(), m("b", "vinur Netskrafls"),
+              " og missa þar með þau fríðindi sem því tengjast?"
+            ]),
+            m("p", "Fríðindin eru:"),
+            m("ul", [
+              m("li", [
+                m("b", "Ótakmarkaður fjöldi viðureigna"), " í gangi samtímis", m("br"),
+                "(í stað 8 að hámarki)"
+              ]),
+              m("li", [
+                "Aðgangur að ", m("b", "yfirliti"), " í lok viðureignar"
+              ]),
+              m("li", [
+                m("b", "Keppnishamur"), " án \"græna þumalsins\""
+              ]),
+            ]),
+            m(DialogButton,
+              {
+                id: "btn-cancel-no",
+                title: "Nei",
+                onclick: (ev: Event) => {
+                  ev.preventDefault();
+                  view.popDialog();
+                }
+              },
+              [ glyph("remove"), " Nei" ]
+            ),
+            m(DialogButton,
+              {
+                id: "btn-cancel-yes",
+                title: "Já",
+                onclick: (ev: Event) => {
+                  ev.preventDefault();
+                  view.popDialog();
+                  // Initiate cancellation of the friendship
+                  view.cancelFriendship();
+                }
+              },
+              [ glyph("ok"), " Já, vil hætta" ]
+            )
+          ]),
+        ])
+      );
+    }
+  }
+};
+
+const FriendCancelConfirmDialog: ComponentFunc<{
+  view: IView;
+}> = (initialVnode) => {
+
+  // A dialog that confirms cancellation of friendship
+
+  const attrs = initialVnode.attrs;
+  const view = attrs.view;
+
+  return {
+    view: () => {
+      return m(".modal-dialog",
+        { id: "confirm-dialog", style: { visibility: "visible" } },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { id: "confirm-form" },
+          [
+            m(".confirm-content", [
+              m("h3", "Staðfesting"),
+              m("p", [
+                "Þú ert ekki lengur skráð(ur) sem ",
+                glyph("coffee-cup"), nbsp(), m("b", "vinur Netskrafls"), "."
+              ]),
+            ]),
+            m(DialogButton,
+              {
+                id: "btn-thanks",
+                title: "Áfram",
+                onclick: (ev: Event) => {
+                  ev.preventDefault();
+                  view.popDialog();
+                }
+              },
+              glyph("ok")
+            )
+          ]
+        )
+      );
+    }
+  }
+};
+