@mideind/netskrafl-react 1.0.0-beta.5 → 1.0.0-beta.7

package/src/mithril/main.ts

@@ -1,755 +0,0 @@
-/*
-
-  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 { NetskraflLogoOnly } 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(NetskraflLogoOnly)
-          )
-        ),
-        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?.query || "robots";
-      return m("span",
-        {
-          className: (id === sel ? "shown" : ""),
-          id: id,
-          onclick: (ev: Event) => {
-            if (id === "elo") {
-              // Load Elo rating list, defaulting to the human-only rating
-              model.userListCriteria = { query: "elo", spec: "human" };
-              model.userList = null;
-              model.loadEloRatingList("human", true);
-            }
-            else {
-              // Load user list
-              model.loadUserList({ query: id, spec: "" }, true);
-              model.eloRatingSpec = null;
-              model.eloRatingList = null;
-            }
-            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 loadingElo = model.eloRatingSpec === undefined;
-      const listType = query || "robots";
-      if (listType === "elo" || loadingElo)
-        // Show Elo list
-        return [
-          m(EloPage, {
-            id: "elolist",
-            view: view,
-            spec: model.eloRatingSpec ?? null,
-            key: "elopage",
-          })
-        ];
-      // 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),
-        ),
-      ]);
-    }
-  };
-};