random default avatar

apps/client/src/lib/atoms/game.ts

@@ -2,6 +2,7 @@ import { atom } from "jotai"
 
 import { atomWithSafeStorage } from "@/core/atom-with-safe-storage"
 
+import { AVAILABLE_AVATARS } from "../data/constants"
 import getRandomInt from "../functions/get-random-int"
 
 import type { Player } from "@evil-cards/server/src/ws/send"
@@ -12,5 +13,8 @@ export const nicknameAtom = atomWithSafeStorage(
   "nickname",
   `Игрок${getRandomInt(1000, 9999)}`
 )
-export const avatarAtom = atomWithSafeStorage("avatar", 1)
+export const avatarAtom = atomWithSafeStorage(
+  "avatar",
+  getRandomInt(1, AVAILABLE_AVATARS)
+)
 export const soundsAtom = atomWithSafeStorage("sounds", true)

apps/client/src/screens/entry.tsx

@@ -93,6 +93,7 @@ const UserCard: React.FC = () => {
               backgroundSize: "cover"
             }}
             data-testid="avatar"
+            data-test-avatar-id={avatarId}
           />
           <button
             onClick={() =>

e2e/fixtures/entry.ts

@@ -1,11 +1,13 @@
 import { test as base } from "@playwright/test"
+import { useAvatar } from "utility/use-avatar"
 import { useNickname } from "utility/use-nickname"
 
 export const test = base.extend({
   page: async ({ page }, use) => {
     await page.goto("/")
 
     await useNickname(page, "Крутой ник")
+    await useAvatar(page, 1)
 
     await use(page)
   }

e2e/fixtures/game.ts

@@ -1,6 +1,7 @@
 import { test as base, expect, type Page } from "@playwright/test"
 import { addPlayer } from "utility/add-player"
 import { readFromClipboard } from "utility/read-from-clipboard"
+import { useAvatar } from "utility/use-avatar"
 import { useNickname } from "utility/use-nickname"
 
 export const test = base.extend<{
@@ -15,6 +16,7 @@ export const test = base.extend<{
     await page.goto("/")
 
     await useNickname(page, "Игрок 1")
+    await useAvatar(page, 1)
     await page.getByTestId("connect-session").click()
 
     await page.getByTestId("invite-player").click()

e2e/fixtures/waiting.ts

@@ -1,13 +1,17 @@
-import { test as base } from "@playwright/test"
+import { test as base, expect } from "@playwright/test"
+import { useAvatar } from "utility/use-avatar"
 import { useNickname } from "utility/use-nickname"
 
 export const test = base.extend({
   page: async ({ page }, use) => {
     await page.goto("/")
 
     await useNickname(page, "Крутой ник")
+    await useAvatar(page, 1)
     await page.getByTestId("connect-session").click()
 
+    await expect(page.getByTestId("start-game")).toBeInViewport()
+
     await use(page)
   }
 })

e2e/suites/screens/entry.spec.ts

@@ -3,14 +3,3 @@ import { expect, test } from "fixtures/entry"
 test("Страница", async ({ page }) => {
   await expect(page).toHaveScreenshot()
 })
-
-test("Аватар", async ({ page }) => {
-  await page.getByTestId("avatar-prev").click()
-  await expect(page).toHaveScreenshot()
-
-  await page.getByTestId("avatar-next").click()
-  await expect(page).toHaveScreenshot()
-
-  await page.getByTestId("avatar-next").click()
-  await expect(page).toHaveScreenshot()
-})

e2e/suites/screens/waiting.spec.ts

@@ -61,6 +61,7 @@ test.describe("Возвращение на главный экран", () => {
 
   test("Через браузер", async ({ page }) => {
     await page.goBack()
+
     await expect(page.getByTestId("connect-session")).toBeInViewport()
   })
 })

e2e/utility/add-player.ts

@@ -1,5 +1,6 @@
 import { type Browser, expect } from "@playwright/test"
 
+import { useAvatar } from "./use-avatar"
 import { useNickname } from "./use-nickname"
 
 export async function addPlayer(
@@ -13,6 +14,7 @@ export async function addPlayer(
   await page.goto(inviteLink)
 
   await useNickname(page, nickname)
+  await useAvatar(page, 1)
 
   await page.getByTestId("connect-session").click()
 

e2e/utility/use-avatar.ts

@@ -0,0 +1,42 @@
+import type { Page } from "@playwright/test"
+
+// TODO: share AVAILABLE_AVATARS between client and e2e
+
+const AVAILABLE_AVATARS = 21
+
+export async function useAvatar(page: Page, id: number) {
+  const prevButtonLocator = page.getByTestId("avatar-prev")
+  const nextButtonLocator = page.getByTestId("avatar-next")
+
+  const rawCurrentAvatarId = await page
+    .getByTestId("avatar")
+    .getAttribute("data-test-avatar-id")
+
+  if (rawCurrentAvatarId == null) {
+    throw new Error("[data-test-avatar-id] is not defined on avatar image")
+  }
+
+  const currentAvatarId = Number(rawCurrentAvatarId)
+
+  if (currentAvatarId == id) {
+    return
+  }
+
+  const nIterationsPrev =
+    id < currentAvatarId
+      ? currentAvatarId - id
+      : currentAvatarId - 1 + AVAILABLE_AVATARS - currentAvatarId
+
+  const nIterationsNext =
+    id > currentAvatarId
+      ? id - currentAvatarId
+      : AVAILABLE_AVATARS - currentAvatarId + id
+
+  const nIterations = Math.min(nIterationsNext, nIterationsPrev)
+
+  for (let i = 0; i < nIterations; i++) {
+    const locator =
+      nIterationsNext > nIterationsPrev ? prevButtonLocator : nextButtonLocator
+    await locator.click()
+  }
+}