Merge pull request #5 from Weminal-labs/feat/#4-GamePage

Feat/#4 game page
Weminal-labs · Sep 14, 2024 · b95db2f · b95db2f
2 parents f5d4bd8 + e7c52dd
commit b95db2f
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 63 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -27,6 +27,7 @@ function App() {
  <Route path="/" element={<HomeMobile />} />
  </Route>
  </Route>
+ <Route path="/create-account" element={<CreateAccount />} />
  <Route path="/auth" element={<AuthLayout />}>
  <Route path="login" element={<LoginPage />} />
  </Route>

diff --git a/src/components/MobileDevice/PlayGame/PlayGame.tsx b/src/components/MobileDevice/PlayGame/PlayGame.tsx
@@ -8,22 +8,19 @@ const PlayGame: React.FC = () => {
 
  useEffect(() => {
  if (isLoaded) {
- setLoadGame(true);
+ setLoadGame(false);
  }
  }, [isLoaded]);
 
  return (
  <>
- {loadGame && (
- <Modal
- open={true}
- aria-labelledby="modal-modal-title"
- aria-describedby="modal-modal-description"
- >
- <UnityGameComponent />
- </Modal>
- )}
- hello
+ {!loadGame ? (
+ <div className="h-full w-full">
+ <UnityGameComponent />
+ </div>
+ ) : (
+ <p>Loading...</p>
+ )}
  </>
  );
 };

diff --git a/src/components/MobileDevice/homeMobile/HomeMobile.tsx b/src/components/MobileDevice/homeMobile/HomeMobile.tsx
@@ -2,14 +2,14 @@ import { MdOutlineShoppingCart } from "react-icons/md";
 import PixelCustom from "../../buttons/PixelCustom";
 import { FaRegClock } from "react-icons/fa";
 import { FaKey } from "react-icons/fa";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 
 const HomeMobile = () => {
  const navigate = useNavigate();
 
  return (
- <div className="mx-auto flex h-[90vh] w-full max-w-screen-sm flex-col items-center px-8">
- <div className="flex w-full flex-grow flex-col py-16 text-white justify-center">
+ <div className="mx-auto flex h-full w-full max-w-screen-sm flex-col items-center px-8">
+ <div className="flex w-full flex-grow flex-col justify-center py-16 text-white">
  {/* game */}
  <div className="relative aspect-video w-full border-2 border-black p-4">
  <img
@@ -19,9 +19,12 @@ const HomeMobile = () => {
  <div className="relative z-10 flex h-full w-full flex-col justify-between">
  <div className="w-full text-2xl">Map: 01</div>
  <div className="flex w-full justify-end">
- <button className="border-2 border-white px-10 py-2 text-2xl hover:bg-white">
+ <Link
+ to="/playGame"
+ className="border-2 border-white px-10 py-2 text-2xl hover:bg-white"
+ >
  Play
- </button>
+ </Link>
  </div>
  </div>
  </div>
@@ -34,7 +37,10 @@ const HomeMobile = () => {
  <h1 className="text-2xl">marketplace</h1>
  </div>
  <PixelCustom>
- <button className="w-32 bg-white text-2xl text-black" onClick={() => navigate("/marketplace")}>
+ <button
+ className="w-32 bg-white text-2xl text-black"
+ onClick={() => navigate("/marketplace")}
+ >
  Open
  </button>
  </PixelCustom>

diff --git a/src/components/MobileDevice/layoutMobile/Layout.tsx b/src/components/MobileDevice/layoutMobile/Layout.tsx
@@ -8,7 +8,7 @@ const LayoutContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
- height: 100vh;
+ height: 100svh;
  background: radial-gradient(
  72.4% 40.52% at 50% 50%,
  rgba(255, 255, 255, 0) 0%,
@@ -31,7 +31,6 @@ const SideBarWrapper = styled.div`
 
 const HeaderWrapper = styled.div`
  grid-column: span 12;
- grid-row: span 12;
 `;
 
 const Layout = () => {

diff --git a/src/components/MobileDevice/marketplace/Marketplace.tsx b/src/components/MobileDevice/marketplace/Marketplace.tsx
@@ -26,7 +26,7 @@ const Marketplace = () => {
  return (
  <div className="mx-auto flex h-[100vh] w-full max-w-screen-sm flex-col items-center pt-20 ">
  <div className="w-full h-full bg-[#C48D5D] rounded-t-2xl p-10 text-white">
- <div className=" text-xl" onClick={() => navigate("/")}>
+ <div className=" text-xl cursor-pointer" onClick={() => navigate("/")}>
  Back
  </div>
  <h1 className="text-3xl text-center mb-5">Marketplace</h1>

diff --git a/src/components/layout/Header/MobileHeader.tsx b/src/components/layout/Header/MobileHeader.tsx
@@ -8,7 +8,7 @@ const MobileHeader = () => {
  const [address, setAddress] = useState(localStorage.getItem("address") ?? "");
 
  return (
- <header className="flex w-full flex-row items-center justify-between py-4">
+ <header className="flex w-full flex-row items-center justify-between py-4 px-4">
  <div className="flex flex-1 justify-center">
  <h2 className="font-vt323 flex items-center space-x-2 text-6xl text-white">
  <ContentCopy onClick={() => navigator.clipboard.writeText(address)} />

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
@@ -12,12 +12,12 @@ const items = [
 
 const SideBar = () => {
  return (
- <div className="flex w-full justify-between px-5 pb-10">
+ <div className="flex w-full justify-between px-5 py-10">
  {items.map((item, index) => {
  return (
  <div key={index}>
- <PixelCustom className="pixel-button-white flex w-24 justify-center py-3">
- <NavLink to={item.to} className="text-xl text-white">
+ <PixelCustom className="pixel-button-white flex justify-center">
+ <NavLink to={item.to} className="text-xl text-white !w-20 text-center py-3">
  {item.text}
  </NavLink>
  </PixelCustom>

diff --git a/src/contexts/UnityGameProvider.tsx b/src/contexts/UnityGameProvider.tsx
@@ -1,6 +1,18 @@
-import { Account, Aptos, AptosConfig, Ed25519PrivateKey, Network } from "@aptos-labs/ts-sdk";
-import React, { createContext, useState, useEffect, ReactNode, useCallback } from "react";
-import {useUnityContext} from "react-unity-webgl";
+import {
+ Account,
+ Aptos,
+ AptosConfig,
+ Ed25519PrivateKey,
+ Network,
+} from "@aptos-labs/ts-sdk";
+import React, {
+ createContext,
+ useState,
+ useEffect,
+ ReactNode,
+ useCallback,
+} from "react";
+import { useUnityContext } from "react-unity-webgl";
 import { MODULE_ADDRESS } from "../utils/Var";
 import { Compare } from "../utils/CompareAddress";
 import { useAlert } from "./AlertProvider";
@@ -16,17 +28,18 @@ interface GameProviderProps {
 // roomId: string;
 // userId: string;
 // }
-export const UnityGameProvider: React.FC<GameProviderProps> = ({children}) => {
- const { isLoaded, unityProvider} = useUnityContext({
+export const UnityGameProvider: React.FC<GameProviderProps> = ({
+ children,
+}) => {
+ const { isLoaded, unityProvider } = useUnityContext({
  loaderUrl: "build/Build/Build.loader.js",
  dataUrl: "build/Build/Build.data",
  frameworkUrl: "build/Build/Build.framework.js",
  codeUrl: "build/Build/Build.wasm",
  });
 
+ console.log("game loaded?", isLoaded);
 
- console.log('game loaded?', isLoaded)
-
  // const [show, setShow] = useState(false);
  // const handleUnload = async () => {
  // await unload();
@@ -48,12 +61,12 @@ export const UnityGameProvider: React.FC<GameProviderProps> = ({children}) => {
 
  // try {
  // const transaction = await aptos.transaction.build.simple({
- // sender: accountAddress, 
+ // sender: accountAddress,
  // data: {
  // function: FUNCTION_NAME,
  // functionArguments: [
  // roomId,
- // winner, 
+ // winner,
  // ],
  // },
  // });
@@ -71,7 +84,7 @@ export const UnityGameProvider: React.FC<GameProviderProps> = ({children}) => {
 
  // // Log the executed transaction
  // console.log("Executed Transaction:", executedTransaction);
- // const alertContent = 
+ // const alertContent =
  // <>
  // Transaction:{" "}
  // <a
@@ -82,9 +95,8 @@ export const UnityGameProvider: React.FC<GameProviderProps> = ({children}) => {
  // {executedTransaction.hash}
  // </a>
  // </>
-
-
- // setAlert(alertContent, "success"); 
+
+ // setAlert(alertContent, "success");
  // } catch (error) {
  // // @ts-ignore
 
@@ -94,14 +106,13 @@ export const UnityGameProvider: React.FC<GameProviderProps> = ({children}) => {
  // };
 
  // const handleUnityApplicationQuit = useCallback(() => {
- // unload(); 
+ // unload();
  // }, []);
 
  // const handleUnityApplicationFinish = useCallback((jsonData: any) => {
  // const data: PickWinner = JSON.parse(jsonData);
  // const address = localStorage.getItem("address")
 
-
  // if(Compare(data.userId,address!,5)){
  // console.log("Data received from Unity on quit:", data.userId);
  // pickWinnerByRoomId(Number(data.roomId),data.userId)

diff --git a/src/hooks/useUnityGame.tsx b/src/hooks/useUnityGame.tsx
@@ -7,34 +7,14 @@ import { Box } from "@mui/material";
 export const useUnityGame = () => useContext(UnityGameContext);
 
 const UnityGame = styled(Unity)`
- border-radius: 12px;
- width: 300px;
- height: 200px;
+ width: 100%;
+ height: 100%;
 `;
 
 const UnityGameComponent = forwardRef((props, ref) => {
  const { unityProvider } = useUnityGame();
 
- return (
- <Box sx={style}>
- <UnityGame unityProvider={unityProvider} />
- </Box>
- );
+ return <UnityGame unityProvider={unityProvider} />;
 });
 
-const style = {
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- position: "absolute",
- top: "50%",
- left: "50%",
- transform: "translate(-50%, -50%)",
- width: "70%",
- height: "75%",
- bgcolor: "background.paper",
- boxShadow: 24,
- p: 3,
-};
-
-export default UnityGameComponent;
+export default UnityGameComponent;