Merge pull request hexlet-codebattle#1070 from valerr/master

ReDBrother · web-flow · commit 9b3d38a77f52 · 2021-10-14T22:00:35.000+03:00
add special event icons in replayer
diff --git a/services/app/assets/css/style.scss b/services/app/assets/css/style.scss
@@ -209,12 +209,17 @@ a {
 }
 
 .cb-slider-action {
-  width: 20px;
+  width: 5px;
   height: 20px;
   left: 0;
-  top: 12px;
-  opacity: 0;
-  transform: translateY(-100%);
+  top: 50%;
+  transform: translate(0, -50%);
+  z-index: 15;
+}
+
+.cb-slider-action:hover {
+  display: block;
+  height: 28px;
 }
 
 .cb-slider-handle {
diff --git a/services/app/assets/js/widgets/components/CodebattleSliderBar.jsx b/services/app/assets/js/widgets/components/CodebattleSliderBar.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Tooltip, OverlayTrigger } from 'react-bootstrap';
 import { replayerMachineStates } from '../machines/game';
 
 const handleClassnames = 'cb-slider-handle position-absolute rounded-circle';
@@ -14,14 +15,32 @@ const SliderBar = ({ value, className }) => (
   />
 );
 
-const SliderAction = ({ value, className }) => (
-  <div
-    className={className}
-    style={{
-      left: `${value * 100}%`,
-    }}
-  />
-);
+const SliderAction = ({
+ value, className, setGameState, event,
+}) => (
+  <div>
+    <OverlayTrigger
+      placement="top"
+      overlay={(
+        <Tooltip id="tooltip-top">
+          {`Check started by ${event.userName}`}
+        </Tooltip>
+        )}
+    >
+      <div
+        role="button"
+        aria-hidden="true"
+        onClick={() => {
+        setGameState(value);
+      }}
+        className={className}
+        style={{
+            left: `${value * 100}%`,
+          }}
+      />
+    </OverlayTrigger>
+  </div>
+  );
 
 const SliderHandle = ({ value, className }) => (
   <div
@@ -34,12 +53,10 @@ const SliderHandle = ({ value, className }) => (
   </div>
 );
 
-const CodebattleSliderBar = ({ gameCurrent, handlerPosition, lastIntent }) => (
+const CodebattleSliderBar = ({
+ gameCurrent, handlerPosition, lastIntent, mainEvents, recordsCount, setGameState,
+}) => (
   <>
-    <SliderAction
-      value={0.5}
-      className="cb-slider-action position-absolute bg-info"
-    />
     <div className="cb-slider-timeline position-absolute rounded w-100 x-bg-gray">
       {
         gameCurrent.matches({ replayer: replayerMachineStates.holded })
@@ -54,11 +71,20 @@ const CodebattleSliderBar = ({ gameCurrent, handlerPosition, lastIntent }) => (
         className={`${sliderBarClassnames} bg-danger`}
         value={handlerPosition}
       />
-      <SliderHandle
-        className={handleClassnames}
-        value={handlerPosition}
-      />
     </div>
+    {mainEvents.map(event => (
+      <SliderAction
+        value={event.recordId / recordsCount}
+        className="cb-slider-action position-absolute bg-warning rounded"
+        key={event.recordId}
+        event={event}
+        setGameState={setGameState}
+      />
+    ))}
+    <SliderHandle
+      className={handleClassnames}
+      value={handlerPosition}
+    />
   </>
 );
 
diff --git a/services/app/assets/js/widgets/containers/CodebattlePlayer.jsx b/services/app/assets/js/widgets/containers/CodebattlePlayer.jsx
@@ -188,6 +188,7 @@ class CodebattlePlayer extends Component {
 
   render() {
     const { current: gameCurrent } = this.context;
+    const { recordsCount, mainEvents } = this.props;
 
     const {
       isEnabled, direction, handlerPosition, lastIntent,
@@ -222,9 +223,12 @@ class CodebattlePlayer extends Component {
                     onIntentEnd={this.onSliderHandleChangeIntentEnd}
                   >
                     <CodebattleSliderBar
+                      mainEvents={mainEvents}
                       gameCurrent={gameCurrent}
                       handlerPosition={handlerPosition}
                       lastIntent={lastIntent}
+                      recordsCount={recordsCount}
+                      setGameState={this.setGameState}
                     />
                   </Slider>
                 </ControlPanel>
@@ -241,10 +245,12 @@ CodebattlePlayer.contextType = GameContext;
 
 const mapStateToProps = state => {
   const recordsCount = playbookRecordsSelector(state).length;
+  const { mainEvents } = state.playbook;
 
   return {
     recordsCount,
     stepCoefficient: 1.0 / recordsCount,
+    mainEvents,
   };
 };
 
diff --git a/services/app/assets/js/widgets/lib/player.js b/services/app/assets/js/widgets/lib/player.js
@@ -132,10 +132,13 @@ const reduceOriginalRecords = (acc, record, index) => {
     const { checkResult } = record;
 
     const newPlayers = updatePlayers(players, { id: record.id, checkResult });
+    const userName = _.find(players, { id: record.id }).name;
     const data = {
       type,
       userId: record.id,
       checkResult,
+      userName,
+      recordId: record.recordId,
     };
     const newRecord = createFinalRecord(index, data, {
       players: newPlayers,
diff --git a/services/app/assets/js/widgets/slices/playbook.js b/services/app/assets/js/widgets/slices/playbook.js
@@ -1,9 +1,10 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { addRecord } from '../lib/player';
+import { addRecord, parse } from '../lib/player';
 import { actions as editorActions } from './editor';
 import { actions as executionOutputActions } from './executionOutput';
 
 const initialState = {
+  mainEvents: [],
   players: [],
   task: {},
   initRecords: [],
@@ -14,9 +15,10 @@ const playbook = createSlice({
   name: 'playbook',
   initialState,
   reducers: {
-    loadPlaybook: (state, { payload }) => (
-      { ...state, ...payload }
-    ),
+    loadPlaybook: (state, { payload }) => {
+      const mainEvents = payload.records.filter(record => parse(record).type === 'check_complete').map(parse);
+      return { ...state, ...payload, mainEvents };
+    },
   },
   extraReducers: {
     [editorActions.updateEditorText]: (state, { payload }) => {
