Merge pull request #59 from AndroidNetrunner/alpha

Alpha version Deploy 합니다
AndroidNetrunner · Mar 24, 2022 · beb4ff4 · beb4ff4
2 parents 041fbf2 + d027f5e
commit beb4ff4
Show file tree

Hide file tree

Showing 44 changed files with 387 additions and 141 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
diff --git a/index.html b/index.html
@@ -3,7 +3,23 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Hello World!</title>
+    <title>🇰🇷Decrypto</title>
+    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
+    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
+    <link rel="icon" type="img/png" sizes="192x192"  href="/favicon/android-icon-192x192.png">
+    <link rel="icon" type="img/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+    <link rel="icon" type="img/png" sizes="96x96" href="/favicon/favicon-96x96.png">
+    <link rel="icon" type="img/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/favicon/manifest.json">
+    <meta name="msapplication-TileColor" content="#ffffff">
+    <meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/favicon/android-icon-144x144.png b/public/favicon/android-icon-144x144.png
diff --git a/public/favicon/android-icon-192x192.png b/public/favicon/android-icon-192x192.png
diff --git a/public/favicon/android-icon-36x36.png b/public/favicon/android-icon-36x36.png
diff --git a/public/favicon/android-icon-48x48.png b/public/favicon/android-icon-48x48.png
diff --git a/public/favicon/android-icon-72x72.png b/public/favicon/android-icon-72x72.png
diff --git a/public/favicon/android-icon-96x96.png b/public/favicon/android-icon-96x96.png
diff --git a/public/favicon/apple-icon-114x114.png b/public/favicon/apple-icon-114x114.png
diff --git a/public/favicon/apple-icon-120x120.png b/public/favicon/apple-icon-120x120.png
diff --git a/public/favicon/apple-icon-144x144.png b/public/favicon/apple-icon-144x144.png
diff --git a/public/favicon/apple-icon-152x152.png b/public/favicon/apple-icon-152x152.png
diff --git a/public/favicon/apple-icon-180x180.png b/public/favicon/apple-icon-180x180.png
diff --git a/public/favicon/apple-icon-57x57.png b/public/favicon/apple-icon-57x57.png
diff --git a/public/favicon/apple-icon-60x60.png b/public/favicon/apple-icon-60x60.png
diff --git a/public/favicon/apple-icon-72x72.png b/public/favicon/apple-icon-72x72.png
diff --git a/public/favicon/apple-icon-76x76.png b/public/favicon/apple-icon-76x76.png
diff --git a/public/favicon/apple-icon-precomposed.png b/public/favicon/apple-icon-precomposed.png
diff --git a/public/favicon/apple-icon.png b/public/favicon/apple-icon.png
diff --git a/public/favicon/browserconfig.xml b/public/favicon/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
diff --git a/public/favicon/favicon-96x96.png b/public/favicon/favicon-96x96.png
diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico
diff --git a/public/favicon/manifest.json 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"
+  }
+ ]
+}
diff --git a/public/favicon/ms-icon-144x144.png b/public/favicon/ms-icon-144x144.png
diff --git a/public/favicon/ms-icon-150x150.png b/public/favicon/ms-icon-150x150.png
diff --git a/public/favicon/ms-icon-310x310.png b/public/favicon/ms-icon-310x310.png
diff --git a/public/favicon/ms-icon-70x70.png b/public/favicon/ms-icon-70x70.png
diff --git a/src/Components/Common/Flag.tsx b/src/Components/Common/Flag.tsx
@@ -0,0 +1,5 @@
+function Flag({ nation }: { nation: string }) {
+  return <img alt='img' src={nation === 'soviet' ? '../../../img/soviet.png' : '../../../img/usa.png'} />;
+}
+
+export default Flag;
diff --git 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
@@ -0,0 +1,16 @@
+interface Props {
+  color: string;
+  count: number;
+}
+
+export default function Coin({ color, count }: Props) {
+  if (color === 'green' && count >= 1)
+    return <img src='../../img/my-coin-green.gif' alt='green' style={{ width: '2rem', height: '2rem' }} />;
+  if (color === 'green')
+    return <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />;
+  if (color === 'red' && count >= 1)
+    return <img src='../../img/my-coin-pink.gif' alt='pink' style={{ width: '2rem', height: '2rem' }} />;
+  if (color === 'red')
+    return <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />;
+  return <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />;
+}
diff --git a/src/Pages/Game/Components/CurrentLeader.tsx 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 (
+    <ShowLeader turn={stageNumber}>
+      <span>현재 출제자: {leader}</span>
+    </ShowLeader>
+  );
+}
+
+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
@@ -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 (
     <Container>
-      <Title>{team}</Title>
+      <Flag nation={team === 'Soviet' ? 'soviet' : 'usa'} />
       <HintArea>
         <ItemList>
-          <Item>1</Item>
-          <Item>2</Item>
-          <Item>3</Item>
-          <Item>4</Item>
+          <Item key='one'>1</Item>
+          <Item key='two'>2</Item>
+          <Item key='three'>3</Item>
+          <Item key='four'>4</Item>
         </ItemList>
-        {hintRecord.map((item: string[]) => (
-          <ItemList>
-            <Item>{item[0]}</Item>
-            <Item>{item[1]}</Item>
-            <Item>{item[2]}</Item>
-            <Item>{item[3]}</Item>
+        {hintRecord.map((hintList: string[]) => (
+          <ItemList key={hintList.join()}>
+            {hintList.map((hint) => (
+              <Item key={hint}>{hint}</Item>
+            ))}
           </ItemList>
         ))}
       </HintArea>
@@ -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
@@ -5,14 +5,14 @@ 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 가 해당 팀의 리더
 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 (
       <RenderingArea>
-        <Waiting>
-          <p>Waiting...</p>
-        </Waiting>{' '}
+        <Waiting />
       </RenderingArea>
     );
   if (stage % 4 === 1 && leader.uid === me.uid)
     return (
       <RenderingArea>
-        <Waiting>
-          <p>Waiting...</p>
-        </Waiting>{' '}
+        <Waiting />
       </RenderingArea>
     );
   if (stage % 4 === 1)
-    return (
-      <RenderingArea>
-        {!myTeamCode.length ? (
-          <CodeGuess />
-        ) : (
-          <Waiting>
-            <p>Waiting...</p>
-          </Waiting>
-        )}
-      </RenderingArea>
-    );
+    return <RenderingArea>{!myTeamCode.length ? <CodeGuess /> : <Waiting />}</RenderingArea>;
   if (stage % 4 === 2 && leader.uid === me.uid)
     return (
       <RenderingArea>
@@ -65,44 +51,19 @@ export default function RenderByStage() {
   if (stage % 4 === 2)
     return (
       <RenderingArea>
-        <Waiting>
-          <p>Waiting...</p>
-        </Waiting>
+        <Waiting />
       </RenderingArea>
     );
   if (stage % 4 === 3 && leader.uid === me.uid)
     return (
       <RenderingArea>
-        <Waiting>
-          <p>Waiting...</p>
-        </Waiting>{' '}
+        <Waiting />
       </RenderingArea>
     );
-  return (
-    <RenderingArea>
-      {!myTeamCode.length ? (
-        <CodeGuess />
-      ) : (
-        <Waiting>
-          <p>Waiting...</p>
-        </Waiting>
-      )}
-    </RenderingArea>
-  );
+  return <RenderingArea>{!myTeamCode.length ? <CodeGuess /> : <Waiting />}</RenderingArea>;
 }
 
 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;
-`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<?xml version="1.0" encoding="utf-8"?>
		<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>