@mideind/netskrafl-react 1.0.0-beta.4 → 1.0.0-beta.6

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 
 interface GlobalState {
@@ -36,6 +37,6 @@ interface INetskraflProps {
     tokenExpired?: () => void;
 }
 
-declare const Netskrafl: React.NamedExoticComponent<INetskraflProps>;
+declare const Netskrafl: React.MemoExoticComponent<({ state, tokenExpired }: INetskraflProps) => react_jsx_runtime.JSX.Element>;
 
 export { type INetskraflProps, Netskrafl };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mideind/netskrafl-react",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "description": "React UI for Netskrafl",
   "repository": {
     "type": "git",
@@ -34,6 +34,7 @@
     "@storybook/test": "^8.4.4",
     "@types/mithril": "^2.2.7",
     "@types/react": "^18.3.12",
+    "postcss-import": "^16.1.0",
     "rollup": "^4.27.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",

package/rollup.config.js

@@ -5,9 +5,10 @@ import alias from '@rollup/plugin-alias';
 import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
-import terser from "@rollup/plugin-terser";
+// import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
+import postcssImport from "postcss-import";
 import path from "path";
 
 const packageJson = require("./package.json");
@@ -31,11 +32,6 @@ export default [
     ],
     plugins: [
       peerDepsExternal(),
-      postcss({
-        extensions: [".css"],
-        modules: false,
-        // extract: "index.css",
-      }),
       alias({
         entries: [
           { find: '@', replacement: path.resolve(__dirname, 'src') }
@@ -46,7 +42,18 @@ export default [
       }),
       commonjs(),
       typescript({ tsconfig: "./tsconfig.json" }),
-      terser(),
+      postcss({
+        plugins: [
+          postcssImport(), // Handles @import concatenation
+          // No cssnano or other aggressive minifiers here for now
+        ],
+        extract: 'css/netskrafl.css', // Output path for the bundled CSS relative to 'dist'
+        // minimize: false, // Default is false, but explicitly stating it is fine
+        // sourceMap: 'inline', // Or true for a separate .css.map file. 'inline' is good for dev.
+        extensions: [".css"],
+        modules: false,
+      }),
+      // terser(), // Uncomment for production builds
     ],
     external: ["react", "react-dom"],
   },

package/src/components/netskrafl/Netskrafl.tsx

@@ -6,9 +6,7 @@ import { main } from "@/mithril/page";
 
 export { type INetskraflProps };
 
-import "@/css/fonts.css";
-import "@/css/glyphs.css";
-import "@/css/skrafl-explo.css";
+const CSS_LINK_ID = "netskrafl-styles";
 
 const DEFAULT_STATE: GlobalState = {
   projectId: "netskrafl",
@@ -78,11 +76,30 @@ const mountForUser = async (state: GlobalState, tokenExpired?: () => void): Prom
   throw new Error("Failed to mount Netskrafl UI");
 }
 
-const NetskraflImpl: React.FC<INetskraflProps> = ({ state, tokenExpired }) => {
+const NetskraflImpl = ({ state, tokenExpired }: INetskraflProps) => {
   const ref = React.createRef<HTMLDivElement>();
   const completeState = { ...DEFAULT_STATE, ...state };
   const { userEmail } = completeState;
 
+  useEffect(() => {
+    // Check if the stylesheet is already added by another instance
+    if (document.getElementById(CSS_LINK_ID)) {
+      // Optionally, you might want to increment a usage counter
+      // and only remove the link when the counter is zero.
+      // For simplicity, we'll assume one global link is fine.
+      return;
+    }
+    const link = document.createElement("link");
+    const styleUrl = `${window.location.origin}/static/css/netskrafl.css`;
+    link.id = CSS_LINK_ID;
+    link.rel = "stylesheet";
+    link.type = "text/css";
+    link.href = styleUrl;
+    // Optional: for CORS, though if it's the same base domain, it might not be needed
+    // link.crossOrigin = "anonymous";
+    document.head.appendChild(link);
+  }, []);
+
   useEffect(() => {
     // Load the Netskrafl (Mithril) UI for a new user
     // console.log("Mounting Netskrafl UI for user", userEmail);

package/src/css/glyphs.css

@@ -4,7 +4,7 @@
 
    Style support for Glyphicons
 
-   Copyright © 2024 Miðeind ehf.
+   Copyright © 2025 Miðeind ehf.
    Author: Vilhjalmur Thorsteinsson
 
    The Creative Commons Attribution-NonCommercial 4.0
@@ -15,11 +15,10 @@
 
 @font-face {
    font-family: 'Glyphicons Regular';
-   /* The following source URLs are patched up at run-time
-      to point to the backend server */
-   src: url('../fonts/glyphicons-regular.eot') format('embedded-opentype'),
-      url('../fonts/glyphicons-regular.woff') format('woff'),
-      url('../fonts/glyphicons-regular.ttf') format('truetype');
+   /* The following source URLs are assumed to be present on the host */
+   src: url('/static/fonts/glyphicons-regular.eot') format('embedded-opentype'),
+      url('/static/fonts/glyphicons-regular.woff') format('woff'),
+      url('/static/fonts/glyphicons-regular.ttf') format('truetype');
 }
 
 .glyphicon {

package/src/css/main.css

@@ -0,0 +1,4 @@
+
+@import "./fonts.css";
+@import "./glyphs.css";
+@import "./skrafl-explo.css";

package/src/css/skrafl-explo.css

@@ -42,7 +42,7 @@ div.netskrafl-container {
   --triple-letter-color: hsl(from var(--svarkur-secondary) h 70% 40%); /* #21A4B6; */
   --chat-background: hsl(from var(--malfridur-secondary) h 65% 92%);
   --ok-button: var(--malfridur-green);
-  --cancel-button: hsl(from var(--logo-primary) h 70% 45%); /* #B6676D; */
+  --cancel-button: hsl(from var(--logo-primary) h 45% 55%); /* #B6676D; */
   --human-color: hsl(from var(--svarkur-secondary) h s 35%); /* #208C9F; */
   --list-header-background: hsl(from var(--malfridur-secondary) h 85% 90%); /* #fff1d0; */
   --list-header-bottom: hsl(from var(--malfridur-secondary) h 90% 55%); /* #ffc559; */
@@ -51,6 +51,7 @@ div.netskrafl-container {
   --tab-background: #f3f3f6;
   --header-background: #dde1e4;
   --two-letter-background:  hsl(from var(--malfridur-green) h 20% 90%);
+  --header-green:  hsl(from var(--malfridur-green) h 80% 35%);
   --dark-shadow: rgba(0, 0, 0, 0.5);
   --rack-shadow: #afb7cad0;
   --focus-border: var(--triple-word-color);
@@ -347,6 +348,8 @@ div.netskrafl-logo {
   display: flex;
   align-items: center;
   justify-content: center;
+  width: 32px;
+  height: 32px;
 }
 div.rightcol {
   position: relative;
@@ -611,7 +614,7 @@ div.tile.dragging {
     becomes a child of the document body element when dragging, and
     the style variables are not in scope at the body level. */
   box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.2);
-  border-color: var(--ok-button);
+  border-color: #09814A; /* var(--ok-button); */
   border-radius: 5px;
   border-width: 3px;
   border-style: solid;
@@ -628,7 +631,7 @@ div.tile.dragging {
   box-sizing: content-box;
 }
 div.tile.dragging.no-drop {
-  border-color: var(--cancel-button);
+  border-color: #c07359; /* var(--cancel-button); */
 }
 .board td {
   min-width: 21px;
@@ -1991,7 +1994,7 @@ div#main-tabs > div[role=tabpanel] {
 div#main-tabs div.header-logo {
   padding-left: 14px;
   padding-right: 8px;
-  padding-top: 7px;
+  padding-top: 12px;
 }
 div#tabs {
   background-color: transparent;
@@ -2999,7 +3002,7 @@ div.reviewhdr {
   height: 18px;
   text-align: left;
   padding: 11px;
-  background-color: var(--ok-button);
+  background-color: var(--human-color);
   color: white;
   font-weight: 400;
   font-size: 18px;
@@ -3389,9 +3392,10 @@ div.scorediff {
   font-weight: normal;
   color: white;
   visibility: hidden;
-  padding-top: 3px;
+  padding-top: 2px;
   padding-bottom: 2px;
-  font-family: 'Open Sans', 'Arial', sans-serif;
+  font-family: var(--number-font);
+  border-radius: 5px;
 }
 div.posdiff {
   background-color: var(--ok-button);
@@ -3411,7 +3415,7 @@ div.navbtn {
   height: 30px;
   bottom: 136px;
   line-height: 24px;
-  background-color: var(--ok-button);
+  background-color: var(--human-color);
 }
 div.navbtn#navnext {
   position: absolute;
@@ -3542,12 +3546,12 @@ div#btn-cancel-no {
   top: auto;
   background-color: var(--ok-button);
 }
-.tabbed-page a:link,
-.tabbed-page a:visited {
+div.help-tabs .ui-tabs-panel a:link,
+div.help-tabs .ui-tabs-panel a:visited {
   text-decoration: none;
   color: var(--humangrad-color);
 }
-.tabbed-page a:hover {
+div.help-tabs .ui-tabs-panel a:hover {
   text-decoration: none;
   color: var(--triple-word-color);
 }
@@ -3993,13 +3997,16 @@ div#user-no-match span#search-prefix {
   font-weight: bold;
 }
 div.modal-close {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   text-align: center;
   font-size: 18px;
   font-weight: 700;
   color: white;
   margin: 0;
   padding: 6px;
-  padding-top: 9px;
   border-radius: 5px;
   cursor: pointer;
   position: absolute;
@@ -4009,6 +4016,9 @@ div.modal-close {
   right: 12px;
   top: auto;
 }
+div.modal-close span.glyphicon {
+  top: 0;
+}
 div#usr-info-close {
   width: 72px;
   /* Override */
@@ -4396,16 +4406,16 @@ div#user-unfriend {
   left: 180px;
   width: 280px;
   /* Override */
-  padding-top: 6px;
   border-style: solid;
   border-width: 2px;
   border-color: var(--ok-button);
   background-color: white;
   color: var(--ok-button);
-  line-height: 24px;
 }
 div#user-unfriend span.glyphicon-coffee-cup {
+  top: -1px;
   color: var(--triple-word-color);
+  margin-right: 8px;
 }
 div#user-cancel {
   right: 108px;
@@ -4658,11 +4668,8 @@ div.toggler div.option.x-small {
 div.toggler div.option.selected {
   background-color: var(--triple-letter-color);
 }
-div#fairplay-toggler div.option.selected {
-  background-color: var(--ok-button);
-}
-div#fairplay-toggler span.glyphicon-edit {
-  top: 0;
+div.toggler span.glyphicon {
+  top: 1px;
 }
 div #radioset {
   padding-top: 6px;
@@ -4685,11 +4692,11 @@ a.nodecorate:hover {
 }
 a.iconlink:link {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--malfridur-accent);
 }
 a.iconlink:visited {
   text-decoration: none;
-  color: var(--triple-letter-color);
+  color: var(--malfridur-accent);
 }
 a.iconlink:hover {
   text-decoration: none;
@@ -5053,7 +5060,7 @@ div.signup-header {
     border-width: 0;
     color: white;
     left: 441px;
-    background-color: var(--ok-button);
+    background-color: var(--human-color);
   }
   div.submitpass {
     top: 158px;
@@ -5268,6 +5275,10 @@ div.signup-header {
   div.logo {
     display: block;
   }
+  div.netskrafl-logo {
+    width: 46px;
+    height: 46px;
+  }
   div#main-tabs div.header-logo {
     display: none;
   }
@@ -5829,6 +5840,14 @@ div.signup-header {
   div.gamestats div.player.humancolor {
     color: white;
   }
+  div.gamestats div.player.left {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+  div.gamestats div.player.right {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
   div.scorewrapper {
     background-color: var(--humangrad-color);
     min-height: 32px;

package/src/index.ts

@@ -1,2 +1,4 @@
 
+import "@/css/main.css";
+
 export * from "./components";

package/src/mithril/components.ts

@@ -289,7 +289,7 @@ export const LeftLogo: Component = {
   view: () => m(".logo",
     m(m.route.Link,
       { href: '/main', class: "nodecorate" },
-      m(NetskraflLogoOnly, { width: 24, height: 46 })
+      m(NetskraflLogoOnly)
     )
   )
 };

package/src/mithril/i18n.ts

@@ -120,6 +120,7 @@ async function loadMessages(locale: string) {
     const messages = await request<Messages>({
       method: "GET",
       url: "/static/assets/messages.json",
+      withCredentials: false, // Cookies are not allowed for CORS request
     });
     setLocale(locale, messages);
   }

package/src/mithril/main.ts

@@ -48,7 +48,7 @@ export const Main: ComponentFunc<IAttributes> = () => {
               href: "/page",
               class: "backlink"
             },
-            m(NetskraflLogoOnly, { width: 24, height: 46 })
+            m(NetskraflLogoOnly)
           )
         ),
         m("ul", [

package/src/mithril/page.ts

@@ -482,7 +482,7 @@ export class View implements IView {
     // The function assumes that 'this' is the current view object
     if (!html)
       return "";
-    return m("div",
+    return m("div.help-tabs",
       {
         oninit: (vnode) => { vnode.state.selected = tabNumber || 1; },
         oncreate: (vnode) => { makeTabs(this, id, createFunc, true, vnode); }
@@ -667,7 +667,7 @@ export class View implements IView {
                 ev.preventDefault();
                 view.showFriendCancel()
               },
-              [glyph("coffee-cup"), nbsp(), nbsp(), ts("Þú ert vinur Netskrafls!")], 10
+              [glyph("coffee-cup"), ts("Þú ert vinur Netskrafls!")], 10
             )
             :
             this.vwDialogButton("user-friend", ts("Gerast vinur"),

package/src/mithril/review.ts

@@ -68,7 +68,7 @@ export const vwReview = (view: IView): VnodeChildren => {
                   href: "/page",
                   class: "backlink"
                 },
-                m(NetskraflLogoOnly, { width: 24, height: 46 })
+                m(NetskraflLogoOnly)
               )
             )
           ),
@@ -420,7 +420,7 @@ const vwStatsReview = (view: IView): VnodeChildren => {
     [
       m("div", { style: { position: "relative", width: "100%" } },
         [
-          m(".player", { class: leftPlayerColor, style: { width: "50%" } },
+          m(".player.left", { class: leftPlayerColor, style: { width: "50%" } },
             m(".robot-btn.left",
               game.autoplayer[0] ?
                 [glyph("cog"), nbsp(), game.nickname[0]]
@@ -428,7 +428,7 @@ const vwStatsReview = (view: IView): VnodeChildren => {
                 game.nickname[0]
             )
           ),
-          m(".player", { class: rightPlayerColor, style: { width: "50%", "text-align": "right" } },
+          m(".player.right", { class: rightPlayerColor, style: { width: "50%", "text-align": "right" } },
             m(".robot-btn.right",
               game.autoplayer[1] ?
                 [glyph("cog"), nbsp(), game.nickname[1]]

package/src/mithril/rightcolumn.ts

@@ -266,7 +266,7 @@ export const RightColumn: ComponentFunc<IAttributes> = (initialVnode) => {
                 href: "/page",
                 class: "backlink"
               },
-              m(NetskraflLogoOnly, { width: 24, height: 46 })
+              m(NetskraflLogoOnly)
             )
           )
         ),