Initial commit

2026-04-30 02:14:25 +00:00
commit 7090e6f01d
243 changed files with 115122 additions and 0 deletions
@@ -0,0 +1,70 @@
+import { useNavigate } from 'react-router-dom';
+import useFocusTrap from '../hooks/useFocusTrap';
+import './UpgradePrompt.css';
+
+export default function UpgradePrompt({ onClose, feature = 'this feature' }) {
+  const navigate = useNavigate();
+
+  // Focus trap with escape key handling and auto-focus
+  const modalRef = useFocusTrap(true, {
+    onEscape: onClose,
+    autoFocus: true,
+    restoreFocus: true
+  });
+
+  const handleCreateAccount = () => {
+    onClose();
+    navigate('/register');
+  };
+
+  const benefits = [
+    { icon: '💾', title: 'Save Your Progress', description: 'Keep track of your high scores and achievements' },
+    { icon: '🎮', title: 'Create Games', description: 'Design your own games with our easy wizard' },
+    { icon: '🏆', title: 'Earn Achievements', description: 'Unlock cool badges as you play and create' },
+    { icon: '👥', title: 'Follow Creators', description: 'Get notified when your favorite creators make new games' }
+  ];
+
+  return (
+    <div className="upgrade-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-labelledby="upgrade-title">
+      <div className="upgrade-modal" ref={modalRef} onClick={e => e.stopPropagation()}>
+        <button className="upgrade-close" onClick={onClose} aria-label="Close upgrade prompt">&times;</button>
+
+        <div className="upgrade-header">
+          <span className="upgrade-icon" aria-hidden="true">🌟</span>
+          <h2 id="upgrade-title">Create Your Free Account!</h2>
+          <p className="upgrade-subtitle">
+            You need an account to {feature}. It's free and only takes a minute!
+          </p>
+        </div>
+
+        <div className="upgrade-benefits">
+          <h3>With a free account, you can:</h3>
+          <ul className="benefits-list">
+            {benefits.map((benefit, index) => (
+              <li key={index} className="benefit-item">
+                <span className="benefit-icon">{benefit.icon}</span>
+                <div className="benefit-text">
+                  <strong>{benefit.title}</strong>
+                  <span>{benefit.description}</span>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="upgrade-actions">
+          <button className="btn btn-primary upgrade-btn" onClick={handleCreateAccount}>
+            Create Account
+          </button>
+          <button className="btn btn-secondary maybe-later-btn" onClick={onClose}>
+            Maybe Later
+          </button>
+        </div>
+
+        <p className="upgrade-note">
+          You can still play all games as a guest - no worries!
+        </p>
+      </div>
+    </div>
+  );
+}