ashpie/reactjs-tutorial-tictactoe
ashpie/reactjs-tutorial-tictactoe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Bold the currently selected item in the move list

Browse Source
This commit is contained in:
Alice Gaudon 2022-03-13 19:02:20 +01:00
parent ce614c136a
commit 2a7fe34019
2 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.css
View File

@ -48,3 +48,7 @@ ol, ul {
.game-info { .game-info {
margin-left: 20px; margin-left: 20px;
} }
.selected button {
font-weight: bolder;
}

3
src/index.js
View File

@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
/*TODO /*TODO
Bold the currently selected item in the move list.
Rewrite Board to use two loops to make the squares instead of hardcoding them. 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. 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. 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 game start' :
`Go to move #${index} [${state.playX}, ${state.playY}]`; `Go to move #${index} [${state.playX}, ${state.playY}]`;
return ( return (
<li key={index}> <li key={index} className={index === this.state.currentMoveIndex ? 'selected' : null}>
<button onClick={() => this.jumpTo(index)}>{description}</button> <button onClick={() => this.jumpTo(index)}>{description}</button>
</li> </li>
); );