From 2a7fe3401972ab9ef44437fd62892ed2a377571d Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 13 Mar 2022 19:02:20 +0100
Subject: [PATCH] Bold the currently selected item in the move list

---
 src/index.css | 4 ++++
 src/index.js  | 3 +--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index f4e2d91..ab1750a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -48,3 +48,7 @@ ol, ul {
 .game-info {
     margin-left: 20px;
 }
+
+.selected button {
+    font-weight: bolder;
+}
diff --git a/src/index.js b/src/index.js
index 1a68685..ab6f1b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import './index.css';
 
 /*TODO
-    Bold the currently selected item in the move list.
     Rewrite Board to use two loops to make the squares instead of hardcoding them.
     Add a toggle button that lets you sort the moves in either ascending or descending order.
     When someone wins, highlight the three squares that caused the win.
@@ -107,7 +106,7 @@ class Game extends React.Component {
                 'Go to game start' :
                 `Go to move #${index} [${state.playX}, ${state.playY}]`;
             return (
-                <li key={index}>
+                <li key={index} className={index === this.state.currentMoveIndex ? 'selected' : null}>
                     <button onClick={() => this.jumpTo(index)}>{description}</button>
                 </li>
             );