크래프톤 정글 week16, day119 - 인게임에 웹 캠 추가, UI 컴포넌트 부분 추가

인게임에 웹 캠 추가하기

화요일에 게임이 되는걸 어떻게든 보여주기 위해  일요일에 상림이형과 현우님이랑 같이 와서 작업하는데 상림이형이 인게임 구조를 구현하는 동안 대기방에서 게임시작을 눌렀을 때 동일한 데이터로 웹 캠을 띄울 수 있게 가져왔다.

근데 데이터 값의 구조가 대기 방과 달라서 값이 이상하게 들어왔는데 대기방에서는 room.players 안에 객체로 닉네임과 악기를 가져오는 방식으로 되어있었는데 인게임에서 가져오는 데이터는 room.game.players.... 등으로 되어있어 깊게 파고 들어가야 했었다. 데이터는 가져와서 상관은 없긴한데 재희님이 데이터를 대기방과 동일하게 보내줄 테니 다시 확인해보라 해서 내일 오전에 같이 수정하기로 했다.

---

친구창과 메인페이지 select UI 구현

현재 데이터가 수정이 되야 작업을 이어서 할 수 있는데 내일 오전에 데이터 수정해서 테스트한다고 해서 남은 시간에 UI 작업을 좀 했다.

친구창과 메인페이지의 - PLAY - 이런 선택 텍스트 부분을 만들었다.

메인 선택

.categoryText {
  display: inline-block;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: transparent;
  background-image: linear-gradient(108.62deg, #FC92E4 2.2%, #00FFF0 115.74%);
  -webkit-background-clip: text;
  background-clip: text;
}

다행히 텍스트 테두리에 색을 입히는 css가 있어서 그걸 이용해 그라데이션으로 만들었다. 그라데이션 비율은 재희님이 만들어줬다.

 

친구창

div의 테두리에만 그라데이션을 입히고 안쪽에 반투명하게 해야 했는데, 이 부분은 css에서 구조적으로 하기 힘들어 꼼수를 쓴다고 한다. 근데 그 과정에서 div내부까지 같은 색으로 바뀌어서 잘 안변했기 때문에 이건 이미지로 가져와 background-image로 뒷 배경을 바꿔주었다.

---

현우님 오픈비두 테스트

퇴근하기 직전에 현우님이 오픈비두 배포를 해서 테스트를 해본다고 했다. 받은 링크를 타고 들어가 세션과 유저 이름을 입력하고 들어갔는데 현우님의 캠은 잘보이는데 참여한 본인의 캠이 안보인다.

콘솔에 찍히는 것을 확인했더니 현 시스템에서 마이크와 카메라에 접근하는 권한이 막혀있다고 하고, 무슨 user.Ref인가 그 부분이 undefined로 찍혀있는것을 확인했다. 권한은 노트북에 있는 권한을 다 풀어놨는대도 여전히 뜨고, undefined부분은 코드상의 문제라 이 부분은 내일 수정한다고 했다.

 

오늘부로 남재희 지지를 철회한다.

오늘부터 지지관계에서 벗어나
남재희과 나는 한몸으로 일체가 된다.
남재희에 대한 공격은 나에 대한 공격으로 간주한다.

세상에 70억 명의 남재희 팬이 있다면, 나는 그들 중 한 명일 것이다.
세상에 1억 명의 남재희 팬이 있다면, 나 또한 그들 중 한 명일 것이다.
세상에 천만 명의 남재희 팬이 있다면, 나는 여전히 그들 중 한 명일 것이다.
세상에 백 명의 남재희 팬이 있다면, 나는 아직도 그들 중 한 명일 것이다.
세상에 한 명의 남재희 팬이 있다면, 그 사람은 아마도 나일 것이다.
세상에 단 한 명의 남재희 팬도 없다면, 나는 그제서야 이 세상에 없는 것이다.
남재희, 나의 사랑.
남재희, 나의 빛.
남재희,나의 어둠.
남재희, 나의 삶.
남재희, 나의 기쁨.
남재희, 나의 슬픔.
남재희, 나의 안식.
남재희, 나의 영혼.
남재희, 나.

 

https://github.com/jaenam615

jaenam615 - Overview

 

 

학습 시간 : 10 ~ 26시