Skip to content

Commit

Permalink
Merge pull request #11 from Polynomeer/feature/6/popup_score
Browse files Browse the repository at this point in the history
Feature/6/popup score
  • Loading branch information
juddroid authored May 7, 2021
2 parents 69c102b + 23bd5d2 commit d9bfcac
Show file tree
Hide file tree
Showing 23 changed files with 433 additions and 46 deletions.
33 changes: 20 additions & 13 deletions FE/baseball/src/Components/Game/Game.jsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,26 @@
import GameHeader from "./GameHeader/GameHeader";
import GamePlayground from "./GamePlayground/GamePlayground";
import GamePlayLog from "./GamePlayLog/GamePlayLog";
import { Game as S } from "@/Components/Game/GameStyles";
import GameHeader from './GameHeader/GameHeader';
import GamePlayground from './GamePlayground/GamePlayground';
import GamePlayLog from './GamePlayLog/GamePlayLog';
import { Game as S } from '@/Components/Game/GameStyles';
import ScoreBoard from './ScoreBoard/ScoreBoard';

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>
</S.Game>
<>
<S.Background src={backgroundUrl} />
<S.Game>
<S.GameLeftSection>
<ScoreBoard />
<GameHeader />
<GamePlayground />
</S.GameLeftSection>
<S.GameRightSection>
<GamePlayLog />
</S.GameRightSection>
</S.Game>
</>
);
};

Expand Down
6 changes: 3 additions & 3 deletions FE/baseball/src/Components/Game/GameHeader/GameHeader.jsx
Original file line number Diff line number Diff line change
@@ -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 (
Expand Down
31 changes: 22 additions & 9 deletions FE/baseball/src/Components/Game/GameStyles.jsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import styled from "styled-components";
import * as CS from "@/Styles/CommonStyles";
import theme from "@/Styles/theme";
import styled from 'styled-components';
import * as CS from '@/Styles/CommonStyles';
import theme from '@/Styles/theme';

const Game = {
Game: styled(CS.BOX.FLEX_ROW_BOX)`
border: 3px solid #fff;
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;
Expand All @@ -17,6 +20,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 = {
Expand Down Expand Up @@ -97,7 +110,7 @@ const GamePlayground = {
border-radius: 8px;
background: #222;
color: #fff;
font-family: "Orbitron", sans-serif;
font-family: 'Orbitron', sans-serif;
font-size: ${theme.FONTSIZE.M};
padding: 10px;
`,
Expand Down Expand Up @@ -128,11 +141,11 @@ const GamePlayground = {
margin-right: 3px;
background: ${({ type }) => {
switch (type) {
case "STRIKE":
case 'STRIKE':
return theme.COLOR.BALLCOUNT_STRIKE;
case "BALL":
case 'BALL':
return theme.COLOR.BALLCOUNT_BALL;
case "OUT":
case 'OUT':
return theme.COLOR.BALLCOUNT_OUT;
default:
return;
Expand Down Expand Up @@ -177,7 +190,7 @@ const GamePlayLog = {
LogTitle: styled.div`
font-weight: 600;
color: ${({ isCurrentPlayer }) =>
isCurrentPlayer ? "red" : theme.COLOR.PLAYER_NAME};
isCurrentPlayer ? 'red' : theme.COLOR.PLAYER_NAME};
`,
Log: styled.div`
padding: 20px 0px;
Expand All @@ -199,7 +212,7 @@ const GamePlayLog = {
margin-right: 40px;
font-weight: 700;
color: ${({ isEndAction }) =>
isEndAction ? theme.COLOR.LOG_END_ACTION : "#fff"};
isEndAction ? theme.COLOR.LOG_END_ACTION : '#fff'};
`,
LogRowBallCount: styled.div`
color: ${theme.COLOR.LOG_BALLCOUNT};
Expand Down
21 changes: 21 additions & 0 deletions FE/baseball/src/Components/Game/ScoreBoard/PopUpButton.jsx
Original file line number Diff line number Diff line change
@@ -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;
39 changes: 39 additions & 0 deletions FE/baseball/src/Components/Game/ScoreBoard/ScoreBoard.jsx
Original file line number Diff line number Diff line change
@@ -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;
128 changes: 128 additions & 0 deletions FE/baseball/src/Components/Game/ScoreBoard/ScoreBoardStyles.jsx
Original file line number Diff line number Diff line change
@@ -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 };
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { ScoreBoardStyles as S } from '../ScoreBoardStyles';

const ScoreItem = () => {
return <S.ScoreItem>1</S.ScoreItem>;
};

export default ScoreItem;
29 changes: 29 additions & 0 deletions FE/baseball/src/Components/Game/ScoreBoard/ScoreTable/ScoreRow.jsx
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit d9bfcac

Please sign in to comment.