nessi/cluedo-hp-webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow QR code generation for both created games and joined games using current code

Browse Source 
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:
nessi
2026-08-02 10:55:42 +02:00
parent ee8ae8829e
commit c9eae136fb
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/NewGameModal.jsx
+11 -3
View File
@@ -51,10 +51,11 @@ export default function NewGameModal({
}, [open, hasGame, gameFinished]); }, [open, hasGame, gameFinished]);
useEffect(() => { useEffect(() => {
if (!qrOpen || !created?.code) return; const qrValue = created?.code || currentCode;
QRCode.toDataURL(created.code, { width: 280, margin: 2, errorCorrectionLevel: "M", color: { dark: "#17161b", light: "#f5efdc" } }) if (!qrOpen || !qrValue) return;
QRCode.toDataURL(qrValue, { width: 280, margin: 2, errorCorrectionLevel: "M", color: { dark: "#17161b", light: "#f5efdc" } })
.then(setQrDataUrl).catch(() => setQrDataUrl("")); .then(setQrDataUrl).catch(() => setQrDataUrl(""));
}, [qrOpen, created?.code]); }, [qrOpen, created?.code, currentCode]);
useEffect(() => { useEffect(() => {
if (!scannerOpen) return undefined; if (!scannerOpen) return undefined;
@@ -215,6 +216,13 @@ export default function NewGameModal({
> >
⧉ {t("copy")} {language === "en" ? "code" : "Code"} ⧉ {t("copy")} {language === "en" ? "code" : "Code"}
</button> </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>
<div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}> <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>