feat: Guess the Guild Game

cypress/e2e/3-guess-the-guild/0-guess-name.spec.ts

@@ -0,0 +1,154 @@
+const setGameModeToGuessName = () => {
+  Cypress.on("window:before:load", (win) => {
+    Object.defineProperty(win.Math, "random", {
+      value: function () {
+        return 0.1
+      },
+      writable: false,
+    })
+  })
+}
+
+describe.skip("api fetching returns an error", () => {
+  it("displays error toast message", () => {
+    cy.intercept(`${Cypress.env("guildApiUrl")}/guilds?*`, {
+      statusCode: 500,
+    }).as("failedGuildLoad")
+
+    cy.visit("/guess-the-guild")
+
+    cy.wait("@failedGuildLoad")
+
+    cy.get(".chakra-toast", { timeout: 5000 }).should("be.visible")
+  })
+})
+
+describe.skip("in 'guess name' mode", () => {
+  beforeEach(() => {
+    cy.visit("/guess-the-guild")
+    setGameModeToGuessName()
+    cy.contains("Let's Go!").click()
+  })
+
+  it("is not possible to press submit, until an answer is selected", () => {
+    cy.getByDataTest("submit").should("be.disabled")
+  })
+
+  it("is possible to press submit, after an answer is selected", () => {
+    cy.getByDataTest("answer-button").first().click()
+    cy.getByDataTest("submit").should("not.be.disabled")
+  })
+
+  it("score indicator shows up", () => {
+    cy.get("#score-indicator").should("be.visible")
+  })
+})
+
+describe.skip("game mode answer submit", () => {
+  it("shows success message for good answer", () => {
+    cy.intercept(`${Cypress.env("guildApiUrl")}/guilds?*`, {
+      statusCode: 200,
+      fixture: "testGuilds.json",
+    }).as("guildsLoaded")
+
+    cy.visit("/guess-the-guild")
+    setGameModeToGuessName()
+
+    cy.contains("Let's Go!").click()
+    cy.getByDataTest("answer-button").first().click()
+    cy.getByDataTest("submit").click()
+    cy.get('[data-status="success"]').should("be.visible")
+  })
+
+  it("shows wrong answer message", () => {
+    cy.intercept(`${Cypress.env("guildApiUrl")}/guilds?*`, {
+      statusCode: 200,
+      fixture: "testGuilds.json",
+    }).as("guildsLoaded")
+
+    cy.visit("/guess-the-guild")
+    setGameModeToGuessName()
+
+    cy.contains("Let's Go!").click()
+    cy.getByDataTest("answer-button").last().click()
+    cy.getByDataTest("submit").click()
+    cy.get('[data-status="warning"]').should("be.visible")
+  })
+
+  it("increases score by 1 on good answer", () => {
+    cy.intercept(`${Cypress.env("guildApiUrl")}/guilds?*`, {
+      statusCode: 200,
+      fixture: "testGuilds.json",
+    }).as("guildsLoaded")
+
+    cy.visit("/guess-the-guild")
+    setGameModeToGuessName()
+
+    cy.contains("Let's Go!").click()
+
+    cy.get("span").contains("Score:").parent().contains("0").should("be.visible")
+
+    cy.getByDataTest("answer-button").first().click()
+    cy.getByDataTest("submit").click()
+
+    cy.contains("1 points").should("be.visible")
+  })
+
+  it("does not change score on wrong answer", () => {
+    cy.intercept(`${Cypress.env("guildApiUrl")}/guilds?*`, {
+      statusCode: 200,
+      fixture: "testGuilds.json",
+    }).as("guildsLoaded")
+
+    cy.visit("/guess-the-guild")
+    setGameModeToGuessName()
+
+    cy.contains("Let's Go!").click()
+
+    cy.get("span").contains("Score:").parent().contains("0").should("be.visible")
+
+    cy.getByDataTest("answer-button").last().click()
+    cy.getByDataTest("submit").click()
+
+    cy.get("span").contains("Score:").parent().contains("0").should("be.visible")
+  })
+})
+
+describe("game screen order", () => {
+  beforeEach(() => {
+    cy.intercept(`${Cypress.env("guildApiUrl")}/guilds?*`, {
+      statusCode: 200,
+      fixture: "testGuilds.json",
+    }).as("guildsLoaded")
+
+    cy.visit("/guess-the-guild")
+    setGameModeToGuessName()
+
+    cy.contains("Let's Go!").click()
+  })
+
+  it.skip("game continues on good answer", () => {
+    cy.getByDataTest("answer-button").first().click()
+    cy.getByDataTest("submit").click()
+
+    cy.getByDataTest("continue").should("be.visible")
+    cy.getByDataTest("continue").click()
+    cy.getByDataTest("submit").should("be.visible")
+  })
+
+  it.skip("game ends after wrong answer", () => {
+    cy.getByDataTest("answer-button").last().click()
+    cy.getByDataTest("submit").click()
+    cy.getByDataTest("end-game").should("be.visible")
+    cy.getByDataTest("end-game").click()
+    cy.contains("Game Over").should("be.visible")
+  })
+
+  it("game restarts after end game screen", () => {
+    cy.getByDataTest("answer-button").last().click()
+    cy.getByDataTest("submit").click()
+    cy.getByDataTest("end-game").click()
+    cy.contains("Try Again!").click()
+    cy.contains("GuildGesser").should("be.visible")
+  })
+})

cypress/e2e/3-guess-the-guild/1-assign-logos.spec.ts

@@ -0,0 +1,31 @@
+const setGameModeToAssignLogos = () => {
+  Cypress.on("window:before:load", (win) => {
+    Object.defineProperty(win.Math, "random", {
+      value: function () {
+        return 0.9
+      },
+      writable: false,
+    })
+  })
+}
+
+describe("assign logos game mode", () => {
+  beforeEach(() => {
+    cy.intercept(`${Cypress.env("guildApiUrl")}/guilds?*`, {
+      statusCode: 200,
+      fixture: "testGuilds.json",
+    }).as("guildsLoaded")
+
+    cy.visit("/guess-the-guild")
+    setGameModeToAssignLogos()
+    cy.contains("Let's Go!").click()
+  })
+
+  it("not possible to press submit when not all logos are assigned", () => {
+    cy.getByDataTest("submit").should("be.disabled")
+  })
+
+  it("score indicator shows up", () => {
+    cy.get("#score-indicator").should("be.visible")
+  })
+})

cypress/fixtures/testGuilds.json

@@ -0,0 +1,46 @@
+[
+    {
+        "id": 1,
+        "name": "Guild 1",
+        "urlName": "guild1",
+        "imageUrl": "",
+        "roles": ["Role1"],
+        "platforms": ["DISCORD"],
+        "memberCount": 1234,
+        "rolesCount": 5678,
+        "tags": ["VERIFIED"]
+    },
+    {
+        "id": 2,
+        "name": "Guild 2",
+        "urlName": "guild2",
+        "imageUrl": "",
+        "roles": ["Role1"],
+        "platforms": ["DISCORD"],
+        "memberCount": 1234,
+        "rolesCount": 5678,
+        "tags": ["VERIFIED"]
+    },
+    {
+        "id": 3,
+        "name": "Guild 3",
+        "urlName": "guild3",
+        "imageUrl": "",
+        "roles": ["Role1"],
+        "platforms": ["DISCORD"],
+        "memberCount": 1234,
+        "rolesCount": 5678,
+        "tags": ["VERIFIED"]
+    },
+    {
+        "id": 4,
+        "name": "Guild 4",
+        "urlName": "guild4",
+        "imageUrl": "",
+        "roles": ["Role1"],
+        "platforms": ["DISCORD"],
+        "memberCount": 1234,
+        "rolesCount": 5678,
+        "tags": ["VERIFIED"]
+    }
+]   

package.json

@@ -21,6 +21,7 @@
     "@chakra-ui/anatomy": "^2.1.2",
     "@chakra-ui/react": "^2.6.1",
     "@chakra-ui/theme-tools": "^2.0.17",
+    "@dnd-kit/core": "^6.1.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@hcaptcha/react-hcaptcha": "^1.4.4",

src/components/guess-the-guild/EndGame.tsx

@@ -0,0 +1,81 @@
+import { Alert, Button, Divider, Heading, Text, VStack } from "@chakra-ui/react"
+import pluralize from "utils/pluralize"
+
+const EndGame = ({
+  score,
+  highscore,
+  onRestart,
+}: {
+  score: number
+  highscore: number
+  onRestart: () => void
+}) => {
+  const getMessage = () => {
+    if (score <= 10) return "Better luck next time!"
+    if (score <= 20) return "You're getting the hang of it!"
+    return "It looks like we're dealing with a professional 👀"
+  }
+
+  return (
+    <>
+      <VStack>
+        <Heading
+          as="h2"
+          fontSize={{ base: "xl", md: "2xl", lg: "3xl" }}
+          textAlign="center"
+          fontFamily="display"
+        >
+          Game Over
+        </Heading>
+        <Text textAlign="center">{getMessage()}</Text>
+
+        <Divider mt="4" />
+        <Text
+          as="span"
+          mt="1"
+          fontSize="xs"
+          fontWeight="bold"
+          color="gray"
+          textTransform="uppercase"
+          noOfLines={1}
+        >
+          Final Score
+        </Text>
+        <Text
+          fontSize={{ base: "xl", md: "2xl", lg: "3xl" }}
+          mt="-2"
+          mb="1"
+          fontFamily="display"
+          fontWeight="600"
+        >
+          {score} points
+        </Text>
+
+        {score > highscore && (
+          <>
+            <Alert status="success" justifyContent="center">
+              🎉 New Highscore!
+            </Alert>
+          </>
+        )}
+
+        {score <= highscore && (
+          <>
+            <Text>
+              Only <strong>{pluralize(highscore - score + 1, "point")}</strong> to go
+              to beat your current highscore!
+            </Text>
+          </>
+        )}
+
+        <Divider mt="2" />
+
+        <Button colorScheme="green" w="100%" mt="3" onClick={() => onRestart()}>
+          Try Again!
+        </Button>
+      </VStack>
+    </>
+  )
+}
+
+export default EndGame