jichan.org/jichan.org-go
jichan.org/jichan.org-go
Archived
1
0
Fork 0
generated from ElnuDev/go-project
Code Issues Pull requests Projects Releases Packages Wiki Activity

Misc.

Browse source
This commit is contained in:
Elnu 2023-07-18 16:32:16 -07:00
parent fcc9d9f5ef
commit a78edaed81
3 changed files with 250 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

34
static/index.html
View file

@ -4,9 +4,39 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shiritori</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/htmx.org@1.9.3"></script>
</head>
<body>
<div hx-sse="connect:/api/counter swap:count" hx-swap="beforebegin"></div>
<body hx-sse="connect:/api/events">
<div id="content">
<div id="split">
<div>
<div id="shiritori"
hx-sse="swap:word"
hx-swap="beforeend"
hx-on::sse-message="this.scrollTop = this.scrollHeight">
</div>
<form
hx-post="/api/submit"
hx-swap="innerHTML"
hx-target="#feedback"
hx-on::after-request="this.querySelector('input[name=word]').value = ''">
<input id="shiritori-input" type="text" name="word">
</form>
</div>
<iframe
hx-sse="swap:navigate"
hx-on::sse-message="this.src = event.detail.data">
</iframe>
</div>
<p id="shiritori-players"
hx-sse="swap:players"
></p>
<div style="display: none">
<button onclick="changeRoom('lobby')">Back to lobby</button>
<div id="feedback"></div>
Change room: <input id="room-input" autocomplete="off">
</div>
</div>
</body>
</html>

92
static/style.css Normal file
View file

@ -0,0 +1,92 @@
* {
font-family: sans-serif;
color: ghostwhite;
}
body {
background: slategrey;
font-size: 1.75em;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
text-align: center;
}
div#content {
width: 32em;
max-width: 100%;
}
div#shiritori p {
margin: 0;
animation-duration: 1s;
animation-name: slidein;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes slidein {
from {
transform: translateX(-32px);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
div#shiritori {
padding: 2px;
height: 24em;
overflow-y: scroll;
}
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;
background: rgba(0, 0, 0, 0.25);
border: none;
padding: 0.25em;
}
input#shiritori-input {
width: 100%;
border-top: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
input#shiritori-input:focus {
outline: none;
background: rgba(0, 0, 0, 0.125);
}
div#shiritori {
border-bottom: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
#split {
display: flex;
gap: 0.5em;
flex-direction: row;
}
#split > * {
width: 16em;
}
a {
text-decoration: none;
}
a:hover {
border-bottom: 2px solid;
}
button {
background: rgba(0, 0, 0, 0.25);
font-size: inherit;
cursor: pointer;
padding: 1em;
border: 0;
}