Feat/add more levels

components/game/LeveldUpModal.tsx

@@ -1,5 +1,5 @@
 import { Modal, Image, Stack, Text, useMantineColorScheme } from '@mantine/core'
-import Levels, { ILevels } from '../../constants/Levels'
+import Levels, { ILevels, LevelTreshold } from '../../constants/Levels'
 interface ILevelModalProps {
   openLeveldUpModal: boolean
   closeLeveldUpModal(): Promise<void>
@@ -13,7 +13,7 @@ const LeveledUpModal = (props: ILevelModalProps) => {
   const { colorScheme } = useMantineColorScheme()
   const dark = colorScheme === 'dark'
 
-  const level = Math.floor(experiencePoints / 50 + 1)
+  const level = Math.floor(experiencePoints / LevelTreshold + 1)
   const levelList: ILevels = Levels
   const levelName: string = levelList[level]
 

components/game/utils/updateWinner.ts

@@ -1,4 +1,5 @@
 import { doc, increment, updateDoc } from 'firebase/firestore'
+import { LevelTreshold } from '../../../constants/Levels'
 import { db } from '../../../firebase/clientApp'
 import fetchGameData from '../firebase/fetchGameData'
 import { IGameContext } from './gameContext'
@@ -26,13 +27,19 @@ const updateWinner = async (gameContext: IGameContext) => {
    */
   if (players[0][0] == gameContext.userUID) {
     // Checks if player 0 (you) has leveld up
-    if ((gameContext.experiencePoints % 50) + players[0][1] >= 50) {
+    if (
+      (gameContext.experiencePoints % LevelTreshold) + players[0][1] >=
+      LevelTreshold
+    ) {
       await updateDoc(doc(db, 'users', players[0][0]), {
         openLeveldUpModal: true,
       })
     }
     // Checks if player 1 (opponent) has leveld up
-    if ((gameContext.opponentExperiencePoints % 50) + players[1][1] >= 50) {
+    if (
+      (gameContext.opponentExperiencePoints % LevelTreshold) + players[1][1] >=
+      LevelTreshold
+    ) {
       await updateDoc(doc(db, 'users', players[1][0]), {
         openLeveldUpModal: true,
       })
@@ -43,13 +50,19 @@ const updateWinner = async (gameContext: IGameContext) => {
         - player0 = opponent
      */
     // Checks if player 1 (you) has leveld up
-    if ((gameContext.experiencePoints % 50) + players[1][1] >= 50) {
+    if (
+      (gameContext.experiencePoints % LevelTreshold) + players[1][1] >=
+      LevelTreshold
+    ) {
       await updateDoc(doc(db, 'users', players[1][0]), {
         openLeveldUpModal: true,
       })
     }
     // Checks if player 0 (opponent) has leveld up
-    if ((gameContext.opponentExperiencePoints % 50) + players[0][1] >= 50) {
+    if (
+      (gameContext.opponentExperiencePoints % LevelTreshold) + players[0][1] >=
+      LevelTreshold
+    ) {
       await updateDoc(doc(db, 'users', players[0][0]), {
         openLeveldUpModal: true,
       })

components/leaderboard/LeaderboardList.tsx

@@ -9,6 +9,7 @@ import {
 import ProfileIcons, { IProfileIcon } from '../../constants/ProfileIcons'
 import { useMediaQuery } from '@mantine/hooks'
 import User from '../../types/User'
+import { LevelTreshold } from '../../constants/Levels'
 
 const LeaderboardList = ({ players }: { players: Partial<User>[] }) => {
   const ProfileIconsList: IProfileIcon = ProfileIcons
@@ -35,7 +36,8 @@ const LeaderboardList = ({ players }: { players: Partial<User>[] }) => {
               </Group>
               <Text color="teal" weight="bold">
                 <Text size="xs" mr={10} span color={dark ? 'gray.6' : 'gray'}>
-                  Level {Math.floor(player.experiencePoints! / 50 + 1)}
+                  Level{' '}
+                  {Math.floor(player.experiencePoints! / LevelTreshold + 1)}
                 </Text>
                 {player.experiencePoints} XP
               </Text>

components/leaderboard/Podium.tsx

@@ -1,5 +1,6 @@
 import { createStyles, Grid, Text, Image, Stack } from '@mantine/core'
 import React from 'react'
+import { LevelTreshold } from '../../constants/Levels'
 import ProfileIcons, { IProfileIcon } from '../../constants/ProfileIcons'
 import User from '../../types/User'
 
@@ -62,7 +63,7 @@ const Podium = ({ players }: { players: Partial<User>[] }) => {
           {players[0].experiencePoints} XP
         </Text>
         <Text align="center">
-          Level {Math.floor(players[0].experiencePoints! / 50 + 1)}
+          Level {Math.floor(players[0].experiencePoints! / LevelTreshold + 1)}
         </Text>
       </Grid.Col>
       <Grid.Col span={4}>
@@ -80,7 +81,7 @@ const Podium = ({ players }: { players: Partial<User>[] }) => {
           {players[1].experiencePoints} XP
         </Text>
         <Text align="center">
-          Level {Math.floor(players[1].experiencePoints! / 50 + 1)}
+          Level {Math.floor(players[1].experiencePoints! / LevelTreshold + 1)}
         </Text>
       </Grid.Col>
       <Grid.Col span={4} className={classes.first}></Grid.Col>
@@ -97,7 +98,7 @@ const Podium = ({ players }: { players: Partial<User>[] }) => {
         </Text>
 
         <Text align="center">
-          Level {Math.floor(players[2].experiencePoints! / 50 + 1)}
+          Level {Math.floor(players[2].experiencePoints! / LevelTreshold + 1)}
         </Text>
       </Grid.Col>
       <Grid.Col span={4} className={classes.secondth}></Grid.Col>

components/profile/ExperiencePointsBar.tsx

@@ -1,5 +1,5 @@
 import { Progress, Stack, Text, Image } from '@mantine/core'
-import Levels, { ILevels } from '../../constants/Levels'
+import Levels, { ILevels, LevelTreshold } from '../../constants/Levels'
 
 const ExperiencePointsBar = ({
   experiencePoints,
@@ -8,24 +8,26 @@ const ExperiencePointsBar = ({
 }) => {
   // Calculate level (+1 so that first level is level 1)
   /* 
-    Level 1 -> 0 to 49 XP
-    Level 2 -> 50 to 99 XP
-    Level 3 -> 100 to 149 XP
+    Level 1 -> 0 to 99 XP
+    Level 2 -> 100 to 199 XP
+    Level 3 -> 200 to 299 XP
     ...
   */
 
-  const level = Math.floor(experiencePoints / 50 + 1)
+  const level = Math.floor(experiencePoints / LevelTreshold + 1)
 
   // Find levelName for that level
   const levelList: ILevels = Levels
   const levelName: string = levelList[level]
 
   // Remaining XP to next level (will be a number between 1 and 50)
-  const remainingXP = level * 50 - experiencePoints
+  const remainingXP = level * LevelTreshold - experiencePoints
 
   // Percent to next level, used in progress bar
   let percentNextLevel =
-    remainingXP === 50 ? 0 : Math.round(100 - (remainingXP / 50) * 100)
+    remainingXP === LevelTreshold
+      ? 0
+      : Math.round(100 - (remainingXP / LevelTreshold) * 100)
 
   return (
     <div style={{ display: 'flex', gap: '15px', paddingBottom: '2%' }}>

constants/Levels.ts

@@ -2,6 +2,8 @@ export interface ILevels {
   [key: number]: string
 }
 
+export const LevelTreshold: number = 100
+
 const Levels = {
   1: 'Beginner',
   2: 'Word Warrior',
@@ -10,7 +12,7 @@ const Levels = {
   5: 'Scrabble star',
   6: 'Crossword Crusader',
   7: 'Word Wizard',
-  8: 'Word Champion',
+  8: 'Brain Champion',
   9: 'Puzzle Pro',
   10: 'Letter Genius',
   11: 'Word Master',
@@ -29,6 +31,80 @@ const Levels = {
   24: 'Puzzle Royal',
   25: 'Scrabble Supreme',
   26: 'Crossword Champion',
+  27: 'Word Weaver',
+  28: 'Alpha Bet',
+  29: 'Spellbound',
+  30: 'Letter Ladder',
+  31: 'Wordplay',
+  32: 'Vocab Venture',
+  33: 'Brain Booster',
+  34: 'Linguistic League',
+  35: 'Lexicon League',
+  36: 'Verbal Victory',
+  37: 'Language Labyrinth',
+  38: 'Word Wiz',
+  39: 'Alphabet Alley',
+  40: 'Mind Meld',
+  41: 'Spelling Sprint',
+  42: 'Letter Lock',
+  43: 'Word Wangle',
+  44: 'Vocab Voyage',
+  45: 'Dictionary Dash',
+  46: 'Syntax Shuffle',
+  47: 'Linguistic Lunge',
+  48: 'Lexical Lasso',
+  49: 'Word War',
+  50: 'Grammar Games',
+  51: 'Alphabet Assault',
+  52: 'Mind Mania',
+  53: 'Spelling Showdown',
+  54: 'Letter Leap',
+  55: 'Word Whizzing',
+  56: 'Vocab Vault',
+  57: 'Dictionary Duel',
+  58: 'Syntax Saga',
+  59: 'Linguistic Lineup',
+  60: 'Lexical Limelight',
+  61: 'Word Wrestling',
+  62: 'Grammar Genius',
+  63: 'Alphabet Adventure',
+  64: 'Mind Marathon',
+  65: 'Spelling Spectacle',
+  66: 'Letter Launch',
+  67: 'Word Wonder',
+  68: 'Vocab Vortex',
+  69: 'Dictionary Duelist',
+  70: 'Syntax Scramble',
+  71: 'Linguistic Labyrinth',
+  72: 'Lexical Legend',
+  73: 'Grammar Guru',
+  74: 'Alphabet Acrobatics',
+  75: 'Mind Mastery',
+  76: 'Spelling Smackdown',
+  77: 'Letter Lift',
+  78: 'Word Whirlwind',
+  79: 'Vowel Victory',
+  80: 'Word Warp',
+  81: 'Alpha Achiever',
+  82: 'Spelling Savant',
+  83: 'Letter Labyrinth',
+  84: 'Word Whiz Kid',
+  85: 'Puzzle Perfection',
+  86: 'Vocab Vandal',
+  87: 'Brain Busting Battle',
+  88: 'Linguistic Laser',
+  89: 'Word Wanderlust',
+  90: 'Lexicon Liberator',
+  91: 'Letter Lockdown',
+  92: 'Verbal Volley',
+  93: 'Language Legend',
+  94: 'Mind Meltdown',
+  95: 'Spelling Sensation',
+  96: 'Royal Word Wizard',
+  97: 'Queen of Words',
+  98: 'Champion of LetterLink',
+  99: 'King of LetterLink',
+  100: 'LetterLink Legend',
 }
 
 export default Levels