@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/main.ts

@@ -0,0 +1,737 @@
+/*
+
+  Main.ts
+
+  Main screen 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 { ChallengeAction, ChallengeListItem, IView, UserListItem } from "./types";
+import { VnodeChildren, ComponentFunc, m } from "./mithril";
+import { gameUrl, glyph, glyphGrayed, nbsp } from "./util";
+import { ExploLogoOnly } from "./logo";
+import { mt, t, ts } from "./i18n";
+import { ChallengeButton, Info, LeftLogo, TogglerReady, TogglerReadyTimed, UserId, UserInfoButton } from "./components";
+import { logEvent } from "./channel";
+import { RecentList } from "./recentlist";
+import { EloPage } from "./elopage";
+import { StatsDisplay } from "./statsdisplay";
+import { SearchButton } from "./searchbutton";
+import { makeTabs, updateSelection } from "./tabs";
+import { BestDisplay } from "./bestdisplay";
+
+interface IAttributes {
+  view: IView;
+}
+
+export const Main: ComponentFunc<IAttributes> = () => {
+  // Main screen with tabs
+
+  function vwMainTabs(view: IView): VnodeChildren {
+
+  const model = view.model;
+
+    function vwMainTabHeader(): VnodeChildren {
+      const numGames = model.numGames;
+      const numChallenges = model.numChallenges;
+      return [
+        m(".header-logo",
+          m(m.route.Link,
+            {
+              href: "/page",
+              class: "backlink"
+            },
+            m(ExploLogoOnly)
+          )
+        ),
+        m("ul", [
+          m("li",
+            m("a[href='#tabs-1']", [
+              glyph("th"), m("span.tab-legend", t("Viðureignir")),
+              m("span",
+                {
+                  id: 'numgames',
+                  style: numGames ? 'display: inline-block' : ''
+                },
+                numGames
+              )
+            ])
+          ),
+          m("li",
+            m("a[href='#tabs-2']", [
+              glyph("hand-right"), m("span.tab-legend", t("Áskoranir")),
+              // Blink if we have timed games where the opponent is ready
+              m("span" + (model.oppReady ? ".opp-ready" : ""),
+                {
+                  id: "numchallenges",
+                  style: numChallenges ? 'display: inline-block' : ''
+                },
+                numChallenges
+              )
+            ])
+          ),
+          m("li",
+            m("a[href='#tabs-3']",
+              [glyph("user"), m("span.tab-legend", t("Andstæðingar"))]
+            )
+          ),
+          m("li.no-mobile-list",
+            m("a[href='#tabs-4']",
+              [glyph("bookmark"), m("span.tab-legend", t("Ferill"))]
+            )
+          )
+        ])
+      ];
+    }
+
+    function vwGamelist(): VnodeChildren {
+
+      function vwList(): VnodeChildren {
+
+        function viewGameList(): VnodeChildren {
+
+          if (!model.gameList)
+            return "";
+          return model.gameList.map((item, i: number) => {
+
+            // Show a list item about a game in progress (or recently finished)
+
+            function vwOpp(): VnodeChildren {
+              let arg = item.oppid === null ? [glyph("cog"), nbsp(), item.opp] : item.opp;
+              return m("span.list-opp", { title: item.fullname }, arg);
+            }
+
+            function vwTurn(): VnodeChildren {
+              let turnText = "";
+              let flagClass = "";
+              if (item.my_turn) {
+                turnText = ts("Þú átt leik");
+              }
+              else
+                if (item.zombie) {
+                  turnText = ts("Viðureign lokið");
+                  flagClass = ".zombie";
+                }
+                else {
+                  // {opponent}'s move
+                  turnText = ts("opp_move", { opponent: item.opp });
+                  flagClass = ".grayed";
+                }
+              return m("span.list-myturn",
+                m("span.glyphicon.glyphicon-flag" + flagClass, { title: turnText })
+              );
+            }
+
+            function vwOverdue(): VnodeChildren {
+              if (item.overdue)
+                return glyph("hourglass",
+                  { title: item.my_turn ? "Er að renna út á tíma" : "Getur þvingað fram uppgjöf" }
+                );
+              return glyphGrayed("hourglass");
+            }
+
+            function vwTileCount(): VnodeChildren {
+              const winLose = item.sc0 < item.sc1 ? ".losing" : "";
+              return m(".tilecount",
+                m(".tc" + winLose, { style: { width: item.tile_count.toString() + "%" } })
+              );
+            }
+
+            return m(".listitem" + (i % 2 === 0 ? ".oddlist" : ".evenlist"),
+              [
+                m(m.route.Link,
+                  { href: gameUrl(item.url) },
+                  [
+                    vwTurn(),
+                    m("span.list-overdue", vwOverdue()),
+                    m("span.list-ts-short", item.ts),
+                    vwOpp()
+                  ]
+                ),
+                m(UserInfoButton, {
+                  view,
+                  item: { userid: item.oppid, nick: item.opp, fullname: item.fullname },
+                }),
+                m("span.list-s0", item.sc0),
+                m("span.list-colon", ":"),
+                m("span.list-s1", item.sc1),
+                m("span.list-tc", vwTileCount()),
+                m("span.list-manual",
+                  item.manual
+                  ? glyph("lightbulb", { title: ts("Keppnishamur") })
+                  : glyphGrayed("lightbulb")
+                )
+              ]
+            );
+          });
+        }
+
+        if (model.gameList === null)
+          model.loadGameList();
+        return m("div", { id: 'gamelist' }, viewGameList());
+      }
+
+      function vwHint(): VnodeChildren {
+        // Show some help if the user has no games in progress
+        if (model.loadingGameList || model.gameList === undefined ||
+          (model.gameList !== null && model.gameList.length > 0))
+          // Either we have games in progress or the game list is being loaded
+          return "";
+        return m(".hint", { style: { display: "block" } },
+          [
+            m("p",
+              [
+                "Ef þig vantar einhvern til að skrafla við, veldu flipann ",
+                m(m.route.Link,
+                  { href: "/main?tab=2" },
+                  [glyph("user"), nbsp(), "Andstæðingar"]
+                ),
+                " og skoraðu á tölvuþjarka - ",
+                glyph("cog"), nbsp(), m("b", "Amlóða"),
+                ", ",
+                glyph("cog"), nbsp(), m("b", "Miðlung"),
+                " eða ",
+                glyph("cog"), nbsp(), m("b", "Fullsterkan"),
+                " - eða veldu þér annan leikmann úr stafrófs\u00ADlistunum " + // Soft hyphen
+                " sem þar er að finna til að skora á."
+              ]
+            ),
+            m("p",
+              [
+                "Þú stofnar áskorun með því að smella á bendi-teiknið ",
+                glyph("hand-right", { style: { "margin-left": "6px", "margin-right": "6px" } }),
+                " vinstra megin við nafn andstæðingsins."
+              ]
+            ),
+            m("p",
+              "Tölvuþjarkarnir eru ætíð reiðubúnir að skrafla og viðureign við þá " +
+              " hefst strax. Aðrir leikmenn þurfa að samþykkja áskorun áður en viðureign hefst."
+            ),
+            m("p.no-mobile-block",
+              [
+                m(m.route.Link, { href: "/help" }, "Hjálp"),
+                " má fá með því að smella á bláa ",
+                glyph("info-sign"), nbsp(), "-", nbsp(),
+                "teiknið hér til vinstri."
+              ]
+            ),
+            m("p.no-mobile-block",
+              "Þú kemst alltaf aftur í þessa aðalsíðu með því að smella á " +
+              "örvarmerkið efst vinstra megin við skraflborðið."
+            )
+          ]
+        );
+      }
+
+      return [
+        m(".listitem.listheader",
+          [
+            m("span.list-myturn", glyphGrayed("flag", { title: ts('Átt þú leik?') })),
+            m("span.list-overdue",
+              glyphGrayed("hourglass", { title: ts('Langt frá síðasta leik?') })
+            ),
+            mt("span.list-ts-short", "Síðasti leikur"),
+            mt("span.list-opp", "Andstæðingur"),
+            mt("span.list-info-hdr", "Ferill"),
+            mt("span.list-scorehdr", "Staða"),
+            mt("span.list-tc", "Framvinda"),
+            m("span.list-manual", glyphGrayed("lightbulb", { title: ts('Keppnishamur') }))
+          ]
+        ),
+        vwList(),
+        vwHint()
+      ];
+    }
+
+    function vwChallenges(showReceived: boolean): VnodeChildren {
+
+      function vwList(): VnodeChildren {
+
+        if (!model.state) return undefined;
+        const state = model.state;
+
+        function itemize(item: ChallengeListItem, i: number) {
+
+          // Generate a list item about a pending challenge (issued or received)
+
+          function challengeDescription(json: { duration?: number; }) {
+            /* Return a human-readable string describing a challenge
+                according to the enclosed preferences */
+            if (!json || json.duration === undefined || json.duration === 0)
+              /* Normal unbounded (untimed) game */
+              return t("Venjuleg ótímabundin viðureign");
+            return t("with_clock", { duration: json.duration.toString() });
+          }
+
+          function markChallenge(ev: Event) {
+            // Clicked the icon at the beginning of the line,
+            // to decline a received challenge or retract an issued challenge
+            const action: ChallengeAction = item.received ? "decline" : "retract";
+            const param = { destuser: item.userid, action: action, key: item.key };
+            model.modifyChallenge(param);
+            ev.preventDefault();
+          }
+
+          function clickChallenge(ev: Event) {
+            // Clicked the hotspot area to accept a received challenge
+            ev.preventDefault();
+            if (!model.moreGamesAllowed()) {
+              // User must be a friend to be able to accept more challenges
+              logEvent("hit_game_limit",
+                {
+                  userid: state.userId,
+                  locale: state.locale,
+                  limit: model.maxFreeGames
+                }
+              );
+              // Promote a subscription to Netskrafl/Explo
+              view.showFriendPromo();
+              return;
+            }
+            if (item.received) {
+              if (item.prefs && item.prefs.duration !== undefined && item.prefs.duration > 0)
+                // Timed game: display a modal wait dialog
+                view.pushDialog("wait", {
+                  oppId: item.userid,
+                  oppNick: item.opp,
+                  oppName: item.fullname,
+                  duration: item.prefs.duration,
+                  challengeKey: item.key,
+                });
+              else
+                // Ask the server to create a new game and route to it
+                model.newGame(item.userid, false);
+            }
+            else {
+              // Clicking on a sent challenge, i.e. a timed game
+              // where the opponent is waiting and ready to start
+              view.showAcceptDialog(item.userid, item.opp, item.key);
+            }
+          }
+
+          const oppReady = !item.received && item.opp_ready &&
+            item.prefs && item.prefs.duration !== undefined &&
+            item.prefs.duration > 0;
+          const clickable = item.received || oppReady;
+          const descr = challengeDescription(item.prefs);
+
+          return m(".listitem" + (i % 2 === 0 ? ".oddlist" : ".evenlist"),
+            [
+              m("span.list-ch",
+                { onclick: markChallenge },
+                item.received ?
+                  glyph("thumbs-down", { title: ts("Hafna") })
+                  :
+                  glyph("hand-right", { title: ts("Afturkalla") })
+              ),
+              m(clickable ? "a" : "span",
+                clickable ? {
+                  href: "#",
+                  onclick: clickChallenge,
+                  class: oppReady ? "opp-ready" : ""
+                } : {},
+                [
+                  m("span.list-ts", item.ts),
+                  m("span.list-nick", { title: item.fullname }, item.opp),
+                  m("span.list-chall",
+                    [
+                      item.prefs.fairplay ? m("span.fairplay-btn", { title: ts("Án hjálpartækja") }) : "",
+                      item.prefs.manual ? m("span.manual-btn", { title: ts("Keppnishamur") }) : "",
+                      descr
+                    ]
+                  )
+                ]
+              ),
+              m(UserInfoButton,
+                {
+                  view,
+                  item: {
+                    userid: item.userid,
+                    nick: item.opp,
+                    fullname: item.fullname,
+                  }
+                }
+              ),
+            ]
+          );
+        }
+
+        let cList: ChallengeListItem[] = [];
+        if (model.challengeList)
+          cList = showReceived ?
+            model.challengeList.filter((item) => item.received) :
+            model.challengeList.filter((item) => !item.received);
+
+        return m("div",
+          {
+            id: showReceived ? 'chall-received' : 'chall-sent',
+            oninit: () => {
+              if (model.challengeList === null)
+                model.loadChallengeList();
+            }
+          },
+          cList.map(itemize)
+        );
+      }
+
+      const n = vwList();
+      if (!n) return [];
+
+      if (showReceived)
+        // Challenges received
+        return [
+          m(".listitem.listheader",
+            [
+              m("span.list-icon", glyphGrayed("thumbs-down", { title: ts('Hafna') })),
+              mt("span.list-ts", "Hvenær"),
+              mt("span.list-nick", "Áskorandi"),
+              mt("span.list-chall", "Hvernig"),
+              mt("span.list-info-hdr", "Ferill"),
+            ]
+          ),
+          n
+        ];
+      else
+        // Challenges sent
+        return [
+          m(".listitem.listheader",
+            [
+              m("span.list-icon", glyphGrayed("hand-right", { title: ts('Afturkalla') })),
+              mt("span.list-ts", "Hvenær"),
+              mt("span.list-nick", "Andstæðingur"),
+              mt("span.list-chall", "Hvernig"),
+              mt("span.list-info-hdr", "Ferill"),
+            ]
+          ),
+          n
+        ];
+    }
+
+    function vwRecentList(): VnodeChildren {
+
+      function vwList(): VnodeChildren {
+        if (model.recentList === null)
+          model.loadRecentList();
+        return m(RecentList,
+          {
+            view,
+            id: "recentlist",
+            recentList: model.recentList || [],
+          }
+        );
+      }
+
+      return [
+        m(".listitem.listheader",
+          [
+            m("span.list-win", glyphGrayed("bookmark", { title: ts('Sigur') })),
+            mt("span.list-ts-short", "Viðureign lauk"),
+            mt("span.list-nick", "Andstæðingur"),
+            mt("span.list-scorehdr", "Úrslit"),
+            m("span.list-elo-hdr",
+              [
+                m("span.glyphicon.glyphicon-user.elo-hdr-left", { title: ts('Mennskir andstæðingar') }),
+                t("Elo"),
+                m("span.glyphicon.glyphicon-cog.elo-hdr-right", { title: ts('Allir andstæðingar') })
+              ]
+            ),
+            mt("span.list-duration", "Lengd"),
+            m("span.list-manual", glyphGrayed("lightbulb", { title: ts('Keppnishamur') }))
+          ]
+        ),
+        vwList()
+      ];
+    }
+
+    function vwUserButton(id: string, icon: string, text: string): VnodeChildren {
+      // Select the type of user list (robots, fav, alike, elo)
+      const sel = model.userListCriteria ? model.userListCriteria.query : "robots";
+      const spec = (id === "elo") ? "human" : "";
+      return m("span",
+        {
+          className: (id === sel ? "shown" : ""),
+          id: id,
+          onclick: (ev: Event) => {
+            model.loadUserList({ query: id, spec: spec }, true);
+            ev.preventDefault();
+          }
+        },
+        [glyph(icon, { style: { padding: 0 } }), nbsp(), text]
+      );
+    }
+
+    function vwUserList(): VnodeChildren {
+
+      function vwList(list: UserListItem[]) {
+
+        function itemize(item: UserListItem, i: number) {
+
+          // Generate a list item about a user
+
+          const isRobot = item.userid.indexOf("robot-") === 0;
+          let fullname: VnodeChildren = [];
+
+          // Online and accepting challenges
+          if (item.ready && !isRobot) {
+            fullname.push(m("span.ready-btn", { title: ts("Álínis og tekur við áskorunum") }));
+            fullname.push(nbsp());
+          }
+          // Willing to accept challenges for timed games
+          if (item.ready_timed) {
+            fullname.push(m("span.timed-btn", { title: ts("Til í viðureign með klukku") }));
+            fullname.push(nbsp());
+          }
+          // Fair play commitment
+          if (item.fairplay) {
+            fullname.push(m("span.fairplay-btn", { title: ts("Skraflar án hjálpartækja") }));
+            fullname.push(nbsp());
+          }
+          fullname.push(item.fullname);
+
+          function fav(): VnodeChildren {
+            if (isRobot)
+              return m("span.list-fav", { style: { cursor: "default" } }, glyph("star-empty"));
+            return m("span.list-fav",
+              {
+                title: ts("Uppáhald"),
+                onclick: (ev: Event) => {
+                  item.fav = !item.fav;
+                  model.markFavorite(item.userid, item.fav);
+                  ev.preventDefault();
+                }
+              },
+              glyph(item.fav ? "star" : "star-empty")
+            );
+          }
+
+          function userLink(): VnodeChildren {
+            if (isRobot)
+              return m("a",
+                {
+                  href: "",
+                  onclick: (ev: Event) => {
+                    // Start a new game against the robot
+                    model.newGame(item.userid, false);
+                    ev.preventDefault();
+                  }
+                },
+                [
+                  m("span.list-nick", [glyph("cog"), nbsp(), item.nick]),
+                  m("span.list-fullname-robot", fullname)
+                ]
+              );
+            else
+              return m.fragment({}, [
+                m("span.list-nick", item.nick),
+                m("span.list-fullname", fullname),
+                m("span.list-human-elo", item.human_elo)
+              ]);
+          }
+
+          return m(".listitem" + (i % 2 === 0 ? ".oddlist" : ".evenlist"),
+            [
+              m(ChallengeButton, { view, item }),
+              fav(),
+              userLink(),
+              m(UserInfoButton, { view, item }),
+            ]
+          );
+        }
+
+        return m("div", { id: "userlist" }, list.map(itemize));
+      }
+
+      // The type of list to show; by default it's 'robots'
+      const query = model.userListCriteria?.query ?? "";
+      const spec = model.userListCriteria?.spec ?? "";
+      const listType = query || "robots";
+      if (listType === "elo")
+        // Show Elo list
+        return [ m(EloPage, { id: "elolist", view: view, key: "elolist" }) ];
+      // Show normal user list
+      let list: UserListItem[] = [];
+      if (model.userList === undefined) {
+        // We are loading a fresh user list
+        /* pass */
+      }
+      else
+      if (model.userList === null || query !== listType)
+        model.loadUserList({ query: listType, spec: "" }, true);
+      else
+        list = model.userList;
+      const nothingFound = list.length === 0 && listType === "search" && spec !== "";
+      const robotList = listType === "robots";
+      return [
+        m(".listitem.listheader",
+          [
+            m("span.list-ch", glyphGrayed("hand-right", { title: ts('Skora á') })),
+            m("span.list-fav", glyph("star-empty", { title: ts('Uppáhald') })),
+            mt("span.list-nick", "Einkenni"),
+            mt("span.list-fullname", "Nafn og merki"),
+            robotList ? "" : mt("span.list-human-elo[id='usr-list-elo']", "Elo"),
+            robotList ? "" : mt("span.list-info-hdr[id='usr-list-info']", "Ferill"),
+          ]
+        ),
+        vwList(list),
+        // Show indicator if search didn't find any users matching the criteria
+        nothingFound ?
+          m("div",
+            { id: "user-no-match", style: { display: "block" } },
+            [
+              glyph("search"),
+              " ",
+              m("span", { id: "search-prefix" }, spec),
+              t(" finnst ekki")
+            ]
+          )
+          : undefined
+      ];
+    }
+
+    function vwStats(): VnodeChildren {
+      // View the user's own statistics summary
+      const ownStats = model.ownStats;
+      if (ownStats === null)
+        model.loadOwnStats();
+      return ownStats && m(StatsDisplay, { view, id: 'own-stats', ownStats });
+    }
+
+    function vwBest(): VnodeChildren {
+      // View the user's own best game and word scores
+      const ownStats = model.ownStats;
+      if (ownStats === null)
+        model.loadOwnStats();
+      return ownStats && m(BestDisplay, { id: 'own-best', ownStats, myself: true });
+    }
+
+    function tab1(): VnodeChildren {
+      // Ongoing games
+      return m("div", { id: 'tabs-1' },
+        [
+          mt("p.no-mobile-block",
+            [
+              mt("strong", "Viðureignir sem standa yfir"),
+              "click_on_game", // "Click on a game to view it and make a move if"
+              glyph("flag"),
+              " þú átt leik"
+            ]
+          ),
+          vwGamelist()
+        ]
+      );
+    }
+
+    function tab2(): VnodeChildren {
+      // Challenges received and sent
+      return m("div", { id: 'tabs-2' },
+        [
+          mt("p.no-mobile-block",
+            [
+              mt("strong", "Skorað á þig"),
+              "click_on_challenge", // "Click on a challenge to accept it and start a game, or on"
+              glyph("thumbs-down", { style: { "margin-left": "6px", "margin-right": "6px" } }),
+              " til að hafna henni"
+            ]
+          ),
+          vwChallenges(true),
+          mt("p.no-mobile-block",
+            [
+              mt("strong", "Þú skorar á aðra"),
+              " - smelltu á ",
+              glyph("hand-right", { style: { "margin-left": "6px", "margin-right": "6px" } }),
+              " til að afturkalla áskorun"
+            ]
+          ),
+          vwChallenges(false)
+        ]
+      );
+    }
+
+    function tab3(): VnodeChildren {
+      // Opponent lists
+      return m("div", { id: 'tabs-3' },
+        [
+          m("div", { id: 'initials' },
+            [
+              m(".user-cat[id='user-headings']",
+                [
+                  vwUserButton("robots", "cog", ts("Þjarkar")),
+                  " ",
+                  vwUserButton("fav", "star", ts("Uppáhalds")),
+                  " ",
+                  vwUserButton("live", "flash", ts("Álínis")),
+                  " ",
+                  vwUserButton("alike", "resize-small", ts("Svipaðir")),
+                  " ",
+                  vwUserButton("elo", "crown", ts("Topp 100"))
+                ]
+              ),
+              m(SearchButton, { view })
+            ]
+          ),
+          vwUserList()
+        ]
+      );
+    }
+
+    function tab4(): VnodeChildren {
+      // Recent games and statistics
+      return m("div", { id: 'tabs-4' },
+        [
+          vwStats(),
+          vwBest(),
+          mt("p.no-mobile-block",
+            [
+              mt("strong", "Nýlegar viðureignir þínar"),
+              "click_to_review" // "Click on a game to review it"
+            ]
+          ),
+          vwRecentList()
+        ]
+      );
+    }
+
+    return m(".tabbed-page",
+      m("div", { id: 'main-tabs' },
+        [
+          vwMainTabHeader(),
+          m("div.tab-scroll-area", [
+            tab1(),
+            tab2(),
+            tab4(),
+            tab3(),
+          ]),
+        ]
+      )
+    );
+  }
+
+  return {
+    view: (vnode) => {
+      const view = vnode.attrs.view;
+      return m.fragment({}, [
+        m(LeftLogo), // No legend, scale up by 50%
+        m(UserId, { view }),
+        m(Info),
+        m(TogglerReady, { view }),
+        m(TogglerReadyTimed, { view }),
+        m("div",
+          {
+            oncreate: (vnode) => {
+              makeTabs(view, "main-tabs", undefined, false, vnode);
+            },
+            onupdate: updateSelection
+          },
+          vwMainTabs(view),
+        ),
+      ]);
+    }
+  };
+};