diff --git a/public/serv-nero.png b/public/serv-nero.png new file mode 100644 index 0000000..041c65b Binary files /dev/null and b/public/serv-nero.png differ diff --git a/src/referto.js b/src/referto.js index c2a59cf..5524804 100644 --- a/src/referto.js +++ b/src/referto.js @@ -34,11 +34,11 @@ export function buildRefertoHtml(state, now = new Date()) { return `
-
${nomi.home}
+
${nomi.home}
${formazioneSet.home.map(giocatoreHtml).join('')}
-
${nomi.guest}
+
${nomi.guest}
${formazioneSet.guest.map(giocatoreHtml).join('')}
` @@ -79,7 +79,11 @@ export function buildRefertoHtml(state, now = new Date()) { const vinc = vincitoreSet(s) const nomeVinc = vinc === 'h' ? nomi.home : vinc === 'g' ? nomi.guest : '' - const etichettaVinc = nomeVinc ? `  ·  vinto da ${nomeVinc}` : '' + const etichettaVinc = nomeVinc ? `vinto da ${nomeVinc}` : '' + + const servIcon = 'Servizio' + const servHomeIcon = s.serv === 'h' ? servIcon : '' + const servGuestIcon = s.serv === 'g' ? servIcon : '' const puntiHtml = punti.map(p => `${p.h}-${p.g}` @@ -90,7 +94,8 @@ export function buildRefertoHtml(state, now = new Date()) {
SET${i + 1}
- ${nomi.home} ${h} · ${g} ${nomi.guest}${etichettaVinc} + ${servHomeIcon}${nomi.home} ${h} · ${g} ${nomi.guest}${servGuestIcon} + ${etichettaVinc}
Formazione di partenza
@@ -130,7 +135,7 @@ export function buildRefertoHtml(state, now = new Date()) { .meta { font-size: 11px; color: #333; margin-top: 3px; text-transform: uppercase; letter-spacing: 0.5px; } .squadre-row { display: flex; align-items: center; gap: 14px; } - .badge-ab { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #111; font-weight: bold; font-size: 12px; flex-shrink: 0; } + .badge-ab { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 0 8px; border-radius: 11px; border: 2px solid #111; font-weight: bold; font-size: 12px; flex-shrink: 0; } .nome-sq { font-size: 18px; font-weight: bold; } .vs { font-size: 12px; color: #666; font-weight: bold; } @@ -143,12 +148,14 @@ export function buildRefertoHtml(state, now = new Date()) { .set-barra span:first-child { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: bold; font-size: 11px; letter-spacing: 2px; } .set-numero { font-weight: bold; font-size: 15px; } .set-corpo { flex: 1; min-width: 0; } - .set-header { background: #eaf7fb; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid #111; } + .set-header { background: #eaf7fb; padding: 6px 12px; font-size: 13px; border-bottom: 1px solid #111; display: flex; justify-content: space-between; align-items: center; gap: 10px; } + .set-vinc { flex-shrink: 0; } + .serv-icon { width: 12px; height: 12px; vertical-align: middle; margin: 0 3px; } .punti-grid { display: flex; flex-wrap: wrap; gap: 0; padding: 0; border-top: 1px solid #111; } .punto { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 3px 4px; font-size: 11px; font-family: 'Courier New', monospace; white-space: nowrap; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; } - .punto-h { background: #d0e8ff; color: #003a6e; } - .punto-g { background: #ffddc0; color: #6e2700; } + .punto-h { background: #f5c518; color: #111; } + .punto-g { background: #2196f3; color: #fff; } .eventi-set { padding: 6px 12px; border-bottom: 1px solid #111; } .eventi-label { font-size: 10px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; color: #0f8faf; margin-bottom: 4px; } @@ -160,6 +167,8 @@ export function buildRefertoHtml(state, now = new Date()) { .form-row { display: flex; gap: 40px; } .form-team { flex: 1; } .form-team-name { font-weight: bold; font-size: 12px; margin-bottom: 5px; } + .form-team-name-h { color: #f5c518; } + .form-team-name-g { color: #2196f3; } .giocatori { display: flex; gap: 5px; flex-wrap: wrap; } .giocatore { background: #fff; border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; border: 2px solid #111; } @@ -181,11 +190,11 @@ export function buildRefertoHtml(state, now = new Date()) {
${dataOra}  ·  Modalità: ${modalitaPartita}
- A + Casa ${nomi.home} vs ${nomi.guest} - B + Ospiti
@@ -195,7 +204,7 @@ export function buildRefertoHtml(state, now = new Date()) {
Risultato finale
- + ${risultatoSetHtml}
SetAB
Set${nomi.home}${nomi.guest}
Vince ${setVinti.home >= setVinti.guest ? nomi.home : nomi.guest}  ${setVinti.home} – ${setVinti.guest}
@@ -219,5 +228,7 @@ export function generaReferto(state) { const w = window.open('', '_blank') w.document.write(html) w.document.close() - w.print() + // Aspetta il caricamento delle immagini (icona servizio) prima di stampare, + // altrimenti la stampa parte con risorse ancora in caricamento e appaiono vuote. + w.addEventListener('load', () => w.print()) } diff --git a/tests/component/referto-generaReferto.test.js b/tests/component/referto-generaReferto.test.js index 189cd11..be9a6a9 100644 --- a/tests/component/referto-generaReferto.test.js +++ b/tests/component/referto-generaReferto.test.js @@ -11,10 +11,12 @@ describe('generaReferto (referto.js)', () => { vi.restoreAllMocks() }) - it('apre una nuova scheda, scrive il referto e avvia la stampa', () => { + it('apre una nuova scheda, scrive il referto e avvia la stampa dopo il caricamento', () => { + const listeners = {} const popup = { document: { write: vi.fn(), close: vi.fn() }, print: vi.fn(), + addEventListener: vi.fn((evt, cb) => { listeners[evt] = cb }), } const openSpy = vi.spyOn(window, 'open').mockReturnValue(popup) @@ -26,6 +28,9 @@ describe('generaReferto (referto.js)', () => { expect(popup.document.write).toHaveBeenCalledTimes(1) expect(popup.document.write.mock.calls[0][0]).toContain('Antoniana') expect(popup.document.close).toHaveBeenCalledTimes(1) + expect(popup.print).not.toHaveBeenCalled() + + listeners.load() expect(popup.print).toHaveBeenCalledTimes(1) }) })