games

2026-08-07 13:58:26 -04:00 · 2026-07-11 12:20:50 +02:00
parent e6ee8e7648
commit 6f369f7a3b
5 changed files with 137 additions and 18 deletions
@@ -0,0 +1,95 @@
+import Dialog from './Dialog'
+import DialogHeader from './DialogHeader'
+import DialogBody from './DialogBody'
+import DialogFooter from './DialogFooter'
+import DialogActions from './DialogActions'
+import { Button, ButtonVariant } from '@/components/buttons'
+import { Icon, info } from '@/components/icons'
+import VotesDisplay, { GameVotes } from '@/components/common/VotesDisplay'
+
+export interface UnlockerChoiceOption {
+  key: string
+  title: string
+  badge: 'recommended' | 'alternative'
+  description: string
+  buttonLabel: string
+  buttonVariant: ButtonVariant
+  onSelect: () => void
+  /** Omit entirely for unlockers that don't have community vote data (e.g. Epic's) */
+  votes?: GameVotes | null
+}
+
+export interface UnlockerChoiceDialogProps {
+  visible: boolean
+  gameTitle: string | null
+  onClose: () => void
+  options: UnlockerChoiceOption[]
+}
+
+/**
+ * Generic "choose which unlocker to install" dialog. Used for both the
+ * Steam choice (CreamLinux vs SmokeAPI, with vote data) and the Epic choice
+ * (ScreamAPI vs Koaloader, no votes) - they only differ in copy and options,
+ * not in structure.
+ */
+const UnlockerChoiceDialog = ({ visible, gameTitle, onClose, options }: UnlockerChoiceDialogProps) => {
+  return (
+    <Dialog visible={visible} onClose={onClose} size="medium">
+      <DialogHeader onClose={onClose} hideCloseButton={true}>
+        <div className="unlocker-selection-header">
+          <h3>Choose Unlocker</h3>
+        </div>
+      </DialogHeader>
+
+      <DialogBody>
+        <div className="unlocker-selection-content">
+          <p className="game-title-info">
+            Select which unlocker to install for <strong>{gameTitle}</strong>:
+          </p>
+
+          <div className="unlocker-options">
+            {options.map((option) => (
+              <div
+                key={option.key}
+                className={`unlocker-option ${option.badge === 'recommended' ? 'recommended' : ''}`}
+              >
+                <div className="option-header">
+                  <h4>{option.title}</h4>
+                  <span
+                    className={
+                      option.badge === 'recommended' ? 'recommended-badge' : 'alternative-badge'
+                    }
+                  >
+                    {option.badge === 'recommended' ? 'Recommended' : 'Alternative'}
+                  </span>
+                </div>
+                <p className="option-description">{option.description}</p>
+                {option.votes !== undefined && <VotesDisplay votes={option.votes} />}
+                <Button variant={option.buttonVariant} onClick={option.onSelect} fullWidth>
+                  {option.buttonLabel}
+                </Button>
+              </div>
+            ))}
+          </div>
+
+          <div className="selection-info">
+            <Icon name={info} variant="solid" size="md" />
+            <span>
+              You can always uninstall and try the other option if one doesn't work properly.
+            </span>
+          </div>
+        </div>
+      </DialogBody>
+
+      <DialogFooter>
+        <DialogActions>
+          <Button variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+        </DialogActions>
+      </DialogFooter>
+    </Dialog>
+  )
+}
+
+export default UnlockerChoiceDialog