{"version":3,"sources":["App.js","serviceWorker.js","index.js"],"names":["Sessions","props","sessions","ListGroup","map","session","Item","key","id","action","href","name","CloseButton","onClick","e","preventDefault","onDelete","Home","useState","setSessions","nameRef","useRef","formRef","dialogueRef","loadSessions","a","fetch","response_sessions","json","event","data","FormData","current","body","value","session_id","show","title","actions","Dialog","CancelAction","OKAction","bsSize","useEffect","Container","fluid","ref","Row","Col","md","Form","onSubmit","InputGroup","FormControl","placeholder","aria-label","aria-describedby","type","Append","Button","PlaySession","useParams","board","setBoard","initialMoves","setInitialMoves","websocket","setWebsocket","isConnected","setIsConnected","crosswordRef","useCallbackRef","node","forEach","move","x","y","setCellValue","setupConnection","ws","WebSocket","window","location","hostname","port","onopen","console","debug","payload","send","JSON","stringify","onmessage","parse","onclose","reason","onerror","err","error","message","close","loadSession","responseSession","_","saveGrid","grid","loadGrid","onMove","App","Navbar","bg","expand","Brand","exact","path","children","Boolean","match","ReactDOM","render","document","getElementById","navigator","serviceWorker","ready","then","registration","unregister","catch"],"mappings":"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","file":"static/js/main.44624306.chunk.js","sourcesContent":["import React, {useEffect, useReducer, useRef, useState} from 'react';\nimport {useCallbackRef} from 'use-callback-ref';\nimport Dialog from 'react-bootstrap-dialog'\n\nimport {BrowserRouter as Router, Route, Switch, useParams} from \"react-router-dom\";\nimport Crossword from '@guardian/react-crossword';\nimport {\n    Button,\n    CloseButton,\n    Col,\n    Container,\n    Form,\n    FormControl,\n    InputGroup,\n    ListGroup,\n    Navbar,\n    Row\n} from \"react-bootstrap\";\nimport './App.css';\nimport 'bootstrap/dist/css/bootstrap.min.css';\n\n\nfunction Sessions(props) {\n    const sessions = props.sessions;\n    return (\n        <ListGroup>{sessions.map((session) => (\n            <ListGroup.Item key={session.id} action href={`/play/${session.id}`}>{session.name} <CloseButton\n                onClick={\n                    (e) => {\n                        e.preventDefault();\n                        props.onDelete(session.id)\n                    }}></CloseButton></ListGroup.Item>\n        ))}\n        </ListGroup>\n    );\n}\n\n\nfunction Home() {\n    const [sessions, setSessions] = useState([]);\n    const nameRef = useRef(null);\n    const formRef = useRef(null);\n    const dialogueRef = useRef(null);\n\n    async function loadSessions() {\n        const response_sessions = await fetch('/api/sessions', {'method': 'GET'});\n        setSessions(await response_sessions.json());\n    }\n\n    useEffect(() => {\n        loadSessions();\n    }, []);\n\n    async function handleSubmit(event) {\n        event.preventDefault();\n\n        // Submit to server\n        const data = new FormData(formRef.current);\n        await fetch(\"/api/sessions\", {\n            'method': 'POST',\n            body: data\n        });\n\n        // Refresh sessions\n        await loadSessions();\n\n        // Clear game name\n        nameRef.current.value = \"\"\n    }\n\n    // On delete an existing session\n    async function onCloseSession(session_id) {\n        dialogueRef.current.show({\n            title: 'Delete session?',\n            body: 'Deleting this session will end the game!',\n            actions: [\n                Dialog.CancelAction(),\n                Dialog.OKAction(async () => {\n                    await fetch(`/api/sessions/${session_id}`, {'method': 'DELETE'});\n                    await loadSessions();\n                })\n            ],\n            bsSize: 'small',\n        });\n    }\n\n    return (\n        <Container fluid>\n            <Dialog ref={dialogueRef}/>\n            <Row><Col md><Sessions sessions={sessions} onDelete={onCloseSession}/></Col></Row>\n            <Row><Col md>\n                <Form onSubmit={handleSubmit} ref={formRef}>\n                    <InputGroup>\n                        <FormControl\n                            placeholder=\"Game Name\"\n                            aria-label=\"Session Name\"\n                            aria-describedby=\"session-name\"\n                            type=\"text\"\n                            name=\"name\"\n                            id=\"name\"\n                            ref={nameRef}\n                        />\n                        <FormControl\n                            placeholder=\"Guardian Crossword Number\"\n                            aria-label=\"Crossword Number\"\n                            aria-describedby=\"cross-no\"\n                            type=\"number\"\n                            name=\"crossword\"\n                            id=\"crossword\"\n                        />\n                        <InputGroup.Append>\n                            <Button type=\"submit\">New Game</Button>\n                        </InputGroup.Append>\n                    </InputGroup>\n                </Form></Col>\n            </Row>\n        </Container>\n    );\n}\n\nfunction PlaySession() {\n    let {id} = useParams();\n    const [board, setBoard] = useState(null);\n    const [initialMoves, setInitialMoves] = useState(null);\n    const [websocket, setWebsocket] = useState(null);\n    const [isConnected, setIsConnected] = useState(false);\n\n    // When the board is rendered\n    const crosswordRef = useCallbackRef(null, node => {\n        if (node === null) {\n            return;\n        }\n        // Fast-forward board to current state\n        initialMoves.forEach(move => {\n            let {x, y, value, ...rest} = move;\n            node.setCellValue(x, y, value, false);\n        })\n\n    }, [initialMoves]);\n\n    function setupConnection() {\n        let ws = new WebSocket(`ws://${window.location.hostname}:${window.location.port}/api/ws`);\n        setWebsocket(ws);\n\n        ws.onopen = (event) => {\n            console.debug(\"Connected to backend\");\n            let payload = {\n                'type': 'subscribe',\n                'content': {\n                    'id': id\n                }\n            };\n            ws.send(JSON.stringify(payload));\n            setIsConnected(true);\n        };\n\n        ws.onmessage = (event) => {\n            const move = JSON.parse(event.data);\n            let {x, y, value, ...rest} = move;\n            console.debug([\"Received\", x, y, value, crosswordRef.current]);\n            crosswordRef.current.setCellValue(x, y, value, false);\n        };\n\n        // websocket onclose event listener\n        ws.onclose = e => {\n            console.debug(\n                'Socket is closed',\n                e.reason\n            );\n        };\n\n        // websocket onerror event listener\n        ws.onerror = err => {\n            console.error(\n                \"Socket encountered error: \",\n                err.message,\n                \"Closing socket\"\n            );\n\n            ws.close();\n        };\n\n    }\n\n    // Load game board\n    async function loadSession() {\n        const responseSession = await fetch(`/api/sessions/${id}`, {'method': 'GET'});\n        const data = await responseSession.json();\n        // Set game board\n        setBoard(data['board']);\n        // Set game state\n        setInitialMoves(data['moves']);\n    }\n\n    function onMove(move) {\n        let payload = {\n            'type': 'move',\n            'content': {\n                'id': id,\n                'move': move\n            }\n        };\n        websocket.send(JSON.stringify(payload))\n    }\n\n    useEffect(() => {\n        async function _() {\n            await loadSession();\n            setupConnection();\n        }\n\n        _();\n    }, []);\n\n\n    if (isConnected) {\n        return <Crossword data={board}\n                          ref={crosswordRef}\n                          saveGrid={(id, grid) => {}}\n                          loadGrid={id => {}}\n                          onMove={onMove}/>;\n    }\n    return <div>Loading...</div>;\n}\n\n\nfunction App() {\n    return (\n        <Router>\n            <div>\n                <Navbar bg=\"light\" expand=\"lg\">\n                    <Navbar.Brand href=\"/\">Guardian Quick Crossword</Navbar.Brand>\n                </Navbar>\n\n                {/* A <Switch> looks through its children <Route>s and\n            renders the first one that matches the current URL. */}\n                <Switch>\n                    <Route exact path=\"/\">\n                        <Home/>\n                    </Route>\n                    <Switch>\n                        <Route path=\"/play/:id\" children={<PlaySession/>}/>\n                    </Switch>\n                </Switch>\n            </div>\n        </Router>\n    );\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n    <App />,\n  document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"],"sourceRoot":""}