use a bold font for the move numbers in the history list

css/chess.css

@@ -183,6 +183,10 @@ button:disabled .silhouette {
    max-width: 7.5in;
 }
 
+#cb_history_future {
+   color: grey;
+}
+
 .cb-hbox {
    display: flex;
    flex-flow: row nowrap;

index.html

@@ -224,7 +224,7 @@
 						</div>
 					</form>
 					<div id="cb_scrollable">
-						<p id="cb_history"></p>
+						<p id="cb_history"><span id="cb_history_past"></span><span id="cb_history_future"></span></p>
 						<details>
 							<summary>Rule Reference</summary>
 							<p>The basic movement for each piece is the same as traditional chess.</p>

js/pacosako_ui.js

@@ -14,6 +14,8 @@ import 'webpack-jquery-ui/droppable';
 import 'webpack-jquery-ui/selectmenu';
 import 'webpack-jquery-ui/css';
 
+import escape from 'lodash/escape';
+
 /* "Waterdrop" by Porphyr (freesound.org/people/Porphyr) / CC BY 3.0 (creativecommons.org/licenses/by/3.0) */
 import Waterdrop from '../wav/191678__porphyr__waterdrop.wav';
 
@@ -391,7 +393,11 @@ $(function (){
       }
       $('#cb_message').text(msg);
 
-      $('#cb_history').text(game.history || '');
+      const viewHistory = game.history || '';
+      const fullHistory = currentGame.history || '';
+      const futureHistory = fullHistory.slice(viewHistory.length);
+      $('#cb_history_past').html(escape(viewHistory).replace(/\d+\./g, '<b>$&</b>'));
+      $('#cb_history_future').html(escape(futureHistory).replace(/\d+\./g, '<b>$&</b>'));
 
       $('#cb_nav_first').attr('disabled', !game.canUndo);
       $('#cb_nav_prev_turn').attr('disabled', !game.canUndo);