지난번에 했던 테이블에 플레이어 닉네임 배치를 좀더 그럴듯하게 바꿈




닉네임 아래 숫자는 게임머니임

게임 배팅하면서 저 숫자가 왔다갔다 해야하는데

당연 저 수치는 백엔드 쪽에서 저장하고 관리해야함

그래서 redis에 플레이어별 가진 금액을 저장해 둬야하는데


이미 redis 구조가



방리스트        //방제목

방번호                // 방번호:방제목

방번호_players     //방안에 플레이어목록 해쉬 '플레이어닉네임:숫자' 형태로 저장됨 (레디여부 판단용)


형태로 되어있음 여기에다 또 새로운 테이블을 만들기엔 좀 번거러울거 같아서

그냥 방번호_players 재활용 하기로함

원래는 숫자 -1,0,1 로 방장인지,레디 했는지 안했는지 판단하는용도인데

이 값을 그냥 게임머니로 사용하기로 함

게임 시작하면 방장이고 뭐고 없어진다는뜻임 그판 게임 끝나면 그냥 방 자체를 없에버리도록 해야할듯




각 플레이어의 값을 1000(게임시작 기본값)으로 설정한다음

클라이언트에다 넘기면 이제 첫짤처럼 닉네임,아래쪽엔 현재 소지한 게임머니를 배치함



닉네임,게임머니 값을 텍스트로 생성해서


그룹으로 묶고 캔버스에 추가해줌




글고 오늘 패브릭공부하다 알았는데

저 텍스트를 좌표 중앙에 정렬하려고 별지랄 다했었는데

하다 안돼서 때려쳤었는데 저 originX,Y라는 값만 설정하면 되는거 였더라


윗짤 예시처럼

텍스트 좌표를 설정하면 기본적으로 그 좌표를 왼쪽위를 기준으로 잡고 표시했는데

저 originX ,y 센터로 설정하면 그 좌표값을 중앙으로 기준잡고 렌더링함

이게 사실 fabric 튜토리얼에도 나와있던건데 튜토리얼 보다 말고 '직접만들면서 배우면 되겠지'

지랄하다 괜히 고생함

역시 뭘시작하던간에 기초부터 완전히 다지고 시작하는게 맞는듯



이제 화면에다 배치를 했는데

또 필요한게


저 화면에다 배치한 텍스트가 동적으로 값이 계속 바뀌어야함

배팅할때마다 게임머니 수치가 줄어야하고

파산했거나 게임에서 나가면 그 플레이어 닉네임은 화면에서 지워야하는등

처리해야할것들이 있음


그래서 나중에 수정하기위해 저 텍스트 객체들을 따로 어딘가에 저장해둬야함

어따 저장할지 한참 고민하다 그냥 클래스를 하나만들고 그 객체에다 저장하기로함

근데 좆바스크립트가 태생적으로 병신이라 클래스 개념이 없음

그냥 클로저 활용한 함수를 클래스 비슷하게 쓰는 수준임


테스트로 클래스만듬

아까 위에서 설정했던 닉네임,게임머니를 담은 그룹객체를 맵에다 저장하는식

원래 이것도 map이 아니라 그냥 object 썻다가

키값 문제랑 나중에 순회를 해야하는데 object는 순회기능도 없어서 이것도 뻘짓하다가

map 쓰는걸로 바꾼거임 분명 js책 볼때 map이랑 set같은 여러 객체를 본적이있는데

그동안 map의 존재조차 까먹고 있었다가 다시한번 기초가 중요하다는걸 깨달은 부분


아무튼 저 클래스로 객체 생성함


const players=new Players()


근데 js에서 진짜 왠만하면 전역변수를 쓰지말라고 했는데

이건 어쩔수 없이 전역에 쓸수밖에 없더라

혹시 전역에 안쓰는 다른방법 없나

이럴때는 좆바의 클래스,객체지향이 강제되는 부분이 편하게 느껴졌음



이제 저 players 객체 안에는


닉네임:그룹객체{

닉네임text객체,

돈text객체

}


형태로 map에 저장됨

키값으로 어느 텍스트 객체를 조작할건지 불러올수있음

테스트 해봤는데 문제없이 동작하더라