Component tree, feature list

야구게임

​

시작페이지

​

메뉴박스

​

• 페이지 로드시, 서버에 게임정보(대진표) 요청하기 ​

request : GET, {}
response : {
  games: [
    {
      gameId: 1,
      home: {
        teamId: "team-1",
        teamName: "Captin",
        selected: false,
      },
      away: {
        teamId: "team-2",
        teamName: "Mavel",
        selected: true,
      },
    },
    {
      gameId: 2,
      home: {
        teamId: "team-3",
        teamName: "Twins",
        selected: false,
      },
      away: {
        teamId: "team-4",
        teamName: "Tigers",
        selected: true,
      },
    },
    {
      gameId: 3,
      home: {
        teamId: "team-5",
        teamName: "Rockets",
        selected: false,
      },
      away: {
        teamId: "team-6",
        teamName: "Dodgers",
        selected: true,
      },
    },
  ];
}

​

• 스크롤 UI로 렌더링 되게 함(마우스가 해당 영역 안에 있을때만 스크롤 동작) ​

  // 기본: 전체 데이터 불러오기
  // 리팩토링: 스크롤시 추가로 불러오기
  

​

• 팀을 선택했을때(클릭 시), hover 되면 팀명이 빨간색으로 변경 ​

request : GET , {}
response : 

// 이미 선택된 팀이면
{
  isSelected: true,
};

// 선택되지 않은 팀이면
 {
  isSelected: false,
  homeTeamData: {
    teamId: INT
    teamName: "Rockets",
    pitcher: {
      playerId: "player-0",
      playerNumber: "number-0",
      playerName: "류현진",
    },
    batters: [
      {
        playerId: "player-1",
        playerNumber: "number-1",
        playerName: "DD",
      },
      {
        playerId: "player-2",
        playerNumber: "number-2",
        playerName: "Woody",
      },
      {
        playerId: "player-2",
        playerNumber: "number-2",
        playerName: "Luke",
      },
    ],
  },
  awayTeamData: {
    teamName: "Captain",
    pitcher: {
      playerId: "player-0",
      playerNumber: "number-0",
      playerName: "박찬호",
    },
    batters: [
      {
        playerId: "player-1",
        playerNumber: "number-1",
        playerName: "Q",
      },
      {
        playerId: "player-2",
        playerNumber: "number-2",
        playerName: "Seong",
      },
      {
        playerId: "player-3",
        playerNumber: "number-4",
        playerName: "Json",
      },
    ],
  },
};

​

• 이미 선택된 팀이면, 해당 안내 메세지 출력 ex) 이미 선택된 팀입니다! ​

게임페이지

​

게임화면

​

• (수비)PITCH를 눌렀을때, 스트라이크/볼/안타 중 하나 선택
• (공격)일정시간 주기로 자동 PITCH되게 함.
• SBO 업데이트 하기
• S 이면, 스트라이크 카운트를 올리고 3이 채워지면 아웃카운트 1추가
• 아웃 카운트가 3이 채워지면 공수전환 메세지 출력후, 2초후에 공격 화면으로 전환
• B 이면, 볼 카운트를 올리고 4가 채워지면 주자 출루(1루로 이동, 나가있는 선수가 있다면 한칸 전진)
• 안타이면, 바로 주자 출루(나가있는 선수가 있다면 한칸 전진)
• 3루수가 홈에 도착하면, 해당 팀 스코어 1점 추가

// 점수에 변동이 생기면 post 요청
request : POST, {
gameId, teamId, inningNumber, score
}
response : {}

• 선수 이동 애니메이션 ​

선수정보

​

• 현재 타자의 SBO 상태변경시 기록
• 타자 변경시, 기존 타자를 내리고 새로운 타자의 기록 남김
• 마우스가 해당 영역 안에 있을때만 스크롤 동작 ​

// 통신 지점 : 한 선수의 SBO 결과가 나올 때마다
request : POST, {
  gameId: "game-1",
  score: [1, 2],
  inningNumber: int,
  inningHalf: int,
  teamID: "team-1",
  playerID: "player-1",
  playerLog: ["ball", "strike", "ball"],
  currentState : [0,1,1]
};
response :
{}

​

상세점수 팝업

​

• 게임화면에서 마우스를 상단 라인으로 가져가면 위에서 아래로 슬라이드 되면서 상세점수 팝업 등장
• 팝업 영역이 아닌 영역 클릭시, 팝업창 다시 위로 사라짐 ​

선수명단 팝업

​

• 게임화면에서 마우스를 하단 라인으로 가져가면 아래에서 위로 슬라이드 되면서 선수명단 팝업 등장
• 팝업 영역이 아닌 영역 클릭시, 팝업창 다시 아래로 사라짐