From f0e80463fa23a6a52623b7507d6959d19af6ae07 Mon Sep 17 00:00:00 2001 From: Pinapelz Date: Sun, 9 Nov 2025 20:15:12 -0800 Subject: clean up admin page into components --- frontend/src/components/CollapsibleSection.tsx | 40 ++++++++ frontend/src/components/GameManager.tsx | 113 ++++++++++++++++++++++ frontend/src/components/InviteCodeManager.tsx | 128 +++++++++++++++++++++++++ frontend/src/components/UnauthorizedAccess.tsx | 12 +++ 4 files changed, 293 insertions(+) create mode 100644 frontend/src/components/CollapsibleSection.tsx create mode 100644 frontend/src/components/GameManager.tsx create mode 100644 frontend/src/components/InviteCodeManager.tsx create mode 100644 frontend/src/components/UnauthorizedAccess.tsx (limited to 'frontend/src/components') 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 ( +
+
+ + {isOpen && ( +
+ {children} +
+ )} +
+
+ ); +}; + +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; + isSubmitting: boolean; +} + +const GameManager = ({ onGameSubmit, isSubmitting }: GameManagerProps) => { + const [formData, setFormData] = useState({ + gameInternalName: '', + gameFormattedName: '', + gameDescription: '' + }); + + const handleInputChange = (e: React.ChangeEvent) => { + 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 ( + <> +

+ 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. +

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + ); +}; + +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; + isCreatingInvite: boolean; + createdInviteCode: string | null; +} + +const InviteCodeManager = ({ onInviteSubmit, isCreatingInvite, createdInviteCode }: InviteCodeManagerProps) => { + const [inviteFormData, setInviteFormData] = useState({ + uses: '', + code: '' + }); + + const handleInviteInputChange = (e: React.ChangeEvent) => { + 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 ( + <> +

+ 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). +

+ + {createdInviteCode && ( +
+

Invite Code Created Successfully!

+
+ + {createdInviteCode} + + +
+
+ )} + +
+
+ + +
+
+ + +
+
+ +
+
+ + ); +}; + +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 ( +
+
+
+

You are not authorized to access this page.

+
+
+ ); +}; + +export default UnauthorizedAccess; \ No newline at end of file -- cgit v1.2.3