chibicode · chibicode · Jun 18, 2019 · Jun 18, 2019
diff --git a/src/components/ExpressionRunner.tsx b/src/components/ExpressionRunner.tsx
@@ -241,7 +241,6 @@ const ExpressionRunner = ({
     isFastForwarding: false,
     isPlaying: false
   })
-  const [playClicked, setPlayClicked] = useState(false)
   const actions = getActions({
     speed,
     interval,
@@ -360,8 +359,6 @@ const ExpressionRunner = ({
               onResetClick={actions.reset}
               skipToTheEnd={skipToTheEnd}
               onPauseClick={actions.pause}
-              playClicked={playClicked}
-              setPlayClicked={setPlayClicked}
             />
           )}
         </Container>

diff --git a/src/components/ExpressionRunnerControls.tsx b/src/components/ExpressionRunnerControls.tsx
@@ -55,8 +55,6 @@ interface ExpressionRunnerControlsProps {
   onResetClick: () => void
   onSkipToTheEndClick: () => void
   onPauseClick: () => void
-  playClicked: boolean
-  setPlayClicked: React.Dispatch<React.SetStateAction<boolean>>
 }
 
 const noOp = () => {
@@ -86,8 +84,8 @@ const ButtonPlaceholder = ({
   />
 )
 
-const sideButtonsWidth = 24
-const centerButtonWidth = 48
+const sideButtonsWidth = 26
+const centerButtonWidth = 44
 
 const ExpressionRunnerControls = ({
   canStepForward,
@@ -101,18 +99,8 @@ const ExpressionRunnerControls = ({
   onPauseClick,
   onSkipToTheEndClick,
   skipToTheEnd,
-  isDone,
-  playClicked,
-  setPlayClicked
+  isDone
 }: ExpressionRunnerControlsProps) => {
-  const onAutoClickWrapper = () => {
-    setPlayClicked(true)
-    onAutoClick()
-  }
-  const onResetClickWrapper = () => {
-    setPlayClicked(false)
-    onResetClick()
-  }
   return (
     <div
       css={css`
@@ -156,8 +144,8 @@ const ExpressionRunnerControls = ({
                 ? onSkipToTheEndClick
                 : isPlaying
                 ? onPauseClick
-                : onAutoClickWrapper
-              : onResetClickWrapper
+                : onAutoClick
+              : onResetClick
           }
           css={[
             css`
@@ -189,7 +177,7 @@ const ExpressionRunnerControls = ({
       )}
       {showPlayButton ? (
         <>
-          {!isPlaying && canStepForward && playClicked && !skipToTheEnd ? (
+          {!isPlaying && canStepForward && !skipToTheEnd ? (
             <Button
               onClick={onNextClick}
               css={css`

diff --git a/src/components/H.tsx b/src/components/H.tsx
@@ -107,6 +107,7 @@ export interface HProps {
         pleaseWait?: boolean
         skippingSteps?: boolean
         isFaster?: boolean
+        mentionRightArrow?: boolean
       }
     | { name: 'copy' }
     | { name: 'summary' }
@@ -159,6 +160,7 @@ export interface HProps {
     | { name: 'thisIsYCombinatorCaption'; too?: boolean }
     | { name: 'csDescription'; prefix?: React.ReactNode }
     | { name: 'numberOfAIsSecretCodeCaption' }
+    | { name: 'mentionRightArrow' }
 }
 
 const slightlyLargeCaptionCss = css`
@@ -770,7 +772,10 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
           <Em>
             <H args={{ name: 'fastForward' }} />
             を押してみてください
-            {args.pleaseWait || args.skippingSteps || args.isFaster
+            {args.pleaseWait ||
+            args.skippingSteps ||
+            args.isFaster ||
+            args.mentionRightArrow
               ? '。'
               : args.skipColon
               ? ''
@@ -779,6 +784,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
           {args.pleaseWait && <H args={{ name: 'itWillTakeTime' }} />}
           {args.skippingSteps && <H args={{ name: 'skippingSteps' }} />}
           {args.isFaster && <H args={{ name: 'isFaster' }} />}
+          {args.mentionRightArrow && <H args={{ name: 'mentionRightArrow' }} />}
         </>
       )
     }
@@ -1805,6 +1811,19 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
       )
     }
   }
+  if (args.name === 'mentionRightArrow') {
+    if (locale === 'en') {
+      return <>?</>
+    } else {
+      return (
+        <>
+          <Em highlightType="pink">
+            一回ずつ進める場合は、<Emoji>➡️</Emoji>を押してください。
+          </Em>
+        </>
+      )
+    }
+  }
   throw new Error()
 }
 

diff --git a/src/contents/2.jp.tsx b/src/contents/2.jp.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { P, Strong, InlineHeader } from 'src/components/ContentTags'
+import { P, Em, Strong, InlineHeader } from 'src/components/ContentTags'
 import Emoji from 'src/components/Emoji'
 import EmojiSeparator from 'src/components/EmojiSeparator'
 import AER from 'src/components/AER'
@@ -320,19 +320,29 @@ export default () => (
         )
       },
       {
-        title: <>早送りで見てみましょう</>,
+        title: (
+          <>
+            <H args={{ name: 'fastForward' }} />
+            で見てみましょう
+          </>
+        ),
         content: (
           <>
             <P>
-              締めくくりに、それぞれ最初から最後まで早送りで見てみましょう。
+              締めくくりに、それぞれ最初から最後まで
+              <H args={{ name: 'fastForward' }} />
+              で見てみましょう。
+              <H args={{ name: 'fastForward' }} />
+              を使うと、<Em>最後まで自動で進めることができます。</Em>
             </P>
+            <EmojiSeparator emojis={['⏩', '🍱', '⏩']} />
             <P>
-              <H args={{ name: 'pressFastForward' }} />
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
             </P>
             {AER.wunw}
             <P>
               こちらも
-              <H args={{ name: 'pressFastForward' }} />
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
             </P>
             {AER.jbam}
             <P>法則を覚えたら、次に進みましょう！</P>

diff --git a/src/contents/3.jp.tsx b/src/contents/3.jp.tsx
@@ -128,7 +128,7 @@ export default () => (
               <BottomRightBadge inline bottomRightBadgeType="callArg" />と
               <BottomRightBadge inline bottomRightBadgeType="funcArg" />
               が消えて終了です。
-              <H args={{ name: 'pressFastForward' }} />
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
             </P>
             {AER.dmwy}
           </>
@@ -273,7 +273,7 @@ export default () => (
           <>
             <P>
               というわけで最後まで見てみましょう。
-              <H args={{ name: 'pressFastForward' }} />
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
             </P>
             {AER.jmqh}
             <P>

diff --git a/src/contents/4.jp.tsx b/src/contents/4.jp.tsx
@@ -91,7 +91,7 @@ export default () => (
               )を今までと同じように終わらせます。
             </P>
             <P>
-              <H args={{ name: 'pressFastForward' }} />
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
             </P>
             {AER.qxgl}
             <P>
@@ -169,7 +169,7 @@ export default () => (
             <P>
               最後に、残った<InlinePrioritiesLabel>1</InlinePrioritiesLabel>
               のペアを終わらせます。
-              <H args={{ name: 'pressFastForward' }} />
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
             </P>
             {AER.kvso}
             <P>以上です！</P>
@@ -271,7 +271,7 @@ export default () => (
           <>
             <P>
               <H args={{ name: 'theAnswerIs', isYes: false, sentence: true }} />
-              <H args={{ name: 'pressFastForward' }} />
+              <H args={{ name: 'pressFastForward', mentionRightArrow: true }} />
             </P>
             {AER.hdxc}
             <P>