From 43e74fde8510c8c2125cebe8e04279b0ed604084 Mon Sep 17 00:00:00 2001
From: Joe Anderson <joe@mousetrapped.co.uk>
Date: Tue, 7 May 2024 13:56:30 +0100
Subject: [PATCH] Handle pasting join link

---
 client/src/HostOrJoinGameDialog.tsx | 21 +++++++++++++++++++++
 e2e/online.spec.ts                  | 27 ++++++++++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/client/src/HostOrJoinGameDialog.tsx b/client/src/HostOrJoinGameDialog.tsx
index 00e5675..5e2dfe5 100644
--- a/client/src/HostOrJoinGameDialog.tsx
+++ b/client/src/HostOrJoinGameDialog.tsx
@@ -149,6 +149,26 @@ const BaseHostOrJoinGameDialog = ({
     setPromise(primaryAction(gameID).then(onClose))
   }
 
+  const handlePaste = (event: ClipboardEvent) => {
+    const text = event.clipboardData?.getData('text/plain')
+    if (!text) return
+
+    let pathname: string
+
+    try {
+      pathname = new URL(text).pathname
+    } catch {
+      console.warn('Pasted text is not a URL')
+      return
+    }
+
+    const match = pathname.match(/\/game\/([^/]+)/)
+    if (!match) return
+
+    event.preventDefault()
+    setGameID(sanitiseGameID(decodeURIComponent(match[1])))
+  }
+
   const AlternativeActionButton = ({ children }: { children: string }) => (
     <ButtonLink
       onClick={() => setPromise(alternativeAction(gameID).then(onClose))}
@@ -196,6 +216,7 @@ const BaseHostOrJoinGameDialog = ({
               onInput={event =>
                 setGameID(sanitiseGameID((event.target as any).value))
               }
+              onPaste={handlePaste}
             />
 
             <Button type="submit" disabled={gameExists !== expectedExists}>
diff --git a/e2e/online.spec.ts b/e2e/online.spec.ts
index 45850db..900535d 100644
--- a/e2e/online.spec.ts
+++ b/e2e/online.spec.ts
@@ -1,4 +1,4 @@
-import { test, Page } from '@playwright/test'
+import { test, expect, Page } from '@playwright/test'
 import { makeRandomIdentifier } from '../client/src/randomIdentifier'
 import {
   expectCellToBe,
@@ -157,4 +157,29 @@ test.describe('Online', () => {
     await expectCurrentTurn(page, 'cross')
     await expectCellToBe(page, 3, 3, 'triangle')
   })
+
+  test('Pasting a join link', async ({ page }) => {
+    await pressJoinGame(page)
+
+    const input = page.getByLabel('Game ID').locator('visible=true')
+
+    const pasteIntoInput = async (text: string) =>
+      input.evaluate((input, text) => {
+        const event = new ClipboardEvent('paste', {
+          clipboardData: new DataTransfer(),
+        })
+
+        event.clipboardData!.setData('text/plain', text)
+
+        input.dispatchEvent(event)
+      }, text)
+
+    await input.fill('before 1')
+    await pasteIntoInput('https://anything.com:1234/game/my-game-id')
+    await expect(input).toHaveValue('my-game-id')
+
+    await input.fill('before 2')
+    await pasteIntoInput('https://anything.com:1234/not-game/my-game-id')
+    await expect(input).toHaveValue('before-2')
+  })
 })