@mideind/netskrafl-react 1.0.0-beta.2 → 1.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mideind/netskrafl-react",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.3",
   "description": "React UI for Netskrafl",
   "repository": {
     "type": "git",

package/src/components/netskrafl/Netskrafl.tsx

@@ -85,15 +85,17 @@ const NetskraflImpl: React.FC<INetskraflProps> = ({ state, tokenExpired }) => {
 
   useEffect(() => {
     // Load the Netskrafl (Mithril) UI for a new user
+    // console.log("Mounting Netskrafl UI for user", userEmail);
     if (!userEmail) return;
     const container = ref.current;
     if (!container) {
-      // console.error("Unable to mount Netskrafl UI");
+      console.error("No container for Netskrafl UI");
       return;
     }
     const elemId = `netskrafl-user-${userEmail}`;
     if (container.firstElementChild?.id === elemId) {
       // Already exists and correctly mounted
+      // console.log("Netskrafl UI already mounted with elemId", elemId);
       return;
     }
     try {
@@ -107,12 +109,13 @@ const NetskraflImpl: React.FC<INetskraflProps> = ({ state, tokenExpired }) => {
         }
       });
     } catch (err) {
-      // console.error("Failed to mount Netskrafl UI for user", userEmail);
+      console.error("Failed to mount Netskrafl UI for user", userEmail);
       const container = document.getElementById("netskrafl-container");
       if (container)
         container.innerHTML = "";
     }
     return () => {
+      // console.log("Dismounting Netskrafl UI for user", userEmail);
       // Move the Netskrafl UI to a hidden div under the body element
       // when the component is unmounted
       const container = document.getElementById("netskrafl-container");

package/src/css/skrafl-explo.css

@@ -1489,7 +1489,7 @@ div.modal-dialog#spinner-dialog {
 }
 div.animated-spinner {
   position: absolute;
-  left: 141.5px;
+  left: 50%;
   top: 271.5px;
 }
 svg circle.shadow {
@@ -1841,25 +1841,18 @@ div.submitmove#move-mobile span.glyphicon {
   margin-top: 2px;
 }
 div.force-resign {
-  font-size: 18px;
-  font-weight: 700;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  font-size: 13px;
   margin: 0;
   padding: 6px;
-  padding-top: 9px;
-  border-radius: 5px;
   cursor: pointer;
-  width: 32px;
   height: 26px;
-  background-color: var(--ok-button);
-  display: block;
-  float: right;
-  padding-top: 3px;
-  padding-bottom: 12px;
+  width: 122px;
   margin-right: 1px;
-  width: 96px;
-  text-align: center;
-  font-weight: normal;
-  font-size: 13px;
   color: white;
   background-color: var(--cancel-button);
 }
@@ -2920,7 +2913,7 @@ div.at-top-left div.tilecount div.oc {
   padding-bottom: 2px;
   background-color: transparent;
 }
-div.chat {
+div.chat-container {
   position: absolute;
   top: 0px;
   left: 0px;
@@ -3048,7 +3041,7 @@ div.gamestats {
   width: 724px;
   height: 580px;
   left: 150px;
-  top: 64px;
+  top: 24px;
   padding: 12px;
   border-radius: 5px;
   box-shadow: 3px 3px 5px 2px var(--dark-shadow);
@@ -3057,21 +3050,20 @@ div.statscol {
   display: block;
   float: left;
   width: 50%;
-  padding-top: 24px;
 }
 div.statscol p {
-  margin-top: 0.85em;
-  margin-bottom: 0.8em;
+  margin-top: 0;
+  margin-bottom: 12px;
 }
 div.gamestats p span {
   font-weight: 700;
 }
-div #gamestarted {
+div#gamestarted {
   width: 100%;
   text-align: center;
   position: relative;
-  top: 42px;
-  margin-bottom: 24px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 #gamestarted p {
   font-style: italic;
@@ -3657,6 +3649,7 @@ div.listitem {
   top: 0;
 }
 .listitem a {
+  display: flex;
   cursor: pointer;
 }
 .listitem a:link,
@@ -4157,7 +4150,7 @@ h1.usr-info-icon span.glyphicon-coffee-cup {
 div.usr-info-fav {
   display: inline-block;
   position: absolute;
-  top: 26px;
+  top: 16px;
   right: 20px;
   color: var(--triple-letter-color);
   font-size: 26px;
@@ -4654,7 +4647,7 @@ div.toggler div.option.small {
 div.toggler div.option.x-small {
   width: 30px;
   height: 20px;
-  line-height: 20px;
+  line-height: 22px;
   font-size: 15px;
   padding-top: 1px;
   padding-bottom: 3px;
@@ -4938,7 +4931,7 @@ div.signup-header {
     height: 288px;
     /* 8 lines @ 36px each */
   }
-  div.chat,
+  div.chat-container,
   div.twoletter {
     height: 474px;
   }
@@ -5038,6 +5031,9 @@ div.signup-header {
   div.rack-left div.recallbtn {
     display: none;
   }
+  div.force-resign {
+    display: none;
+  }
   div.scramblebtn {
     left: 376px;
     top: 158px;
@@ -5148,7 +5144,7 @@ div.signup-header {
   }
   div.games,
   div.twoletter,
-  div.chat {
+  div.chat-container {
     display: none;
   }
   div.right-area {
@@ -5343,12 +5339,12 @@ div.signup-header {
   }
   div.games,
   div.twoletter,
-  div.chat {
+  div.chat-container {
     display: block;
     border-radius: 0;
   }
   div.twoletter,
-  div.chat {
+  div.chat-container {
     height: 420px;
   }
   div.board-area {
@@ -5990,7 +5986,7 @@ div.signup-header {
     height: 380px;
   }
   div.right-area.with-clock div.twoletter,
-  div.right-area.with-clock div.chat {
+  div.right-area.with-clock div.chat-container {
     /* Timed game */
     height: 380px;
   }

package/src/mithril/board.ts

@@ -147,8 +147,7 @@ export const ReviewTileSquare: ComponentFunc<ITileSquareAttributes> = (initialVn
       let cls = game.squareClass(coord) || "";
       if (cls)
         cls = "." + cls;
-      if (vnode.attrs.opponent)
-        cls += ".opp";
+      cls += vnode.attrs.opponent ? ".opp" : ".local";
       return m("td" + cls, { id: "sq_" + coord }, vnode.children);
     }
   };
@@ -287,44 +286,48 @@ export const Board: ComponentFunc<IBoardAttributes> = (initialVnode) => {
   };
 }
 
-export const Rack: ComponentFunc<IBoardAttributes> = (initialVnode) => {
+export const Rack: ComponentFunc<IBoardAttributes> = () => {
   // A rack of 7 tiles
-  const { view, review } = initialVnode.attrs;
-  const model = view.model;
   return {
-    view: () => {
-      const game = model.game;
-      if (!game) return undefined;
-      let r: VnodeChildren = [];
+    view: (vnode) => {
+      const { view, review } = vnode.attrs;
       // If review==true, this is a review rack
       // that is not a drop target and whose color reflects the
       // currently shown move.
-      // If opponent==true, we're showing the opponent's rack
+      const model = view.model;
+      const game = model.game;
+      if (!game) return undefined;
+      let r: VnodeChildren = [];
       const reviewMove = model.reviewMove ?? 0;
+      // Avoid flicker when paging through game review screen,
+      // as model.reviewMove becomes undefined or 0 while we
+      // are fetching the next move to display
+      const waiting = review && (reviewMove === 0);
+      // If opponent==true, we're showing the opponent's rack
       const opponent = review && (reviewMove > 0) && (reviewMove % 2 === game.player);
       for (let i = 1; i <= RACK_SIZE; i++) {
-        const coord = 'R' + i.toString();
-        if (game && (coord in game.tiles)) {
+        const coord = `R${i}`;
+        if (!waiting && game && (coord in game.tiles)) {
           // We have a tile in this rack slot, but it is a drop target anyway
           if (review) {
             r.push(
-              m(ReviewTileSquare, { view, coord: coord, opponent: opponent },
-                m(Tile, { view, coord: coord, opponent: opponent })
+              m(ReviewTileSquare, { key: coord, view, coord, opponent },
+                m(Tile, { view, coord, opponent })
               )
             );
           } else {
             r.push(
-              m(DropTargetSquare, { view, coord: coord },
-                m(Tile, { view, coord: coord, opponent: false })
+              m(DropTargetSquare, { key: coord, view, coord },
+                m(Tile, { view, coord, opponent: false })
               )
             );
           }
         }
         else if (review) {
-          r.push(m(ReviewTileSquare, { view, coord: coord, opponent: false }));
+          r.push(m(ReviewTileSquare, { key: coord, view, coord, opponent: false }));
         }
         else {
-          r.push(m(DropTargetSquare, { view, coord: coord }));
+          r.push(m(DropTargetSquare, { key: coord, view, coord }));
         }
       }
       return m(".rack-row", [

package/src/mithril/chat.ts

@@ -181,7 +181,7 @@ export const Chat: ComponentFunc<IAttributes> = (initialVnode) => {
   const numMessages = game?.messages ? game.messages.length : 0;
 
   return {
-    view: () => m(".chat",
+    view: () => m(".chat-container",
       {
         style: "z-index: 6" // Appear on top of board on mobile
         // key: uuid

package/src/mithril/page.ts

@@ -253,7 +253,6 @@ export class View implements IView {
         );
         break;
       default:
-        // console.log("Unknown route name: " + model.routeName);
         return [ m("div", t("Þessi vefslóð er ekki rétt")) ];
     }
     // Push any open dialogs

package/src/mithril/tile.ts

@@ -26,7 +26,7 @@ interface IAttributes {
 
 export const Tile: ComponentFunc<IAttributes> = (initialVnode) => {
   // Display a tile on the board or in the rack
-  const { view, coord, opponent } = initialVnode.attrs;
+  const { view, coord } = initialVnode.attrs;
   const model = view.model;
 
   const dragHandler = (ev: MithrilMouseEvent | MithrilTouchEvent) => {
@@ -62,7 +62,8 @@ export const Tile: ComponentFunc<IAttributes> = (initialVnode) => {
   };
 
   return {
-    view: () => {
+    view: (vnode) => {
+      const { opponent } = vnode.attrs;
       const game = model.game;
       if (!game) return undefined;
       const isRackTile = coord[0] === 'R';
@@ -94,8 +95,7 @@ export const Tile: ComponentFunc<IAttributes> = (initialVnode) => {
             ev.preventDefault();
           };
         }
-      }
-      if (t.freshtile) {
+      } else if (t.freshtile) {
         // A fresh tile on the board that has
         // just been played by the opponent
         classes.push("freshtile");