Add Jisho.org functionality to front-end

Adjust font sizes
Include next mora in greeting event
4 changed files with 51 additions and 12 deletions
--- a/demo/index.html
+++ b/demo/index.html
@ -9,8 +9,13 @@
  <body>
    <div id="content">
      <h1><ruby>字<rp>(</rp><rt>じ</rt><rp>)<rp></ruby>ちゃん<span style="font-size: 0.75em">の</span>しりとり</h1>
-      <div id="shiritori"></div>
-      <input id="shiritori-input" onfocusout="setTimeout(() => this.focus(), 100)" autofocus>
+      <div id="split">
+        <div>
+          <div id="shiritori"></div>
+          <input id="shiritori-input" onfocusout="setTimeout(() => this.focus(), 100)" autofocus>
+        </div>
+        <iframe src="https://jisho.org"></iframe>
+      </div>
      <p id="shiritori-players"></p>
    </div>
    <script src="shiritori.js"></script>
--- 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 : `<ruby>${word}<rp>(</rp><rt>${reading}<rt/><rp>)</rp></ruby>`) : word;
+  p.innerHTML = `<a href="javascript:lookUpWord('${word || reading}')">${
+    reading || word === reading ? (word === "" ? reading : `<ruby>${word}<rp>(</rp><rt>${reading}<rt/><rp>)</rp></ruby>`) : word
+  }</a>`;
  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);
--- 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;
+}
--- a/src/server.rs
+++ b/src/server.rs
@ -26,6 +26,7 @@ impl MessageResponse {
 enum MessageResponseData {
    Greeting {
        id: u64,
+        next_mora: Option<String>,
    },
    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)?
Author	SHA1	Message	Date
Elnu	6a968bfd51	Add Jisho.org functionality to front-end	1 year ago
Elnu	eb002c63e1	Adjust font sizes	1 year ago
Elnu	f157c847bb	Include next mora in greeting event	1 year ago