From e5f4dbdd70c32183840179fa64120ac1d1338be5 Mon Sep 17 00:00:00 2001
From: tiennm99 <tiennm99@outlook.com>
Date: Thu, 10 Sep 2026 15:36:14 +0700
Subject: [PATCH] fix(web): stop the off-turn word field looking like it wants
 a word
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It keeps focus through the handover so a phone's keyboard survives it,
which left a caret blinking in a field that takes no text and an I-beam
over it inviting one. The caret is transparent and the pointer is a
plain arrow while the turn is somebody else's.

Its placeholder was a sentence — "Đến lượt Minh…", "Mất kết nối, đang
thử lại…" — in a box that shares its row with the send button, so the
end of it was cut off against the edge. The board's turn line above says
who is thinking and the badge says the connection is down; the field
only has to say that it is not yours yet, so it says that, and anything
that still does not fit ends in an ellipsis.
---
 web/e2e/reconnect.spec.js               |  7 +++----
 web/src/lib/components/WordInput.svelte | 23 +++++++++++++++--------
 web/src/lib/i18n/vi.js                  |  4 ++++
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/web/e2e/reconnect.spec.js b/web/e2e/reconnect.spec.js
index 4ebb41d..acff056 100644
--- a/web/e2e/reconnect.spec.js
+++ b/web/e2e/reconnect.spec.js
@@ -139,10 +139,9 @@ test.describe('losing the connection', () => {
 		// a word it cannot carry.
 		await expect(board(page).submit).toBeDisabled();
 		await expect(board(page).input).toHaveAttribute('aria-disabled', 'true');
-		await expect(board(page).input).toHaveAttribute(
-			'placeholder',
-			'Mất kết nối, đang thử lại…'
-		);
+		// Its own short version of the badge's line: the field shares a row
+		// with the send button, and a sentence in there is cut off by it.
+		await expect(board(page).input).toHaveAttribute('placeholder', 'Mất kết nối…');
 
 		// And it comes back on its own once the connection does.
 		socket.restore();
diff --git a/web/src/lib/components/WordInput.svelte b/web/src/lib/components/WordInput.svelte
index e158304..e3a4c92 100644
--- a/web/src/lib/components/WordInput.svelte
+++ b/web/src/lib/components/WordInput.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { fill, t } from '$lib/i18n/vi.js';
+	import { t } from '$lib/i18n/vi.js';
 	import { game } from '$lib/stores/game.svelte.js';
 	import { Status, connection } from '$lib/ws/connection.svelte.js';
 
@@ -17,14 +17,14 @@
 		game.state.phase === 'playing' && game.state.myTurn && connection.status === Status.OPEN
 	);
 
-	// Whose turn it is, said in the placeholder of a field that cannot be sent
-	// from: an inviting "Nhập từ của bạn" over a dead input is how a player
-	// ends up typing into one.
+	// Why the field cannot be sent from, in its own placeholder: an inviting
+	// "Nhập từ của bạn" over a dead input is how a player ends up typing into
+	// one. Kept short — the board's turn line above says who is thinking, and
+	// a sentence here is cut off by the send button beside it.
 	const waitingFor = $derived.by(() => {
 		if (enabled) return t.wordInputPlaceholder;
-		if (connection.status !== Status.OPEN) return t.reconnecting;
-		const name = game.nameOf(game.state.turnPlayerId);
-		return name ? fill(t.playerTurn, { name }) : t.opponentTurn;
+		if (connection.status !== Status.OPEN) return t.wordInputOffline;
+		return t.wordInputWaiting;
 	});
 
 	// What the field was last seeded for. Plain lets, not state: they guard the
@@ -214,11 +214,18 @@
 		/* 16px or larger stops iOS Safari zooming the page on focus, which on a
 		   phone hides half the board behind the keyboard. */
 		font-size: var(--text-6);
+		/* Whatever does not fit ends in an ellipsis rather than against the
+		   edge of the box. */
+		text-overflow: ellipsis;
 	}
 
 	/* Looks exactly as the disabled field used to. It is only the behaviour
-	   that differs: focus, and therefore the keyboard, survives the turn. */
+	   that differs: focus, and therefore the keyboard, survives the turn — so
+	   the caret has to go by hand, or a field that takes no text sits there
+	   blinking as though it were waiting for some. */
 	input[aria-disabled='true'] {
+		caret-color: transparent;
+		cursor: default;
 		background: var(--surface-alt);
 		color: var(--text-muted);
 	}
diff --git a/web/src/lib/i18n/vi.js b/web/src/lib/i18n/vi.js
index 4f23dd1..d42558e 100644
--- a/web/src/lib/i18n/vi.js
+++ b/web/src/lib/i18n/vi.js
@@ -42,6 +42,10 @@ export const t = {
 	playerTurn: 'Đến lượt {name}…',
 	currentSyllable: 'Nối tiếp tiếng',
 	wordInputPlaceholder: 'Nhập từ của bạn',
+	// The field's own off-turn text. Short on purpose: it shares a row with
+	// the send button, and the turn line above it is where the name goes.
+	wordInputWaiting: 'Chưa đến lượt bạn',
+	wordInputOffline: 'Mất kết nối…',
 	submit: 'Gửi',
 	chainTitle: 'Chuỗi từ',
 	chainEmpty: 'Chưa có từ nào.',