{"id":40,"date":"2026-07-27T19:50:33","date_gmt":"2026-07-27T19:50:33","guid":{"rendered":"https:\/\/buffaloonthego.com\/?page_id=40"},"modified":"2026-07-27T19:50:33","modified_gmt":"2026-07-27T19:50:33","slug":"scoreboard","status":"publish","type":"page","link":"https:\/\/buffaloonthego.com\/?page_id=40","title":{"rendered":"Scoreboard"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>Scoreboard<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Anton&#038;family=Archivo+Black&#038;family=Space+Mono:wght@400;700&#038;family=Oswald:wght@400;500;600&#038;display=swap\" rel=\"stylesheet\">\n<style>\n  :root{\n    --paper:#efe9dc;\n    --ink:#181410;\n    --hotpink:#e0245e;\n    --mustard:#e8a92e;\n    --teal:#1c6e63;\n  }\n  *{box-sizing:border-box;}\n  html,body{margin:0;padding:0;}\n  body{\n    background:var(--ink);\n    background-image:\n      radial-gradient(circle at 15% 20%, rgba(224,36,94,0.10), transparent 40%),\n      radial-gradient(circle at 85% 80%, rgba(232,169,46,0.08), transparent 45%);\n    color:var(--paper);\n    font-family:'Oswald', sans-serif;\n    min-height:100vh;\n  }\n  .wrap{max-width:900px;margin:0 auto;padding:28px 20px 60px;}\n\n  .masthead{\n    display:flex;justify-content:space-between;align-items:flex-end;\n    border-bottom:4px solid var(--paper);\n    padding-bottom:14px;margin-bottom:26px;\n    flex-wrap:wrap;gap:10px;\n  }\n  .masthead h1{\n    font-family:'Anton', sans-serif;\n    font-size:clamp(2.4rem, 6vw, 4.2rem);\n    letter-spacing:1px;\n    margin:0;\n    line-height:0.9;\n    text-transform:uppercase;\n    color:var(--paper);\n    text-shadow: 4px 4px 0 var(--hotpink);\n  }\n  .masthead .sub{\n    font-family:'Space Mono', monospace;\n    font-size:0.85rem;\n    color:var(--mustard);\n    letter-spacing:2px;\n    text-transform:uppercase;\n  }\n\n  .board{\n    background:var(--paper);color:var(--ink);\n    border:3px solid var(--ink);\n    border-radius:4px;\n    padding:26px;\n    box-shadow:8px 8px 0 rgba(0,0,0,0.4);\n  }\n\n  table{\n    width:100%;\n    border-collapse:collapse;\n  }\n  thead th{\n    font-family:'Space Mono', monospace;\n    font-size:0.75rem;\n    letter-spacing:2px;\n    text-transform:uppercase;\n    text-align:left;\n    color:var(--hotpink);\n    padding:0 10px 10px;\n    border-bottom:2px solid var(--ink);\n  }\n  thead th.score-col, thead th.rank-col{text-align:center;}\n  thead th.action-col{width:44px;}\n\n  tbody tr{\n    border-bottom:1px solid rgba(24,20,16,0.15);\n  }\n  tbody tr:last-child{border-bottom:none;}\n  tbody td{\n    padding:10px;\n    vertical-align:middle;\n  }\n  td.rank-col{\n    font-family:'Archivo Black', sans-serif;\n    text-align:center;\n    color:var(--teal);\n    width:50px;\n  }\n  input.name-input, input.score-input{\n    font-family:'Oswald', sans-serif;\n    font-size:1rem;\n    width:100%;\n    border:2px solid transparent;\n    background:rgba(24,20,16,0.05);\n    border-radius:3px;\n    padding:8px 10px;\n    color:var(--ink);\n  }\n  input.name-input:focus, input.score-input:focus{\n    outline:none;\n    border-color:var(--teal);\n    background:rgba(28,110,99,0.06);\n  }\n  input.score-input{\n    text-align:center;\n    font-family:'Archivo Black', sans-serif;\n  }\n  td.score-col{width:120px;}\n  td.action-col{width:44px;text-align:center;}\n\n  .remove-btn{\n    background:none;border:none;cursor:pointer;\n    font-family:'Space Mono', monospace;\n    font-size:1.1rem;\n    color:var(--hotpink);\n    line-height:1;\n    padding:4px 8px;\n  }\n  .remove-btn:hover{opacity:0.6;}\n\n  .board-actions{\n    display:flex;justify-content:space-between;align-items:center;\n    margin-top:20px;flex-wrap:wrap;gap:12px;\n  }\n  .btn-group{display:flex;gap:10px;flex-wrap:wrap;}\n  button.action{\n    font-family:'Archivo Black', sans-serif;\n    text-transform:uppercase;letter-spacing:0.5px;\n    font-size:0.85rem;\n    padding:11px 20px;\n    border:none;border-radius:3px;\n    cursor:pointer;\n    background:var(--hotpink);color:var(--paper);\n    box-shadow:4px 4px 0 rgba(0,0,0,0.5);\n    transition:transform .1s ease;\n  }\n  button.action:hover{transform:translate(-2px,-2px);}\n  button.action:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,0.5);}\n  button.action.secondary{background:var(--teal);}\n  button.action.danger{background:transparent;color:var(--hotpink);border:2px solid var(--hotpink);box-shadow:none;}\n  button.action.danger:hover{background:rgba(224,36,94,0.1);}\n\n  .save-note{\n    font-family:'Space Mono', monospace;\n    font-size:0.75rem;\n    color:var(--paper);\n    opacity:0.6;\n  }\n  .save-note.flash{color:var(--mustard);opacity:1;}\n\n  .empty-hint{\n    font-family:'Space Mono', monospace;\n    font-size:0.8rem;\n    color:var(--ink);\n    opacity:0.5;\n    text-align:center;\n    padding:20px 0;\n  }\n\n  @media (max-width:560px){\n    thead th.rank-col, td.rank-col{display:none;}\n    .board{padding:18px 14px;}\n  }\n<\/style>\n\n<div class=\"wrap\">\n\n  <div class=\"masthead\">\n    <div>\n      <h1>Scoreboard<\/h1>\n      <div class=\"sub\">Trivia Night &mdash; Music Edition<\/div>\n    <\/div>\n    <div class=\"save-note\" id=\"saveNote\">saved locally<\/div>\n  <\/div>\n\n  <div class=\"board\">\n    <table>\n      <thead>\n        <tr>\n          <th class=\"rank-col\">#<\/th>\n          <th>Name<\/th>\n          <th class=\"score-col\">Score<\/th>\n          <th class=\"action-col\"><\/th>\n        <\/tr>\n      <\/thead>\n      <tbody id=\"rowsBody\"><\/tbody>\n    <\/table>\n    <div class=\"empty-hint\" id=\"emptyHint\" style=\"display:none;\">No rows yet \u2014 click &#8220;Add Row&#8221; to get started.<\/div>\n\n    <div class=\"board-actions\">\n      <div class=\"btn-group\">\n        <button class=\"action secondary\" id=\"addRowBtn\">+ Add Row<\/button>\n      <\/div>\n      <button class=\"action danger\" id=\"clearBtn\">Clear Scoreboard<\/button>\n      <button class=\"action danger\" id=\"confirmClearBtn\" style=\"display:none;\">Confirm Clear?<\/button>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\nconst STORAGE_KEY = 'triviaScoreboardRows';\nconst rowsBody = document.getElementById('rowsBody');\nconst emptyHint = document.getElementById('emptyHint');\nconst saveNote = document.getElementById('saveNote');\n\nlet rows = [];\n\nfunction loadRows(){\n  try{\n    const raw = localStorage.getItem(STORAGE_KEY);\n    rows = raw ? JSON.parse(raw) : [];\n  }catch(e){\n    rows = [];\n  }\n  if(!Array.isArray(rows) || rows.length === 0){\n    rows = [{ name:'', score:'' }];\n  }\n}\n\nfunction saveRows(){\n  try{\n    localStorage.setItem(STORAGE_KEY, JSON.stringify(rows));\n    flashSaveNote();\n  }catch(e){\n    saveNote.textContent = 'could not save (localStorage unavailable)';\n  }\n}\n\nfunction flashSaveNote(){\n  saveNote.textContent = 'saved ' + new Date().toLocaleTimeString();\n  saveNote.classList.add('flash');\n  clearTimeout(flashSaveNote._t);\n  flashSaveNote._t = setTimeout(() => saveNote.classList.remove('flash'), 700);\n}\n\nfunction render(){\n  rowsBody.innerHTML = '';\n  emptyHint.style.display = rows.length === 0 ? 'block' : 'none';\n\n  rows.forEach((row, idx) => {\n    const tr = document.createElement('tr');\n    tr.innerHTML = `\n      <td class=\"rank-col\">${idx+1}<\/td>\n      <td>\n        <input type=\"text\" class=\"name-input\" placeholder=\"Player or team name\" value=\"${escapeAttr(row.name)}\" data-idx=\"${idx}\" data-field=\"name\">\n      <\/td>\n      <td class=\"score-col\">\n        <input type=\"number\" class=\"score-input\" placeholder=\"0\" value=\"${escapeAttr(row.score)}\" data-idx=\"${idx}\" data-field=\"score\">\n      <\/td>\n      <td class=\"action-col\">\n        <button class=\"remove-btn\" data-idx=\"${idx}\" title=\"Remove row\">&times;<\/button>\n      <\/td>\n    `;\n    rowsBody.appendChild(tr);\n  });\n\n  rowsBody.querySelectorAll('input').forEach(input => {\n    input.addEventListener('input', onFieldChange);\n  });\n  rowsBody.querySelectorAll('.remove-btn').forEach(btn => {\n    btn.addEventListener('click', onRemoveRow);\n  });\n}\n\nfunction escapeAttr(v){\n  if(v === undefined || v === null) return '';\n  return String(v).replace(\/\"\/g, '&quot;');\n}\n\nfunction onFieldChange(e){\n  const idx = parseInt(e.target.dataset.idx, 10);\n  const field = e.target.dataset.field;\n  rows[idx][field] = e.target.value;\n  saveRows();\n}\n\nfunction onRemoveRow(e){\n  const idx = parseInt(e.target.dataset.idx, 10);\n  rows.splice(idx, 1);\n  saveRows();\n  render();\n}\n\ndocument.getElementById('addRowBtn').addEventListener('click', () => {\n  rows.push({ name:'', score:'' });\n  saveRows();\n  render();\n});\n\ndocument.getElementById('clearBtn').addEventListener('click', () => {\n  if(!confirm('Clear the entire scoreboard? This cannot be undone.')) return;\n  rows = [{ name:'', score:'' }];\n  saveRows();\n  render();\n});\n\nloadRows();\nrender();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Scoreboard Scoreboard Trivia Night &mdash; Music Edition saved locally # Name Score No rows yet \u2014 click &#8220;Add Row&#8221; to get started. + Add Row Clear Scoreboard Confirm Clear?<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"on","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"default","ocean_disable_heading":"default","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-40","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=40"}],"version-history":[{"count":1,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions"}],"predecessor-version":[{"id":41,"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=\/wp\/v2\/pages\/40\/revisions\/41"}],"wp:attachment":[{"href":"https:\/\/buffaloonthego.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}