diff --git a/demo/index.html b/demo/index.html index dd7f53e..1288b2d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -9,8 +9,13 @@

字(じ)ちゃんのしりとり

-
- +
+
+
+ +
+ +

diff --git a/demo/shiritori.js b/demo/shiritori.js index f43f5bf..44ff7a7 100644 --- a/demo/shiritori.js +++ b/demo/shiritori.js @@ -2,12 +2,16 @@ ws = new WebSocket("ws://localhost:8080"); const div = document.querySelector("#shiritori"); const input = document.querySelector("#shiritori-input"); const players = document.querySelector("#shiritori-players"); +const iframe = document.querySelector("iframe"); +console.log("yo"); let id = null; function displayWord(_word, end, delay) { let { word, reading } = _word; p = document.createElement("p"); - p.innerHTML = reading || word === reading ? (word === "" ? reading : `${word}(${reading})`) : word; + p.innerHTML = `${ + reading || word === reading ? (word === "" ? reading : `${word}(${reading})`) : word + }`; if (delay != 0) { p.style.animationDelay = `${delay}s`; } @@ -19,18 +23,31 @@ function displayWord(_word, end, delay) { div.scrollTop = div.offsetHeight; } +function updateInput(data) { + if (data.next_mora !== null) { + let waiting = data.author === id; + input.placeholder = waiting ? "Waiting for other players..." : `${data.next_mora}…`; + input.disabled = waiting; + if (!waiting) input.focus(); + } +} + +function lookUpWord(word) { + iframe.src = `https://jisho.org/search/${word}`; +} + ws.onmessage = e => { const { event, data } = JSON.parse(e.data); switch (event) { case "greeting": id = data.id; + updateInput(data); + lookUpWord(data.word.word); break; case "word": - let waiting = data.author === id; displayWord(data.word, true, 0); - input.placeholder = waiting ? "Waiting for other players..." : `${data.next_mora}…`; - input.disabled = waiting; - if (!waiting) input.focus(); + updateInput(data); + lookUpWord(data.word.word); break; case "history": console.log(data); diff --git a/demo/style.css b/demo/style.css index 5b1a5e7..ac17757 100644 --- a/demo/style.css +++ b/demo/style.css @@ -4,7 +4,7 @@ } body { background: slategrey; - font-size: 1.25em; + font-size: 1.75em; } div#content { width: max-content; @@ -31,17 +31,18 @@ div#shiritori p { div#shiritori { padding: 2px; height: 24em; - font-size: 0.875em; overflow-y: scroll; text-align: center; } -div#shiritori, input#shiritori-input { - padding: 0.25em; +div#shiritori, input#shiritori-input, #split > :last-child { background: rgba(0, 0, 0, 0.25); border: 1px solid; border-radius: 4px; box-sizing: border-box; } +div#shiritori, input#shiritori-input { + padding: 0.25em; +} input { font-size: 1em; } @@ -64,3 +65,17 @@ div#shiritori { p#shiritori-players { text-align: center; } +#split { + display: flex; + gap: 1em; + flex-direction: row; +} +#split > * { + width: 16em; +} +a { + text-decoration: none; +} +a:hover { + border-bottom: 2px solid; +} diff --git a/src/server.rs b/src/server.rs index 122de05..c5d4f1f 100644 --- a/src/server.rs +++ b/src/server.rs @@ -26,6 +26,7 @@ impl MessageResponse { enum MessageResponseData { Greeting { id: u64, + next_mora: Option, }, Word { author: u64, @@ -165,7 +166,8 @@ impl Server { fn handle_connection(&mut self, client_id: u64, responder: Responder) -> Result<(), ServerError> { println!("A client connected with id #{}", client_id); responder.send(MessageResponseData::Greeting { - id: client_id + id: client_id, + next_mora: self.next_mora.clone(), }.into_message()); responder.send(MessageResponseData::History { words: self.database.load_words_before(self.database.last_word_id + 1)?