RIOT 전적 분석 프로젝트 - 5

기록

매치카드들에 익스펜션 기능을 추가하는 것 까지 완료했다. 이제부터 기존 전적사이트와 조금 다른 기록들을 제공할 예정이다.
기존 전적사이트의 경우 해당 매치의 모든 팀원들의 간략한 데이터를 제공한다. 내가 제공하려는 것은 완전한 플레이어 자신에 맞추기 위해 과감히 나를 제외한 타 플레이어의 정보는 보여주지 않으려고 한다.

기존 사이트들에서는 매치에서의 구체적인 지표를 제공하지 않는다. 예를 들면 DPG(DamagePerGold)같은 지표는 매우 중요하다. 캐리 라인의 플레이어가 gold를 잘 얻지 못할 경우는 많이 존재한다. gold 수급은 개인이 잘해서도 잘 확보가 가능하지만 대체로 팀의 능력의 평균치만큼 얻기 때문이다. 그렇기 때문에 gold는 보통적으로는 팀의 상황을 따라가는 경우가 많다. 딜러들의 Damage는 보통 gold에 비례한다. 많은 골드는 좋은 아이템을 여러개 구매할 수 있다. 좋은 아이템은 자신의 딜 환경을 우수하게 만들어준다. 하지만 저조한 아이템을 가지고도 우수한 딜링 환경을 만드는 경우도 존재한다.

이러한 경우를 뽑기위한 수치로 DPG를 만든다. 만약 벌은 gold가 저조한데, Damage를 많이 넣었다면 이 플레이어는 우수한 딜러이다. 비유적으로, 봉급을 비교적 적게 받는데 회사에 가져다주는 이득이 많은 것과 같다. 그렇기에 DPG는 딜러 포지션에 있어 중요한 지표이다.

후에 더 정보를 추가할 것이지만, 프로토타입인 현재에서는 내가 중요하다고 생각하는 지표들을 보여주기로 한다.

기존의 매치 카드의 오른쪽 화살표 버튼을 누르면,

<template>
  <v-data-table
:headers="headers"
:items="tableDataMaker(match)"
>
  </v-data-table>
</template>

<script>
  export default {
  data() {
    return {
      headers: [
        {
          align: "start",
          key: "name",
          sortable: false,
          title: "Your stats on match",
        },
        { key: "stats", title: "스텟" },
        { key: "oppo", title: "맞 라인 대비" },
        { key: "rank", title: "순위" },
      ],
    }
   method() {
     tableDataMaker(match) {
      const data = [];
      const field = [
        {
          name: "생성 현상금",
          stats: match.bountyGold + "골드",
          oppo: match.bountyGoldOppo + "골드 우위",
          rank: match.bountyGoldRank + "위",
        },
        {
          name: "DPM",
          stats: match.damagePerMinute.toFixed(1) + "딜",
          oppo: (match.damagePerMinuteOppo * 100).toFixed(1) + "% 우위",
          rank: match.damagePerMinuteRank + "위",
        },
        {
          name: "GPM",
          stats: match.goldPerMinute.toFixed(1) + "골드",
          oppo: match.goldPerMinuteOppo * 100 + "% 우위",
          rank: match.goldPerMinuteRank + "위",
        },
        {
          name: "DPG",
          stats: match.dpg.toFixed(1) + "딜",
          oppo: (match.dpgOppo * 100).toFixed(1) + "% 우위",
          rank: match.dpgRank + "위",
        },
        {
          name: "DPT",
          stats: match.dpt.toFixed(1) + "딜",
          oppo: (match.dptOppo * 100).toFixed(1) + "% 우위",
          rank: match.dptRank + "위",
        },
        {
          name: "DDPT",
          stats: (match.ddpt * 100).toFixed(1) + "%",
          oppo: (match.ddptOppo * 100).toFixed(1) + "% 우위",
          rank: match.ddptRank + "위",
        },
        {
          name: "DGPT",
          stats: (match.dgpt * 100).toFixed(1) + "%",
          oppo: (match.dgptOppo * 100).toFixed(1) + "% 우위",
          rank: match.dgptRank + "위",
        },
        {
          name: "암살",
          stats: match.killAfterHiddenWithAlly + "번",
          oppo: match.killAfterHiddenWithAllyOppo + "번 우위",
          rank: match.killAfterHiddenWithAllyRank + "위",
        },
        {
          name: "다이브 점수",
          stats: match.killsNearTurret + "점",
          oppo: match.killsNearTurretOppo + "점 우위",
          rank: match.killsNearTurretRank + "위",
        },
        {
          name: "10분 CS",
          stats: match.laneMinionsFirst10Minutes + " cs",
          oppo: match.laneMinionsFirst10MinutesOppo + " cs 우위",
          rank: match.laneMinionsFirst10MinutesRank + "위",
        },
        {
          name: "수적 열세 클러치",
          stats: match.outnumberedKills + "킬",
          oppo: match.outnumberedKillsOppo + "킬 우위",
          rank: match.outnumberedKillsRank + "위",
        },
        {
          name: "10분 적 처치관여",
          stats: match.takedownsFirstXMinutes + "킬 관여",
          oppo: match.takedownsFirstXMinutesOppo + "킬 우위",
          rank: match.takedownsFirstXMinutesRank + "위",
        },
        {
          name: "포탑 방패 파괴횟수",
          stats: match.turretPlatesTaken + "번",
          oppo: match.turretPlatesTakenOppo + "번 우위",
          rank: match.turretPlatesTakenRank + "위",
        },
        {
          name: "VSPM",
          stats: match.visionScorePerMinute.toFixed(1),
          oppo: match.visionScorePerMinuteOppo.toFixed(1) + "% 우위",
          rank: match.visionScorePerMinuteRank + "위",
        },
        {
          name: "핑 횟수",
          stats: match.totalPings + "번",
          oppo: match.totalPingsOppo + "번 우위",
          rank: match.totalPingsRank + "위",
        },
        {
          name: "MY팀 핑 횟수",
          stats: match.myTeamPings + "번",
          oppo: (match.myTeamPingsOppo * 100).toFixed(1) + "% 우위",
          rank: "--",
        },
      ];
      // field 안의 객체들을 data에 푸쉬
      for (let i = 0; i < field.length; i++) {
        data.push(field[i]);
      }
      return data;
    },
  },
  }
</script>  

다음과 같은 상세스텟이 나타난다. 스텟에 대한 설명은 STATS INFO 버튼을 누르면,
다음과 같은 설명창이 뜨도록 일단 만들었다. 나중에 설명 창 디자인을 좀 개선하도록 해야겠다. 일단은 기능우선으로(할게 너무 많아짐..)

<v-divider class="py-1"></v-divider>

<v-card color="#1A1627" class="text-grey" flat>
  <v-dialog
            transition="dialog-bottom-transition"
            width="auto"
            >
    <template
              v-slot:activator="{
                                props: activatorProps,
                                }"
              >
      <v-btn
             v-bind="activatorProps"
             text="Stats Info"
             block
             class="text-white"
             color="#1A1627"
             ></v-btn>
    </template>

    <template v-slot:default="{ isActive }">
      <v-card color="#1A1627">
        <v-toolbar
                   title="Stats Info"
                   ></v-toolbar>

        <v-card-text class="text-h6 pa-12">
          <div
               style="
                      display: flex;
                      flex-direction: column;
                      align-items: left;
                      "
               >
            <h5>
              생성 현상금 : 매치동안 형성된
              자신의 총 현상금 골드
            </h5>
            <h5>DPM : 분당 데미지</h5>
            <h5>GPM : 분당 획득 골드</h5>
            <h5>DPG : 골드당 데미지</h5>
            <h5>
              DPT : 입힌 데미지 / 받은 데미지
            </h5>
            <h5>
              DDPT : 매치동안 죽은 시간 비율
            </h5>
            <h5>
              DGPT : 매치동안 스킬샷 피한 비율
            </h5>
            <h5>
              암살 : 팀원또는 혼자 적이 보이지
              않는 시야에서 급습하여 킬관여 횟수
            </h5>
            <h5>
              다이브 점수 : 자신의 포탑 또는
              상대 포탑 아래에서 기록한 킬
              횟수(자신의 포탑 아래 킬에서는
              가산점 - 1점당 1킬의 가치)
            </h5>
            <h5>
              10분 cs : 10분 이전까지의 처치한
              미니언 마지막 타수
            </h5>
            <h5>
              포탑 방패 파괴횟수 : 14분 이전까지
              생성되는 포탑 방패에 대한 파괴
              횟수
            </h5>
            <h5>VSPM : 분당 시야점수</h5>
            <h5>
              핑 횟수 : 해당 매치에서의 모든
              종류의 나의 핑의 횟수
            </h5>
            <h5>
              MY팀 핑 횟수 : 해당 매치에서의
              모든 종류의 나의 팀의 핑의 횟수
            </h5>
          </div>
        </v-card-text>

        <v-card-actions class="justify-end">
          <v-btn
                 text="Close"
                 @click="isActive.value = false"
                 ></v-btn>
        </v-card-actions>
      </v-card>
    </template>
  </v-dialog>

문제 및 개선필요 사항

• expansion시 모든 카드의 expansion이 작동하는 상황 : card별로 show변수를 data에 만들어서 따로 관리해야할 듯.
• AI스코어 설계 어떻게 할까에 대한 고민
• 빈 아이템에 해당하는 item{i}:0 일때 화면단 처리
• 나머지 데이터들은 어떻게 보여줄지에 대한 고민
• 보여줄 데이터 순서를 라인별로 다르게 해야할 듯
• 라인별 중요한 지표 정리해야 함.
• mainPage.vue 코드가 너무 복잡해지고 있음.
• update시에 시간이 많이 걸릴 경우 예상시간 표기해보자.
• 백엔드에 매치 타임라인 데이터도 구축해야 하는데

배포 설계 플랜
일단 현재는 local의 mysql 데이터베이스를 활용중인데, AWS RDS로 갈아타고 Vue.js(front)와 Django(back)애플리케이션을 도커 이미지로 빌드, 각각 Dockerfile 작성 후, 의존성 설치하고 docker Compose로 두 개의 애플리케이션 컨테이너를 하나의 서비스로 정의한 후 환경 변수 설정(RDS DB 정보 추가)하고 Compose로 컨테이너 실행해서 배포할 예정