<!DOCTYPE html>
<html>
<head>
<title>ohaka</title>
<style>
@keyframes sparkle {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.sparkle {
position: absolute;
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 50%;
animation: sparkle 1s ease-out forwards;
}
body {
margin: 0;
padding-bottom: 3rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif;
}
#form {
background: #181818dc;
padding: 0.25rem;
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
height: 3rem;
box-sizing: border-box;
backdrop-filter: blur(10px);
}
#input {
border: none;
padding: 0 1rem;
flex-grow: 1;
margin: 0.25rem;
}
#input:focus {
outline: none;
}
#form>button {
background: #4e8357;
border: none;
padding: 0 1rem;
margin: 0.25rem;
border-radius: 1px;
outline: none;
color: #fff;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages>li {
padding: 0.5rem 1rem;
}
#messages>li:nth-child(odd) {
background: #efefef;
}
</style>
</head>
<body>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
let socket = io();
const form = document.getElementById("form");
const input = document.getElementById("input");
const messages = document.getElementById("messages");
form.addEventListener("submit", function (e) {
e.preventDefault();
if (input.value) {
socket.emit("chat message", input.value);
input.value = "";
}
});
function createSparkle(x, y) {
let sparkleDiv = document.createElement('div');
sparkleDiv.classList.add('sparkle');
sparkleDiv.style.left = `${x - 25}px`;
sparkleDiv.style.top = `${y - 25}px`;
document.body.appendChild(sparkleDiv);
setTimeout(() => {
sparkleDiv.remove();
}, 1000);
}
document.addEventListener('click', function (event) {
// クリックされた座標をサーバーに送信
socket.emit("element clicked", { x: event.pageX, y: event.pageY });
createSparkle(event.pageX, event.pageY);
});
socket.on("chat message", function (msg) {
let item = document.createElement("li");
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
socket.on("highlight element", function (coords) {
let sparkleDiv = document.createElement('div');
sparkleDiv.classList.add('sparkle');
sparkleDiv.style.left = `${coords.x - 25}px`;
sparkleDiv.style.top = `${coords.y - 25}px`;
document.body.appendChild(sparkleDiv);
setTimeout(() => {
sparkleDiv.remove();
}, 1000);
});
</script>
</body>
</html>
