aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components')
-rw-r--r--frontend/src/components/CollapsibleSection.tsx40
-rw-r--r--frontend/src/components/GameManager.tsx113
-rw-r--r--frontend/src/components/InviteCodeManager.tsx128
-rw-r--r--frontend/src/components/UnauthorizedAccess.tsx12
4 files changed, 293 insertions, 0 deletions
diff --git a/frontend/src/components/CollapsibleSection.tsx b/frontend/src/components/CollapsibleSection.tsx
new file mode 100644
index 0000000..08df24f
--- /dev/null
+++ b/frontend/src/components/CollapsibleSection.tsx
@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+
+interface CollapsibleSectionProps {
+ title: string;
+ isOpen: boolean;
+ onToggle: () => void;
+ children: ReactNode;
+}
+
+const CollapsibleSection = ({ title, isOpen, onToggle, children }: CollapsibleSectionProps) => {
+ return (
+ <div className="mb-8">
+ <div className="bg-slate-900 rounded-lg border border-slate-700">
+ <button
+ className="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-slate-800 transition-colors rounded-lg"
+ onClick={onToggle}
+ >
+ <h2 className="text-xl font-semibold text-white">{title}</h2>
+ <svg
+ className={`w-5 h-5 text-slate-400 transform transition-transform ${
+ isOpen ? 'rotate-180' : ''
+ }`}
+ fill="none"
+ stroke="currentColor"
+ viewBox="0 0 24 24"
+ >
+ <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+ </svg>
+ </button>
+ {isOpen && (
+ <div className="px-6 pb-6">
+ {children}
+ </div>
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default CollapsibleSection; \ No newline at end of file
diff --git a/frontend/src/components/GameManager.tsx b/frontend/src/components/GameManager.tsx
new file mode 100644
index 0000000..66782de
--- /dev/null
+++ b/frontend/src/components/GameManager.tsx
@@ -0,0 +1,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; \ No newline at end of file
diff --git a/frontend/src/components/InviteCodeManager.tsx b/frontend/src/components/InviteCodeManager.tsx
new file mode 100644
index 0000000..a281366
--- /dev/null
+++ b/frontend/src/components/InviteCodeManager.tsx
@@ -0,0 +1,128 @@
+import { useState } from 'react';
+
+interface InviteFormData {
+ uses: string;
+ code: string;
+}
+
+interface InviteCodeManagerProps {
+ onInviteSubmit: (formData: InviteFormData) => Promise<void>;
+ isCreatingInvite: boolean;
+ createdInviteCode: string | null;
+}
+
+const InviteCodeManager = ({ onInviteSubmit, isCreatingInvite, createdInviteCode }: InviteCodeManagerProps) => {
+ const [inviteFormData, setInviteFormData] = useState<InviteFormData>({
+ uses: '',
+ code: ''
+ });
+
+ const handleInviteInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ const { name, value } = e.target;
+ setInviteFormData(prev => ({
+ ...prev,
+ [name]: value
+ }));
+ };
+
+ const handleSubmit = async (e: React.FormEvent) => {
+ e.preventDefault();
+
+ if (!inviteFormData.uses) {
+ alert('Please specify the number of uses for the invite code');
+ return;
+ }
+
+ const uses = parseInt(inviteFormData.uses);
+ if (isNaN(uses) || uses <= 0) {
+ alert('Please enter a valid number of uses');
+ return;
+ }
+
+ await onInviteSubmit(inviteFormData);
+
+ // Reset form after successful submission
+ setInviteFormData({
+ uses: '',
+ code: ''
+ });
+ };
+
+ const copyToClipboard = (text: string) => {
+ navigator.clipboard.writeText(text).then(() => {
+ alert('Invite code copied to clipboard!');
+ }).catch(() => {
+ alert('Failed to copy to clipboard');
+ });
+ };
+
+ return (
+ <>
+ <p className="text-slate-300 leading-relaxed mb-6 p-4 bg-slate-800/50 rounded-md border-l-4 border-violet-500">
+ Generate invite codes to allow new users to register. You can specify how many times the code can be used
+ and optionally set a custom code (otherwise one will be generated automatically).
+ </p>
+
+ {createdInviteCode && (
+ <div className="mb-6 p-4 bg-green-900/30 border border-green-700 rounded-md">
+ <h3 className="text-green-400 font-semibold mb-2">Invite Code Created Successfully!</h3>
+ <div className="flex items-center gap-2">
+ <code className="bg-slate-800 px-3 py-2 rounded text-green-300 font-mono">
+ {createdInviteCode}
+ </code>
+ <button
+ onClick={() => copyToClipboard(createdInviteCode)}
+ className="bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-sm transition-colors"
+ >
+ Copy
+ </button>
+ </div>
+ </div>
+ )}
+
+ <form className="space-y-4" onSubmit={handleSubmit}>
+ <div>
+ <label htmlFor="uses" className="block text-sm font-medium text-slate-300 mb-2">
+ Number of Uses
+ </label>
+ <input
+ type="number"
+ id="uses"
+ name="uses"
+ value={inviteFormData.uses}
+ onChange={handleInviteInputChange}
+ 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="How many times this code can be used"
+ min="1"
+ required
+ />
+ </div>
+ <div>
+ <label htmlFor="code" className="block text-sm font-medium text-slate-300 mb-2">
+ Custom Code (Optional)
+ </label>
+ <input
+ type="text"
+ id="code"
+ name="code"
+ value={inviteFormData.code}
+ onChange={handleInviteInputChange}
+ 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="Leave blank to generate automatically"
+ />
+ </div>
+ <div className="pt-4">
+ <button
+ type="submit"
+ disabled={isCreatingInvite}
+ 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"
+ >
+ {isCreatingInvite ? 'Creating Invite Code...' : 'Create Invite Code'}
+ </button>
+ </div>
+ </form>
+ </>
+ );
+};
+
+export default InviteCodeManager; \ No newline at end of file
diff --git a/frontend/src/components/UnauthorizedAccess.tsx b/frontend/src/components/UnauthorizedAccess.tsx
new file mode 100644
index 0000000..a26afd1
--- /dev/null
+++ b/frontend/src/components/UnauthorizedAccess.tsx
@@ -0,0 +1,12 @@
+const UnauthorizedAccess = () => {
+ return (
+ <div className="min-h-screen bg-slate-950 flex items-center justify-center">
+ <div className="text-center">
+ <div className="w-8 h-8 border-2 border-violet-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+ <p className="text-slate-400">You are not authorized to access this page.</p>
+ </div>
+ </div>
+ );
+};
+
+export default UnauthorizedAccess; \ No newline at end of file
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage