-
-
-
-
+const TYPE = {
+ strike: '스트라이크',
+ ball: '볼',
+ safety: '안타',
+ '4ball': '볼넷',
+ out: '아웃',
+};
+
+const Log = ({ logList }) => {
+ const logs = logList.map((member, i) => (
+
+
+ {member.index}번 타자 {member.name}
+
+
+ {member.history.map((v, i) =>
+ v.end ? (
+
+ ) : (
+
+
{i + 1}
+
{TYPE[v.type]}
+
+ S{v.strike} B{v.ball}
+
+
+ )
+ )}
));
return (
-
-
- {log_list}
-
-
+
+ {logs}
+
);
};
-const StyleLog = styled.div`
+const StyledLog = styled.div`
.logs {
display: flex;
flex-flow: column-reverse;
@@ -95,7 +98,6 @@ const StyleLog = styled.div`
color: #ff4545;
}
}
-
`;
-export default Log;
\ No newline at end of file
+export default Log;
diff --git a/fe/src/components/game-play/player/Player.jsx b/fe/src/components/game-play/player/Player.jsx
index 4e5a2a663..6215f9937 100644
--- a/fe/src/components/game-play/player/Player.jsx
+++ b/fe/src/components/game-play/player/Player.jsx
@@ -3,50 +3,43 @@ import styled from 'styled-components';
const Player = ({ memberList, turn, pitchers }) => {
const HOME = 'home';
const AWAY = 'away';
-
- const getMember = (id, members) => {
- for (const member of members) {
- if (member.id === id) return member;
+ const getPlayer = () => {
+ if (!memberList || !memberList[HOME] || !memberList[AWAY]) return;
+ const result = {};
+ const batterTeam = turn ? HOME : AWAY;
+ const pitcherTeam = turn ? AWAY : HOME;
+ for (const member of memberList[batterTeam]) {
+ if (member.status) result.batter = member;
}
- return null;
- };
-
- const getBatter = (members) => {
- for (const member of members) {
- if (member.state) return member;
+ for (const member of memberList[pitcherTeam]) {
+ if (member.id === pitchers[pitcherTeam]) result.pitcher = member;
}
- return null;
+ return result;
};
-
- const pitcher = turn
- ? getMember(pitchers[HOME], memberList[HOME])
- : getMember(pitchers[AWAY], memberList[AWAY]);
-
- const batter = turn ? getBatter(memberList[HOME]) : getBatter(memberList[AWAY]);
-
+ const player = getPlayer();
return (
-
+
투수
-
{pitcher.name}
-
#{pitcher.id}
+
{player?.pitcher.name}
+
#{player?.pitcher.id}
타자
-
{batter.name}
+
{player?.batter.name}
- {batter.at_bat}타석 {batter.safety}안타
+ {player?.batter.atBat || 0}타석 {player?.batter.plate_appearance || 0}안타
-
+
);
};
-const StylePlayer = styled.div`
+const StyledPlayer = styled.div`
height: 100%;
padding-bottom: 1.5rem;
display: flex;
diff --git a/fe/src/components/game-play/popup/roster/Roster.jsx b/fe/src/components/game-play/popup/roster/Roster.jsx
index 7d8315458..d343efa70 100644
--- a/fe/src/components/game-play/popup/roster/Roster.jsx
+++ b/fe/src/components/game-play/popup/roster/Roster.jsx
@@ -1,17 +1,16 @@
import styled from 'styled-components';
import TeamRoster from './TeamRoster';
-const Roster = () => {
- // team_name 필요
+const Roster = ({ memberList, teamName, selectTeam }) => {
return (
-
-
-
-
+
+
+
+
);
}
// 90vw는 돼야하는데 그러면 이상함...;
-const StyleRoster = styled.div`
+const StyledRoster = styled.div`
margin: 0 auto;
max-width: 60vw;
margin-top: 5rem;
@@ -27,127 +26,4 @@ const StyleRoster = styled.div`
}
`;
-const game_roster = {
- // 평균은 fe에서
- 'home': {
- 'member_list' : [
- {
- 'name': '김광진',
- 'at_bat': 7, // 타석
- 'safety': 3, // 안타
- 'out': 4, // 아웃
- },
- {
- 'name': '추신수',
- 'at_bat': 7, // 타석
- 'safety': 5, // 안타
- 'out': 2, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 11, // 타석
- 'safety': 4, // 안타
- 'out': 7, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 10, // 타석
- 'safety': 2, // 안타
- 'out': 8, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 3, // 타석
- 'safety': 2, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 4, // 타석
- 'safety': 1, // 안타
- 'out': 3, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 6, // 타석
- 'safety': 2, // 안타
- 'out': 4, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 5, // 타석
- 'safety': 4, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 7, // 타석
- 'safety': 7, // 안타
- 'out': 0, // 아웃
- },
- ],
- 'player_name' : '추신수'
- },
- 'away':{
- 'member_list' : [
- {
- 'name': '김광진',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '이대호',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- {
- 'name': '김광진',
- 'at_bat': 2, // 타석
- 'safety': 1, // 안타
- 'out': 1, // 아웃
- },
- ],
- 'player_name' : '이대호'
- }
-}
-
-
export default Roster;
diff --git a/fe/src/components/game-play/popup/roster/RosterPlayer.jsx b/fe/src/components/game-play/popup/roster/RosterPlayer.jsx
new file mode 100644
index 000000000..e3fbc2de4
--- /dev/null
+++ b/fe/src/components/game-play/popup/roster/RosterPlayer.jsx
@@ -0,0 +1,19 @@
+import React from 'react';
+// const { atBat, plate_appearance, outCountCount } = member;
+
+const RosterPlayer = ({ name, atBat, plate_appearance, outCount, player_name }) => {
+
+ const getAverage = (atBat, plate_appearance) => (plate_appearance / atBat) ? (plate_appearance / atBat).toFixed(3) : 0;
+ const class_name = 'roster--member' + (name === player_name ? ' active' : '');
+ return (
+
+ {name}
+ {atBat}
+ {plate_appearance}
+ {outCount}
+ {getAverage(atBat, plate_appearance)}
+
+ );
+};
+
+export default RosterPlayer;
\ No newline at end of file
diff --git a/fe/src/components/game-play/popup/roster/TeamRoster.jsx b/fe/src/components/game-play/popup/roster/TeamRoster.jsx
index 30cf3ec1d..e406e3357 100644
--- a/fe/src/components/game-play/popup/roster/TeamRoster.jsx
+++ b/fe/src/components/game-play/popup/roster/TeamRoster.jsx
@@ -1,32 +1,24 @@
import styled from 'styled-components';
+import RosterPlayer from './RosterPlayer';
-const TeamRoster = ({ member_list, player_name, team_name = '베리베리 스트로베리', player = false }) => {
+const TeamRoster = ({ memberList, teamName, selectTeam }) => {
+ const player_name = 'abc';
const HEADS = ['타자', '타석', '안타', '아웃', '평균'];
const TOTALTEXT = 'Totals';
const heads = HEADS.map((head, idx) =>
{head}
);
- const getAverage = (at_bat, safety) => (safety / at_bat).toFixed(3);
let [totalAtBat, totalSafety, totalOut] = [0, 0, 0];
- const members = member_list.map(({ name, at_bat, safety, out }, idx) => {
- totalAtBat += at_bat;
- totalSafety += safety;
- totalOut += out;
- const class_name = 'roster--member' + (name === player_name ? ' active' : '');
- return (
-
- {name}
- {at_bat}
- {safety}
- {out}
- {getAverage(at_bat, safety)}
-
- );
- }
- );
+ const members = memberList.map((member, idx) => {
+ const { atBat, plate_appearance, outCount } = member;
+ totalAtBat += atBat;
+ totalSafety += plate_appearance;
+ totalOut += outCount;
+ return
+ });
return (
-
- {team_name} {player &&
Player
}
{teamName} {teamName === selectTeam &&
Player
}
-
{heads}
@@ -40,11 +32,11 @@ const TeamRoster = ({ member_list, player_name, team_name = '베리베리 스트
-
+
);
}
-const StyleTeamRoster = styled.div`
+const StyledTeamRoster = styled.div`
.title {
font-size: 1.5rem;
font-weight: 600;
diff --git a/fe/src/components/game-play/popup/score/Score.jsx b/fe/src/components/game-play/popup/score/Score.jsx
index 0d4e6267d..ffa1dcaa7 100644
--- a/fe/src/components/game-play/popup/score/Score.jsx
+++ b/fe/src/components/game-play/popup/score/Score.jsx
@@ -1,21 +1,27 @@
import React from 'react';
import styled from 'styled-components';
+import useFetch from '../../../../hooks/useFetch';
import ScoreList from './ScoreList';
-const Score = (props) => {
+const Score = ({ score, teamName, gameID }) => {
+ const SCORE_URL = `http://52.78.184.142/games/${gameID}/detail-score`;
//props로 받아올 아이들 1. team 2. player(home or away)
const ROUND = new Array(12).fill().map((_, idx) => idx + 1);
+ // const { data: score } = useFetch(SCORE_URL, 'get');
return (
-
-
-
-
-
+ score &&
+ score.home && (
+
+
+
+
+
+ )
);
};
-const StyleScore = styled.div`
+const StyledScore = styled.div`
width: 70rem;
min-width: 63rem;
display: flex;
diff --git a/fe/src/components/game-play/popup/score/ScoreList.jsx b/fe/src/components/game-play/popup/score/ScoreList.jsx
index 679762fd3..b32443e7d 100644
--- a/fe/src/components/game-play/popup/score/ScoreList.jsx
+++ b/fe/src/components/game-play/popup/score/ScoreList.jsx
@@ -3,45 +3,44 @@ import styled from 'styled-components';
import { IoBaseballOutline } from 'react-icons/io5';
const ScoreList = ({ team, dataType, data, isPlayer }) => {
- const isRound = dataType === 'round';
-
+ const isInRound = dataType === 'round';
const scoreList = new Array(12).fill('');
data.forEach((v, idx) => (scoreList[idx] = v));
- isRound ? scoreList.push('R') : scoreList.push(data.reduce((acc, cur) => acc + cur));
+ isInRound ? scoreList.push('R') : scoreList.push(data.reduce((acc, cur) => acc + cur, 0));
const scoreDivList = scoreList.map((score, idx, arr) => (
{score}
));
return (
-
+
{isPlayer &&
}
-
{team ? team : ''}
+
{team || ''}
{isPlayer &&
player
}
{scoreDivList}
-
+
);
};
-const StyleScoreList = styled.div`
+const StyledScoreList = styled.div`
display: flex;
.team-wrapper {
margin-right: 2rem;
.team {
position: relative;
- width: 5rem;
- font-size: 1.5rem;
+ width: 8rem;
+ font-size: 1.1rem;
font-weight: 700;
.baseball {
position: absolute;
@@ -61,8 +60,8 @@ const StyleScoreList = styled.div`
}
.score-list {
- border-bottom: ${({ isRound }) => isRound && '3px solid #fff'};
- margin-bottom: ${({ isRound }) => (isRound ? '1rem' : '0.3rem')};
+ border-bottom: ${({ isInRound }) => isInRound && '3px solid #fff'};
+ margin-bottom: ${({ isInRound }) => (isInRound ? '1rem' : '0.3rem')};
}
.score {
display: flex;
@@ -70,7 +69,7 @@ const StyleScoreList = styled.div`
font-size: 1.5rem;
font-weight: 700;
width: 3rem;
- height: ${({ isRound }) => (isRound ? '2.7rem' : '3rem')};
+ height: ${({ isInRound }) => (isInRound ? '2.7rem' : '3rem')};
margin-right: 1rem;
}
.last-score {
diff --git a/fe/src/components/game-play/score/Score.jsx b/fe/src/components/game-play/score/Score.jsx
index d3043fc5b..ef8f45b0d 100644
--- a/fe/src/components/game-play/score/Score.jsx
+++ b/fe/src/components/game-play/score/Score.jsx
@@ -1,36 +1,42 @@
+import { useContext } from 'react';
import styled from 'styled-components';
+import { ScoreNBaseContext } from '../GamePlay';
-const Score = ({ teamName, score, turn }) => {
+const Score = ({ teamName, selectTeam }) => {
+ const { score } = useContext(ScoreNBaseContext);
const TITLE = 'BASEBALL GAME ONLINE';
const TURN = 'Player';
+ const homeScore = score.home.reduce((acc, cur) => acc + cur, 0);
+ const awayScore = score.away.reduce((acc, cur) => acc + cur, 0);
+
return (
-
+
{TITLE}
{teamName.home}
- {turn &&
{TURN}
}
+ {teamName.home == selectTeam &&
{TURN}
}
-
{score.home}
+
{homeScore}
vs
-
{score.away}
+
{awayScore}
{teamName.away}
- {!turn &&
{TURN}
}
+ {teamName.away == selectTeam &&
{TURN}
}
-
+
);
};
-const StyleScore = styled.div`
+const StyledScore = styled.div`
.title {
- font-size: 3rem;
+ font-size: 2.5rem;
font-weight: 600;
color: #fff;
text-align: center;
@@ -46,15 +52,15 @@ const StyleScore = styled.div`
.home,
.away {
display: flex;
- justify-content: center;
align-items: center;
- font-size: 5rem;
+ font-size: 3rem;
}
.teams-vs {
font-size: 4rem;
color: #777;
}
.teams-name {
+ font-size: 3rem;
position: relative;
}
.turn {
@@ -66,13 +72,15 @@ const StyleScore = styled.div`
}
}
.home {
+ justify-content: flex-end;
.teams-score {
- margin-left: 3rem;
+ margin: 0 3rem;
}
}
.away {
+ justify-content: flex-start;
.teams-score {
- margin-right: 3rem;
+ margin: 0 3rem;
}
}
`;
diff --git a/fe/src/components/ui/PopUp.jsx b/fe/src/components/ui/PopUp.jsx
index bbee37ffa..01765bc6a 100644
--- a/fe/src/components/ui/PopUp.jsx
+++ b/fe/src/components/ui/PopUp.jsx
@@ -1,14 +1,14 @@
import React, {useState} from 'react';
import styled, { keyframes } from 'styled-components';
-const PopUp = ({ children, position }) => {
+const PopUp = ({ children, position, emptyText = '' }) => {
const [active, setActive] = useState(false);
- const handleClick = ({target}) => !target.closest('.childrenWrapper') && setActive(false);
- return active ?
+ const handleClick = ({target}) => (target.className === 'childrenWrapper' || !target.closest('.childrenWrapper')) && setActive(false);
+ return active ?
{children}
- :
setActive(true)} />;
+ : setActive(true)}>{emptyText};
};
const toBottom = keyframes`
@@ -29,12 +29,13 @@ const toTop = keyframes`
}
`;
-const StylePopUp = styled.div`
+const StyledPopUp = styled.div`
position: absolute;
top: 0;
width: 100vw;
height: 100vh;
z-index: 2;
+ text-align: center;
&:before {
background-color: rgba(0, 0, 0, 0.9);
content: '';
@@ -50,22 +51,33 @@ const StylePopUp = styled.div`
}
`;
-const StyleEmpty = styled.div`
- width:100vw;
- height:5rem;
+const StyledEmpty = styled.div`
+ width: 10vw;
+ height: 3rem;
position: absolute;
+ right: 30vw;
+ cursor: pointer;
+ color: #eee;
+ border-radius: ${props => props.position === 'top' ? '0 0 1rem 1rem' : '1rem 1rem 0 0' };
+ background-color: rgba(0, 0, 0, 0.5);
top: ${props => props.position === 'top' && '0px'};
bottom: ${props => props.position === 'bottom' && '0px'};
+ text-align: center;
+ font-size: 1.25rem;
+ padding: 0.5rem 0;
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.8);
+ }
`
export default PopUp;
// const PopUp = ({ children }) => {
-// return {children};
+// return {children};
// };
-// const StylePopUp = styled.div`
+// const StyledPopUp = styled.div`
// position: fixed;
// width: 100vw;
// height: 100vh;
diff --git a/fe/src/hooks/useFetch.js b/fe/src/hooks/useFetch.js
new file mode 100644
index 000000000..9fe7395a3
--- /dev/null
+++ b/fe/src/hooks/useFetch.js
@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react';
+
+const useFetch = (url, method, value = '') => {
+ const [data, setData] = useState(null);
+
+ const fetchData = async (url, method, value) => {
+ try {
+ if (method === 'get') {
+ const res = await fetch(url);
+ const data = await res.json();
+ setData(data);
+ } else if (method === 'post') {
+ console.log('post', value);
+ const res = await fetch(url, {
+ method: 'post',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(value),
+ });
+ const data = await res.json();
+ console.log(res, data);
+ } else if (method === 'put') {
+ console.log('put', value);
+ const res = await fetch(url, {
+ method: 'put',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(value),
+ });
+ const data = await res.json();
+ console.log(res, data);
+ }
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ useEffect(() => {
+ fetchData(url, method, value);
+ }, []);
+
+ return { data };
+};
+
+export default useFetch;
diff --git a/fe/src/hooks/useScoreNBase.js b/fe/src/hooks/useScoreNBase.js
new file mode 100644
index 000000000..ab82a98e5
--- /dev/null
+++ b/fe/src/hooks/useScoreNBase.js
@@ -0,0 +1,51 @@
+import { useEffect, useState } from 'react';
+
+/*
+한루 한루 주자가 뛰는 것을 애니메이션 넣어주기 위해서 한번에 계산하기 보다는
+for문으로 한번씩 나눠서 실행
+*/
+
+const useScoreNBase = ({
+ score: initialScore = { home: [0], away: [] },
+ base: initialBase = { 1: false, 2: false, 3: false },
+}) => {
+ const [score, setScore] = useState(initialScore);
+ const [base, setBase] = useState(initialBase);
+
+ const getNewScore = (score, team) => {
+ if (!base[3]) return score;
+ const newScore = { ...score };
+ newScore[team][newScore[team].length - 1] += 1;
+ return newScore;
+ };
+ const getNewBase = (base, runFirstBase) => {
+ const newBase = { ...base };
+ const baseStatus = Object.values(newBase);
+ const newBaseStatus = runFirstBase
+ ? [true, ...baseStatus.slice(0, -1)]
+ : [false, ...baseStatus.slice(0, -1)];
+ newBaseStatus.forEach((status, idx) => (newBase[idx + 1] = status));
+ return newBase;
+ };
+ const safetyDispatch = ({ type, turn, runFirstBase }) => {
+ const team = turn ? 'home' : 'away';
+ switch (type) {
+ case 'clear':
+ const newScore = { ...score };
+ newScore[team].push(0);
+ setScore(newScore);
+ setBase({ 1: false, 2: false, 3: false });
+ return;
+ case 'onBase':
+ setBase(getNewBase(base, runFirstBase));
+ setScore(getNewScore(score, team));
+ return;
+ default:
+ throw Error('잘못된 safetyDispatch 타입입니다.');
+ }
+ };
+
+ return { score, base, safetyDispatch };
+};
+
+export default useScoreNBase;
diff --git a/fe/src/index.css b/fe/src/index.css
index 740956d38..e2f8999a1 100644
--- a/fe/src/index.css
+++ b/fe/src/index.css
@@ -11,8 +11,3 @@ body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/fe/src/util/api.js b/fe/src/util/api.js
new file mode 100644
index 000000000..18a1973d9
--- /dev/null
+++ b/fe/src/util/api.js
@@ -0,0 +1,30 @@
+const fetchPUT = async (url, data) => {
+ const result = await fetch(url, {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data),
+ });
+ console.log(result);
+};
+
+const fetchGET = async (url) => {
+ const result = await fetch(url);
+ const data = await result.json();
+ return data;
+};
+
+const fetchPOST = async (url, data) => {
+ console.log(data);
+ const result = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(data),
+ });
+ console.log(result);
+};
+
+export { fetchPUT, fetchGET, fetchPOST };