Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/hueckidom/ping-pong-game
Browse files Browse the repository at this point in the history
  • Loading branch information
guzel.khuziakhmetova committed Aug 21, 2024
2 parents 21eb60f + 50ab045 commit f45d3aa
Show file tree
Hide file tree
Showing 6 changed files with 134 additions and 168 deletions.
2 changes: 1 addition & 1 deletion client/.env
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
VITE_API_URL=https://localhost:7144
VITE_API_URL=https://localhost:7144/
15 changes: 2 additions & 13 deletions client/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import React, { useState } from 'react';
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
import GameField from './views/Game';
import Home from './views/Home';
Expand All @@ -9,25 +8,15 @@ import CreateGame from './views/CreateGame';
import JoinGame from './views/JoinGame';

const App = () => {
const [settings, setSettings] = useState({
speedOption: 'fast',
pointOption: 10
});

const handleCreateGameSubmit = (name: string, sessionId: string) => {
console.log("Game created with name:", name, "and sessionId:", sessionId);
// Weitere Logik hier
};

return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/game/:sessionId" element={<GameField settings={settings} />} />
<Route path="/game/:sessionId" element={<GameField />} />
<Route path="/enter-score" element={<Highscore />} />
<Route path="/scores" element={<ShowScores />} />
<Route path="/settings" element={<Settings />} />
<Route path="/create-game" element={<CreateGame onSubmit={handleCreateGameSubmit} />} /> {/* Stelle sicher, dass onSubmit übergeben wird */}
<Route path="/create-game" element={<CreateGame />} />
<Route path="/join/:sessionId" element={<JoinGame />} />
</Routes>
</Router>
Expand Down
57 changes: 36 additions & 21 deletions client/src/components/QuestionDialog.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,10 @@
import React, { useEffect, useState, useCallback, useRef } from "react";
import { Question, QuestionDialogProps, gamepad } from "../utils/types";
import { QuestionDialogProps } from "../utils/types";
import { gameDefaults } from "../views/Game";
import correctSound from "../assets/correct.mp3";
import wrongSound from "../assets/wrong.mp3";
import { playSound } from "../utils/board";

const state: any = {
question: undefined,
activeIndex: 0,
isDone: false,
};

const QuestionDialogCmp: React.FC<QuestionDialogProps> = ({
answeredQuestion,
question,
Expand All @@ -21,6 +15,7 @@ const QuestionDialogCmp: React.FC<QuestionDialogProps> = ({
const [isCorrect, setIsCorrect] = useState(false);
const [timer, setTimer] = useState(gameDefaults.questionSeconds);
let timeoutRef: any = useRef(null);
let timerInterval: any;

useEffect(() => {
if (isAnsweredQuestionCorrect == undefined) return;
Expand All @@ -39,18 +34,39 @@ const QuestionDialogCmp: React.FC<QuestionDialogProps> = ({
answeredQuestion(activeIndex);
}, [activeIndex, question]);

const handleClick = (index: number) => {
clearTimeout(timeoutRef.current);
setActiveIndex(index);
answeredQuestion(index);
};

useEffect(() => {
setIsWrong(false);
setIsCorrect(false);
setTimer(gameDefaults.questionSeconds);

// if times is up we push a wrong question index
// if time is up we push a wrong question index
timeoutRef.current = setTimeout(() => {
answeredQuestion(1000);
}, gameDefaults.questionSeconds * 1000);

let timerState = timer;
timerInterval = setInterval(() => {

if(timerState === 0){
clearInterval(timerInterval);
return;
}

timerState -= 1;
setTimer(timerState)
}, 1000);

return () => {
clearTimeout(timeoutRef.current);
if (timerInterval) {
clearInterval(timerInterval);
}
};
}, []);

Expand All @@ -76,7 +92,6 @@ const QuestionDialogCmp: React.FC<QuestionDialogProps> = ({
[handleSpace]
);


useEffect(() => {
window.addEventListener("keydown", handleKeyPress);

Expand All @@ -98,30 +113,30 @@ const QuestionDialogCmp: React.FC<QuestionDialogProps> = ({
<div className="text-2xl font-bold">{question?.question}</div>
<div className="flex flex-col gap-2">
<div
className={`kbd w-full text-xl ${
activeIndex === 0 ? "bg-primary" : ""
}`}
className={`kbd w-full text-xl ${activeIndex === 0 ? "bg-primary" : ""
}`}
onClick={() => handleClick(0)}
>
{question?.A}
</div>
<div
className={`kbd text-xl ${
activeIndex === 1 ? "bg-primary" : ""
}`}
className={`kbd text-xl ${activeIndex === 1 ? "bg-primary" : ""
}`}
onClick={() => handleClick(1)}
>
{question?.B}
</div>
<div
className={`kbd text-xl ${
activeIndex === 2 ? "bg-primary" : ""
}`}
className={`kbd text-xl ${activeIndex === 2 ? "bg-primary" : ""
}`}
onClick={() => handleClick(2)}
>
{question?.C}
</div>
<div
className={`kbd text-xl ${
activeIndex === 3 ? "bg-primary" : ""
}`}
className={`kbd text-xl ${activeIndex === 3 ? "bg-primary" : ""
}`}
onClick={() => handleClick(3)}
>
{question?.D}
</div>
Expand Down
111 changes: 64 additions & 47 deletions client/src/views/CreateGame.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import { PlayerSessionData } from "../utils/types";
import { updateGameState } from "../utils/game-state";

let playerPollIntervall: any;
const CreateGame: React.FC<{
onSubmit: (name: string, sessionId: string) => void;
}> = ({ onSubmit }) => {
const CreateGame: React.FC<any> = () => {
const [name, setName] = useState("");
const [error, setError] = useState<string | null>(null);
const [emptyError, setEmptyError] = useState<string | null>(null);
Expand Down Expand Up @@ -41,7 +39,6 @@ const CreateGame: React.FC<{
const sessionId = response.sessionId;
if (sessionId) {
setSessionId(sessionId);
onSubmit(name, sessionId);
const joinLink = `${window.location.origin}/#/join/${sessionId}`;
setLink(joinLink);
setIsWaitingForPlayer(true);
Expand All @@ -67,8 +64,6 @@ const CreateGame: React.FC<{
const me = players[0];
updateGameState({ name: me.name ?? "random1", id: me.id, sessionId, isHost: true });

console.log("Number of players:", players.length);

if (players.length > 1) {
setIsWaitingForPlayer(false);
setPlayers(players);
Expand All @@ -82,17 +77,36 @@ const CreateGame: React.FC<{
const copyToClipboard = async () => {
await playSound(buttonClickSound);
if (link) {
navigator.clipboard
.writeText(link)
.catch((err) => console.error("Failed to copy: ", err));
if (navigator.clipboard && window.isSecureContext) {
// Use Clipboard API if available and secure context
try {
await navigator.clipboard.writeText(link);
} catch (err) {
console.error("Failed to copy: ", err);
}
} else {
// Fallback for insecure context or older browsers
const textArea = document.createElement("textarea");
textArea.value = link;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
console.log("Text copied successfully.");
} catch (err) {
console.error("Fallback: Failed to copy: ", err);
}
document.body.removeChild(textArea);
}
setShowCopyMessage(true);

setTimeout(() => {
setShowCopyMessage(false);
}, 2000);
}
};


const onStartGame = async () => {
await playSound(buttonClickSound);
if (sessionId) {
Expand Down Expand Up @@ -189,46 +203,49 @@ const CreateGame: React.FC<{
}

return (
<form
onSubmit={handleSubmit}
className="flex flex-col items-center gap-4"
>
<NameInput />
<CreateButton />
<>
<button className="kbd fixed left-2 top-2 hover:opacity-60 text-lg" onClick={() => navigate("/")}>◀︎ Zurück</button>
<form
onSubmit={handleSubmit}
className="flex flex-col items-center gap-4"
>
<NameInput />
<CreateButton />

{emptyError && <p className="mt-4 text-red-500">{emptyError}</p>}
{error && <p className="mt-4 text-red-500">{error}</p>}
{emptyError && <p className="mt-4 text-red-500">{emptyError}</p>}
{error && <p className="mt-4 text-red-500">{error}</p>}

{showInviteMessage && (
<div className="hero-content text-left flex-col bg-base-300 p-4 rounded-lg">
<p>Leite den Einladungslink an deinen Mitspieler weiter 😊</p>
</div>
)}
{link && (
<div className="relative">
<span className="text-xs">{link}</span>
<button
type="button"
onClick={copyToClipboard}
className="btn btn-neutral btn-sm ml-2"
>
Kopieren
</button>
{showCopyMessage && (
<div className="hero-content text-right flex-col bg-base-300 p-2 animate-bounce opacity-80 rounded-lg text-xs text-green-300 absolute w-full">
<p>Link in zwischenablage kopiert</p>
</div>
)}
</div>
)}
{showInviteMessage && (
<div className="hero-content text-left flex-col bg-base-300 p-4 rounded-lg">
<p>Leite den Einladungslink an deinen Mitspieler weiter 😊</p>
</div>
)}
{link && (
<div className="relative">
<span className="text-xs">{link}</span>
<button
type="button"
onClick={copyToClipboard}
className="btn btn-neutral btn-sm ml-2"
>
Kopieren
</button>
{showCopyMessage && (
<div className="hero-content text-right flex-col bg-base-300 p-2 animate-bounce opacity-80 rounded-lg text-xs text-green-300 absolute w-full">
<p>Link in zwischenablage kopiert</p>
</div>
)}
</div>
)}

{isWaitingForPlayer && (
<div className="mt-4 text-white flex gap-2 justify-center items-center bg-base-300 p-4">
<p>Warte auf weiteren Spieler</p>
<span className="loading loading-ring loading-md"></span>
</div>
)}
</form>
{isWaitingForPlayer && (
<div className="mt-4 text-white flex gap-2 justify-center items-center bg-base-300 p-4">
<p>Warte auf weiteren Spieler</p>
<span className="loading loading-ring loading-md"></span>
</div>
)}
</form>
</>
);
};

Expand Down
29 changes: 17 additions & 12 deletions client/src/views/Game.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,14 @@ import {
} from "../utils/question";

const INITIAL_GAME_DEFAULTS: BaseSettings = {
velocityXIncrement: 1.2,
baseVelocityX: 2.5,
baseVelocityY: 1.7,
velocityXIncrement: 1.1,
baseVelocityX: -2.3,
baseVelocityY: 1.5,
boardHeightDivisor: 1.7,
maxBoardWidth: 700,
maxLife: 2,
maxVelocityX: 7,
moveSpeed: 6,
maxVelocityX: 5,
moveSpeed: 9,
playerHeight: 60,
playerWidth: 10,
player1KeyDown: "ArrowDown",
Expand Down Expand Up @@ -67,7 +67,7 @@ export const assignGameDefaults = (settings: BaseSettings) => {
let animationFrame: number | null = null;

// simple state management
const GameField: React.FC<MultiplePlayerModeProps> = () => {
const GameField: React.FC<any> = () => {
const boardWidth = determineBoardWidth();
const boardHeight = boardWidth / gameDefaults.boardHeightDivisor;
const contextRef = useRef<CanvasRenderingContext2D | null>(null);
Expand Down Expand Up @@ -411,8 +411,9 @@ const GameField: React.FC<MultiplePlayerModeProps> = () => {
};

const handleGoal = () => {
setLife((prevLife) => prevLife - 1);
if (life > 0) {
const newLife = gameState().life! - 1;
setLife(newLife);
if (newLife > 0) {
playSound(goalSound);
resetBall();
} else {
Expand Down Expand Up @@ -537,7 +538,9 @@ const GameField: React.FC<MultiplePlayerModeProps> = () => {
};

const answeredQuestion = (questionIndex: number) => {
gameHub.pushAnsweredQuestion(gameState().sessionId!, { questionIndex });
if (gameState().isHost) {
gameHub.pushAnsweredQuestion(gameState().sessionId!, { questionIndex });
}
};

const handleAnswer = (isCorrect: boolean) => {
Expand All @@ -547,7 +550,7 @@ const GameField: React.FC<MultiplePlayerModeProps> = () => {
if (isCorrect) {
setScore(gameState().score! + timer);
} else {
setLife((prevLife) => prevLife - 1);
setLife(gameState().life! - 1);
}
}

Expand All @@ -565,6 +568,10 @@ const GameField: React.FC<MultiplePlayerModeProps> = () => {
try {
await initializeHubSession();

if (gameState().isHost) { // litle hacky delay to sync /TODO
await new Promise((resolve) => setTimeout(() => resolve(null), 500))
}

setIsCountdownActive(false);
resetGameState();
startTimer();
Expand All @@ -584,7 +591,6 @@ const GameField: React.FC<MultiplePlayerModeProps> = () => {
try {
const sessionData = await getSessionById(gameStateId());
const state = gameState();
console.log("STATE", state)

if (!sessionData || !sessionData.isSessionRunning) {
alert("Spiel wurde beendet");
Expand All @@ -603,7 +609,6 @@ const GameField: React.FC<MultiplePlayerModeProps> = () => {
await gameHub.start();
registerHubEvents();
await gameHub.joinLobby(gameStateId());
console.log("STATE AFTRER", state)

setIsHubActive(true);
} catch (err) {
Expand Down
Loading

0 comments on commit f45d3aa

Please sign in to comment.