Merge branch 'frontend' of https://github.com/Polynomeer/baseball int…

…o frontend
codesquad-members-2021 · May 7, 2021 · 49376de · 49376de
2 parents cb1ca0a + d9bfcac
commit 49376de
Show file tree

Hide file tree

Showing 23 changed files with 421 additions and 33 deletions.
diff --git a/FE/baseball/src/Components/Game/Game.jsx b/FE/baseball/src/Components/Game/Game.jsx
@@ -2,20 +2,27 @@ import GameHeader from "./GameHeader/GameHeader";
 import GamePlayground from "./GamePlayground/GamePlayground";
 import GamePlayLog from "./GamePlayLog/GamePlayLog";
 import SquadBoard from "./SquadBoard/SquadBoard";
+import ScoreBoard from "./ScoreBoard/ScoreBoard";
 import { Game as S } from "@/Components/Game/GameStyles";
 
 const Game = () => {
+  const backgroundUrl =
+    "https://upload.wikimedia.org/wikipedia/commons/8/80/Munhak_baseball_stadium_2012.png";
   return (
-    <S.Game>
-      <S.GameLeftSection>
-        <GameHeader />
-        <GamePlayground />
-      </S.GameLeftSection>
-      <S.GameRightSection>
-        <GamePlayLog />
-      </S.GameRightSection>
-      <SquadBoard />
-    </S.Game>
+    <>
+      <S.Background src={backgroundUrl} />
+      <S.Game>
+        <S.GameLeftSection>
+          <ScoreBoard />
+          <GameHeader />
+          <GamePlayground />
+        </S.GameLeftSection>
+        <S.GameRightSection>
+          <GamePlayLog />
+        </S.GameRightSection>
+        <SquadBoard />
+      </S.Game>
+    </>
   );
 };
 

diff --git a/FE/baseball/src/Components/Game/GameHeader/GameHeader.jsx b/FE/baseball/src/Components/Game/GameHeader/GameHeader.jsx
@@ -1,6 +1,6 @@
-import GameTitle from "./GameTitle";
-import GameProgress from "./GameProgress/GameProgress";
-import { GameHeader as S } from "@/Components/Game/GameStyles";
+import GameTitle from './GameTitle';
+import GameProgress from './GameProgress/GameProgress';
+import { GameHeader as S } from '@/Components/Game/GameStyles';
 
 const GameHeader = () => {
   return (

diff --git a/FE/baseball/src/Components/Game/GameStyles.jsx b/FE/baseball/src/Components/Game/GameStyles.jsx
@@ -6,10 +6,13 @@ const Game = {
   Game: styled(CS.BOX.FLEX_ROW_BOX)`
     position: relative;
     border: 3px solid ${theme.COLOR.DEFAULT};
+    background: #111;
+    opacity: 0.8;
     width: 1440px;
     height: 1080px;
   `,
   GameLeftSection: styled(CS.BOX.FLEX_COLUMN_BOX)`
+    position: relative;
     width: 80%;
     height: 100%;
     border-right: 3px solid gray;
@@ -18,6 +21,16 @@ const Game = {
     width: 20%;
     height: 100%;
   `,
+
+  Background: styled.img`
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -999;
+    opacity: 0.4;
+  `,
 };
 
 const GameHeader = {

diff --git a/FE/baseball/src/Components/Game/ScoreBoard/PopUpButton.jsx b/FE/baseball/src/Components/Game/ScoreBoard/PopUpButton.jsx
@@ -0,0 +1,21 @@
+import { ScoreBoardStyles as S } from '@/Components/Game/ScoreBoard/ScoreBoardStyles';
+
+const PopUpButton = ({ isHover }) => {
+  return (
+    <S.PopUpButton {...{ isHover }}>
+      <div>
+        <svg
+          width="15px"
+          height="15px"
+          viewBox="0 0 192.701 192.701"
+          fill="#fff"
+        >
+          <path d="M171.955,88.526l-75.61,74.528l-75.61-74.54c-4.74-4.704-12.439-4.704-17.179,0c-4.74,4.704-4.74,12.319,0,17.011    l84.2,82.997c4.559,4.511,12.608,4.535,17.191,0l84.2-83.009c4.74-4.692,4.74-12.319,0-17.011    C184.394,83.823,176.695,83.823,171.955,88.526z" />
+          <path d="M87.755,104.322c4.559,4.511,12.608,4.535,17.191,0l84.2-82.997c4.74-4.704,4.74-12.319,0-17.011    c-4.74-4.704-12.439-4.704-17.179,0L96.345,78.842L20.734,4.314c-4.74-4.704-12.439-4.704-17.179,0    c-4.74,4.704-4.74,12.319,0,17.011L87.755,104.322z" />
+        </svg>
+      </div>
+    </S.PopUpButton>
+  );
+};
+
+export default PopUpButton;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/ScoreBoard.jsx b/FE/baseball/src/Components/Game/ScoreBoard/ScoreBoard.jsx
@@ -0,0 +1,39 @@
+import ScoreTable from './ScoreTable/ScoreTable';
+import { ScoreBoardStyles as S } from './ScoreBoardStyles';
+import { useState } from 'react';
+import PopUpButton from './PopUpButton';
+
+const ScoreBoard = () => {
+  const initialScoreBoardPosition = -196;
+  const [isHover, setIsHover] = useState(false);
+  const [scoreBoardPosition, setScoreBoardPosition] = useState(
+    initialScoreBoardPosition
+  );
+
+  const handleMouseEnter = () => {
+    setIsHover((prev) => !prev);
+    setScoreBoardPosition(-3);
+  };
+
+  const handleMouseLeave = () => {
+    setIsHover((prev) => !prev);
+    setScoreBoardPosition(initialScoreBoardPosition);
+  };
+
+  return (
+    <>
+      <S.PopUpBackground isHover={isHover} />
+      <S.ScoreBoard
+        isHover={isHover}
+        scoreBoardPosition={scoreBoardPosition}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <ScoreTable />
+        <PopUpButton {...{ isHover }} />
+      </S.ScoreBoard>
+    </>
+  );
+};
+
+export default ScoreBoard;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/ScoreBoardStyles.jsx b/FE/baseball/src/Components/Game/ScoreBoard/ScoreBoardStyles.jsx
@@ -0,0 +1,128 @@
+import styled, { keyframes } from 'styled-components';
+import * as CS from '@/Styles/CommonStyles';
+import { BLOCK, NONE } from '@/Utils/const';
+import theme from '@/Styles/theme';
+
+const ArrowFade = keyframes`
+0% {
+  top: 0px;
+  opacity: 0;
+}
+50% {
+  top: 2px;
+}
+100% {
+  top: 4px;
+}
+`;
+
+const ScoreBoardStyles = {
+  ScoreBoard: styled(CS.BOX.FLEX_CENTER_BOX)`
+    position: absolute;
+    top: ${({ scoreBoardPosition }) => `${scoreBoardPosition}px`};
+    left: 220px;
+    width: 1000px;
+    font-weight: 900;
+    font-size: 24px;
+    padding: 10px 40px;
+    border: 1px solid #fff;
+    background: #111;
+    transition: all ease-in-out 0.8s;
+    cursor: pointer;
+    z-index: 20;
+  `,
+
+  ScoreTable: styled(CS.BOX.FLEX_COLUMN_CENTER_BOX)``,
+
+  ScoreRow: styled(CS.BOX.FLEX_CENTER_BOX)``,
+
+  ScoreRowHead: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 100%;
+    margin-top: 10px;
+  `,
+  ScoreMiddleLine: styled.div`
+    width: 100%;
+    height: 1px;
+    border: 1px solid #fff;
+    margin-bottom: 10px;
+  `,
+
+  ScoreItem: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 50px;
+    height: 50px;
+  `,
+
+  TeamNameBox: styled.div`
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  `,
+
+  TeamName: styled.div`
+    width: 120px;
+    margin: 10px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+  `,
+
+  PopUpBackground: styled.div`
+    display: ${({ isHover }) => (isHover ? BLOCK : NONE)};
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1434px;
+    height: 1080px;
+    background: #222;
+    opacity: 0.8;
+    transition: display 1.5s;
+    z-index: 10;
+  `,
+  PopUpButton: styled.div`
+    width: 100px;
+    height: 30px;
+    border-radius: 0px 0px 50% 50%;
+    position: absolute;
+    bottom: -30px;
+    left: 750px;
+    background: gray;
+    opacity: ${({ isHover }) => (isHover ? 1 : 0.5)};
+    text-align: center;
+    padding: 3px;
+    z-index: 9999;
+    border: 1px solid #fff;
+    cursor: pointer;
+    transition: all ease-in-out 0.4s;
+
+    div {
+      position: absolute;
+      color: #fff;
+      top: 2px;
+      left: 43px;
+      animation: ${ArrowFade} 1s infinite ease-in alternate;
+    }
+  `,
+
+  AttackTeamTag: styled(CS.BOX.FLEX_CENTER_BOX)`
+    width: 50px;
+    height: 50px;
+  `,
+
+  CurrentPlayerTag: styled.div`
+    width: fit-content;
+    font-size: 6px;
+    text-align: center;
+    font-weight: 500;
+    color: red;
+    border-radius: 8px;
+    border: 1px solid red;
+    background: ${theme.COLOR.CURRENT_PLAYER_TAG};
+    padding: 3px;
+    margin: 3px;
+    position: absolute;
+    top: 33px;
+    left: 44px;
+  `,
+};
+
+export { ScoreBoardStyles };
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreItem.jsx b/FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreItem.jsx
@@ -0,0 +1,7 @@
+import { ScoreBoardStyles as S } from '../ScoreBoardStyles';
+
+const ScoreItem = () => {
+  return <S.ScoreItem>1</S.ScoreItem>;
+};
+
+export default ScoreItem;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreRow.jsx b/FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreRow.jsx
@@ -0,0 +1,29 @@
+import { ScoreBoardStyles as S } from '../ScoreBoardStyles';
+import AttackTeamTag from '../Teams/AttackTeamTag';
+import TeamNameBox from '../Teams/TeamNameBox';
+import ScoreItem from './ScoreItem';
+
+const ScoreRow = ({ teamName }) => {
+  return (
+    <S.ScoreRow>
+      <AttackTeamTag />
+      <TeamNameBox teamName={teamName} />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+    </S.ScoreRow>
+  );
+};
+
+export default ScoreRow;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreRowHead.jsx b/FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreRowHead.jsx
@@ -0,0 +1,31 @@
+import { BLANK } from '@/Utils/const';
+import { ScoreBoardStyles as S } from '../ScoreBoardStyles';
+import AttackTeamTag from '../Teams/AttackTeamTag';
+import TeamName from '../Teams/TeamName';
+
+import ScoreItem from './ScoreItem';
+
+const ScoreRowHead = () => {
+  return (
+    <S.ScoreRowHead>
+      <AttackTeamTag />
+      <TeamName teamName={BLANK} />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+      <ScoreItem />
+    </S.ScoreRowHead>
+  );
+};
+
+export default ScoreRowHead;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreTable.jsx b/FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreTable.jsx
@@ -0,0 +1,16 @@
+import { ScoreBoardStyles as S } from '../ScoreBoardStyles';
+import ScoreRow from './ScoreRow';
+import ScoreRowHead from './ScoreRowHead';
+
+const ScoreTable = () => {
+  return (
+    <S.ScoreTable>
+      <ScoreRowHead />
+      <S.ScoreMiddleLine />
+      <ScoreRow teamName={'DOOSAN'} />
+      <ScoreRow teamName={'NC'} />
+    </S.ScoreTable>
+  );
+};
+
+export default ScoreTable;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/Teams/AttackTeamTag.jsx b/FE/baseball/src/Components/Game/ScoreBoard/Teams/AttackTeamTag.jsx
@@ -0,0 +1,7 @@
+import { ScoreBoardStyles as S } from '@/Components/Game/ScoreBoard/ScoreBoardStyles';
+
+const AttackTeamTag = () => {
+  return <S.AttackTeamTag>⚾︎</S.AttackTeamTag>;
+};
+
+export default AttackTeamTag;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/Teams/CurrentPlayerTag.jsx b/FE/baseball/src/Components/Game/ScoreBoard/Teams/CurrentPlayerTag.jsx
@@ -0,0 +1,7 @@
+import { ScoreBoardStyles as S } from '@/Components/Game/ScoreBoard/ScoreBoardStyles';
+
+const CurrentPlayerTag = () => {
+  return <S.CurrentPlayerTag>Player</S.CurrentPlayerTag>;
+};
+
+export default CurrentPlayerTag;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/Teams/PlayerTag.jsx b/FE/baseball/src/Components/Game/ScoreBoard/Teams/PlayerTag.jsx
@@ -0,0 +1,5 @@
+const PlayerTag = () => {
+  return <div>PlayerTag</div>;
+};
+
+export default PlayerTag;
diff --git a/FE/baseball/src/Components/Game/ScoreBoard/Teams/TeamName.jsx b/FE/baseball/src/Components/Game/ScoreBoard/Teams/TeamName.jsx
@@ -0,0 +1,7 @@
+import { ScoreBoardStyles as S } from '../ScoreBoardStyles';
+
+const TeamName = ({ teamName }) => {
+  return <S.TeamName>{teamName}</S.TeamName>;
+};
+
+export default TeamName;