init colors and assets + choose class screen (#1)

src/App.scss

@@ -1,24 +1,16 @@
 @font-face {
-  src: url("../public/fonts/Orbitron.ttf");
-  font-family: "Orbitron";
+  src: url("../public/fonts/Jersey10.ttf");
+  font-family: "Jersey";
 }
 @font-face {
-  src: url("../public/fonts/Oxanium.ttf");
-  font-family: "Oxanium";
-}
-@font-face {
-  src: url("../public/fonts/Sonara.otf");
-  font-family: "Sonara";
+  src: url("../public/fonts/VT323.ttf");
+  font-family: "VT323";
 }
 
 * {
-  font-family: "Oxanium";
+  font-family: "VT323";
 }
 
 .headline {
-  font-family: "Orbitron";
-}
-
-.italic {
-  font-family: "Sonara";
+  font-family: "Jersey";
 }

src/App.tsx

@@ -20,6 +20,7 @@ import { CardAnimationsProvider } from "./providers/CardAnimationsProvider";
 import { GameProvider } from "./providers/GameProvider";
 import { StoreProvider } from "./providers/StoreProvider";
 import customTheme from "./theme/theme";
+import { ChooseClassPage } from "./pages/ChooseClassPage";
 
 function App() {
   const theme = extendTheme(customTheme);
@@ -30,46 +31,7 @@ function App() {
           <AudioPlayerProvider songPath={"/music/new-track.mp3"}>
             <Routes>
               <Route path="/" element={<Home />} />
-              <Route path="/login" element={<Login />} />
-              <Route path="/gameover/:gameId" element={<GameOver />} />
-              <Route path="/demo" element={<GamePage />} />
-              <Route path="/rewards" element={<RewardsPage />} />
-
-              <Route
-                path="/store"
-                element={
-                  <StoreProvider>
-                    <Store />
-                  </StoreProvider>
-                }
-              />
-              <Route path="/redirect/:page" element={<Redirect />} />
-              <Route
-                path="/preview/:type"
-                element={
-                  <StoreProvider>
-                    <PreviewPage />
-                  </StoreProvider>
-                }
-              />
-              <Route
-                path="/open-pack"
-                element={
-                  <StoreProvider>
-                    <OpenPack />
-                  </StoreProvider>
-                }
-              />
-              <Route
-                path="/special-cards"
-                element={
-                  <StoreProvider>
-                    <SpecialCardsPage />
-                  </StoreProvider>
-                }
-              />
-              <Route path="/play" element={<Navigate to="/" />} />
-              <Route path="/plays" element={<PlaysLayout />} />
+              <Route path="/choose-class" element={<ChooseClassPage />} />
             </Routes>
           </AudioPlayerProvider>
         </GameProvider>

src/components/Background.tsx

@@ -1,10 +1,10 @@
-import { Box, Text } from "@chakra-ui/react";
+import { Box } from "@chakra-ui/react";
 import { PropsWithChildren } from "react";
 import { useResponsiveValues } from "../theme/responsiveSettings";
 import CachedImage from "./CachedImage";
 
 interface BackgroundProps extends PropsWithChildren {
-  type?: "game" | "store" | "home" | "white" | "rage";
+  type?: "game" | "store" | "home" | "white" | "rage" | "skulls" | "cave" | "beast";
   dark?: boolean;
   scrollOnMobile?: boolean;
   bgDecoration?: boolean;
@@ -53,6 +53,7 @@ export const Background = ({
         bottom: isSmallScreen ? 0 : "unset",
         boxShadow: dark ? "inset 0 0 0 1000px rgba(0,0,0,.4)" : "none",
         overflow: scrollOnMobile && isSmallScreen ? "scroll" : "unset",
+        py: '90px'
       }}
     >
       {bgDecoration ? (
@@ -78,45 +79,7 @@ const BackgroundDecoration = ({ children }: PropsWithChildren) => {
           top={0}
         />
       )}
-      <Box
-        height="15%"
-        width="100%"
-        display="flex"
-        justifyContent={isSmallScreen ? "center" : "space-between"}
-        alignItems="center"
-        padding={isSmallScreen ? "0 50px" : "25px 50px 0px 50px"}
-      >
-        <CachedImage
-          alignSelf="center"
-          justifySelf="end"
-          src="/logos/logo-variant.svg"
-          alt="logo-variant"
-          width={"65%"}
-          maxW={"300px"}
-          ml={4}
-        />
-        {!isSmallScreen && (
-          <CachedImage
-            alignSelf="center"
-            justifySelf="end"
-            src="/logos/joker-logo.png"
-            alt="/logos/joker-logo.png"
-            width={"25%"}
-            maxW={"150px"}
-          />
-        )}
-      </Box>
-      <Box
-        sx={{
-          height: { base: "80%", sm: "60%" },
-          width: "100%",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
         {children}
-      </Box>
       {!isSmallScreen && (
         <>
           <CachedImage
@@ -127,24 +90,6 @@ const BackgroundDecoration = ({ children }: PropsWithChildren) => {
             position="fixed"
             bottom={0}
           />
-          <Box
-            sx={{
-              position: "fixed",
-              bottom: 16,
-              left: 12,
-            }}
-          >
-            <Text size="m">BUILD YOUR DECK</Text>
-          </Box>
-          <Box
-            sx={{
-              position: "fixed",
-              bottom: 16,
-              right: 12,
-            }}
-          >
-            <Text size="m">RULE THE GAME</Text>
-          </Box>
         </>
       )}
     </Box>

src/components/CashSymbol.tsx

@@ -1,3 +1,3 @@
 export const CashSymbol = () => {
-  return <span style={{ fontFamily: "Orbitron", marginLeft: '3px' }}>¢</span>;
+  return <span style={{ fontFamily: "Jersey", marginLeft: '3px' }}>¢</span>;
 };

src/components/GameMenu.tsx

@@ -3,9 +3,9 @@ import { faBars } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { GAME_ID, LOGGED_USER } from "../constants/localStorage";
+import { GAME_ID, LOGGED_USER } from "../constants/localStorage.ts";
 import { useAudioPlayer } from "../providers/AudioPlayerProvider.tsx";
-import { useGameContext } from "../providers/GameProvider";
+import { useGameContext } from "../providers/GameProvider.tsx";
 import { useResponsiveValues } from "../theme/responsiveSettings.tsx";
 
 interface GameMenuProps {

src/components/Leaderboard.tsx

@@ -9,9 +9,9 @@ import {
   Tr
 } from "@chakra-ui/react";
 import { useTranslation } from "react-i18next";
-import { useGetLeaderboard } from "../queries/useGetLeaderboard";
+import { useGetLeaderboard } from "../queries/useGetLeaderboard.ts";
 import { VIOLET, VIOLET_LIGHT } from "../theme/colors.tsx";
-import { RollingNumber } from "./RollingNumber";
+import { RollingNumber } from "./RollingNumber.tsx";
 
 const CURRENT_LEADER_STYLES = {
   position: "relative",

src/components/PinkBox.tsx

@@ -16,7 +16,7 @@ export const PinkBox = ({ children, title, button, onClick }: PinkBoxProps) => {
       alignItems="center"
       w="80%"
       maxW="550px"
-      fontFamily="Orbitron"
+      fontFamily="Jersey"
     >
       <Box
         w="100%"

src/components/PoweredBy.tsx

@@ -13,7 +13,7 @@ export const PoweredBy = () => {
         letterSpacing: "0.25em",
       }}
     >
-      <Text fontFamily="Orbitron">powered by Dojo and Starknet</Text>
+      <Text fontFamily="VT323">powered by Dojo and Starknet</Text>
     </Box>
   );
 };

src/components/RewardsDetail.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, Heading } from "@chakra-ui/react";
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from "react-router-dom";
 import { useRound } from "../dojo/queries/useRound.tsx";
-import { VIOLET_LIGHT } from "../theme/colors";
+import { VIOLET_LIGHT } from "../theme/colors.tsx";
 import { RoundRewards } from "../types/RoundRewards.ts";
 import { CashSymbol } from "./CashSymbol.tsx";
 import { PinkBox } from "./PinkBox.tsx";

src/components/SortBy.tsx

@@ -1,6 +1,6 @@
 import { Flex, Img, Text, Tooltip } from "@chakra-ui/react";
 import { SortBy as SortByEnum } from "../enums/sortBy.ts";
-import { useGameContext } from "../providers/GameProvider";
+import { useGameContext } from "../providers/GameProvider.tsx";
 import { useTranslation } from "react-i18next";
 import { useResponsiveValues } from "../theme/responsiveSettings.tsx";
 import CachedImage from "./CachedImage.tsx";

src/components/SpecialCards.tsx

@@ -1,7 +1,7 @@
 import { Box, Button, Flex, Text, useTheme } from "@chakra-ui/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useGame } from "../dojo/queries/useGame";
+import { useGame } from "../dojo/queries/useGame.tsx";
 import { useGameContext } from "../providers/GameProvider.tsx";
 import { Card } from "../types/Card.ts";
 import { ConfirmationModal } from "./ConfirmationModal.tsx";

src/components/StorePreviewComponent.tsx

@@ -2,13 +2,13 @@ import { Box, Button, Flex, HStack, Heading, Text } from "@chakra-ui/react";
 import { isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { Background } from "../components/Background";
-import CachedImage from "../components/CachedImage.tsx";
-import { PositionedDiscordLink } from "../components/DiscordLink.tsx";
-import { PositionedGameMenu } from "../components/GameMenu.tsx";
+import { Background } from "./Background.tsx";
+import CachedImage from "./CachedImage.tsx";
+import { PositionedDiscordLink } from "./DiscordLink.tsx";
+import { PositionedGameMenu } from "./GameMenu.tsx";
 import { CARD_WIDTH } from "../constants/visualProps.ts";
 import { Coins } from "../pages/store/Coins.tsx";
-import theme from "../theme/theme";
+import theme from "../theme/theme.ts";
 import { CashSymbol } from "./CashSymbol.tsx";
 
 const SIZE_MULTIPLIER = isMobile ? 1.3 : 2;

src/components/TiltCard.tsx

@@ -12,17 +12,17 @@ import {
   CARD_WIDTH,
   MODIFIERS_OFFSET,
   TILT_OPTIONS,
-} from "../constants/visualProps";
+} from "../constants/visualProps.ts";
 
 import ClockIcon from "../assets/clock.svg?component";
 import { useIsSilent } from "../hooks/useIsSilent.tsx";
 import { VIOLET } from "../theme/colors.tsx";
-import { Card } from "../types/Card";
+import { Card } from "../types/Card.ts";
 import { getTemporalCardText } from "../utils/getTemporalCardText.ts";
 import { getTooltip } from "../utils/getTooltip.tsx";
-import { AnimatedCard } from "./AnimatedCard";
+import { AnimatedCard } from "./AnimatedCard.tsx";
 import CachedImage from "./CachedImage.tsx";
-import { DraggableCard } from "./DraggableCard";
+import { DraggableCard } from "./DraggableCard.tsx";
 import { HoloEffect } from "./HoloEffect.tsx";
 import { PriceBox } from "./PriceBox.tsx";