Skip to content

Commit

Permalink
Merge pull request #102 from BeyondPong/dev-feat#101
Browse files Browse the repository at this point in the history 
Feature: 토너먼트 게임시작
  • Loading branch information
@mixsung
mixsung authored Jun 27, 2024
2 parents 2ff6f00 + 85ac675 commit 088acb5
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 54 deletions.
2 changes: 1 addition & 1 deletion frontend/static/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

.btn.dropdown-toggle {
opacity: 0.7;
font-size: 1.5rem;
font-size: 2rem;
color: rgba(255, 255, 255, 1);
transition: all 0.3s ease;
}
Expand Down
28 changes: 13 additions & 15 deletions frontend/static/js/game/remoteGame.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,31 @@ export const remoteGame = {
const $app = document.getElementById('app');
const $canvas = document.createElement('canvas');
const context = $canvas.getContext('2d');
$canvas.width = $app.offsetWidth / 2;
$canvas.height = $app.offsetHeight / 1.2;
$app.appendChild($canvas);
let running = false;
let grid = 15;
let paddleWidth = grid * 6;
let role = false;
let user = {
player1: { name: 'player1', score: 0 },
player2: { name: 'player2', score: 0 },
};

let topPaddle = {
x: $canvas.width / 2 - paddleWidth / 2,
y: grid * 2,
width: paddleWidth,
height: grid,
x: 0,
y: 0,
width: 0,
height: 0,
name: '',
};
let bottomPaddle = {
x: $canvas.width / 2 - paddleWidth / 2,
y: $canvas.height - grid * 3,
width: paddleWidth,
height: grid,
x: 0,
y: 0,
width: 0,
height: 0,
name: '',
};
let ball = {
x: $canvas.width / 2,
y: $canvas.height / 2,
x: 0,
y: 0,
width: grid,
height: grid,
};
Expand Down Expand Up @@ -142,13 +138,16 @@ export const remoteGame = {
while (root.childNodes.length > 0) {
root.removeChild(root.firstChild);
}
$app.appendChild($canvas);
data.players.forEach((player) => {
if (player === nickname) {
role = true;
}
});
addKeyboardEvent();
running = true;
$canvas.width = data.game_width;
$canvas.height = data.game_height;
targetBall.x = data.ball_position.x;
targetBall.y = data.ball_position.y;

Expand Down Expand Up @@ -219,7 +218,6 @@ export const remoteGame = {
async function setSocket() {
socket.onmessage = function (event) {
const data = JSON.parse(event.data);

switch (data.type) {
case 'game_start':
handleGameStart(data.data);
Expand Down
76 changes: 38 additions & 38 deletions frontend/static/js/view/Play.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,14 @@ import { words } from '../state/Registry.js';
import { localGame } from '../game/localGame.js';
import { remoteGame } from '../game/remoteGame.js';
import { getRoomName, getProfileData } from '../api/getAPI.js';
import { postTournamentNickName } from '../api/postAPI.js';
import { addBlurBackground, removeBlurBackground } from '../utility/blurBackGround.js';
import WebSocketManager from '../state/WebSocketManager.js';

export default class extends AbstractView {
constructor(params) {
super(params);
this.nickname = '';
}

async getHtml() {
const isLogin = localStorage.getItem('token') !== null;

return `
<header class="main_header">
<a href="/" id="main_link" class="nav__link" data-link>Ping? Pong!</a>
Expand All @@ -37,7 +33,6 @@ export default class extends AbstractView {
</nav>
`;
}

async localModal() {
const modalHtml = `
<div class="modal_content play_modal">
Expand Down Expand Up @@ -87,7 +82,6 @@ export default class extends AbstractView {
}
});
}

async remoteModal() {
const modalHtml = `
<div class="modal_content play_modal">
Expand Down Expand Up @@ -120,25 +114,23 @@ export default class extends AbstractView {
}
});
}

async play(mode) {
const getRoomNames = async (mode) => {
const response = await getRoomName(mode);
return response.room_name;
};

const setupWebSocket = async (roomName, mode) => {
const data = await getProfileData();
const nickname = data.nickname;
this.nickname = data.nickname;
const token = localStorage.getItem('2FA');
WebSocketManager.connectGameSocket(`ws://localhost:8000/ws/play/${mode}/${roomName}/${nickname}/?token=${token}`);
WebSocketManager.connectGameSocket(
`ws://localhost:8000/ws/play/${mode}/${roomName}/${this.nickname}/?token=${token}`,
);
let socket = WebSocketManager.returnGameSocket();

const loadingSpinner = document.getElementById('loading_spinner');

socket.onopen = (event) => {
if (mode === 'TOURNAMENT') {
this.tournamentNickNameModal(nickname, roomName, socket);
this.tournamentNickNameModal(this.nickname, roomName, socket);
loadingSpinner.style.display = 'none';
} else {
loadingSpinner.style.display = 'flex';
Expand All @@ -147,26 +139,22 @@ export default class extends AbstractView {
socket.onclose = (event) => {
console.log('Game socket closed');
};

socket.onerror = (event) => {
console.error('Game socket error:', event);
if (!WebSocketManager.isGameSocketConnecting) {
WebSocketManager.connectGameSocket(
`ws://localhost:8000/ws/play/${mode}/${roomName}/${nickname}/?token=${token}`,
`ws://localhost:8000/ws/play/${mode}/${roomName}/${this.nickname}/?token=${token}`,
);
socket = WebSocketManager.returnGameSocket();
}
};

socket.onmessage = (event) => {
const data = JSON.parse(event.data);
loadingSpinner.style.display = 'none';
if (data.type === 'start_game') {
const countdownContainer = document.querySelector('#countdown_container');
countdownContainer.style.display = 'flex';

const $app = document.getElementById('app');

let responseMessage = {
type: 'set_board',
width: $app.offsetWidth / 2,
Expand All @@ -184,19 +172,16 @@ export default class extends AbstractView {
countdownContainer.innerText = 'Go!';
setTimeout(() => {
countdownContainer.style.display = 'none';
if (mode === 'REMOTE') remoteGame.init(socket, nickname, 'REMOTE');
else if (mode === 'TOURNAMENT') remoteGame.init(socket, nickname, 'TOURNAMENT');
remoteGame.init(socket, this.nickname, 'REMOTE');
}, 1000);
}
}, 1000);
}
};
};

const roomName = await getRoomNames(mode);
await setupWebSocket(roomName, mode);
}

async tournamentNickNameModal(realName, roomName, socket) {
const modalHtml = `
<div class="tournament_container_flex">
Expand All @@ -222,13 +207,11 @@ export default class extends AbstractView {
newContainer.classList.add('tournament_container');
newContainer.innerHTML = modalHtml;
modalCotainer.appendChild(newContainer);

const container = document.querySelector('.tournament_container');
const checkButton = document.querySelector('.check_button');
const inputBox = document.querySelector('.input_box');
const tournamentModal = document.querySelector('.tournament_modal');
const closeButton = document.querySelector('.tournament_button');

container.classList.remove('hidden');
checkButton.disabled = true;
checkButton.classList.add('disabled_button');
Expand All @@ -241,7 +224,6 @@ export default class extends AbstractView {
checkButton.classList.remove('disabled_button');
}
});

const tableHTML = `
<div class="tournament_left">
<div class="tournament_left_parent tournament_final">
Expand Down Expand Up @@ -317,7 +299,6 @@ export default class extends AbstractView {
</div>
</div>
`;

const checkNickName = (nickname, realname, room_name, socket) => {
const message = {
type: 'check_nickname',
Expand All @@ -327,7 +308,6 @@ export default class extends AbstractView {
};
socket.send(JSON.stringify(message));
};

const isValidPlayer = function (valid, players) {
if (valid === true) {
const container = document.querySelector('.tournament_container_flex');
Expand All @@ -338,7 +318,6 @@ export default class extends AbstractView {
newDiv.classList.add('tournament_list');
newDiv.innerHTML = tableHTML;
container.replaceChildren(newDiv);

const tournamentSemiPlayers = Array.from(document.getElementsByClassName('tournament_semi'));
tournamentSemiPlayers.forEach((parentDiv, index) => {
const children = parentDiv.children;
Expand Down Expand Up @@ -367,21 +346,47 @@ export default class extends AbstractView {
});
}
};

checkButton.addEventListener('click', () => {
const nickName = inputBox.value;
checkNickName(nickName, realName, roomName, socket);
this.nickName = inputBox.value;
checkNickName(this.nickName, realName, roomName, socket);
socket.onmessage = function (event) {
const data = JSON.parse(event.data);
if (data.valid !== undefined && data.valid === false) {
isValidPlayer(false, null);
} else if (data.type === 'nickname_valid') {
isValidPlayer(true, data.data.nicknames);
}
if (data.type === 'start_game') {
const loadingSpinner = document.getElementById('loading_spinner');
loadingSpinner.style.display = 'none';
const countdownContainer = document.querySelector('#countdown_container');
countdownContainer.style.display = 'flex';
const $app = document.getElementById('app');
let responseMessage = {
type: 'set_board',
width: $app.offsetWidth / 2,
height: $app.offsetHeight / 1.2,
};
socket.send(JSON.stringify(responseMessage));
let countdown = 3;
countdownContainer.innerText = countdown;
const countdownInterval = setInterval(() => {
countdown--;
if (countdown > 0) {
countdownContainer.innerText = countdown;
} else {
clearInterval(countdownInterval);
countdownContainer.innerText = 'Go!';
setTimeout(() => {
countdownContainer.style.display = 'none';
remoteGame.init(socket, this.nickname, 'TOURNAMENT');
}, 1000);
}
}, 1000);
}
};
});
}

tournamentModal() {
const modalHtml = `
<div class="modal_content play_modal">
Expand All @@ -402,13 +407,11 @@ export default class extends AbstractView {
`;
this.showModal(modalHtml);
const startButton = document.querySelector('#start_button');

startButton.addEventListener('click', (e) => {
e.target.style.display = 'none';
this.deleteModal();
this.play('TOURNAMENT');
});

startButton.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.target.style.display = 'none';
Expand All @@ -417,7 +420,6 @@ export default class extends AbstractView {
}
});
}

async showStartButton() {
const startButton = document.createElement('a');
startButton.id = 'start_button';
Expand All @@ -438,7 +440,6 @@ export default class extends AbstractView {
}
});
}

async showModal(modalHtml) {
const modalContainer = document.createElement('section');
modalContainer.classList.add('modal_container');
Expand All @@ -447,7 +448,6 @@ export default class extends AbstractView {
mainHeader.insertAdjacentElement('afterend', modalContainer);
await this.showStartButton();
}

deleteModal() {
const modal = document.querySelector('.play_modal');
modal.style.display = 'none';
Expand Down

0 comments on commit 088acb5

Please sign in to comment.