feat: profile page

gaowanlu · May 25, 2024 · 9419890 · 9419890
1 parent 7c0770a
commit 9419890
Show file tree

Hide file tree

Showing 11 changed files with 307 additions and 108 deletions.
diff --git a/public/assets/map.json b/public/assets/map.json
diff --git a/public/assets/地图.tiled-session b/public/assets/地图.tiled-session
@@ -3,7 +3,7 @@
         "height": 4300,
         "width": 2
     },
-    "activeFile": "",
+    "activeFile": "地图.tmx",
     "expandedProjectPaths": [
         "."
     ],
@@ -48,15 +48,15 @@
             "expandedObjectLayers": [
                 7
             ],
-            "scale": 0.5,
+            "scale": 0.75,
             "selectedLayer": 3,
             "viewCenter": {
-                "x": 1063,
-                "y": 815
+                "x": 811.3333333333333,
+                "y": 526
             }
         },
         "地图.tmx#terrain_atlas": {
-            "scaleInDock": 0.33
+            "scaleInDock": 0.75
         }
     },
     "last.exportedFilePath": "C:/Users/gaowanlu/Desktop/MyProject/thub/public/assets",

diff --git a/public/assets/地图.tmx b/public/assets/地图.tmx
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import { Route, Routes } from "react-router-dom";
 import "./index.css";
 import SuspensePage from "./pages/SuspensePage";
 import HomePage from "./pages/HomePage";
+import ProfilePage from "./pages/ProfilePage";
 
 const GamePage = React.lazy(() => import("./pages/GamePage"));
 
@@ -12,6 +13,7 @@ function App() {
             <Suspense fallback={<SuspensePage />}>
                 <Routes>
                     <Route path="/game" element={<GamePage />} />
+                    <Route path="/profile" element={<ProfilePage />} />
                     <Route index path="*" element={<HomePage />} />
                 </Routes>
             </Suspense>

diff --git a/src/components/MyAppBar.jsx b/src/components/MyAppBar.jsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import { AppBar, Toolbar } from '@mui/material';
+import styled from 'styled-components';
+import { Link, useNavigate } from 'react-router-dom';
+
+const MyAppBar = () => {
+    const navigate = useNavigate();
+
+    const handleButtonClick = () => {
+        navigate('/');
+    };
+
+    return (<MyAppBarC position="static">
+        <MyToolbar>
+            <Logo>
+                <div onClick={handleButtonClick}>Avant</div>
+            </Logo>
+            <Center>
+                <Link to='/game'>Game</Link>
+                <Link to='/profile'>Profile</Link>
+            </Center>
+            <Right></Right>
+        </MyToolbar>
+    </MyAppBarC >);
+};
+
+
+const MyToolbar = styled(Toolbar)`
+    display: flex;
+    align-items: center;
+`;
+
+const MyAppBarC = styled(AppBar)`
+    height: 4rem;
+`;
+
+const Logo = styled.div`
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+    &:hover {
+        color: pink;
+    }
+    /* background-color: red; */
+    height: 100%;
+    cursor: pointer;
+    font-size: 1.3rem;
+`;
+
+const Center = styled.div`
+    display: flex;
+    align-items: center;
+    /* background-color: blue; */
+    height: 4rem;
+    a{
+        text-decoration: none;
+        color: #ffffff;
+        margin-left: 1rem;
+        &:hover {
+            color: pink;
+        }
+    }
+    padding-left: 3rem;
+`;
+
+const Right = styled.div`
+    display: flex;
+    align-items: center;
+    /* background-color: yellow; */
+`;
+
+export default MyAppBar;
diff --git a/src/components/MyFooter.jsx b/src/components/MyFooter.jsx
@@ -3,8 +3,8 @@ 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"}>
+        <Container sx={{ height: "15rem", display: "flex", alignItems: "end", justifyContent: "center" }} >
+            <Typography sx={{ height: "5rem" }} variant="body1" align='center' color={"grey"}>
                 Copyright © 2023-2024 tubekit. All rights reserved.
             </Typography>
         </Container>

diff --git a/src/index.css b/src/index.css
@@ -12,7 +12,7 @@ body {
 }
 
 :root {
-  --color-primary: #156c99;
+  --color-primary: #186d97;
   --color-bg-grey: rgb(249, 249, 249);
   --color-bg-white: #ffffff;
   --color-bg-dark: rgba(0, 0, 0, 0.856);

diff --git a/src/index.js b/src/index.js
@@ -6,6 +6,7 @@ import reportWebVitals from './reportWebVitals';
 import { HashRouter } from "react-router-dom";
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
 root.render(
   <React.StrictMode>
     <HashRouter>

diff --git a/src/pages/GamePage.jsx b/src/pages/GamePage.jsx
@@ -1,10 +1,11 @@
 import Phaser from "phaser";
 import React, { useState } from 'react';
-import { AppBar, Toolbar, Typography } from '@mui/material';
+import { 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 MyAppBar from "../components/MyAppBar";
 
 import { useEffect } from 'react';
 import WS from "../ws/WS";
@@ -14,7 +15,7 @@ import { createTheme } from '@mui/material/styles';
 const theme = createTheme({
     palette: {
         primary: {
-            main: '#3131b1e3', // Your desired primary color
+            main: 'rgba(59,130,246,.9)', // Your desired primary color
         },
     },
 });
@@ -124,9 +125,14 @@ function GamePage() {
             console.log(event);
         };
         WS.message = (event) => {
-            //console.log(event);
-            MessageQueue.push(JSON.parse(event.data));
-            //console.log(MessageQueue);
+            try {
+                let newJsonData = JSON.parse(event.data);
+                //console.log(event);
+                MessageQueue.push(newJsonData);
+                //console.log(MessageQueue);
+            } catch (err) {
+                console.error(err);
+            }
         };
         WS.error = (event) => {
             console.log(event);
@@ -531,11 +537,7 @@ function GamePage() {
     }, []);//仅在组件挂载时运行
     return (
         <ThemeProvider theme={theme}>
-            <MyAppBar position="static">
-                <Toolbar>
-                    <Typography sx={{ color: "#ffffff" }}><b>TUBEKIT</b></Typography>
-                </Toolbar>
-            </MyAppBar>
+            <MyAppBar />
             <MyContainer>
                 <p>{pingText}</p>
                 <Typography id="phaser-game-container" align="center"></Typography>
@@ -546,9 +548,6 @@ function GamePage() {
     );
 }
 
-const MyAppBar = styled(AppBar)`
-`;
-
 const MyContainer = styled.div`
     border-radius: 0.5rem;
     width: 100%;

diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
@@ -1,31 +1,27 @@
 import React from 'react';
-import { AppBar, Toolbar, Typography, Container, Button } from '@mui/material';
+import { 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';
+import MyAppBar from './../components/MyAppBar';
 
 const theme = createTheme({
     palette: {
         primary: {
-            main: '#3131b1e3', // Your desired primary color
+            main: 'rgba(59,130,246,.9)', // Your desired primary color
         },
     },
 });
 
-
 function HomePage() {
     return (
         <ThemeProvider theme={theme}>
-            <div>
-                <MyAppBar position="static">
-                    <Toolbar>
-                        <Typography sx={{ color: "#ffffff" }}><b>TUBEKIT</b></Typography>
-                    </Toolbar>
-                </MyAppBar>
+            <CenterDiv >
+                <MyAppBar />
                 <MyContainer>
                     <Typography color={"white"} variant="h4" align="center" height={100}>
                         HELLO TUBEKIT
@@ -41,16 +37,20 @@ function HomePage() {
                 </MyContainer>
                 <LabelBottomNavigation />
                 <Footer />
-            </div>
+            </CenterDiv>
         </ThemeProvider >
     );
 }
 
-const MyAppBar = styled(AppBar)`
+const CenterDiv = styled.div`
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
 `;
 
 const MyContainer = styled(Container)`
     min-height: 100vh;
+    min-width: 80vw;
     background-image: url(${require('../assets/web_home_bg.png')});
     background-size: cover;
     background-repeat: no-repeat;

diff --git a/src/pages/ProfilePage.jsx b/src/pages/ProfilePage.jsx
@@ -0,0 +1,47 @@
+import { createTheme } from '@mui/material/styles';
+import MyAppBar from './../components/MyAppBar';
+import styled from 'styled-components';
+import Footer from "../components/MyFooter";
+import { ThemeProvider } from '@mui/material/styles';
+import { Typography, Container } from '@mui/material';
+
+const theme = createTheme({
+    palette: {
+        primary: {
+            main: 'rgba(59,130,246,.9)', // Your desired primary color
+        },
+    },
+});
+
+function ProfilePage() {
+    return (
+        <ThemeProvider theme={theme}>
+            <CenterDiv >
+                <MyAppBar />
+                <MyContainer>
+                    <Typography color={"black"} variant="h4" align="center" height={100}>
+                        Vanlu Gao
+                    </Typography>
+                </MyContainer>
+                <Footer />
+            </CenterDiv>
+        </ThemeProvider >
+    );
+}
+
+const CenterDiv = styled.div`
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+`;
+
+const MyContainer = styled(Container)`
+    min-height: 100vh;
+    min-width: 80vw;
+    padding: 4rem;
+    margin-top: 1rem;
+    border-radius: 0.5rem;
+    background-color: #eeeeee;
+`;
+
+export default ProfilePage;