Skip to content

Commit b0bdfdf

Browse files
GulianrdgdGulianrdgd
committed
Removed husk
1 parent 4dce594 commit b0bdfdf

17 files changed

+435
-9285
lines changed

‎.babelrc

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
{
22
"presets": ["next/babel"],
3-
"plugins": ["inline-react-svg"]
3+
"plugins": ["inline-react-svg", ["transform-postcss", {
4+
"config": "configuration/postcss.config.js"
5+
}]]
46
}

‎@types/index.d.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
declare module '*.png'
2-
declare module '*.jpg'
3-
declare module '*.jpeg'
4-
declare module '*.svg'
5-
declare module '*.gif'
1+
declare module '*.png';
2+
declare module '*.jpg';
3+
declare module '*.jpeg';
4+
declare module '*.svg';
5+
declare module '*.gif';

‎Components/Table.tsx

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import question from '../models/Question'
2+
import { useEffect, useState } from 'react'
3+
4+
interface Prop {
5+
data: question[]
6+
}
7+
interface PropAnswer{
8+
round: number,
9+
answers: string[]
10+
}
11+
12+
export function Table (props: Prop): JSX.Element {
13+
// const [state, setState]= useState({
14+
// data: this.props.data
15+
// });
16+
17+
function Answer(props: PropAnswer): JSX.Element{
18+
const temp = []
19+
console.log("Props:", props);
20+
if(props.answers) {
21+
if (props.round === 1) {
22+
temp.push(props.answers[0]);
23+
} else if (props.round === 3) {
24+
temp.push(props.answers[0]);
25+
temp.push(<br/>);
26+
temp.push(props.answers[4]);
27+
temp.push(<br/>);
28+
temp.push(props.answers[8]);
29+
} else {
30+
props.answers.map(e => {
31+
temp.push(e);
32+
temp.push(<br/>);
33+
});
34+
}
35+
}
36+
console.log("Temp:", temp);
37+
return (<td>{temp}</td>)
38+
}
39+
40+
function Table(): JSX.Element{
41+
const qInput = [];
42+
const qTemp = [];
43+
44+
qInput.push(
45+
<thead>
46+
<tr>
47+
<th>Round</th>
48+
<th>Question</th>
49+
<th>Answers</th>
50+
</tr>
51+
</thead>
52+
)
53+
console.log("Props before map:", props.data);
54+
props.data.map(e => qTemp.push(
55+
<tr key={e.qid}>
56+
<td>{e.round}</td>
57+
<td>{e.question}</td>
58+
<Answer round={e.round} answers={e.answers}/>
59+
</tr>
60+
))
61+
qInput.push(<tbody>{qTemp}</tbody>);
62+
return (<table>{qInput}</table>)
63+
}
64+
65+
return(
66+
<Table/>
67+
)
68+
}

‎Components/TopSelection.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { useState } from 'react'
2+
import logo from '../public/images/logo.png';
3+
import {ReactComponent as GameIcon} from '../public/images/sports_esports-24px.svg';
4+
import {ReactComponent as UserIcon} from '../public/images/group-24px.svg';
5+
import {ReactComponent as QuestionIcon} from '../public/images/question_answer-24px.svg';
6+
7+
enum Selection {
8+
Questions,
9+
Users,
10+
Game
11+
}
12+
export function TopSelection (): JSX.Element {
13+
const [state, setState]= useState({
14+
selected: Selection
15+
});
16+
17+
return (
18+
<div className={" relative left-3/4 top-0 transform-gpu -translate-" +
19+
"x-1/2"}>
20+
<div className={"bg-dsm flex flex-row w-96 justify-center gap-2 py-2.5 rounded-b-lg items-center"}>
21+
<img src={logo} className={"w-16 h-full"} alt={"Logo vdhorst.dev"}/>
22+
<button className={"w-16 h-16"}>
23+
<div className={"bg-dsm-bg rounded-full flex flex-col justify-center h-full"}>
24+
<GameIcon className={"self-center"}/>
25+
<label className={"text-xs"}>
26+
Game
27+
</label>
28+
</div>
29+
</button>
30+
<button className={"w-16 h-16"}>
31+
<div className={"bg-dsm-bg rounded-full flex flex-col justify-center h-full"}>
32+
<QuestionIcon className={"self-center"}/>
33+
<label className={"text-xs"}>
34+
Question
35+
</label>
36+
</div>
37+
</button>
38+
<button className={"w-16 h-16"}>
39+
<div className={"bg-dsm-bg rounded-full flex flex-col justify-center h-full"}>
40+
<UserIcon className={"self-center"}/>
41+
<label className={"text-xs"}>
42+
User
43+
</label>
44+
</div>
45+
</button>
46+
</div>
47+
</div>
48+
)
49+
}

‎Components/newQuestion.tsx

+150
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import React, { ChangeEvent, FormEvent, useState } from 'react'
2+
import { Socket } from 'socket.io-client'
3+
4+
interface Round {
5+
round: number
6+
}
7+
interface Sock{
8+
socket: Socket;
9+
toggle: () => void;
10+
}
11+
const numberOfAnswers = [5, 1, 4, 12, 10];
12+
export function NewQuestions (props: Sock): JSX.Element {
13+
14+
const [state, setState]= useState({
15+
question: "",
16+
round: -1,
17+
answer: [],
18+
correctAnswer: [],
19+
socket: props.socket,
20+
error: "",
21+
});
22+
23+
state.socket.on('db', (data) => {
24+
if(data.succeed){
25+
setState({...state, question: "", round: -1, answer: []})
26+
}else{
27+
console.log("Something happend", data.error);
28+
setState({...state, error: data.error});
29+
}
30+
});
31+
32+
function handleQuestionChange(event: ChangeEvent<HTMLInputElement>): void {
33+
setState({...state, question: event.target.value})
34+
}
35+
36+
function handleRoundChange(event: ChangeEvent<HTMLSelectElement>): void {
37+
const copy = [];
38+
const round = parseInt(event.target.value);
39+
copy.fill("", numberOfAnswers[round]);
40+
setState({...state, round: round, answer: copy});
41+
}
42+
43+
function handleAnswerChange(event: ChangeEvent<HTMLInputElement>): void{
44+
const name = event.target.name;
45+
const id: number = parseInt(name.slice(1))-1;
46+
const copy: any[] = state.answer;
47+
copy[id] = event.target.value;
48+
setState({...state, answer: copy})
49+
}
50+
51+
async function handleQuestionSubmit(event: FormEvent<HTMLFormElement>): Promise<any> {
52+
event.preventDefault();
53+
state.socket.emit('newQ', {
54+
round: state.round,
55+
question: state.question,
56+
answer: state.answer
57+
})
58+
setState({...state, round: -1, error: "", answer: [], question: ""});
59+
props.toggle();
60+
}
61+
62+
function AnswerQuestion(props: Round): JSX.Element{
63+
if(props.round >= 0) {
64+
const times = numberOfAnswers[props.round];
65+
const qInput = [];
66+
let col = "border-transparent";
67+
for(let i=1; i<= times; i++){
68+
if(props.round === 3){
69+
if(i <= 3){
70+
col = "border-red-500";
71+
}else if(i > 3 && i <= 6 ){
72+
col = "border-blue-500";
73+
}else{
74+
col = "border-yellow-500";
75+
}
76+
}
77+
qInput.push(
78+
<input
79+
key={i}
80+
name={"a" + i}
81+
type="text"
82+
placeholder={"answer " + i}
83+
id={"a" + i}
84+
className={"mt-3 form-control rounded-full py-3 px-6 border-4 " + col}
85+
onChange={handleAnswerChange}
86+
value={state.answer[i-1]}
87+
/>
88+
)
89+
}
90+
return (<div className={"flex flex-col"}>{qInput}</div>);
91+
} else{
92+
return (<></>)
93+
}
94+
}
95+
96+
return (
97+
<>
98+
<form
99+
className={"mt-10 flex flex-row"}
100+
style={{height: "0%"}}
101+
id="newQuestion"
102+
onSubmit={handleQuestionSubmit}>
103+
<div className={"px-2"}>
104+
<label className={"text-white flex-none self-start text-xl"} htmlFor="username">Round</label>
105+
<br />
106+
<select className={"flex-none self-start rounded-full py-3 px-6 mt-3"} id="round" name="Round" onChange={handleRoundChange} >
107+
<option value="1">1</option>
108+
<option value="2">2</option>
109+
<option value="3">3</option>
110+
<option value="4">4</option>
111+
<option value="5">5</option>
112+
<option value="0">Finale</option>
113+
</select>
114+
</div>
115+
{state.round >= 0 &&
116+
<>
117+
<div className={"px-2"}>
118+
<label className={"text-white text-xl flex-none self-start"} htmlFor="question">Question</label>
119+
<br />
120+
<input
121+
name="question"
122+
type="text"
123+
placeholder="question"
124+
id="question"
125+
className={"mt-3 form-control rounded-full flex-none self-start py-3 px-6"}
126+
onChange={handleQuestionChange}
127+
value={state.question}
128+
/>
129+
</div>
130+
<div className={"px-2"}>
131+
<label className={"text-white text-xl flex-none self-start"} htmlFor="question">Answers</label>
132+
<br />
133+
{AnswerQuestion({round: state.round})}
134+
</div>
135+
<div className={"px-2"}>
136+
<button
137+
id="submitButton"
138+
type="submit"
139+
className="mt-10 bg-dsm flex-none self-start p-5 text-white rounded-full py-3 px-6"
140+
>
141+
Submit
142+
</button>
143+
</div>
144+
</>
145+
}
146+
</form>
147+
</>
148+
149+
);
150+
}

‎models/Question.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
type question = {
2+
qid: number,
3+
round: number,
4+
question: string,
5+
answers: string[]
6+
};
7+
8+
export default question;

‎jest.config.js ‎next.config.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
module.exports = {
1+
const withImages = require('next-images');
2+
3+
module.exports = withImages({
24
roots: ['<rootDir>'],
35
moduleFileExtensions: ['ts', 'tsx', 'js', 'json', 'jsx'],
46
testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
@@ -12,6 +14,5 @@ module.exports = {
1214
],
1315
moduleNameMapper: {
1416
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
15-
'\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
1617
},
17-
}
18+
});

‎package.json

+15-11
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
{
2-
"name": "with-typescript-eslint-jest",
3-
"author": "@erikdstock",
2+
"name": "de-slimste-mens",
3+
"author": "Julian van der Horst",
44
"license": "MIT",
55
"version": "1.0.0",
66
"scripts": {
7-
"dev": "ts-node --project tsconfig.server.json server.ts",
7+
"dev": "NODE_ENV=development ts-node --project tsconfig.server.json server.ts",
88
"build:server": "tsc --project tsconfig.server.json",
99
"build:next": "next build",
1010
"build": "npm run build:next && npm run build:server",
1111
"start": "NODE_ENV=production node dist/index.js"
1212
},
13-
"husky": {
14-
"hooks": {
15-
"pre-commit": "lint-staged",
16-
"pre-push": "yarn run type-check"
17-
}
18-
},
1913
"lint-staged": {
2014
"*.@(ts|tsx)": [
2115
"yarn lint",
@@ -24,22 +18,32 @@
2418
},
2519
"dependencies": {
2620
"@emotion/babel-preset-css-prop": "^11.2.0",
21+
"@material-ui/core": "^4.11.3",
22+
"@material-ui/icons": "^4.11.2",
23+
"@tailwindcss/forms": "^0.2.1",
24+
"@tailwindcss/jit": "^0.1.7",
2725
"@types/bcrypt": "^3.0.0",
2826
"@types/express": "^4.17.11",
2927
"@types/next-auth": "^3.1.24",
28+
"@types/pg": "^7.14.10",
3029
"@types/socket.io": "^2.1.13",
30+
"@zeit/next-css": "^1.0.1",
3131
"autoprefixer": "^10.2.4",
32+
"babel-plugin-transform-postcss": "^0.3.0",
3233
"bcrypt": "^5.0.0",
3334
"express": "^4.17.1",
34-
"next": "latest",
35+
"material-table": "^1.69.2",
36+
"next": "^10.0.7",
3537
"next-auth": "^3.4.1",
38+
"next-images": "^1.7.0",
39+
"node": "^15.8.0",
3640
"pg": "^8.5.1",
3741
"pg-promise": "^10.9.2",
3842
"postcss": "^8.2.6",
3943
"postcss-preset-env": "^6.7.0",
4044
"react": "^17.0.1",
4145
"react-dom": "^17.0.1",
42-
"socket.io": "^3.1.1",
46+
"socket.io": "^4.0.0",
4347
"socket.io-client": "^3.1.1",
4448
"socketio": "^1.0.0",
4549
"tailwindcss": "^2.0.3",

0 commit comments

Comments
 (0)