@mideind/netskrafl-react 2.0.0 → 2.1.0

package/dist/cjs/index.js

@@ -30017,6 +30017,34 @@ function formatDate(dateStr) {
     const month = ts(MONTH_KEYS[date.getUTCMonth()]);
     return ts('date_format', { day, month });
 }
+function setDefaultFocus(delay = 0) {
+    // Set focus to the main container element to enable keyboard input.
+    // Use class selector to work with both Netskrafl and Gáta dagsins.
+    // An optional delay can be specified to wait for rendering to complete.
+    const doFocus = () => {
+        const container = document.querySelector('.netskrafl-container');
+        container?.focus();
+    };
+    if (delay > 0) {
+        setTimeout(doFocus, delay);
+    }
+    else {
+        setTimeout(doFocus);
+    }
+}
+function setKeyboardHandler(handler, delay = 100) {
+    // Set up keyboard handling on the main container element.
+    // Use class selector to work with both Netskrafl and Gáta dagsins.
+    // The handler is attached after a delay to ensure the DOM is ready.
+    setTimeout(() => {
+        const container = document.querySelector('.netskrafl-container');
+        if (container) {
+            container.tabIndex = 0;
+            container.addEventListener('keydown', handler);
+            container.focus();
+        }
+    }, delay);
+}
 
 /*
 
@@ -30066,6 +30094,8 @@ class Actions {
                 if (!model.state?.uiFullscreen)
                     // Mobile UI: show board tab
                     view.setSelectedTab('board');
+                // Focus the container to enable keyboard input
+                setDefaultFocus(100);
             }, deleteZombie);
             if (model.game !== null && model.game !== undefined) {
                 logEvent('game_open', {
@@ -31228,6 +31258,31 @@ const TogglerFairplay = () => {
 const BLANK_TILES_PER_LINE = 6;
 const BlankDialog = () => {
     // A dialog for choosing the meaning of a blank tile
+    function cancel(game) {
+        game.cancelBlankDialog();
+        setDefaultFocus();
+    }
+    function place(game, letter) {
+        game.placeBlank(letter);
+        setDefaultFocus();
+    }
+    function handleKeydown(game, ev) {
+        // Escape key cancels the dialog
+        let { key } = ev;
+        if (key === 'Escape') {
+            ev.preventDefault();
+            cancel(game);
+            return;
+        }
+        if (key.length === 1) {
+            // Check if the pressed key matches a valid letter
+            key = key.toLowerCase();
+            if (game.alphabet.includes(key)) {
+                ev.preventDefault();
+                place(game, key);
+            }
+        }
+    }
     function blankLetters(game) {
         const legalLetters = game.alphabet;
         let len = legalLetters.length;
@@ -31241,8 +31296,8 @@ const BlankDialog = () => {
                 const letter = legalLetters[ix++];
                 c.push(m('td', {
                     onclick: (ev) => {
-                        game.placeBlank(letter);
                         ev.preventDefault();
+                        place(game, letter);
                     },
                     onmouseover: buttonOver,
                     onmouseout: buttonOut,
@@ -31261,6 +31316,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))),
@@ -31269,7 +31327,7 @@ const BlankDialog = () => {
                     title: ts('Hætta við'),
                     onclick: (ev) => {
                         ev.preventDefault();
-                        game.cancelBlankDialog();
+                        cancel(game);
                     },
                 }, glyph('remove')),
             ]));
@@ -31544,6 +31602,8 @@ const Buttons = {
   drag-and-drop does not offer enough flexibility for our requirements.
 
 */
+// Minimum movement in pixels before a mousedown becomes a drag
+const DRAG_THRESHOLD = 10;
 class DragManager {
     getEventCoordinates(e) {
         if (e instanceof MouseEvent) {
@@ -31563,28 +31623,58 @@ class DragManager {
             p.y >= rect.top &&
             p.y < rect.bottom);
     }
-    constructor(e, dropHandler) {
+    constructor(e, dropHandler, clickHandler) {
         this.parentElement = null;
         this.parentRect = null;
         this.offsetX = 0;
         this.offsetY = 0;
         this.centerX = 0;
         this.centerY = 0;
+        this.startX = 0;
+        this.startY = 0;
         this.lastX = 0;
         this.lastY = 0;
         this.currentDropTarget = null;
-        e.preventDefault();
+        this.dragStarted = false;
         // Note: We use e.currentTarget here, not e.target, as we may be
         // handling events that were originally targeted at a child element
         // (such as the letter or score elements within a tile).
         const dragged = e.currentTarget;
+        // Prevent the click event (which fires after mouseup) from bubbling
+        // to parent elements like DropTargetSquare
+        dragged.addEventListener('click', (ev) => ev.stopPropagation(), {
+            once: true,
+        });
         const coords = this.getEventCoordinates(e);
+        this.startX = coords.x;
+        this.startY = coords.y;
         this.lastX = coords.x;
         this.lastY = coords.y;
         this.draggedElement = dragged;
         this.dropHandler = dropHandler;
+        this.clickHandler = clickHandler;
         this.parentElement = dragged.parentElement;
         this.parentRect = this.parentElement?.getBoundingClientRect() ?? null;
+        // Create bound event handlers that properly assign 'this'
+        this.boundEventHandlers = {
+            drag: this.drag.bind(this),
+            endDrag: this.endDrag.bind(this),
+        };
+        const { drag, endDrag } = this.boundEventHandlers;
+        if (e instanceof MouseEvent) {
+            document.addEventListener('mousemove', drag);
+            document.addEventListener('mouseup', endDrag);
+        }
+        else if (e instanceof TouchEvent) {
+            document.addEventListener('touchmove', drag, { passive: false });
+            document.addEventListener('touchend', endDrag);
+        }
+    }
+    initiateDrag(e) {
+        // Called when movement exceeds the drag threshold
+        e.preventDefault();
+        this.dragStarted = true;
+        const dragged = this.draggedElement;
         // Find out the bounding rectangle of the element
         // before starting to apply modifications
         const rect = dragged.getBoundingClientRect();
@@ -31599,28 +31689,16 @@ class DragManager {
         // Find out the dimensions of the element in its dragged state
         const { offsetWidth, offsetHeight } = dragged;
         // Offset of the click or touch within the dragged element
-        this.offsetX = coords.x - rect.left + (offsetWidth - originalWidth) / 2;
+        // Use the original start position for offset calculation
+        this.offsetX =
+            this.startX - rect.left + (offsetWidth - originalWidth) / 2;
         this.offsetY =
-            coords.y - rect.top + (offsetHeight - originalHeight) / 2;
+            this.startY - rect.top + (offsetHeight - originalHeight) / 2;
         this.centerX = offsetWidth / 2;
         this.centerY = offsetHeight / 2;
-        // Create bound event handlers that properly assign 'this'
-        this.boundEventHandlers = {
-            drag: this.drag.bind(this),
-            endDrag: this.endDrag.bind(this),
-        };
-        const { drag, endDrag } = this.boundEventHandlers;
-        if (e instanceof MouseEvent) {
-            document.addEventListener('mousemove', drag);
-            document.addEventListener('mouseup', endDrag);
-        }
-        else if (e instanceof TouchEvent) {
-            document.addEventListener('touchmove', drag, { passive: false });
-            document.addEventListener('touchend', endDrag);
-        }
         // Do an initial position update, as the size of the dragged element
         // may have changed, and it should remain centered
-        this.updatePosition(coords.x, coords.y);
+        this.updatePosition(this.lastX, this.lastY);
     }
     removeDragListeners() {
         const { drag, endDrag } = this.boundEventHandlers;
@@ -31675,8 +31753,19 @@ class DragManager {
         this.currentDropTarget = dropTarget;
     }
     drag(e) {
-        e.preventDefault();
+        e.stopPropagation();
         const coords = this.getEventCoordinates(e);
+        this.lastX = coords.x;
+        this.lastY = coords.y;
+        if (!this.dragStarted) {
+            // Check if movement exceeds threshold
+            const distance = Math.sqrt((coords.x - this.startX) ** 2 + (coords.y - this.startY) ** 2);
+            if (distance >= DRAG_THRESHOLD) {
+                this.initiateDrag(e);
+            }
+            return;
+        }
+        e.preventDefault();
         // Update position for both mouse and touch events
         this.updatePosition(coords.x, coords.y);
         this.updateDropTarget(coords.x, coords.y);
@@ -31699,13 +31788,21 @@ class DragManager {
         }
     }
     endDrag(e) {
+        e.stopPropagation();
+        this.removeDragListeners();
+        if (!this.dragStarted) {
+            // No drag occurred - treat as a click
+            if (this.clickHandler) {
+                this.clickHandler(this.draggedElement);
+            }
+            return;
+        }
         e.preventDefault();
         const coords = this.getEventCoordinates(e);
         const dropTarget = this.findDropTargetAtPoint(coords.x, coords.y);
         if (this.currentDropTarget) {
             this.currentDropTarget.classList.remove('over');
         }
-        this.removeDragListeners();
         // Avoid flicker by hiding the element while we are manipulating its
         // position in the DOM tree and completing the drop operation
         this.draggedElement.style.visibility = 'hidden';
@@ -31719,8 +31816,9 @@ class DragManager {
         });
     }
 }
-const startDrag = (e, dropHandler) => {
-    new DragManager(e, dropHandler);
+const startDrag = (e, dropHandler, clickHandler) => {
+    e.stopPropagation();
+    new DragManager(e, dropHandler, clickHandler);
 };
 
 /*
@@ -31737,11 +31835,10 @@ const startDrag = (e, dropHandler) => {
   For further information, see https://github.com/mideind/Netskrafl
 
 */
-const Tile = (initialVnode) => {
-    // Display a tile on the board or in the rack
-    const { view, game, coord } = initialVnode.attrs;
-    const dragHandler = (ev) => {
-        // Start a drag-and-drop process, for mouse or touch interaction
+const createDragHandler = (view, game, coord) => {
+    return (ev) => {
+        // Start a drag-and-drop process, for mouse or touch interaction.
+        // If the user clicks without dragging, toggle tile selection.
         startDrag(ev, (_, target) => {
             // Drop handler
             if (!game)
@@ -31770,15 +31867,28 @@ const Tile = (initialVnode) => {
                     console.error(e);
                 }
             }
+        }, () => {
+            // Click handler: toggle tile selection
+            if (!game)
+                return;
+            if (coord === game.selectedSq)
+                // Clicking again: deselect
+                game.selectedSq = null;
+            else
+                game.selectedSq = coord;
+            m.redraw();
         });
         ev.redraw = false;
         return false;
     };
+};
+const Tile = () => {
+    // Display a tile on the board or in the rack
     return {
         view: (vnode) => {
+            const { view, game, coord, opponent } = vnode.attrs;
             if (!game)
                 return undefined;
-            const { opponent } = vnode.attrs;
             const isRackTile = coord[0] === 'R';
             // A single tile, on the board or in the rack
             const t = game.tiles[coord];
@@ -31834,20 +31944,9 @@ const Tile = (initialVnode) => {
         */
             }
             if (t.draggable && game.allowDragDrop()) {
+                const dragHandler = createDragHandler(view, game, coord);
                 attrs.onmousedown = dragHandler;
                 attrs.ontouchstart = dragHandler;
-                /*
-        attrs.onclick = (ev: MouseEvent) => {
-          // When clicking a tile, make it selected (blinking)
-          if (coord === game.selectedSq)
-            // Clicking again: deselect
-            game.selectedSq = null;
-          else
-            game.selectedSq = coord;
-          ev.stopPropagation();
-          return false;
-        };
-        */
             }
             return m(classes.join('.'), attrs, [
                 t.letter === ' ' ? nbsp() : t.letter,
@@ -31904,7 +32003,7 @@ const ReviewTileSquare = {
 const DropTargetSquare = {
     // Return a td element that is a target for dropping tiles
     view: (vnode) => {
-        const { view, game, coord } = vnode.attrs;
+        const { view, game, coord, isKeyboardTarget, keyboardDirection } = vnode.attrs;
         if (!game)
             return undefined;
         let cls = game.squareClass(coord) || '';
@@ -31917,6 +32016,12 @@ const DropTargetSquare = {
         if (coord === game.startSquare && game.localturn)
             // Unoccupied start square, first move
             cls += '.center';
+        // Mark the cell as the keyboard target if applicable
+        if (isKeyboardTarget) {
+            cls += '.keyboard-target';
+            if (keyboardDirection === 'V')
+                cls += '.vertical';
+        }
         return m(`td.drop-target${cls}`, {
             id: `sq_${coord}`,
             onclick: (ev) => {
@@ -32103,6 +32208,8 @@ const Board = {
       if (scale !== 1.0)
         attrs.style = `transform: scale(${scale})`;
       */
+        // Get the next keyboard target square for visual feedback
+        const nextKeyboardSquare = !review ? game.getNextKeyboardSquare() : null;
         function colid() {
             // The column identifier row
             const r = [];
@@ -32142,6 +32249,8 @@ const Board = {
                         game,
                         key: coord,
                         coord: coord,
+                        isKeyboardTarget: coord === nextKeyboardSquare,
+                        keyboardDirection: game?.getEffectiveKeyboardDirection(),
                     }));
             }
             return m('tr', r);
@@ -33475,6 +33584,80 @@ const currentMoveState = (riddle) => {
     return { selectedMoves, bestMove };
 };
 
+/*
+
+  Keyboard.ts
+
+  Keyboard event handling for tile placement
+
+  Copyright (C) 2025 Miðeind ehf.
+  Author: Vilhjálmur Þorsteinsson
+
+  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
+
+*/
+function handleGameKeydown(game, view, ev) {
+    // Skip if the target is an input element (text fields, textareas, etc.)
+    const target = ev.target;
+    if (target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.tagName === 'SELECT' ||
+        target.isContentEditable) {
+        return;
+    }
+    // Skip if dialog is showing (except for blank dialog which has its own handler)
+    if (game.showingDialog)
+        return;
+    // Skip if blank tile dialog is active (it has its own keyboard handler)
+    if (game.askingForBlank !== null)
+        return;
+    const { key } = ev;
+    // Arrow keys: set direction
+    if (key === 'ArrowRight') {
+        ev.preventDefault();
+        game.setKeyboardDirection('H');
+        m.redraw();
+        return;
+    }
+    if (key === 'ArrowDown') {
+        ev.preventDefault();
+        game.setKeyboardDirection('V');
+        m.redraw();
+        return;
+    }
+    // Backspace: undo last keyboard tile
+    if (key === 'Backspace') {
+        ev.preventDefault();
+        if (game.undoLastKeyboardTile()) {
+            view.updateScale();
+            m.redraw();
+        }
+        return;
+    }
+    // Escape: recall all tiles to rack
+    if (key === 'Escape') {
+        ev.preventDefault();
+        game.resetRack();
+        view.updateScale();
+        m.redraw();
+        return;
+    }
+    // Letter keys: place tile
+    if (key.length === 1) {
+        const letter = key.toLowerCase();
+        if (game.alphabet.includes(letter)) {
+            ev.preventDefault();
+            if (game.placeKeyboardTile(letter)) {
+                view.updateScale();
+                m.redraw();
+            }
+            return;
+        }
+    }
+}
+
 /*
 
   Localstorage.ts
@@ -33800,8 +33983,11 @@ class BaseGame {
         // UI state
         this.showingDialog = null;
         this.selectedSq = null;
-        this.sel = 'movelist';
+        this.sel = 'movelist'; // Selected tab
         this.askingForBlank = null;
+        // Keyboard tile placement state
+        this.keyboardDirection = 'H'; // Default to horizontal
+        this.keyboardPlacedTiles = []; // Stack of tiles placed via keyboard
         // Local storage
         this.localStorage = null;
         this.uuid = uuid;
@@ -33915,6 +34101,13 @@ class BaseGame {
         this._moveTile(from, to);
         // Clear error message, if any
         this.currentError = this.currentMessage = null;
+        // If placing the first tile on the board, set default direction
+        if (from[0] === 'R' && to[0] !== 'R') {
+            const placed = this.tilesPlaced();
+            if (placed.length === 1) {
+                this.setDefaultDirection(to);
+            }
+        }
         // Update the current word score
         this.updateScore();
         // Update the local storage
@@ -33939,12 +34132,12 @@ class BaseGame {
         // Return a list of coordinates of tiles that the user has
         // placed on the board by dragging from the rack
         const r = [];
-        for (const sq in this.tiles)
-            if (Object.hasOwn(this.tiles, sq) &&
-                sq[0] !== 'R' &&
-                this.tiles[sq].draggable)
+        for (const sq of Object.keys(this.tiles)) {
+            if (sq[0] !== 'R' && this.tiles[sq].draggable) {
                 // Found a non-rack tile that is not glued to the board
                 r.push(sq);
+            }
+        }
         return r;
     }
     resetRack() {
@@ -33974,6 +34167,8 @@ class BaseGame {
         }
         // Reset current error message, if any
         this.currentError = null;
+        // Reset keyboard placement state
+        this.resetKeyboardState();
     }
     rescrambleRack() {
         // Reorder the rack randomly. Bound to the Backspace key.
@@ -34247,36 +34442,39 @@ class BaseGame {
                 // The saved destination square is empty:
                 // find the tile in the saved rack and move it there
                 const tile = savedTiles[i].tile;
-                for (const sq in rackTiles)
-                    if (Object.hasOwn(rackTiles, sq) &&
-                        rackTiles[sq].tile === tile.charAt(0)) {
+                for (const sq of Object.keys(rackTiles)) {
+                    if (rackTiles[sq].tile === tile.charAt(0)) {
                         // Found the tile (or its equivalent) in the rack: move it
-                        if (tile.charAt(0) === '?')
-                            if (saved_sq.charAt(0) === 'R')
+                        if (tile.charAt(0) === '?') {
+                            if (saved_sq.charAt(0) === 'R') {
                                 // Going to the rack: no associated letter
                                 rackTiles[sq].letter = ' ';
-                            // Going to a board square: associate the originally
-                            // chosen and saved letter
-                            else
+                            }
+                            else {
+                                // Going to a board square: associate the originally
+                                // chosen and saved letter
                                 rackTiles[sq].letter = tile.charAt(1);
+                            }
+                        }
                         // ...and assign it
                         this.tiles[saved_sq] = rackTiles[sq];
                         delete rackTiles[sq];
                         break;
                     }
+                }
             }
         }
         // Allocate any remaining tiles to free slots in the rack
         let j = 1;
-        for (const sq in rackTiles)
-            if (Object.hasOwn(rackTiles, sq)) {
-                // Look for a free slot in the rack
-                while (`R${j}` in this.tiles)
-                    j++;
-                if (j <= RACK_SIZE)
-                    // Should always be true unless something is very wrong
-                    this.tiles[`R${j}`] = rackTiles[sq];
+        for (const sq of Object.keys(rackTiles)) {
+            // Look for a free slot in the rack
+            while (`R${j}` in this.tiles)
+                j++;
+            if (j <= RACK_SIZE) {
+                // Should always be true unless something is very wrong
+                this.tiles[`R${j}`] = rackTiles[sq];
             }
+        }
         // The local storage may have been cleared before calling
         // restoreTiles() so we must ensure that it is updated
         this.saveTiles();
@@ -34286,6 +34484,192 @@ class BaseGame {
     cleanup() {
         // Base cleanup - can be overridden by subclasses
     }
+    // Keyboard tile placement methods
+    getLockedDirection() {
+        // Check if direction is locked by 2+ tiles in a row or column.
+        // Returns 'H' if locked horizontal, 'V' if locked vertical, null if not locked.
+        const placed = this.tilesPlaced();
+        if (placed.length < 2)
+            return null;
+        const rows = new Set();
+        const cols = new Set();
+        for (const sq of placed) {
+            rows.add(sq.charAt(0));
+            cols.add(parseInt(sq.slice(1), 10));
+        }
+        // If all tiles are in the same row, lock to horizontal
+        if (rows.size === 1 && cols.size > 1) {
+            return 'H';
+        }
+        // If all tiles are in the same column, lock to vertical
+        if (cols.size === 1 && rows.size > 1) {
+            return 'V';
+        }
+        return null;
+    }
+    setKeyboardDirection(direction) {
+        // Only allow direction change if not locked by placed tiles
+        const locked = this.getLockedDirection();
+        if (locked === null) {
+            this.keyboardDirection = direction;
+        }
+    }
+    getEffectiveKeyboardDirection() {
+        // Return the effective direction, considering any lock from placed tiles
+        return this.getLockedDirection() ?? this.keyboardDirection;
+    }
+    findNextEmptySquare(startRow, startCol, direction) {
+        // Find the next empty square starting from the given position,
+        // moving in the specified direction. Skips over all occupied squares
+        // (both fixed tiles and tiles we've placed).
+        const dx = direction === 'H' ? 1 : 0;
+        const dy = direction === 'V' ? 1 : 0;
+        let row = startRow;
+        let col = startCol;
+        while (row >= 0 && row < BOARD_SIZE && col >= 0 && col < BOARD_SIZE) {
+            const sq = coord(row, col);
+            if (sq && !(sq in this.tiles)) {
+                // Found an empty square
+                return sq;
+            }
+            // Square is occupied - continue scanning
+            row += dy;
+            col += dx;
+        }
+        // Reached board edge with no empty square found
+        return null;
+    }
+    canContinueInDirection(sq, direction) {
+        // Check if there's any empty square in the given direction from sq
+        const vec = toVector(sq);
+        const dx = direction === 'H' ? 1 : 0;
+        const dy = direction === 'V' ? 1 : 0;
+        return (this.findNextEmptySquare(vec.row + dy, vec.col + dx, direction) !==
+            null);
+    }
+    setDefaultDirection(sq) {
+        // When placing the first tile, set direction based on available space
+        // Default to horizontal if possible, otherwise vertical
+        if (this.canContinueInDirection(sq, 'H')) {
+            this.keyboardDirection = 'H';
+        }
+        else {
+            this.keyboardDirection = 'V';
+        }
+    }
+    getNextKeyboardSquare() {
+        // Get the next target square for keyboard tile placement
+        const placed = this.tilesPlaced();
+        // Don't show target indicator if no tiles have been placed yet,
+        // since we don't know where the user wants to start their move
+        if (placed.length === 0) {
+            return null;
+        }
+        // Don't show target indicator if the rack is empty (no tiles left to place)
+        let rackEmpty = true;
+        for (let i = 1; i <= RACK_SIZE; i++) {
+            if (`R${i}` in this.tiles) {
+                rackEmpty = false;
+                break;
+            }
+        }
+        if (rackEmpty) {
+            return null;
+        }
+        // Use locked direction if set, otherwise use user's preferred direction
+        const locked = this.getLockedDirection();
+        const direction = locked ?? this.keyboardDirection;
+        // Find the rightmost (horizontal) or bottommost (vertical) placed tile
+        let maxRow = -1;
+        let maxCol = -1;
+        for (const sq of placed) {
+            const row = ROWIDS.indexOf(sq.charAt(0));
+            const col = parseInt(sq.slice(1), 10) - 1;
+            if (direction === 'H') {
+                if (col > maxCol || (col === maxCol && row > maxRow)) {
+                    maxCol = col;
+                    maxRow = row;
+                }
+            }
+            else {
+                if (row > maxRow || (row === maxRow && col > maxCol)) {
+                    maxRow = row;
+                    maxCol = col;
+                }
+            }
+        }
+        // Find the next empty square in the direction
+        const dx = direction === 'H' ? 1 : 0;
+        const dy = direction === 'V' ? 1 : 0;
+        return this.findNextEmptySquare(maxRow + dy, maxCol + dx, direction);
+    }
+    findRackTileForLetter(letter) {
+        // Find a rack tile matching the given letter
+        // Prefers real tiles over blanks
+        let blankSlot = null;
+        for (let i = 1; i <= RACK_SIZE; i++) {
+            const slot = `R${i}`;
+            if (slot in this.tiles) {
+                const tile = this.tiles[slot];
+                if (tile.tile === letter) {
+                    // Found an exact match
+                    return slot;
+                }
+                if (tile.tile === '?' && blankSlot === null) {
+                    // Remember the first blank we find
+                    blankSlot = slot;
+                }
+            }
+        }
+        // Return blank if no exact match found
+        return blankSlot;
+    }
+    placeKeyboardTile(letter) {
+        // Place a tile via keyboard
+        const targetSquare = this.getNextKeyboardSquare();
+        if (!targetSquare)
+            return false;
+        const rackSlot = this.findRackTileForLetter(letter);
+        if (!rackSlot)
+            return false;
+        const tile = this.tiles[rackSlot];
+        // If using a blank tile, assign the letter
+        if (tile.tile === '?') {
+            tile.letter = letter;
+        }
+        // Move the tile to the target square
+        this.moveTile(rackSlot, targetSquare);
+        // Track this tile for backspace functionality
+        this.keyboardPlacedTiles.push(targetSquare);
+        return true;
+    }
+    undoLastKeyboardTile() {
+        // Undo the last keyboard-placed tile
+        if (this.keyboardPlacedTiles.length === 0)
+            return false;
+        const lastSquare = this.keyboardPlacedTiles.pop();
+        if (!lastSquare || !(lastSquare in this.tiles))
+            return false;
+        // Find a free slot in the rack
+        let freeSlot = null;
+        for (let i = 1; i <= RACK_SIZE; i++) {
+            const slot = `R${i}`;
+            if (!(slot in this.tiles)) {
+                freeSlot = slot;
+                break;
+            }
+        }
+        if (!freeSlot)
+            return false;
+        // Move the tile back to the rack
+        this.moveTile(lastSquare, freeSlot);
+        return true;
+    }
+    resetKeyboardState() {
+        // Reset keyboard placement state
+        this.keyboardDirection = 'H';
+        this.keyboardPlacedTiles = [];
+    }
 }
 
 /*
@@ -34663,9 +35047,9 @@ class Game extends BaseGame {
         // Remember if the game was already won before this update
         const wasWon = this.congratulate;
         // Stop highlighting the previous opponent move, if any
-        for (const sq in this.tiles)
-            if (Object.hasOwn(this.tiles, sq))
-                this.tiles[sq].freshtile = false;
+        for (const sq of Object.keys(this.tiles)) {
+            this.tiles[sq].freshtile = false;
+        }
         this.init(srvGame);
         if (this.currentError === null) {
             if (this.succ_chall) {
@@ -37065,7 +37449,7 @@ const MoveListItem = () => {
             if (tile === '?')
                 continue;
             const sq = coord(row, col);
-            if (sq && Object.hasOwn(game.tiles, sq))
+            if (sq && sq in game.tiles)
                 game.tiles[sq].highlight = show ? playerColor : undefined;
             col += vec.dx;
             row += vec.dy;
@@ -40510,6 +40894,11 @@ class View {
         if (this.selectedTab === sel)
             return false;
         this.selectedTab = sel;
+        // When switching to a non-chat tab, focus the container
+        // to restore keyboard input for tile placement
+        if (sel !== 'chat') {
+            setDefaultFocus();
+        }
         return true;
     }
     // Globally available view functions
@@ -40666,6 +41055,13 @@ async function main$1(state, container) {
         m.mount(container, {
             view: () => m(GataDagsins$1, { view, date: validDate, locale }),
         });
+        // Set up keyboard handling on the container element
+        setKeyboardHandler((ev) => {
+            const riddle = model.riddle;
+            if (riddle) {
+                handleGameKeydown(riddle, view, ev);
+            }
+        });
     }
     catch (e) {
         console.error('Exception during initialization: ', e);
@@ -40791,6 +41187,13 @@ async function main(state, container) {
         const model = new Model(settings, state);
         const actions = new Actions(model);
         const view = new View(actions);
+        // Set up keyboard handling on the container element
+        setKeyboardHandler((ev) => {
+            const game = model.game;
+            if (game) {
+                handleGameKeydown(game, view, ev);
+            }
+        });
         // Run the Mithril router
         const routeResolver = createRouteResolver(actions, view);
         m.route(container, settings.defaultRoute, routeResolver);
@@ -40801,60 +41204,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');
+        return Promise.reject(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;
-    }
-    // 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
     React.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;
@@ -40862,36 +41239,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]);