Sane hint logic, animate Train model.

Author: microbit-matt-hillsdon

src/components/DataSamplesTable.tsx

@@ -11,7 +11,7 @@ import { FormattedMessage, useIntl } from "react-intl";
 import { useConnectActions } from "../connect-actions-hooks";
 import { useConnectionStage } from "../connection-stage-hooks";
 import { keyboardShortcuts, useShortcut } from "../keyboard-shortcut-hooks";
-import { ActionData } from "../model";
+import { ActionData, DataSamplesPageHint } from "../model";
 import { useStore } from "../store";
 import { recordButtonId } from "./ActionDataSamplesCard";
 import { actionNameInputId } from "./ActionNameCard";
@@ -53,13 +53,13 @@ const headings: GridColumnHeadingItemProps[] = [
 interface DataSamplesTableProps {
   selectedActionIdx: number;
   setSelectedActionIdx: (idx: number) => void;
-  showHints: boolean;
+  hint: DataSamplesPageHint;
 }
 
 const DataSamplesTable = ({
   selectedActionIdx: selectedActionIdx,
   setSelectedActionIdx: setSelectedActionIdx,
-  showHints,
+  hint,
 }: DataSamplesTableProps) => {
   const actions = useStore((s) => s.actions);
   // Default to first action being selected if last action is deleted.
@@ -215,13 +215,12 @@ const DataSamplesTable = ({
           <DataSamplesTableRow
             key={action.ID}
             action={action}
-            actions={actions}
             newRecordingId={newRecordingId}
             clearNewRecordingId={() => setNewRecordingId(undefined)}
             selected={selectedAction.ID === action.ID}
             onSelectRow={() => setSelectedActionIdx(idx)}
             onRecord={handleRecord}
-            showHints={showHints}
+            hint={hint}
             onDeleteAction={deleteActionConfirmOnOpen}
             renameShortcutScopeRef={renameActionShortcutScopeRef}
           />

src/components/DataSamplesTableHints.tsx

@@ -3,47 +3,125 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, GridItem, HStack, Stack, Text, VStack } from "@chakra-ui/react";
+import {
+  AspectRatio,
+  Box,
+  HStack,
+  Image,
+  Stack,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
 import { useConnectionStage } from "../connection-stage-hooks";
+import { Action } from "../model";
 import Emoji, { animations } from "./Emoji";
 import EmojiArrow from "./EmojiArrow";
 import UpCurveArrow from "./UpCurveArrow";
+import moveMicrobitImage from "../images/move-microbit.svg";
 
 export const NameActionHint = () => {
   return (
-    <GridItem h="120px">
-      <VStack m={0} p={2} w={200} transform="translate(-30px, 45px)">
-        <Stack spacing={0} color="brand.500" ml={-8}>
-          <EmojiArrow />
-          <Box transform="rotate(-8deg)">
-            <Emoji ml="25px" boxSize={16} animation={animations.spin} />
-          </Box>
-        </Stack>
-        <Text textAlign="center">
-          <FormattedMessage id="name-action-hint" />
-        </Text>
-      </VStack>
-    </GridItem>
+    <VStack m={0} p={2} w={200} transform="translate(-30px, 45px)">
+      <Stack spacing={0} color="brand.500" ml={-8}>
+        <EmojiArrow />
+        <Box transform="rotate(-8deg)">
+          <Emoji ml="25px" boxSize={16} animation={animations.spin} />
+        </Box>
+      </Stack>
+      <Text textAlign="center">
+        <FormattedMessage id="name-action-hint" />
+      </Text>
+    </VStack>
   );
 };
 
 export const RecordButtonHint = () => {
   const { isConnected } = useConnectionStage();
   return (
-    <GridItem h="120px">
-      <HStack m={0} p={2} transform="translateX(65px)" w="calc(100% - 65px)">
-        <UpCurveArrow w="60px" h="93px" color="brand.500" />
-        {isConnected ? (
-          <Text textAlign="center" maxW={200}>
-            <FormattedMessage id="record-hint-button-b" />
-          </Text>
-        ) : (
-          <Text textAlign="center" maxW={125}>
-            <FormattedMessage id="record-hint" />
-          </Text>
-        )}
+    <HStack m={0} p={2} transform="translateX(65px)" w="calc(100% - 65px)">
+      <UpCurveArrow w="60px" h="93px" color="brand.500" />
+      {/* Emoji? Or explain button B visually? */}
+      {isConnected ? (
+        <Text textAlign="center" maxW={200}>
+          <FormattedMessage id="record-hint-button-b" />
+        </Text>
+      ) : (
+        <Text textAlign="center" maxW={125}>
+          <FormattedMessage id="record-hint" />
+        </Text>
+      )}
+    </HStack>
+  );
+};
+
+export const RecordMoreHint = ({ recorded }: { recorded: number }) => {
+  return (
+    <HStack m={0} p={2} transform="translateX(65px)" w="calc(100% - 65px)">
+      <UpCurveArrow w="60px" h="93px" color="brand.500" />
+      <Emoji
+        transform="rotate(-8deg)"
+        leftEye={recorded == 2 ? "tick" : "round"}
+      />
+      <Text maxW="20ch" textAlign="center">
+        {recorded === 1
+          ? "Record at least 2 more data samples"
+          : "Record at least 1 more data sample"}
+      </Text>
+    </HStack>
+  );
+};
+
+export const AddActionHint = ({ action }: { action: Action }) => {
+  return (
+    <HStack
+      m={0}
+      position="absolute"
+      left={16}
+      bottom={12}
+      spacing={3}
+      alignItems="flex-start"
+    >
+      <HStack spacing={0} alignItems="flex-start">
+        <EmojiArrow
+          w="60px"
+          h="93px"
+          color="brand.500"
+          transform="rotate(-80deg)"
+        />
+        <Box transform="rotate(-8deg)">
+          <Emoji
+            leftEye="tick"
+            rightEye="tick"
+            pb={3}
+            animation={animations.spin}
+          />
+        </Box>
       </HStack>
-    </GridItem>
+      <Text textAlign="center">
+        Finished recording for {action.name}?<br />
+        Add another action
+      </Text>
+    </HStack>
+  );
+};
+
+export const MoveMicrobitHint = () => {
+  return (
+    <HStack m={0} position="absolute" right={16} bottom={12} spacing={0}>
+      <EmojiArrow
+        mt={8}
+        transform="rotate(-80deg)"
+        transformOrigin="center"
+        color="brand.500"
+      />
+      {/* Ratio hides excess whitespace */}
+      <AspectRatio ratio={30 / 25} w={36} animation={animations.wobble}>
+        <Image src={moveMicrobitImage} />
+      </AspectRatio>
+      <Text textAlign="center" w={48}>
+        Shake the micro:bit and watch the graph change
+      </Text>
+    </HStack>
   );
 };

src/components/DataSamplesTableRow.tsx

@@ -7,20 +7,23 @@
 import { Box, GridItem } from "@chakra-ui/react";
 import { RefType } from "react-hotkeys-hook/dist/types";
 import { useIntl } from "react-intl";
-import { ActionData } from "../model";
+import { ActionData, DataSamplesPageHint } from "../model";
 import ActionDataSamplesCard from "./ActionDataSamplesCard";
 import ActionNameCard, { ActionCardNameViewMode } from "./ActionNameCard";
-import { NameActionHint, RecordButtonHint } from "./DataSamplesTableHints";
+import {
+  NameActionHint,
+  RecordButtonHint,
+  RecordMoreHint,
+} from "./DataSamplesTableHints";
 import { RecordingOptions } from "./RecordingDialog";
 
 interface DataSamplesTableRowProps {
   preview?: boolean;
   action: ActionData;
-  actions: ActionData[];
   selected: boolean;
   onSelectRow?: () => void;
   onRecord?: (recordingOptions: RecordingOptions) => void;
-  showHints: boolean;
+  hint: DataSamplesPageHint;
   newRecordingId?: number;
   clearNewRecordingId?: () => void;
   onDeleteAction?: () => void;
@@ -29,24 +32,17 @@ interface DataSamplesTableRowProps {
 
 const DataSamplesTableRow = ({
   action,
-  actions,
   selected,
   onSelectRow,
   onRecord,
   preview,
-  showHints,
+  hint,
   newRecordingId,
   clearNewRecordingId,
   onDeleteAction,
   renameShortcutScopeRef,
 }: DataSamplesTableRowProps) => {
   const intl = useIntl();
-  const needsNameHint =
-    actions.length === 1 &&
-    action.name.length === 0 &&
-    action.recordings.length === 0;
-  const needsRecordHint =
-    !needsNameHint && actions.length === 1 && action.recordings.length === 0;
   return (
     <>
       <Box
@@ -74,7 +70,11 @@ const DataSamplesTableRow = ({
             }
           />
         </GridItem>
-        {showHints && needsNameHint && <NameActionHint />}
+        {hint === "name-action" && (
+          <GridItem h="120px">
+            <NameActionHint />
+          </GridItem>
+        )}
         <GridItem>
           {(action.name.length > 0 || action.recordings.length > 0) && (
             <ActionDataSamplesCard
@@ -88,11 +88,16 @@ const DataSamplesTableRow = ({
             />
           )}
         </GridItem>
-        {showHints && needsRecordHint && (
+        {(hint === "record" || hint === "record-more") && (
           <>
             {/* Skip first column to correctly place hint. */}
             <GridItem />
-            <RecordButtonHint />
+            <GridItem h="120px">
+              {hint === "record" && <RecordButtonHint />}
+              {hint === "record-more" && (
+                <RecordMoreHint recorded={action.recordings.length} />
+              )}
+            </GridItem>
           </>
         )}
       </Box>

src/components/Emoji.tsx

@@ -15,6 +15,23 @@ export const animations = {
       transform: "rotate(-15deg)",
     },
   })} 2s`,
+  tada: `${keyframes({
+    "0%": {
+      transform: "scale(1) rotate(0deg)",
+    },
+    "10%, 20%": {
+      transform: "scale(0.95) rotate(-3deg)",
+    },
+    "30%, 50%, 70%, 90%": {
+      transform: "scale(1.1) rotate(3deg)",
+    },
+    "40%, 60%, 80%": {
+      transform: "scale(1.1) rotate(-3deg)",
+    },
+    "100%": {
+      transform: "scale(1) rotate(0deg)",
+    },
+  })} 1s ease-in-out`,
   spin: `${keyframes({
     "0%": {
       transform: "rotate3d(0, 1, 0, 0deg)",
@@ -37,10 +54,12 @@ interface EmojiProps extends IconProps {
 const Emoji = ({
   leftEye = "round",
   rightEye = "round",
+  boxSize = 16,
+  color = "brand.500",
   ...props
 }: EmojiProps) => {
   return (
-    <Icon {...props} viewBox="0 0 124 101">
+    <Icon boxSize={boxSize} color={color} {...props} viewBox="0 0 124 101">
       {/* Outline */}
       <path
         d="M88.874 0.0159531V0.00657654H34.1453V0.0159531C14.6584 0.173286 0 15.7146 0 36.3026C0 56.6373 14.4073 72.0239 33.6396 72.4399V72.46H88.5953C108.233 72.46 123.041 56.9173 123.041 36.3026C123.041 15.7093 108.371 0.162621 88.874 0.0159531ZM88.5953 57.0106L34.1084 56.9999C23.3745 56.8133 14.726 47.5906 14.726 36.2346C14.726 24.7599 23.5516 15.4586 34.4396 15.4586H88.5953C99.4792 15.4586 108.307 24.7599 108.307 36.2346C108.307 47.7092 99.4792 57.0106 88.5953 57.0106Z"

src/model.ts

@@ -223,6 +223,14 @@ export enum DataSamplesView {
   GraphAndDataFeatures = "graph and data features",
 }
 
+export type DataSamplesPageHint =
+  | null
+  | "move-microbit"
+  | "name-action"
+  | "record"
+  | "record-more"
+  | "add-action";
+
 export enum PostImportDialogState {
   None = "none",
   Error = "error",