diff options
| author | pommicket <pommicket@gmail.com> | 2024-08-14 11:20:22 -0400 |
|---|---|---|
| committer | pommicket <pommicket@gmail.com> | 2024-08-14 11:20:22 -0400 |
| commit | 8664ecfef8df4c1e2103a52d628f2693eefb6f89 (patch) | |
| tree | 2f89b89c509a1467c7ca3d73fdd944226b2ade13 | |
| parent | db63e7ada26e2aacbbaa3bf9a44fdafed9032c9e (diff) | |
index.html
| -rw-r--r-- | TODO.txt | 1 | ||||
| -rw-r--r-- | game.html | 1 | ||||
| -rw-r--r-- | game.js | 1 | ||||
| -rw-r--r-- | index.html | 18 | ||||
| -rw-r--r-- | index.js | 19 | ||||
| -rw-r--r-- | server/src/main.rs | 4 | ||||
| -rw-r--r-- | style.css | 11 |
7 files changed, 48 insertions, 7 deletions
@@ -2,3 +2,4 @@ - congratualations - handle server errors on the client side - link to wikimedia File: page rather than image +- let user select piece size @@ -11,6 +11,7 @@ </head> <body> <div id="header"> + <a href="index.html">← Back</a> <a id="image-link" style="visibility: hidden;">🖼️ Link to image</a> <a id="join-link" style="display: none;">🔗 Invite others to join</a> </div> @@ -372,7 +372,6 @@ window.addEventListener('load', function () { console.assert(puzzleWidth === data[8]); console.assert(puzzleHeight === data[9]); } - console.log(data); const nibTypesOffset = 10; const nibTypeCount = 2 * puzzleWidth * puzzleHeight - puzzleWidth - puzzleHeight; const nibTypes = new Uint16Array(payload, nibTypesOffset, nibTypeCount); @@ -9,9 +9,19 @@ <link rel="stylesheet" href="style.css"> <script src="index.js"></script> </head> -<body> - <button id="host">host</button> - <input id="code" type="text"> - <button id="join">join</button> +<body class="margined"> + <h3>jigsaw</h3> + <form id="host-form" method="dialog" action="#"> + <div class="form-line"><label><input type="number" min="10" max="1000" name="pieces" value="100"> 🧩 Number of pieces</label></div> + <div class="form-line"> + <fieldset> + <legend>Choose your image…</legend> + <label><input name="image" type="radio" value="custom" id="custom-image" checked>Custom image URL</label> <input type="text" id="image-url" name="image-url" placeholder="Enter image URL..."><br> + <label><input name="image" type="radio" value="randomFeaturedWikimedia">Random featured Wikimedia Commons image</label><br> + <label><input name="image" type="radio" value="wikimediaPotd">Wikimedia Commons Picture of the Day</label><br> + </fieldset> + </div> + <input value="Host puzzle" type="submit"> + </form> </body> </html> @@ -1,5 +1,22 @@ window.addEventListener('load', function () { const getById = (id) => document.getElementById(id); - getById("host").addEventListener("click", async function () { + const customImageRadio = getById("custom-image"); + const customImageURL = getById("image-url"); + function onImageTypeChange() { + customImageURL.disabled = customImageRadio.checked ? '' : 'disabled'; + } + onImageTypeChange(); + for (const radio of document.querySelectorAll('input[name=image]')) { + radio.addEventListener("change", onImageTypeChange); + } + const hostForm = getById("host-form"); + hostForm.addEventListener("submit", function () { + const formData = new FormData(hostForm); + const pieceCount = formData.get('pieces'); + const image = formData.get('image') === 'custom' ? formData.get('image-url') : formData.get('image'); + const search = new URLSearchParams(); + search.set('image', image); + search.set('pieces', pieceCount); + location.href = `game.html?${search}`; }); }); diff --git a/server/src/main.rs b/server/src/main.rs index 2c33174..03ae435 100644 --- a/server/src/main.rs +++ b/server/src/main.rs @@ -369,9 +369,10 @@ async fn handle_websocket( ) .await?; server.player_counts.lock().await.insert(id, 1); + *puzzle_id = Some(id); ws.send(Message::Text(format!( "id: {}", - std::str::from_utf8(&id).expect("puzzle ID has bad utf-8???") + std::str::from_utf8(&id)? ))) .await?; let info = get_puzzle_info(server, &id).await?; @@ -577,6 +578,7 @@ async fn main() { tokio::time::sleep(std::time::Duration::from_secs(3600)).await; } }); + println!("Server initialized! Waiting for connections..."); loop { let (mut stream, addr) = match listener.accept().await { Ok(result) => result, @@ -8,6 +8,13 @@ body { margin: 0; position: relative; } +body.margined { + margin: 0.5em; +} +.form-line { + display: block; + margin: 0.5em 0; +} #header { height: 1.5em; @@ -21,6 +28,10 @@ a, a:visited { text-decoration: none; } +#header a { + padding: 0 0.5em; +} + #play-area { width: 100vw; /* annoyingly, firefox ESR 115 still doesn't support lh */ |