From 8a5acf8edcd6c06ca885c78e7fc56939f2762ad7 Mon Sep 17 00:00:00 2001
From: Minemetero <Minemetero@outlook.com>
Date: Wed, 5 Jun 2024 19:43:11 +0900
Subject: [PATCH] New Feature: History Match

---
 index.html |  4 ++++
 script.js  | 15 +++++++++++++++
 styles.css |  8 ++++----
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 56c8d07..80eebcd 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,10 @@ <h2>Current Match</h2>
             <h2>Match Order</h2>
             <ul id="matchOrderList"></ul>
         </div>
+        <div class="history" id="historyContainer">
+            <h2>Match History</h2>
+            <ul id="historyList"></ul>
+        </div>
     </div>
 
     <script src="script.js"></script>
diff --git a/script.js b/script.js
index af2c471..b8ba3c9 100644
--- a/script.js
+++ b/script.js
@@ -3,6 +3,7 @@ let totalScores = {};
 let currentMatchScores = {};
 let currentMatch = [0, 1]; // Indexes of the players in the current match
 let winBalls = 5;
+let matchHistory = [];
 
 document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('addPlayerButton').addEventListener('click', addPlayer);
@@ -66,11 +67,13 @@ function incrementCurrentMatchScore(playerName) {
     if (currentMatchScores[playerName] >= winBalls) {
         totalScores[playerName]++;
         document.getElementById('result').innerText = `${playerName} Wins this round!`;
+        matchHistory.push(`${players[currentMatch[0]]} vs ${players[currentMatch[1]]}: ${playerName} won`);
         setTimeout(() => {
             document.getElementById('result').innerText = '';
             updatePlayerScoreList();
             updateMatchOrder();
             updateMatchOrderList();
+            updateHistoryList();
             startNewMatch();
         }, 2000);
     }
@@ -114,6 +117,16 @@ function updateMatchOrderList() {
     }
 }
 
+function updateHistoryList() {
+    const historyList = document.getElementById('historyList');
+    historyList.innerHTML = '';
+    matchHistory.forEach(match => {
+        const li = document.createElement('li');
+        li.textContent = match;
+        historyList.appendChild(li);
+    });
+}
+
 function updateMatchOrder() {
     currentMatch[0] = (currentMatch[0] + 1) % players.length;
     currentMatch[1] = (currentMatch[1] + 1) % players.length;
@@ -127,12 +140,14 @@ function resetScores() {
     totalScores = {};
     currentMatchScores = {};
     currentMatch = [0, 1];
+    matchHistory = [];
     document.getElementById('playerList').innerHTML = '';
     document.getElementById('gameBoard').style.display = 'none';
     document.getElementById('initialSetup').style.display = 'block';
     document.getElementById('playerInputGroup').style.display = 'block';
     document.getElementById('playerListGroup').style.display = 'block';
     document.getElementById('initialButtons').style.display = 'block';
+    document.getElementById('historyList').innerHTML = '';
 }
 
 window.incrementCurrentMatchScore = incrementCurrentMatchScore;
diff --git a/styles.css b/styles.css
index 5823ed0..9431b80 100644
--- a/styles.css
+++ b/styles.css
@@ -44,12 +44,12 @@ h1 {
     margin-right: 10px;
 }
 
-.player-list ul, #playerScoreList, #matchOrderList {
+.player-list ul, #playerScoreList, #matchOrderList, #historyList {
     list-style: none;
     padding: 0;
 }
 
-.player-list li, #playerScoreList li, #matchOrderList li {
+.player-list li, #playerScoreList li, #matchOrderList li, #historyList li {
     margin: 5px 0;
 }
 
@@ -92,12 +92,12 @@ label {
     box-sizing: border-box;
 }
 
-.player-scores, .current-match, .match-order {
+.player-scores, .current-match, .match-order, .history {
     background-color: var(--secondary-bg-color);
     padding: 20px;
     border-radius: 12px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    width: 30%;
+    width: 23%;
 }
 
 h2 {