Skip to content

Commit 4fe7739

Browse files
ScavieFaeclaude
ScavieFae
and
claude
committed
Fix QR codes (swap to qrcode-generator lib) + simplify tournament login page
QR: The qrcode npm lib/browser.min.js is CommonJS — no global exposed. Switched to qrcode-generator which has a proper UMD build. Login page: Remove admin special-casing, registration form, fighter cards. Everyone sees: MON balance, Watch/Bet buttons, all tournaments list. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 3950be9 commit 4fe7739

3 files changed

Lines changed: 222 additions & 548 deletions

File tree

‎tournaments/viewer.html‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
99
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
1010
<script src="https://cdn.jsdelivr.net/npm/fflate@0.8.2/umd/index.js"></script>
11-
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.4/lib/browser.min.js"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.js"></script>
1212
<style>
1313
* { box-sizing: border-box; margin: 0; padding: 0; }
1414

@@ -653,10 +653,18 @@
653653
.qr-img {
654654
width: 100px;
655655
height: 100px;
656-
display: block;
656+
display: flex;
657+
align-items: center;
658+
justify-content: center;
657659
border-radius: 4px;
658660
background: #fff;
659661
padding: 4px;
662+
overflow: hidden;
663+
}
664+
.qr-img img {
665+
width: 100%;
666+
height: 100%;
667+
image-rendering: pixelated;
660668
}
661669

662670
.qr-label {
@@ -843,7 +851,7 @@
843851
</ul>
844852
</div>
845853
<div class="qr-panel">
846-
<canvas class="qr-img" id="market-qr-canvas"></canvas>
854+
<div class="qr-img" id="market-qr-canvas"></div>
847855
<div class="qr-label">Scan to Bet</div>
848856
<div class="qr-url" id="market-qr-url"></div>
849857
</div>
@@ -855,7 +863,7 @@
855863
<!-- Fighter login QR — bottom left -->
856864
<div class="fighter-qr">
857865
<div class="qr-panel">
858-
<canvas class="qr-img" id="login-qr-canvas"></canvas>
866+
<div class="qr-img" id="login-qr-canvas"></div>
859867
<div class="qr-label">Fighter Login</div>
860868
<div class="qr-url" id="login-qr-url"></div>
861869
</div>
@@ -2107,22 +2115,26 @@
21072115

21082116
// ── QR Codes ──────────────────────────────────────────────────
21092117

2110-
// QR codes — generated client-side, updated when tournament ID is known
2118+
// QR codes — generated client-side via qrcode-generator
2119+
function makeQR(text) {
2120+
var qr = qrcode(0, 'M');
2121+
qr.addData(text);
2122+
qr.make();
2123+
return qr.createImgTag(3, 0); // cellSize=3, margin=0
2124+
}
2125+
21112126
function renderQRCodes(tournamentId) {
21122127
const base = params.get('site_url') || location.origin;
21132128
const betUrl = params.get('bet_url') || (base + '/tournament/bet');
21142129
const loginUrl = params.get('login_url') || (base + '/tournament/play');
21152130

2116-
const qrOpts = { width: 200, margin: 1, color: { dark: '#000', light: '#fff' } };
2117-
2118-
QRCode.toCanvas(document.getElementById('market-qr-canvas'), betUrl, qrOpts, function(err) {
2119-
if (err) console.warn('[qr] bet QR failed:', err);
2120-
});
2131+
try {
2132+
document.getElementById('market-qr-canvas').innerHTML = makeQR(betUrl);
2133+
document.getElementById('login-qr-canvas').innerHTML = makeQR(loginUrl);
2134+
} catch(e) {
2135+
console.warn('[qr] QR generation failed:', e);
2136+
}
21212137
document.getElementById('market-qr-url').textContent = betUrl;
2122-
2123-
QRCode.toCanvas(document.getElementById('login-qr-canvas'), loginUrl, qrOpts, function(err) {
2124-
if (err) console.warn('[qr] login QR failed:', err);
2125-
});
21262138
document.getElementById('login-qr-url').textContent = loginUrl;
21272139
}
21282140
renderQRCodes(null);

‎web/public/tournament/index.html‎

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
99
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
1010
<script src="https://cdn.jsdelivr.net/npm/fflate@0.8.2/umd/index.js"></script>
11-
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.4/lib/browser.min.js"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.js"></script>
1212
<style>
1313
* { box-sizing: border-box; margin: 0; padding: 0; }
1414

@@ -653,10 +653,18 @@
653653
.qr-img {
654654
width: 100px;
655655
height: 100px;
656-
display: block;
656+
display: flex;
657+
align-items: center;
658+
justify-content: center;
657659
border-radius: 4px;
658660
background: #fff;
659661
padding: 4px;
662+
overflow: hidden;
663+
}
664+
.qr-img img {
665+
width: 100%;
666+
height: 100%;
667+
image-rendering: pixelated;
660668
}
661669

662670
.qr-label {
@@ -843,7 +851,7 @@
843851
</ul>
844852
</div>
845853
<div class="qr-panel">
846-
<canvas class="qr-img" id="market-qr-canvas"></canvas>
854+
<div class="qr-img" id="market-qr-canvas"></div>
847855
<div class="qr-label">Scan to Bet</div>
848856
<div class="qr-url" id="market-qr-url"></div>
849857
</div>
@@ -855,7 +863,7 @@
855863
<!-- Fighter login QR — bottom left -->
856864
<div class="fighter-qr">
857865
<div class="qr-panel">
858-
<canvas class="qr-img" id="login-qr-canvas"></canvas>
866+
<div class="qr-img" id="login-qr-canvas"></div>
859867
<div class="qr-label">Fighter Login</div>
860868
<div class="qr-url" id="login-qr-url"></div>
861869
</div>
@@ -2107,22 +2115,26 @@
21072115

21082116
// ── QR Codes ──────────────────────────────────────────────────
21092117

2110-
// QR codes — generated client-side, updated when tournament ID is known
2118+
// QR codes — generated client-side via qrcode-generator
2119+
function makeQR(text) {
2120+
var qr = qrcode(0, 'M');
2121+
qr.addData(text);
2122+
qr.make();
2123+
return qr.createImgTag(3, 0); // cellSize=3, margin=0
2124+
}
2125+
21112126
function renderQRCodes(tournamentId) {
21122127
const base = params.get('site_url') || location.origin;
21132128
const betUrl = params.get('bet_url') || (base + '/tournament/bet');
21142129
const loginUrl = params.get('login_url') || (base + '/tournament/play');
21152130

2116-
const qrOpts = { width: 200, margin: 1, color: { dark: '#000', light: '#fff' } };
2117-
2118-
QRCode.toCanvas(document.getElementById('market-qr-canvas'), betUrl, qrOpts, function(err) {
2119-
if (err) console.warn('[qr] bet QR failed:', err);
2120-
});
2131+
try {
2132+
document.getElementById('market-qr-canvas').innerHTML = makeQR(betUrl);
2133+
document.getElementById('login-qr-canvas').innerHTML = makeQR(loginUrl);
2134+
} catch(e) {
2135+
console.warn('[qr] QR generation failed:', e);
2136+
}
21212137
document.getElementById('market-qr-url').textContent = betUrl;
2122-
2123-
QRCode.toCanvas(document.getElementById('login-qr-canvas'), loginUrl, qrOpts, function(err) {
2124-
if (err) console.warn('[qr] login QR failed:', err);
2125-
});
21262138
document.getElementById('login-qr-url').textContent = loginUrl;
21272139
}
21282140
renderQRCodes(null);

0 commit comments

Comments
 (0)