😎 Data Dragon을 활용한 유저 정보창 꾸미기
롤에서는 공식적으로 게임asset들을 무료로 제공하고 있다. 유저 아이콘이나 챔피언 초상화 같은 것들이다. 하지만 공식적으로 제공하는 asset들은 다소 한정적이고, 비공식적으로 거의 모든 asset들을 이용할 수 있는 Community Dragon같은 사이트들이 있다.
디자인에는 영 감각이 없다는걸 자각하고있지만...ㅋㅋ 오버레이 화면 작업전에 일단 기본 페이지부터 작업하고 있다. 미완성이지만 롤 클라이언트 실행시 다음과 같은 홈화면을 볼 수 있다.
🥨 커스텀 알고리즘 설정 페이지
플레이어의 위험지수를 나타내는 알고리즘을 사용자가 커스텀 할 수 있도록 설계 중이다. 여러가지 항목을 백분율로 분배할 수 있도록 하고 있는데, object내부의 모든 포인트를 합산하여 100점에 도달했는지 항상 체크해야한다.
상태 변화를 감지하고 이펙트를 발생시키기 위해 생각나는 것은 useEffect함수이다. 하지만 object타입인 알고리즘 state를 그대로 dependency array에 삽입 할 경우, 내부의 ratio의 속성 변화를 감지하지 못한다.
검색 결과로 나온 해결책은
등이 있었는데, 둘 다 해결할 수 없었다. 라이브러리에서는 object안에 object가 있는 깊은 구조에서 변화가 일어날 경우, 그냥 useEffect를 사용하라고 경고하고 있다.
결국
const onPropsChange = (data:Algorithm_type) =>{
const newData = JSON.parse(JSON.stringify(Object.assign(algoData, data)))
setAlgoData(newData)
}
다음과 같이 객체 참조값을 바꾸는 깊은 복사를 해서 이펙트를 발생시키는 해결책을 썼다.
💌 유저 상세 페이지
오버레이 화면에서는 해당 유저가 자신이 설정한 알고리즘에 따라 위험한지 여부를 점수화하고, 기본적으로 쌩배(전시즌 티어), 포꼬(포지션 꼬임), 꼴픽(안해본 챔피언 픽) 여부를 간단하게 파악할 수 있다. 개인적으로 롤 픽창에서 알고싶은 정보는 최소한 이정도였다. 멀티서치를 하러 다른 브라우저나 데스크톱 창을 들락날락하는건 너무 불편했다. 그냥 위험해보이는 유저가 있으면 상세정보를 한번 볼 수 있으면 될 뿐. 그래서 구현한 상세창은 다음과 같다. (너무힘들다....)
재밌었던 건 알고리즘 점수에 따라 아이콘 테두리 색깔을 다르게 표현하는 것이었는데, color-mixer라는 라이브러리를 통해 녹색 빨간색 사이에서 조절할 수 있었다. 지금 난관에 봉착한게, 우측하단에 빈 부분을 도넛차트로 채우고 싶은데 SVG만져본지가 오래되서 공부를 좀 해야하는것.... 그리고 아직 구현할 게 너무 많은것...ㅠㅠ 그냥 라이브러리 쓸까...
💦 알고리즘 관리
알고리즘을 edit하는 과정이 꽤나 까다로웠다. 전체적인 틀은 ipc 통신과 fs모듈을 사용해 구현했다.
알고리즘을 자유롭게 편집할 수 있다. 우측 상단의 100포인트를 ratio에 분배시키고, +버튼을 누르면 ipc통신을 통해 메인프로세스에 편집된 알고리즘을 보내 업데이트 한다.
알고리즘은 fs 모듈을 통해 json파일로 관리하고있다. 렌더된 창에서 겹치는 이름이 없도록 입력검사를 하고, 메인프로세스에서 파일을 추가 혹은 수정한 뒤 다시 그 폴더를 읽어 업데이트하는 방식을 썼다. 결과는 성공적이었다.
💬 일단은 서브페이지 완성
일단 내가 원하는만큼은 구현이 되었지만, 만들면 만들수록 아쉬운점이 생긴다. 나름 고민한다고 해서 만든 알고리즘인데 알고리즘의 데이터 프로퍼티 같은 것들이 유저 친화적이라는 느낌이 들지않고, 알고리즘을 수정 혹은 추가 하기에도 코드 스타일이 용이하지 못한 것 같다. 알고리즘의 항목들 마다 hook을 분리해서 계산시키면 더 좋았을까? 알고리즘을 커스텀할 때 input도 그냥 슬라이드식이면 더 좋았겠다. (데이터 타입때문에 min max설정을 뒤로 미뤘다....)
또한 api에러 핸들링을 위한 코드스타일에 대해 공부할 필요성을 느꼈다. api에러가 꽤 자주 발생하는데, 그냥 뻗어버린다... 이에 대해 체계적으로 논한 글을 거의 못본 것 같은데 찾아봐야겠다.ㅠㅠ 좀만 더 작업해서 라이엇에 프로덕트 키 신청을 해보고싶은데, 근본적이진 않지만 속도제한이 풀리면 좀 나아질지 모르겠다...
더 구현해야 할 리스트
- 오버레이 화면
- 툴팁 구현
알고리즘 도넛 차트알고리즘 편집기 완성홈 화면에 알고리즘 내용 표현
더하면 좋은 리스트
- 렌더링 최적화
- API 에러 헨들링 구체화
- 나 게임 많이 했네....
