From f157c847bb5f69f7f1c6a0ef8aec98de470da81b Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Sat, 15 Apr 2023 15:07:15 -0700 Subject: [PATCH 1/3] Include next mora in greeting event --- demo/shiritori.js | 15 +++++++++++---- src/server.rs | 4 +++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/demo/shiritori.js b/demo/shiritori.js index f43f5bf..0f819e6 100644 --- a/demo/shiritori.js +++ b/demo/shiritori.js @@ -19,18 +19,25 @@ 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(); + } +} + ws.onmessage = e => { const { event, data } = JSON.parse(e.data); switch (event) { case "greeting": id = data.id; + updateInput(data); 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); break; case "history": console.log(data); 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)? From eb002c63e1bd39ab8a957ee43aa4f7d6dba50e23 Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Sat, 15 Apr 2023 15:08:31 -0700 Subject: [PATCH 2/3] Adjust font sizes --- demo/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/demo/style.css b/demo/style.css index 5b1a5e7..0de2c3b 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,7 +31,6 @@ div#shiritori p { div#shiritori { padding: 2px; height: 24em; - font-size: 0.875em; overflow-y: scroll; text-align: center; } From 6a968bfd51eab8d2ba6ee0e27c3dff4ab7ab945a Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Sat, 15 Apr 2023 15:26:15 -0700 Subject: [PATCH 3/3] Add Jisho.org functionality to front-end --- demo/index.html | 9 +++++++-- demo/shiritori.js | 12 +++++++++++- demo/style.css | 20 ++++++++++++++++++-- 3 files changed, 36 insertions(+), 5 deletions(-) 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 0f819e6..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`; } @@ -28,16 +32,22 @@ function updateInput(data) { } } +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": displayWord(data.word, true, 0); updateInput(data); + lookUpWord(data.word.word); break; case "history": console.log(data); diff --git a/demo/style.css b/demo/style.css index 0de2c3b..ac17757 100644 --- a/demo/style.css +++ b/demo/style.css @@ -34,13 +34,15 @@ div#shiritori { 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; } @@ -63,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; +}