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
|
import React from 'react';
import { UploadRunContent } from '../types/Content';
import '../css/UploadRunDialog.css';
import { Game } from '../types/Game';
import Games from '../pages/Games';
import { Map } from '../types/Map';
import { API } from '../api/Api';
interface UploadRunDialogProps {
open: boolean;
onClose: () => void;
mapID?: number;
games: Game[];
}
const UploadRunDialog: React.FC<UploadRunDialogProps> = ({ open, onClose, mapID, games }) => {
const [uploadRunContent, setUploadRunContent] = React.useState<UploadRunContent>({
map_id: 0,
host_demo: null,
partner_demo: null,
partner_id: undefined,
is_partner_orange: undefined,
});
const [selectedGameID, setSelectedGameID] = React.useState<number>(0);
const [selectedGameMaps, setSelectedGameMaps] = React.useState<Map[]>([]);
const [loading, setLoading] = React.useState<boolean>(false);
const _handle_game_select = async (game_id: string) => {
setLoading(true);
const gameMaps = await API.get_game_maps(game_id);
setSelectedGameMaps(gameMaps);
setUploadRunContent({
...uploadRunContent,
map_id: gameMaps[0].id,
});
setSelectedGameID(parseInt(game_id) - 1);
setLoading(false);
};
React.useEffect(() => {
_handle_game_select("1"); // a different approach?
}, []);
if (open) {
return (
<>
<div id="upload-run-block" />
<div id='upload-run-menu'>
<div id='upload-run-menu-add'>
<div id='upload-run-route-category'>
<span>Select Game</span>
<select onChange={(e) => _handle_game_select(e.target.value)}>
{games.map((game) => (
<option key={game.id} value={game.id}>{game.name}</option>
))}
</select>
{
!loading &&
(
<>
<span>Select Map</span>
<select onChange={(e) => setUploadRunContent({
...uploadRunContent,
map_id: parseInt(e.target.value),
})}>
{selectedGameMaps && selectedGameMaps.map((gameMap) => (
<option key={gameMap.id} value={gameMap.id}>{gameMap.name}</option>
))}
</select>
<span>Host Demo</span>
<input type="file" name="host_demo" id="host_demo" accept=".dem" />
{
games[selectedGameID].is_coop &&
(
<>
<span>Partner Demo</span>
<input type="file" name="partner_demo" id="partner_demo" accept=".dem" />
</>
)
}
<button onClick={() => onClose()}>Submit</button>
<button onClick={() => onClose()}>Cancel</button>
</>
)
}
</div>
</div>
</div>
</>
);
}
return (
<></>
);
};
export default UploadRunDialog;
|