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>
<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>

12
demo/shiritori.js
View file

@ -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);

20
demo/style.css
View file

@ -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;
}