MauMau/MauMau-Client
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4 from MauMauStudios/developmaunt

Browse Source 
Developmaunt
This commit is contained in:
Jordan Geurtsen
2023-04-07 12:12:01 +02:00
committed by GitHub
parent dce716c3d8 13f57c435e
commit 9b7bcaf0c8
4 changed files with 18 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@@ -5,10 +5,10 @@
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="MauMau!"/> <meta name="description" content="Mau-Mau!"/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Mau Mau</title> <title>Mau-Mau</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

15
src/layout/pages/MainLobby.tsx
View File

@@ -1,34 +1,33 @@
import React from "react"; import React from "react";
import useTitle from "../../utils/hooks/TitleHook"; import useTitle from "../../utils/hooks/TitleHook";
import Card from "../components/Card"; import Card from "../components/Card";
import {useNavigate} from "react-router";
const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`; const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
const MainLobby = () => { const MainLobby = () => {
useTitle('MauLobby'); useTitle('Mau-Mau Lobby');
const navigateTo = useNavigate();
const handleCreateRoom = () => { const handleCreateRoom = () => {
fetch(ROOM_URL, { fetch(ROOM_URL, {
method: 'POST', method: 'POST',
}).then(r => r.json()).then(data => { }).then(r => r.json()).then(data => {
window.location.href = `/room/${data}`; navigateTo(`/room/${data}`)
}); });
} }
const gotoRooms = () => {
window.location.href = '/rooms';
}
return ( return (
<div className={"main-lobby"}> <div className={"main-lobby"}>
<h1 className={"main-lobby__title mau"}>MauMau</h1> <h1 className={"main-lobby__title mau"}>Mau-Mau</h1>
<div className={"main-lobby__container"}> <div className={"main-lobby__container"}>
<div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}> <div className={"main-lobby__container-button clickable"} onClick={handleCreateRoom}>
<h2 className={"mau"}>Host Game</h2> <h2 className={"mau"}>Host Game</h2>
<Card cardString={'SPADES ACE'} isClickable/> <Card cardString={'SPADES ACE'} isClickable/>
</div> </div>
<div className={"main-lobby__container-button clickable"} onClick={gotoRooms}> <div className={"main-lobby__container-button clickable"} onClick={() => navigateTo('/rooms')}>
<h2 className={"mau"}>Join Game</h2> <h2 className={"mau"}>Join Game</h2>
<Card cardString={'SPADES ACE'} isHidden isClickable/> <Card cardString={'SPADES ACE'} isHidden isClickable/>
</div> </div>

6
src/layout/pages/Room.tsx
View File

@@ -1,6 +1,6 @@
import useWebSocket from "react-use-websocket"; import useWebSocket from "react-use-websocket";
import React from "react"; import React from "react";
import {useParams} from "react-router"; import {useNavigate, useParams} from "react-router";
import {GHButton} from "../components/Button"; import {GHButton} from "../components/Button";
import useTitle from "../../utils/hooks/TitleHook"; import useTitle from "../../utils/hooks/TitleHook";
import Hand from "../components/Hand"; import Hand from "../components/Hand";
@@ -18,6 +18,8 @@ const Room = () => {
useTitle('Mau!'); useTitle('Mau!');
const navigateTo = useNavigate();
const {roomId} = useParams(); const {roomId} = useParams();
const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`; const WS_URL = `ws://${process.env.REACT_APP_API_URL}/room/${roomId}`;
@@ -43,7 +45,7 @@ const Room = () => {
const handleLeaveRoom = () => { const handleLeaveRoom = () => {
const socket = websocket.getWebSocket(); const socket = websocket.getWebSocket();
if (socket) socket.close(); if (socket) socket.close();
window.location.href = '/'; navigateTo('/');
} }
const handleCardSend = (card: string) => { const handleCardSend = (card: string) => {

8
src/layout/pages/Rooms.tsx
View File

@@ -1,12 +1,13 @@
import useTitle from "../../utils/hooks/TitleHook"; import useTitle from "../../utils/hooks/TitleHook";
import React from "react"; import React from "react";
import {Link} from "react-router-dom"; import {useNavigate} from "react-router";
const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`; const ROOM_URL = `http://${process.env.REACT_APP_API_URL}/room`;
const Rooms = () => { const Rooms = () => {
useTitle('Rooms'); useTitle('Mau-Mau Rooms');
const navigateTo = useNavigate();
const [rooms, setRooms] = React.useState<string[]>([]); const [rooms, setRooms] = React.useState<string[]>([]);
@@ -22,7 +23,8 @@ const Rooms = () => {
<ul> <ul>
{ {
rooms.map((room, index) => { rooms.map((room, index) => {
return <li key={index}><Link to={`room/${room}`}>{room}</Link></li> return <li key={index} className={"clickable"}
onClick={() => navigateTo(`/room/${room}`)}>{room}</li>
}) })
} }
</ul> </ul>