Live Scoreboard<\/title>\n <style>\n :root {\n --bg: #09040f;\n --panel: #140a20;\n --panel-2: #1d0f2d;\n --gold: #f5c451;\n --purple: #7d39c7;\n --purple-2: #b57cff;\n --white: #f7f4ff;\n --red: #ff4d6d;\n --green: #33d17a;\n }\n\n * { box-sizing: border-box; }\n body {\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n background: radial-gradient(circle at top, #23103a 0%, var(--bg) 45%, #050209 100%);\n color: var(--white);\n }\n\n .wrap {\n max-width: 1400px;\n margin: 0 auto;\n padding: 24px;\n }\n\n .board {\n border: 6px solid #2c1842;\n border-radius: 26px;\n background: linear-gradient(180deg, #0d0615 0%, #12081d 100%);\n box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 0 30px rgba(181,124,255,.08);\n overflow: hidden;\n }\n\n .topbar {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 16px;\n align-items: center;\n padding: 20px 24px;\n background: linear-gradient(180deg, #1d0f2d, #130a1f);\n border-bottom: 3px solid #2c1842;\n }\n\n .brand, .refresh {\n font-weight: 700;\n letter-spacing: .08em;\n color: var(--gold);\n font-size: 18px;\n }\n\n .title {\n text-align: center;\n }\n\n .title h1 {\n margin: 0;\n font-size: clamp(28px, 4vw, 54px);\n letter-spacing: .06em;\n color: var(--white);\n text-transform: uppercase;\n text-shadow: 0 0 18px rgba(181,124,255,.25);\n }\n\n .title p {\n margin: 8px 0 0;\n color: #d8c8ee;\n font-size: 14px;\n letter-spacing: .12em;\n text-transform: uppercase;\n }\n\n .hero {\n display: grid;\n grid-template-columns: 1fr 220px 1fr;\n gap: 18px;\n align-items: stretch;\n padding: 24px;\n border-bottom: 3px solid #2c1842;\n }\n\n .winner {\n background: linear-gradient(180deg, #211033, #150b22);\n border: 3px solid #362051;\n border-radius: 22px;\n padding: 20px;\n min-height: 210px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n box-shadow: inset 0 0 24px rgba(245,196,81,.06);\n }\n\n .winner-label {\n color: var(--gold);\n text-transform: uppercase;\n letter-spacing: .18em;\n font-size: 15px;\n margin-bottom: 14px;\n text-align: center;\n }\n\n .winner-name {\n font-size: clamp(28px, 4vw, 52px);\n font-weight: 800;\n text-align: center;\n line-height: 1.05;\n text-transform: uppercase;\n }\n\n .winner-votes {\n margin-top: 12px;\n text-align: center;\n font-size: clamp(22px, 3vw, 42px);\n color: var(--gold);\n font-weight: 800;\n }\n\n .center-panel {\n background: linear-gradient(180deg, #2b1543, #1a0d2b);\n border: 3px solid #4a2a72;\n border-radius: 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n padding: 18px;\n }\n\n .ballots-label {\n color: #d9c3ff;\n text-transform: uppercase;\n letter-spacing: .2em;\n font-size: 14px;\n margin-bottom: 10px;\n text-align: center;\n }\n\n .ballots-count {\n font-size: clamp(40px, 6vw, 82px);\n font-weight: 900;\n color: var(--gold);\n line-height: 1;\n }\n\n .leaders {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 18px;\n padding: 24px;\n }\n\n .column {\n background: linear-gradient(180deg, #150a21, #100817);\n border: 3px solid #2c1842;\n border-radius: 22px;\n padding: 20px;\n }\n\n .column h2 {\n margin: 0 0 16px;\n font-size: 28px;\n text-transform: uppercase;\n letter-spacing: .12em;\n color: var(--white);\n text-align: center;\n }\n\n .row {\n display: grid;\n grid-template-columns: 58px 1fr 110px;\n gap: 14px;\n align-items: center;\n margin-bottom: 14px;\n padding: 12px 14px;\n border-radius: 16px;\n background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));\n border: 1px solid rgba(181,124,255,.12);\n }\n\n .rank {\n font-size: 28px;\n font-weight: 900;\n text-align: center;\n color: var(--gold);\n }\n\n .name-wrap { min-width: 0; }\n .name {\n font-size: 24px;\n font-weight: 800;\n text-transform: uppercase;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .bar-track {\n height: 18px;\n margin-top: 8px;\n border-radius: 999px;\n background: #27163a;\n overflow: hidden;\n border: 1px solid rgba(255,255,255,.07);\n }\n\n .bar-fill {\n height: 100%;\n width: 0%;\n border-radius: 999px;\n background: linear-gradient(90deg, var(--gold), #ffe18d);\n box-shadow: 0 0 16px rgba(245,196,81,.35);\n transition: width .6s ease;\n }\n\n .votes {\n font-size: 34px;\n font-weight: 900;\n color: var(--white);\n text-align: right;\n }\n\n .footer {\n padding: 14px 24px 22px;\n color: #c8b8df;\n display: flex;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n font-size: 14px;\n letter-spacing: .06em;\n text-transform: uppercase;\n }\n\n .error {\n margin: 18px 24px 0;\n padding: 14px 16px;\n border-radius: 14px;\n background: rgba(255,77,109,.10);\n border: 1px solid rgba(255,77,109,.35);\n color: #ffd5dd;\n display: none;\n }\n\n @media (max-width: 980px) {\n .hero, .leaders { grid-template-columns: 1fr; }\n .topbar { grid-template-columns: 1fr; text-align: center; }\n .brand, .refresh { text-align: center; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <div class=\"board\">\n <div class=\"topbar\">\n <div class=\"brand\">Champaign County Section<\/div>\n <div class=\"title\">\n <h1>Royal Vote Live<\/h1>\n <\/div>\n <div class=\"refresh\" id=\"refreshText\">Refreshing every 10 seconds<\/div>\n <\/div>\n\n <div id=\"errorBox\" class=\"error\"><\/div>\n\n <div class=\"hero\">\n <div class=\"winner\">\n <div class=\"winner-label\">Current King Leader<\/div>\n <div class=\"winner-name\" id=\"topKingName\">\u2014<\/div>\n <div class=\"winner-votes\" id=\"topKingVotes\">0 votes<\/div>\n <\/div>\n\n <div class=\"center-panel\">\n <div class=\"ballots-label\">Total Ballots<\/div>\n <div class=\"ballots-count\" id=\"ballotCount\">0<\/div>\n <\/div>\n\n <div class=\"winner\">\n <div class=\"winner-label\">Current Queen Leader<\/div>\n <div class=\"winner-name\" id=\"topQueenName\">\u2014<\/div>\n <div class=\"winner-votes\" id=\"topQueenVotes\">0 votes<\/div>\n <\/div>\n <\/div>\n\n <div class=\"leaders\">\n <div class=\"column\">\n <h2>Kings<\/h2>\n <div id=\"kingsList\"><\/div>\n <\/div>\n <div class=\"column\">\n <h2>Queens<\/h2>\n <div id=\"queensList\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer\">\n <div id=\"lastUpdated\">Last updated: —<\/div>\n <div>Live audience display<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const GOOGLE_SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbwjT8UmpBBlDbiuc8iziO4vwqE_nF7H2_kmNFjFzYbEhx9AbT-X0oKa_rdmhz4ot971\/exec\";\n\n const DEFAULT_KINGS = [\"King 1\", \"King 2\", \"King 3\", \"King 4\", \"King 5\", \"King 6\"];\n const DEFAULT_QUEENS = [\"Queen 1\", \"Queen 2\", \"Queen 3\", \"Queen 4\", \"Queen 5\", \"Queen 6\"];\n\n const ballotCount = document.getElementById('ballotCount');\n const topKingName = document.getElementById('topKingName');\n const topKingVotes = document.getElementById('topKingVotes');\n const topQueenName = document.getElementById('topQueenName');\n const topQueenVotes = document.getElementById('topQueenVotes');\n const kingsList = document.getElementById('kingsList');\n const queensList = document.getElementById('queensList');\n const lastUpdated = document.getElementById('lastUpdated');\n const errorBox = document.getElementById('errorBox');\n\n function escapeHtml(text) {\n return String(text).replace(\/[&<>\"']\/g, function (m) {\n return ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m];\n });\n }\n\n function toSortedEntries(obj, defaults) {\n const base = {};\n defaults.forEach(name => base[name] = 0);\n Object.entries(obj || {}).forEach(([name, votes]) => {\n base[name] = Number(votes) || 0;\n });\n return Object.entries(base).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));\n }\n\n function renderSide(container, rows) {\n const maxVotes = Math.max(1, ...rows.map(r => r[1]));\n container.innerHTML = rows.map((row, index) => {\n const percent = Math.max(0, (row[1] \/ maxVotes) * 100);\n return `\n <div class=\"row\">\n <div class=\"rank\">${index + 1}<\/div>\n <div class=\"name-wrap\">\n <div class=\"name\">${escapeHtml(row[0])}<\/div>\n <div class=\"bar-track\"><div class=\"bar-fill\" style=\"width:${percent}%\"><\/div><\/div>\n <\/div>\n <div class=\"votes\">${row[1]}<\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function renderData(data) {\n const kings = toSortedEntries(data.kingsTotals, DEFAULT_KINGS);\n const queens = toSortedEntries(data.queensTotals, DEFAULT_QUEENS);\n\n ballotCount.textContent = data.totalBallots || 0;\n\n topKingName.textContent = kings[0] ? kings[0][0] : '\u2014';\n topKingVotes.textContent = kings[0] ? `${kings[0][1]} votes` : '0 votes';\n\n topQueenName.textContent = queens[0] ? queens[0][0] : '\u2014';\n topQueenVotes.textContent = queens[0] ? `${queens[0][1]} votes` : '0 votes';\n\n renderSide(kingsList, kings);\n renderSide(queensList, queens);\n\n lastUpdated.textContent = `Last updated: ${new Date().toLocaleString()}`;\n errorBox.style.display = 'none';\n }\n\n function handleScoreboardData(data) {\n if (!data || data.status !== 'ok') {\n errorBox.textContent = 'Could not load live totals yet. Check your Apps Script data.';\n errorBox.style.display = 'block';\n return;\n }\n renderData(data);\n }\n\n function loadTotals() {\n errorBox.style.display = 'none';\n\n const oldScript = document.getElementById('jsonpFeed');\n if (oldScript) oldScript.remove();\n\n const script = document.createElement('script');\n script.id = 'jsonpFeed';\n script.src = GOOGLE_SCRIPT_URL + '?callback=handleScoreboardData&t=' + Date.now();\n script.onerror = function () {\n errorBox.textContent = 'Could not load live totals yet. The website could not reach Google Apps Script.';\n errorBox.style.display = 'block';\n };\n\n document.body.appendChild(script);\n }\n\n loadTotals();\n setInterval(loadTotals, 10000);\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Live Scoreboard Champaign County Section Royal Vote Live Refreshing every 10 seconds Current King Leader \u2014 0 votes Total Ballots […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":7,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/33\/revisions\/72"}],"wp:attachment":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":33,"date":"2026-03-15T14:13:08","date_gmt":"2026-03-15T14:13:08","guid":{"rendered":"https:\/\/djaink.com\/public_html\/Portfolio\/?page_id=33"},"modified":"2026-03-17T23:13:05","modified_gmt":"2026-03-17T23:13:05","slug":"33-2","status":"publish","type":"page","link":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/33-2\/","title":{"rendered":"NCNW Kings and Queens Score Board"},"content":{"rendered":"\n\n\n\n \n \n Live Scoreboard<\/title>\n <style>\n :root {\n --bg: #09040f;\n --panel: #140a20;\n --panel-2: #1d0f2d;\n --gold: #f5c451;\n --purple: #7d39c7;\n --purple-2: #b57cff;\n --white: #f7f4ff;\n --red: #ff4d6d;\n --green: #33d17a;\n }\n\n * { box-sizing: border-box; }\n body {\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n background: radial-gradient(circle at top, #23103a 0%, var(--bg) 45%, #050209 100%);\n color: var(--white);\n }\n\n .wrap {\n max-width: 1400px;\n margin: 0 auto;\n padding: 24px;\n }\n\n .board {\n border: 6px solid #2c1842;\n border-radius: 26px;\n background: linear-gradient(180deg, #0d0615 0%, #12081d 100%);\n box-shadow: 0 18px 60px rgba(0,0,0,.55), inset 0 0 30px rgba(181,124,255,.08);\n overflow: hidden;\n }\n\n .topbar {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n gap: 16px;\n align-items: center;\n padding: 20px 24px;\n background: linear-gradient(180deg, #1d0f2d, #130a1f);\n border-bottom: 3px solid #2c1842;\n }\n\n .brand, .refresh {\n font-weight: 700;\n letter-spacing: .08em;\n color: var(--gold);\n font-size: 18px;\n }\n\n .title {\n text-align: center;\n }\n\n .title h1 {\n margin: 0;\n font-size: clamp(28px, 4vw, 54px);\n letter-spacing: .06em;\n color: var(--white);\n text-transform: uppercase;\n text-shadow: 0 0 18px rgba(181,124,255,.25);\n }\n\n .title p {\n margin: 8px 0 0;\n color: #d8c8ee;\n font-size: 14px;\n letter-spacing: .12em;\n text-transform: uppercase;\n }\n\n .hero {\n display: grid;\n grid-template-columns: 1fr 220px 1fr;\n gap: 18px;\n align-items: stretch;\n padding: 24px;\n border-bottom: 3px solid #2c1842;\n }\n\n .winner {\n background: linear-gradient(180deg, #211033, #150b22);\n border: 3px solid #362051;\n border-radius: 22px;\n padding: 20px;\n min-height: 210px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n box-shadow: inset 0 0 24px rgba(245,196,81,.06);\n }\n\n .winner-label {\n color: var(--gold);\n text-transform: uppercase;\n letter-spacing: .18em;\n font-size: 15px;\n margin-bottom: 14px;\n text-align: center;\n }\n\n .winner-name {\n font-size: clamp(28px, 4vw, 52px);\n font-weight: 800;\n text-align: center;\n line-height: 1.05;\n text-transform: uppercase;\n }\n\n .winner-votes {\n margin-top: 12px;\n text-align: center;\n font-size: clamp(22px, 3vw, 42px);\n color: var(--gold);\n font-weight: 800;\n }\n\n .center-panel {\n background: linear-gradient(180deg, #2b1543, #1a0d2b);\n border: 3px solid #4a2a72;\n border-radius: 22px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n padding: 18px;\n }\n\n .ballots-label {\n color: #d9c3ff;\n text-transform: uppercase;\n letter-spacing: .2em;\n font-size: 14px;\n margin-bottom: 10px;\n text-align: center;\n }\n\n .ballots-count {\n font-size: clamp(40px, 6vw, 82px);\n font-weight: 900;\n color: var(--gold);\n line-height: 1;\n }\n\n .leaders {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 18px;\n padding: 24px;\n }\n\n .column {\n background: linear-gradient(180deg, #150a21, #100817);\n border: 3px solid #2c1842;\n border-radius: 22px;\n padding: 20px;\n }\n\n .column h2 {\n margin: 0 0 16px;\n font-size: 28px;\n text-transform: uppercase;\n letter-spacing: .12em;\n color: var(--white);\n text-align: center;\n }\n\n .row {\n display: grid;\n grid-template-columns: 58px 1fr 110px;\n gap: 14px;\n align-items: center;\n margin-bottom: 14px;\n padding: 12px 14px;\n border-radius: 16px;\n background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));\n border: 1px solid rgba(181,124,255,.12);\n }\n\n .rank {\n font-size: 28px;\n font-weight: 900;\n text-align: center;\n color: var(--gold);\n }\n\n .name-wrap { min-width: 0; }\n .name {\n font-size: 24px;\n font-weight: 800;\n text-transform: uppercase;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .bar-track {\n height: 18px;\n margin-top: 8px;\n border-radius: 999px;\n background: #27163a;\n overflow: hidden;\n border: 1px solid rgba(255,255,255,.07);\n }\n\n .bar-fill {\n height: 100%;\n width: 0%;\n border-radius: 999px;\n background: linear-gradient(90deg, var(--gold), #ffe18d);\n box-shadow: 0 0 16px rgba(245,196,81,.35);\n transition: width .6s ease;\n }\n\n .votes {\n font-size: 34px;\n font-weight: 900;\n color: var(--white);\n text-align: right;\n }\n\n .footer {\n padding: 14px 24px 22px;\n color: #c8b8df;\n display: flex;\n justify-content: space-between;\n gap: 16px;\n flex-wrap: wrap;\n font-size: 14px;\n letter-spacing: .06em;\n text-transform: uppercase;\n }\n\n .error {\n margin: 18px 24px 0;\n padding: 14px 16px;\n border-radius: 14px;\n background: rgba(255,77,109,.10);\n border: 1px solid rgba(255,77,109,.35);\n color: #ffd5dd;\n display: none;\n }\n\n @media (max-width: 980px) {\n .hero, .leaders { grid-template-columns: 1fr; }\n .topbar { grid-template-columns: 1fr; text-align: center; }\n .brand, .refresh { text-align: center; }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"wrap\">\n <div class=\"board\">\n <div class=\"topbar\">\n <div class=\"brand\">Champaign County Section<\/div>\n <div class=\"title\">\n <h1>Royal Vote Live<\/h1>\n <\/div>\n <div class=\"refresh\" id=\"refreshText\">Refreshing every 10 seconds<\/div>\n <\/div>\n\n <div id=\"errorBox\" class=\"error\"><\/div>\n\n <div class=\"hero\">\n <div class=\"winner\">\n <div class=\"winner-label\">Current King Leader<\/div>\n <div class=\"winner-name\" id=\"topKingName\">\u2014<\/div>\n <div class=\"winner-votes\" id=\"topKingVotes\">0 votes<\/div>\n <\/div>\n\n <div class=\"center-panel\">\n <div class=\"ballots-label\">Total Ballots<\/div>\n <div class=\"ballots-count\" id=\"ballotCount\">0<\/div>\n <\/div>\n\n <div class=\"winner\">\n <div class=\"winner-label\">Current Queen Leader<\/div>\n <div class=\"winner-name\" id=\"topQueenName\">\u2014<\/div>\n <div class=\"winner-votes\" id=\"topQueenVotes\">0 votes<\/div>\n <\/div>\n <\/div>\n\n <div class=\"leaders\">\n <div class=\"column\">\n <h2>Kings<\/h2>\n <div id=\"kingsList\"><\/div>\n <\/div>\n <div class=\"column\">\n <h2>Queens<\/h2>\n <div id=\"queensList\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"footer\">\n <div id=\"lastUpdated\">Last updated: —<\/div>\n <div>Live audience display<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n const GOOGLE_SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbwjT8UmpBBlDbiuc8iziO4vwqE_nF7H2_kmNFjFzYbEhx9AbT-X0oKa_rdmhz4ot971\/exec\";\n\n const DEFAULT_KINGS = [\"King 1\", \"King 2\", \"King 3\", \"King 4\", \"King 5\", \"King 6\"];\n const DEFAULT_QUEENS = [\"Queen 1\", \"Queen 2\", \"Queen 3\", \"Queen 4\", \"Queen 5\", \"Queen 6\"];\n\n const ballotCount = document.getElementById('ballotCount');\n const topKingName = document.getElementById('topKingName');\n const topKingVotes = document.getElementById('topKingVotes');\n const topQueenName = document.getElementById('topQueenName');\n const topQueenVotes = document.getElementById('topQueenVotes');\n const kingsList = document.getElementById('kingsList');\n const queensList = document.getElementById('queensList');\n const lastUpdated = document.getElementById('lastUpdated');\n const errorBox = document.getElementById('errorBox');\n\n function escapeHtml(text) {\n return String(text).replace(\/[&<>\"']\/g, function (m) {\n return ({ '&': '&', '<': '<', '>': '>', '\"': '"', \"'\": ''' })[m];\n });\n }\n\n function toSortedEntries(obj, defaults) {\n const base = {};\n defaults.forEach(name => base[name] = 0);\n Object.entries(obj || {}).forEach(([name, votes]) => {\n base[name] = Number(votes) || 0;\n });\n return Object.entries(base).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));\n }\n\n function renderSide(container, rows) {\n const maxVotes = Math.max(1, ...rows.map(r => r[1]));\n container.innerHTML = rows.map((row, index) => {\n const percent = Math.max(0, (row[1] \/ maxVotes) * 100);\n return `\n <div class=\"row\">\n <div class=\"rank\">${index + 1}<\/div>\n <div class=\"name-wrap\">\n <div class=\"name\">${escapeHtml(row[0])}<\/div>\n <div class=\"bar-track\"><div class=\"bar-fill\" style=\"width:${percent}%\"><\/div><\/div>\n <\/div>\n <div class=\"votes\">${row[1]}<\/div>\n <\/div>\n `;\n }).join('');\n }\n\n function renderData(data) {\n const kings = toSortedEntries(data.kingsTotals, DEFAULT_KINGS);\n const queens = toSortedEntries(data.queensTotals, DEFAULT_QUEENS);\n\n ballotCount.textContent = data.totalBallots || 0;\n\n topKingName.textContent = kings[0] ? kings[0][0] : '\u2014';\n topKingVotes.textContent = kings[0] ? `${kings[0][1]} votes` : '0 votes';\n\n topQueenName.textContent = queens[0] ? queens[0][0] : '\u2014';\n topQueenVotes.textContent = queens[0] ? `${queens[0][1]} votes` : '0 votes';\n\n renderSide(kingsList, kings);\n renderSide(queensList, queens);\n\n lastUpdated.textContent = `Last updated: ${new Date().toLocaleString()}`;\n errorBox.style.display = 'none';\n }\n\n function handleScoreboardData(data) {\n if (!data || data.status !== 'ok') {\n errorBox.textContent = 'Could not load live totals yet. Check your Apps Script data.';\n errorBox.style.display = 'block';\n return;\n }\n renderData(data);\n }\n\n function loadTotals() {\n errorBox.style.display = 'none';\n\n const oldScript = document.getElementById('jsonpFeed');\n if (oldScript) oldScript.remove();\n\n const script = document.createElement('script');\n script.id = 'jsonpFeed';\n script.src = GOOGLE_SCRIPT_URL + '?callback=handleScoreboardData&t=' + Date.now();\n script.onerror = function () {\n errorBox.textContent = 'Could not load live totals yet. The website could not reach Google Apps Script.';\n errorBox.style.display = 'block';\n };\n\n document.body.appendChild(script);\n }\n\n loadTotals();\n setInterval(loadTotals, 10000);\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Live Scoreboard Champaign County Section Royal Vote Live Refreshing every 10 seconds Current King Leader \u2014 0 votes Total Ballots […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":7,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":72,"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/pages\/33\/revisions\/72"}],"wp:attachment":[{"href":"https:\/\/djaink.com\/public_html\/Portfolio\/index.php\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}