{"id":407,"date":"2026-04-17T04:54:19","date_gmt":"2026-04-17T04:54:19","guid":{"rendered":"https:\/\/mtnstep.com\/New\/?page_id=407"},"modified":"2026-04-20T09:02:37","modified_gmt":"2026-04-20T09:02:37","slug":"live-scorecard","status":"publish","type":"page","link":"https:\/\/mtnstep.com\/New\/live-scorecard\/","title":{"rendered":"Live Scorecard"},"content":{"rendered":"\r\n    <style>\r\n    \/* Hides the giant featured image and page titles, BUT LEAVES THE MAIN SITE MENU ALONE *\/\r\n    .post-thumbnail, .entry-thumbnail, .featured-media, \r\n    .featured-image, header.entry-header, .page-title-bar, \r\n    .page-header-bg, .entry-title, img.wp-post-image { \r\n        display: none !important; background-image: none !important;\r\n    }\r\n\r\n    \/* The Universal Menu Styles *\/\r\n    .golf-app-nav-container {\r\n        display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;\r\n        justify-content: center !important; align-items: center !important; gap: 15px !important;\r\n        background: #111 !important; padding: 15px !important; border-radius: 8px !important;\r\n        border: 1px solid #333 !important; margin: 20px auto 40px auto !important; max-width: 1000px;\r\n    }\r\n    .golf-app-nav-container a.golf-nav-btn {\r\n        display: inline-flex !important; align-items: center !important; justify-content: center !important;\r\n        background: #222 !important; color: #4db8ff !important; text-decoration: none !important;\r\n        padding: 12px 20px !important; border-radius: 6px !important; font-weight: bold !important;\r\n        font-size: 16px !important; border: 1px solid #444 !important; white-space: nowrap !important;\r\n        margin: 0 !important; transition: 0.2s ease !important; line-height: 1 !important;\r\n    }\r\n    .golf-app-nav-container a.golf-nav-btn:hover { background: #4db8ff !important; color: #000 !important; }\r\n    <\/style>\r\n    \r\n    <div class=\"golf-app-nav-container\">\r\n        <a href=\"https:\/\/mtnstep.com\/New\/live-scorecard\/\" class=\"golf-nav-btn\">Live Scorecard<\/a>\r\n        <a href=\"https:\/\/mtnstep.com\/New\/leaders-and-course-records\/\" class=\"golf-nav-btn\">Course Records<\/a>\r\n        <a href=\"https:\/\/mtnstep.com\/New\/tour-leaders\/\" class=\"golf-nav-btn\">Tour Leaders<\/a>\r\n        <a href=\"https:\/\/mtnstep.com\/New\/mountain-step-national-golf-course\/\" class=\"golf-nav-btn\">MtnStep Ranch GC<\/a>\r\n    <\/div>\r\n    \n\n\n\n<style>\n  .golf-app-container { font-family: sans-serif; max-width: 1000px; margin: 0 auto; padding: 10px; }\n  \n  .course-link-container { text-align: center; margin-top: -10px; margin-bottom: 20px; }\n  .course-link { color: #4db8ff; font-size: 16px; font-weight: bold; text-decoration: none; transition: color 0.2s; }\n  .course-link:hover { color: #fff; text-decoration: underline; }\n\n  .event-setup-box { background: #1a1a1a; padding: 15px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #444; }\n  .event-name-input { width: 100%; padding: 12px; font-size: 18px; font-weight: bold; background: #000; color: #fff; border: 1px solid #555; border-radius: 6px; text-align: center; }\n  .event-name-input::placeholder { color: #888; font-weight: normal; }\n\n  .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }\n  .scorecard-table { width: 100%; border-collapse: collapse; text-align: center; background: #111; color: #fff; white-space: nowrap; }\n  .scorecard-table th, .scorecard-table td { border: 1px solid #444; padding: 10px 8px; }\n  .scorecard-table th { background: #000; font-weight: bold; }\n  \n  .hole-input { width: 45px; height: 35px; padding: 5px; text-align: center; font-size: 16px; font-weight: bold; background:#222; color:#fff; border: 1px solid #777; border-radius: 4px; }\n  .ai-score { font-size: 18px; font-weight: bold; color: #ccc; }\n  \n  .score-red { color: #ff5252; font-weight: bold; } \n  .score-black { color: #ffb74d; font-weight: bold; } \n  .score-even { color: #64b5f6; font-weight: bold;} \n  \n  .scorecard-table tr:not(.player-name-row) th:first-child, \n  .scorecard-table tr:not(.player-name-row) td:first-child { \n    position: sticky; left: 0; background: #111; z-index: 2; border-right: 2px solid #777; font-weight: bold; width: 60px;\n  }\n  .scorecard-table tr:not(.player-name-row) th:first-child { background: #000; z-index: 3; }\n\n  .player-name-row td { background: #2a2a2a !important; border-right: none !important; padding: 0 !important; }\n  .sticky-banner-content { position: sticky; left: 0; display: flex; align-items: center; width: max-content; padding: 8px 10px; z-index: 4; }\n  \n  \/* THE POS BADGE STYLING *\/\n  .pos-badge { background: #000; color: #fff; font-size: 14px; font-weight: bold; padding: 4px 8px; border-radius: 4px; border: 1px solid #555; margin-right: 12px; min-width: 32px; text-align: center; display: inline-block;}\n\n  .profile-photo { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #555; margin-right: 10px; }\n  .profile-link { color: #4db8ff; font-size: 16px; font-weight: bold; text-decoration: none; transition: color 0.2s; }\n  .profile-link:hover { color: #fff; text-decoration: underline; }\n  .banner-live-score { font-size: 16px; font-weight: bold; margin-left: 10px; }\n  tbody tr { transition: all 0.3s ease; }\n  \n  #submit-round-btn { display: none; width: 100%; background: #4CAF50; color: white; font-size: 20px; font-weight: bold; padding: 15px; border: none; border-radius: 8px; cursor: pointer; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: background 0.3s; }\n  #submit-round-btn:active { background: #388E3C; }\n  #submit-round-btn:disabled { background: #555; color: #888; cursor: not-allowed; }\n<\/style>\n\n<div class=\"golf-app-container\">\n  <h2 style=\"text-align: center; margin-bottom: 10px;\">\u26f3 Live Tournament Scorecard<\/h2>\n  \n  <div class=\"course-link-container\">\n      <a href=\"https:\/\/mtnstep.com\/New\/mountain-step-national-golf-course\/\" class=\"course-link\">\ud83d\udccd Mountain Step Ranch Golf Course<\/a>\n  <\/div>\n  \n  <div class=\"event-setup-box\">\n      <input type=\"text\" id=\"event-name\" class=\"event-name-input\" placeholder=\"\ud83c\udfc6 Enter Event Name (e.g., The Masters)\">\n  <\/div>\n  \n  <div class=\"table-responsive\">\n    <table class=\"scorecard-table\" id=\"main-table\">\n      <thead>\n        <tr>\n          <th>Hole<\/th><th>1<\/th><th>2<\/th><th>3<\/th><th>4<\/th><th>5<\/th><th>6<\/th><th>7<\/th><th>8<\/th><th>9<\/th><th>Total<\/th>\n        <\/tr>\n        <tr>\n          <td>Par<\/td><td>3<\/td><td>3<\/td><td>3<\/td><td>3<\/td><td>3<\/td><td>3<\/td><td>3<\/td><td>3<\/td><td>3<\/td><td>27<\/td>\n        <\/tr>\n        <tr>\n          <td>Yards<\/td><td>78<\/td><td>36<\/td><td>53<\/td><td>45<\/td><td>65<\/td><td>160<\/td><td>90<\/td><td>106<\/td><td>28<\/td><td>661<\/td>\n        <\/tr>\n      <\/thead>\n      <tbody id=\"players-body\">\n        <tr><td colspan=\"11\">Loading Tournament Field&#8230;<\/td><\/tr>\n      <\/tbody>\n    <\/table>\n  <\/div>\n  \n  <button id=\"submit-round-btn\">\u2705 Finish &#038; Submit Tournament<\/button>\n<\/div>\n\n<script>\n  let tournamentData = []; \n\n  document.addEventListener('DOMContentLoaded', function() {\n    \n    fetch('\/New\/wp-json\/golf\/v1\/start-round')\n      .then(response => {\n          if(!response.ok) throw new Error(\"API Error\");\n          return response.json();\n      })\n      .then(players => {\n        if(players.error) throw new Error(players.error);\n        \n        tournamentData = players;\n        const tbody = document.getElementById('players-body');\n        tbody.innerHTML = ''; \n        \n        players.forEach((player, index) => {\n          if(player.type === 'Simulated') {\n            player.pacingOffset = Math.floor(Math.random() * 4) + 2; \n          }\n\n          const nameTr = document.createElement('tr');\n          nameTr.className = 'player-name-row';\n          nameTr.id = `banner-row-${index}`;\n          \n          \/\/ ADDED POS BADGE HERE\n          nameTr.innerHTML = `\n              <td colspan=\"11\">\n                  <div class=\"sticky-banner-content\">\n                      <span class=\"pos-badge\" id=\"pos-badge-${index}\">-<\/span>\n                      <img decoding=\"async\" src=\"${player.photo}\" class=\"profile-photo\"> \n                      <a href=\"${player.link}\" class=\"profile-link\" target=\"_blank\">${player.name}<\/a>\n                      <span class=\"banner-live-score score-even\" id=\"banner-score-${index}\">(E) Thru 0<\/span>\n                  <\/div>\n              <\/td>`;\n          tbody.appendChild(nameTr);\n\n          const scoreTr = document.createElement('tr');\n          scoreTr.id = `score-row-${index}`;\n          let rowHTML = `<td>Score<\/td>`;\n          \n          for(let i = 0; i < 9; i++) {\n            if(player.type === 'Human') {\n              rowHTML += `<td><input type=\"number\" class=\"hole-input human-score\" data-row=\"${index}\" min=\"1\" max=\"10\"><\/td>`;\n            } else {\n              rowHTML += `<td><span class=\"ai-score\" id=\"ai-${index}-hole-${i}\"><\/span><\/td>`;\n            }\n          }\n          \n          rowHTML += `<td id=\"total-${index}\">0 <br><span class=\"score-even\">(E)<\/span><\/td>`;\n          scoreTr.innerHTML = rowHTML;\n          tbody.appendChild(scoreTr);\n        });\n\n        document.querySelectorAll('.human-score').forEach(input => {\n          input.addEventListener('change', updateLiveBoard);\n        });\n\n        updateLiveBoard();\n      })\n      .catch(error => {\n          document.getElementById('players-body').innerHTML = `<tr><td colspan=\"11\" style=\"color:#ff5252;\">\ud83d\udea8 Error: ${error.message}<\/td><\/tr>`;\n      });\n\n    function updateLiveBoard() {\n      let humanHolesFinished = 0;\n      const firstHumanIndex = tournamentData.findIndex(p => p.type === 'Human');\n      \n      if(firstHumanIndex !== -1) {\n        document.querySelectorAll(`.human-score[data-row=\"${firstHumanIndex}\"]`).forEach(input => {\n          const s = parseInt(input.value);\n          if(!isNaN(s) && s > 0) { humanHolesFinished++; }\n        });\n      }\n\n      tournamentData.forEach((player, rowIndex) => {\n        let totalStrokes = 0;\n        let holesPlayed = 0;\n\n        if(player.type === 'Human') {\n          document.querySelectorAll(`.human-score[data-row=\"${rowIndex}\"]`).forEach(input => {\n            const s = parseInt(input.value);\n            if(!isNaN(s) && s > 0) { totalStrokes += s; holesPlayed++; }\n          });\n        } else {\n          let aiTargetHole = humanHolesFinished + player.pacingOffset;\n          if (aiTargetHole < 0) aiTargetHole = 0;\n          if (aiTargetHole > 9) aiTargetHole = 9;\n\n          for(let i = 0; i < 9; i++) {\n            let cell = document.getElementById(`ai-${rowIndex}-hole-${i}`);\n            if (i < aiTargetHole) {\n               cell.innerText = player.scores[i]; \n               totalStrokes += parseInt(player.scores[i]);\n               holesPlayed++;\n            } else {\n               cell.innerText = ''; \n            }\n          }\n        }\n        \n        let color = \"score-even\", text = \"E\";\n        let toPar = 0; \n        \n        if(holesPlayed > 0) {\n            toPar = totalStrokes - (holesPlayed * 3);\n            if(toPar > 0) { color = \"score-black\"; text = \"+\" + toPar; } \n            else if(toPar < 0) { color = \"score-red\"; text = toPar; }\n        }\n        \n        player.currentToPar = toPar;\n        player.currentHolesPlayed = holesPlayed;\n        player.finalTotalStrokes = totalStrokes;\n        player.finalToParString = text;\n\n        const displayColumn = document.getElementById(`total-${rowIndex}`);\n        if(holesPlayed === 0) { \n            displayColumn.innerHTML = '0 <br><span class=\"score-even\">(E)<\/span>'; \n        } else {\n            displayColumn.innerHTML = `${totalStrokes} <br><span class=\"${color}\">(${text})<\/span>`;\n        }\n        \n        const displayBanner = document.getElementById(`banner-score-${rowIndex}`);\n        displayBanner.innerHTML = `(${text}) Thru ${holesPlayed}`;\n        displayBanner.className = `banner-live-score ${color}`;\n      });\n      \n      const tbody = document.getElementById('players-body');\n      let indices = tournamentData.map((_, i) => i);\n      \n      indices.sort((a, b) => {\n          let pA = tournamentData[a];\n          let pB = tournamentData[b];\n          if (pA.currentToPar !== pB.currentToPar) { return pA.currentToPar - pB.currentToPar; }\n          if (pB.currentHolesPlayed !== pA.currentHolesPlayed) { return pB.currentHolesPlayed - pA.currentHolesPlayed; }\n          if (pA.type === 'Human') return -1;\n          if (pB.type === 'Human') return 1;\n          return 0;\n      });\n      \n      indices.forEach(i => {\n          tbody.appendChild(document.getElementById(`banner-row-${i}`));\n          tbody.appendChild(document.getElementById(`score-row-${i}`));\n      });\n\n      \/\/ NEW: THE POS BADGE MATH\n      let rankArr = indices.map(idx => ({ idx: idx, toPar: tournamentData[idx].currentToPar }));\n      for(let i = 0; i < rankArr.length; i++) {\n          let rank = i + 1;\n          if(i > 0 && rankArr[i].toPar === rankArr[i-1].toPar) {\n              rankArr[i].actualRank = rankArr[i-1].actualRank; \/\/ Tied with the guy above\n          } else {\n              rankArr[i].actualRank = rank;\n          }\n      }\n      \n      let rankCounts = {};\n      rankArr.forEach(r => { rankCounts[r.actualRank] = (rankCounts[r.actualRank] || 0) + 1; });\n\n      rankArr.forEach(r => {\n          let posStr = r.actualRank.toString();\n          if(rankCounts[r.actualRank] > 1) { posStr = 'T' + posStr; } \/\/ Add the 'T' for ties\n          document.getElementById(`pos-badge-${r.idx}`).innerText = posStr;\n      });\n\n      \/\/ ORIGINAL SUBMIT BUTTON LOGIC\n      const submitBtn = document.getElementById('submit-round-btn');\n      if (humanHolesFinished === 9) {\n          submitBtn.style.display = 'block';\n          submitBtn.onclick = function() {\n              \n              const customEventName = document.getElementById('event-name').value;\n              submitBtn.innerText = '\u23f3 Saving Tournament for All Players...';\n              submitBtn.disabled = true;\n\n              const allPlayerResults = tournamentData.map(p => {\n                  return {\n                      id: p.id,\n                      total: p.finalTotalStrokes,\n                      to_par: p.finalToParString\n                  };\n              });\n\n              fetch('\/New\/wp-json\/golf\/v1\/submit-score', {\n                  method: 'POST',\n                  headers: { 'Content-Type': 'application\/json' },\n                  body: JSON.stringify({\n                      event_name: customEventName,\n                      results: allPlayerResults \n                  })\n              })\n              .then(response => response.json())\n              .then(data => {\n                  if(data.success) {\n                      submitBtn.innerText = '\u2705 Tournament Saved Successfully!';\n                      submitBtn.style.background = '#1976d2';\n                  }\n              });\n          };\n      } else {\n          submitBtn.style.display = 'none';\n      }\n    }\n  });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u26f3 Live Tournament Scorecard \ud83d\udccd Mountain Step Ranch Golf Course Hole 1 2 3 4 5 6 7 8 9 Total Par 3 3 3 3 3 3 3 3 3 27 Yards 78 36 53 45 65 160 90 106 28 661 Loading Tournament Field&#8230; \u2705 Finish &#038; Submit Tournament<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-407","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mtnstep.com\/New\/wp-json\/wp\/v2\/pages\/407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mtnstep.com\/New\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mtnstep.com\/New\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mtnstep.com\/New\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mtnstep.com\/New\/wp-json\/wp\/v2\/comments?post=407"}],"version-history":[{"count":23,"href":"https:\/\/mtnstep.com\/New\/wp-json\/wp\/v2\/pages\/407\/revisions"}],"predecessor-version":[{"id":508,"href":"https:\/\/mtnstep.com\/New\/wp-json\/wp\/v2\/pages\/407\/revisions\/508"}],"wp:attachment":[{"href":"https:\/\/mtnstep.com\/New\/wp-json\/wp\/v2\/media?parent=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}