@elice/material-exercise 1.220803.0

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerArduinoStatusMessage.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var arduino = require('../../../utils/arduino.js');
+var recoil$1 = require('../context/recoil.js');
+require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var ExerciseRunnerControllerStatusIndicator = require('./ExerciseRunnerControllerStatusIndicator.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledMessageWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-19z7lun-0"
+})(["height:1rem;"]);
+
+const ExerciseRunnerControllerArduinoStatusMessage = () => {
+  const intl = reactIntl.useIntl();
+  const ports = recoil.useRecoilValue(recoil$1.exerciseArduinoPortsState);
+  const [message, setMessage] = React.useState('');
+  const [status, setStatus] = React.useState('error');
+  const arduinoOpenedPort = recoil.useRecoilValue(recoil$1.exerciseArduinoOpenedPortNameState);
+  const arduinoUploadProgress = recoil.useRecoilValue(recoil$1.exerciseArduinoUploadProgressState);
+  const arduinoAgentConnectionStatus = recoil.useRecoilValue(recoil$1.exerciseArduinoAgentConnectionState);
+  React.useEffect(() => {
+    if (arduinoAgentConnectionStatus === 'disconnected') {
+      setStatus('error');
+      setMessage(intl.formatMessage({
+        id: 'exerciseRunner.controller.arduino.connectionStatus.disconnected'
+      }));
+      return;
+    }
+
+    if (arduinoAgentConnectionStatus === 'connecting') {
+      setStatus('warning');
+      setMessage(intl.formatMessage({
+        id: 'exerciseRunner.controller.arduino.connectionStatus.connecting'
+      }));
+      return;
+    }
+
+    if (arduinoAgentConnectionStatus === 'reconnecting') {
+      setStatus('warning');
+      setMessage(intl.formatMessage({
+        id: 'exerciseRunner.controller.arduino.connectionStatus.reconnecting'
+      }));
+      return;
+    } // Arduino agent is connected.
+
+
+    if (arduinoOpenedPort === '' && arduinoUploadProgress === 'ready') {
+      setStatus('error');
+      setMessage(intl.formatMessage({
+        id: 'exerciseRunner.controller.arduino.connectionStatus.noDevice'
+      }));
+      return;
+    }
+
+    setStatus('success');
+
+    switch (arduinoUploadProgress) {
+      case 'receivedHex':
+      case 'starting':
+      case 'busy':
+        setMessage(intl.formatMessage({
+          id: 'exerciseRunner.controller.arduino.connectionStatus.uploading'
+        }));
+        return;
+
+      case 'ready':
+      case 'error':
+      case 'done':
+      default:
+        const device = arduino.getPortFromName(ports, arduinoOpenedPort);
+
+        if (device) {
+          setMessage(intl.formatMessage({
+            id: 'exerciseRunner.controller.arduino.connectionStatus.connectedDevice'
+          }, {
+            device: arduino.getDisplayName(device)
+          }));
+        } else {
+          setMessage(intl.formatMessage({
+            id: 'exerciseRunner.controller.arduino.connectionStatus.connected'
+          }));
+        }
+
+        return;
+    }
+  }, [intl, arduinoOpenedPort, arduinoUploadProgress, arduinoAgentConnectionStatus, ports]); //
+  //
+  //
+
+  return React__default["default"].createElement(StyledMessageWrapper, {
+    align: "center"
+  }, React__default["default"].createElement(ExerciseRunnerControllerStatusIndicator, {
+    status: status
+  }), React__default["default"].createElement(blocks.Text, {
+    role: "gray3",
+    size: "tiny"
+  }, message));
+};
+
+module.exports = ExerciseRunnerControllerArduinoStatusMessage;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerButtonGroup: React.VFC;
+export default ExerciseRunnerControllerButtonGroup;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerButtonGroup.js

@@ -0,0 +1,269 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var icons = require('@elice/icons');
+var types = require('@elice/types');
+var websocket = require('@elice/websocket');
+var recoil = require('recoil');
+var styled = require('styled-components');
+require('react-use');
+require('socket.io-client');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+var subjects = require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+require('../../../constants/arduino.js');
+var useExericseShortcut = require('../../../hooks/useExericseShortcut.js');
+require('@elice/api-client');
+require('@elice/material-shared-utils');
+require('humps');
+require('ot-text-unicode');
+require('lodash/debounce');
+require('random-words');
+require('unicount');
+var ExerciseRunnerContext = require('./ExerciseRunnerContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledControllerButton = styled__default["default"](blocks.Button).withConfig({
+  componentId: "sc-d9xhed-0"
+})(["transition:none;"]);
+const StyledControllerButtonWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-d9xhed-1"
+})(["display:flex;"]);
+const StyledControllerButtonGroup = styled__default["default"].div.withConfig({
+  componentId: "sc-d9xhed-2"
+})(["display:flex;flex-direction:row;align-items:center;> ", ",> ", "{margin-right:0.5rem;&:last-child{margin-right:0;}}"], StyledControllerButtonWrap, StyledControllerButton);
+
+const ExerciseRunnerControllerButtonGroup = () => {
+  var _a;
+
+  const intl = reactIntl.useIntl();
+  const {
+    materialExerciseId,
+    onCodeHelpRequest
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const {
+    onSubmit,
+    onSyncRequest,
+    onCancel
+  } = React__default["default"].useContext(ExerciseRunnerContext.ExerciseRunnerContext);
+  const editorCursorSelectionValue = recoil.useRecoilValue(recoil$1.exerciseFileEditorCursorSelectionValueState);
+  const runnerWebsocketStatus = recoil.useRecoilValue(recoil$1.exerciseRunnerWebSocketStatusQuery);
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const exerciseRunType = recoil.useRecoilValue(recoil$1.exerciseRunnerRunTypeState);
+  const exerciseWithNoGrade = Boolean(exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade);
+  const lecture = recoil.useRecoilValue(recoil$1.exerciseLectureState(exercise === null || exercise === void 0 ? void 0 : exercise.lectureId));
+  const isTestLecture = (lecture === null || lecture === void 0 ? void 0 : lecture.lectureType) === types.enums.LectureType.Test;
+  const isTestLectureCompleted = (lecture === null || lecture === void 0 ? void 0 : lecture.testAdmissionStatus) === types.enums.TestAdmissionStatus.Completed; // runner states
+
+  const isSubmitting = recoil.useRecoilValue(recoil$1.exerciseRunnerSubmittingState);
+  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  const isConnecting = runnerWebsocketStatus === websocket.EliceWebSocket.CONNECTING;
+  const isNotReady = runnerWebsocketStatus !== websocket.EliceWebSocket.OPEN; // arduino
+
+  const isArduinoExercise = (exercise === null || exercise === void 0 ? void 0 : exercise.envType) === types.enums.ExerciseEnvType.Arduino;
+  const arduinoUploadProgress = recoil.useRecoilValue(recoil$1.exerciseArduinoUploadProgressState);
+  const arduinoOpenedPortName = recoil.useRecoilValue(recoil$1.exerciseArduinoOpenedPortNameState); //
+  // ========= ui states =========
+  //
+  // submit run
+
+  const isSubmitRunHidden = isRunning;
+  const isSubmitRunArduinoDisabled = isArduinoExercise ? arduinoUploadProgress !== 'ready' && arduinoUploadProgress !== 'error' || !arduinoOpenedPortName : false;
+  const isSubmitRunDisabled = isSubmitRunHidden || isSubmitRunArduinoDisabled || isNotReady || isConnecting || isSubmitting; // submit grade
+
+  const isSubmitGradeHidden = isRunning || isArduinoExercise;
+  const isSubmitGradeDisabled = isSubmitGradeHidden || exerciseWithNoGrade || isTestLecture && isTestLectureCompleted || isNotReady || isConnecting || isSubmitting; // cancel
+
+  const isCancelHidden = !isRunning;
+  const isCancelDisabled = isCancelHidden || isNotReady || isConnecting; // sync request
+
+  const isSyncRequestHidden = !isRunning || !((_a = exercise === null || exercise === void 0 ? void 0 : exercise.readyExerciseImage) === null || _a === void 0 ? void 0 : _a.httpPort);
+  const isSyncRequestDisabled = isSyncRequestHidden || isNotReady || isConnecting; // code help
+
+  const isCodeHelpHidden = isRunning || isTestLecture && !isTestLectureCompleted; //
+  //
+  //
+
+  /**
+   * Submit to run
+   */
+
+  const handleSubmitRun = () => {
+    if (!isSubmitRunDisabled) {
+      void onSubmit(types.enums.ExerciseRunType.Run);
+    }
+  };
+  /**
+   * Submit to grade
+   */
+
+
+  const handleSubmitGrade = () => {
+    if (!isSubmitGradeDisabled) {
+      void onSubmit(types.enums.ExerciseRunType.Grade);
+    }
+  };
+  /**
+   * Cancel
+   */
+
+
+  const handleCancel = () => {
+    if (!isCancelDisabled) {
+      onCancel();
+    }
+  };
+  /**
+   * Sync request
+   */
+
+
+  const handleSyncRequest = () => {
+    if (!isSyncRequestDisabled) {
+      onSyncRequest();
+    }
+  }; //
+  // keyboard shortcuts to control runner
+  //
+
+
+  useExericseShortcut.useExericseShortcut('RUNNER_SUBMIT_RUN', handleSubmitRun);
+  useExericseShortcut.useExericseShortcut('RUNNER_SUBMIT_GRADE', handleSubmitGrade);
+  useExericseShortcut.useExericseShortcut('RUNNER_CANCEL', handleCancel);
+  useExericseShortcut.useExericseShortcut('RUNNER_SYNC_REQUEST', handleSyncRequest); //
+  // handle save action emitted by file editor
+  //
+
+  React__default["default"].useEffect(() => {
+    const saveActionSub = subjects.exerciseFileEditorSaveAction$.subscribe(handleSyncRequest);
+    return () => {
+      saveActionSub.unsubscribe();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isSyncRequestDisabled]);
+  /**
+   * Submit to run button
+   */
+
+  const renderSubmitRunButton = () => {
+    if (isSubmitRunHidden) {
+      return null;
+    }
+
+    return React__default["default"].createElement(StyledControllerButton, {
+      size: "tiny",
+      loading: isConnecting || isSubmitting && exerciseRunType === types.enums.ExerciseRunType.Run,
+      disabled: isSubmitRunDisabled,
+      onClick: handleSubmitRun
+    }, isArduinoExercise ? React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.compile"
+    }) : React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.run"
+    }));
+  };
+  /**
+   * Submit to grade button
+   */
+
+
+  const renderSubmitGradeButton = () => {
+    if (isSubmitGradeHidden) {
+      return null;
+    }
+
+    return React__default["default"].createElement(blocks.Tooltip, {
+      title: exerciseWithNoGrade ? intl.formatMessage({
+        id: 'exerciseRunner.controller.buttonGroup.button.submit.tooltip.noSubmit'
+      }) : undefined,
+      placement: "top",
+      dark: true
+    }, React__default["default"].createElement(StyledControllerButtonWrap, null, React__default["default"].createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "secondary",
+      loading: isConnecting || isSubmitting && exerciseRunType === types.enums.ExerciseRunType.Grade,
+      disabled: isSubmitGradeDisabled,
+      onClick: handleSubmitGrade
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.submit"
+    }))));
+  };
+  /**
+   * Cancel button
+   */
+
+
+  const renderCancelButton = () => {
+    if (isCancelHidden) {
+      return null;
+    }
+
+    return React__default["default"].createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "danger",
+      loading: isConnecting,
+      disabled: isCancelDisabled,
+      onClick: handleCancel
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.stop"
+    }));
+  };
+  /**
+   * Sync request button
+   */
+
+
+  const renderSyncRequestButton = () => {
+    if (isSyncRequestHidden) {
+      return null;
+    }
+
+    return React__default["default"].createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "secondary",
+      loading: isConnecting,
+      disabled: isSyncRequestDisabled,
+      onClick: handleSyncRequest
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.syncRequest"
+    }));
+  };
+  /**
+   * Code help button
+   */
+
+
+  const renderCodeHelpRequestButton = () => {
+    if (isCodeHelpHidden || !editorCursorSelectionValue || typeof onCodeHelpRequest !== 'function') {
+      return null;
+    }
+
+    return React__default["default"].createElement(StyledControllerButton, {
+      size: "tiny",
+      role: "darkblue",
+      icon: React__default["default"].createElement(blocks.Icon, {
+        icon: icons.eilArrowRightwardsBasic
+      }),
+      iconAlign: "right",
+      onClick: () => {
+        onCodeHelpRequest(editorCursorSelectionValue);
+      }
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.buttonGroup.button.helpRequest"
+    }));
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(StyledControllerButtonGroup, null, renderSubmitRunButton(), renderSubmitGradeButton(), renderCancelButton(), renderSyncRequestButton(), renderCodeHelpRequestButton());
+};
+
+module.exports = ExerciseRunnerControllerButtonGroup;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerRunningInfo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerRunningInfo: React.VFC;
+export default ExerciseRunnerControllerRunningInfo;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerRunningInfo.js

@@ -0,0 +1,187 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var reactUse = require('react-use');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var types = require('@elice/types');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var recoil$1 = require('../context/recoil.js');
+var context = require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledHr = styled__default["default"](blocks.Hr).withConfig({
+  componentId: "sc-30ywzi-0"
+})(["height:2rem;"]);
+const StyledRunnerInfoTitle = styled__default["default"].span.withConfig({
+  componentId: "sc-30ywzi-1"
+})(["display:block;color:", ";font-size:11px;line-height:1.25;"], designTokens.base.color.navy3);
+const StyledRunnerInfoContent = styled__default["default"].span.withConfig({
+  componentId: "sc-30ywzi-2"
+})(["display:block;color:", ";font-size:12px;line-height:1.25;"], designTokens.base.color.navy1);
+
+const ExerciseRunnerControllerRunningInfo = () => {
+  const intl = reactIntl.useIntl();
+  const {
+    materialExerciseId,
+    exerciseRoomId,
+    onExerciseRunningDone,
+    onError
+  } = React__default["default"].useContext(context.ExerciseContext);
+  const isRunning = recoil.useRecoilValue(recoil$1.exerciseRunnerRunningState);
+  const isPrevRunning = reactUse.usePrevious(isRunning);
+  const isNoRunning = isPrevRunning === undefined;
+  const isRunningDone = isPrevRunning === true && !isRunning;
+  const exercise = recoil.useRecoilValue(recoil$1.exerciseState(materialExerciseId));
+  const user = recoil.useRecoilValue(recoil$1.exerciseUserState);
+  const [course, setCourse] = React__default["default"].useState();
+  const [exerciseLastRunning, setExerciseLastRunning] = React__default["default"].useState(null); //
+  // Get exercise running list.
+  //
+
+  React__default["default"].useEffect(() => {
+    const userId = user === null || user === void 0 ? void 0 : user.id;
+
+    if (!userId || !exercise || !exerciseRoomId) {
+      return;
+    } // fetch last running only if
+    // - not running yet (no history)
+    // - or, running done
+
+
+    if (!isNoRunning && !isRunningDone) {
+      return;
+    }
+
+    const abortCtrl = new AbortController();
+    apiClient.getOrgMaterialExerciseExerciseRunningList({
+      exerciseRoomId,
+      filterRunType: exercise.isNoSubmitGrade ? types.enums.ExerciseRunType.Run : undefined,
+      offset: 0,
+      count: 1,
+      userId
+    }, {
+      signal: abortCtrl.signal
+    }).then(res => {
+      var _a;
+
+      return (_a = res.exerciseRunnings[0]) !== null && _a !== void 0 ? _a : null;
+    }).then(running => {
+      setExerciseLastRunning(running);
+
+      if (isRunningDone && typeof onExerciseRunningDone === 'function') {
+        onExerciseRunningDone(running);
+      }
+    }).catch(err => {
+      if (err.name === 'AbortError') {
+        return;
+      }
+
+      if (typeof onError === 'function') {
+        onError(err);
+      }
+
+      blocks.Notification.error(intl.formatMessage({
+        id: 'exerciseRunner.controller.runningInfo.error.fetch'
+      }));
+    });
+    return () => {
+      abortCtrl.abort();
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [isRunningDone, exercise, exerciseRoomId, user]); //
+  // Get course
+  //
+
+  React__default["default"].useEffect(() => {
+    if (exercise === null || exercise === void 0 ? void 0 : exercise.courseId) {
+      apiClient.getOrgCourseGet({
+        courseId: exercise.courseId
+      }).then(({
+        course
+      }) => {
+        setCourse(course);
+      }).catch(console.error);
+    }
+  }, [exercise]);
+  /**
+   * Last running score.
+   */
+
+  const renderRunningInfoLastRunningScore = () => {
+    if (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) {
+      return null;
+    }
+
+    if (!course || course.courseType === types.enums.CourseType.Challenge) {
+      return;
+    }
+
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Flex, {
+      column: true,
+      justify: "center"
+    }, React__default["default"].createElement(StyledRunnerInfoTitle, null, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.runningInfo.lastSubmitScore"
+    })), React__default["default"].createElement(StyledRunnerInfoContent, null, typeof (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.score) === 'string' ? React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.runningInfo.score",
+      values: {
+        score: exerciseLastRunning.score
+      }
+    }) : '--')), React__default["default"].createElement(StyledHr, {
+      color: designTokens.base.color.navy6,
+      vertical: true,
+      marginStart: "0.5rem",
+      marginEnd: "0.5rem"
+    }));
+  };
+  /**
+   * Last running time.
+   */
+
+
+  const renderRunningInfoLastRunningTime = () => {
+    if (!course || (course === null || course === void 0 ? void 0 : course.courseType) === types.enums.CourseType.Challenge) {
+      return;
+    }
+
+    return React__default["default"].createElement(blocks.Flex, {
+      column: true,
+      justify: "center"
+    }, React__default["default"].createElement(StyledRunnerInfoTitle, null, (exercise === null || exercise === void 0 ? void 0 : exercise.isNoSubmitGrade) ? React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.runningInfo.lastRunningDatetime"
+    }) : React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "exerciseRunner.controller.runningInfo.lastSubmitDatetime"
+    })), React__default["default"].createElement(StyledRunnerInfoContent, null, (exerciseLastRunning === null || exerciseLastRunning === void 0 ? void 0 : exerciseLastRunning.createdDatetime) ? React__default["default"].createElement(reactIntl.FormattedDate, {
+      value: exerciseLastRunning.createdDatetime,
+      year: "numeric",
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false
+    }) : '--'));
+  }; //
+  //
+  //
+  // hide running info, if exercise running.
+
+
+  if (isRunning) {
+    return null;
+  }
+
+  return React__default["default"].createElement(blocks.Flex, null, renderRunningInfoLastRunningScore(), renderRunningInfoLastRunningTime());
+};
+
+module.exports = ExerciseRunnerControllerRunningInfo;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.d.ts

@@ -0,0 +1,5 @@
+interface ExerciseRunnerControllerStatusIndicatorProps {
+    status: 'success' | 'warning' | 'error';
+}
+declare const ExerciseRunnerControllerStatusIndicator: import("styled-components").StyledComponent<"div", any, ExerciseRunnerControllerStatusIndicatorProps, never>;
+export default ExerciseRunnerControllerStatusIndicator;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusIndicator.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const ExerciseRunnerControllerStatusIndicator = styled__default["default"].div.withConfig({
+  componentId: "sc-15703mt-0"
+})(["margin-top:1px;margin-right:0.3rem;width:0.375rem;height:0.375rem;border-radius:50%;vertical-align:middle;background-color:", ";"], props => {
+  switch (props.status) {
+    case 'success':
+      return designTokens.base.color.green8;
+
+    case 'warning':
+      return designTokens.base.color.orange8;
+
+    case 'error':
+      return designTokens.base.color.red8;
+  }
+});
+
+module.exports = ExerciseRunnerControllerStatusIndicator;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerStatusMessage: React.FC;
+export default ExerciseRunnerControllerStatusMessage;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerStatusMessage.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var websocket = require('@elice/websocket');
+var recoil = require('recoil');
+var styled = require('styled-components');
+var recoil$1 = require('../context/recoil.js');
+require('../context/context.js');
+require('../context/recoilTypes.js');
+require('../context/subjects.js');
+require('../context/ExerciseProvider.js');
+var ExerciseRunnerControllerStatusIndicator = require('./ExerciseRunnerControllerStatusIndicator.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledMessageWrapper = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-1yqi8o2-0"
+})(["height:1rem;"]);
+
+const ExerciseRunnerControllerStatusMessage = () => {
+  const websocketStatus = recoil.useRecoilValue(recoil$1.exerciseRunnerWebSocketStatusQuery);
+  /**
+   * Websocket state message.
+   */
+
+  const getWebsocketStateMessage = () => {
+    switch (websocketStatus) {
+      case websocket.EliceWebSocket.OPEN:
+        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "exerciseRunner.controller.statusMessage.open"
+        });
+
+      case websocket.EliceWebSocket.CLOSED:
+        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "exerciseRunner.controller.statusMessage.closed"
+        });
+
+      case websocket.EliceWebSocket.CONNECTING:
+      default:
+        return React__default["default"].createElement(reactIntl.FormattedMessage, {
+          id: "exerciseRunner.controller.statusMessage.connecting"
+        });
+    }
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(StyledMessageWrapper, {
+    align: "center"
+  }, React__default["default"].createElement(ExerciseRunnerControllerStatusIndicator, {
+    status: websocketStatus === websocket.EliceWebSocket.OPEN ? 'success' : websocketStatus === websocket.EliceWebSocket.CLOSED ? 'error' : 'warning'
+  }), React__default["default"].createElement(blocks.Text, {
+    role: "gray3",
+    size: "tiny",
+    bold: true
+  }, getWebsocketStateMessage()));
+};
+
+module.exports = ExerciseRunnerControllerStatusMessage;

package/cjs/components/material-exercise/exercise-runner/ExerciseRunnerControllerTimer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExerciseRunnerControllerTimer: React.VFC;
+export default ExerciseRunnerControllerTimer;