diff --git a/FE/baseball/src/Components/Game/Game.jsx b/FE/baseball/src/Components/Game/Game.jsx index dfa01ee5e..4414dbe36 100644 --- 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 ( - - - - - - - - - - + <> + + + + + + + + + + + + + ); }; diff --git a/FE/baseball/src/Components/Game/GameHeader/GameHeader.jsx b/FE/baseball/src/Components/Game/GameHeader/GameHeader.jsx index d28eebb16..9e73f5a05 100644 --- 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 index 3cd6fd762..65b278744 100644 --- 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 new file mode 100644 index 000000000..fc6ff978f --- /dev/null +++ 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 ( + +
+ + + + +
+ + ); +}; + +export default PopUpButton; diff --git a/FE/baseball/src/Components/Game/ScoreBoard/ScoreBoard.jsx b/FE/baseball/src/Components/Game/ScoreBoard/ScoreBoard.jsx index e69de29bb..65cf8f438 100644 --- 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 ( + <> + + + + + + + ); +}; + +export default ScoreBoard; diff --git a/FE/baseball/src/Components/Game/ScoreBoard/ScoreBoardStyles.jsx b/FE/baseball/src/Components/Game/ScoreBoard/ScoreBoardStyles.jsx new file mode 100644 index 000000000..a60f70243 --- /dev/null +++ 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 index e69de29bb..2662780fd 100644 --- 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 1; +}; + +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 index e69de29bb..12a795817 100644 --- 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 ( + + + + + + + + + + + + + + + + + + + ); +}; + +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 new file mode 100644 index 000000000..215952fe2 --- /dev/null +++ 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 ( + + + + + + + + + + + + + + + + + + + ); +}; + +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 index e69de29bb..895a2d479 100644 --- 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 ( + + + + + + + ); +}; + +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 index e69de29bb..90fcaa195 100644 --- 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 ⚾︎; +}; + +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 new file mode 100644 index 000000000..9327e21f9 --- /dev/null +++ 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 Player; +}; + +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 index e69de29bb..7f858d508 100644 --- 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
PlayerTag
; +}; + +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 index e69de29bb..18423ec97 100644 --- 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 {teamName}; +}; + +export default TeamName; diff --git a/FE/baseball/src/Components/Game/ScoreBoard/Teams/TeamNameBox.jsx b/FE/baseball/src/Components/Game/ScoreBoard/Teams/TeamNameBox.jsx new file mode 100644 index 000000000..54a3f994d --- /dev/null +++ b/FE/baseball/src/Components/Game/ScoreBoard/Teams/TeamNameBox.jsx @@ -0,0 +1,14 @@ +import { ScoreBoardStyles as S } from '../ScoreBoardStyles'; +import CurrentPlayerTag from './CurrentPlayerTag'; +import TeamName from './TeamName'; + +const TeamNameBox = ({ teamName }) => { + return ( + + + + + ); +}; + +export default TeamNameBox; diff --git a/FE/baseball/src/Components/Game/ScoreBoard/Teams/Teams.jsx b/FE/baseball/src/Components/Game/ScoreBoard/Teams/Teams.jsx index e69de29bb..582456057 100644 --- a/FE/baseball/src/Components/Game/ScoreBoard/Teams/Teams.jsx +++ b/FE/baseball/src/Components/Game/ScoreBoard/Teams/Teams.jsx @@ -0,0 +1,5 @@ +const Teams = () => { + return
Teams
; +}; + +export default Teams; diff --git a/FE/baseball/src/Components/Home/Home.jsx b/FE/baseball/src/Components/Home/Home.jsx index 98fff7a50..a92a682c0 100644 --- a/FE/baseball/src/Components/Home/Home.jsx +++ b/FE/baseball/src/Components/Home/Home.jsx @@ -3,11 +3,16 @@ import MatchInfo from './MatchInfo/MatchInfo'; import { HomeStyles as S } from '@/Components/Home/HomeStyles'; const Home = () => { + const backgroundUrl = + 'https://upload.wikimedia.org/wikipedia/commons/8/80/Munhak_baseball_stadium_2012.png'; return ( - - - - + <> + + + + + + ); }; diff --git a/FE/baseball/src/Components/Home/HomeStyles.jsx b/FE/baseball/src/Components/Home/HomeStyles.jsx index 0db212194..a60b1f547 100644 --- a/FE/baseball/src/Components/Home/HomeStyles.jsx +++ b/FE/baseball/src/Components/Home/HomeStyles.jsx @@ -4,13 +4,25 @@ import theme from '@/Styles/theme'; const HomeStyles = { Home: styled(CS.BOX.FLEX_COLUMN_CENTER_BOX)` - background: #222; width: 1440px; height: 1080px; color: ${theme.COLOR.DEFAULT}; + border: 3px solid #fff; + background: #111; + opacity: 0.8; padding-top: 40px; `, + Background: styled.img` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -999; + opacity: 0.4; + `, + HomeTitle: styled.div` font-size: 36px; font-weight: 700; diff --git a/FE/baseball/src/Components/Intro/GameTitle.jsx b/FE/baseball/src/Components/Intro/GameTitle.jsx index 89159ff3e..da0e9d13f 100644 --- a/FE/baseball/src/Components/Intro/GameTitle.jsx +++ b/FE/baseball/src/Components/Intro/GameTitle.jsx @@ -1,12 +1,22 @@ import { IntroStyles as S } from '@/Components/Intro/IntroStyles'; const GameTitle = () => { - return ( - - Team illy'swing BASEBALL GAME!!!
- comming soon... - - ); + // prettier-ignore + const title = + ` + /$$$$$$$$ /$$$$$$ /$$ /$$ + |__ $$__/ |_ $$_/| $$| $$ + | $$ /$$$$$$ /$$$$$$ /$$$$$$/$$$$ | $$ | $$| $$ /$$ /$$ + | $$ /$$__ $$ |____ $$| $$_ $$_ $$ | $$ | $$| $$| $$ | $$ + | $$| $$$$$$$$ /$$$$$$$| $$ \\ $$ \\ $$ | $$ | $$| $$| $$ | $$ + | $$| $$_____/ /$$__ $$| $$ | $$ | $$ | $$ | $$| $$| $$ | $$ + | $$| $$$$$$$| $$$$$$$| $$ | $$ | $$ /$$$$$$| $$| $$| $$$$$$$ + |__/ \\_______/ \\_______/|__/ |__/ |__/|______/|__/|__/ \\____ $$ + /$$ | $$ + | $$$$$$/ + \\______/ + ` + return {title}; }; export default GameTitle; diff --git a/FE/baseball/src/Components/Intro/Intro.jsx b/FE/baseball/src/Components/Intro/Intro.jsx index e393faf56..2018e9bbc 100644 --- a/FE/baseball/src/Components/Intro/Intro.jsx +++ b/FE/baseball/src/Components/Intro/Intro.jsx @@ -2,10 +2,15 @@ import { IntroStyles as S } from '@/Components/Intro/IntroStyles'; import GameStartButton from '@/Components/Intro/GameStartButton'; const Intro = () => { + const backgroundUrl = + 'https://upload.wikimedia.org/wikipedia/commons/8/80/Munhak_baseball_stadium_2012.png'; return ( - - - + <> + + + + + ); }; diff --git a/FE/baseball/src/Components/Intro/IntroStyles.jsx b/FE/baseball/src/Components/Intro/IntroStyles.jsx index 93b53f970..42feb62f2 100644 --- a/FE/baseball/src/Components/Intro/IntroStyles.jsx +++ b/FE/baseball/src/Components/Intro/IntroStyles.jsx @@ -4,19 +4,22 @@ import theme from '@/Styles/theme'; const IntroStyles = { Intro: styled(CS.BOX.FLEX_CENTER_BOX)` - background: #222; width: 1440px; height: 1080px; color: ${theme.COLOR.DEFAULT}; + border: 3px solid #fff; + background: #111; + opacity: 0.8; `, GameTitle: styled.div` - text-align: center; + width: 100%; + font-size: 16px; `, GameStartButton: styled(CS.BOX.FLEX_CENTER_BOX)` - width: 650px; - height: 100px; + width: 1000px; + height: fit-content; padding: 20px; border: 1px solid #fff; border-radius: 10px; @@ -32,6 +35,16 @@ const IntroStyles = { background: #111; } `, + + Background: styled.img` + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -999; + opacity: 0.4; + `, }; export { IntroStyles }; diff --git a/FE/baseball/src/Styles/GlobalStyles.jsx b/FE/baseball/src/Styles/GlobalStyles.jsx index 305e08d0c..5010aeace 100644 --- a/FE/baseball/src/Styles/GlobalStyles.jsx +++ b/FE/baseball/src/Styles/GlobalStyles.jsx @@ -1,5 +1,5 @@ -import { createGlobalStyle } from "styled-components"; -import reset from "styled-reset"; +import { createGlobalStyle } from 'styled-components'; +import reset from 'styled-reset'; const GlobalStyles = createGlobalStyle` ${reset}; diff --git a/FE/baseball/src/Utils/const.js b/FE/baseball/src/Utils/const.js index e69de29bb..b2aefaf02 100644 --- a/FE/baseball/src/Utils/const.js +++ b/FE/baseball/src/Utils/const.js @@ -0,0 +1,7 @@ +export const BLANK = ''; + +// style + +export const BLOCK = 'block'; +export const NONE = 'none'; +export const FLEX = 'flex';