fixed server typeError bug, added clipboard and made it pretty
This commit is contained in:
Meleeman01
parent
6c8f68b8b4
commit
08d10bc672
1
clipboard.svg
Normal file
1
clipboard.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>clipboard-text-multiple-outline</title><path d="M4 7V21H18V23H4C2.9 23 2 22.1 2 21V7H4M20 3C21.1 3 22 3.9 22 5V17C22 18.1 21.1 19 20 19H8C6.9 19 6 18.1 6 17V5C6 3.9 6.9 3 8 3H11.18C11.6 1.84 12.7 1 14 1C15.3 1 16.4 1.84 16.82 3H20M14 3C13.45 3 13 3.45 13 4C13 4.55 13.45 5 14 5C14.55 5 15 4.55 15 4C15 3.45 14.55 3 14 3M10 7V5H8V17H20V5H18V7M15 15H10V13H15M18 11H10V9H18V11Z" /></svg>
|
||||
|
After Width: | Height: | Size: 451 B |
1
clipboardCheckmark.svg
Normal file
1
clipboardCheckmark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>clipboard-check-outline</title><path d="M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M7.5,13.5L9,12L11,14L15.5,9.5L17,11L11,17L7.5,13.5Z" /></svg>
|
||||
|
After Width: | Height: | Size: 382 B |
97
index.html
97
index.html
@ -80,9 +80,19 @@
|
||||
.nameInput {
|
||||
text-align: center;
|
||||
}
|
||||
.clipboard {
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
}
|
||||
.btn2 {
|
||||
background-color: #fefefe;
|
||||
}
|
||||
.btn2:active {
|
||||
background-color: #efefef;
|
||||
color: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="flx center">
|
||||
<body>
|
||||
<!-- Dialog -->
|
||||
<dialog class="nameDialog">
|
||||
<div class="flx(column) space-evenly">
|
||||
@ -107,30 +117,37 @@
|
||||
</div>
|
||||
<div>
|
||||
</dialog>
|
||||
<div class="main flx(column) middle center" style="max-width: 600px;">
|
||||
<button id="create-room">Create Room</button>
|
||||
<input id="join-code" placeholder="Enter room code">
|
||||
<button id="join-room">Join Room</button>
|
||||
<div class="room-code"></div>
|
||||
<div class="main flx(column) middle center" style="margin: 0 auto; max-width: 500px;">
|
||||
<button class="btn btn2 div-shadow is-round" id="create-room">Create Room</button>
|
||||
<div class="flx(wrap) center middle mt-3">
|
||||
<input id="join-code" placeholder="Enter room code" style="line-height: 2; text-align: center; width: 100px;">
|
||||
|
||||
<button class="btn btn2 div-shadow is-round" id="join-room">Join Room</button>
|
||||
</div>
|
||||
<div class="flx(wrap) center middle mb-2 roomCodeContainer hidden">
|
||||
<div class="room-code mr-2"></div>
|
||||
<img class="clipboard btn btn2 div-shadow is-round" src="clipboard.svg" width="15" onclick="copyToClipboard()" />
|
||||
</div>
|
||||
<div class="flx(wrap) mb-2 players"></div>
|
||||
|
||||
<div id="status"></div>
|
||||
<button id="start-game" style="display: none;">Start Game</button>
|
||||
<button id="spin-wheel" style="display: none;">Spin Wheel</button>
|
||||
<input id="guess-letter" placeholder="Guess a letter" style="display: none;">
|
||||
<button id="guess-button" style="display: none;">Guess</button>
|
||||
<button class="solve-button" style="display: none;" onclick="solvePuzzle()">Solve</button>
|
||||
<div class="flx(wrap) middle space-between is-full mb-3">
|
||||
<button class="btn btn2 div-shadow is-round" id="start-game" style="display: none;">Start Game</button>
|
||||
<button class="btn btn2 div-shadow is-round" id="spin-wheel" style="display: none;">Spin Wheel</button>
|
||||
|
||||
<div class="flx(wrap) middle space-between">
|
||||
<input id="guess-letter" placeholder="Guess a letter" style="display: none; line-height: 2; text-align: center;">
|
||||
<button class="btn btn2 div-shadow is-round" id="guess-button" style="display: none;">Guess</button>
|
||||
</div>
|
||||
|
||||
<button class="solve-button btn div-shadow is-round btn2" style="display: none;" onclick="solvePuzzle()">Solve</button>
|
||||
</div>
|
||||
|
||||
<div class="puzzleboard mb-2"></div>
|
||||
<div class="category mb-5 is-full"></div>
|
||||
<div class="category mb-5 is-full div-shadow"></div>
|
||||
|
||||
<canvas id="wheelCanvas" width="500" height="500"></canvas>
|
||||
|
||||
<div style="display:relative;">
|
||||
<span style="position: absolute; top: 0; left:50%">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>arrow-down-bold</title><path d="M9,4H15V12H19.84L12,19.84L4.16,12H9V4Z" /></svg>
|
||||
</span>
|
||||
<canvas id="wheelCanvas" width="500" height="500"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
//================general Purpose functions=========================================//
|
||||
@ -211,11 +228,19 @@
|
||||
return result;
|
||||
}
|
||||
function copyToClipboard() {
|
||||
navigator.clipboard.writeText("Your text here").then(() => {
|
||||
console.log('click Copied');
|
||||
let image = document.querySelector(".clipboard");
|
||||
image.src = 'clipboardCheckmark.svg';
|
||||
|
||||
navigator.clipboard.writeText(window.roomCode).then(() => {
|
||||
console.log("Copied successfully!");
|
||||
}).catch(err => {
|
||||
console.error("Failed to copy:", err);
|
||||
});
|
||||
setTimeout(() => {
|
||||
console.log("3 second has passed!");
|
||||
image.src = 'clipboard.svg';
|
||||
}, 3000);
|
||||
}
|
||||
//=========================================wheel==========================================//
|
||||
const wheel = [
|
||||
@ -225,10 +250,11 @@
|
||||
];
|
||||
|
||||
let canvas = document.getElementById('wheelCanvas');
|
||||
if(canvas.clientWidth < 600) {
|
||||
canvas.width = canvas.width / 1.5;
|
||||
canvas.height = canvas.height/1.5;
|
||||
if(window.innerWidth < 600) {
|
||||
canvas.width = canvas.width / 1.65;
|
||||
canvas.height = canvas.height / 1.65;
|
||||
}
|
||||
console.log(window.innerWidth);
|
||||
const ctx = canvas.getContext('2d');
|
||||
const radius = canvas.width / 2;
|
||||
let lowestEquivelantAngle = 23.4327090939438 % (2* Math.PI);
|
||||
@ -242,7 +268,15 @@
|
||||
let img = new Image();
|
||||
img.src = "arrow-down-bold.png";
|
||||
img.onload = function() {
|
||||
ctx.drawImage(img, 200, -50, 100,100);
|
||||
//another check here for mobile sizing
|
||||
|
||||
if(window.innerWidth < 600) {
|
||||
ctx.drawImage(img, 100, -70, 100,100);
|
||||
}
|
||||
else {
|
||||
ctx.drawImage(img, 200, -50, 100,100);
|
||||
}
|
||||
|
||||
}
|
||||
// Draw the wheel
|
||||
function drawWheel(drawResult = false) {
|
||||
@ -294,7 +328,14 @@
|
||||
});
|
||||
|
||||
ctx.restore();
|
||||
ctx.drawImage(img, 200, -50, 100,100);
|
||||
//check here for mobile size
|
||||
|
||||
if(window.innerWidth < 600) {
|
||||
ctx.drawImage(img, 100, -70, 100,100);
|
||||
}
|
||||
else {
|
||||
ctx.drawImage(img, 200, -50, 100,100);
|
||||
}
|
||||
}
|
||||
|
||||
// Start spinning
|
||||
@ -585,9 +626,10 @@
|
||||
document.getElementById("join-room").onclick = () => {
|
||||
const roomCode = document.getElementById("join-code").value;
|
||||
socket.send(JSON.stringify({ type: "join_room", roomCode }));
|
||||
this.style.display = 'none';
|
||||
|
||||
document.getElementById("create-room").style.display = 'none';
|
||||
document.getElementById('join-code').style.display = 'none';
|
||||
document.getElementById("join-room").style.display = 'none';
|
||||
|
||||
};
|
||||
|
||||
@ -616,7 +658,9 @@
|
||||
|
||||
if (message.type === "room_created") {
|
||||
window.you = message.you;
|
||||
document.querySelector(".roomCodeContainer").classList.remove('hidden');
|
||||
document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`;
|
||||
window.roomCode = message.roomCode;
|
||||
document.getElementById("status").innerText = `Room created!`;
|
||||
drawPlayers(message);
|
||||
if (message.isLeader) {
|
||||
@ -641,6 +685,7 @@
|
||||
// document.querySelector('.players').innerHtml += `<span>${}<span>`
|
||||
|
||||
document.getElementById("status").innerText = `${status}`;
|
||||
document.querySelector(".roomCodeContainer").classList.remove('hidden');
|
||||
document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`;
|
||||
if (message.isLeader) {
|
||||
changeTurnState()
|
||||
@ -657,7 +702,7 @@
|
||||
console.log(result);
|
||||
document.getElementById("status").innerText = "The game has started!";
|
||||
document.getElementById("start-game").style.display = "none";
|
||||
|
||||
document.querySelector(".roomCodeContainer").classList.add('hidden');
|
||||
changeSpinGuessState(message);
|
||||
}
|
||||
if (message.type === "new_puzzle") {
|
||||
|
||||
BIN
sounds/congrats.mp3
Normal file
BIN
sounds/congrats.mp3
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user