Skip to content

Commit

Permalink
Merge pull request #76 from Joseonpaldo/minigame
Browse files Browse the repository at this point in the history 
Minigame
  • Loading branch information
@themerous
themerous authored Sep 14, 2024
2 parents 7ecd352 + 3c02e3b commit 91d48d8
Show file tree
Hide file tree
Showing 7 changed files with 1,244 additions and 1,268 deletions.
2,257 changes: 1,185 additions & 1,072 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

34 changes: 0 additions & 34 deletions prettier.config.mjs
View file

This file was deleted.

15 changes: 13 additions & 2 deletions src/app/mini-game/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,24 @@

import * as React from 'react';
import Stack from '@mui/material/Stack';
import Minigame from "@/components/mini-game/Minigame";

export default function Page(): React.JSX.Element {
// const [param, setParam] = React.useState(null);
const [param, setParam] = React.useState<number | null>(null);
const [roomNumber, setRoomNumber] = React.useState<number | null>(null);

React.useEffect(() => {
const inputA: string | null = prompt("Please enter roomNumber:");
const a: number | null = inputA ? parseInt(inputA) : null; // Provide a default value for the room number
setRoomNumber(a);
const inputB: string | null = prompt("Please enter game:");
const b:number | null = inputB ? parseInt(inputB) : null;
setParam(b);
});

return (
<Stack spacing={3}>
{/*<Minigame param={3} roomNumber={123}/>*/}
<Minigame roomNumber={roomNumber} param={param} javaSocket={null} player={null} />
</Stack>
);
}
3 changes: 1 addition & 2 deletions src/components/mini-game/components/BombViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const BombViewer = ({ socket }) => {

useEffect(() => {
if (socket) {
sockt.on('setBombStatus', (stat) => {
socket.on('setBombStatus', (stat) => {
setStatus(stat);
});
}
Expand All @@ -14,7 +14,6 @@ const BombViewer = ({ socket }) => {
return (
<div className="bomb-viewer-container">
<h1>Bomb Status: {status}</h1>
{status !== 'active' && <p>The defuse wire was: {defuseWire}</p>}
<div className="bomb">
{status === 'exploded' ? (
<img src={'/mg/explosion.png'} alt="Explosion" className="explosion-image" />
Expand Down
105 changes: 41 additions & 64 deletions src/components/mini-game/components/RPSviewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,81 +4,55 @@ import './css/RockPaperScissorsViewer.css'; // Add custom styles here
const RPSviewer = ({ socket }) => {
const [playerChoice, setPlayerChoice] = useState(null);
const [computerChoice, setComputerChoice] = useState(null);
const [result, setResult] = useState('');
const [round, setRound] = useState(1);
const [playerScore, setPlayerScore] = useState(0);
const [computerScore, setComputerScore] = useState(0);
const [gameOver, setGameOver] = useState(false);
const [animateResult, setAnimateResult] = useState(false);
const [isGameOver, setIsGameOver] = useState(false);
const [timeLeft, setTimeLeft] = useState(3); // Timer starts at 3 seconds
const [msg, setMsg] = useState('');

useEffect(() => {
// Listen for player choice from the server
socket.on('rpsPlayerChoice', (choice) => {
setPlayerChoice(choice);
});

// Listen for computer choice from the server
socket.on('rpsComputerChoice', (choice) => {
setComputerChoice(choice);
});

// Listen for game result from the server
socket.on('rpsResult', (outcome) => {
setResult(outcome);
setAnimateResult(true);
setTimeout(() => setAnimateResult(false), 1000);
});
const [gameState, setGameState] = useState();

// Listen for updated scores from the server
socket.on('rpsScore', ({ playerScore, computerScore }) => {
setPlayerScore(playerScore);
setComputerScore(computerScore);
});
const choices = ['바위', '보', '가위']; // Rock, Paper, Scissors in Korean

// Listen for the current round number from the server
socket.on('rpsRound', (round) => {
setRound(round);
if (round > 3) {
setGameOver(true);
}
});
useEffect(() => {
if(socket) {
socket.on('rpsState', (pchoice, cchoice, state) => {
console.log('received game state');
console.log(JSON.stringify(state));
setPlayerChoice(pchoice);
setComputerChoice(cchoice);
setGameState(state);

// Listen for time updates from the server
socket.on('rpsTimeLeft', (time) => {
setTimeLeft(time); // Sync timer with host
});
if(state.isGameOver) {
setIsGameOver(true);
}
});

// Clean up the event listeners when the component unmounts
return () => {
socket.off('rpsPlayerChoice');
socket.off('rpsComputerChoice');
socket.off('rpsResult');
socket.off('rpsScore');
socket.off('rpsRound');
socket.off('rpsTimeLeft');
};
socket.on('rpsTimeLeft', (time) => {
setTimeLeft(time);
});
}
}, [socket]);

// Utility function to get image based on the choice
const getImage = (choice) => {
switch (choice) {
case '바위':
return process.env.PUBLIC_URL + '/mg/rock.png'; // Ensure images are in the public folder
return '/mg/rock.png'; // Ensure images are in the public folder
case '보':
return process.env.PUBLIC_URL + '/mg/paper.png';
return '/mg/paper.png';
case '가위':
return process.env.PUBLIC_URL + '/mg/scissor.png';
return '/mg/scissor.png';
default:
return '';
}
};

return (
(gameState === undefined) ? <div>Loading...</div> :
<div className="game-wrapper">
<h2>Rock Paper Scissors - Viewer - Round {round}</h2>
<h2>Rock Paper Scissors - Viewer - Round {gameState.round}</h2>
<div className="scoreboard">
Player Score: {playerScore} | Computer Score: {computerScore}
Player Score: {gameState.playerScore} | Computer Score: {gameState.computerScore}
</div>

{/* Timer Box for Viewer */}
Expand All @@ -91,26 +65,29 @@ const RPSviewer = ({ socket }) => {

{/* Adding choices-container for consistent layout */}
<div className="choices-container">
<div className={`hand ${result === 'You Win' ? 'jump' : ''}`}>
<div className={`hand ${gameState.win === 'You Win' ? 'jump' : ''}`}>
<p>Player's choice:</p>
<img src={getImage(playerChoice)} alt={playerChoice} />
</div>
<div className={`hand ${result === 'You Lose' ? 'jump' : ''}`}>
<div className={`hand ${gameState.win === 'You Lose' ? 'jump' : ''}`}>
<p>Computer's choice:</p>
<img src={getImage(computerChoice)} alt={computerChoice} />
</div>
</div>

<h3 className={`result ${animateResult ? 'fadeIn' : ''}`}>{result}</h3>
{gameOver && (
<h3>
{playerScore > computerScore
? 'Player Wins the Game!'
: playerScore < computerScore
? 'Computer Wins the Game!'
: 'The Game is a Draw!'}
</h3>
)}
<h3 className={`result ${animateResult ? 'fadeIn' : ''}`}>{gameState.win}</h3>
<h3 className={`result ${animateResult ? 'fadeIn' : ''}`}>
{
gameState.win === 1 ? "win" :
gameState.win === 2 ? "lose" :
gameState.win === 0 ? "draw" : ""
}
</h3>
{isGameOver && (
<h3>
{ msg }
</h3>
)}
</div>
);
};
Expand Down
92 changes: 3 additions & 89 deletions src/components/mini-game/components/RockPaperScissors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,103 +36,17 @@ const RockPaperScissors = ({ socket }) => {
useEffect(() => {
if(isGameOver) {
if(gameState.playerScore > gameState.computerScore) {
setMsg('You Win the Game!');
socket.emit('hostResult', true);
}else if(gameState.playerScore < gameState.computerScore) {
setMsg('You Lose the Game!');
socket.emit('hostResult', false);
}
}
}, [isGameOver]);

const playGame = (choice) => {
socket.emit('rpsPlayerChoice', choice);
}

// // Timer logic for each round
// useEffect(() => {
// if (gameOver || timeLeft === 0) return;

// const timer = setInterval(() => {
// setTimeLeft((prevTimeLeft) => {
// if (prevTimeLeft > 0) {
// socket.emit('rpsTimeLeft', prevTimeLeft - 1); // Emit timeLeft to the server
// return prevTimeLeft - 1;
// } else {
// playGame(null); // Auto-play if the player doesn't choose
// clearInterval(timer);
// return 0;
// }
// });
// }, 1000);

// return () => clearInterval(timer);
// }, [timeLeft, gameOver, socket]);

// const playGame = (choice) => {
// if (gameOver || round > 3) return;

// setPlayerChoice(choice);
// socket.emit('rpsPlayerChoice', choice);

// const computerChoice = choices[Math.floor(Math.random() * 3)];
// setComputerChoice(computerChoice);
// socket.emit('rpsComputerChoice', computerChoice);

// let outcome;
// if (choice === computerChoice) {
// outcome = 'Draw';
// setResult(outcome);
// socket.emit('rpsResult', outcome);

// // If it's a draw, reset the round without incrementing the round number
// setTimeLeft(3); // Reset the timer
// return; // Exit early since we don't want to change the round or scores
// } else if (
// (choice === '바위' && computerChoice === '가위') ||
// (choice === '보' && computerChoice === '바위') ||
// (choice === '가위' && computerChoice === '보')
// ) {
// outcome = 'You Win';
// setPlayerScore(playerScore + 1);
// socket.emit('rpsScore', { playerScore: playerScore + 1, computerScore });
// } else {
// outcome = 'You Lose';
// setComputerScore(computerScore + 1);
// socket.emit('rpsScore', { playerScore, computerScore: computerScore + 1 });
// }

// setResult(outcome);
// socket.emit('rpsResult', outcome);

// // Check if game is over (after 3 non-draw rounds)
// if (round === 3) {
// setGameOver(true);

// // Determine final result
// let finalOutcome;
// if (playerScore > computerScore) {
// finalOutcome = 'You Win the Game!';
// } else if (playerScore < computerScore) {
// finalOutcome = 'You Lose the Game!';
// } else {
// finalOutcome = 'The Game is a Draw!';
// }

// // Send final result to the server
// socket.emit('rpsFinalResult', finalOutcome);

// // Trigger alert with final result
// alert(finalOutcome);
// } else {
// setRound(round + 1);
// socket.emit('round', round);
// setTimeLeft(3); // Reset the timer for the next round
// }

// setAnimateResult(true);
// setTimeout(() => setAnimateResult(false), 1000);
// };

// Utility to get the correct image for the choices

const getImage = (choice) => {
switch (choice) {
case '바위':
Expand Down
6 changes: 1 addition & 5 deletions src/components/mini-game/components/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,7 @@ const Game = ({ socket, image }) => {
useEffect(() => {
if (isGameOver) {
// Handle game over logic here
if (win) {
console.log('You win!');
} else {
console.log('You lose!');
}
socket.emit('hostResult', win);
}
}, [win]);

Expand Down

0 comments on commit 91d48d8

Please sign in to comment.