1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
import { CSSProperties, Component } from 'react';
import { io } from 'socket.io-client';
import axios from 'axios';
import { userInfo } from '../api/api';
import * as cookies from 'react-cookies';
var socket = io("http://localhost:2080/api/game/socket/");
import { NavBar } from '../components/navbar';
import { CenteredPage } from '../components/page';
import { VoerBord } from '../components/voerBord';
import { DialogBox } from '../components/dialogBox';
import { CurrentGameSettings } from '../components/gameSettings';
import { Button, SearchBar } from '../components/ui';
import { GameBar } from '../components/gameBar';
import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded';
import LinkRoundedIcon from '@material-ui/icons/LinkRounded';
var InviteButtonStyle: CSSProperties = {
backgroundColor: "var(--page-background)",
height: 160,
padding: 12
}
var InviteButtonIconStyle: CSSProperties = {
fontSize: 100,
position: "absolute",
top: 12,
left: "50%",
transform: "translateX(-50%)"
}
var InviteButtonLabelStyle: CSSProperties = {
position: "absolute",
bottom: 12,
left: "50%",
transform: "translateX(-50%)",
textAlign: "center",
color: "var(--text-alt)",
width: 136,
fontSize: 20,
userSelect: "none"
}
interface VoerGameProps {
}
class VoerGame extends Component<VoerGameProps> {
constructor(props: VoerGameProps) {
super(props);
}
board = [...Array(7 * 6)].map(() => 0);
userID = "";
move(column: number) {
console.log(column)
if(this.userID == "") {
axios.request<userInfo>({
method: "get",
url: `/api/user/info`,
headers: {"content-type": "application/json"}
})
.then(request => this.setState({ userID: request.data.id }))
.catch(() => {});
}
socket.emit("new_move", {
move: column,
token: cookies.load("token"),
gameID: "fortnite"
})
}
render() {
return <div style={{
position: "relative",
top: "50%",
transform: "translateY(-50%)",
maxWidth: "100vh",
margin: "0 auto"
}}>
<VoerBord width={7} height={6} onMove={m => this.move(Number(m))}/>
<GameBar/>
</div>
}
}
export default function GamePage() {
return (
<div>
<NavBar/>
<CenteredPage width={900} style={{ height: "100vh" }}>
<VoerGame/>
{false && <DialogBox title="Nieuw spel">
<CurrentGameSettings/>
<div style={{
marginTop: 24,
display: "grid",
gridTemplateColumns: "1fr 1fr",
gridGap: 24
}}>
<Button style={InviteButtonStyle}>
<WifiTetheringRoundedIcon style={{
color: "var(--disk-b)",
...InviteButtonIconStyle
}}/>
<h2 style={InviteButtonLabelStyle}>Willekeurige speler</h2>
</Button>
<Button style={InviteButtonStyle}>
<LinkRoundedIcon style={{
color: "var(--disk-a)",
...InviteButtonIconStyle
}}/>
<h2 style={InviteButtonLabelStyle}>Uitnodigen via link</h2>
</Button>
</div>
<SearchBar label="Zoeken in vriendenlijst"/>
</DialogBox>}
</CenteredPage>
</div>
);
}
|