Merge pull request #30 from MomHelpMe/front/feat/tournament-page-rebu…

…ilding Front/feat/tournament page rebuilding
MomHelpMe · Aug 27, 2024 · c4cf49e · c4cf49e
2 parents 0f79f02 + f006074
commit c4cf49e
Show file tree

Hide file tree

Showing 5 changed files with 433 additions and 41 deletions.
diff --git a/frontend/img/tournament.png b/frontend/img/tournament.png
diff --git a/frontend/src/components/Main-Menu.js b/frontend/src/components/Main-Menu.js
@@ -7,17 +7,17 @@ export class Menu extends Component {
 	translate() {
 		const languages = {
 			0: {
-				gameMenuTexts: ["Local Game", "Multi Game", "AI", "Tournament"],
+				gameMenuTexts: ["Local Game", "Multi Game", "Tournament"],
 				userMenuTexts: ["Friends", "Profile", "Logout"],
 				lanText: "Change Language"
 			},
 			1: {
-				gameMenuTexts: ["로컬 게임", "멀티 게임", "AI", "토너먼트"],
+				gameMenuTexts: ["로컬 게임", "멀티 게임", "토너먼트"],
 				userMenuTexts: ["친구", "프로필", "로그아웃"],
 				lanText: "언어 변경"
 			},
 			2: {
-				gameMenuTexts: ["ローカルゲーム", "マルチゲーム", "AI", "トーナメント"],
+				gameMenuTexts: ["ローカルゲーム", "マルチゲーム", "トーナメント"],
 				userMenuTexts: ["友達", "プロフィール", "ログアウト"],
 				lanText: "言語を変更"
 			}
@@ -44,7 +44,7 @@ export class Menu extends Component {
 	}
 
 	mounted(){
-		new List(document.querySelector("ul#gameMenu"), { className: "gameMode", ids: ["LocalGame", "MultiGame", "AI", "Tournament"], contents: this.translations.gameMenuTexts});
+		new List(document.querySelector("ul#gameMenu"), { className: "gameMode", ids: ["LocalGame", "MultiGame", "Tournament"], contents: this.translations.gameMenuTexts});
 		new List(document.querySelector("ul#userMenu"), { className: "showInfo", ids: ["Friends", "Profile", "Logout"], contents: this.translations.userMenuTexts});
 	}
 

diff --git a/frontend/src/components/Tournament-History.js b/frontend/src/components/Tournament-History.js
@@ -0,0 +1,92 @@
+import { Component } from "../core/Component.js";
+
+export class TournamentHistory extends Component {
+
+	initState() {
+		return { idx: 0 };
+	}
+
+	template () {
+
+		const { gameInfo } = this.props;
+
+		const game = Object.values(gameInfo)[this.state.idx];
+		const day = Object.keys(gameInfo)[this.state.idx];
+		this.size = Object.keys(gameInfo).length - 1;
+
+		// 게임 1의 데이터
+		const game1_nick1 = Object.keys(game.game1)[0];
+		const game1_score1 = game.game1[game1_nick1];
+		const game1_nick2 = Object.keys(game.game1)[1];
+		const game1_score2 = game.game1[game1_nick2];
+
+		// 게임 2의 데이터
+		const game2_nick1 = Object.keys(game.game2)[0];
+		const game2_score1 = game.game2[game2_nick1];
+		const game2_nick2 = Object.keys(game.game2)[1];
+		const game2_score2 = game.game2[game2_nick2];
+
+		// 게임 3의 데이터
+		const game3_nick1 = Object.keys(game.game3)[0];
+		const game3_score1 = game.game3[game3_nick1];
+		const game3_nick2 = Object.keys(game.game3)[1];
+		const game3_score2 = game.game3[game3_nick2];
+
+		return `
+			<div id="tournament-crown-box">
+				<img id="crown" src="/img/crown.png"></img>
+			</div>
+			<div id="tournament-players">
+				<div class="tournament-win" id="tournament-nick">${game3_score1 > game3_score2 ? game3_nick1 : game3_nick2}</div>
+			</div>
+			<div id="tournament-lines">
+				<div id="tournament-line1">
+					<div class="${game3_score1 > game3_score2 ? "tournament-win-score" : "tournament-lose-score"}" id="tournament-left-score">${game3_score1}</div>
+					<div class="${game3_score1 < game3_score2 ? "tournament-win-score" : "tournament-lose-score"}" id="tournament-right-score">${game3_score2}</div>
+				</div>
+			</div>
+			<div id="tournament-players">
+				<div class="${game3_score1 > game3_score2 ? "tournament-win" : "tournament-lose"}" id="tournament-nick">${game3_nick1}</div>
+				<div class="${game3_score1 < game3_score2 ? "tournament-win" : "tournament-lose"}" id="tournament-nick">${game3_nick2}</div>
+			</div>
+			<div id="tournament-lines">
+				<div id="tournament-line2">
+					<div class="${game1_score1 > game1_score2 ? "tournament-win-score" : "tournament-lose-score"}" id="tournament-left-score">${game1_score1}</div>
+					<div class="${game1_score1 < game1_score2 ? "tournament-win-score" : "tournament-lose-score"}" id="tournament-right-score">${game1_score2}</div>
+				</div>
+				<div id="tournament-line2">
+					<div class="${game2_score1 > game2_score2 ? "tournament-win-score" : "tournament-lose-score"}" id="tournament-left-score">${game2_score1}</div>
+					<div class="${game2_score1 < game2_score2 ? "tournament-win-score" : "tournament-lose-score"}" id="tournament-right-score">${game2_score2}</div>
+				</div>
+			</div>
+			<div id="tournament-players">
+				<div class="${game1_score1 > game1_score2 ? "tournament-win" : "tournament-lose"}" id="tournament-nick2">${game1_nick1}</div>
+				<div class="${game1_score1 < game1_score2 ? "tournament-win" : "tournament-lose"}" id="tournament-nick2">${game1_nick2}</div>
+				<div id="tournament-blank"></div>
+				<div class="${game2_score1 > game2_score2 ? "tournament-win" : "tournament-lose"}"  id="tournament-nick2">${game2_nick1}</div>
+				<div class="${game2_score1 < game2_score2 ? "tournament-win" : "tournament-lose"}" id="tournament-nick2">${game2_nick2}</div>
+			</div>
+			<div id="tournament-history-button-box">
+				<div id="tournament-prev-button"></div>
+				<div id="tournament-game-name">${day} - Game</div>
+				<div id="tournament-next-button"></div>
+			</div>
+		`;
+	}
+
+	setEvent(){
+		this.addEvent('click', '#tournament-prev-button', (event) => {
+			console.log("prev");
+			console.log(this.state.idx);
+			if (this.state.idx > 0) this.state.idx--;
+			console.log(this.state.idx);
+		});
+
+		this.addEvent('click', '#tournament-next-button', (event) => {
+			console.log("next");
+			console.log(this.state.idx);
+			if (this.state.idx < this.size) this.state.idx++;
+			console.log(this.state.idx);
+		});
+	}
+}
diff --git a/frontend/src/components/Tournament-Setting.js b/frontend/src/components/Tournament-Setting.js
@@ -1,17 +1,41 @@
 import { Component } from "../core/Component.js";
-import { changeUrl } from "../core/router.js";
+import { TournamentHistory } from "./Tournament-History.js";
 
 export class TournamentSetting extends Component {
 
 	template () {
+		// fetch(){
+		//	tournament history 조회
+		//}
+
+		this.games = {
+			"09/02": '{ "game1": {"Seonjo": 2, "Michang": 1}, "game2": {"Jiko": 3, "Jaehejun": 2}, "game3": {"Seonjo": 2, "Jiko": 3} }',
+			"10/02": '{ "game1": {"Jaehejun": 1, "Seonjo": 2}, "game2": {"Michang": 2, "Seunan": 1}, "game3": {"Seonjo": 2, "Michang": 3} }',
+			"10/12": '{ "game1": {"Michang": 2, "Jiko": 1}, "game2": {"Seonjo": 3, "Seunan": 2}, "game3": {"Michang": 1, "Seonjo": 3} }',
+			"10/25": '{ "game1": {"Jaehejun": 2, "Seunan": 3}, "game2": {"Michang": 3, "Seonjo": 2}, "game3": {"Seunan": 1, "Michang": 2} }',
+			"11/12": '{ "game1": {"Jiko": 2, "Jaehejun": 1}, "game2": {"Seunan": 3, "Michang": 2}, "game3": {"Jiko": 2, "Seunan": 3} }',
+			"12/25": '{ "game1": {"Michang": 2, "Seunan": 3}, "game2": {"Jiko": 3, "Seonjo": 2}, "game3": {"Seunan": 1, "Jiko": 2} }',
+		};
+
+		for (let date in this.games) {
+			this.games[date] = JSON.parse(this.games[date]);
+		}
+
+		console.log(this.games);
+
 		return `
 			<div id="tournament-box">
+				<div id="tournament-game-menu">Game</div>
+				<div id="tournament-history-menu">History</div>
 				<div id="tournament-title">Tournament</div>
 				<img src="/img/back.png" id="goBack"></img>
-				<div id="tournament-body">
-					<div id="tournament-start-button-box">
+				<div id="tournament-main-body">
+					<img src="/img/tournament.png" id="tournament-img"></img>
+					<div id="tournament-challenge-text">Take on the challenge</div>
+				</div>
+				<div id="tournament-game-body">
+					<div id="tournament-crown-box">
 						<img id="crown" src="/img/crown.png"></img>
-						<div id="tournament-start-button">start</div>
 					</div>
 					<div id="tournament-players">
 						<div id="tournament-nick">Winner</div>
@@ -34,7 +58,9 @@ export class TournamentSetting extends Component {
 						<input class="tournament-input" autocomplete="off" id="tournament-nick3" maxlength="8" placeholder="nickname3"></input>
 						<input class="tournament-input" autocomplete="off" id="tournament-nick4" maxlength="8" placeholder="nickname4"></input>
 					</div>
+					<div id="tournament-start-button">S T A R T</div>
 				</div>
+				<div id="tournament-history-body"></div>
 			</div>
 		`;
 	}
@@ -43,5 +69,41 @@ export class TournamentSetting extends Component {
 		this.addEvent('click', '#goBack', (event) => {
 			window.history.back();
 		});
+
+		this.addEvent('click', '#tournament-start-button', (event) => {
+			console.log("you press start button!!");
+		});
+
+		this.addEvent('click', '#tournament-game-menu', (event) => {
+			const gameMenu = document.querySelector('#tournament-game-menu');
+			const historyMenu = document.querySelector('#tournament-history-menu');
+			const mainBody = document.querySelector('#tournament-main-body');
+			const gameBody = document.querySelector('#tournament-game-body');
+			const historyBody = document.querySelector('#tournament-history-body');
+
+			gameMenu.style.color = "#6886bd";
+			historyMenu.style.color = 'white';
+			mainBody.style.display = 'none';
+			historyBody.style.display = 'none';
+			gameBody.style.display = 'flex';
+		});
+
+		this.addEvent('click', '#tournament-history-menu', (event) => {
+			if (!this.games) return;
+			this.game = this.games[this.idx];
+			const gameMenu = document.querySelector('#tournament-game-menu');
+			const historyMenu = document.querySelector('#tournament-history-menu');
+			const mainBody = document.querySelector('#tournament-main-body');
+			const gameBody = document.querySelector('#tournament-game-body');
+			const historyBody = document.querySelector('#tournament-history-body');
+
+			historyMenu.style.color = "#6886bd";
+			gameMenu.style.color = 'white';
+			mainBody.style.display = 'none';
+			gameBody.style.display = 'none';
+			historyBody.style.display = 'flex';
+
+			new TournamentHistory(historyBody, { gameInfo: this.games });
+		});
 	}
 }