Scorecard Carrom

index.html

<h1>Papan Skor Kerambool 4P </h1>
<h4>Target Skor >= 20</h4>

<!-- Table for Rounds -->
<table>
  <thead <tr>
    <th rowspan="2">Board</th>
    <th colspan="4">Tim A</th>
    <th colspan="4">Tim B</th>
    </tr>
    <tr>
      <th>Pemain 1</th>
      <th>Pemain 2</th>
      <th>Queen</th>
      <th>Total</th>
      <th>Pemain 3</th>
      <th>Pemain 4</th>
      <th>Queen</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody id="scoreTable">
    <!-- Dynamically added rows go here -->
  </tbody>
</table>
<button id="addSet" class="styled-button" style="background-color: #4CAF50;" onclick="addSet()">New Game</button>
<button id="addRound" class="styled-button" class="disabled" onclick="addRow()" disabled>Add Board</button>

<h2>Rekap Set</h2>
<table id="setTable">
  <thead>
    <tr>
      <th>Set</th>
      <th>Bidak Tim A</th>
      <th>Queen Tim A</th>
      <th>Total Tim A</th>
      <th>Bidak Tim B</th>
      <th>Queen Tim B</th>
      <th>Total Tim B</th>
    </tr>
  </thead>
  <tbody>
    <!-- Baris untuk set akan ditambahkan secara dinamis -->
  </tbody>
</table>

<h2>Total Skor Akhir</h2>
<table id="finalScoreTable">
  <thead>
    <tr>
      <th>Tim</th>
      <th>Total Bidak</th>
      <th>Total Queen</th>
      <th>Total Skor</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tim A</td>
      <td id="totalBidakA">0</td>
      <td id="totalQueenA">0</td>
      <td id="finalScoreA">0</td>
      <td id="statusA"></td>
    </tr>
    <tr>
      <td>Tim B</td>
      <td id="totalBidakB">0</td>
      <td id="totalQueenB">0</td>
      <td id="finalScoreB">0</td>
      <td id="statusB"></td>
    </tr>
  </tbody>
</table>

Scorecard Carrom.markdown

Scorecard Carrom

A Pen by eusisaku on CodePen.

License.

script.js

let currentSet = 0;
const targetScore = 20;

function addSet() {
  currentSet++;

  // Tambahkan baris baru untuk set saat ini di tabel rekap set
  const setTable = document.getElementById("setTable");
  const row = document.createElement("tr");

  row.innerHTML = `
        <td>Set ${currentSet}</td>
        <td id="bidakA${currentSet}">0</td>
        <td id="queenA${currentSet}">0</td>
        <td id="totalA${currentSet}">0</td>
        <td id="bidakB${currentSet}">0</td>
        <td id="queenB${currentSet}">0</td>
        <td id="totalB${currentSet}">0</td>
    `;
  setTable.appendChild(row);

  document.getElementById("scoreTable").innerHTML = ""; // Hapus data babak sebelumnya
  document.getElementById("addRound").disabled = false; // Aktifkan tombol "Tambah Babak"
  document.getElementById("addRound").classList.remove("disabled");
  document.getElementById("addSet").disabled = true; // Nonaktifkan tombol "Tambah Set"
  addRow(); // Tambahkan babak pertama untuk set baru
}

function addRow() {
  const table = document.getElementById("scoreTable");
  const row = document.createElement("tr");

  row.innerHTML = `
        <td>${table.rows.length + 1}</td>
        <td><input type="number" value="0" min="0" oninput="calculateTotals()"></td>
        <td><input type="number" value="0" min="0" oninput="calculateTotals()"></td>
        <td><input type="number" value="0" min="0" oninput="calculateTotals()"></td>
        <td class="totalA">0</td>
        <td><input type="number" value="0" min="0" oninput="calculateTotals()"></td>
        <td><input type="number" value="0" min="0" oninput="calculateTotals()"></td>
        <td><input type="number" value="0" min="0" oninput="calculateTotals()"></td>
        <td class="totalB">0</td>
    `;
  table.appendChild(row);
}

function calculateTotals() {
  let bidakA = 0,
    bidakB = 0;
  let queenA = 0,
    queenB = 0;

  const rows = document.querySelectorAll("#scoreTable tr");

  rows.forEach((row) => {
    const inputs = row.querySelectorAll("input");
    const a1 = parseInt(inputs[0].value) || 0;
    const a2 = parseInt(inputs[1].value) || 0;
    const qA = parseInt(inputs[2].value) || 0;
    const b1 = parseInt(inputs[3].value) || 0;
    const b2 = parseInt(inputs[4].value) || 0;
    const qB = parseInt(inputs[5].value) || 0;

    const totalA = a1 + a2 + qA;
    const totalB = b1 + b2 + qB;

    row.querySelector(".totalA").textContent = totalA;
    row.querySelector(".totalB").textContent = totalB;

    bidakA += a1 + a2;
    queenA += qA;
    bidakB += b1 + b2;
    queenB += qB;
  });

  // Perbarui tabel rekap set untuk set saat ini
  document.getElementById(`bidakA${currentSet}`).textContent = bidakA;
  document.getElementById(`queenA${currentSet}`).textContent = queenA;
  document.getElementById(`totalA${currentSet}`).textContent = bidakA + queenA;

  document.getElementById(`bidakB${currentSet}`).textContent = bidakB;
  document.getElementById(`queenB${currentSet}`).textContent = queenB;
  document.getElementById(`totalB${currentSet}`).textContent = bidakB + queenB;

  // Perbarui total skor akhir
  updateFinalScores();

  // Periksa apakah semua input terisi untuk mengaktifkan tombol "Tambah Set"
  const allInputsFilled = [...rows].every((row) =>
    [...row.querySelectorAll("input")].every((input) => input.value !== "")
  );

  document.getElementById("addSet").disabled = !allInputsFilled;
}

function updateFinalScores() {
  let totalBidakA = 0,
    totalQueenA = 0,
    totalA = 0;
  let totalBidakB = 0,
    totalQueenB = 0,
    totalB = 0;

  // Loop melalui semua set untuk menghitung total skor
  for (let i = 1; i <= currentSet; i++) {
    totalBidakA +=
      parseInt(document.getElementById(`bidakA${i}`).textContent) || 0;
    totalQueenA +=
      parseInt(document.getElementById(`queenA${i}`).textContent) || 0;
    totalA += parseInt(document.getElementById(`totalA${i}`).textContent) || 0;

    totalBidakB +=
      parseInt(document.getElementById(`bidakB${i}`).textContent) || 0;
    totalQueenB +=
      parseInt(document.getElementById(`queenB${i}`).textContent) || 0;
    totalB += parseInt(document.getElementById(`totalB${i}`).textContent) || 0;
  }

  // Update tabel total skor akhir
  document.getElementById("totalBidakA").textContent = totalBidakA;
  document.getElementById("totalQueenA").textContent = totalQueenA;
  document.getElementById("finalScoreA").textContent = totalA;

  document.getElementById("totalBidakB").textContent = totalBidakB;
  document.getElementById("totalQueenB").textContent = totalQueenB;
  document.getElementById("finalScoreB").textContent = totalB;

  // Perbarui status berdasarkan target skor
  document.getElementById("statusA").textContent =
    totalA >= targetScore ? "Winner" : "";
  document.getElementById("statusB").textContent =
    totalB >= targetScore ? "Winner" : "";

  document.getElementById("statusA").className =
    totalA >= targetScore ? "winner" : "";
  document.getElementById("statusB").className =
    totalB >= targetScore ? "winner" : "";
}

style.css

body {
  font-family: Arial, sans-serif;
  margin: 20px;
   background-color: darkgrey;
}

/* Table container */
table {
  width: 100%; /* Set table width to auto */
  border-collapse: collapse; /* Collapses the borders into a single border */
  margin: 20px 0;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Table header */
th {
  width:auto;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 5px 10px;
  font-size: 14px;
  border: 1px solid #ddd; 
}

/* Table cells */
td {
  width:auto;
  padding: 10px 15px;
  text-align: center;
  border: 1px solid #ddd; /* Border for table cells */
  font-size: 14px;
}

/* Hover effect for rows */
tr:hover {
/*   background-color: #f2f2f2; */
}

/* Alternating row colors */
tr:nth-child(even) {
/*   background-color: #f9f9f9; */
}

tr:nth-child(odd) {
/*   background-color: #fff; */
}

/* Compact spacing on smaller screens */
@media (max-width: 600px) {
  th,
  td {
/*     padding: 8px 10px; */
    font-size: 13px;
  }
}
/* Gaya khusus untuk bagian Rekap Set dan Total Skor Akhir */
#setTable,
#finalScoreTable {
  background-color: #333; /* Latar belakang hitam */
  color: #fff; Teks putih
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Efek bayangan */
  font-family: "Digital-7 Mono", sans-serif;
  font-family: "Digital-7", sans-serif;
/*   font-family: "Digital-7 Italic", sans-serif; */
}

#finalScoreTable th {
  background-color: #444; /* Warna lebih gelap untuk header */
}

#finalScoreTable td,
#setTable td {
  font-size: 1.2rem; /* Teks sedikit lebih besar */
  font-weight: bold;
}

/* Gaya untuk status tim */
.winner {
  background-color: #4caf50; /* Hijau untuk pemenang */
/*   color: #fff; */
  font-weight: bold;
}

.loser {
  background-color: #f44336; /* Merah untuk tim kalah */
/*   color: #fff; */
  font-weight: bold;
}

.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
input[type="number"] {
  width:40%;
}

.styled-button {
               /* White text */
      padding: 10px;        /* Padding for button size */
      font-size: 12px;           /* Font size */
      border: none;              /* Remove default border */
      border-radius: 8px;        
  cursor: pointer;          
      transition: background-color 0.3s, transform 0.2s; /* Smooth transitions */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    }

styles

<link href="https://fonts.cdnfonts.com/css/digital-7-mono" rel="stylesheet" />