Add guest mode to enable website usage without a wallet; switch docke…

…r-compose to standard images
DGross245 · Jul 23, 2024 · 3103dfd · 3103dfd
1 parent 5658647
commit 3103dfd
Show file tree

Hide file tree

Showing 14 changed files with 136 additions and 118 deletions.
diff --git a/.env.example b/.env.example
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -2,7 +2,7 @@ version: '3.7'
 services:
   elasticsearch:
     container_name: elasticsearch
-    image: docker.elastic.co/elasticsearch/elasticsearch:8.12.2-arm64
+    image: docker.elastic.co/elasticsearch/elasticsearch:8.12.2
     volumes:
       - ./elasticsearch/elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml
     environment:
@@ -29,7 +29,7 @@ services:
 
   logstash:
     container_name: logstash
-    image: docker.elastic.co/logstash/logstash:8.12.2-arm64
+    image: docker.elastic.co/logstash/logstash:8.12.2
     volumes:
       - ./logstash/pipeline:/usr/share/logstash/pipeline
       - ./logstash/logstash.yml:/usr/share/logstash/config/logstash.yml
@@ -43,7 +43,7 @@ services:
 
   kibana:
     container_name: kibana
-    image: docker.elastic.co/kibana/kibana:8.12.2-arm64
+    image: docker.elastic.co/kibana/kibana:8.12.2
     volumes:
       - ./kibana/kibana.yml:/usr/share/kibana/config/kibana.yml
       - ./ssl:/usr/share/kibana/config/ssl
@@ -87,4 +87,4 @@ services:
       - lognet
 
 networks:
-  lognet:
+  lognet:
diff --git a/frontend/app/[lang]/guestProvider.tsx b/frontend/app/[lang]/guestProvider.tsx
@@ -0,0 +1,24 @@
+
+import React, { createContext, useState } from 'react';
+import { ProvidersProps } from './providers';
+
+interface GuestContextvalue {
+	updateData: (guest: boolean) => void,
+	isGuest: boolean
+}
+
+const guestContext = createContext({} as GuestContextvalue);
+
+export function GuestProvider({ children }: ProvidersProps) {
+  const [isGuest, setIsGuest] = useState(false);
+
+  const updateData = (guest: boolean) => setIsGuest(guest);
+
+  return (
+    <guestContext.Provider value={{ isGuest, updateData }}>
+      {children}
+    </guestContext.Provider>
+  );
+}
+
+export default guestContext;
diff --git a/frontend/app/[lang]/modals/SelectionModal.tsx b/frontend/app/[lang]/modals/SelectionModal.tsx
@@ -4,7 +4,7 @@ import ModalButton from "./components/ModalButton";
 import pongGameImage from "@/assets/pongGame.png";
 import ticTacToeImage from "@/assets/tttGame.png";
 import BackButton from "./components/BackButton";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import styles from "./Modals.module.css";
 import Image from "next/image";
 import clsx from "clsx";
@@ -19,6 +19,7 @@ import { useWeb3ModalAccount } from "@web3modal/ethers5/react";
 import { useKey } from "@/components/hooks/useKey";
 import { useTranslation } from "@/app/i18n";
 import LoadingButton from "./components/LoadingButton";
+import guestContext from "../guestProvider";
 
 /* -------------------------------------------------------------------------- */
 /*                                  Interface                                 */
@@ -529,6 +530,7 @@ const SelectionModal: React.FC<SelectionModalProps> = ({ setGameID, wsclient, is
 	const router = useRouter();
 	const { onJoinQueue } = useJoinEvents(wsclient);
 	const tkey = useKey(['T', 't']);
+	const { isGuest } = useContext(guestContext);
 
 	useEffect(() => {
 		if (!isOpen) {
@@ -614,7 +616,7 @@ const SelectionModal: React.FC<SelectionModalProps> = ({ setGameID, wsclient, is
 						</div>
 					</ModalBody>
 					<ModalFooter className={clsx("flex justify-center", {"opacity-0": loading})}>
-						<ModalButton onClick={onButtonClick}>{modalData[selected].button}</ModalButton>
+						<ModalButton isDisabled={selected !== 'custom-games' && isGuest} onClick={onButtonClick}>{modalData[selected].button}</ModalButton>
 					</ModalFooter>
 				</>)}
 				{openSubModal && selected == "tournament-modes" && <TournamentContent wsclient={wsclient} tournamentState={tournamentState} setGameOptions={setGameOptions} gameType={gameType} closeMain={onClose} onClose={() => setOpenSubModal(false)}/>}

diff --git a/frontend/app/[lang]/page.tsx b/frontend/app/[lang]/page.tsx
@@ -1,35 +1,21 @@
 "use client";
 
-import { useState } from "react";
+import { useContext, useState } from "react";
 
 import { WalletScene } from "./walletScene";
+import guestContext from "./guestProvider";
 
 /* -------------------------------------------------------------------------- */
 /*                                  Component                                 */
 /* -------------------------------------------------------------------------- */
 
 export default function Home() {
 	const [game, setGame] = useState("HOME");
-	// const { isConnected } = useWeb3ModalAccount();
-
-	// if (game === "Pong" && isConnected) {
-	// 	return (
-	// 		<section className="flex-col items-center justify-center h-full" hidden={game !== "Pong"}>
-	// 			<Pong />
-	// 		</section>
-	// 	);
-	// } 
-	// else if (game === "TTT" && isConnected) {
-	// 	return (
-	// 		<section className="flex-col items-center justify-center h-full" hidden={game !== "TTT"}>
-	// 			<TicTacToe />
-	// 		</section>
-	// 	);
-	// }
+	const { isGuest, updateData } = useContext(guestContext);
 
 	return (
 		<section className="flex-col items-center justify-center h-full">
-			<WalletScene setGame={setGame} />
+			<WalletScene setGame={setGame} isGuest={isGuest} updateData={updateData} />
 		</section>
 	);
 }
diff --git a/frontend/app/[lang]/pong/page.tsx b/frontend/app/[lang]/pong/page.tsx
@@ -5,10 +5,11 @@ import { PongSocket } from "./context/PongSockets";
 import OneForAllScene from "./scene/OneForAllScene";
 import { useRouter } from "next/navigation";
 import PongScene from "./scene/PongScene";
-import { useEffect, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import SelectionModal, { GameOptions } from "../modals/SelectionModal";
 import { useWeb3ModalAccount } from "@web3modal/ethers5/react";
 import { WSClientType } from "@/helpers/wsclient";
+import guestContext from "../guestProvider";
 
 export default function PongPage() {
 	const [wsclient, setWsclient] = useState<WSClientType | null>(null);
@@ -18,12 +19,13 @@ export default function PongPage() {
 	const [gameID, setGameID] = useState("-1");
 	const { isConnected } = useWeb3ModalAccount();
 	const router = useRouter();
+	const { isGuest } = useContext(guestContext);
 
 	useEffect(() => {
-		if (!isConnected) {
+		if (!isGuest && !isConnected) {
 			router.replace('/');
 		}
-	}, [isConnected, router]);
+	}, [isConnected, router, isGuest]);
 
 	return (
 		<div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>

diff --git a/frontend/app/[lang]/providers.tsx b/frontend/app/[lang]/providers.tsx
@@ -1,10 +1,9 @@
 "use client";
 
-import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react';
 import { NextUIProvider } from "@nextui-org/system";
 import { useRouter } from 'next/navigation';
-import { siteConfig } from "@/config/site";
 import Web3ModalProvider from './web3modal';
+import { GuestProvider } from "./guestProvider";
 
 /* -------------------------------------------------------------------------- */
 /*                                  Interface                                 */
@@ -22,9 +21,11 @@ export function Providers({ children }: ProvidersProps) {
 
 	return (
 		<NextUIProvider navigate={router.push} className="h-screen">
-				<Web3ModalProvider>
-				{children}
-		</Web3ModalProvider>
-			</NextUIProvider>
+			<Web3ModalProvider>
+				<GuestProvider>
+					{children}
+				</GuestProvider>
+			</Web3ModalProvider>
+	  	</NextUIProvider>
 	);
 }
diff --git a/frontend/app/[lang]/tic-tac-toe/page.tsx b/frontend/app/[lang]/tic-tac-toe/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 
 import SelectionModal, { GameOptions } from '../modals/SelectionModal';
 import { GameState } from './context/TTTGameState';
@@ -9,6 +9,7 @@ import TTTScene from './scene/TTTScene';
 import { useWeb3ModalAccount } from '@web3modal/ethers5/react';
 import { useRouter } from 'next/navigation';
 import { WSClientType } from '@/helpers/wsclient';
+import guestContext from '../guestProvider';
 
 export default function TicTacToePage() {
 	const [wsclient, setWsclient] = useState<WSClientType | null>(null);
@@ -18,12 +19,13 @@ export default function TicTacToePage() {
 	const { isConnected } = useWeb3ModalAccount();
 	const router = useRouter();
 	const [gameID, setGameID] = useState("-1");
+	const { isGuest } = useContext(guestContext);
 
 	useEffect(() => {
-		if (!isConnected) {
+		if (!isGuest && !isConnected) {
 			router.replace('/');
 		}
-	}, [isConnected, router]);
+	}, [isConnected, router, isGuest]);
 
 	return (
 		<div style={{ width: '100%', height: '100%', position: 'relative', overflow: 'hidden' }}>

diff --git a/frontend/app/[lang]/walletScene.tsx b/frontend/app/[lang]/walletScene.tsx
@@ -10,7 +10,7 @@ import { useWindow } from "@/components/hooks/useWindow";
 import pongGameImage from "@/assets/pongGame.png";
 import tttGameImage from "@/assets/tttGame.png";
 import { useWeb3ModalAccount } from "@web3modal/ethers5/react";
-import { Card, CardBody, CardHeader } from "@nextui-org/react";
+import { Button, Card, CardBody, CardHeader } from "@nextui-org/react";
 import Image, { StaticImageData } from "next/image";
 import { useRouter } from "next/navigation";
 
@@ -50,16 +50,19 @@ const Text = ({leftTitle, rightTitle}: TextProps) => {
 
 interface WalletSceneProps {
 	setGame: React.Dispatch<React.SetStateAction<string>>;
+	updateData: (guest: boolean) => void;
+	isGuest: boolean;
 }
 
 interface GameCardProps {
 	title: string;
 	image: StaticImageData;
 	path: string;
 	setGame: () => void;
+	isGuest: boolean;
 }
 
-export const GameCard: React.FC<GameCardProps> = ({title, image, path, setGame}) => {
+export const GameCard: React.FC<GameCardProps> = ({title, image, isGuest, path, setGame}) => {
 	const router = useRouter();
 
 	const handleClick = () => {
@@ -85,17 +88,20 @@ export const GameCard: React.FC<GameCardProps> = ({title, image, path, setGame})
 	);
 }
 
-export const WalletScene: React.FC<WalletSceneProps> = ({ setGame }) => {
+export const WalletScene: React.FC<WalletSceneProps> = ({ setGame, isGuest, updateData }) => {
 	const [connected, setConnected] = useState(false);
 	const { dimensions } = useWindow();
 	const { t } = useTranslation("common");
 	const { isConnected } = useWeb3ModalAccount();
 
 	useEffect(() => {
 		setConnected(isConnected);
-	}, [isConnected]);
+		if (isConnected) {
+			updateData(false);
+		}
+	}, [isConnected, updateData]);
 
-	if (!connected) {
+	if (!isGuest && !connected) {
 		return (
 			<div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
 				<Canvas style={{ width: dimensions.width, height: dimensions.height }}>
@@ -105,6 +111,11 @@ export const WalletScene: React.FC<WalletSceneProps> = ({ setGame }) => {
 					<Text leftTitle={t("ready_to_play")} rightTitle={t("connect_wallet")} />
 					<gridHelper position={[0, -1, 0]} args={[200, 200]} />
 				</Canvas>
+				<div style={{ position: 'absolute', bottom: '180px', display: 'flex', justifyContent: 'center', width: '100%' }}>
+					 <Button onClick={() => updateData(true)}>
+						Guest
+					</Button>
+				</div>
 			</div>
 		)
 	}
@@ -120,12 +131,14 @@ export const WalletScene: React.FC<WalletSceneProps> = ({ setGame }) => {
 					image={tttGameImage}
 					setGame={() => setGame('TTT')}
 					path="/tic-tac-toe"
+					isGuest={isGuest}
 				/>
 				<GameCard
 					title={t('pong')}
 					image={pongGameImage}
 					setGame={() => setGame('Pong')}
 					path="/pong"
+					isGuest={isGuest}
 				/>
 			</div>
 		</div>

diff --git a/frontend/components/Pong/PongModals.tsx b/frontend/components/Pong/PongModals.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useContext, useEffect, useState } from "react";
 import { useRouter } from "next/navigation"
 
 import { usePongGameState } from "@/app/[lang]/pong/hooks/usePongGameState";
@@ -12,6 +12,7 @@ import CustomizeModal from "@/app/[lang]/modals/CutomizeModal";
 import { useWeb3ModalAccount } from "@web3modal/ethers5/react";
 import { useJoinEvents } from "../hooks/useJoinGame";
 import { intToHexColor } from "../TTT/TTTModals";
+import guestContext from "@/app/[lang]/guestProvider";
 
 /* -------------------------------------------------------------------------- */
 /*                                  Component                                 */
@@ -67,6 +68,7 @@ export const PongModals = memo(() => {
 	const router = useRouter();
 	const { tmContract } = useContract();
 	const {isConnected, address} = useWeb3ModalAccount();
+	const { isGuest } = useContext(guestContext);
 
 	//* ------------------------------- state variables ------------------------------ */
 	const [isClicked, setIsClicked] = useState(false);
@@ -183,22 +185,24 @@ export const PongModals = memo(() => {
 			}
 		}
 
-		if (pongGameState.gameId !== '-1' && !customized) {
+		if (pongGameState.gameId !== '-1' && !customized && !isGuest) {
 			getPlayerInfo();
 		}
-	}, [customized, pongGameState.gameId, playerAddress, getPlayer, setPlayerInfos]);
+	}, [customized, pongGameState.gameId, playerAddress, isGuest, getPlayer, setPlayerInfos]);
 
 	const initiateGame = async (username: string, color: string) => {
-		if (username.length < 2 || username.length > 26) {
-			return ;
-		}
-
-		if (username !== playerInfos.name || color !== playerInfos.color) {
-			const colorCopy = color.replace('#', '0x');
-			if (await onSetNameAndColor(username, colorCopy)) {
+		if (!isGuest) {
+			if (username.length < 2 || username.length > 26) {
 				return ;
 			}
-			setPlayerInfos({ color: color, name: String(username) });
+
+			if (username !== playerInfos.name || color !== playerInfos.color) {
+				const colorCopy = color.replace('#', '0x');
+				if (await onSetNameAndColor(username, colorCopy)) {
+					return ;
+				}
+				setPlayerInfos({ color: color, name: String(username) });
+			}
 		}
 
 		setCustomized(true);
@@ -226,7 +230,10 @@ export const PongModals = memo(() => {
 	const registerNewPlayer = async (username: string, color: string) => {
 		const colorCopy = color.replace('#', '0x');
 		if (username.length > 1 && username.length < 27) {
-			if (!(await onSetNameAndColor(username, colorCopy))) {
+			if (isGuest) {
+				setPlayerInfos({ color: colorCopy, name: username });
+				setShowSetModal(false);
+			} else if (!(await onSetNameAndColor(username, colorCopy))) {
 				setPlayerInfos({ color: colorCopy, name: username });
 				setShowSetModal(false);
 			}