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

Compare commits

base: tegakituesday:53fb1f3c4e7988f138725fd3f8c62ebd5749dbe5
Branches Tags
tegakituesday:master
...
compare: tegakituesday:6a968bfd51eab8d2ba6ee0e27c3dff4ab7ab945a
Branches Tags
tegakituesday:master

3 commits
53fb1f3c4e ... 6a968bfd51

Author SHA1 Message Date
ElnuDev
6a968bfd51 Add Jisho.org functionality to front-end 2023-04-15 15:26:15 -07:00
ElnuDev
eb002c63e1 Adjust font sizes 2023-04-15 15:08:31 -07:00
ElnuDev
f157c847bb Include next mora in greeting event 2023-04-15 15:07:15 -07:00
4 changed files with 51 additions and 12 deletions
Show stats 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>

27
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`;
}
@ -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);

23
demo/style.css
View file

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

4
src/server.rs
View file

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