Skip to content

Commit bfb21b2

Browse files
GulianrdgdGulianrdgd
committed
Done!
1 parent a488b02 commit bfb21b2

25 files changed

+1344
-97
lines changed

‎.babelrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,5 @@
22
"presets": ["next/babel"],
33
"plugins": ["inline-react-svg", ["transform-postcss", {
44
"config": "configuration/postcss.config.js"
5-
}]]
5+
}], "emotion"]
66
}

‎Components/AdminGame.tsx

+82-31
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,93 @@
11
import Button from './Button'
2-
import { useState } from 'react'
3-
import { Selection } from '../models/selection'
42
import { Socket } from 'socket.io-client'
3+
import CorrectAnswers from './CorrectAnswers'
4+
import gameData from '../models/GameData'
5+
import PlayerCounter from './PlayerCounter'
6+
import React, { useEffect, useState } from 'react'
7+
58

69
interface Props{
7-
toggle: () => void
10+
toggle: () => void,
11+
answers: string[],
12+
socket: Socket,
13+
currentGame: gameData,
14+
}
15+
16+
interface propInner {
17+
gameData: gameData,
18+
current_time: number,
19+
current_user: string
20+
}
21+
22+
function DisplayUsers(prop: propInner) : JSX.Element{
23+
const temp = [];
24+
for(const ans in prop.gameData.players.sort()){
25+
if((prop.gameData.players[ans].username === prop.gameData.current_player) && prop.gameData.timer_started) {
26+
temp.push(
27+
<PlayerCounter key={prop.gameData.players[ans].id.toString()} amount={prop.current_time}
28+
active={prop.gameData.players[ans].username === prop.gameData.current_player}
29+
player={prop.gameData.players[ans].username} className={"mt-20"} />
30+
);
31+
}else{
32+
temp.push(
33+
<PlayerCounter key={prop.gameData.players[ans].id.toString()} amount={prop.gameData.players[ans].time}
34+
active={prop.gameData.players[ans].username === prop.gameData.current_player}
35+
player={prop.gameData.players[ans].username} className={"mt-20"} />
36+
);
37+
}
38+
}
39+
return (<div>{temp}</div>)
840
}
941

1042
function AdminGame(prop: Props) : JSX.Element {
43+
const [state, setState]= useState({current_time: 60, username: ""})
1144

12-
const [state, setState]= useState({
13-
hasStarted: false
14-
});
15-
16-
return (<div className={"flex flex-col justify-center"}>
17-
<div className={"flex justify-center"}>
18-
<div className={"blink_me rounded-full h-24 w-24"}/>
19-
{ state.hasStarted &&
20-
<p className={"text-red-500"}>Live</p>
21-
}
22-
{ !state.hasStarted &&
23-
<p>Not Live</p>
24-
}
25-
</div>
26-
<div className={"flex flex-row justify-around w-full content-evenly items-stretch"}>
27-
<iframe src={'localhost:3000/streamOverlay'} className={"iframe"} title={"Stream overlay preview"}/>
28-
<div className={"iframe flex flex-col justify-center"}>
29-
<Button text={"Next User"} className={"w-48"}/>
30-
<Button text={"Next Question"} className={"w-48"}/>
31-
<Button text={"Next Round"} className={"w-48"}/>
32-
<Button text={"Pause/play game"} className={"w-48"}
33-
onClick={() => {prop.toggle(); setState({...state, hasStarted: !state.hasStarted});}}/>
34-
<Button text={"Show Question"} className={"w-48"}/>
35-
</div>
36-
<div className={"iframe"}>
37-
Joe
38-
</div>
39-
</div>
45+
useEffect(() => {
46+
if(prop.socket) {
47+
prop.socket.on('?newTime', data => {
48+
if(data.time != state.current_time || data.username != state.username) {
49+
setState({ current_time: data.time, username: data.username })
50+
}
51+
});
52+
}}, []);
53+
54+
return (
55+
<div className={"flex flex-col justify-center"}>
56+
<div className={"flex justify-center"}>
57+
{ prop.currentGame.has_started &&
58+
<>
59+
<p className={"blink_me text-red-500"}>Live</p>
60+
</>
61+
}
62+
{ !prop.currentGame.has_started &&
63+
<p>Not Live</p>
64+
}
65+
</div>
66+
<div className={"flex flex-row justify-around w-full content-evenly items-stretch space-x-4"}>
67+
<div className={"iframe bg-dsm-bg-dark flex flex-col justify-center rounded"}>
68+
<DisplayUsers gameData={prop.currentGame} current_time={state.current_time} current_user={state.username}/>
69+
</div>
70+
<div className={"iframe bg-dsm-bg-dark flex flex-col justify-center rounded"}>
71+
<Button text={"Next User"} className={"w-48"} onClick={() => prop.socket.emit("?nextUser")}/>
72+
<Button text={"Next Question"} className={"w-48"} onClick={() => prop.socket.emit("?nextQuestion",
73+
{round: prop.currentGame.round})}/>
74+
<Button text={"Next Round"} className={"w-48"} onClick={() => prop.socket.emit("?nextRound")}/>
75+
<Button text={"Show Question"} className={"w-48"} onClick={() => prop.socket.emit("?showQuestion")}/>
76+
<Button text={"Start/Stop Timer"} className={"w-48"}
77+
onClick={() => prop.socket.emit("?toggleTimer",
78+
{username: prop.currentGame.current_player, round: prop.currentGame.round})}/>
79+
<Button text={"Pause/play game"} className={"w-48"}
80+
onClick={() => {prop.toggle();}}/>
81+
</div>
82+
<div className={"iframe bg-dsm-bg-dark rounded flex flex-col self-center"}>
83+
{prop.currentGame.round === 1 &&
84+
<div className={"relative oval bg-dsm-bg w-16 h-16 self-center mt-10"}>
85+
<h1 className={"absolute bottom-1/2 left-1/2 transform translate-y-1/2 -translate-x-1/2 text-white text-2xl"}>{prop.currentGame.round1}</h1>
86+
</div>
87+
}
88+
<CorrectAnswers gameData={prop.currentGame} socket={prop.socket} isAdmin={true}/>
89+
</div>
90+
</div>
4091
</div>
4192
)
4293
}

‎Components/AdminUser.tsx

+156
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React, { ChangeEvent, FormEvent, useEffect, useState } from 'react'
2+
import { Socket } from 'socket.io-client'
3+
import Button from './Button';
4+
5+
interface Sock{
6+
socket: Socket;
7+
toggle: () => void;
8+
}
9+
enum Role{
10+
player,
11+
admin
12+
}
13+
14+
export function NewUsers (props: Sock): JSX.Element {
15+
16+
const [state, setState]= useState({
17+
username: "",
18+
password1: "",
19+
password2: "",
20+
role: Role.player,
21+
socket: props.socket,
22+
error: "",
23+
});
24+
useEffect(() => {
25+
26+
state.socket.on('db', (data) => {
27+
if(data.succeed){
28+
setState({...state, username: "", password1: "", password2: "", role: Role.player, error: ""})
29+
}else{
30+
console.log("Something happend", data.error);
31+
setState({...state, error: data.error});
32+
}
33+
});
34+
35+
}, [])
36+
37+
38+
function handleUsernameChange(event: ChangeEvent<HTMLInputElement>): void {
39+
setState({...state, username: event.target.value})
40+
}
41+
42+
function handlePassword1Change(event: ChangeEvent<HTMLInputElement>): void {
43+
setState({...state, password1: event.target.value});
44+
}
45+
46+
function handlePassword2Change(event: ChangeEvent<HTMLInputElement>): void {
47+
setState({...state, password2: event.target.value});
48+
}
49+
50+
function handleRoleChange(event: ChangeEvent<HTMLSelectElement>): void {
51+
const round = parseInt(event.target.value);
52+
if (round === 0) {
53+
setState({ ...state, role: Role.player });
54+
} else if (round === 1) {
55+
setState({ ...state, role: Role.admin });
56+
}
57+
}
58+
59+
async function handleUserSubmit(event: FormEvent<HTMLFormElement>): Promise<any> {
60+
event.preventDefault();
61+
let role = "";
62+
if(state.role === Role.player){
63+
role = "player";
64+
}else if (state.role === Role.admin){
65+
role = "admin";
66+
}
67+
state.socket.emit('?newUser', {
68+
username: state.username,
69+
password1: state.password1,
70+
password2: state.password2,
71+
role: role
72+
})
73+
setState({ ...state, username: "", password1: "", password2: "", role: Role.player, error: "" })
74+
props.toggle();
75+
}
76+
77+
function goBack(): void {
78+
setState({ ...state, username: "", password1: "", password2: "", role: Role.player, error: "" })
79+
props.toggle();
80+
}
81+
82+
return (
83+
<>
84+
<form
85+
className={"mt-10 flex flex-col"}
86+
style={{ height: "0%" }}
87+
id="newUser"
88+
onSubmit={handleUserSubmit}>
89+
<div className={"px-2"}>
90+
<label className={"text-white flex-none self-start text-xl"} htmlFor="username">Role</label>
91+
<br />
92+
<select className={"flex-none self-start rounded-full py-3 px-6 mt-3"} id="role" name="role"
93+
onChange={handleRoleChange}>
94+
<option value="1">Player</option>
95+
<option value="2">Admin</option>
96+
</select>
97+
</div>
98+
<div className={"px-2"}>
99+
<label className={"text-white text-xl flex-none self-start"} htmlFor="question">Username</label>
100+
<br />
101+
<input
102+
name="username"
103+
type="text"
104+
placeholder="username"
105+
id="username"
106+
className={"mt-3 form-control rounded-full flex-none self-start py-3 px-6"}
107+
onChange={handleUsernameChange}
108+
value={state.username}
109+
/>
110+
</div>
111+
<div className={"px-2"}>
112+
<label className={"text-white text-xl flex-none self-start"} htmlFor="question">Password</label>
113+
<br />
114+
<input
115+
name="password1"
116+
type="password"
117+
placeholder="password"
118+
id="password1"
119+
className={"mt-3 form-control rounded-full flex-none self-start py-3 px-6"}
120+
onChange={handlePassword1Change}
121+
value={state.password1}
122+
/>
123+
</div>
124+
<div className={"px-2"}>
125+
<label className={"text-white text-xl flex-none self-start"} htmlFor="question">Password again</label>
126+
<br />
127+
<input
128+
name="password2"
129+
type="password"
130+
placeholder="password again"
131+
id="password2"
132+
className={"mt-3 form-control rounded-full flex-none self-start py-3 px-6"}
133+
onChange={handlePassword2Change}
134+
value={state.password2}
135+
/>
136+
</div>
137+
{state.password1 !== state.password2 &&
138+
<>
139+
<p className={"text-red-500 text-m flex-none"}>Passwords do not match!</p>
140+
</>
141+
}
142+
<div className={"px-2 flex"}>
143+
<Button text={"Back"} className={""} onClick={goBack} />
144+
<button
145+
id="submitButton"
146+
type="submit"
147+
className="mt-10 bg-dsm flex-none self-start text-white rounded-full py-3 px-6"
148+
>
149+
Submit
150+
</button>
151+
</div>
152+
153+
</form>
154+
</>
155+
)
156+
}

‎Components/CorrectAnswers.tsx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import Question from './Question'
2+
import { Socket } from 'socket.io-client'
3+
import gameData from '../models/GameData'
4+
5+
interface Props{
6+
gameData: gameData,
7+
socket: Socket,
8+
isAdmin: boolean
9+
}
10+
11+
function CorrectAnswers(prop: Props) : JSX.Element {
12+
13+
function sendCorrectAnswer(index: number, round: number, username: string): void{
14+
console.log(prop.gameData, round, index)
15+
if(round === 3){
16+
switch (index){
17+
case 0:
18+
prop.socket.emit('?correctAns', { index: [0,1,2,3], round: round, username: username });
19+
break;
20+
case 4:
21+
prop.socket.emit('?correctAns', { index: [4,5,6,7], round: round, username: username });
22+
break;
23+
case 8:
24+
prop.socket.emit('?correctAns', { index: [8,9,10,11], round: round, username: username });
25+
break;
26+
}
27+
}else if(round === 1) {
28+
prop.socket.emit('?correctAns', { index: index, round: round, username: username, round1: prop.gameData.round1});
29+
} else {
30+
prop.socket.emit('?correctAns', { index: index, round: round, username: username });
31+
}
32+
}
33+
34+
function DisplayAnswers() : JSX.Element{
35+
const temp = [];
36+
if(prop.gameData.round === 3){
37+
const tmp = [];
38+
tmp.push(prop.gameData.current_question.answers[0]);
39+
tmp.push(prop.gameData.current_question.answers[4]);
40+
tmp.push(prop.gameData.current_question.answers[8]);
41+
42+
for(const ans in prop.gameData.current_question.answers) {
43+
if (tmp.indexOf(prop.gameData.current_question.answers[ans]) != -1) {
44+
if (prop.gameData.current_answered[ans]) {
45+
temp.push(
46+
<Question text={prop.gameData.current_question.answers[ans]} disabled={false}
47+
username={prop.gameData.current_player} round={prop.gameData.round} index={parseInt(ans)}
48+
onClick={sendCorrectAnswer} isAdmin={prop.isAdmin}/>
49+
);
50+
} else {
51+
temp.push(
52+
<Question text={prop.gameData.current_question.answers[ans]} disabled={true}
53+
username={prop.gameData.current_player} round={prop.gameData.round} index={parseInt(ans)}
54+
onClick={sendCorrectAnswer} className={"grayScale"} isAdmin={prop.isAdmin}/>
55+
);
56+
}
57+
}
58+
}
59+
} else {
60+
for (const ans in prop.gameData.current_question.answers) {
61+
if (prop.gameData.current_answered[ans]) {
62+
temp.push(
63+
<Question text={prop.gameData.current_question.answers[ans]} disabled={false}
64+
username={prop.gameData.current_player} round={prop.gameData.round} index={parseInt(ans)}
65+
onClick={sendCorrectAnswer} className={"noselect"} isAdmin={prop.isAdmin} />
66+
);
67+
} else {
68+
temp.push(
69+
<Question text={prop.gameData.current_question.answers[ans]} disabled={true}
70+
onClick={sendCorrectAnswer} className={"grayScale noselect"} username={prop.gameData.current_player} round={prop.gameData.round} index={parseInt(ans)} isAdmin={prop.isAdmin} />
71+
);
72+
}
73+
}
74+
}
75+
76+
return (<div>{temp}</div>);
77+
}
78+
79+
return (
80+
<div className={"flex flex-col justify-center "}>
81+
<h1 className={"mt-10 text-white text-center text-3xl self-center"}>Question: {prop.gameData.current_question.question}</h1>
82+
<DisplayAnswers/>
83+
</div>
84+
);
85+
}
86+
87+
export default CorrectAnswers;

0 commit comments

Comments
 (0)