Skip to content

Commit

Permalink
Merge pull request #105 from sopra-fs24-group-09/dev
Browse files Browse the repository at this point in the history 
M3 final deployment
  • Loading branch information
@Haaaan1
Haaaan1 authored Apr 26, 2024
2 parents 9255cde + b2b4e09 commit 0862e6b
Show file tree
Hide file tree
Showing 10 changed files with 307 additions and 172 deletions.
2 changes: 1 addition & 1 deletion src/components/ui/ButtonPlayer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const ButtonPlayer = (props: ButtonPlayerProps) => {
setIsPlaying(false);
});
};
}, []);
}, [props.volume]);

return (
<div className={`btn-player ${props.className}`}>
Expand Down
20 changes: 6 additions & 14 deletions src/components/ui/VolumeBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,14 @@ import { IoMdVolumeOff, IoMdVolumeHigh} from "react-icons/io";
import "../../styles/ui/VolumeBar.scss";

export const VolumeBar = props => {
const [volume, setVolume] = useState(props.volume);
const volumeBeforeMute = useRef(0);


return (
<div className="volume-bar">
{/* toggle mute or not*/}
<Button onClick={() => {
if (volume === 0) {
setVolume(volumeBeforeMute.current);
} else {
volumeBeforeMute.current = volume;
setVolume(0);
}
}}
className = "volume-bar toggle-mute"
<Button onClick={props.onClickMute}
className = "volume-bar toggle-mute"
>
{volume === 0 ? <IoMdVolumeOff /> : <IoMdVolumeHigh />}
{props.volume === 0 ? <IoMdVolumeOff /> : <IoMdVolumeHigh />}
</Button>
{/* volume slider */}
<input
Expand All @@ -30,7 +21,7 @@ export const VolumeBar = props => {
min="0"
max="1"
step="0.01"
value={volume}
value={props.volume}
// onChange={e => {
// setVolume(e.target.value);
// }}
Expand All @@ -44,6 +35,7 @@ export const VolumeBar = props => {
VolumeBar.propTypes = {
volume: Proptypes.number,
onChange: Proptypes.func,
onClickMute: Proptypes.func,
};


35 changes: 13 additions & 22 deletions src/components/ui/WavePlayer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React, {useEffect, useState, useRef} from "react";
import React, {useEffect, useState, useRef, useImperativeHandle } from "react";
import WaveSurfer from "wavesurfer.js";
import propTypes from "prop-types";
import { Button } from "./Button";
import "styles/ui/WavePlayer.scss";

export const WavePlayer = props => {
export const WavePlayer = React.forwardRef((props,ref) => {
const waveformRef = useRef<HTMLDivElement>(null);
const wavesurfer = useRef<WaveSurfer | null>(null);
const [playbackRate, setPlaybackRate] = useState(1);
Expand All @@ -14,14 +14,6 @@ export const WavePlayer = props => {
const initializeWaveSurfer = () => {
if (wavesurfer.current) {
console.log(`[${props.className}]`,"WaveSurfer already initialized");
// console.log(`[${props.className}]`,"WaveSurfer set volume to", props.volume);
if (Number.isFinite(props.volume) && props.volume >= 0 && props.volume <= 1)
{
wavesurfer.current.setVolume(props.volume);
console.log(`[${props.className}]`,"WaveSurfer set volume to", props.volume);
} else {
console.error(`[${props.className}]`,"WaveSurfer failed to set volume to", props.volume);
}

return;
}
Expand Down Expand Up @@ -50,15 +42,6 @@ export const WavePlayer = props => {
// setIsPlaying(prev => !prev);
}
);

if (Number.isFinite(props.volume) && props.volume >= 0 && props.volume <= 1)
{
wavesurfer.current.setVolume(props.volume);
console.log(`[${props.className}]`,"WaveSurfer set volume to", props.volume);
} else {
console.error(`[${props.className}]`,"WaveSurfer failed to set volume to", props.volume);
}

};

useEffect(() => {
Expand All @@ -78,11 +61,18 @@ export const WavePlayer = props => {
}
, [props.audioURL]);

useImperativeHandle(ref, () => ({
setVolume: (volume:number) => {
wavesurfer.current?.setVolume(volume);
console.log(`[${props.className}]`,"WaveSurfer set volume to", volume);
}
}), []);

return (
<div className={`wave-player ${props.className}`}>
<div className="waveform" ref={waveformRef}/>
<div className="no-audio-placeholder" style={{display: props.audioURL ? "none":"block"}}>
........is recording......
........No Audio Uploaded......
</div>
<div className="btn-group"
style={{display: props.audioURL ? "flex":"none"}}>
Expand Down Expand Up @@ -132,12 +122,13 @@ export const WavePlayer = props => {
</div>
);

}
});

WavePlayer.displayName = "WavePlayer";

WavePlayer.propTypes = {
className: propTypes.string,
audioURL: propTypes.string,
volume: propTypes.number.isRequired,
}

export default WavePlayer;
Expand Down
155 changes: 99 additions & 56 deletions src/components/views/Gameroom.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,14 @@ const Gameroom = () => {
console.log(user)
const [showReadyPopup, setShowReadyPopup] = useState(false);
const [gameOver, setGameOver] = useState(false);
const gameOverRef = useRef(false);
const [currentSpeakerID, setCurrentSpeakerID] = useState(null);
const [playerLists, setPlayerLists] = useState([]);
const roundFinished = useRef(false);
const [endTime, setEndTime] = useState(null);
const gameTheme = useRef(null);
const gameTheme = useRef("Loading....");
const leaderboardInfoRecieved = useRef(false);
const [leaderboardInfo, setLeaderboardInfo] = useState([]);

const [gameInfo, setGameInfo] = useState(null);
const gameInfoRef = useRef(null);
Expand All @@ -73,6 +76,7 @@ const Gameroom = () => {
currentSpeakerIdRef.current = gameInfo.currentSpeaker.userID;
}
const [globalVolume, setGlobalVolume] = useState(0.5);
const globalVolumeBeforeMute = useRef(0);

gameInfoRef.current = gameInfo;

Expand All @@ -93,7 +97,17 @@ const Gameroom = () => {

console.log("GameInfo", gameInfo);


useEffect(() => {
const isChrome = (window as any).chrome;
// console.error("ISCHROME",isChrome);
if (!isChrome) {
alert("Please use Chrome browser to play the game.");
navigate("/lobby");

return;
}
// refuse non-chrome browser
// define subscription instances
let playerInfoSuber;
let gameInfoSuber;
Expand Down Expand Up @@ -127,7 +141,8 @@ const Gameroom = () => {
onShareAudioReceived
);
responseSuber = stompClientRef.current.subscribe(
`/response/${currentRoomID}`,
// `/response/${currentRoomID}`,
`/user/${user.id}/response/${currentRoomID}`,
onResponseReceived
);
enterRoom();
Expand All @@ -141,6 +156,9 @@ const Gameroom = () => {
};

const onResponseReceived = (payload) => {
const payloadData = JSON.parse(payload.body);
alert("Response server side receive!"+payloadData.message)
navigate("/lobby");
// TODO: handle response
/// 1. filter the response by the receiptId
/// 2. if the response is success, do nothing
Expand All @@ -161,6 +179,10 @@ const Gameroom = () => {
console.log(roundFinished.current);
}
}
if (gameOverRef.current === true && leaderboardInfoRecieved.current === false){
setLeaderboardInfo(payloadData.message);
leaderboardInfoRecieved.current = true;
}
};

const onGameInfoReceived = (payload) => {
Expand All @@ -182,6 +204,7 @@ const Gameroom = () => {
setShowReadyPopup(true);
} else if (payloadData.message.gameStatus === "over") {
setShowReadyPopup(false);
gameOverRef.current = true;
setGameOver(true);
} else {
setShowReadyPopup(false);
Expand Down Expand Up @@ -464,60 +487,67 @@ const Gameroom = () => {
console.log(playerLists);

const LeaderBoard = ({ playerStatus }) => {
// console.log("123456")
console.log("[LeaderBoard]",playerStatus)

return (
<div className="gameroom leaderboarddiv">
<div className="gameroom leaderboard">
{playerStatus.map((playerInfo, index) => (
<div className="gameroom singleScoreContainer" key={index}>
<span className={"gameroom ranking-" + index}>{index + 1}</span>
<span className="gameroom ldPlayerAvatar">
<i
className={"twa twa-" + playerInfo.user.avatar}
style={{ fontSize: "2.8rem" }}
/>
</span>
<span className="gameroom ldPlayerName">
{playerInfo.user.name}
</span>
<span className="gameroom scorenum" style={{ gridColumn: "3" }}>
{playerInfo.score.total}
</span>
<span className="gameroom ldtitle" style={{ gridColumn: "3" }}>
<>
{playerStatus !== null && (
<div className="gameroom leaderboarddiv">
<div className="gameroom leaderboard">
{playerStatus.map((playerInfo, index) => (
<div className="gameroom singleScoreContainer" key={index}>
<span className={"gameroom ranking-" + index}>{index + 1}</span>
<span className="gameroom ldPlayerAvatar">
<i
className={"twa twa-" + playerInfo.user.avatar}
style={{ fontSize: "2.8rem" }}
/>
</span>
<span className="gameroom ldPlayerName">
{playerInfo.user.name}
</span>
<span className="gameroom scorenum" style={{ gridColumn: "3" }}>
{playerInfo.score.total}
</span>
<span className="gameroom ldtitle" style={{ gridColumn: "3" }}>
Total
</span>
<span className="gameroom scorenum" style={{ gridColumn: "4" }}>
{playerInfo.score.guess}
</span>
<span className="gameroom ldtitle" style={{ gridColumn: "4" }}>
</span>
<span className="gameroom scorenum" style={{ gridColumn: "4" }}>
{playerInfo.score.guess}
</span>
<span className="gameroom ldtitle" style={{ gridColumn: "4" }}>
Guess
</span>
<span className="gameroom scorenum" style={{ gridColumn: "5" }}>
{playerInfo.score.read}
</span>
<span className="gameroom ldtitle" style={{ gridColumn: "5" }}>
Read
</span>
{playerInfo.score.details.map((detail, detailIndex) => (
<React.Fragment key={detailIndex}>
<span
className="gameroom scorenum"
style={{ gridColumn: `${detailIndex + 6}` }}
>
{detail.score}
</span>

<span
className="gameroom ldtitle"
style={{ gridColumn: `${detailIndex + 6}` }}
>
{detail.word}
<span className="gameroom scorenum" style={{ gridColumn: "5" }}>
{playerInfo.score.read}
</span>
</React.Fragment>
<span className="gameroom ldtitle" style={{ gridColumn: "5" }}>
Read
</span>
{playerInfo.score.details.map((detail, detailIndex) => (
<React.Fragment key={detailIndex}>
<span
className="gameroom scorenum"
style={{ gridColumn: `${detailIndex + 6}` }}
>
{detail.score}
</span>

<span
className="gameroom ldtitle"
style={{ gridColumn: `${detailIndex + 6}` }}
>
{detail.word}
</span>
</React.Fragment>
))}
</div>
))}
</div>
))}
</div>
</div>
</div>
)}
</>
);
};

Expand Down Expand Up @@ -565,17 +595,30 @@ const Gameroom = () => {
globalVolume={globalVolume}
/>
<div className="gameroom right-area">
<Header onChange={
e => {
setGlobalVolume(e.target.value);
console.log("[volume] set to", e.target.value);
<Header
onChange={
e => {
setGlobalVolume(e.target.value);
console.log("[volume] set to", e.target.value);
}
}
onClickMute={
() => {
if (globalVolume === 0) {
setGlobalVolume(globalVolumeBeforeMute.current);
} else {
globalVolumeBeforeMute.current = globalVolume;
setGlobalVolume(0);
}
}
}
} />
volume={globalVolume}
/>
{!gameOver && showReadyPopup && (
<div className="gameroom readypopupbg">
<div className="gameroom readypopupcontainer">
<span className="gameroom popuptitle"> {"Room#" + currentRoomName}</span>
<span className="gameroom popuptheme"> {gameTheme.current}</span>
<span className="gameroom popuptheme">{gameTheme.current}</span>
<span className="gameroom popuptext">
{" "}
Ready to start the game?
Expand Down Expand Up @@ -621,7 +664,7 @@ const Gameroom = () => {
</div>
)}
{gameOver && (
<LeaderBoard playerStatus={playerLists}></LeaderBoard>
<LeaderBoard playerStatus={leaderboardInfo}></LeaderBoard>
)}
{!gameOver && !showReadyPopup && (
<Roundstatus
Expand Down
Loading

0 comments on commit 0862e6b

Please sign in to comment.