tegakituesday/shiritori
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add Jisho.org functionality to front-end

Browse source
This commit is contained in:
Elnu 2023-04-15 15:26:15 -07:00
parent eb002c63e1
commit 6a968bfd51
3 changed files with 36 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
demo/index.html
View file

@ -9,8 +9,13 @@
<body> <body>
<div id="content"> <div id="content">
<h1><ruby>字<rp>(</rp><rt>じ</rt><rp>)<rp></ruby>ちゃん<span style="font-size: 0.75em">の</span>しりとり</h1> <h1><ruby>字<rp>(</rp><rt>じ</rt><rp>)<rp></ruby>ちゃん<span style="font-size: 0.75em">の</span>しりとり</h1>
<div id="shiritori"></div> <div id="split">
<input id="shiritori-input" onfocusout="setTimeout(() => this.focus(), 100)" autofocus> <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> <p id="shiritori-players"></p>
</div> </div>
<script src="shiritori.js"></script> <script src="shiritori.js"></script>

12
demo/shiritori.js
View file

@ -2,12 +2,16 @@ ws = new WebSocket("ws://localhost:8080");
const div = document.querySelector("#shiritori"); const div = document.querySelector("#shiritori");
const input = document.querySelector("#shiritori-input"); const input = document.querySelector("#shiritori-input");
const players = document.querySelector("#shiritori-players"); const players = document.querySelector("#shiritori-players");
const iframe = document.querySelector("iframe");
console.log("yo");
let id = null; let id = null;
function displayWord(_word, end, delay) { function displayWord(_word, end, delay) {
let { word, reading } = _word; let { word, reading } = _word;
p = document.createElement("p"); 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) { if (delay != 0) {
p.style.animationDelay = `${delay}s`; 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 => { ws.onmessage = e => {
const { event, data } = JSON.parse(e.data); const { event, data } = JSON.parse(e.data);
switch (event) { switch (event) {
case "greeting": case "greeting":
id = data.id; id = data.id;
updateInput(data); updateInput(data);
lookUpWord(data.word.word);
break; break;
case "word": case "word":
displayWord(data.word, true, 0); displayWord(data.word, true, 0);
updateInput(data); updateInput(data);
lookUpWord(data.word.word);
break; break;
case "history": case "history":
console.log(data); console.log(data);

20
demo/style.css
View file

@ -34,13 +34,15 @@ div#shiritori {
overflow-y: scroll; overflow-y: scroll;
text-align: center; text-align: center;
} }
div#shiritori, input#shiritori-input { div#shiritori, input#shiritori-input, #split > :last-child {
padding: 0.25em;
background: rgba(0, 0, 0, 0.25); background: rgba(0, 0, 0, 0.25);
border: 1px solid; border: 1px solid;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
} }
div#shiritori, input#shiritori-input {
padding: 0.25em;
}
input { input {
font-size: 1em; font-size: 1em;
} }
@ -63,3 +65,17 @@ div#shiritori {
p#shiritori-players { p#shiritori-players {
text-align: center; text-align: center;
} }
#split {
display: flex;
gap: 1em;
flex-direction: row;
}
#split > * {
width: 16em;
}
a {
text-decoration: none;
}
a:hover {
border-bottom: 2px solid;
}