Allow QR code generation for both created games and joined games using current code
Extended QR code functionality to work with `currentCode` (joined games) in addition to `created.code` (created games). Updated QR generation effect to use fallback value and added dependencies. Moved QR toggle button and display from created-game-only section to shared code display area, enabling QR codes for all game participants.
This commit is contained in:
@@ -51,10 +51,11 @@ export default function NewGameModal({
|
||||
}, [open, hasGame, gameFinished]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!qrOpen || !created?.code) return;
|
||||
QRCode.toDataURL(created.code, { width: 280, margin: 2, errorCorrectionLevel: "M", color: { dark: "#17161b", light: "#f5efdc" } })
|
||||
const qrValue = created?.code || currentCode;
|
||||
if (!qrOpen || !qrValue) return;
|
||||
QRCode.toDataURL(qrValue, { width: 280, margin: 2, errorCorrectionLevel: "M", color: { dark: "#17161b", light: "#f5efdc" } })
|
||||
.then(setQrDataUrl).catch(() => setQrDataUrl(""));
|
||||
}, [qrOpen, created?.code]);
|
||||
}, [qrOpen, created?.code, currentCode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!scannerOpen) return undefined;
|
||||
@@ -215,6 +216,13 @@ export default function NewGameModal({
|
||||
>
|
||||
⧉ {t("copy")} {language === "en" ? "code" : "Code"}
|
||||
</button>
|
||||
<button onClick={() => setQrOpen((value) => !value)} style={styles.secondaryBtn} disabled={!codeToShow}>
|
||||
▣ {qrOpen ? (language === "en" ? "Hide QR code" : "QR-Code ausblenden") : (language === "en" ? "Create QR code" : "QR-Code erstellen")}
|
||||
</button>
|
||||
{qrOpen && qrDataUrl && <div style={{ marginTop: 4, display: "grid", justifyItems: "center", gap: 7 }}>
|
||||
<img src={qrDataUrl} alt={language === "en" ? "Game QR code" : "Spiel-QR-Code"} style={{ width: 220, height: 220, borderRadius: 10, padding: 8, background: "#f5efdc" }} />
|
||||
<div style={{ color: stylesTokens.textDim, fontSize: 12 }}>{language === "en" ? "Scan this code to join the game." : "Scanne diesen Code, um dem Spiel beizutreten."}</div>
|
||||
</div>}
|
||||
</div>
|
||||
|
||||
<div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
|
||||
|
||||
Reference in New Issue
Block a user