{"id":189,"date":"2026-03-16T16:45:26","date_gmt":"2026-03-16T16:45:26","guid":{"rendered":"https:\/\/tjudge.com\/?page_id=189"},"modified":"2026-03-28T10:43:37","modified_gmt":"2026-03-28T10:43:37","slug":"home","status":"publish","type":"page","link":"https:\/\/tjudge.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n TimeJudge \u2014 Wireless Archery Timing<\/title>\r\n\r\n <!-- Open Graph \/ Facebook -->\r\n <meta property=\"og:type\" content=\"website\">\r\n <meta property=\"og:url\" content=\"https:\/\/tjudge.com\/\">\r\n <meta property=\"og:title\" content=\"TimeJudge \u2014 Wireless Archery Timing Systems\">\r\n <meta property=\"og:description\" content=\"Tournament timing, deployed in minutes. The wireless archery timing system used at real competitions nationwide.\">\r\n <meta property=\"og:image\" content=\"https:\/\/tjudge.com\/wp-content\/uploads\/2026\/03\/TimeJudge-Card_scraped.jpg\">\r\n <meta property=\"og:image:width\" content=\"2560\">\r\n <meta property=\"og:image:height\" content=\"1440\">\r\n\r\n <!-- Twitter Card -->\r\n <meta name=\"twitter:card\" content=\"summary_large_image\">\r\n <meta name=\"twitter:title\" content=\"TimeJudge \u2014 Wireless Archery Timing Systems\">\r\n <meta name=\"twitter:description\" content=\"Tournament timing, deployed in minutes.\">\r\n <meta name=\"twitter:image\" content=\"https:\/\/tjudge.com\/wp-content\/uploads\/2026\/03\/TimeJudge-Card_scraped.jpg\">\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Baskervville:ital@1&family=Playfair+Display:ital,wght@0,700;1,700&family=Barlow:wght@300;400;600;700&display=swap');\r\n\r\n \/* \u2500\u2500 Reset & base \u2500\u2500 *\/\r\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n :root {\r\n --gold: #c9a84c;\r\n --gold-dim: #8a6e2f;\r\n --bg: #080808;\r\n --bg2: #0d0d0d;\r\n --bg3: #111111;\r\n --border: #1e1e1e;\r\n --text: #f0ece0;\r\n --muted: #777;\r\n --dim: #333;\r\n --green: #00ff41;\r\n --amber: #ffcc77;\r\n --red-led: #ff3300;\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: 'Barlow', sans-serif;\r\n background: var(--bg);\r\n color: var(--text);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NAVIGATION\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n nav {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n background: rgba(8,8,8,0.96);\r\n backdrop-filter: blur(8px);\r\n border-bottom: 1px solid var(--border);\r\n padding: 0 3rem 0 14rem; \/* left padding clears the floating logo box *\/\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n height: 56px;\r\n overflow: visible; \/* allow logo box to drop below nav line *\/\r\n }\r\n\r\n \/* Nav logo \u2014 floating box straddling nav\/hero boundary *\/\r\n .nav-logo {\r\n position: absolute;\r\n top: 0;\r\n left: 2rem;\r\n background: #080808;\r\n border: 1px solid rgba(201,168,76,0.25);\r\n border-top: none;\r\n border-radius: 0 0 8px 8px;\r\n padding: 0.4rem 1rem 0.8rem;\r\n display: flex;\r\n flex-direction: column;\r\n line-height: 0.85;\r\n color: var(--gold);\r\n text-shadow: 0 0 30px rgba(201,168,76,0.3);\r\n z-index: 101;\r\n text-decoration: none;\r\n }\r\n .nav-logo .word-time {\r\n font-family: 'Baskervville', serif;\r\n font-style: italic;\r\n font-weight: 400;\r\n font-size: 3.2rem;\r\n letter-spacing: 0.06em;\r\n -webkit-text-stroke: 0.4px #c9a84c;\r\n }\r\n .nav-logo .word-judge {\r\n font-family: 'Baskervville', serif;\r\n font-style: italic;\r\n font-weight: 400;\r\n font-size: 2.4rem;\r\n letter-spacing: 0.02em;\r\n opacity: 0.9;\r\n padding-left: 0.35em;\r\n -webkit-text-stroke: 0.3px #c9a84c;\r\n }\r\n\r\n .nav-links {\r\n display: flex;\r\n gap: 2.5rem;\r\n list-style: none;\r\n }\r\n\r\n .nav-links a {\r\n color: var(--muted);\r\n text-decoration: none;\r\n font-size: 0.78rem;\r\n letter-spacing: 0.14em;\r\n text-transform: uppercase;\r\n white-space: nowrap; \/* prevent nav items wrapping onto two lines *\/\r\n transition: color 0.2s;\r\n }\r\n\r\n .nav-links a:hover { color: var(--gold); }\r\n\r\n \/* \u2500\u2500 Hamburger button \u2500\u2500 *\/\r\n .nav-hamburger {\r\n display: none; \/* hidden on desktop *\/\r\n flex-direction: column;\r\n justify-content: space-between;\r\n width: 24px;\r\n height: 18px;\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 0;\r\n flex-shrink: 0;\r\n }\r\n\r\n .nav-hamburger span {\r\n display: block;\r\n width: 100%;\r\n height: 2px;\r\n background: var(--muted);\r\n border-radius: 2px;\r\n transition: background 0.2s;\r\n }\r\n\r\n .nav-hamburger:hover span { background: var(--gold); }\r\n\r\n \/* \u2500\u2500 Mobile dropdown menu \u2500\u2500 *\/\r\n .nav-dropdown {\r\n display: none;\r\n position: absolute;\r\n top: 56px; \/* flush below nav bar *\/\r\n right: 0; \/* right-aligned *\/\r\n left: auto; \/* don't stretch full width *\/\r\n min-width: 200px;\r\n background: rgba(8,8,8,0.98);\r\n border: 1px solid var(--border);\r\n border-top: none;\r\n border-radius: 0 0 0 8px;\r\n padding: 0.4rem 1.2rem;\r\n z-index: 99;\r\n flex-direction: column;\r\n gap: 0;\r\n }\r\n\r\n .nav-dropdown.open { display: flex; }\r\n\r\n .nav-dropdown a {\r\n color: #f0ece0; \/* white *\/\r\n text-decoration: none;\r\n font-size: 0.78rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n padding: 0.45rem 0; \/* compact *\/\r\n border-bottom: 1px solid rgba(255,255,255,0.06);\r\n transition: color 0.2s;\r\n text-align: right; \/* right-justify text *\/\r\n }\r\n\r\n .nav-dropdown a:last-child { border-bottom: none; }\r\n .nav-dropdown a:hover { color: var(--gold); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .hero {\r\n position: relative;\r\n min-height: 88vh;\r\n display: flex;\r\n align-items: center;\r\n overflow: hidden;\r\n background: var(--bg2);\r\n z-index: 1;\r\n }\r\n\r\n \/* Subtle gold grid texture *\/\r\n .hero-grid {\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(rgba(201,168,76,0.03) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(201,168,76,0.03) 1px, transparent 1px);\r\n background-size: 48px 48px;\r\n pointer-events: none;\r\n }\r\n\r\n \/* Atmospheric radial glow *\/\r\n .hero-glow {\r\n position: absolute;\r\n inset: 0;\r\n background:\r\n radial-gradient(ellipse 60% 50% at 70% 50%, rgba(201,168,76,0.04) 0%, transparent 70%),\r\n radial-gradient(ellipse 40% 60% at 20% 80%, rgba(255,100,0,0.03) 0%, transparent 60%);\r\n pointer-events: none;\r\n }\r\n\r\n .hero-inner {\r\n position: relative;\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 6.5rem 3rem 5rem;\r\n width: 100%;\r\n display: grid;\r\n grid-template-columns: 1fr 420px;\r\n gap: 4rem;\r\n align-items: stretch;\r\n } \/* widget prominent top, text below *\/\r\n .hero-inner--widget-top {\r\n grid-template-columns: 1fr;\r\n grid-template-rows: auto auto;\r\n justify-items: center;\r\n padding: 2rem 3rem 4rem;\r\n }\r\n .hero-inner--widget-top .hero-text {\r\n order: 2;\r\n max-width: 680px;\r\n text-align: center;\r\n }\r\n .hero-inner--widget-top .matrix-widget {\r\n order: 1;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n \/* \u2500\u2500 Hero text \u2500\u2500 *\/\r\n .hero-text .eyebrow {\r\n color: var(--gold);\r\n font-size: 0.72rem;\r\n letter-spacing: 0.35em;\r\n text-transform: uppercase;\r\n \r\n opacity: 0;\r\n animation: fadeUp 0.8s 0.2s forwards;\r\n }\r\n\r\n .hero-quote {\r\n font-family: 'Playfair Display', serif;\r\n font-style: italic;\r\n font-size: 2.8rem;\r\n color: var(--text);\r\n line-height: 1.15;\r\n margin-bottom: 1.2rem;\r\n opacity: 0;\r\n animation: fadeUp 0.8s 0.4s forwards;\r\n }\r\n\r\n .hero-quote span { color: var(--gold); }\r\n\r\n .hero-subhead {\r\n font-size: 1.15rem;\r\n color: var(--text);\r\n font-weight: 300;\r\n letter-spacing: 0.01em;\r\n margin-bottom: 1.4rem;\r\n opacity: 0;\r\n animation: fadeUp 0.8s 0.5s forwards;\r\n }\r\n\r\n .hero-tagline {\r\n font-size: 1.05rem;\r\n color: var(--muted);\r\n line-height: 1.8;\r\n margin-bottom: 0.8rem;\r\n opacity: 0;\r\n animation: fadeUp 0.8s 0.6s forwards;\r\n }\r\n\r\n .hero-tagline strong {\r\n color: var(--gold);\r\n font-weight: 600;\r\n }\r\n\r\n .hero-conceived {\r\n font-size: 0.95rem;\r\n color: var(--dim);\r\n font-style: italic;\r\n margin-bottom: 2.2rem;\r\n opacity: 0;\r\n animation: fadeUp 0.8s 0.7s forwards;\r\n }\r\n\r\n \/* One-button callout *\/\r\n .one-button {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.8rem;\r\n background: rgba(201,168,76,0.07);\r\n border: 1px solid rgba(201,168,76,0.2);\r\n border-radius: 6px;\r\n padding: 0.8rem 1.2rem;\r\n margin-bottom: 0;\r\n opacity: 0;\r\n animation: fadeUp 0.8s 0.8s forwards;\r\n }\r\n\r\n .one-button .ob-icon {\r\n width: 32px;\r\n height: 32px;\r\n border-radius: 50%;\r\n background: #1a6600;\r\n border: 2px solid #00ff41;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 0.7rem;\r\n color: #00ff41;\r\n font-weight: 700;\r\n font-family: monospace;\r\n flex-shrink: 0;\r\n box-shadow: 0 0 8px rgba(0,255,65,0.3);\r\n }\r\n\r\n .one-button .ob-text {\r\n font-size: 0.85rem;\r\n color: var(--text);\r\n line-height: 1.4;\r\n }\r\n\r\n .one-button .ob-text strong {\r\n color: var(--gold);\r\n display: block;\r\n font-size: 0.78rem;\r\n letter-spacing: 0.06em;\r\n text-transform: uppercase;\r\n }\r\n\r\n .hero-btns {\r\n display: flex;\r\n gap: 1rem;\r\n opacity: 0;\r\n animation: fadeUp 0.8s 0.9s forwards;\r\n }\r\n\r\n \/* \u2500\u2500 Unique claim banner \u2500\u2500 *\/\r\n .only-system {\r\n margin-top: 2rem;\r\n padding: 0.9rem 1.4rem;\r\n background: rgba(201,168,76,0.06);\r\n border-left: 3px solid var(--gold);\r\n border-radius: 0 4px 4px 0;\r\n font-size: 0.85rem;\r\n color: var(--text);\r\n line-height: 1.5;\r\n opacity: 0;\r\n animation: fadeUp 0.8s 1s forwards;\r\n }\r\n\r\n .only-system strong { color: var(--gold); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n MATRIX WIDGET\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .matrix-widget {\r\n opacity: 0;\r\n animation: fadeIn 1s 0.5s forwards;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* Outer device shell \u2014 fixed width per breakpoint, centred by matrix-widget\r\n Desktop (\u2265768px): 420px Tablet (480-767px): 356px Mobile (<480px): 292px *\/\r\n .device-shell {\r\n background: #030303;\r\n border: 3px solid #222;\r\n border-radius: 12px;\r\n padding: 0.8rem;\r\n box-sizing: border-box;\r\n box-shadow:\r\n 0 0 0 1px #111,\r\n 0 0 40px rgba(255,100,0,0.1),\r\n 0 0 80px rgba(255,100,0,0.04),\r\n inset 0 1px 0 rgba(255,255,255,0.03);\r\n width: 420px; \/* desktop *\/\r\n }\r\n\r\n @media (max-width: 767px) { .device-shell { width: 356px; } }\r\n @media (max-width: 479px) { .device-shell { width: 292px; } }\r\n\r\n \/* Screen bezel \u2014 fixed widths so (width - 4px border) = exact multiple of 64\r\n 388 - 4 = 384 = 64\u00d76 pitch 6 (desktop)\r\n 324 - 4 = 320 = 64\u00d75 pitch 5 (tablet)\r\n 260 - 4 = 256 = 64\u00d74 pitch 4 (mobile)\r\n Height set by JS to canvas height + 4px border. *\/\r\n .screen-bezel {\r\n background: #000;\r\n border: 2px solid #0a0a0a;\r\n border-radius: 6px;\r\n padding: 0;\r\n position: relative;\r\n overflow: hidden;\r\n width: 388px;\r\n }\r\n\r\n @media (max-width: 767px) { .screen-bezel { width: 324px; } }\r\n @media (max-width: 479px) { .screen-bezel { width: 260px; } }\r\n \/* CRT scanline effect *\/\r\n .screen-bezel::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: repeating-linear-gradient(\r\n 0deg,\r\n transparent,\r\n transparent 2px,\r\n rgba(0,0,0,0.08) 2px,\r\n rgba(0,0,0,0.08) 4px\r\n );\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n\r\n \/* Slide container fills bezel exactly *\/\r\n .slide-track {\r\n position: absolute;\r\n inset: 0;\r\n }\r\n\r\n .slide {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n transition: opacity 0.6s ease;\r\n }\r\n\r\n .slide.active { opacity: 1; }\r\n\r\n \/* Detail letters: 12\u00d77 px at 6.5625\u00d7 = 79px H, 46px W\r\n 1px from top = 7px, 1px from sides = 7px *\/\r\n .detail-row {\r\n position: absolute;\r\n top: 7px;\r\n left: 7px;\r\n right: 7px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n z-index: 1;\r\n }\r\n\r\n .detail-row-bot {\r\n position: absolute;\r\n bottom: 7px;\r\n left: 7px;\r\n right: 7px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n z-index: 1;\r\n }\r\n\r\n .detail-letter {\r\n font-family: monospace;\r\n font-weight: 700;\r\n font-size: 79px;\r\n line-height: 1;\r\n color: var(--green);\r\n text-shadow: 0 0 16px var(--green), 0 0 32px rgba(0,255,65,0.4);\r\n transition: color 0.4s, text-shadow 0.4s;\r\n }\r\n\r\n .detail-letter.amber-l {\r\n color: var(--amber);\r\n text-shadow: 0 0 16px var(--amber), 0 0 32px rgba(255,204,119,0.4);\r\n }\r\n\r\n .detail-letter.dim-l {\r\n color: #111;\r\n text-shadow: none;\r\n }\r\n\r\n \/* Dot-matrix canvas \u2014 fills width, centred vertically *\/\r\n .dot-canvas {\r\n display: block;\r\n margin: auto;\r\n max-width: 100%;\r\n image-rendering: pixelated;\r\n }\r\n\r\n .detail-canvas {\r\n display: block;\r\n image-rendering: pixelated;\r\n }\r\n\r\n \/* Flint full-bezel canvas \u2014 sized entirely by JS, integer pitch, no transform *\/\r\n .flint-screen {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n image-rendering: pixelated;\r\n }\r\n\r\n .count-display.green {\r\n color: var(--green);\r\n text-shadow: 0 0 24px var(--green), 0 0 48px rgba(0,255,65,0.3);\r\n }\r\n\r\n .count-display.amber {\r\n color: var(--amber);\r\n text-shadow: 0 0 24px var(--amber), 0 0 48px rgba(255,153,0,0.3);\r\n }\r\n\r\n .count-display.red {\r\n color: var(--red-led);\r\n text-shadow: 0 0 24px var(--red-led), 0 0 48px rgba(255,51,0,0.3);\r\n }\r\n\r\n \/* Status line below count *\/\r\n .status-line {\r\n text-align: center;\r\n font-family: monospace;\r\n font-size: 0.7rem;\r\n letter-spacing: 0.2em;\r\n color: #2a2a2a;\r\n margin-top: 0.4rem;\r\n transition: color 0.4s;\r\n }\r\n\r\n .status-line.lit {\r\n color: var(--gold-dim);\r\n text-shadow: 0 0 6px rgba(201,168,76,0.3);\r\n }\r\n\r\n \/* Message overlay (for Flint distance \/ IFAA detail change) *\/\r\n .msg-overlay {\r\n text-align: center;\r\n font-family: monospace;\r\n font-size: 1rem;\r\n letter-spacing: 0.15em;\r\n color: var(--amber);\r\n text-shadow: 0 0 10px var(--amber);\r\n margin-top: 0.3rem;\r\n min-height: 1.4rem;\r\n transition: opacity 0.5s;\r\n }\r\n\r\n \/* Device label *\/\r\n .device-label {\r\n text-align: center;\r\n margin-top: 0.8rem;\r\n color: #222;\r\n font-size: 0.6rem;\r\n letter-spacing: 0.2em;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* External caption \u2014 cycles with slides *\/\r\n .widget-caption {\r\n font-size: 0.75rem;\r\n color: var(--muted);\r\n font-family: 'Barlow', sans-serif;\r\n letter-spacing: 0.05em;\r\n text-align: center;\r\n margin-bottom: 0.6rem;\r\n min-height: 1.2em;\r\n transition: opacity 0.4s;\r\n }\r\n\r\n \/* Slide indicators (dots) *\/\r\n .slide-dots {\r\n display: flex;\r\n justify-content: center;\r\n gap: 0.5rem;\r\n margin-top: 0.8rem;\r\n }\r\n\r\n .dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--dim);\r\n cursor: pointer;\r\n transition: background 0.3s;\r\n }\r\n\r\n .dot.active { background: var(--gold); }\r\n\r\n \/* Prev \/ Next arrows *\/\r\n .slide-arrows {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 0.6rem;\r\n padding: 0 0.2rem;\r\n }\r\n\r\n .arrow-btn {\r\n background: none;\r\n border: 1px solid var(--border);\r\n color: var(--muted);\r\n border-radius: 4px;\r\n padding: 0.3rem 0.7rem;\r\n cursor: pointer;\r\n font-size: 0.8rem;\r\n transition: border-color 0.2s, color 0.2s;\r\n font-family: 'Barlow', sans-serif;\r\n }\r\n\r\n .arrow-btn:hover { border-color: var(--gold); color: var(--gold); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FEATURE STRIP\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .feature-strip {\r\n display: flex;\r\n border-top: 2px solid var(--gold);\r\n background: var(--bg3);\r\n }\r\n\r\n .feature {\r\n flex: 1;\r\n padding: 1.8rem 1.5rem;\r\n text-align: center;\r\n border-right: 1px solid var(--border);\r\n }\r\n\r\n .feature:last-child { border-right: none; }\r\n .feature-icon { font-size: 1.6rem; margin-bottom: 0.5rem; }\r\n .feature-title { color: var(--gold); font-size: 0.88rem; font-weight: 700; margin-bottom: 0.3rem; letter-spacing: 0.04em; }\r\n .feature-sub { color: #888; font-size: 0.76rem; line-height: 1.5; }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SHARED BUTTONS\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .btn-gold {\r\n padding: 0.85rem 2rem;\r\n background: var(--gold);\r\n color: #000;\r\n border: none;\r\n border-radius: 4px;\r\n font-weight: 700;\r\n font-size: 0.88rem;\r\n cursor: pointer;\r\n letter-spacing: 0.06em;\r\n font-family: 'Barlow', sans-serif;\r\n transition: background 0.2s;\r\n }\r\n\r\n .btn-gold:hover { background: #d4b45a; }\r\n\r\n .btn-outline {\r\n padding: 0.85rem 2rem;\r\n background: transparent;\r\n color: var(--gold);\r\n border: 1px solid var(--gold-dim);\r\n border-radius: 4px;\r\n font-weight: 600;\r\n font-size: 0.88rem;\r\n cursor: pointer;\r\n letter-spacing: 0.06em;\r\n font-family: 'Barlow', sans-serif;\r\n transition: border-color 0.2s, color 0.2s;\r\n }\r\n\r\n .btn-outline:hover { border-color: var(--gold); color: var(--gold); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FOOTER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n footer {\r\n background: #050505;\r\n border-top: 1px solid var(--border);\r\n padding: 2.5rem 3rem;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1rem;\r\n }\r\n\r\n .footer-top {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n .footer-bottom {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n width: 100%;\r\n padding-top: 0.8rem;\r\n border-top: 1px solid var(--border);\r\n }\r\n\r\n .footer-attr {\r\n font-family: 'Barlow', sans-serif;\r\n font-size: 0.65rem;\r\n color: #333;\r\n }\r\n\r\n .footer-logo {\r\n font-family: 'Playfair Display', serif;\r\n font-style: italic;\r\n font-size: 1.5rem;\r\n color: var(--gold);\r\n opacity: 0.7;\r\n }\r\n\r\n .footer-links {\r\n display: flex;\r\n gap: 2rem;\r\n }\r\n\r\n .footer-links a {\r\n color: #333;\r\n text-decoration: none;\r\n font-size: 0.76rem;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n transition: color 0.2s;\r\n }\r\n\r\n .footer-links a:hover { color: var(--gold); }\r\n\r\n .footer-copy {\r\n color: #2a2a2a;\r\n font-size: 0.72rem;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ANIMATIONS\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(18px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n @keyframes fadeIn {\r\n from { opacity: 0; }\r\n to { opacity: 1; }\r\n }\r\n\r\n @keyframes pulse {\r\n 0%, 100% { opacity: 1; }\r\n 50% { opacity: 0.4; }\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESPONSIVE \u2014 tablet, mobile, granny's socks\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n\r\n \/* \u2500\u2500 Tablet: 768px\u20131024px \u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n .hero-inner {\r\n grid-template-columns: 1fr;\r\n padding: 7rem 2rem 3rem;\r\n gap: 2.5rem;\r\n }\r\n .matrix-widget { display: flex; justify-content: center; margin: 0 auto; }\r\n .one-button { width: 100%; box-sizing: border-box; }\r\n .hero-inner--widget-top .hero-text { text-align: left; }\r\n }\r\n\r\n \/* \u2500\u2500 Mobile: up to 767px \u2500\u2500 *\/\r\n @media (max-width: 767px) {\r\n \/* Nav \u2014 mobile *\/\r\n nav { padding: 0 1.2rem 0 0; } \/* no left padding \u2014 logo box is flush left *\/\r\n .nav-logo { left: 0; border-radius: 0 0 8px 0; } \/* flush to left edge *\/\r\n .nav-links { display: none; } \/* all links into hamburger *\/\r\n .nav-hamburger { display: flex; } \/* show hamburger only *\/\r\n\r\n \/* Hero \u2014 extra top padding to clear the logo box on mobile *\/\r\n .hero-inner {\r\n padding: 8rem 1.2rem 2rem;\r\n gap: 2rem;\r\n }\r\n .hero-quote { font-size: 2rem; }\r\n .hero-subhead { font-size: 0.9rem; }\r\n .hero-tagline { font-size: 0.88rem; }\r\n \/* Tighten eyebrow letter-spacing to prevent right-edge overflow on narrow phones *\/\r\n .hero-text .eyebrow { letter-spacing: 0.18em; }\r\n \/* Prevent hero child elements overflowing viewport *\/\r\n .hero-text { overflow-x: hidden; max-width: 100%; }\r\n .only-system { box-sizing: border-box; max-width: 100%; }\r\n \/* Hide non-functional button on mobile until content is ready *\/\r\n .btn-gold { display: none; }\r\n .hero-btns { flex-wrap: wrap; justify-content: center; }\r\n .btn-gold, .btn-outline { box-sizing: border-box; }\r\n\r\n \/* Widget \u2014 centre the fixed-width shell *\/\r\n .matrix-widget {\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n \/* Contact section \u2014 reduce side padding on narrow phones *\/\r\n #contact { padding: 3rem 1.2rem !important; }\r\n\r\n \/* Footer \u2014 mobile *\/\r\n footer { padding: 1.5rem 1.2rem; }\r\n .footer-top { flex-direction: column; gap: 0.8rem; text-align: center; }\r\n .footer-bottom { flex-direction: column; gap: 0.4rem; text-align: center; }\r\n .footer-links { flex-wrap: wrap; justify-content: center; gap: 0.8rem; }\r\n\r\n \/* Feature strip \u2014 2\u00d72 grid on mobile *\/\r\n .feature-strip {\r\n flex-wrap: wrap;\r\n }\r\n .feature {\r\n flex: 0 0 50%;\r\n border-right: 1px solid var(--border);\r\n border-bottom: 1px solid var(--border);\r\n }\r\n .feature:nth-child(2n) { border-right: none; }\r\n .feature:nth-child(3),\r\n .feature:nth-child(4) { border-bottom: none; }\r\n\r\n \/* Contact form \u2014 stack name\/email *\/\r\n div[style*=\"grid-template-columns: 1fr 1fr\"] {\r\n display: flex !important;\r\n flex-direction: column !important;\r\n }\r\n\r\n \/* Archer's check row \u2014 wrap on small screens *\/\r\n div[style*=\"display:flex\"][style*=\"align-items:center\"][style*=\"flex-wrap:wrap\"] {\r\n flex-direction: column;\r\n align-items: flex-start !important;\r\n }\r\n }\r\n\r\n \/* \u2500\u2500 Very small: up to 400px (granny's phone) \u2500\u2500 *\/\r\n @media (max-width: 400px) {\r\n .hero-quote { font-size: 1.6rem; }\r\n .feature { flex: 0 0 100%; border-right: none; }\r\n .feature:last-child { border-bottom: none; }\r\n }\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- \u2550\u2550 NAV \u2550\u2550 -->\r\n <nav style=\"position:relative;\">\r\n <div class=\"nav-logo\">\r\n <span class=\"word-time\">Time<\/span>\r\n <span class=\"word-judge\">Judge<\/span>\r\n <\/div>\r\n <ul class=\"nav-links\">\r\n <li><a href=\"#\" style=\"opacity:0.35; pointer-events:none;\">Features<\/a><\/li>\r\n <li class=\"nav-mobile-show\"><a href=\"\/index.php\/how-it-works\/\">How It Works<\/a><\/li>\r\n <li class=\"nav-mobile-show\"><a href=\"\/index.php\/manual\/\">Manual<\/a><\/li>\r\n <li><a href=\"#\" style=\"opacity:0.35; pointer-events:none;\">Rounds<\/a><\/li>\r\n <li><a href=\"\/index.php\/contact\/\" style=\"pointer-events:auto;\">Contact<\/a><\/li>\r\n <\/ul>\r\n <!-- Hamburger \u2014 mobile only -->\r\n <button class=\"nav-hamburger\" id=\"navHamburger\" aria-label=\"Menu\">\r\n <span><\/span>\r\n <span><\/span>\r\n <span><\/span>\r\n <\/button>\r\n <!-- Dropdown \u2014 all links on mobile -->\r\n <div class=\"nav-dropdown\" id=\"navDropdown\">\r\n <a href=\"\/\">Home<\/a>\r\n <a href=\"\/index.php\/how-it-works\/\">How It Works<\/a>\r\n <a href=\"\/index.php\/manual\/\">Manual<\/a>\r\n <a href=\"\/index.php\/contact\/\">Contact<\/a>\r\n <a href=\"#\" style=\"opacity:0.35; pointer-events:none;\">Features<\/a>\r\n <a href=\"#\" style=\"opacity:0.35; pointer-events:none;\">Rounds<\/a>\r\n <a href=\"\/index.php\/privacy-policy\/\">Privacy Policy<\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- \u2550\u2550 HERO \u2550\u2550 -->\r\n <section class=\"hero\">\r\n <div class=\"hero-grid\"><\/div>\r\n <div class=\"hero-glow\"><\/div>\r\n\r\n <div class=\"hero-inner\">\r\n\r\n <!-- Left \u2014 text content -->\r\n <div class=\"hero-text\">\r\n\r\n <div class=\"eyebrow\">Wireless Archery Timing Systems<\/div>\r\n\r\n <!-- Main headline -->\r\n <h1 class=\"hero-quote\">\r\n Tournament timing,<br>\r\n <span>deployed in minutes.<\/span>\r\n <\/h1>\r\n\r\n <!-- Subhead \u2014 simplicity promise -->\r\n <p class=\"hero-subhead\">The timing system that gets out of your way.<\/p>\r\n\r\n <!-- Key tagline -->\r\n <p class=\"hero-tagline\">\r\n Switch competition formats with a <strong>single card swipe<\/strong> \u2014\r\n no wiring, no complexity, no wasted time.\r\n <\/p>\r\n\r\n <!-- Conceived by line -->\r\n <p class=\"hero-conceived\">Conceived by an archer for archers.<\/p>\r\n\r\n <div class=\"hero-btns\">\r\n <button class=\"btn-gold\" style=\"opacity:0.35; pointer-events:none;\">See It In Action<\/button>\r\n <button class=\"btn-outline\" onclick=\"window.location='\/index.php\/contact\/'\">Contact Us<\/button>\r\n <\/div>\r\n\r\n <!-- Unique claim -->\r\n <div class=\"only-system\">\r\n <strong>The only timing system in the world to handle Flint rounds<\/strong> \u2014\r\n and fully configurable for WA, IFAA Indoor, Finals, Team events,\r\n and any custom round format you need.\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- Right \u2014 live matrix display widget -->\r\n <div class=\"matrix-widget\">\r\n <div class=\"device-shell\">\r\n\r\n <!-- External caption \u2014 cycles with slides -->\r\n <div class=\"widget-caption\" id=\"widgetCaption\">FLINT - End 5 @ 20YD<\/div>\r\n\r\n <div class=\"screen-bezel\">\r\n <div class=\"slide-track\" id=\"slideTrack\">\r\n\r\n <!-- SLIDE 1: WA countdown \u2014 COMMENTED OUT FOR FLINT TEST\r\n <div class=\"slide active\" id=\"slide0\">\r\n <div class=\"detail-row\">\r\n <canvas class=\"detail-canvas\" id=\"s0a\"><\/canvas>\r\n <canvas class=\"detail-canvas\" id=\"s0b\"><\/canvas>\r\n <\/div>\r\n <canvas id=\"s0count\" class=\"dot-canvas\"><\/canvas>\r\n <\/div>\r\n -->\r\n\r\n <!-- SLIDE 2: Flint round -->\r\n <div class=\"slide active\" id=\"slide1\">\r\n <canvas id=\"s1screen\" class=\"flint-screen\"><\/canvas>\r\n <\/div>\r\n\r\n <!-- SLIDE 3: IFAA Indoor \u2014 COMMENTED OUT FOR FLINT TEST\r\n <div class=\"slide\" id=\"slide2\">\r\n <div class=\"detail-row\">\r\n <canvas class=\"detail-canvas\" id=\"s2topleft\"><\/canvas>\r\n <canvas class=\"detail-canvas\" id=\"s2topright\"><\/canvas>\r\n <\/div>\r\n <canvas id=\"s2count\" class=\"dot-canvas\"><\/canvas>\r\n <div class=\"detail-row-bot\">\r\n <canvas class=\"detail-canvas\" id=\"s2botleft\"><\/canvas>\r\n <canvas class=\"detail-canvas\" id=\"s2botright\"><\/canvas>\r\n <\/div>\r\n <\/div>\r\n -->\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Dot indicators -->\r\n <!-- Dot indicators \u2014 hidden during Flint-only test -->\r\n <div class=\"slide-dots\" style=\"display:none;\">\r\n <div class=\"dot active\" onclick=\"goSlide(0)\"><\/div>\r\n <div class=\"dot\" onclick=\"goSlide(1)\"><\/div>\r\n <div class=\"dot\" onclick=\"goSlide(2)\"><\/div>\r\n <\/div>\r\n\r\n <!-- Prev \/ Next \u2014 hidden during Flint-only test -->\r\n <div class=\"slide-arrows\" style=\"display:none;\">\r\n <button class=\"arrow-btn\" onclick=\"prevSlide()\">\u25c0 Prev<\/button>\r\n <button class=\"arrow-btn\" onclick=\"nextSlide()\">Next \u25b6<\/button>\r\n <\/div>\r\n\r\n <\/div><!-- \/device-shell -->\r\n\r\n <!-- One-button USP \u2014 below the screen widget -->\r\n <div class=\"one-button\" style=\"margin-top:auto;\">\r\n <div class=\"ob-icon\">1<\/div>\r\n <div class=\"ob-text\">\r\n <strong>One button. Every end. Every round.<\/strong>\r\n In normal operation, your judge needs just the green button.\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Coach quote -->\r\n <blockquote style=\"\r\n font-family: 'Barlow', sans-serif;\r\n font-style: italic;\r\n font-size: 0.88rem;\r\n color: var(--muted);\r\n margin-top: 2rem;\r\n margin-bottom: 0;\r\n padding-left: 0.8rem;\r\n border-left: 2px solid var(--gold-dim);\r\n line-height: 1.5;\r\n \">\r\n . . . \"and pay attention to the TimeJudge.\"\r\n <span style=\"display:block; font-style:normal; font-size:0.75rem; color: var(--dim); margin-top:0.3rem; letter-spacing:0.06em;\">\r\n \u2014 Competition coaches, nationwide\r\n <\/span>\r\n <\/blockquote>\r\n\r\n <\/div><!-- \/matrix-widget -->\r\n <\/section>\r\n\r\n <!-- \u2550\u2550 FEATURE STRIP \u2550\u2550 -->\r\n <div class=\"feature-strip\" id=\"features\">\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\u26a1<\/div>\r\n <div class=\"feature-title\">Long Screen Battery Life<\/div>\r\n <div class=\"feature-sub\">Flat-to-full in hours after five competition days.<\/div>\r\n <\/div>\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\ud83d\udce1<\/div>\r\n <div class=\"feature-title\">Fully Wireless<\/div>\r\n <div class=\"feature-sub\">Reliable range coverage. No cables, no tape, no wiring runs across your range.<\/div>\r\n <\/div>\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\ud83c\udccf<\/div>\r\n <div class=\"feature-title\">TimeTAP Cards<\/div>\r\n <div class=\"feature-sub\">Switch from Qualifiers to Finals with one wrist flick. Now that's a game changer.<\/div>\r\n <\/div>\r\n <div class=\"feature\">\r\n <div class=\"feature-icon\">\ud83c\udfaf<\/div>\r\n <div class=\"feature-title\">Any Round Format<\/div>\r\n <div class=\"feature-sub\">The only system handling Flint rounds. WA, IFAA, Finals, Teams \u2014 all covered.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- \u2550\u2550 CONTACT CTA \u2550\u2550 -->\r\n <section id=\"contact\" style=\"\r\n background: #0d0d0d;\r\n border-top: 1px solid rgba(201,168,76,0.1);\r\n padding: 4rem 3rem;\r\n text-align: center;\r\n \">\r\n <p style=\"font-family:'Barlow',sans-serif; font-size:0.72rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#c9a84c; margin-bottom:0.6rem;\">Get In Touch<\/p>\r\n <h2 style=\"font-family:'Playfair Display',serif; font-style:italic; font-size:2rem; color:#f0ece0; font-weight:700; margin-bottom:0.8rem;\">Interested in TimeJudge?<\/h2>\r\n <p style=\"font-family:'Barlow',sans-serif; font-size:0.95rem; color:#777; margin-bottom:2rem; line-height:1.6; max-width:480px; margin-left:auto; margin-right:auto;\">Whether you're running club competitions or an International Championship, we'd love to hear from you.<\/p>\r\n <a href=\"\/index.php\/contact\/\" style=\"\r\n display: inline-block;\r\n background: #c9a84c;\r\n color: #080808;\r\n border-radius: 4px;\r\n padding: 0.85rem 2.5rem;\r\n font-family: 'Barlow', sans-serif;\r\n font-size: 0.85rem;\r\n font-weight: 700;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n transition: background 0.2s;\r\n \" onmouseover=\"this.style.background='#d4b45a'\" onmouseout=\"this.style.background='#c9a84c'\">Contact Us<\/a>\r\n <\/section>\r\n\r\n <!-- \u2550\u2550 FOOTER \u2550\u2550 -->\r\n <footer>\r\n <div class=\"footer-top\">\r\n <span class=\"footer-logo\">TimeJudge<\/span>\r\n <div class=\"footer-links\">\r\n <a href=\"#features\">Features<\/a>\r\n <a href=\"\/index.php\/how-it-works\/\">How It Works<\/a>\r\n <a href=\"\/index.php\/manual\/\">Manual<\/a>\r\n <a href=\"#rounds\">Rounds<\/a>\r\n <a href=\"\/index.php\/contact\/\">Contact<\/a>\r\n <a href=\"\/index.php\/privacy-policy\/\">Privacy Policy<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"footer-bottom\">\r\n <span class=\"footer-copy\">\u00a9 2026 TimeJudge. All rights reserved.<\/span>\r\n <span class=\"footer-attr\">Webpage designed with Claude \u00b7 Anthropic<\/span>\r\n <\/div>\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ SLIDE MANAGEMENT\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n var currentSlide = 0;\r\n var totalSlides = 3;\r\n var autoTimer = null;\r\n var AUTO_INTERVAL = 8000; \/\/ ms between auto-advances\r\n\r\n var captions = [\r\n 'WA Round \u2014 Group AB shooting. Colour shifts amber below 30s, full red at zero.',\r\n 'Flint Round \u2014 single detail, no groups. TimeJudge is the only system that handles this format.',\r\n 'IFAA Indoor \u2014 AB and CD groups alternate each end, rotating to DC\\u202fBA for ends\\u00a07\u201312.'\r\n ];\r\n\r\n function goSlide(n) {\r\n var slides = document.querySelectorAll('.slide');\r\n var dots = document.querySelectorAll('.dot');\r\n var caption = document.getElementById('widgetCaption');\r\n\r\n slides[currentSlide].classList.remove('active');\r\n dots[currentSlide].classList.remove('active');\r\n\r\n currentSlide = (n + totalSlides) % totalSlides;\r\n\r\n slides[currentSlide].classList.add('active');\r\n dots[currentSlide].classList.add('active');\r\n\r\n \/\/ Fade caption\r\n if (caption) {\r\n caption.style.opacity = '0';\r\n setTimeout(function() {\r\n caption.textContent = captions[currentSlide];\r\n caption.style.opacity = '1';\r\n }, 250);\r\n }\r\n }\r\n\r\n function nextSlide() { \/* disabled during Flint-only test *\/ }\r\n function prevSlide() { \/* disabled during Flint-only test *\/ }\r\n\r\n function resetAutoTimer() {\r\n clearInterval(autoTimer);\r\n autoTimer = setInterval(function() { goSlide(currentSlide + 1); }, AUTO_INTERVAL);\r\n }\r\n\r\n \/\/ Start auto-advance\r\n resetAutoTimer();\r\n\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ CORE HELPERS\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n\r\n \/\/ Returns pixels-per-dot-grid-unit based on actual bezel width\r\n function getScale() {\r\n var bezel = document.querySelector('.screen-bezel');\r\n var w = bezel ? bezel.clientWidth : 388;\r\n return w \/ 64; \/\/ 64 pixel columns in the grid\r\n }\r\n\r\n function colourForState(state) {\r\n if (state === 'green') return { fill:'#00ff41', glow:'rgba(0,255,65,0.6)' };\r\n if (state === 'amber') return { fill:'#ffcc77', glow:'rgba(255,204,119,0.6)' };\r\n return { fill:'#ff3300', glow:'rgba(255,51,0,0.6)' };\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ LARGE FONT \u2014 13W \u00d7 24H segment bitmaps\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n var DIGITS = {};\r\n\r\n function makeDigit(top, tl, tr, mid, bl, br, bot) {\r\n var g = Array.from({length:24}, function(){ return new Array(13).fill(0); });\r\n\r\n \/\/ Top bar: ends (cols 0-2, 10-12) rows 0-2 (3px), middle (cols 3-9) rows 0-1 (2px)\r\n if (top) {\r\n for (var c=0; c<=2; c++) { g[0][c]=1; g[1][c]=1; g[2][c]=1; }\r\n for (var c=3; c<=9; c++) { g[0][c]=1; g[1][c]=1; }\r\n for (var c=10; c<=12; c++) { g[0][c]=1; g[1][c]=1; g[2][c]=1; }\r\n }\r\n \/\/ Top verticals\r\n var tlS = top ? 3 : 0;\r\n if (tl) { for (var r=tlS; r<=4; r++){g[r][0]=1;g[r][1]=1;g[r][2]=1;}\r\n for (var r=6; r<=11; r++){g[r][0]=1;g[r][1]=1;g[r][2]=1;} }\r\n var trS = top ? 3 : 0;\r\n if (tr) { for (var r=trS; r<=4; r++){g[r][10]=1;g[r][11]=1;g[r][12]=1;}\r\n for (var r=6; r<=11; r++){g[r][10]=1;g[r][11]=1;g[r][12]=1;} }\r\n\r\n \/\/ Mid bar rows 10-11 \u2014 full if any left vertical, truncated (cols 5-11) if none\r\n if (mid) {\r\n var ms = (tl || bl) ? 1 : 5;\r\n for (var c=ms; c<=11; c++) { g[10][c]=1; g[11][c]=1; }\r\n }\r\n \/\/ Bottom verticals\r\n if (bl) { for (var r=13; r<=18; r++){g[r][0]=1;g[r][1]=1;g[r][2]=1;}\r\n for (var r=20; r<=23; r++){g[r][0]=1;g[r][1]=1;g[r][2]=1;} }\r\n if (br) { for (var r=13; r<=18; r++){g[r][10]=1;g[r][11]=1;g[r][12]=1;}\r\n for (var r=20; r<=23; r++){g[r][10]=1;g[r][11]=1;g[r][12]=1;} }\r\n\r\n \/\/ Bottom bar: ends (cols 0-2, 10-12) rows 21-23 (3px), middle (cols 3-9) rows 22-23 (2px)\r\n if (bot) {\r\n for (var c=0; c<=2; c++) { g[21][c]=1; g[22][c]=1; g[23][c]=1; }\r\n for (var c=3; c<=9; c++) { g[22][c]=1; g[23][c]=1; }\r\n for (var c=10; c<=12; c++) { g[21][c]=1; g[22][c]=1; g[23][c]=1; }\r\n }\r\n return g;\r\n }\r\n\r\n \/\/ top tl tr mid bl br bot\r\n DIGITS['0'] = makeDigit(1, 1, 1, 0, 1, 1, 1);\r\n DIGITS['2'] = makeDigit(1, 0, 1, 1, 1, 0, 1);\r\n DIGITS['3'] = makeDigit(1, 0, 1, 1, 0, 1, 1);\r\n DIGITS['4'] = makeDigit(0, 1, 1, 1, 0, 1, 0);\r\n DIGITS['5'] = makeDigit(1, 1, 0, 1, 0, 1, 1);\r\n DIGITS['6'] = makeDigit(1, 1, 0, 1, 1, 1, 1);\r\n DIGITS['7'] = makeDigit(1, 0, 1, 0, 0, 1, 0);\r\n DIGITS['8'] = makeDigit(1, 1, 1, 1, 1, 1, 1);\r\n DIGITS['9'] = makeDigit(1, 1, 1, 1, 0, 1, 1);\r\n\r\n \/\/ '1' \u2014 plain vertical, cols 5-7, all non-gap rows\r\n (function(){\r\n var g = Array.from({length:24}, function(){ return new Array(13).fill(0); });\r\n var rows = [0,1,2,3,4,6,7,8,9,10,11,13,14,15,16,17,18,20,21,22,23];\r\n for (var i=0; i<rows.length; i++){ g[rows[i]][5]=1; g[rows[i]][6]=1; g[rows[i]][7]=1; }\r\n DIGITS['1'] = g;\r\n })();\r\n\r\n \/\/ \u2500\u2500 Letter bitmaps 7W \u00d7 12H \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n var LETTERS = {};\r\n LETTERS['A'] = [[0,0,1,1,1,0,0],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1],[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1]];\r\n LETTERS['B'] = [[1,1,1,1,1,0,0],[1,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,1,1,1,1,0],[1,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,1,1,1,1,0],[1,1,1,1,1,0,0]];\r\n LETTERS['C'] = [[0,1,1,1,1,1,0],[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,1],[0,1,1,1,1,1,0]];\r\n LETTERS['D'] = [[1,1,1,1,1,0,0],[1,1,1,1,1,1,0],[1,1,0,0,1,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,1,1,1],[1,1,1,1,1,1,0],[1,1,1,1,1,0,0]];\r\n\r\n function drawLetter(canvasId, letter, state) {\r\n var cv = document.getElementById(canvasId);\r\n if (!cv) return;\r\n var bm = LETTERS[letter];\r\n if (!bm) return;\r\n var sc = getScale();\r\n var pitch = Math.round(sc);\r\n var dot = Math.max(1, Math.floor(sc * 0.85));\r\n var w = 7 * pitch, h = 12 * pitch;\r\n cv.width = w; cv.height = h;\r\n cv.style.width = w+'px'; cv.style.height = h+'px';\r\n var ctx = cv.getContext('2d');\r\n var col = colourForState(state);\r\n ctx.clearRect(0,0,w,h);\r\n ctx.shadowColor = col.glow; ctx.shadowBlur = pitch;\r\n ctx.fillStyle = col.fill;\r\n for (var r=0; r<12; r++)\r\n for (var c=0; c<7; c++)\r\n if (bm[r][c]) ctx.fillRect(c*pitch, r*pitch, dot, dot);\r\n }\r\n\r\n function drawNumber(canvasId, value, state) {\r\n var cv = document.getElementById(canvasId);\r\n if (!cv) return;\r\n var sc = getScale();\r\n var pitch = Math.round(sc);\r\n var dot = Math.max(1, Math.floor(sc * 0.85));\r\n var kern = Math.round(pitch * 0.6);\r\n var str = String(value);\r\n var n = str.length;\r\n var w = n * 13 * pitch + (n-1) * kern;\r\n var h = Math.round(32 * sc);\r\n cv.width = w; cv.height = h;\r\n cv.style.width = w+'px'; cv.style.height = h+'px';\r\n var ctx = cv.getContext('2d');\r\n var col = colourForState(state);\r\n ctx.clearRect(0,0,w,h);\r\n ctx.shadowColor = col.glow; ctx.shadowBlur = Math.round(sc*1.2);\r\n ctx.fillStyle = col.fill;\r\n var xOff = 0, yTop = Math.round(4*sc);\r\n for (var d=0; d<n; d++) {\r\n var bm = DIGITS[str[d]];\r\n if (!bm) { xOff += 13*pitch+kern; continue; }\r\n for (var row=0; row<24; row++)\r\n for (var col2=0; col2<13; col2++)\r\n if (bm[row][col2]) ctx.fillRect(xOff+col2*pitch, yTop+row*pitch, dot, dot);\r\n xOff += 13*pitch+kern;\r\n }\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ TF FONT \u2014 6W \u00d7 12H (Transition Font, 2px uprights)\r\n \/\/ Char pitch = 7 (6+1 gap). Space = 3 (2+1 gap).\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n var TF = {};\r\n TF[' '] = null;\r\n TF['A'] = [[0,0,1,1,0,0],[0,1,1,1,1,0],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,1],[1,1,1,1,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1]];\r\n TF['C'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['D'] = [[1,1,1,1,0,0],[1,1,1,1,1,0],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,0],[1,1,1,1,0,0]];\r\n TF['E'] = [[1,1,1,1,1,1],[1,1,1,1,1,1],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,1,1,1,0],[1,1,1,1,1,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,1,1,1,1],[1,1,1,1,1,1]];\r\n TF['L'] = [[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,1,1,1,1],[1,1,1,1,1,1]];\r\n TF['N'] = [[1,1,0,0,1,1],[1,1,1,0,1,1],[1,1,1,0,1,1],[1,1,0,1,1,1],[1,1,0,1,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1]];\r\n TF['O'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['R'] = [[1,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,0],[1,1,1,1,1,0],[1,1,0,1,0,0],[1,1,0,0,1,0],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,0,1]];\r\n TF['S'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[0,1,1,1,1,0],[0,1,1,1,1,0],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['T'] = [[1,1,1,1,1,1],[1,1,1,1,1,1],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0]];\r\n TF['V'] = [[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[0,1,1,1,1,0],[0,1,1,1,1,0],[0,0,1,1,0,0],[0,0,1,1,0,0]];\r\n TF['X'] = [[1,1,0,0,1,1],[1,1,0,0,1,1],[0,1,1,0,1,0],[0,1,1,0,1,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,1,1,0,1,0],[0,1,1,0,1,0],[1,1,0,0,1,1],[1,1,0,0,1,1]];\r\n TF['Y'] = [[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[0,1,1,1,1,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0]];\r\n TF['0'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,1,1],[1,1,0,1,1,1],[1,1,1,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['1'] = [[0,0,1,1,0,0],[0,1,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,1,1,1,1,0],[0,1,1,1,1,0]];\r\n TF['2'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,1,1,1,1,0],[0,1,1,1,1,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,1,1,1,1],[1,1,1,1,1,1]];\r\n TF['3'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,1,1,1,0],[0,0,1,1,1,0],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['4'] = [[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,1],[1,1,1,1,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1]];\r\n TF['5'] = [[1,1,1,1,1,1],[1,1,1,1,1,1],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,1,1,1,0],[1,1,1,1,1,0],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['6'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0],[1,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['7'] = [[1,1,1,1,1,1],[1,1,1,1,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,1,1,0],[0,0,0,1,1,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,1,1,0,0,0],[0,1,1,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0]];\r\n TF['8'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[0,1,1,1,1,0],[0,1,1,1,1,0],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['9'] = [[0,1,1,1,1,0],[1,1,1,1,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[0,0,0,0,1,1],[1,1,1,1,1,1],[0,1,1,1,1,0]];\r\n TF['-'] = [[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,1,1,1,0],[0,1,1,1,1,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]];\r\n TF['>'] = [[1,1,0,0,0,0],[1,1,0,0,0,0],[0,1,1,0,0,0],[0,1,1,0,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,1,1,0,0,0],[0,1,1,0,0,0],[1,1,0,0,0,0],[1,1,0,0,0,0]];\r\n TF['='] = [[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,1,1,1,0],[0,1,1,1,1,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,1,1,1,0],[0,1,1,1,1,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]];\r\n TF['+'] = [[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,1,1,0,0],[0,0,1,1,0,0],[1,1,1,1,1,1],[1,1,1,1,1,1],[0,0,1,1,0,0],[0,0,1,1,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]];\r\n TF[':'] = [[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,1,0,0,0],[0,1,1,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,1,1,0,0,0],[0,1,1,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0],[0,0,0,0,0,0]];\r\n\r\n function tfW(c) { return c === ' ' ? 2 : 6; } \/\/ char width in pixel grid units\r\n\r\n function tfTextW(text) {\r\n var w = 0;\r\n for (var i = 0; i < text.length; i++) w += tfW(text[i]) + 1;\r\n return w > 0 ? w - 1 : 0;\r\n }\r\n\r\n \/\/ Draw TF text to a ctx already obtained from a bezel canvas.\r\n \/\/ pixelRow = top of glyphs in pixel-grid units (0-31).\r\n \/\/ colStart = explicit left col; null = centre in c0..c1 (default 0..63).\r\n function drawTF(ctx, text, state, pixelRow, scale, colStart, c0, c1) {\r\n if (c0 === undefined || c0 === null) c0 = 0;\r\n if (c1 === undefined || c1 === null) c1 = 63;\r\n var col = colourForState(state);\r\n var pitch = Math.round(scale);\r\n var dot = Math.max(1, Math.floor(scale * 0.85));\r\n ctx.shadowColor = col.glow;\r\n ctx.shadowBlur = pitch;\r\n ctx.fillStyle = col.fill;\r\n var tw = tfTextW(text);\r\n var xPx = (colStart === null || colStart === undefined)\r\n ? Math.round((c0 + ((c1 - c0 + 1) - tw) \/ 2)) * pitch\r\n : colStart * pitch;\r\n var yPx = pixelRow * pitch;\r\n for (var i = 0; i < text.length; i++) {\r\n var ch = text[i];\r\n var bm = TF[ch];\r\n var cw = tfW(ch);\r\n if (bm) {\r\n for (var r = 0; r < 12; r++)\r\n for (var cc = 0; cc < 6; cc++)\r\n if (bm[r][cc]) ctx.fillRect(xPx + cc*pitch, yPx + r*pitch, dot, dot);\r\n }\r\n xPx += (cw + 1) * pitch;\r\n }\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ BEZEL CANVAS HELPERS \u2014 all accept canvas element, not ID\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n\r\n function sizeBezel(cv) {\r\n var bezel = document.querySelector('.screen-bezel');\r\n if (!bezel) return { ctx: cv.getContext('2d'), sc:6, w:384, h:192, p:6, d:5 };\r\n\r\n \/\/ Fixed bezel widths \u2014 offsetWidth is reliable because layout is not fluid.\r\n \/\/ Each width chosen so (width - 4px border) = exact multiple of 64.\r\n var PITCH_MAP = { 388: 6, 324: 5, 260: 4 };\r\n var bw = bezel.offsetWidth;\r\n var p = PITCH_MAP[bw] || 6;\r\n var d = p - 1;\r\n var cw = 64 * p;\r\n var ch = 32 * p;\r\n\r\n \/\/ Set bezel height to canvas + 2px border each side\r\n bezel.style.height = (ch + 4) + 'px';\r\n\r\n \/\/ Size canvas to exact integer grid \u2014 no transform, no DPR\r\n if (cv.width !== cw || cv.height !== ch) {\r\n cv.width = cw;\r\n cv.height = ch;\r\n cv.style.width = cw + 'px';\r\n cv.style.height = ch + 'px';\r\n cv.style.transform = 'none';\r\n }\r\n\r\n return { ctx: cv.getContext('2d'), sc: p, w: cw, h: ch, p: p, d: d };\r\n }\r\n\r\n function drawLF(cv, value, state) { \/\/ Large-Font countdown, centred\r\n var b = sizeBezel(cv);\r\n b.ctx.clearRect(0, 0, b.w, b.h);\r\n var col = colourForState(state);\r\n var kern = Math.round(b.p * 0.6);\r\n var str = String(value);\r\n var n = str.length;\r\n var tw = n * 13 * b.p + (n - 1) * kern;\r\n var xOff = Math.round((b.w - tw) \/ 2);\r\n var yTop = Math.round(4 * b.sc);\r\n b.ctx.fillStyle = col.fill;\r\n b.ctx.shadowColor = col.glow;\r\n b.ctx.shadowBlur = Math.round(b.sc * 1.2);\r\n for (var di = 0; di < n; di++) {\r\n var bm = DIGITS[str[di]];\r\n if (!bm) { xOff += 13*b.p + kern; continue; }\r\n for (var row = 0; row < 24; row++)\r\n for (var c2 = 0; c2 < 13; c2++)\r\n if (bm[row][c2]) b.ctx.fillRect(xOff + c2*b.p, yTop + row*b.p, b.d, b.d);\r\n xOff += 13*b.p + kern;\r\n }\r\n }\r\n\r\n function drawRed(cv) { \/\/ Full red screen\r\n var b = sizeBezel(cv);\r\n b.ctx.clearRect(0, 0, b.w, b.h);\r\n b.ctx.fillStyle = '#ff3300';\r\n b.ctx.shadowColor = 'rgba(255,51,0,0.9)';\r\n b.ctx.shadowBlur = b.p * 3;\r\n for (var r = 0; r < 32; r++)\r\n for (var c = 0; c < 64; c++)\r\n b.ctx.fillRect(c*b.p, r*b.p, b.d, b.d);\r\n }\r\n\r\n function drawCls(cv) { \/\/ Clear to black\r\n var b = sizeBezel(cv); b.ctx.clearRect(0, 0, b.w, b.h);\r\n }\r\n\r\n \/\/ Two-line TF screen: line1 at row 4, line2 at row 19, both centred 0-63\r\n function drawTFScreen(cv, l1, st1, l2, st2) {\r\n var b = sizeBezel(cv);\r\n b.ctx.clearRect(0, 0, b.w, b.h);\r\n if (l1) drawTF(b.ctx, l1, st1, 4, b.sc, null, 0, 63);\r\n if (l2) drawTF(b.ctx, l2, st2, 19, b.sc, null, 0, 63);\r\n }\r\n\r\n \/\/ Bar screen:\r\n \/\/ label (TF) centred in cols 0-49 at row 4\r\n \/\/ red bar cols 0..filled, rows 19-31 (13px high)\r\n \/\/ number (TF amber) centred in cols 50-63 at row 20\r\n \/\/ drawBarScreen \u2014 replicates doCountdownBar \/ goGreenZero logic\r\n \/\/ barVal = current count value\r\n \/\/ barMax = starting count (10 for normal end, 20 for walkup)\r\n \/\/ label = TF text above bar (centred full width), labelSt = colour state\r\n \/\/ Bar: 50 cols wide, rows 19-31. Number: right zone cols 50-63.\r\n \/\/ barVal > 10 (walkup 20\u219211): all red, digit red\r\n \/\/ barVal 10\u21921: red cols = 5*barVal (left), yellow cols = 50-5*barVal (right)\r\n \/\/ barVal == 0: whole bar green, digit green\r\n function drawBarScreen(cv, label, labelSt, barVal, barMax) {\r\n var b = sizeBezel(cv);\r\n b.ctx.clearRect(0, 0, b.w, b.h);\r\n\r\n \/\/ \u2500\u2500 Label above bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n if (label) drawTF(b.ctx, label, labelSt, 4, b.sc, null, 0, 63);\r\n\r\n var p = b.p, d = b.d;\r\n\r\n \/\/ \u2500\u2500 Bar: rows 19-31 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n if (barVal === 0) {\r\n \/\/ goGreenZero: whole bar green\r\n var gc = colourForState('green');\r\n b.ctx.fillStyle = gc.fill; b.ctx.shadowColor = gc.glow; b.ctx.shadowBlur = p;\r\n for (var row=19; row<=31; row++)\r\n for (var col=0; col<50; col++)\r\n b.ctx.fillRect(col*p, row*p, d, d);\r\n\r\n } else if (barVal > 10) {\r\n \/\/ 20\u219211: full red bar, digit changes only\r\n var rc = colourForState('red');\r\n b.ctx.fillStyle = rc.fill; b.ctx.shadowColor = rc.glow; b.ctx.shadowBlur = p;\r\n for (var row=19; row<=31; row++)\r\n for (var col=0; col<50; col++)\r\n b.ctx.fillRect(col*p, row*p, d, d);\r\n\r\n } else {\r\n \/\/ 10\u21921: red left portion, yellow right portion\r\n \/\/ 5 cols per second: redCols = 5 * barVal\r\n var redCols = Math.min(50, 5 * barVal);\r\n var rc2 = colourForState('red');\r\n var yc = colourForState('amber');\r\n \/\/ Red portion\r\n b.ctx.fillStyle = rc2.fill; b.ctx.shadowColor = rc2.glow; b.ctx.shadowBlur = p;\r\n for (var row=19; row<=31; row++)\r\n for (var col=0; col<redCols; col++)\r\n b.ctx.fillRect(col*p, row*p, d, d);\r\n \/\/ Yellow portion\r\n b.ctx.fillStyle = yc.fill; b.ctx.shadowColor = yc.glow; b.ctx.shadowBlur = p;\r\n for (var row=19; row<=31; row++)\r\n for (var col=redCols; col<50; col++)\r\n b.ctx.fillRect(col*p, row*p, d, d);\r\n }\r\n\r\n \/\/ \u2500\u2500 Digit right of bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n \/\/ Red if >0 (but green at 0), centred in cols 50-63\r\n var numSt = (barVal === 0) ? 'green' : 'red';\r\n drawTF(b.ctx, String(barVal), numSt, 20, b.sc, null, 50, 63);\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ WIPE ENGINE \u2014 diagonal TR\u2192BL pixel wipe\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n var wipeActive = false;\r\n\r\n function wipeReveal(cv, drawNewFn, msDur, callback) {\r\n if (wipeActive) { drawNewFn(cv); if (callback) callback(); return; }\r\n wipeActive = true;\r\n var b = sizeBezel(cv);\r\n var ctx = b.ctx;\r\n var w = b.w, h = b.h;\r\n var old = ctx.getImageData(0, 0, w, h); \/\/ snapshot current state\r\n var oc = document.createElement('canvas');\r\n oc.width = w; oc.height = h;\r\n drawNewFn(oc); \/\/ render new state offscreen\r\n var nw = oc.getContext('2d').getImageData(0, 0, w, h);\r\n var buf = ctx.createImageData(w, h); \/\/ reusable frame buffer\r\n var t0 = null;\r\n var dur = msDur || 1100;\r\n var ow = w > 1 ? w - 1 : 1;\r\n var oh = h > 1 ? h - 1 : 1;\r\n function frame(ts) {\r\n if (!t0) t0 = ts;\r\n var t = Math.min(1.0, (ts - t0) \/ dur);\r\n var thresh = 1.0 - 2.0 * t; \/\/ sweeps 1 \u2192 -1 : TR corner first\r\n var edgeW = 0.06; \/\/ width of white leading edge in normalised diag units\r\n for (var py = 0; py < h; py++) {\r\n var fy = py \/ oh;\r\n var rowIdx = py * w * 4;\r\n for (var px = 0; px < w; px++) {\r\n var diagVal = px \/ ow - fy; \/\/ high at TR, low at BL\r\n var idx = rowIdx + px * 4;\r\n if (diagVal >= thresh && diagVal < thresh + edgeW) {\r\n \/\/ White leading edge\r\n buf.data[idx] = 255;\r\n buf.data[idx+1] = 255;\r\n buf.data[idx+2] = 255;\r\n buf.data[idx+3] = 255;\r\n } else {\r\n var src = (diagVal >= thresh + edgeW) ? nw.data : old.data;\r\n buf.data[idx] = src[idx];\r\n buf.data[idx+1] = src[idx+1];\r\n buf.data[idx+2] = src[idx+2];\r\n buf.data[idx+3] = src[idx+3];\r\n }\r\n }\r\n }\r\n ctx.putImageData(buf, 0, 0);\r\n if (t < 1.0) { requestAnimationFrame(frame); }\r\n else { wipeActive = false; if (callback) callback(); }\r\n }\r\n requestAnimationFrame(frame);\r\n }\r\n\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \/\/ MASTER SCRIPT CONTROLLER\r\n \/\/ Drives all three slides from one 800ms beat script.\r\n \/\/ Wipe beats pause the ticker during the 1.1s animation.\r\n \/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n clearInterval(autoTimer); \/\/ hand off from existing auto-advance\r\n\r\n var masterBeat = 0;\r\n var masterPaused = false;\r\n\r\n function masterSetCaption(txt) {\r\n var el = document.getElementById('widgetCaption');\r\n if (!el) return;\r\n el.style.opacity = '0';\r\n setTimeout(function(){ el.textContent = txt; el.style.opacity = '1'; }, 200);\r\n }\r\n\r\n function masterGoSlide(n) {\r\n \/\/ Flint-only test \u2014 one slide, always visible, nothing to toggle\r\n }\r\n\r\n var MASTER_SCRIPT = (function() {\r\n \/\/ Shorthand factories\r\n function lf(v, s) { return function(cv){ drawLF(cv, v, s); }; }\r\n function bar(lbl,st,v,mx) { return function(cv){ drawBarScreen(cv,lbl,st,v,mx); }; }\r\n function tf2(l1,s1,l2,s2) { return function(cv){ drawTFScreen(cv,l1,s1,l2,s2); }; }\r\n var red = function(cv) { drawRed(cv); };\r\n var cls = function(cv) { drawCls(cv); };\r\n var fSC = tf2('SCORE+','green','COLLECT','green');\r\n\r\n return [\r\n \/\/ \u2500\u2500 FLINT E5 (20 YD) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n {slide:1, caption:'FLINT - End 5 @ 20YD',\r\n fn: tf2('NEXT END','green','--> 20 YD','amber') },\r\n {slide:1, fn: bar('END 5','green',10,10) },\r\n {slide:1, fn: bar('END 5','green', 9,10) },\r\n {slide:1, fn: bar('END 5','green', 8,10) },\r\n {slide:1, wipe:true, fn: bar('END 5','green', 3,10) },\r\n {slide:1, fn: bar('END 5','green', 2,10) },\r\n {slide:1, fn: bar('END 5','green', 1,10) },\r\n {slide:1, fn: bar('END 5','green', 0,10) },\r\n {slide:1, fn: lf(180,'green') },\r\n {slide:1, fn: lf(179,'green') },\r\n {slide:1, fn: lf(178,'green') },\r\n {slide:1, wipe:true, fn: lf(3,'amber') },\r\n {slide:1, fn: lf(2,'amber') },\r\n {slide:1, fn: lf(1,'amber') },\r\n {slide:1, fn: lf(0,'red') },\r\n {slide:1, fn: red },\r\n {slide:1, fn: fSC },\r\n \/\/ \u2500\u2500 FLINT E6 (10 YD) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n {slide:1, caption:'FLINT - End 6 @ 10YD',\r\n fn: tf2('NEXT END','green','--> 10 YD','amber') },\r\n {slide:1, fn: bar('END 6','green',10,10) },\r\n {slide:1, fn: bar('END 6','green', 9,10) },\r\n {slide:1, fn: bar('END 6','green', 8,10) },\r\n {slide:1, wipe:true, fn: bar('END 6','green', 3,10) },\r\n {slide:1, fn: bar('END 6','green', 2,10) },\r\n {slide:1, fn: bar('END 6','green', 1,10) },\r\n {slide:1, fn: bar('END 6','green', 0,10) },\r\n {slide:1, fn: lf(180,'green') },\r\n {slide:1, fn: lf(179,'green') },\r\n {slide:1, fn: lf(178,'green') },\r\n {slide:1, wipe:true, fn: lf(3,'amber') },\r\n {slide:1, fn: lf(2,'amber') },\r\n {slide:1, fn: lf(1,'amber') },\r\n {slide:1, fn: lf(0,'red') },\r\n {slide:1, fn: red },\r\n {slide:1, fn: fSC },\r\n \/\/ \u2500\u2500 FLINT E7 WALKUP \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n {slide:1, caption:'FLINT - End 7 : WALKUP @ 30YD',\r\n fn: tf2('NEXT END','green','--> 30 YD','amber') },\r\n {slide:1, fn: bar('END 7','green',10,10) },\r\n {slide:1, fn: bar('END 7','green', 9,10) },\r\n {slide:1, fn: bar('END 7','green', 8,10) },\r\n {slide:1, wipe:true, fn: bar('END 7','green', 3,10) },\r\n {slide:1, fn: bar('END 7','green', 2,10) },\r\n {slide:1, fn: bar('END 7','green', 1,10) },\r\n {slide:1, fn: bar('END 7','green', 0,10) },\r\n {slide:1, fn: lf(30,'green') },\r\n {slide:1, fn: lf(29,'green') },\r\n {slide:1, fn: lf(28,'green') },\r\n {slide:1, wipe:true, fn: lf(3,'amber') },\r\n {slide:1, fn: lf(2,'amber') },\r\n {slide:1, fn: lf(1,'amber') },\r\n {slide:1, fn: lf(0,'red') },\r\n {slide:1, fn: red },\r\n \/\/ 20s walk bar: 20,19,18 ADVANCE full red, ==>>25YD from 17 down\r\n {slide:1, caption:'FLINT - End 7 : WALKUP ==>> 25YD',\r\n fn: bar('ADVANCE','green', 20, 20) },\r\n {slide:1, fn: bar('ADVANCE','green', 19, 20) },\r\n {slide:1, fn: bar('ADVANCE','green', 18, 20) },\r\n {slide:1, fn: bar('==>25YD','amber', 17, 20) },\r\n {slide:1, fn: bar('==>25YD','amber', 16, 20) },\r\n {slide:1, wipe:true, fn: bar('==>25YD','amber', 3, 20) },\r\n {slide:1, fn: bar('==>25YD','amber', 2, 20) },\r\n {slide:1, fn: bar('==>25YD','amber', 1, 20) },\r\n {slide:1, fn: bar('==>25YD','amber', 0, 20) },\r\n \/\/ wipe to 30s second-arrow shoot countdown\r\n {slide:1, wipe:true, fn: lf(30,'green') },\r\n {slide:1, fn: lf(29,'green') },\r\n {slide:1, fn: lf(28,'green') },\r\n {slide:1, wipe:true, fn: lf(3,'amber') },\r\n {slide:1, fn: lf(2,'amber') },\r\n {slide:1, fn: lf(1,'amber') },\r\n {slide:1, fn: lf(0,'red') },\r\n {slide:1, fn: red },\r\n \/\/ loop back \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n ];\r\n })();\r\n\r\n function advanceMaster() {\r\n if (masterPaused) return;\r\n var e = MASTER_SCRIPT[masterBeat % MASTER_SCRIPT.length];\r\n masterBeat++;\r\n\r\n masterGoSlide(e.slide);\r\n if (e.caption) masterSetCaption(e.caption);\r\n\r\n \/\/ Only Flint slide (1) is script-driven; 0 and 2 run their own tickers\r\n if (e.slide === 1 && e.fn) {\r\n var cv = document.getElementById('s1screen');\r\n if (!cv) return;\r\n if (e.wipe) {\r\n masterPaused = true;\r\n wipeReveal(cv, e.fn, 1100, function() { masterPaused = false; });\r\n } else {\r\n e.fn(cv);\r\n }\r\n }\r\n }\r\n\r\n \/\/ Defer interval start until layout is settled \u2014 fixes mobile sizing\r\n function startWhenReady() {\r\n var bezel = document.querySelector('.screen-bezel');\r\n if (!bezel || bezel.offsetWidth === 0) {\r\n setTimeout(startWhenReady, 50);\r\n return;\r\n }\r\n \/\/ Bezel has width \u2014 start the master interval cleanly\r\n setInterval(advanceMaster, 1000);\r\n\r\n \/\/ Redraw on resize \/ orientation change \u2014 CSS media query handles bezel width,\r\n \/\/ JS just redraws at the new pitch\r\n var resizeTimer;\r\n window.addEventListener('resize', function() {\r\n clearTimeout(resizeTimer);\r\n resizeTimer = setTimeout(function() {\r\n var cv = document.getElementById('s1screen');\r\n if (cv) { cv.width = 0; cv.height = 0; }\r\n advanceMaster();\r\n }, 200);\r\n });\r\n }\r\n startWhenReady();\r\n\r\n \/* SLIDE 0 \u2014 WA Round \u2014 COMMENTED OUT FOR FLINT TEST\r\n var s0state = 'green';\r\n s0val = 35;\r\n function tickSlide0() {\r\n s0val--;\r\n if (s0val < 0) s0val = 35;\r\n s0state = s0val > 30 ? 'green' : s0val > 0 ? 'amber' : 'red';\r\n drawNumber('s0count', s0val, s0state);\r\n }\r\n setInterval(tickSlide0, 1000);\r\n drawNumber('s0count', s0val, s0state);\r\n drawLetter('s0a', 'A', 'green');\r\n drawLetter('s0b', 'B', 'green');\r\n *\/\r\n\r\n \/* SLIDE 2 \u2014 IFAA Indoor \u2014 COMMENTED OUT FOR FLINT TEST\r\n var s2val = 30;\r\n var s2phase = 'shoot';\r\n var s2step = 0;\r\n var s2detIdx = 0;\r\n var s2state = 'green';\r\n var IFAA_STATES = [\r\n { top: null, bot: ['A','B'] },\r\n { top: ['C','D'], bot: null },\r\n { top: null, bot: ['D','C'] },\r\n { top: ['B','A'], bot: null },\r\n ];\r\n function applyIfaaState() {\r\n var st = IFAA_STATES[s2detIdx % 4];\r\n ['s2topleft','s2topright'].forEach(function(id) {\r\n var cv = document.getElementById(id); if (cv) { cv.width=1; cv.height=1; }\r\n });\r\n ['s2botleft','s2botright'].forEach(function(id) {\r\n var cv = document.getElementById(id); if (cv) { cv.width=1; cv.height=1; }\r\n });\r\n if (st.top) { drawLetter('s2topleft', st.top[0], 'green'); drawLetter('s2topright', st.top[1], 'green'); }\r\n if (st.bot) { drawLetter('s2botleft', st.bot[0], 'green'); drawLetter('s2botright', st.bot[1], 'green'); }\r\n }\r\n function tickSlide2() {\r\n if (s2phase === 'shoot') {\r\n s2val--;\r\n s2state = s2val > 30 ? 'green' : s2val > 0 ? 'amber' : 'amber';\r\n drawNumber('s2count', s2val, s2state);\r\n if (s2val <= 0) { s2phase = 'transition'; s2step = 0; }\r\n } else if (s2phase === 'transition') {\r\n s2step++;\r\n if (s2step >= 2) {\r\n s2detIdx++; applyIfaaState();\r\n s2val = 30; s2phase = 'shoot';\r\n drawNumber('s2count', s2val, 'green');\r\n }\r\n }\r\n }\r\n applyIfaaState();\r\n setInterval(tickSlide2, 800);\r\n drawNumber('s2count', s2val, s2state);\r\n *\/\r\n\r\n \/\/ \u2500\u2500 Hamburger menu toggle \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n (function() {\r\n var btn = document.getElementById('navHamburger');\r\n var dropdown = document.getElementById('navDropdown');\r\n if (!btn || !dropdown) return;\r\n\r\n \/\/ Toggle dropdown open\/closed when hamburger is clicked\r\n btn.addEventListener('click', function(e) {\r\n e.stopPropagation();\r\n dropdown.classList.toggle('open');\r\n });\r\n\r\n \/\/ Close dropdown if user taps anywhere else on the page\r\n document.addEventListener('click', function() {\r\n dropdown.classList.remove('open');\r\n });\r\n })();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>TimeJudge \u2014 Wireless Archery Timing Time Judge Features How It Works Manual Rounds Contact Home How It Works Manual Contact Features Rounds Privacy Policy Wireless Archery Timing Systems Tournament timing, deployed in minutes. The timing system that gets out of your way. Switch competition formats with a single card swipe \u2014 no wiring, no complexity, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-189","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - tjudge.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tjudge.com\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TimeJudge \u2014 Wireless Archery Timing Systems\" \/>\n<meta property=\"og:description\" content=\"Tournament timing, deployed in minutes. The wireless archery timing system used at real competitions nationwide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tjudge.com\/\" \/>\n<meta property=\"og:site_name\" content=\"tjudge.com\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-28T10:43:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/tjudge.com\/wp-content\/uploads\/2026\/03\/TimeJudge-Card_scraped.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tjudge.com\/\",\"url\":\"https:\/\/tjudge.com\/\",\"name\":\"Home - tjudge.com\",\"isPartOf\":{\"@id\":\"https:\/\/tjudge.com\/#website\"},\"datePublished\":\"2026-03-16T16:45:26+00:00\",\"dateModified\":\"2026-03-28T10:43:37+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tjudge.com\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tjudge.com\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tjudge.com\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tjudge.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tjudge.com\/#website\",\"url\":\"https:\/\/tjudge.com\/\",\"name\":\"tjudge.com\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tjudge.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - tjudge.com","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tjudge.com\/","og_locale":"en_US","og_type":"article","og_title":"TimeJudge \u2014 Wireless Archery Timing Systems","og_description":"Tournament timing, deployed in minutes. The wireless archery timing system used at real competitions nationwide.","og_url":"https:\/\/tjudge.com\/","og_site_name":"tjudge.com","article_modified_time":"2026-03-28T10:43:37+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/tjudge.com\/wp-content\/uploads\/2026\/03\/TimeJudge-Card_scraped.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tjudge.com\/","url":"https:\/\/tjudge.com\/","name":"Home - tjudge.com","isPartOf":{"@id":"https:\/\/tjudge.com\/#website"},"datePublished":"2026-03-16T16:45:26+00:00","dateModified":"2026-03-28T10:43:37+00:00","breadcrumb":{"@id":"https:\/\/tjudge.com\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tjudge.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/tjudge.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tjudge.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/tjudge.com\/#website","url":"https:\/\/tjudge.com\/","name":"tjudge.com","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tjudge.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/tjudge.com\/index.php\/wp-json\/wp\/v2\/pages\/189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tjudge.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tjudge.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tjudge.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tjudge.com\/index.php\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":95,"href":"https:\/\/tjudge.com\/index.php\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":534,"href":"https:\/\/tjudge.com\/index.php\/wp-json\/wp\/v2\/pages\/189\/revisions\/534"}],"wp:attachment":[{"href":"https:\/\/tjudge.com\/index.php\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}