@mideind/netskrafl-react 1.0.0-beta.1

package/src/mithril/types.ts

@@ -0,0 +1,379 @@
+/*
+
+  Types.ts
+
+  Common type definitions for the Explo/Netskrafl user interface
+
+  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 { VnodeChildren } from "./mithril";
+import { GlobalState } from "./globalstate";
+
+// Global constants
+
+export const RACK_SIZE = 7;
+export const ROWIDS = "ABCDEFGHIJKLMNO";
+export const BOARD_SIZE = ROWIDS.length;
+export const EXTRA_WIDE_LETTERS = "q";
+export const WIDE_LETTERS = "zxmæ";
+
+export const ERROR_MESSAGES: { [key: string]: string } = {
+  // Translations are found in /static/assets/messages.json
+  1: "Enginn stafur lagður niður",
+  2: "Fyrsta orð verður að liggja um byrjunarreitinn",
+  3: "Orð verður að vera samfellt á borðinu",
+  4: "Orð verður að tengjast orði sem fyrir er",
+  5: "Reitur þegar upptekinn",
+  6: "Ekki má vera eyða í orði",
+  7: "word_not_found",
+  8: "word_not_found",
+  9: "Of margir stafir lagðir niður",
+  10: "Stafur er ekki í rekkanum",
+  11: "Of fáir stafir eftir, skipting ekki leyfð",
+  12: "Of mörgum stöfum skipt",
+  13: "Leik vantar á borðið - notið F5/Refresh",
+  14: "Notandi ekki innskráður - notið F5/Refresh",
+  15: "Rangur eða óþekktur notandi",
+  16: "Viðureign finnst ekki",
+  17: "Viðureign er ekki utan tímamarka",
+  18: "Netþjónn gat ekki tekið við leiknum - reyndu aftur",
+  19: "Véfenging er ekki möguleg í þessari viðureign",
+  20: "Síðasti leikur er ekki véfengjanlegur",
+  21: "Aðeins véfenging eða pass leyfileg",
+  "server": "Netþjónn gat ekki tekið við leiknum - reyndu aftur"
+};
+
+// Items in a list of users
+export interface UserListItem {
+  rank: number;
+  rank_yesterday: number;
+  rank_week_ago: number;
+  userid: string;
+  nick: string;
+  fullname: string;
+  inactive: boolean;
+  chall: boolean;
+  fairplay: boolean;
+  ready: boolean;
+  ready_timed: boolean;
+  fav: boolean;
+  ratio: number;
+  avgpts: number;
+  games: number;
+  games_yesterday: number;
+  games_week_ago: number;
+  games_month_ago: number;
+  elo: number;
+  human_elo: number;
+  elo_yesterday: number;
+  elo_week_ago: number;
+  elo_month_ago: number;
+}
+
+// Items in a game list
+export interface GameListItem {
+  uuid: string;
+  fullname: string;
+  my_turn: boolean;
+  timed: boolean;
+  manual: boolean;
+  zombie: boolean;
+  overdue: boolean;
+  oppid: string;
+  opp: string;
+  sc0: number;
+  sc1: number;
+  url: string;
+  tile_count: number;
+  ts: string;
+}
+
+// Items in a list of recent games
+export interface RecentListItem {
+  opp: string;
+  opp_is_robot: boolean;
+  sc0: number;
+  sc1: number;
+  ts_last_move: string;
+  manual: boolean;
+  duration: number;
+  days: number;
+  hours: number;
+  minutes: number;
+  elo_adj: number;
+  human_elo_adj: number;
+  url: string;
+}
+
+// Items in a list of challenges (sent or received)
+export interface ChallengeListItem {
+  key: string;
+  userid: string;
+  received: boolean;
+  opp: string;
+  fullname: string;
+  prefs: any;
+  ts: string;
+  opp_ready: boolean;
+  live: boolean;
+  image: string;
+  fav: boolean;
+}
+
+// User preferences, typically edited in a modal dialog
+export interface UserPrefs {
+  nickname: string;
+  full_name: string;
+  email: string;
+  beginner: boolean;
+  fairplay: boolean;
+  audio: boolean;
+  fanfare: boolean;
+  logout_url: string;
+  // The following is currently read-only, i.e. only displayed
+  // and not directly modified in the user preferences dialog
+  friend: boolean;
+}
+
+// Information about a move in a move list
+export interface MoveInfo {
+  key: string;
+  leftTotal: number;
+  rightTotal: number;
+  player: 0 | 1;
+  co: string;
+  tiles: string;
+  score: number;
+}
+
+export interface MovesRequest {
+  locale: string;
+  board_type: string;
+  board: string[];
+  rack: string;
+  limit: number;
+}
+
+export interface MoveWithScore {
+  co: string;
+  w: string;
+  sc: number;
+}
+
+// The data returned from the /bestmoves API endpoint
+export interface BestMoves {
+  version: string;
+  count: number;
+  moves: MoveWithScore[];
+}
+
+export interface UserErrors {
+  nickname?: string;
+  full_name?: string;
+  email?: string;
+}
+
+export interface TileData {
+  player: 0 | 1;
+  tile: string;
+  letter: string;
+  score: number;
+  freshtile: boolean;
+  draggable: boolean;
+  review?: boolean;
+  index: number;
+  xchg: boolean;
+  highlight?: 0 | 1;
+}
+
+export interface UserStats extends Record<string, any> {
+  favorite?: boolean;
+  friend?: boolean;
+}
+
+export type TileDict = { [index: string]: TileData; };
+
+export type RackTile = [
+  tile: string,
+  score: number
+];
+
+export interface SavedTile {
+  sq: string;
+  tile: string;
+}
+
+export type TileScoreDict = { [index: string]: number; };
+
+export type Move = [
+  player: 0 | 1,
+  summary: [coord: string, tiles: string, score: number],
+  highlighted: boolean,
+];
+
+export type MoveDetail = [string];
+
+export interface MoveListener {
+  notifyMove: () => void;
+}
+
+export interface Message {
+  from_userid: string;
+  msg: string;
+  ts: string;
+}  
+
+export interface ServerGame {
+  result: number;
+  msg: string;
+  newmoves: Move[];
+  two_letter_words: string[][];
+  num_moves: number;
+  // Several other properties are also sent from the server,
+  // but they are copied using key/value enumeration
+}
+
+export type ChallengeAction = "issue" | "retract" | "decline" | "accept";
+
+export type DialogViewEnum = "userprefs" | "userinfo" | "challenge" | "promo" | "friend" | "thanks" | "cancel" | "confirm" | "wait" | "accept";
+
+export interface ChallengeParameters {
+  action: ChallengeAction;
+  destuser: string;
+  duration?: number;
+  fairplay?: boolean;
+  manual?: boolean;
+  key?: string;
+}
+
+export interface UserListCriteria {
+  query: string;
+  spec: string;
+}
+
+export interface StatsType extends Record<string, any> {
+  scores: [number, number];
+  bingoes0: number;
+  bingoes1: number;
+}
+
+export interface IGame {
+  uuid: string;
+  locale: string;
+  tiles: TileDict;
+  showingDialog: string | null;
+  selectedSq: string | null;
+  sel: string;
+  over: boolean;
+  userid: [string, string];
+  autoplayer: [boolean, boolean];
+  nickname: [string, string];
+  fullname: [string, string];
+  player: number | null; // null means that the current user is not a participant
+  moves: Move[];
+  currentScore: number | undefined;
+  wordGood: boolean;
+  wordBad: boolean;
+  localturn: boolean;
+  moveInProgress: boolean;
+  chatLoading: boolean;
+  congratulate: boolean;
+  bag: string;
+  newbag: boolean;
+  clockText0: string;
+  clockText1: string;
+  runningOut0: boolean;
+  runningOut1: boolean;
+  blinking0: boolean;
+  blinking1: boolean;
+  chatSeen: boolean;
+  fairplay: boolean;
+  manual: boolean;
+  askingForBlank: { from: string; to: string; } | null;
+  alphabet: string;
+  startSquare: string;
+  currentError: string | number | null;
+  currentMessage: string | null;
+  messages: Message[] | null;
+  stats: StatsType | null | undefined;
+  buttonState: () => Record<string, boolean>;
+  twoLetterWords: () => string[][][];
+  showClock: () => boolean;
+  displayScore: (player: 0 | 1) => number;
+  attemptMove: (from: string, to: string) => void;
+  placeBlank: (letter: string) => void;
+  cancelBlankDialog: () => void;
+  squareClass: (coord: string) => string | undefined;
+  submitResign: () => void;
+  submitChallenge: () => void;
+  submitMove: () => void;
+  submitPass: () => void;
+  submitExchange: () => void;
+  forceResign: () => Promise<void>;
+  resetRack: () => void;
+  rescrambleRack: () => void;
+  resetError: () => void;
+  sendMessage: (msg: string) => Promise<void>;
+  markChatShown: () => boolean;
+  setSelectedTab: (tab: string) => boolean;
+  placeTiles: (move?: number, noHighlight?: boolean) => void;
+  tilescore: (tile: string) => number;
+  loadStats: () => Promise<void>;
+}
+
+export interface IModel {
+  state: GlobalState | null;
+  game: IGame | null;
+  friendHTML: string | null;
+  numGames: number;
+  numChallenges: number;
+  oppReady: number;
+  gameList: GameListItem[] | null;
+  loadingGameList: boolean;
+  maxFreeGames: number;
+  ownStats: Record<string, any> | null;
+  challengeList: ChallengeListItem[] | null;
+  recentList: RecentListItem[] | null;
+  userListCriteria: UserListCriteria | null | undefined;
+  userList: UserListItem[] | null | undefined;
+  reviewMove: number | null;
+  bestMoves: Move[] | null;
+  highlightedMove: number | null;
+  moreGamesAllowed: () => boolean;
+  newGame: (oppid: string, reverse: boolean) => Promise<void>;
+  modifyChallenge: (parameters: ChallengeParameters) => Promise<void>;
+  loadFriendPromo: () => Promise<void>;
+  setUserPref: (pref: Record<string, any>) => Promise<void>;
+  markFavorite: (userId: string, status: boolean) => Promise<void>;
+  loadChallengeList: () => Promise<void>;
+  loadRecentList: () => Promise<void>;
+  loadGameList: () => Promise<void>;
+  loadUserList: (criteria: UserListCriteria, activateSpinner: boolean) => Promise<void>;
+  loadOwnStats: () => Promise<void>;
+  loadUserStats: (userid: string, readyFunc: (json: UserStats) => void) => Promise<void>;
+  loadUserRecentList: (userid: string, versus: string | null, readyFunc: (json: any) => void) => Promise<void>;
+  loadPromoContent: (key: string, readyFunc: (html: string) => void) => Promise<void>;
+  loadBestMoves: (moveIndex: number) => Promise<void>;
+}
+
+export interface IView {
+  model: IModel;
+  boardScale: number;
+  popDialog: () => void;
+  pushDialog: (dialogName: DialogViewEnum, dialogArgs?: any) => void;
+  showUserInfo: (userid: string, nick: string, fullname: string) => void;
+  showFriendPromo: () => void;
+  showAcceptDialog: (oppId: string, oppNick: string, challengeKey: string) => void;
+  cancelFriendship: () => Promise<void>;
+  updateScale: () => void;
+  resetScale: () => void;
+  isDialogShown: () => boolean;
+  vwDialogs: () => VnodeChildren;
+}

package/src/mithril/userinfodialog.ts

@@ -0,0 +1,171 @@
+/*
+
+  UserInfoDialog.ts
+
+  User information 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, RecentListItem, UserStats } from "./types";
+import { ComponentFunc, m } from "./mithril";
+import { glyph, glyphGrayed, nbsp } from "./util";
+import { mt, t, ts } from "./i18n";
+import { RecentList } from "./recentlist";
+import { StatsDisplay } from "./statsdisplay";
+import { BestDisplay } from "./bestdisplay";
+import { DialogButton } from "./components";
+
+interface IAttributes {
+  view: IView;
+  userid: string;
+  nick: string;
+  fullname: string;
+}
+
+export const UserInfoDialog: ComponentFunc<IAttributes> = (initialVnode) => {
+
+  // A dialog showing the track record of a given user, including
+  // recent games and total statistics
+
+  const view = initialVnode.attrs.view;
+  const model = view.model;
+  let stats: UserStats = {};
+  let recentList: RecentListItem[] = [];
+  let versusAll = true; // Show games against all opponents or just the current user?
+
+  function _updateStats(vnode: typeof initialVnode) {
+    // Fetch the statistics of the given user
+    model.loadUserStats(vnode.attrs.userid,
+      (json: UserStats | { result: number; }) => {
+        if (json && json.result === 0)
+          stats = json;
+        else
+          stats = {};
+      }
+    );
+  }
+
+  function _updateRecentList(vnode: typeof initialVnode) {
+    // Fetch the recent game list of the given user
+    model.loadUserRecentList(vnode.attrs.userid,
+      versusAll ? null : model.state?.userId ?? "",
+      (json: { result: number; recentlist: RecentListItem[]; }) => {
+        if (json && json.result === 0)
+          recentList = json.recentlist;
+        else
+          recentList = [];
+      }
+    );
+  }
+
+  function _setVersus(vnode: typeof initialVnode, vsState: boolean) {
+    if (versusAll != vsState) {
+      versusAll = vsState;
+      _updateRecentList(vnode);
+    }
+  }
+
+  return {
+
+    oninit: (vnode) => {
+      _updateRecentList(vnode);
+      _updateStats(vnode);
+    },
+
+    view: (vnode) => {
+      return m(".modal-dialog",
+        { id: 'usr-info-dialog', style: { visibility: "visible" } },
+        m(".ui-widget.ui-widget-content.ui-corner-all", { id: 'usr-info-form' },
+          [
+            m(".usr-info-hdr",
+              [
+                m("h1.usr-info-icon",
+                  [
+                    stats.friend ?
+                      glyph("coffee-cup", { title: ts('Vinur Netskrafls') }) :
+                      glyph("user"), nbsp()
+                  ]
+                ),
+                m("h1[id='usr-info-nick']", vnode.attrs.nick),
+                m("span.vbar", "|"),
+                m("h2[id='usr-info-fullname']", vnode.attrs.fullname),
+                m(".usr-info-fav",
+                  {
+                    title: ts('Uppáhald'),
+                    onclick: (ev: Event) => {
+                      // Toggle the favorite setting
+                      ev.preventDefault();
+                      stats.favorite = !stats.favorite;
+                      model.markFavorite(vnode.attrs.userid, stats.favorite);
+                    }
+                  },
+                  stats.favorite ? glyph("star") : glyph("star-empty")
+                )
+              ]
+            ),
+            m("p",
+              [
+                m("strong", t("Nýjustu viðureignir")),
+                nbsp(),
+                m("span.versus-cat",
+                  [
+                    m("span",
+                      {
+                        class: versusAll ? "shown" : "",
+                        onclick: () => { _setVersus(vnode, true); } // Set this.versusAll to true
+                      },
+                      t(" gegn öllum ")
+                    ),
+                    m("span",
+                      {
+                        class: versusAll ? "" : "shown",
+                        onclick: () => { _setVersus(vnode, false); } // Set this.versusAll to false
+                      },
+                      t(" gegn þér ")
+                    )
+                  ]
+                )
+              ]
+            ),
+            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') }),
+                    "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') }))
+              ]
+            ),
+            m(RecentList, { view, id: 'usr-recent', recentList }), // Recent game list
+            m(StatsDisplay, { view, id: 'usr-stats', ownStats: stats }),
+            m(BestDisplay, { id: 'usr-best', ownStats: stats, myself: false }), // Highest word and game scores
+            m(DialogButton,
+              {
+                id: 'usr-info-close',
+                title: ts('Loka'),
+                onclick: (ev: Event) => { view.popDialog(); ev.preventDefault(); }
+              },
+              glyph("ok")
+            )
+          ]
+        )
+      );
+    }
+  };
+
+}