update page

src/App.js

@@ -1,6 +1,6 @@
 import React, { Suspense } from "react";
 import { Route, Routes } from "react-router-dom";
-import "./App.css";
+import "./index.css";
 import SuspensePage from "./pages/SuspensePage";
 import HomePage from "./pages/HomePage";
 

src/components/LabelBottomNavigation.jsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import FolderIcon from '@mui/icons-material/Folder';
+import RestoreIcon from '@mui/icons-material/Restore';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import styled from "styled-components";
+
+export default function LabelBottomNavigation() {
+    const [value, setValue] = React.useState('recents');
+
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
+    return (
+        <MyNavigation sx={{ display: 'none' }} value={value} onChange={handleChange}>
+            <BottomNavigationAction
+                label="recents"
+                value="recents"
+                icon={<RestoreIcon />}
+            />
+            <BottomNavigationAction
+                label="favorites"
+                value="favorites"
+                icon={<FavoriteIcon />}
+            />
+            <BottomNavigationAction
+                label="nearby"
+                value="nearby"
+                icon={<LocationOnIcon />}
+            />
+            <BottomNavigationAction label="folder" value="folder" icon={<FolderIcon />} />
+        </MyNavigation>
+    );
+}
+
+const MyNavigation = styled(BottomNavigation)`
+    height: 4rem;
+`;

src/components/MyFooter.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Typography, Container } from '@mui/material';
+
+const Footer = () => {
+    return (
+        <Container sx={{ height: "8rem", display: "flex", alignItems: "center", justifyContent: "center" }} >
+            <Typography variant="body1" align='center' color={"grey"}>
+                Copyright © 2023-2024 tubekit. All rights reserved.
+            </Typography>
+        </Container>
+    );
+};
+
+export default Footer;

src/index.css

@@ -12,13 +12,13 @@ body {
 }
 
 :root {
-  --color-primary: #ff5252;
+  --color-primary: #156c99;
   --color-bg-grey: rgb(249, 249, 249);
   --color-bg-white: #ffffff;
   --color-bg-dark: rgba(0, 0, 0, 0.856);
-  --color-text-grey: #6e6e73;
-  --color-text-default: #1d1d1f;
-  --color-text-white: #f5f5f7;
+  --color-text-grey: #3131b1e3;
+  --color-text-default: #4343d8;
+  --color-text-white: #46ec99;
   --box-shadow: 0px 0px 1px 1px #eeeeee;
   /* 动画 */
   --animate-duration: 0.5s !important;

src/index.js

@@ -3,14 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { BrowserRouter } from "react-router-dom";
+import { HashRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <BrowserRouter>
+    <HashRouter>
       <App />
-    </BrowserRouter>
+    </HashRouter>
   </React.StrictMode>
 );
 

src/pages/GamePage.jsx

@@ -1,7 +1,24 @@
 import Phaser from "phaser";
+import React from 'react';
+import { AppBar, Toolbar, Typography } from '@mui/material';
+import LabelBottomNavigation from '../components/LabelBottomNavigation';
+import styled from "styled-components";
+import Footer from "../components/MyFooter";
+import { ThemeProvider } from '@mui/material/styles';
+
 import { useEffect } from 'react';
 import WS from "../ws/WS";
 //import Protocol from "./protocol/Protocol";
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    palette: {
+        primary: {
+            main: '#3131b1e3', // Your desired primary color
+        },
+    },
+});
+
 
 let platforms;
 let player;
@@ -74,6 +91,7 @@ function GamePage() {
             type: Phaser.AUTO,
             width: WIDTH,
             height: HEIGHT,
+            parent: 'phaser-game-container',
             //backgroundColor: "#ffffff",
             physics: {
                 default: 'arcade',
@@ -460,8 +478,29 @@ function GamePage() {
 
     }, []);//仅在组件挂载时运行
     return (
-        <div id="phaser-game-container"></div>
+        <ThemeProvider theme={theme}>
+            <MyAppBar position="static">
+                <Toolbar>
+                    <Typography sx={{ color: "#ffffff" }}><b>TUBEKIT</b></Typography>
+                </Toolbar>
+            </MyAppBar>
+            <MyContainer>
+                <Typography id="phaser-game-container" align="center"></Typography>
+            </MyContainer>
+            <LabelBottomNavigation />
+            <Footer />
+        </ThemeProvider >
     );
 }
 
+const MyAppBar = styled(AppBar)`
+`;
+
+const MyContainer = styled.div`
+    border-radius: 0.5rem;
+    width: 100%;
+    margin-top: 1rem;
+`;
+
+
 export default GamePage;

src/pages/HomePage.jsx

@@ -1,28 +1,64 @@
 import React from 'react';
 import { AppBar, Toolbar, Typography, Container, Button } from '@mui/material';
 import { Link } from 'react-router-dom';
+import LabelBottomNavigation from '../components/LabelBottomNavigation';
+import styled from "styled-components";
+import Footer from "../components/MyFooter";
+import { ThemeProvider } from '@mui/material/styles';
+
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+    palette: {
+        primary: {
+            main: '#3131b1e3', // Your desired primary color
+        },
+    },
+});
+
 
 function HomePage() {
     return (
-        <div>
-            <AppBar position="static">
-                <Toolbar>
-                    <Typography variant="h6"><b>ThubGames</b></Typography>
-                </Toolbar>
-            </AppBar>
-            <Container>
-                <Typography variant="h4" align="center" mt={4} height={100}>
-                    welcome thub
-                </Typography>
-                <Typography variant="body1" align="center" mt={2} height={100}>
-                    explore thub game world together ！
-                </Typography>
-                <Button component={Link} to="/game" variant="contained" color="primary" fullWidth mt={4}>
-                    Get Start
-                </Button>
-            </Container>
-        </div>
+        <ThemeProvider theme={theme}>
+            <div>
+                <MyAppBar position="static">
+                    <Toolbar>
+                        <Typography sx={{ color: "#ffffff" }}><b>TUBEKIT</b></Typography>
+                    </Toolbar>
+                </MyAppBar>
+                <MyContainer>
+                    <Typography color={"white"} variant="h4" align="center" height={100}>
+                        HELLO TUBEKIT
+                    </Typography>
+                    <Typography color={"white"} align="center" height={100}>
+                        To explore the game world together！
+                    </Typography>
+                    <Typography align="center">
+                        <Button component={Link} to="/game" variant="contained" color="primary" mt={4}>
+                            Get Start
+                        </Button>
+                    </Typography>
+                </MyContainer>
+                <LabelBottomNavigation />
+                <Footer />
+            </div>
+        </ThemeProvider >
     );
 }
 
+const MyAppBar = styled(AppBar)`
+`;
+
+const MyContainer = styled(Container)`
+    min-height: 100vh;
+    background-image: url(${require('../assets/web_home_bg.png')});
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+    padding: 4rem;
+    margin-top: 1rem;
+    border-radius: 0.5rem;
+`;
+
+
 export default HomePage;