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

Compare commits

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

No commits in common. "6a968bfd51eab8d2ba6ee0e27c3dff4ab7ab945a" and "53fb1f3c4e7988f138725fd3f8c62ebd5749dbe5" have entirely different histories.
6a968bfd51 ... 53fb1f3c4e

4 changed files with 12 additions and 51 deletions
Show stats Expand all files Collapse all files

9
demo/index.html
View file

@ -9,13 +9,8 @@
<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="split"> <div id="shiritori"></div>
<div> <input id="shiritori-input" onfocusout="setTimeout(() => this.focus(), 100)" autofocus>
<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>

27
demo/shiritori.js
View file

@ -2,16 +2,12 @@ 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 = `<a href="javascript:lookUpWord('${word || reading}')">${ p.innerHTML = reading || word === reading ? (word === "" ? reading : `<ruby>${word}<rp>(</rp><rt>${reading}<rt/><rp>)</rp></ruby>`) : word;
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`;
} }
@ -23,31 +19,18 @@ function displayWord(_word, end, delay) {
div.scrollTop = div.offsetHeight; 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 => { 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);
lookUpWord(data.word.word);
break; break;
case "word": case "word":
let waiting = data.author === id;
displayWord(data.word, true, 0); displayWord(data.word, true, 0);
updateInput(data); input.placeholder = waiting ? "Waiting for other players..." : `${data.next_mora}…`;
lookUpWord(data.word.word); input.disabled = waiting;
if (!waiting) input.focus();
break; break;
case "history": case "history":
console.log(data); console.log(data);

23
demo/style.css
View file

@ -4,7 +4,7 @@
} }
body { body {
background: slategrey; background: slategrey;
font-size: 1.75em; font-size: 1.25em;
} }
div#content { div#content {
width: max-content; width: max-content;
@ -31,18 +31,17 @@ div#shiritori p {
div#shiritori { div#shiritori {
padding: 2px; padding: 2px;
height: 24em; height: 24em;
font-size: 0.875em;
overflow-y: scroll; overflow-y: scroll;
text-align: center; text-align: center;
} }
div#shiritori, input#shiritori-input, #split > :last-child { div#shiritori, input#shiritori-input {
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;
} }
@ -65,17 +64,3 @@ 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;
}

4
src/server.rs
View file

@ -26,7 +26,6 @@ impl MessageResponse {
enum MessageResponseData { enum MessageResponseData {
Greeting { Greeting {
id: u64, id: u64,
next_mora: Option<String>,
}, },
Word { Word {
author: u64, author: u64,
@ -166,8 +165,7 @@ impl Server {
fn handle_connection(&mut self, client_id: u64, responder: Responder) -> Result<(), ServerError> { fn handle_connection(&mut self, client_id: u64, responder: Responder) -> Result<(), ServerError> {
println!("A client connected with id #{}", client_id); println!("A client connected with id #{}", client_id);
responder.send(MessageResponseData::Greeting { responder.send(MessageResponseData::Greeting {
id: client_id, id: client_id
next_mora: self.next_mora.clone(),
}.into_message()); }.into_message());
responder.send(MessageResponseData::History { responder.send(MessageResponseData::History {
words: self.database.load_words_before(self.database.last_word_id + 1)? words: self.database.load_words_before(self.database.last_word_id + 1)?