Meleeman/WheelOfFortune
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Meleeman:e2f2b0c713d04d4059162f2d4bb4b9e6afbd8150
Branches Tags
Meleeman:main
..
compare: Meleeman:6c8f68b8b498ab1bde4ec3125640f16ba789ae5b
Branches Tags
Meleeman:main

No commits in common. "e2f2b0c713d04d4059162f2d4bb4b9e6afbd8150" and "6c8f68b8b498ab1bde4ec3125640f16ba789ae5b" have entirely different histories.
e2f2b0c713 ... 6c8f68b8b4

5 changed files with 27 additions and 74 deletions
Show Stats Expand all files Collapse all files

1
clipboard.svg
View File

@ -1 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 451 B

1
clipboardCheckmark.svg
View File

@ -1 +0,0 @@
<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>
Side by Side

Before

Width:  |  Height:  |  Size: 382 B

91
index.html
View File

@ -80,19 +80,9 @@
.nameInput { .nameInput {
text-align: center; text-align: center;
} }
.clipboard {
transition: opacity 0.5s ease-in-out;
}
.btn2 {
background-color: #fefefe;
}
.btn2:active {
background-color: #efefef;
color: gray;
}
</style> </style>
</head> </head>
<body> <body class="flx center">
<!-- Dialog --> <!-- Dialog -->
<dialog class="nameDialog"> <dialog class="nameDialog">
<div class="flx(column) space-evenly"> <div class="flx(column) space-evenly">
@ -117,37 +107,30 @@
</div> </div>
<div> <div>
</dialog> </dialog>
<div class="main flx(column) middle center" style="margin: 0 auto; max-width: 500px;"> <div class="main flx(column) middle center" style="max-width: 600px;">
<button class="btn btn2 div-shadow is-round" id="create-room">Create Room</button> <button id="create-room">Create Room</button>
<div class="flx(wrap) center middle mt-3"> <input id="join-code" placeholder="Enter room code">
<input id="join-code" placeholder="Enter room code" style="line-height: 2; text-align: center; width: 100px;"> <button id="join-room">Join Room</button>
<div class="room-code"></div>
<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 class="flx(wrap) mb-2 players"></div>
<div id="status"></div> <div id="status"></div>
<div class="flx(wrap) middle space-between is-full mb-3"> <button id="start-game" style="display: none;">Start Game</button>
<button class="btn btn2 div-shadow is-round" id="start-game" style="display: none;">Start Game</button> <button id="spin-wheel" style="display: none;">Spin Wheel</button>
<button class="btn btn2 div-shadow is-round" 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">
<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="puzzleboard mb-2"></div>
<div class="category mb-5 is-full div-shadow"></div> <div class="category mb-5 is-full"></div>
<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> <canvas id="wheelCanvas" width="500" height="500"></canvas>
</div>
</div> </div>
<script> <script>
//================general Purpose functions=========================================// //================general Purpose functions=========================================//
@ -228,19 +211,11 @@
return result; return result;
} }
function copyToClipboard() { function copyToClipboard() {
console.log('click Copied'); navigator.clipboard.writeText("Your text here").then(() => {
let image = document.querySelector(".clipboard");
image.src = 'clipboardCheckmark.svg';
navigator.clipboard.writeText(window.roomCode).then(() => {
console.log("Copied successfully!"); console.log("Copied successfully!");
}).catch(err => { }).catch(err => {
console.error("Failed to copy:", err); console.error("Failed to copy:", err);
}); });
setTimeout(() => {
console.log("3 second has passed!");
image.src = 'clipboard.svg';
}, 3000);
} }
//=========================================wheel==========================================// //=========================================wheel==========================================//
const wheel = [ const wheel = [
@ -250,11 +225,10 @@
]; ];
let canvas = document.getElementById('wheelCanvas'); let canvas = document.getElementById('wheelCanvas');
if(window.innerWidth < 600) { if(canvas.clientWidth < 600) {
canvas.width = canvas.width / 1.65; canvas.width = canvas.width / 1.5;
canvas.height = canvas.height / 1.65; canvas.height = canvas.height/1.5;
} }
console.log(window.innerWidth);
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const radius = canvas.width / 2; const radius = canvas.width / 2;
let lowestEquivelantAngle = 23.4327090939438 % (2* Math.PI); let lowestEquivelantAngle = 23.4327090939438 % (2* Math.PI);
@ -268,16 +242,8 @@
let img = new Image(); let img = new Image();
img.src = "arrow-down-bold.png"; img.src = "arrow-down-bold.png";
img.onload = function() { img.onload = function() {
//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); ctx.drawImage(img, 200, -50, 100,100);
} }
}
// Draw the wheel // Draw the wheel
function drawWheel(drawResult = false) { function drawWheel(drawResult = false) {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
@ -328,15 +294,8 @@
}); });
ctx.restore(); ctx.restore();
//check here for mobile size
if(window.innerWidth < 600) {
ctx.drawImage(img, 100, -70, 100,100);
}
else {
ctx.drawImage(img, 200, -50, 100,100); ctx.drawImage(img, 200, -50, 100,100);
} }
}
// Start spinning // Start spinning
function startSpin(targetIndex,message) { function startSpin(targetIndex,message) {
@ -626,10 +585,9 @@
document.getElementById("join-room").onclick = () => { document.getElementById("join-room").onclick = () => {
const roomCode = document.getElementById("join-code").value; const roomCode = document.getElementById("join-code").value;
socket.send(JSON.stringify({ type: "join_room", roomCode })); socket.send(JSON.stringify({ type: "join_room", roomCode }));
this.style.display = 'none';
document.getElementById("create-room").style.display = 'none'; document.getElementById("create-room").style.display = 'none';
document.getElementById('join-code').style.display = 'none'; document.getElementById('join-code').style.display = 'none';
document.getElementById("join-room").style.display = 'none';
}; };
@ -658,9 +616,7 @@
if (message.type === "room_created") { if (message.type === "room_created") {
window.you = message.you; window.you = message.you;
document.querySelector(".roomCodeContainer").classList.remove('hidden');
document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`; document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`;
window.roomCode = message.roomCode;
document.getElementById("status").innerText = `Room created!`; document.getElementById("status").innerText = `Room created!`;
drawPlayers(message); drawPlayers(message);
if (message.isLeader) { if (message.isLeader) {
@ -685,7 +641,6 @@
// document.querySelector('.players').innerHtml += `<span>${}<span>` // document.querySelector('.players').innerHtml += `<span>${}<span>`
document.getElementById("status").innerText = `${status}`; document.getElementById("status").innerText = `${status}`;
document.querySelector(".roomCodeContainer").classList.remove('hidden');
document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`; document.querySelector(".room-code").innerText =`Room Code: ${message.roomCode}`;
if (message.isLeader) { if (message.isLeader) {
changeTurnState() changeTurnState()
@ -702,7 +657,7 @@
console.log(result); console.log(result);
document.getElementById("status").innerText = "The game has started!"; document.getElementById("status").innerText = "The game has started!";
document.getElementById("start-game").style.display = "none"; document.getElementById("start-game").style.display = "none";
document.querySelector(".roomCodeContainer").classList.add('hidden');
changeSpinGuessState(message); changeSpinGuessState(message);
} }
if (message.type === "new_puzzle") { if (message.type === "new_puzzle") {

2
server.js
View File

@ -579,7 +579,7 @@ wss.on('connection', (ws) => {
// Simulate a wheel spin result and update room state // Simulate a wheel spin result and update room state
let spinResult = getRandomValue(wheel) let spinResult = getRandomValue(wheel)
if (typeof spinResult !== 'string') { if (spinResult != ['lose a turn', 'spin again', 'Bankrupt'].indexOf(spinResult)) {
room.gameState.turnState = 'guess' room.gameState.turnState = 'guess'
room.gameState.players = room.gameState.players.map((player) => { room.gameState.players = room.gameState.players.map((player) => {
return player.id === ws.identifierToken ? {...player, points:parseInt(player.points)+parseInt(spinResult)} : player return player.id === ws.identifierToken ? {...player, points:parseInt(player.points)+parseInt(spinResult)} : player

BIN
sounds/congrats.mp3
View File

Binary file not shown.