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

Back-end update and new styling #4

Merged
DTieman merged 2 commits from quality-rewrite into developmaunt 2024-05-25 20:59:49 +00:00
Conversation 0 Commits 2 Files Changed 31 +49 -48
8 changed files with 49 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4ae1538552 - Show all commits

16
src/layout/components/Card.tsx
View File

@@ -1,13 +1,13 @@
import React, {FunctionComponent} from "react";
import {NoButton} from "./Button";
interface Props {
cardString: string;
handleClick?: (cardString: string) => void;
isHidden?: boolean;
isClickable?: boolean;
}
const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isClickable}) => {
const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden}) => {
const cardType = cardString.split(' ')[0].toLowerCase();
const cardValue = cardString.split(' ')[1].toLowerCase();
@@ -30,9 +30,17 @@ const Card: FunctionComponent<Props> = ({cardString, handleClick, isHidden, isCl
}
}
if (handleClick) {
return (
<div className={`card ${isClickable && 'card-clickable'}`}>
<img className="card__texture" src={cardSource()} alt={cardName} onClick={handleCardClick}/>
<NoButton className={"card"} onClick={handleCardClick}>
<img className="card__texture" src={cardSource()} alt={cardName}/>
</NoButton>
)
}
return (
<div className={"card"}>
<img className="card__texture" src={cardSource()} alt={cardName}/>
</div>
)
}

4
src/layout/components/Deck.tsx
View File

@@ -15,12 +15,10 @@ const Deck: FunctionComponent<Props> = ({currentCard, actionOnClick}) => {
return (
<div className="deck-container">
<div className="used-cards">
<p></p>
<Card cardString={currentCard}/>
</div>
<div className="deck">
<p></p>
<Card cardString={"AA BB"} handleClick={handleClick} isHidden isClickable/>
<Card cardString={"AA BB"} handleClick={handleClick} isHidden/>
</div>
</div>
);

14
src/layout/components/Game.tsx
View File

@@ -2,11 +2,11 @@ import React, {FunctionComponent} from "react";
import Deck from "./Deck";
import Hand from "./Hand";
import {GHButton} from "./Button";
import {GameAction, Player} from "../pages/Room";
import {Player, SocketMessage} from "../pages/Room";
export interface GameState {
Me: Player;
CurrentState: string;
MyState: string;
Hand: string[];
CurrentCard: string;
CurrentPlayer: Player;
@@ -15,7 +15,7 @@ export interface GameState {
interface Props {
gameState: GameState
handleGameAction: (action: GameAction) => void;
handleGameAction: (message: SocketMessage) => void;
}
const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
@@ -23,15 +23,15 @@ const CHOICES = ['SPADES', 'HEARTS', 'DIAMONDS', 'CLUBS'];
const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
const handleChoice = (choice: string) => {
handleGameAction({Action: 'CHOOSE', Data: choice});
handleGameAction({Type: 'CHOOSE', Data: choice});
}
const handleDraw = () => {
handleGameAction({Action: 'DRAW', Data: ""});
handleGameAction({Type: 'DRAW', Data: ""});
}
const handleCardSend = (cardString: string) => {
handleGameAction({Action: "PLAYCARD", Data: JSON.stringify({
handleGameAction({Type: "PLAY", Data: JSON.stringify({
CardType: cardString.split(' ')[0],
CardValue: cardString.split(' ')[1]
})})
@@ -70,7 +70,7 @@ const Game: FunctionComponent<Props> = ({gameState, handleGameAction}) => {
<Hand hand={gameState.Hand} actionOnClick={handleCardSend}/>
}
{
gameState.CurrentState === 'CHOOSE' &&
gameState.MyState === 'CHOOSE' &&
CHOICES.map(choice => <GHButton key={choice} onClick={() => handleChoice(choice)}>{choice}</GHButton>)
}
</div>

13
src/layout/components/Hand.tsx
View File

@@ -3,25 +3,24 @@ import Card from "./Card";
interface Props {
hand: string[];
actionOnClick: (cardString: string) => void;
actionOnClick?: (cardString: string) => void;
isHidden?: boolean;
}
const Hand: FunctionComponent<Props> = ({hand, actionOnClick, isHidden}) => {
const isMyHand = !isHidden;
return (
<div className="hand">
<ul className="hand">
{
hand.map((card, index) => {
return (
<Card key={index} cardString={card} handleClick={actionOnClick} isHidden={!isMyHand}
isClickable={isMyHand}/>
<li key={card} className={"hand__item"}>
<Card cardString={card} handleClick={actionOnClick} isHidden={isHidden}/>
</li>
)
})
}
</div>
</ul>
)
}

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

@@ -37,11 +37,11 @@ const MainLobby = () => {
<div className={"main-lobby__container"}>
<NoButton className={"main-lobby__container-button"} onClick={handleCreateRoom}>
<h2 className={"mau"}>Host Game</h2>
<Card cardString={'SPADES ACE'} isClickable/>
<Card cardString={'SPADES ACE'}/>
</NoButton>
<NoButton className={"main-lobby__container-button"} onClick={() => navigateTo('/rooms')}>
<h2 className={"mau"}>Join Game</h2>
<Card cardString={'SPADES ACE'} isHidden isClickable/>
<Card cardString={'SPADES ACE'} isHidden/>
</NoButton>
</div>
</div>

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

@@ -13,14 +13,13 @@ export interface Player {
CardsLeft: number;
}
interface SocketMessage {
export interface SocketMessage {
Type: string;
Payload: any;
Data: string;
}
export interface GameAction {
Action: string;
Data: string;
interface JoinLeaveMessage {
ChatMessage: string;
}
const Room = () => {
@@ -35,7 +34,6 @@ const Room = () => {
const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`;
const [gameState, setGameState] = React.useState<GameState | undefined>(undefined);
const [lobbyState, setLobbyState] = React.useState<string>("");
const [winner, setWinner] = React.useState<string | undefined>(undefined);
const chatRef = React.useRef<HTMLOListElement>(null);
@@ -59,15 +57,11 @@ const Room = () => {
onOpen: () => {
console.log('WebSocket connection established.');
},
onMessage: (event) => {
const data = JSON.parse(event.data);
const payload = JSON.parse(data.Payload);
onMessage: (messageEvent) => {
const data: SocketMessage = JSON.parse(messageEvent.data);
const payload = JSON.parse(data.Data);
switch (data.Type) {
case 'LOBBY':
setLobbyState(data.Type);
break;
case 'GAME':
setLobbyState(data.Type);
setGameState(payload);
break;
case 'CHAT':
@@ -77,6 +71,12 @@ const Room = () => {
setWinner(payload.Name)
setGameState(undefined);
break;
case "JOIN":
addChatMessage({Sender: "System", Message: (JSON.parse(data.Data) as JoinLeaveMessage).ChatMessage});
break;
case "LEAVE":
addChatMessage({Sender: "System", Message: (JSON.parse(data.Data) as JoinLeaveMessage).ChatMessage});
break;
default:
console.log('Unknown message type:', data.Type);
}
@@ -91,18 +91,14 @@ const Room = () => {
websocket.sendMessage(JSON.stringify(message));
}
const handleGameAction = (action: GameAction) => {
handleSend({Type: "GAME", Payload: JSON.stringify(action)});
}
const handleLobbyAction = (action: string) => {
handleSend({Type: "LOBBY", Payload: JSON.stringify(action)});
handleSend({Type: "LOBBY", Data: JSON.stringify(action)});
}
const handleChatMessage = (chatMessage: string) => {
handleSend({
Type: "CHAT",
Payload: chatMessage
Data: chatMessage
});
}
@@ -130,8 +126,8 @@ const Room = () => {
<main className={"room-main"}>
{
gameState ?
<Game gameState={gameState} handleGameAction={handleGameAction}/>
: lobbyState === 'LOBBY' &&
<Game gameState={gameState} handleGameAction={handleSend}/>
:
<Lobby winner={winner} handleLobbyAction={handleLobbyAction}/>
}
</main>

4
src/styles/layout/components/card.scss
View File

@@ -2,10 +2,6 @@
width: 100px;
min-width: 100px;
&-clickable {
cursor: pointer;
}
&__texture {
width: 100%;
height: 100%;

4
src/styles/layout/components/hand.scss
View File

@@ -5,4 +5,8 @@
overflow-x: scroll;
padding: 0.5rem;
gap: 0.5rem;
&__item {
list-style: none;
}
}