-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Feat/#68 game result modal
- Loading branch information
Showing
24 changed files
with
116,067 additions
and
123,195 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
99 changes: 99 additions & 0 deletions
99
frontend/app/(page)/(needProtection)/game/component/gameResult/GameResult.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| import { useGameResultStore, useGameRoomStore } from '../../lib/store' | ||
| import { gameStateEnum, teamEnum } from '../../lib/store-type' | ||
| import { IGameResult } from '../../lib/type' | ||
| import TeamResult from './TeamResult' | ||
|
|
||
| const GameResult = () => { | ||
| const { gameState } = useGameRoomStore((state) => ({ | ||
| gameState: state.gameState, | ||
| })) | ||
| // const { gameResult } = useGameResultStore() | ||
| // ๋๋ฏธ ๋ฐ์ดํฐ | ||
| const gameResult: IGameResult = { | ||
| winTeam: 'RED', | ||
| redTeamTotalPoint: 151000, | ||
| blueTeamTotalPoint: 121200, | ||
| redTeam: [ | ||
| { | ||
| userId: 1, | ||
| username: 'red1', | ||
| earnPoint: 10, | ||
| amIMe: true, | ||
| }, | ||
| { | ||
| userId: 2, | ||
| username: 'red2', | ||
| earnPoint: 20, | ||
| amIMe: false, | ||
| }, | ||
| { | ||
| userId: 3, | ||
| username: 'red3', | ||
| earnPoint: 30, | ||
| amIMe: false, | ||
| }, | ||
| ], | ||
| blueTeam: [ | ||
| { | ||
| userId: 4, | ||
| username: 'blue1', | ||
| earnPoint: 40, | ||
| amIMe: false, | ||
| }, | ||
| { | ||
| userId: 5, | ||
| username: 'blue2', | ||
| earnPoint: 50, | ||
| amIMe: false, | ||
| }, | ||
| { | ||
| userId: 6, | ||
| username: 'blue3', | ||
| earnPoint: 60, | ||
| amIMe: false, | ||
| }, | ||
| ], | ||
| } | ||
|
|
||
| return ( | ||
| <div | ||
| className={`${ | ||
| gameState === gameStateEnum.DONE ? 'visible' : 'hidden' | ||
| } fixed top-0 left-0 z-20 w-full h-full bg-black bg-opacity-20 flex items-center justify-center`} | ||
| > | ||
| <div className="bg-white z-30 inset-32 flex flex-col gap-10 justify-center items-center bg-opacity-60 backdrop-filter backdrop-blur-md shadow-lg border border-white border-opacity-60 fixed rounded-3xl p-4"> | ||
| <div className="flex items-center gap-2 font-bold text-7xl animate-floating"> | ||
| <span className={`text-red-400`}>{gameResult.winTeam}</span> | ||
| {/* eslint-disable-next-line @next/next/no-img-element */} | ||
| <img | ||
| src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/Star.png" | ||
| alt="Star" | ||
| className=" size-6" | ||
| /> | ||
| <span className="flex items-center gap-1 text-yellow-400">WIN</span> | ||
| </div> | ||
|
|
||
| <fieldset className="flex justify-around w-full *:w-5/12 items-center mt-4"> | ||
| <section> | ||
| <TeamResult | ||
| team={teamEnum.RED} | ||
| isWin={gameResult.winTeam === teamEnum.RED} | ||
| teamPoint={gameResult.redTeamTotalPoint} | ||
| teamResult={gameResult.redTeam} | ||
| /> | ||
| </section> | ||
| <section> | ||
| <TeamResult | ||
| team={teamEnum.BLUE} | ||
| isWin={gameResult.winTeam === teamEnum.BLUE} | ||
| teamPoint={gameResult.blueTeamTotalPoint} | ||
| teamResult={gameResult.blueTeam} | ||
| /> | ||
| </section> | ||
| </fieldset> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default GameResult |
85 changes: 85 additions & 0 deletions
85
frontend/app/(page)/(needProtection)/game/component/gameResult/TeamResult.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| /* eslint-disable @next/next/no-img-element */ | ||
| import { teamEnum } from '../../lib/store-type' | ||
| import { IUserResult, TeamResultProps } from '../../lib/type' | ||
| import { teamColorToCssBg, teamColorToCssText } from '../../lib/util' | ||
|
|
||
| const emojis = [ | ||
| <img | ||
| key={1} | ||
| src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20One.png" | ||
| alt="Keycap Digit One" | ||
| className="size-10" | ||
| />, | ||
| <img | ||
| key={2} | ||
| src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20Two.png" | ||
| alt="Keycap Digit Two" | ||
| className="size-10" | ||
| />, | ||
| <img | ||
| key={3} | ||
| src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20Three.png" | ||
| alt="Keycap Digit Three" | ||
| className="size-10" | ||
| />, | ||
| <img | ||
| key={4} | ||
| src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20Four.png" | ||
| alt="Keycap Digit Four" | ||
| className="size-10" | ||
| />, | ||
| <img | ||
| key={5} | ||
| src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Symbols/Keycap%20Digit%20Five.png" | ||
| alt="Keycap Digit Five" | ||
| className="size-10" | ||
| />, | ||
| ] | ||
|
|
||
| const TeamResult = ({ team, isWin, teamPoint, teamResult }: TeamResultProps) => { | ||
| return ( | ||
| <section className={`w-full h-full ${isWin ? 'scale-105' : 'scale-90'}`}> | ||
| <fieldset className="flex items-center gap-4 h-28"> | ||
| <h3 className={`${teamColorToCssText[team as teamEnum]} font-bold text-5xl`}> | ||
| <span | ||
| className={`${team === teamEnum.RED ? 'redTeam' : 'blueTeam'} px-3`} | ||
| > | ||
| {team} | ||
| </span> | ||
| <span className="px-3 font-semibold text-3xl">{teamPoint}์ </span> | ||
| </h3> | ||
| <h3 className="py-2"> | ||
| {isWin ? ( | ||
| <img | ||
| src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Beaming%20Face%20with%20Smiling%20Eyes.png" | ||
| alt="Beaming Face with Smiling Eyes" | ||
| className="h-20" | ||
| /> | ||
| ) : ( | ||
| <img | ||
| src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Smilies/Crying%20Face.png" | ||
| alt="Crying Face" | ||
| className="h-20" | ||
| /> | ||
| )} | ||
| </h3> | ||
| </fieldset> | ||
| <ul className="flex flex-col gap-4 w-full h-4/5 pt-8"> | ||
| {teamResult.map((user: IUserResult, index) => ( | ||
| <li | ||
| key={user.userId} | ||
| className={`flex justify-between gap-5 *:text-3xl glass ${ | ||
| isWin ? 'text-black' : 'text-darkGray1 bg-neutral-600 bg-opacity-25' | ||
| } px-4 py-4 pr-6 ${user.amIMe ? 'bg-yellow-400 bg-opacity-50' : ''}`} | ||
| > | ||
| <span>{emojis[index]}</span> | ||
| <span className="font-medium">{user.username}</span> | ||
| <span className="font-semibold">{user.earnPoint}</span> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| export default TeamResult |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.