Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor: 토너먼트용 #107

Merged
merged 3 commits into from
Jun 28, 2024
Merged

Refactor: 토너먼트용 #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
63b68d9
Style: scoreBoard가 cavnas옆에 위치
Hosung99 Jun 28, 2024
f718595
Refactor: is_final적용
Hosung99 Jun 28, 2024
67fa9dd
Refactor: 점수가 scoreBoard옆에 위치하도록 수정
Hosung99 Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions frontend/static/css/game.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,11 @@ canvas {
#scoreBoard {
text-align: center;
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-between;
color: white;
justify-content: center;
left: calc(25% + 50% + 20px);
font-size: calc(1em + 1vw);
transform: translateX(0);
gap: 50%;
height: 100%;
}

.remote_buttonContainer {
Expand Down
21 changes: 16 additions & 5 deletions frontend/static/js/game/localGame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ export const localGame = {
function setScore() {
const $div = document.createElement('div');
$div.id = 'scoreBoard';
$div.style.display = 'flex';
$div.style.flexDirection = 'column';

const player1Container = document.createElement('div');
const player1Label = document.createElement('div');
Expand All @@ -46,6 +44,8 @@ export const localGame = {
$div.appendChild(player1Container);

root.appendChild($div);

$div.style.position = 'absolute';
}

function updateDimensions() {
Expand Down Expand Up @@ -360,7 +360,7 @@ export const localGame = {
}

let edge;
function setRender() {
async function setRender() {
container = document.getElementById('app');
renderer = new THREE.WebGLRenderer();
renderer.setSize(dimensions.WIDTH, dimensions.HEIGHT);
Expand Down Expand Up @@ -436,8 +436,19 @@ export const localGame = {
renderer.render(scene, camera);
}

function updateScoreBoardPosition() {
const canvasRect = renderer.domElement.getBoundingClientRect();
const scoreBoard = document.getElementById('scoreBoard');
scoreBoard.style.top = `${canvasRect.top}px`;
scoreBoard.style.left = `${canvasRect.right + 20}px`;
scoreBoard.style.height = `${canvasRect.height}px`;
}

setScore();
window.addEventListener('resize', onWindowResize, false);
setRender();
setRender().then(() => {
window.addEventListener('resize', onWindowResize, false);
updateScoreBoardPosition();
window.addEventListener('resize', updateScoreBoardPosition, false);
});
},
};
92 changes: 54 additions & 38 deletions frontend/static/js/game/remoteGame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const remoteGame = {
async function gameEnd(data) {
role = false;
removeKeyboardEvent();
await postGameResult(gameMode, user);
if (gameMode === 'REMOTE') await postGameResult(gameMode, user);
const $win = document.createElement('div');
$win.classList.add('win');
$win.innerHTML = `${data.winner} wins!!!`;
Expand All @@ -66,37 +66,39 @@ export const remoteGame = {
$score.innerHTML = `${data.scores[data.loser]} : ${data.scores[data.winner]}`;
}

const againButton = document.createElement('button');
againButton.classList.add('gameButton');
againButton.innerHTML = 'Play Again';
againButton.setAttribute('tabindex', '0');
const mainButton = document.createElement('button');
mainButton.classList.add('gameButton');
mainButton.innerHTML = 'Main';
mainButton.setAttribute('tabindex', '0');
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('remote_buttonContainer');
buttonContainer.appendChild($score);
buttonContainer.appendChild($win);
buttonContainer.appendChild(againButton);
buttonContainer.appendChild(mainButton);
document.getElementById('app').appendChild(buttonContainer);
againButton.addEventListener('click', () => {
window.location.href = '/play';
});
againButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
if (data.is_final) {
const againButton = document.createElement('button');
againButton.classList.add('gameButton');
againButton.innerHTML = 'Play Again';
againButton.setAttribute('tabindex', '0');
const mainButton = document.createElement('button');
mainButton.classList.add('gameButton');
mainButton.innerHTML = 'Main';
mainButton.setAttribute('tabindex', '0');
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('remote_buttonContainer');
buttonContainer.appendChild($score);
buttonContainer.appendChild($win);
buttonContainer.appendChild(againButton);
buttonContainer.appendChild(mainButton);
document.getElementById('app').appendChild(buttonContainer);
againButton.addEventListener('click', () => {
window.location.href = '/play';
}
});
mainButton.addEventListener('click', () => {
window.location.href = '/';
});
mainButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
});
againButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
window.location.href = '/play';
}
});
mainButton.addEventListener('click', () => {
window.location.href = '/';
}
});
});
mainButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
window.location.href = '/';
}
});
}
}

function render() {
Expand Down Expand Up @@ -129,6 +131,7 @@ export const remoteGame = {
type: 'start_game',
};
socket.send(JSON.stringify(responseMessage));
console.log('game_Start');
}

async function settingGame(data) {
Expand Down Expand Up @@ -169,8 +172,6 @@ export const remoteGame = {

const $div = document.createElement('div');
$div.id = 'scoreBoard';
$div.style.display = 'flex';
$div.style.flexDirection = 'column';

const player1Container = document.createElement('div');
const player1Label = document.createElement('div');
Expand All @@ -197,6 +198,11 @@ export const remoteGame = {
root.appendChild($div);
document.getElementById('player1Score').innerText = user.player1.score;
document.getElementById('player2Score').innerText = user.player2.score;
const canvasRect = $canvas.getBoundingClientRect();
$div.style.position = 'absolute';
$div.style.top = `${canvasRect.top}px`;
$div.style.left = `${canvasRect.right + 20}px`;
$div.style.height = `${canvasRect.height}px`;
}

function waitNextGame() {
Expand All @@ -213,11 +219,19 @@ export const remoteGame = {
$wait.appendChild(spinner);
$wait.appendChild(waitText);
root.appendChild($wait);

const canvasRect = $canvas.getBoundingClientRect();
$wait.style.position = 'absolute';
$wait.style.color = 'white';
$wait.style.top = `${canvasRect.top + canvasRect.height / 2}px`;
$wait.style.left = `${canvasRect.left + canvasRect.width / 2}px`;
$wait.style.transform = 'translate(-50%, -50%)';
}

async function setSocket() {
socket.onmessage = function (event) {
const data = JSON.parse(event.data);
console.log(data.type);
switch (data.type) {
case 'game_start':
handleGameStart(data.data);
Expand All @@ -229,7 +243,7 @@ export const remoteGame = {
handleBallPosition(data.data);
break;
case 'next_round':
handleNextRound(data.data);
handleNextRound();
break;
case 'game_restart':
handleGameRestart(data.data);
Expand Down Expand Up @@ -260,10 +274,12 @@ export const remoteGame = {
targetBall.y = data.y;
}

async function handleNextRound(data) {
waitNextGame();
gameStart();
animate();
async function handleNextRound() {
setTimeout(() => {
gameStart();
running = true;
animate();
}, 3000);
}

function handleGameRestart(data) {
Expand Down Expand Up @@ -338,7 +354,7 @@ export const remoteGame = {
}

function keyupHandler(e) {
if (e.key == 'ArrowUp' || e.key == 'ArrowDown') {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
e.preventDefault();
}
}
Expand Down