blob: 66782de4f6aa0138874b1ad1b8256db9c69569dc (
plain) (
blame)
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
|
import { useState } from 'react';
interface GameFormData {
gameInternalName: string;
gameFormattedName: string;
gameDescription: string;
}
interface GameManagerProps {
onGameSubmit: (formData: GameFormData) => Promise<void>;
isSubmitting: boolean;
}
const GameManager = ({ onGameSubmit, isSubmitting }: GameManagerProps) => {
const [formData, setFormData] = useState<GameFormData>({
gameInternalName: '',
gameFormattedName: '',
gameDescription: ''
});
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setFormData(prev => ({
...prev,
[name]: value
}));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.gameInternalName || !formData.gameFormattedName || !formData.gameDescription) {
alert('Please fill in all fields');
return;
}
await onGameSubmit(formData);
// Reset form after successful submission
setFormData({
gameInternalName: '',
gameFormattedName: '',
gameDescription: ''
});
};
return (
<>
<p className="text-slate-300 leading-relaxed mb-6 p-4 bg-slate-800/50 rounded-md border-l-4 border-violet-500">
This form allows you to add a new game to Mirage. By default, Mirage will attempt to derive a method of showing the game's score on its own.
You may override this behavior by writing your own custom score display logic.
</p>
<form className="space-y-4" onSubmit={handleSubmit}>
<div>
<label htmlFor="gameInternalName" className="block text-sm font-medium text-slate-300 mb-2">
Game Internal Name
</label>
<input
type="text"
id="gameInternalName"
name="gameInternalName"
value={formData.gameInternalName}
onChange={handleInputChange}
className="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-md text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"
placeholder="The unique internal identifier for the game (i.e. dancerush)"
required
/>
</div>
<div>
<label htmlFor="formattedName" className="block text-sm font-medium text-slate-300 mb-2">
Formatted Name
</label>
<input
type="text"
id="gameFormattedName"
name="gameFormattedName"
value={formData.gameFormattedName}
onChange={handleInputChange}
className="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-md text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"
placeholder="The formatted/stylized name users will see (i.e DANCERUSH STARDOM)"
required
/>
</div>
<div>
<label htmlFor="formattedName" className="block text-sm font-medium text-slate-300 mb-2">
Game Description
</label>
<input
type="text"
id="gameDescription"
name="gameDescription"
value={formData.gameDescription}
onChange={handleInputChange}
className="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-md text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent"
placeholder="A brief description of the game"
required
/>
</div>
<div className="pt-4">
<button
type="submit"
disabled={isSubmitting}
className="bg-violet-600 hover:bg-violet-700 disabled:bg-violet-800 disabled:cursor-not-allowed text-white font-medium py-2 px-4 rounded-md transition-colors"
>
{isSubmitting ? 'Adding Game...' : 'Add Game'}
</button>
</div>
</form>
</>
);
};
export default GameManager;
|
