Poke

.gitignore

@@ -17,3 +17,7 @@ npm-*
 # Generated translation files
 /translations
 /locale
+
+# Editor
+/.idea
+/.vscode

src/components/controls/controls.jsx

@@ -13,6 +13,7 @@ import Step from '../debugger-buttons/step/step.jsx';
 import TurboMode from '../turbo-mode/turbo-mode.jsx';
 
 import styles from './controls.css';
+import TestFlag from '../test-flag/test-flag.jsx';
 
 const messages = defineMessages({
     goTitle: {
@@ -61,6 +62,7 @@ const Controls = function (props) {
         numberOfFrames,
         onDebugModeClick,
         onGreenFlagClick,
+        onTestFlagClick,
         onPauseClick,
         onResumeClick,
         onRewindModeClick,
@@ -87,42 +89,49 @@ const Controls = function (props) {
                 title={intl.formatMessage(messages.stopTitle)}
                 onClick={onStopAllClick}
             />
-            <DebugMode
-                debugMode={debugMode}
-                title={intl.formatMessage(messages.debugTitle)}
-                onClick={onDebugModeClick}
+            {/* Temporary comment for dojocon demo to not show debug functionality */}
+            {/* <DebugMode */}
+            {/*     debugMode={debugMode} */}
+            {/*     title={intl.formatMessage(messages.debugTitle)} */}
+            {/*     onClick={onDebugModeClick} */}
+            {/* /> */}
+            {/* {debugMode ? */}
+            {/*     <> */}
+            {/*         <RewindMode */}
+            {/*             numberOfFrames={numberOfFrames} */}
+            {/*             rewindMode={rewindMode} */}
+            {/*             title={intl.formatMessage(messages.rewindTitle)} */}
+            {/*             onClick={onRewindModeClick} */}
+            {/*         /> */}
+            {/*         <Resume */}
+            {/*             paused={paused} */}
+            {/*             running={active} */}
+            {/*             title={intl.formatMessage(messages.resumeTitle)} */}
+            {/*             onClick={onResumeClick} */}
+            {/*         /> */}
+            {/*         <Pause */}
+            {/*             paused={paused} */}
+            {/*             running={active} */}
+            {/*             title={intl.formatMessage(messages.pauseTitle)} */}
+            {/*             onClick={onPauseClick} */}
+            {/*         /> */}
+            {/*         <Step */}
+            {/*             paused={paused} */}
+            {/*             running={active} */}
+            {/*             title={intl.formatMessage(messages.stepTitle)} */}
+            {/*             onClick={onStepClick} */}
+            {/*         /> */}
+            {/*     </> : */}
+            {/*     null} */}
+            {/* {turbo ? ( */}
+            {/*     <TurboMode /> */}
+            {/* ) : null} */}
+            <TestFlag
+                active={active}
+                // todo change title
+                title="Test flag"
+                onClick={onTestFlagClick}
             />
-            {debugMode ?
-                <>
-                    <RewindMode
-                        numberOfFrames={numberOfFrames}
-                        rewindMode={rewindMode}
-                        title={intl.formatMessage(messages.rewindTitle)}
-                        onClick={onRewindModeClick}
-                    />
-                    <Resume
-                        paused={paused}
-                        running={active}
-                        title={intl.formatMessage(messages.resumeTitle)}
-                        onClick={onResumeClick}
-                    />
-                    <Pause
-                        paused={paused}
-                        running={active}
-                        title={intl.formatMessage(messages.pauseTitle)}
-                        onClick={onPauseClick}
-                    />
-                    <Step
-                        paused={paused}
-                        running={active}
-                        title={intl.formatMessage(messages.stepTitle)}
-                        onClick={onStepClick}
-                    />
-                </> :
-                null}
-            {turbo ? (
-                <TurboMode />
-            ) : null}
         </div>
     );
 };
@@ -135,6 +144,7 @@ Controls.propTypes = {
     numberOfFrames: PropTypes.number.isRequired,
     onDebugModeClick: PropTypes.func.isRequired,
     onGreenFlagClick: PropTypes.func.isRequired,
+    onTestFlagClick: PropTypes.func.isRequired,
     onPauseClick: PropTypes.func.isRequired,
     onResumeClick: PropTypes.func.isRequired,
     onRewindModeClick: PropTypes.func.isRequired,

src/components/gui/gui.jsx

@@ -41,6 +41,7 @@ import costumesIcon from './icon--costumes.svg';
 import soundsIcon from './icon--sounds.svg';
 import debuggerIcon from '../../debugger-icons/icon--debugger.svg';
 import DebuggerTab from '../../containers/debugger-tab.jsx';
+import TestResultTab from '../../containers/test-result-tab.jsx';
 import TimeInterface from '../../containers/time-interface.jsx';
 
 const messages = defineMessages({
@@ -105,6 +106,7 @@ const GUIComponent = props => {
         onActivateDebuggerTab,
         onActivateSoundsTab,
         onActivateTab,
+        onActivateTestResultTab,
         onClickLogo,
         onExtensionButtonClick,
         onProjectTelemetryEvent,
@@ -124,6 +126,7 @@ const GUIComponent = props => {
         stageSizeMode,
         targetIsStage,
         telemetryModalVisible,
+        testResultTabVisible,
         tipsLibraryVisible,
         vm,
         ...componentProps
@@ -303,6 +306,20 @@ const GUIComponent = props => {
                                             id="gui.gui.soundsTab"
                                         />
                                     </Tab>
+                                    <Tab
+                                        className={tabClassNames.tab}
+                                        onClick={onActivateTestResultTab}
+                                    >
+                                        <img
+                                            draggable={false}
+                                            src={debuggerIcon}
+                                        />
+                                        <FormattedMessage
+                                            defaultMessage="Test results"
+                                            description="Button to get to the test result panel"
+                                            id="gui.gui.testResultTab"
+                                        />
+                                    </Tab>
                                     {debugMode ?
                                         <Tab
                                             className={tabClassNames.tab}
@@ -355,6 +372,9 @@ const GUIComponent = props => {
                                 <TabPanel className={tabClassNames.tabPanel}>
                                     {soundsTabVisible ? <SoundTab vm={vm} /> : null}
                                 </TabPanel>
+                                <TabPanel className={tabClassNames.tabPanel}>
+                                    {testResultTabVisible ? <TestResultTab vm={vm} /> : null}
+                                </TabPanel>
                                 {debugMode ?
                                     <TabPanel className={tabClassNames.tabPanel}>
                                         {debuggerTabVisible ? <DebuggerTab vm={vm} /> : null}
@@ -425,6 +445,7 @@ GUIComponent.propTypes = {
     logo: PropTypes.string,
     onActivateCostumesTab: PropTypes.func,
     onActivateDebuggerTab: PropTypes.func,
+    onActivateTestResultTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
     onClickAccountNav: PropTypes.func,
@@ -452,6 +473,7 @@ GUIComponent.propTypes = {
     stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
     targetIsStage: PropTypes.bool,
     telemetryModalVisible: PropTypes.bool,
+    testResultTabVisible: PropTypes.bool,
     tipsLibraryVisible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };

src/components/test-flag/test-flag.css

@@ -0,0 +1,19 @@
+@import "../../css/colors.css";
+
+.test-flag {
+    width: 2rem;
+    height: 2rem;
+    padding: 0.375rem;
+    border-radius: 0.25rem;
+    user-select: none;
+    user-drag: none;
+    cursor: pointer;
+}
+
+.test-flag:hover {
+    background-color: $motion-light-transparent;
+}
+
+.test-flag.is-active {
+    background-color: $motion-transparent;
+}

src/components/test-flag/test-flag.jsx

@@ -0,0 +1,46 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import testFlagIcon from './icon--test-flag.svg';
+import styles from './test-flag.css';
+
+const TestFlagComponent = function (props) {
+    const {
+        active,
+        className,
+        onClick,
+        title,
+        ...componentProps
+    } = props;
+    return (
+        <img
+            className={classNames(
+                className,
+                styles.testFlag,
+                {
+                    [styles.isActive]: active
+                }
+            )}
+            draggable={false}
+            src={testFlagIcon}
+            title={title}
+            onClick={onClick}
+            {...componentProps}
+        />
+    );
+};
+
+TestFlagComponent.propTypes = {
+    active: PropTypes.bool,
+    className: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    title: PropTypes.string
+};
+
+TestFlagComponent.defaultProps = {
+    active: false,
+    title: 'Go'
+};
+
+export default TestFlagComponent;

src/components/test-result-tab/test-result-tab.css

@@ -0,0 +1,48 @@
+@import "../../css/units.css";
+@import "../../css/colors.css";
+
+.testResultTab {
+    margin: 20px;
+    overflow: scroll;
+    height: 800px;
+    width: 100%;
+}
+
+.feedbackTree {
+    margin: 10px 10px 10px 20px;
+}
+
+.feedbackIcon {
+    width: 15px;
+    height: 15px;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+.feedbackRow {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin: 10px 0;
+}
+
+.caret-open::before {
+    content: "\25B6";
+    color: black;
+    display: inline-block;
+    transform: rotate(90deg);
+}
+
+.caret-closed::before {
+    content: "\25B6";
+    color: black;
+    display: inline-block;
+}
+
+.hidden {
+    display: none;
+}
+
+.feedbackChildrenShown {
+    display: contents;
+}