diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f3ee419 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} diff --git a/index.html b/index.html index 022f645..bc2fdc8 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,23 @@ - Hello World! + ๐Ÿ‡ฐ๐Ÿ‡ทDecrypto + + + + + + + + + + + + + + + +
diff --git a/public/favicon/android-icon-144x144.png b/public/favicon/android-icon-144x144.png new file mode 100644 index 0000000..8d9f1b4 Binary files /dev/null and b/public/favicon/android-icon-144x144.png differ diff --git a/public/favicon/android-icon-192x192.png b/public/favicon/android-icon-192x192.png new file mode 100644 index 0000000..a436ae8 Binary files /dev/null and b/public/favicon/android-icon-192x192.png differ diff --git a/public/favicon/android-icon-36x36.png b/public/favicon/android-icon-36x36.png new file mode 100644 index 0000000..738318e Binary files /dev/null and b/public/favicon/android-icon-36x36.png differ diff --git a/public/favicon/android-icon-48x48.png b/public/favicon/android-icon-48x48.png new file mode 100644 index 0000000..d34f1ce Binary files /dev/null and b/public/favicon/android-icon-48x48.png differ diff --git a/public/favicon/android-icon-72x72.png b/public/favicon/android-icon-72x72.png new file mode 100644 index 0000000..2bb5a87 Binary files /dev/null and b/public/favicon/android-icon-72x72.png differ diff --git a/public/favicon/android-icon-96x96.png b/public/favicon/android-icon-96x96.png new file mode 100644 index 0000000..ae4fbe4 Binary files /dev/null and b/public/favicon/android-icon-96x96.png differ diff --git a/public/favicon/apple-icon-114x114.png b/public/favicon/apple-icon-114x114.png new file mode 100644 index 0000000..40b0bd4 Binary files /dev/null and b/public/favicon/apple-icon-114x114.png differ diff --git a/public/favicon/apple-icon-120x120.png b/public/favicon/apple-icon-120x120.png new file mode 100644 index 0000000..bd4fb1f Binary files /dev/null and b/public/favicon/apple-icon-120x120.png differ diff --git a/public/favicon/apple-icon-144x144.png b/public/favicon/apple-icon-144x144.png new file mode 100644 index 0000000..8d9f1b4 Binary files /dev/null and b/public/favicon/apple-icon-144x144.png differ diff --git a/public/favicon/apple-icon-152x152.png b/public/favicon/apple-icon-152x152.png new file mode 100644 index 0000000..bfe4aa9 Binary files /dev/null and b/public/favicon/apple-icon-152x152.png differ diff --git a/public/favicon/apple-icon-180x180.png b/public/favicon/apple-icon-180x180.png new file mode 100644 index 0000000..534d946 Binary files /dev/null and b/public/favicon/apple-icon-180x180.png differ diff --git a/public/favicon/apple-icon-57x57.png b/public/favicon/apple-icon-57x57.png new file mode 100644 index 0000000..c9aae7d Binary files /dev/null and b/public/favicon/apple-icon-57x57.png differ diff --git a/public/favicon/apple-icon-60x60.png b/public/favicon/apple-icon-60x60.png new file mode 100644 index 0000000..7f61610 Binary files /dev/null and b/public/favicon/apple-icon-60x60.png differ diff --git a/public/favicon/apple-icon-72x72.png b/public/favicon/apple-icon-72x72.png new file mode 100644 index 0000000..2bb5a87 Binary files /dev/null and b/public/favicon/apple-icon-72x72.png differ diff --git a/public/favicon/apple-icon-76x76.png b/public/favicon/apple-icon-76x76.png new file mode 100644 index 0000000..30703a7 Binary files /dev/null and b/public/favicon/apple-icon-76x76.png differ diff --git a/public/favicon/apple-icon-precomposed.png b/public/favicon/apple-icon-precomposed.png new file mode 100644 index 0000000..e63a167 Binary files /dev/null and b/public/favicon/apple-icon-precomposed.png differ diff --git a/public/favicon/apple-icon.png b/public/favicon/apple-icon.png new file mode 100644 index 0000000..e63a167 Binary files /dev/null and b/public/favicon/apple-icon.png differ diff --git a/public/favicon/browserconfig.xml b/public/favicon/browserconfig.xml new file mode 100644 index 0000000..c554148 --- /dev/null +++ b/public/favicon/browserconfig.xml @@ -0,0 +1,2 @@ + +#ffffff \ No newline at end of file diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png new file mode 100644 index 0000000..3105fb1 Binary files /dev/null and b/public/favicon/favicon-16x16.png differ diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png new file mode 100644 index 0000000..4fe517d Binary files /dev/null and b/public/favicon/favicon-32x32.png differ diff --git a/public/favicon/favicon-96x96.png b/public/favicon/favicon-96x96.png new file mode 100644 index 0000000..ae4fbe4 Binary files /dev/null and b/public/favicon/favicon-96x96.png differ diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico new file mode 100644 index 0000000..6bcf5b3 Binary files /dev/null and b/public/favicon/favicon.ico differ diff --git a/public/favicon/manifest.json b/public/favicon/manifest.json new file mode 100644 index 0000000..013d4a6 --- /dev/null +++ b/public/favicon/manifest.json @@ -0,0 +1,41 @@ +{ + "name": "App", + "icons": [ + { + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": "0.75" + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": "1.0" + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": "1.5" + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": "2.0" + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": "3.0" + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": "4.0" + } + ] +} \ No newline at end of file diff --git a/public/favicon/ms-icon-144x144.png b/public/favicon/ms-icon-144x144.png new file mode 100644 index 0000000..8d9f1b4 Binary files /dev/null and b/public/favicon/ms-icon-144x144.png differ diff --git a/public/favicon/ms-icon-150x150.png b/public/favicon/ms-icon-150x150.png new file mode 100644 index 0000000..262a926 Binary files /dev/null and b/public/favicon/ms-icon-150x150.png differ diff --git a/public/favicon/ms-icon-310x310.png b/public/favicon/ms-icon-310x310.png new file mode 100644 index 0000000..1b48fa3 Binary files /dev/null and b/public/favicon/ms-icon-310x310.png differ diff --git a/public/favicon/ms-icon-70x70.png b/public/favicon/ms-icon-70x70.png new file mode 100644 index 0000000..94dc6f6 Binary files /dev/null and b/public/favicon/ms-icon-70x70.png differ diff --git a/src/Components/Common/Flag.tsx b/src/Components/Common/Flag.tsx new file mode 100644 index 0000000..5fe635f --- /dev/null +++ b/src/Components/Common/Flag.tsx @@ -0,0 +1,5 @@ +function Flag({ nation }: { nation: string }) { + return img; +} + +export default Flag; diff --git a/src/Layouts/GameLayout.tsx b/src/Layouts/GameLayout.tsx index 167bf57..164e1a8 100644 --- a/src/Layouts/GameLayout.tsx +++ b/src/Layouts/GameLayout.tsx @@ -70,6 +70,7 @@ export default function GameLayout() { const Main = styled.main` width: 100%; + height: 100%; padding: 0rem 5rem; margin: 0 auto; background-color: #2e3c7e; @@ -79,7 +80,7 @@ const Container = styled.div` position: relative; border: 0.5rem solid white; height: 100%; - overflow-y: auto; + overflow-y: none; `; const Wrapper = styled.div` diff --git a/src/Pages/Game/Components/Coin.tsx b/src/Pages/Game/Components/Coin.tsx new file mode 100644 index 0000000..d9ef4e1 --- /dev/null +++ b/src/Pages/Game/Components/Coin.tsx @@ -0,0 +1,16 @@ +interface Props { + color: string; + count: number; +} + +export default function Coin({ color, count }: Props) { + if (color === 'green' && count >= 1) + return green; + if (color === 'green') + return empty; + if (color === 'red' && count >= 1) + return pink; + if (color === 'red') + return empty; + return empty; +} diff --git a/src/Pages/Game/Components/CurrentLeader.tsx b/src/Pages/Game/Components/CurrentLeader.tsx new file mode 100644 index 0000000..9af1799 --- /dev/null +++ b/src/Pages/Game/Components/CurrentLeader.tsx @@ -0,0 +1,28 @@ +import styled from 'styled-components'; +import { useSelector } from 'react-redux'; +import { RootState } from '../../../Redux/store/rootStore'; + +function CurrentLeader({ leader }: { leader: string }) { + const { stageNumber } = useSelector((rootState: RootState) => rootState.game); + return ( + + ํ˜„์žฌ ์ถœ์ œ์ž: {leader} + + ); +} + +const ShowLeader = styled.div<{ turn: number }>` + margin-top: 2rem; + font-size: 2rem; + color: white; + width: 48%; + span { + background-color: ${(props) => (props.turn % 4 < 2 ? '#f15852' : '#9ebdf0')}; + padding: 0.5rem; + border-radius: 8px; + border: 1px solid white; + } + height: 3rem; +`; + +export default CurrentLeader; diff --git a/src/Pages/Game/Components/Hints.tsx b/src/Pages/Game/Components/Hints.tsx index a35b47c..c1acccd 100644 --- a/src/Pages/Game/Components/Hints.tsx +++ b/src/Pages/Game/Components/Hints.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { useSelector } from 'react-redux'; +import Flag from '../../../Components/Common/Flag'; import { RootState } from '../../../Redux/store/rootStore'; function Hints({ team }: { team: string }) { @@ -14,20 +15,19 @@ function Hints({ team }: { team: string }) { hintRecord = hintRecord.slice(0, -1); return ( - {team} + - 1 - 2 - 3 - 4 + 1 + 2 + 3 + 4 - {hintRecord.map((item: string[]) => ( - - {item[0]} - {item[1]} - {item[2]} - {item[3]} + {hintRecord.map((hintList: string[]) => ( + + {hintList.map((hint) => ( + {hint} + ))} ))} @@ -36,15 +36,9 @@ function Hints({ team }: { team: string }) { } const Container = styled.div` - width: 35rem; - margin: 2rem; -`; - -const Title = styled.p` - font-size: 1.3rem; - color: white; - text-align: center; - margin-bottom: 5px; + width: 50rem; + margin: 0.5rem; + display: flex; `; const ItemList = styled.div` @@ -63,6 +57,7 @@ const Item = styled.div` `; const HintArea = styled.div` + width: 40rem; padding: 1.5rem; background-color: #b4bce3; border-radius: 15px; diff --git a/src/Pages/Game/Components/RenderByStage.tsx b/src/Pages/Game/Components/RenderByStage.tsx index 685b323..02e7682 100644 --- a/src/Pages/Game/Components/RenderByStage.tsx +++ b/src/Pages/Game/Components/RenderByStage.tsx @@ -5,6 +5,7 @@ import { RootState } from '../../../Redux/store/rootStore'; import CodeGuess from './CodeGuess'; import HintSubmit from './HintSubmit'; import User from '../../../Interfaces/User.interface'; +import Waiting from './Waiting'; // leader๋ฅผ stage ๋กœ ๊ตฌํ•  ์ˆ˜ ์žˆ๋Š” ํ•จ์ˆ˜. // leader/2 ๊ฐ€ ์ง์ˆ˜๋ฉด soviet, ํ™€์ˆ˜๋ฉด usa, leader/4 ๊ฐ€ ํ•ด๋‹น ํŒ€์˜ ๋ฆฌ๋” @@ -12,7 +13,6 @@ function getLeader(game: Game, stage: number) { const { players } = Math.floor(stage / 2) % 2 ? game.usaTeam : game.sovietTeam; return players[Math.floor(stage / 4) % players.length]; } - export default function RenderByStage() { const game = useSelector((rootState: RootState) => rootState.game); const stage = game.stageNumber; @@ -31,31 +31,17 @@ export default function RenderByStage() { if (stage % 4 === 0) return ( - -

Waiting...

- {' '} + ); if (stage % 4 === 1 && leader.uid === me.uid) return ( - -

Waiting...

- {' '} + ); if (stage % 4 === 1) - return ( - - {!myTeamCode.length ? ( - - ) : ( - -

Waiting...

- - )} - - ); + return {!myTeamCode.length ? : }; if (stage % 4 === 2 && leader.uid === me.uid) return ( @@ -65,44 +51,19 @@ export default function RenderByStage() { if (stage % 4 === 2) return ( - -

Waiting...

- + ); if (stage % 4 === 3 && leader.uid === me.uid) return ( - -

Waiting...

- {' '} + ); - return ( - - {!myTeamCode.length ? ( - - ) : ( - -

Waiting...

- - )} - - ); + return {!myTeamCode.length ? : }; } const RenderingArea = styled.div` display: flex; align-items: center; `; - -const Waiting = styled.div` - font-size: 15pt; - font-weight: bold; - background-color: gray; - text-align: center; - padding: 2rem 4rem; - border-radius: 1rem; - border: 0.3rem white solid; - margin-right: 2rem; -`; diff --git a/src/Pages/Game/Components/ScoreTable.tsx b/src/Pages/Game/Components/ScoreTable.tsx index 906e370..0dad1fc 100644 --- a/src/Pages/Game/Components/ScoreTable.tsx +++ b/src/Pages/Game/Components/ScoreTable.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components'; import { useSelector } from 'react-redux'; +import Coin from './Coin'; import { RootState } from '../../../Redux/store/rootStore'; export default function ScoreTable() { @@ -9,49 +10,35 @@ export default function ScoreTable() { })); return ( - - - ํ•ด๋… ํ† ํฐ - ์˜ค๋‹ต ํ† ํฐ - - - Soviet - - {sovietTeam.greenToken > 0 ? ( - green - ) : ( - empty - )} - empty - - - {sovietTeam.redToken > 0 ? ( - pink - ) : ( - empty - )} - empty - - - - usa - - {usaTeam.greenToken > 0 ? ( - green - ) : ( - empty - )} - empty - - - {usaTeam.redToken > 0 ? ( - pink - ) : ( - empty - )} - empty - - + + + + ํ•ด๋… ํ† ํฐ + ์˜ค๋‹ต ํ† ํฐ + + + Soviet + + + + + + + + + + + USA + + + + + + + + + + ); } @@ -61,11 +48,10 @@ const ScoreTableArea = styled.table` font-size: 1.3rem; border-collapse: separate; border-spacing: 20px 5px; - .labelArea { background-color: #b4bce3; padding: 0.5rem; - border-radius: 3rem; + border-radius: 0.6rem; margin: 2rem; } `; diff --git a/src/Pages/Game/Components/ShowState.tsx b/src/Pages/Game/Components/ShowState.tsx new file mode 100644 index 0000000..61acda8 --- /dev/null +++ b/src/Pages/Game/Components/ShowState.tsx @@ -0,0 +1,72 @@ +import styled from 'styled-components'; +import { useSelector } from 'react-redux'; +import { RootState } from '../../../Redux/store/rootStore'; +import User from '../../../Interfaces/User.interface'; +import Game from '../../../Interfaces/Game.interface'; + +function getLeader(game: Game, stage: number) { + const { players } = Math.floor(stage / 2) % 2 ? game.usaTeam : game.sovietTeam; + return players[Math.floor(stage / 4) % players.length]; +} + +function getCurrentState(player: User) { + const game = useSelector((rootState: RootState) => rootState.game); + const stage = game.stageNumber; + const leader = getLeader(game, stage); + + if ((stage % 4 === 0 && leader.uid === player.uid) || (stage % 4 === 2 && leader.uid === player.uid)) { + return 'ํžŒํŠธ ์ œ์ถœ์ค‘...'; + } + if ( + stage % 4 === 0 || + (stage % 4 === 1 && leader.uid === player.uid) || + stage % 4 === 2 || + (stage % 4 === 3 && leader.uid === player.uid) + ) { + return 'Wating...'; + } + if (stage % 4 === 1) { + return '์ฝ”๋“œ ์ถ”์ธก์ค‘...'; + } + return '์ฝ”๋“œ ์ถ”์ธก์ค‘...'; +} + +export default function ShowState({ teamName, players }: { teamName: string; players: User[] }) { + return ( + + {teamName} + {players.map((player) => ( + + {player.nickname} + {getCurrentState(player)} + + ))} + + ); +} + +const Container = styled.div` + width: 20rem; + margin: 2rem; + background-color: #b4bce3; + border-radius: 15px; +`; + +const TeamName = styled.div` + text-align: center; +`; + +const StateArea = styled.div` + display: flex; +`; + +const Player = styled.div` + margin-top: 5px; + font-weight: bold; + text-align: center; + font-size: 1.5rem; +`; + +const StateMessage = styled.div` + color: red; +`; diff --git a/src/Pages/Game/Components/Waiting.tsx b/src/Pages/Game/Components/Waiting.tsx new file mode 100644 index 0000000..ce0760a --- /dev/null +++ b/src/Pages/Game/Components/Waiting.tsx @@ -0,0 +1,49 @@ +import { useEffect, useState } from 'react'; +import styled from 'styled-components'; + +export default function Waiting() { + const content = '\x00....'; + const [dot, setDot] = useState(''); + const [index, setIndex] = useState(0); + + useEffect(() => { + const animKey = setInterval(() => { + setIndex((pervIndex) => { + if (pervIndex >= 3) { + setDot(''); + return 0; + } + return pervIndex + 1; + }); + }, 1000); + return () => clearInterval(animKey); + }, []); + + useEffect(() => { + setDot((prevDot) => prevDot + content[index]); + }, [index]); + + return ( + + Waiting{dot} + + ); +} +const Container = styled.div` + position: relative; + left: 0; + min-width: 200px; + font-size: 15pt; + font-weight: bold; + background-color: gray; + text-align: center; + padding: 2rem 4rem; + border-radius: 1rem; + border: 0.3rem white solid; + margin-right: 2rem; + span { + position: absolute; + left: 5rem; + bottom: 0.8rem; + } +`; diff --git a/src/Pages/Game/Components/Word.tsx b/src/Pages/Game/Components/Word.tsx index 70ecbba..050d789 100644 --- a/src/Pages/Game/Components/Word.tsx +++ b/src/Pages/Game/Components/Word.tsx @@ -14,7 +14,7 @@ function Word() { return ( {wordList.map((word: string, index: number) => ( -
+
{index + 1}
{word}
@@ -39,6 +39,7 @@ const WordContainer = styled.div` div { margin-right: 2rem; padding-bottom: 0.5rem; + width: 80px; } `; const Container = styled.div` diff --git a/src/Pages/Game/index.tsx b/src/Pages/Game/index.tsx index e80c333..05e8407 100644 --- a/src/Pages/Game/index.tsx +++ b/src/Pages/Game/index.tsx @@ -7,6 +7,8 @@ import GameInterface from '../../Interfaces/Game.interface'; import User from '../../Interfaces/User.interface'; import RoundResult from './Components/RoundResult'; import ScoreTable from './Components/ScoreTable'; +import CurrentLeader from './Components/CurrentLeader'; +import Flag from '../../Components/Common/Flag'; import socket from '../../Utils/socket'; import { updateDB } from '../../Redux/reducer/updateDB'; import Word from './Components/Word'; @@ -14,14 +16,16 @@ import Overlay from '../../Components/Common/Overlay'; import RenderByStage from './Components/RenderByStage'; import { RootState } from '../../Redux/store/rootStore'; +function getLeader(game: GameInterface, stage: number) { + const { players } = Math.floor(stage / 2) % 2 ? game.usaTeam : game.sovietTeam; + return players[Math.floor(stage / 4) % players.length]; +} + export default function Game() { const game: GameInterface = useSelector((state: RootState) => state.game); const user: User = useSelector((state: RootState) => state.user); const [resultModal, setResultModal] = useState(false); const dispatch = useDispatch(); - const toggleResult = () => { - setResultModal((prev) => !prev); - }; const navigate = useNavigate(); const myTeam = game.sovietTeam.players.some((player: User) => player.uid === user.uid) ? 'sovietTeam' @@ -34,11 +38,11 @@ export default function Game() { }); socket.off('SHOW_RESULT').on('SHOW_RESULT', (gameInfo) => { dispatch(updateDB(gameInfo)); - toggleResult(); + setResultModal(true); }); socket.off('NEW_ROUND').on('NEW_ROUND', (gameInfo) => { dispatch(updateDB(gameInfo)); - toggleResult(); + setResultModal(false); }); if ( game.sovietTeam.greenToken === 2 || @@ -54,11 +58,15 @@ export default function Game() { const doNothing = () => { console.log(' '); }; + return ( - - img{' '} - + + + + + + @@ -92,17 +100,22 @@ export default function Game() { -----> ๊ฒฐ๊ณผ */ +const TopArea = styled.div` + display: flex; + width: 100%; +`; + const ShowTeam = styled.div` text-align: left; font-size: 5rem; `; const Container = styled.div` - color: black; display: flex; flex-direction: column; align-items: center; justify-content: center; + color: black; `; const HintTokenArea = styled.div` diff --git a/src/Pages/Login/index.tsx b/src/Pages/Login/index.tsx index 5985f56..678f5d6 100644 --- a/src/Pages/Login/index.tsx +++ b/src/Pages/Login/index.tsx @@ -54,7 +54,6 @@ export default function Login() { placeholder='Enter nickname' id='nickname' /> - Room @@ -65,9 +64,9 @@ export default function Login() { placeholder='Enter room number' id='room' /> - + ); @@ -96,6 +95,8 @@ const Button = styled.button` padding: 1rem; font-size: 1.5rem; box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px; + margin: auto; + margin-top: 8rem; `; const InputContainer = styled.div` diff --git a/src/Pages/Room/Components/Star.tsx b/src/Pages/Room/Components/Star.tsx new file mode 100644 index 0000000..d367ba9 --- /dev/null +++ b/src/Pages/Room/Components/Star.tsx @@ -0,0 +1,15 @@ +function Star() { + return ( + + + + ); +} + +export default Star; diff --git a/src/Pages/Room/index.tsx b/src/Pages/Room/index.tsx index 9c34402..98a5737 100644 --- a/src/Pages/Room/index.tsx +++ b/src/Pages/Room/index.tsx @@ -5,18 +5,18 @@ import { updateDB } from '../../Redux/reducer/updateDB'; import { updateUser } from '../../Redux/reducer/updateUser'; import { RootState } from '../../Redux/store/rootStore'; import socket from '../../Utils/socket'; +import Star from './Components/Star'; +import Flag from '../../Components/Common/Flag'; import Game from '../../Interfaces/Game.interface'; import UserInterface from '../../Interfaces/User.interface'; import GameStartButton from './Components/GameStartButton'; import TeamChangeButton from './Components/TeamChangeButton'; -import SetGameLength from './Components/SetGameLength'; export default function Room() { - const game: Game = useSelector((state: RootState) => state.game); + const game = useSelector((state: RootState) => state.game); const user: UserInterface = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const navigate = useNavigate(); - /* ! ๋ฐฉ์žฅ์ด ๊ฒŒ์ž„์„ ์‹œ์ž‘์‹œ์ผฐ์„ ๋•Œ ๋กœ์ง * @param gameInfo @@ -73,17 +73,25 @@ export default function Room() { return ( + Room No: {game.roomId} Soviet - soviet + {game.sovietTeam.players.length ? ( - game.sovietTeam.players.map((player) => {player.nickname}) + game.sovietTeam.players.map((player: UserInterface) => ( + + + {player.nickname} + {player.captain && } + + + )) ) : ( ์ฐธ๊ฐ€ํ•˜์„ธ์˜ค,,! )} @@ -94,12 +102,19 @@ export default function Room() { USA - USA + {game.usaTeam.players.length ? ( - game.usaTeam.players.map((player) => {player.nickname}) + game.usaTeam.players.map((player) => ( + + + {player.nickname} + {player.captain && } + + + )) ) : ( ์ฐธ๊ฐ€ํ•˜์„ธ์˜ค,,! )} @@ -108,15 +123,21 @@ export default function Room() { - ); } +const RoomNumber = styled.div` + margin-top: 1rem; + font-size: 5rem; + color: white; +`; + const TeamName = styled.div` display: flex; - height: 8rem; + width: 100%; + height: 9rem; justify-content: center; align-items: center; padding: 0.5rem 1rem; @@ -142,11 +163,13 @@ const Container = styled.div` justify-content: center; flex-direction: column; color: black; - flex-wrap: wrap; + height: 100%; `; const TeamContainer = styled.div` - margin: 3rem; + display: flex; + flex-direction: column; + margin: 0rem 3rem; width: 100%; height: 100%; min-width: 40rem; @@ -167,24 +190,36 @@ const UserList = styled.ul` `; const User = styled.li` + position: relative; + display: flex; + flex-direction: center; + justify-content: center; margin: 1rem 1rem; - padding: 3rem 1rem; - border: 1rem 1rem; + padding: 2rem 1rem; font-size: 2rem; text-align: center; border-radius: 1rem; background-color: rgb(255, 255, 255, 0.3); + align-items: center; + span { + height: fit-content; + } + svg { + position: absolute; + right: 15px; + } `; const Control = styled.div` - bottom: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; + margin-bottom: 2rem; `; const Teams = styled.div` display: flex; - margin-top: 7%; + height: 100%; + margin-top: 3%; `; diff --git a/src/Redux/store/rootStore.ts b/src/Redux/store/rootStore.ts index 309de7a..e200645 100644 --- a/src/Redux/store/rootStore.ts +++ b/src/Redux/store/rootStore.ts @@ -1,8 +1,15 @@ import { combineReducers, createStore } from 'redux'; import updateDBReducer from '../reducer/updateDB'; import updateUserReducer from '../reducer/updateUser'; +import Game from '../../Interfaces/Game.interface'; +import User from '../../Interfaces/User.interface'; -const rootReducer = combineReducers({ game: updateDBReducer, user: updateUserReducer }); +interface rootReducer { + game: Game; + user: User; +} + +const rootReducer = combineReducers({ game: updateDBReducer, user: updateUserReducer }); const store = createStore(rootReducer);