Add Jisho.org functionality to front-end

2 years ago · 6a968bfd51
parent eb002c63e1
commit 6a968bfd51
3 changed files with 36 additions and 5 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`;
  }
@ -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);
--- 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;
+}