💄 randomize empty emojis

dxanh97 · Oct 14, 2024 · 2598916 · 2598916
1 parent aaf79e6
commit 2598916
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 10 deletions.
diff --git a/src/components/game-screen/Leaderboard.tsx b/src/components/game-screen/Leaderboard.tsx
@@ -144,7 +144,6 @@ function Leaderboard(props: Props) {
     </ScrollArea>
   ) : (
     <Empty
-      emoji="🏜️"
       subTitle={
         <>
           Thêm <b>{3 - rounds.length}</b> ván nữa đê

diff --git a/src/components/game-screen/RoundsList.tsx b/src/components/game-screen/RoundsList.tsx
@@ -59,7 +59,7 @@ function RoundsList(props: Props) {
 
   return (
     <ScrollArea>
-      {rounds.length === 0 && <Empty emoji="🃏" subTitle="Chưa có ván nào" />}
+      {rounds.length === 0 && <Empty subTitle="Chưa có ván nào" />}
 
       {rounds.map((round, i) => {
         const { id, stats, timestamp } = round;

diff --git a/src/components/shared/Empty.tsx b/src/components/shared/Empty.tsx
@@ -1,17 +1,20 @@
 import { Box, Text } from '@mantine/core';
 
+const emojis = ['👀', '🫥', '🏜️', '🏝️', '💤', '🥱', '🗿', '📂', '🃏', '📜'];
+
 interface Props {
-  emoji: string;
   title?: string;
   subTitle?: React.ReactNode;
 }
 
 function Empty(props: Props) {
-  const { emoji, title = 'Trống quắc', subTitle } = props;
+  const { title = 'Trống quắc', subTitle } = props;
 
   return (
     <Box ta="center" py="150px">
-      <Text fz="100px">{emoji}</Text>
+      <Text fz="100px">
+        {emojis[Math.floor(Math.random() * emojis.length)]}
+      </Text>
       <Text fz="h3" fw={500}>
         {title}
       </Text>

diff --git a/src/index.tsx b/src/index.tsx
@@ -46,10 +46,7 @@ root.render(
           <Container p="sm" pos="relative">
             <BrowserRouter>
               <Routes>
-                <Route
-                  path="/"
-                  element={null} // layout component
-                >
+                <Route path="/">
                   <Route index element={<HomePage />} />
                   <Route path="/new-game" element={<NewGamePage />} />
                   <Route path="/game/:gameId" element={<GameScreenPage />} />

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -36,7 +36,7 @@ function HomePage() {
     <Box>
       <TopNav isHome title="Sải Nhà Cố" />
 
-      {allGames.length === 0 && <Empty emoji="👀" subTitle="Tạo game mới đê" />}
+      {allGames.length === 0 && <Empty subTitle="Tạo game mới đê" />}
       {allGames.map((x) => (
         <Card key={x.id} shadow="sm" p="xs" mt="sm" radius="md" withBorder>
           <Group justify="space-between">