improved rendering of turns and phases in the log

Author: nicolodavis

src/client/log/log.css

@@ -6,15 +6,35 @@
  * https://opensource.org/licenses/MIT.
  */
 
+.gamelog {
+  display: grid;
+  grid-template-columns: 30px 1fr 30px;
+  :grid-auto-rows: auto;
+  grid-auto-flow: column;
+}
+
+.gamelog .turn-marker {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  grid-column: 1;
+  background: #555;
+  color: #eee;
+  text-align: center;
+  font-weight: bold;
+  border: 1px solid #888;
+}
+
 .gamelog .log-event {
+  grid-column: 2;
   cursor: pointer;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background: #fff;
   border: 1px dotted #ccc;
   border-left: 5px solid #ccc;
-  margin-bottom: 5px;
   padding: 5px;
   text-align: center;
   color: #888;
@@ -23,46 +43,45 @@
   line-height: 25px;
 }
 
-.gamelog.pinned .log-event {
-  opacity: 0.2;
+.gamelog .phase-marker {
+  grid-column: 3;
+  background: #555;
+  border: 1px solid #888;
+  color: #eee;
+  text-align: center;
+  font-weight: bold;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  text-orientation: sideways;
+  writing-mode: vertical-rl;
+  line-height: 30px;
 }
-.gamelog.pinned .turn-marker {
+
+.gamelog.pinned .log-event {
   opacity: 0.2;
 }
 
 .gamelog .log-event:hover {
   border-style: solid;
-  background: #ddffdd;
-  color: #222;
+  background: #eee;
 }
 
 .gamelog .log-event.pinned {
   border-style: solid;
-  background: #ddffdd;
-  color: #222;
+  background: #eee;
   opacity: 1;
 }
 
-.gamelog .turn-marker {
-  text-align: center;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.gamelog .turn-marker:not(:first-child) {
-  margin-top: 20px;
-}
-
 .gamelog div.player0 {
-  border-left-color: #001f3f;
+  border-left-color: #ff851b;
 }
 
 .gamelog div.player1 {
-  border-left-color: #0074d9;
+  border-left-color: #7fdbff;
 }
 
 .gamelog div.player2 {
-  border-left-color: #7fdbff;
+  border-left-color: #0074d9;
 }
 
 .gamelog div.player3 {
@@ -86,7 +105,7 @@
 }
 
 .gamelog div.player8 {
-  border-left-color: #ff851b;
+  border-left-color: #001f3f;
 }
 
 .gamelog div.player9 {

src/client/log/log.js

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { MAKE_MOVE } from '../../core/action-types';
 import './log.css';
 
 /**
@@ -46,12 +47,45 @@ LogEvent.propTypes = {
   pinned: PropTypes.bool,
 };
 
-const TurnMarker = props => (
-  <div className="turn-marker">Turn #{props.turn}</div>
-);
+/**
+ * TurnMarker
+ *
+ * The markers on the left of the log events that indicate
+ * which turn the event belongs to.
+ */
+const TurnMarker = props => {
+  return (
+    <div className="turn-marker" style={{ gridRow: 'span ' + props.numEvents }}>
+      {props.turn}
+    </div>
+  );
+};
 
 TurnMarker.propTypes = {
   turn: PropTypes.number.isRequired,
+  numEvents: PropTypes.number.isRequired,
+};
+
+/**
+ * PhaseMarker
+ *
+ * The markers on the right of the log events that indicate
+ * which phase the event belongs to.
+ */
+const PhaseMarker = props => {
+  return (
+    <div
+      className="phase-marker"
+      style={{ gridRow: 'span ' + props.numEvents }}
+    >
+      {props.phase}
+    </div>
+  );
+};
+
+PhaseMarker.propTypes = {
+  phase: PropTypes.string.isRequired,
+  numEvents: PropTypes.number.isRequired,
 };
 
 /**
@@ -116,38 +150,88 @@ export class GameLog extends React.Component {
 
   render() {
     let log = [];
-    let turn = 1;
-    let turnDelimiter = true;
+    let turns = [];
+    let phases = [];
+    let eventsInCurrentPhase = 0;
+    let eventsInCurrentTurn = 0;
+    let state = this.props.initialState;
 
+    let lastAction = 0;
     for (let i = 0; i < this.props.log.length; i++) {
-      if (turnDelimiter) {
-        turnDelimiter = false;
-        log.push(<TurnMarker key={'turn' + turn} turn={turn} />);
+      const action = this.props.log[i];
+      if (action.type == MAKE_MOVE || !action.automatic) {
+        lastAction = i;
       }
+    }
 
+    for (let i = 0; i < this.props.log.length; i++) {
       const action = this.props.log[i];
-      log.push(
-        <LogEvent
-          key={i}
-          pinned={i === this.state.pinned}
-          logIndex={i}
-          onLogClick={this.onLogClick}
-          onMouseEnter={this.onMouseEnter}
-          onMouseLeave={this.onMouseLeave}
-          action={action}
-        />
-      );
-
-      if (action.payload.type == 'endTurn') {
-        turn++;
-        turnDelimiter = true;
+      const oldTurn = state.ctx.turn;
+      const oldPhase = state.ctx.phase;
+
+      if (action.type == MAKE_MOVE) {
+        log.push(
+          <LogEvent
+            key={i}
+            pinned={i === this.state.pinned}
+            logIndex={i}
+            onLogClick={this.onLogClick}
+            onMouseEnter={this.onMouseEnter}
+            onMouseLeave={this.onMouseLeave}
+            action={action}
+          />
+        );
+
+        eventsInCurrentTurn++;
+        eventsInCurrentPhase++;
+      }
+
+      if (!action.automatic) {
+        state = this.props.reducer(state, action);
+
+        if (
+          state.ctx.turn != oldTurn ||
+          state.ctx.gameover !== undefined ||
+          i == lastAction
+        ) {
+          turns.push(
+            <TurnMarker
+              key={turns.length}
+              turn={oldTurn}
+              numEvents={eventsInCurrentTurn}
+            />
+          );
+          eventsInCurrentTurn = 0;
+        }
+
+        if (
+          state.ctx.phase != oldPhase ||
+          state.ctx.gameover !== undefined ||
+          i == lastAction
+        ) {
+          phases.push(
+            <PhaseMarker
+              key={phases.length}
+              phase={oldPhase}
+              numEvents={eventsInCurrentPhase}
+            />
+          );
+          eventsInCurrentPhase = 0;
+        }
       }
     }
 
     let className = 'gamelog';
     if (this.state.pinned !== null) {
       className += ' pinned';
     }
-    return <div className={className}>{log}</div>;
+
+    return (
+      <div className={className}>
+        {turns}
+        {log}
+        {phases}
+      </div>
+    );
   }
 }