Add placeholders for Basic & Advanced Slots and Big Six

src/components/App.js

@@ -1,20 +1,23 @@
 import { Route, Routes } from "react-router-dom";
 
 import { Layout } from "./Layout";
-
 import { Home } from "./Home";
+
+import { AdvancedSlots } from "./advanced-slots/AdvancedSlots";
+import { Baccarat } from "./baccarat/Baccarat";
+import { BasicSlots } from "./basic-slots/BasicSlots";
+import { BigSix } from "./big-six/BigSix";
+import { Blackjack } from "./blackjack/Blackjack";
 import { ChuckALuck } from "./chuck-a-luck/ChuckALuck";
-import { ThreeCardPoker } from "./three-card-poker/ThreeCardPoker";
-import { Roulette } from "./roulette/Roulette";
+import { CoinFlip } from "./coin-flip/CoinFlip";
+import { DiamondMiner } from "./diamond-miner/DiamondMiner";
+import { GiftTree } from "./gift-tree/GiftTree";
+import { Keno } from "./keno/Keno";
 import { NewRoulette } from "./new-roulette/NewRoulette";
+import { Roulette } from "./roulette/Roulette";
 import { SicBo } from "./sic-bo/SicBo";
-import { Blackjack } from "./blackjack/Blackjack";
-import { Baccarat } from "./baccarat/Baccarat";
-import { Keno } from "./keno/Keno";
 import { SpacePoker } from "./space-poker/SpacePoker";
-import { DiamondMiner } from "./diamond-miner/DiamondMiner";
-import { GiftTree } from "./gift-tree/GiftTree";
-import { CoinFlip } from "./coin-flip/CoinFlip";
+import { ThreeCardPoker } from "./three-card-poker/ThreeCardPoker";
 
 import { Balances } from "./balances/Balances";
 
@@ -27,18 +30,21 @@ export function App() {
         <Routes>
             <Route path="/" element={elementInLayout(<Home />)} />
 
+            <Route path="/advanced-slots" element={elementInLayout(<AdvancedSlots />)} />
+            <Route path="/baccarat" element={elementInLayout(<Baccarat />)} />
+            <Route path="/basic-slots" element={elementInLayout(<BasicSlots />)} />
+            <Route path="/big-six" element={elementInLayout(<BigSix />)} />
+            <Route path="/blackjack" element={elementInLayout(<Blackjack />)} />
             <Route path="/chuck-a-luck" element={elementInLayout(<ChuckALuck />)} />
-            <Route path="/three-card-poker" element={elementInLayout(<ThreeCardPoker />)} />
-            <Route path="/roulette" element={elementInLayout(<Roulette playerAddress={FIRST_PLAYER_ADDRESS} />)} />
+            <Route path="/coin-flip" element={elementInLayout(<CoinFlip />)} />
+            <Route path="/diamond-miner" element={elementInLayout(<DiamondMiner />)} />
+            <Route path="/gift-tree" element={elementInLayout(<GiftTree />)} />
+            <Route path="/keno" element={elementInLayout(<Keno />)} />
             <Route path="/new-roulette" element={elementInLayout(<NewRoulette />)} />
+            <Route path="/roulette" element={elementInLayout(<Roulette playerAddress={FIRST_PLAYER_ADDRESS} />)} />
             <Route path="/sic-bo" element={elementInLayout(<SicBo />)} />
-            <Route path="/blackjack" element={elementInLayout(<Blackjack />)} />
-            <Route path="/baccarat" element={elementInLayout(<Baccarat />)} />
-            <Route path="/keno" element={elementInLayout(<Keno />)} />
             <Route path="/space-poker" element={elementInLayout(<SpacePoker />)} />
-            <Route path="/diamond-miner" element={elementInLayout(<DiamondMiner />)} />
-            <Route path="/gift-tree" element={elementInLayout(<GiftTree />)} />
-            <Route path="/coin-flip" element={elementInLayout(<CoinFlip />)} />
+            <Route path="/three-card-poker" element={elementInLayout(<ThreeCardPoker />)} />
 
             <Route path="/balances" element={elementInLayout(<Balances />)} />
         </Routes>

src/components/Home.js

@@ -15,14 +15,17 @@ export const Home = () => {
         <div style={containerStyle}>
             {
                 [
-                    ['Chuck-A-Luck', 'https://placehold.co/220x140', '/chuck-a-luck'],
-                    ['Three Card Poker', 'https://placehold.co/220x140', '/three-card-poker'],
                     ['Roulette', 'https://placehold.co/220x140', '/roulette'],
                     ['New Roulette', 'https://placehold.co/220x140', '/new-roulette'],
                     ['Sic Bo', 'https://placehold.co/220x140', '/sic-bo'],
+                    ['Three Card Poker', 'https://placehold.co/220x140', '/three-card-poker'],
+                    ['Chuck-A-Luck', 'https://placehold.co/220x140', '/chuck-a-luck'],
                     ['Blackjack', 'https://placehold.co/220x140', '/blackjack'],
-                    ['Baccarat', 'https://placehold.co/220x140', '/baccarat'],
+                    ['Big Six', 'https://placehold.co/220x140', '/big-six'],
                     ['Keno', 'https://placehold.co/220x140', '/keno'],
+                    ['Basic Slots', 'https://placehold.co/220x140', '/basic-slots'],
+                    ['Advanced Slots', 'https://placehold.co/220x140', '/advanced-slots'],
+                    ['Baccarat', 'https://placehold.co/220x140', '/baccarat'],
                     ['Space Poker', 'https://placehold.co/220x140', '/space-poker'],
                     ['Diamond Miner', 'https://placehold.co/220x140', '/diamond-miner'],
                     ['Gift Tree', 'https://placehold.co/220x140', '/gift-tree'],

src/components/advanced-slots/AdvancedSlots.jsx

@@ -0,0 +1,13 @@
+export function AdvancedSlots() {
+    return (
+        <div
+            style={{
+                width: 1440,
+                height: 1024,
+                outline: '1px solid red',
+            }}
+        >
+            ADVANCED SLOTS
+        </div>
+    );
+}

src/components/basic-slots/BasicSlots.jsx

@@ -0,0 +1,13 @@
+export function BasicSlots() {
+    return (
+        <div
+            style={{
+                width: 1440,
+                height: 1024,
+                outline: '1px solid red',
+            }}
+        >
+            BASIC SLOTS
+        </div>
+    );
+}

src/components/big-six/BigSix.jsx

@@ -0,0 +1,13 @@
+export function BigSix() {
+    return (
+        <div
+            style={{
+                width: 1440,
+                height: 1024,
+                outline: '1px solid red',
+            }}
+        >
+            BIG SIX
+        </div>
+    );
+}