멀티 테이블을 위해 설계됨

마지막 글 이후로 시간이 좀 흘렀습니다. 읽을 만한 가치가 있는 무언가를 가지고 돌아오고 싶었고, 5월이 그걸 줬습니다.

한동안 인터페이스를 다 부수고 처음부터 다시 시작하고 싶었습니다. 마음에 들지 않았거든요. 대부분의 포커 앱은 디자인 예산을 모바일에 쏟아붓고 거기서 멈춥니다 -- 네, 저희도 모바일 작업은 했습니다 -- 하지만 개인적으로 고치고 싶었던 부분은 멀티 테이블 경험이었습니다. 네 테이블을 플레이하기 위해 브라우저 창 네 개를 여는 걸 늘 싫어했습니다. 그래서 이 작업이 시작되기 전에, 어떤 느낌이어야 하는지에 대해 엄격한 요구사항을 적어두고, 그 주위로 만들었습니다.

이게 우리가 떠올린 것이고, 나머지는 도중에 같이 착륙한 것들입니다.

우리가 떠올린 것

타일로 만들어진 하나의 영구적인 워크스페이스. 테이블, 로비, 캐셔, 핸드 히스토리 -- 모두 같은 그리드 안에 살고 있습니다. 드래그해서 옮기면, 레이아웃이 세션 간에 유지되고, 옛날 페이지 링크도 여전히 작동합니다; 별도의 페이지로 데려가는 대신 해당 타일을 엽니다.

우리가 목표로 하는 지점: 한 창에 16개의 라이브 테이블, 추가 창 없이, 팬 소리 요란한 노트북 없이.

워크스페이스, 끝에서 끝까지. 테이블, 로비, 캐셔가 모두 같은 그리드 안의 타일로 존재합니다. 액팅 테이블에는 골드 링이 들어가서 어느 테이블이 시계에 걸려 있는지 항상 알 수 있습니다.

한 창에 16개의 테이블을 슬로건에서 현실적인 목표로 옮기는 다섯 가지 기술적 변경:

페이지 전체에 하나의 GPU 컨텍스트. 이제 화면의 모든 테이블이 자기만의 렌더러를 띄우는 대신 단일 렌더러를 공유합니다. 그게 잠금 해제입니다 -- 현대 브라우저는 페이지가 보유할 수 있는 GPU 컨텍스트 수에 상한을 두고 있고, 이전의 테이블당 하나 모델은 16에 도달하기 훨씬 전에 한계에 부딪혔습니다. 노트북, 오래된 머신, 중급 모바일도 이제 여러 테이블을 열어도 아름답게 버티고, 여유 공간은 계속 늘고 있습니다.

각 타일이 자체 방향을 선택합니다. 세로 또는 가로, 무엇이 맞는지에 따라 결정됩니다. 와이드 모니터의 네 테이블은 가로로 유지됩니다. 태블릿의 여덟 테이블은 의미가 있을 때 세로로 뒤집힙니다. 신경 쓸 필요가 없습니다.

타일별 액션 바. 테이블이 당신을 필요로 할 때, 그 테이블에서 액션합니다 -- 이미 눈이 가 있는 바로 그곳에서.

액팅 테이블 글로우 링. 시계에 걸린 테이블이 빛나는 테이블입니다. 놓치기 어렵고, 중요해질 때까지는 무시하기 쉽습니다.

원자적 시트 클레임. 무대 뒤에서지만 중요합니다: 두 플레이어가 같은 순간에 같은 시트에 sit을 누를 때, 플랫폼이 이제 깔끔하게 해결합니다. 이중 클레임 없음, 놀라움 없음.

그리고 여기 나머지

안에 들어간 김에 테이블 자체도 리디자인을 받았습니다. 더 큰 아바타. 각 시트마다 자기만의 컬러 링. 액티브 플레이어는 자신의 색상 위에 골드 링을 받습니다 -- 색조뿐만 아니라 모양으로도 구분되어, 색맹 플레이어가 단서를 잃지 않게 합니다. 스택 라벨은 더 밝은 녹색으로 어두운 펠트에서 잘 보입니다. 네임플레이트가 더 깔끔합니다. 시트 지오메트리도 다듬어졌습니다 -- 테이블이 이제 펠트 주위로 수학적으로 균등하고, 베팅 라벨이 팟을 향해 일관된 오프셋으로 자리 잡았습니다. 한번 제대로 되면 알아채지 못하는 종류의 것이고, 그게 핵심입니다.

또한 오리지널 옆에 다크 테이블 테마를 출시했습니다. 차콜 펠트, 3밴드 메탈릭 실버 레일, 각 시트를 연결하는 옅은 기하학적 웹 라인, 떠 있는 이름과 스택 텍스트 -- 알약 배경 없음. 클럽이 자체 테마를 선택합니다. 클럽이 다크 모드라면, 다음에 앉을 때 보게 될 것입니다.

한 무더기의 작은 승리들도 같이 따라왔습니다:

• Click-to-sit. 빈 시트의 "+"를 탭하세요. 그 시트가 이미 예약된 상태로 바이인 다이얼로그가 열립니다.
• 햄버거 메뉴가 종을 대체합니다. 프로필, 캐셔, 핸드 히스토리, 헬프 -- 모두 헤더에서 한 번의 탭으로.
• 뱅크롤 칩이 이제 버튼입니다. 탭하면, 캐셔 타일이 열립니다. 한 단계 절약.
• 모바일에 숨 쉴 공간이 생겼습니다. 좁은 화면에서는 브랜드가 숨어서 미니 테이블 스트립과 "+" 버튼이 필요한 공간을 확보합니다. 워크스페이스 헤더에서 네이티브 풀스크린이 한 탭 거리에 있습니다.

다음은

워크스페이스 기반은 들어왔습니다. 다음은: 레지스트레이션과 게임 메커니즘 자체. 둘 다 준비되면 더 자세히 다루겠습니다.

우리가 어떻게 일하는지의 엔지니어링 측면 -- 스펙, 세션, 아키텍트 / 에이전트 분담 -- 그건 The Salty Korean에 씁니다.

Stay salty.