@mideind/netskrafl-react 2.0.0 → 2.0.1

package/dist/esm/index.js

@@ -31226,6 +31226,23 @@ const TogglerFairplay = () => {
 const BLANK_TILES_PER_LINE = 6;
 const BlankDialog = () => {
     // A dialog for choosing the meaning of a blank tile
+    function handleKeydown(game, ev) {
+        // Escape key cancels the dialog
+        let { key } = ev;
+        if (key === 'Escape') {
+            ev.preventDefault();
+            game.cancelBlankDialog();
+            return;
+        }
+        if (key.length === 1) {
+            // Check if the pressed key matches a valid letter
+            key = key.toLowerCase();
+            if (game.alphabet.includes(key)) {
+                ev.preventDefault();
+                game.placeBlank(key);
+            }
+        }
+    }
     function blankLetters(game) {
         const legalLetters = game.alphabet;
         let len = legalLetters.length;
@@ -31259,6 +31276,9 @@ const BlankDialog = () => {
             return m('.modal-dialog', {
                 id: 'blank-dialog',
                 style: { visibility: 'visible' },
+                tabindex: -1,
+                onkeydown: (ev) => handleKeydown(game, ev),
+                oncreate: (vnode) => vnode.dom.focus(),
             }, m('.ui-widget.ui-widget-content.ui-corner-all', { id: 'blank-form' }, [
                 mt('p', 'Hvaða staf táknar auða flísin?'),
                 m('.rack.blank-rack', m('table.board', { id: 'blank-meaning' }, blankLetters(game))),
@@ -40799,60 +40819,34 @@ async function main(state, container) {
     }
     return 'success';
 }
+function unmount(container) {
+    // Unmount the Mithril UI completely
+    // First unmount via m.mount to clean up Mithril's internal state
+    m.mount(container, null);
+    // Then clear the container to ensure a clean slate for next mount
+    container.innerHTML = '';
+}
 
-const mountForUser = async (state) => {
-    // Return a DOM tree containing a mounted Netskrafl UI
-    // for the user specified in the state object
+const mountForUser = (state, container) => {
+    // Mount a Netskrafl UI directly into the container
     const { userEmail } = state;
     if (!userEmail) {
-        // console.error("No user specified for Netskrafl UI");
-        throw new Error('No user specified for Netskrafl UI');
-    }
-    // Check whether we already have a mounted UI for this user
-    const elemId = `netskrafl-user-${userEmail}`;
-    const existing = document.getElementById(elemId);
-    if (existing) {
-        // console.log("Netskrafl UI already mounted for user", userEmail);
-        return existing;
+        return Promise.reject(new Error('No user specified for Netskrafl UI'));
     }
-    // Create a new div element to hold the UI
-    const root = document.createElement('div');
-    root.id = elemId;
-    root.className = 'netskrafl-loading';
-    // Attach the partially-mounted div to the document body
-    // as a placeholder while the UI is being mounted
-    document.body.appendChild(root);
-    const loginResult = await main(state, root);
-    if (loginResult === 'success') {
-        // The UI was successfully mounted
-        root.className = 'netskrafl-user';
-        return root;
-    }
-    // console.error("Failed to mount Netskrafl UI for user", userEmail);
-    throw new Error('Failed to mount Netskrafl UI');
+    return main(state, container).then((loginResult) => {
+        if (loginResult !== 'success') {
+            throw new Error('Failed to mount Netskrafl UI');
+        }
+    });
 };
 const NetskraflImpl = ({ state, tokenExpired }) => {
-    const ref = React.createRef();
+    const ref = React.useRef(null);
+    const mountedRef = React.useRef(false);
     const completeState = makeGlobalState({ ...state, tokenExpired });
     const { userEmail } = completeState;
-    /*
-  useEffect(() => {
-    // Check whether the stylesheet is already present
-    if (document.getElementById(CSS_LINK_ID)) return;
-    // Load and link the stylesheet into the document head
-    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;
-    document.head.appendChild(link);
-    // We don't bother to remove the stylesheet when the component is unmounted
-  }, []);
-  */
     // biome-ignore lint/correctness/useExhaustiveDependencies: The dependency is only on userEmail
     useEffect(() => {
-        // Load the Netskrafl (Mithril) UI for a new user
+        // Mount the Netskrafl (Mithril) UI for the current user
         if (!userEmail)
             return;
         const container = ref.current;
@@ -40860,36 +40854,19 @@ const NetskraflImpl = ({ state, tokenExpired }) => {
             console.error('No container for Netskrafl UI');
             return;
         }
-        const elemId = `netskrafl-user-${userEmail}`;
-        if (container.firstElementChild?.id === elemId) {
-            // The Netskrafl UI is already correctly mounted
-            return;
-        }
-        try {
-            mountForUser(completeState).then((div) => {
-                // Attach the div as a child of the container
-                // instead of any previous children
-                const container = ref.current;
-                if (container) {
-                    container.innerHTML = '';
-                    container.appendChild(div);
-                }
-            });
-        }
-        catch (_) {
-            console.error('Failed to mount Netskrafl UI for user', userEmail);
-            const container = document.getElementById('netskrafl-container');
-            if (container)
-                container.innerHTML = '';
-        }
+        // Mount Mithril directly into the container
+        mountForUser(completeState, container)
+            .then(() => {
+            mountedRef.current = true;
+        })
+            .catch((error) => {
+            console.error('Failed to mount Netskrafl UI:', error);
+        });
         return () => {
-            // Move the Netskrafl UI to a hidden div under the body element
-            // when the component is unmounted
-            // console.log("Dismounting Netskrafl UI for user", userEmail);
-            const container = document.getElementById('netskrafl-container');
-            const div = container?.firstElementChild;
-            if (div?.id === elemId) {
-                document.body.appendChild(div);
+            // Only unmount if mounting actually succeeded
+            if (mountedRef.current) {
+                unmount(container);
+                mountedRef.current = false;
             }
         };
     }, [userEmail]);