fix(ui): assortment of ui improvements (#283)

closes #282 #279 #278 #277 ### Description Bundled a few ui bugs into this one: > General - [x] Arrow should be same height as typography - [x] Make buttons hovering render a pointer instead of normal cursor > About page - [x] Add link to Obscura word - [x] Remove paragraph about about credits: "While playing ... every 24hs..." on about page > How to play page - [x] Change "Results Invalidated" for "0 Points" - [x] Leaderboard section - [x] Scores in each round make up a players total score - [x] Ranks are based on total scores - [x] Players Profiles section: - [x] Anon players are ineligible for leaderboard positions - [x] Profiles are created by connecting your wallet --------- Co-authored-by: Marius Sili <[email protected]>
Kryha · Feb 7, 2024 · fa7aa0f · fa7aa0f
1 parent 337f78b
commit fa7aa0f
Show file tree

Hide file tree

Showing 15 changed files with 45 additions and 60 deletions.
diff --git a/src/assets/icons/menu-button-select.svg b/src/assets/icons/menu-button-select.svg
diff --git a/src/assets/text/about.ts b/src/assets/text/about.ts
@@ -5,8 +5,7 @@ export const about = {
     `And where do we fit in? We're the BotBusters, making sure that thin line between real and artificial remains strong. We hunt down and bust rogue AI's to better protect the net.`,
     `Enter the BotBuster Program. It's a game that feeds questions into a chatroom. The kind of questions that humans like you and I can answer, but still trip up those nasty AI.`,
     `Stay sharp. Each conversation is a clever dance of wits and gut feelings, separating genuine human interactions from sly AI tricks. These bots will say anything to convince you they're the real deal.`,
-    `BotBusters is built by Kryha Labs on the zero-knowledge network Aleo using real privacy-preserving technology with zPass that can prove who's a real human without revealing their secrets to anyone. We can't even see it.`,
-    `While playing, you can earn points based on how well you do. Every day, the top BotBusters players with the most points will receive Aleo Credits, and this bounty resets every 24 hours.`,
+    `BotBusters is built by Kryha Labs, using Obscura, on the zero-knowledge network Aleo using real privacy-preserving technology with zPass that can prove who's a real human without revealing their secrets to anyone. Not even we can see them.`,
     `Plus, if you're into creating your own zk solutions, you'll be happy to know BotBusters is open source. You're free to use and modify everything we've made for your own projects.`,
     `Happy hunting, recruit.`,
   ],
@@ -15,4 +14,5 @@ export const wordsToLinkAbout: Record<string, string> = {
   "Kryha Labs": "https://kryha.io",
   Aleo: "https://aleo.org",
   zPass: "https://zpass.aleo.org/",
+  Obscura: "htpps://https://obscura.build/",
 };
diff --git a/src/assets/text/homepage.ts b/src/assets/text/homepage.ts
@@ -2,11 +2,9 @@ export const homepage = {
   appName: "BotBuster Game",
   startNewGame: "Start new game",
   continueGame: "Continue game",
-  openDaily: "Daily leaderboard",
+  openDaily: "Leaderboard",
   descriptionPart1: "Who's a bot?, Who's a human?",
-  descriptionPart2:
-    "The daily top 100 gets Aleo credits transferred to their wallets. Start playing now!",
-  topRankedTitle: "Daily top 10 earn Aleo Credits",
+  topRankedTitle: "Top 10",
   topRanked: (position: number, username: string, score: number) =>
     ` / ${position + 1}. ${username} ${score}`,
   points: "pts",

diff --git a/src/assets/text/how-to-play.ts b/src/assets/text/how-to-play.ts
@@ -1,9 +1,8 @@
-// TODO: add missing links
 export const howToPlay = {
   headings: {
     howToPlay: "how to play",
     pointsAndPenalties: "points and penalties",
-    dailyLeaderboard: "daily leaderboard",
+    leaderboard: "leaderboard",
     playerProfiles: "player profiles",
   },
   main: [
@@ -46,22 +45,21 @@ export const howToPlay = {
     },
     {
       regular: "No messages sent or no selection submitted: ",
-      highlight: "Results invalidated.",
+      highlight: "0 points.",
     },
     {
       regular:
         "Hidden achievements grant additional points. You'll have to keep playing to find them all.",
       highlight: "",
     },
   ],
-  dailyLeaderboard: [
-    "Ranks are based on daily total scores.",
-    "Aleo credits are awarded to top 10 players automatically when the leaderboard resets.",
-    "Leaderboard resets daily at 00:00 PST.",
+  leaderboard: [
+    "Ranks are based on total scores.",
+    "Scores in each round make up a players total score",
   ],
   playerProfiles: [
     {
-      regular: "Anon players are ineligible for leaderboard/credits.",
+      regular: "Anonymous players are ineligible for leaderboard position.",
       highlight: "",
       link: "",
     },
@@ -70,17 +68,10 @@ export const howToPlay = {
       highlight: "connecting your wallet.",
       link: "",
     },
-    {
-      regular:
-        "KYC (Know Your Customer) process required for credit eligibility via ",
-      highlight: "zPass.",
-      link: "https://zpass.aleo.org/",
-    },
   ],
   link: {
     connectingYourWallet: {
       text: "connecting your wallet.",
-      link: "",
     },
   },
 } as const;
diff --git a/src/components/bullet-point/styles.ts b/src/components/bullet-point/styles.ts
@@ -11,7 +11,7 @@ export const styles = {
   },
   transformPointToBullet: {
     width: "20px",
-    transform: "scale(3) translate(-3px, -5px)",
+    transform: "scale(3) translate(-3px, -4px)",
   },
   text: {
     lineHeight: "35px",

diff --git a/src/components/input-field/styles.ts b/src/components/input-field/styles.ts
@@ -20,7 +20,7 @@ export const styles = {
     width: "60vw",
     "& > button": {
       border: "none",
-      minWidth: "150px",
+      minWidth: "200px",
       gap: 0,
       pl: 0,
     },
@@ -34,7 +34,7 @@ export const styles = {
     "& > button": {
       color: theme.palette.error.main,
       border: "none",
-      minWidth: "150px",
+      minWidth: "200px",
       gap: 0,
       pl: 0,
     },

diff --git a/src/components/player-profiles/player-profiles.tsx b/src/components/player-profiles/player-profiles.tsx
@@ -1,11 +1,11 @@
 import React, { type FC } from "react";
 import { Typography } from "@mui/material";
+import { useRouter } from "next/router";
 
 import { text } from "~/assets/text/index.js";
 import { BulletPoint } from "~/components/index.js";
 import { theme } from "~/styles/theme.js";
-import { useRouter } from "next/router";
-import { pages } from "~/router";
+import { pages } from "~/router.js";
 
 const sectionContent = text.howToPlay.playerProfiles;
 
@@ -36,17 +36,5 @@ export const PlayerProfiles: FC = () => {
         </a>
       </Typography>
     </BulletPoint>,
-    <BulletPoint key="playerProfile3">
-      <Typography variant="body1">
-        {sectionContent[2].regular}
-        <a
-          href={sectionContent[2].link}
-          style={{ color: theme.palette.secondary.main }}
-          target="_blank"
-        >
-          {sectionContent[2].highlight}
-        </a>
-      </Typography>
-    </BulletPoint>,
   ];
 };
diff --git a/src/components/primary-button/primary-button.tsx b/src/components/primary-button/primary-button.tsx
@@ -19,7 +19,7 @@ const PrimaryButtonStyle = styled(Button)({
   justifyContent: "center",
   textAlign: "center",
   gap: 48,
-  width: "320px",
+  minWidth: "320px",
   fontSize: "24px",
   padding: "24px 24px",
   lineHeight: "normal",

diff --git a/src/components/top-ranked/styles.ts b/src/components/top-ranked/styles.ts
@@ -1,4 +1,6 @@
 import { type SxProps } from "@mui/material";
+import { theme } from "~/styles/index.js";
+import { zIndex } from "~/styles/z-index.js";
 
 export const styles = {
   container: {
@@ -8,8 +10,7 @@ export const styles = {
     height: 62,
     flexDirection: "row",
     alignItems: "center",
-    // TODO: Add color to theme
-    backgroundColor: "#FE1BEF",
+    backgroundColor: theme.palette.pink.main,
   },
   points: {
     fontSize: "60%",
@@ -31,9 +32,13 @@ export const styles = {
     animationDelay: "10s",
   },
   title: {
-    ml: 2,
+    pl: 4,
+    pr: 6,
     textTransform: "uppercase",
     whiteSpace: "nowrap",
+    color: theme.palette.common.black,
+    background: theme.palette.pink.main,
+    zIndex: zIndex.front,
   },
   text: {
     ml: 2,

diff --git a/src/components/top-ranked/top-ranked.tsx b/src/components/top-ranked/top-ranked.tsx
@@ -6,6 +6,7 @@ import { type TopRankedPlayer } from "~/types/index.js";
 
 import { styles } from "./styles.js";
 import { theme } from "~/styles/theme.js";
+// import { api } from "~/utils/api.js";
 
 interface Props {
   players: TopRankedPlayer[];
@@ -14,17 +15,20 @@ interface Props {
 export const TopRanked: FC<Props> = ({ players }) => {
   const animationStyles = [styles.topRankedBanner1, styles.topRankedBanner2];
 
+  // TODO: integrate with db instead of fake data prop
+  // const getRankedUsers = api.user.getRankedUsers.useQuery(
+  //   {
+  //     limit: 10,
+  //   },
+  // );
+
   return (
     <Stack sx={styles.container}>
+      <Typography variant="subtitle1" sx={styles.title}>
+        {text.homepage.topRankedTitle}
+      </Typography>
       {animationStyles.map((sx, index) => (
         <Stack sx={{ ...styles.textContainer, ...sx }} key={index}>
-          <Typography
-            variant="subtitle1"
-            sx={styles.title}
-            color={theme.palette.common.black}
-          >
-            {text.homepage.topRankedTitle}
-          </Typography>
           {players.map(({ username, score }, index) => (
             <Typography
               variant="subtitle2"

diff --git a/src/pages/how-to-play.tsx b/src/pages/how-to-play.tsx
@@ -23,7 +23,7 @@ const HowToPlay: FC = () => {
         {pageContent.main[1]}
       </Typography>
 
-      <Stack sx={{ ...styles.section, ml: "-50px" }}>
+      <Stack sx={{ ...styles.section, ml: "-90px" }}>
         <GameRules />
       </Stack>
 
@@ -35,10 +35,10 @@ const HowToPlay: FC = () => {
       </Stack>
 
       <Typography variant="h1" sx={styles.heading}>
-        {pageContent.headings.dailyLeaderboard}
+        {pageContent.headings.leaderboard}
       </Typography>
       <Stack sx={styles.section}>
-        {pageContent.dailyLeaderboard.map((content, idx) => (
+        {pageContent.leaderboard.map((content, idx) => (
           <BulletPoint key={"leaderboard" + idx} text={content} />
         ))}
       </Stack>

diff --git a/src/pages/player-profile.tsx b/src/pages/player-profile.tsx
@@ -37,9 +37,6 @@ const PlayerProfile = () => {
             <Typography variant="body1">
               {text.playerProfile.createProfile}
             </Typography>
-            <Typography variant="body1">
-              {text.playerProfile.top10ReceiveCredits}
-            </Typography>
           </Stack>
 
           <PrimaryButton

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -10,6 +10,10 @@ a {
   text-decoration: underline;
 }
 
+button {
+  cursor: pointer;
+}
+
 /* Animations */
 
 @keyframes infinite_text_primary {

diff --git a/src/styles/pages/how-to-play.ts b/src/styles/pages/how-to-play.ts
@@ -13,6 +13,7 @@ export const styles = {
   section: {
     pt: "70px",
     pb: "100px",
+    width: "100%",
   },
   heading: {
     textTransform: "uppercase",

diff --git a/src/types/achievements.ts b/src/types/achievements.ts
@@ -1,9 +1,6 @@
 import { z } from "zod";
 import { userAchievementsSchema } from "~/server/db/schema.js";
-import {
-  matchRoomSchema,
-  playerSchema,
-} from "./match.js";
+import { matchRoomSchema, playerSchema } from "./match.js";
 
 export const achievementDataSchema = z.object({
   player: playerSchema,