Demo page

pages/demo.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import EpisodePageWrapper from 'src/components/EpisodePageWrapper'
+
+const Demo = () => <EpisodePageWrapper episodeNumber={0} demo />
+
+export default Demo

scripts/lib/initialExpressionContainers.ts

@@ -358,6 +358,15 @@ export const vibe = initializeExpressionContainer([
   }
 ])
 
+export const lbkw = initializeExpressionContainer([
+  {
+    shorthandFunc: 'add'
+  },
+  {
+    shorthandNumber: 2
+  }
+])
+
 export const kfwf = initializeExpressionContainer([
   {
     shorthandFunc: 'add'

scripts/lib/runnerConfigs.ts

@@ -875,6 +875,11 @@ export const lizi: ExpressionRunnerShorthandConfig = {
   initialExpressionContainer: initialExpressionContainers.vibe
 }
 
+export const gnwm: ExpressionRunnerShorthandConfig = {
+  runner: 'simple',
+  initialExpressionContainer: initialExpressionContainers.lbkw
+}
+
 export const mcug: ExpressionRunnerShorthandConfig = {
   runner: 'playButtonOnly',
   initialExpressionContainer: initialExpressionContainers.vibe
@@ -967,8 +972,7 @@ export const pgxb: ExpressionRunnerShorthandConfig = {
   initialExpressionContainers: [
     initialExpressionContainers.bmar,
     initialExpressionContainers.ilbg
-  ],
-  variableSize: 'md'
+  ]
 }
 
 export const ednv: ExpressionRunnerShorthandConfig = {
@@ -1330,6 +1334,14 @@ export const plde: ExpressionRunnerShorthandConfig = {
   variableSize: 'md'
 }
 
+export const rjzw: ExpressionRunnerShorthandConfig = {
+  runner: 'playButtonOnly',
+  initialExpressionContainer: initialExpressionContainers.uqth,
+  showPriorities: true,
+  variableSize: 'md',
+  skipToTheEnd: false
+}
+
 export const jsvg: ExpressionRunnerShorthandConfig = {
   runner: 'playButtonOnly',
   initialExpressionContainer: initialExpressionContainers.uqth,

src/components/DemoCardList.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import DemoJp from 'src/contents/demo.jp'
+import DemoEn from 'src/contents/demo.en'
+import locale from 'src/lib/locale'
+
+const DemoCardList = () => (locale === 'en' ? <DemoEn /> : <DemoJp />)
+
+export default DemoCardList

src/components/EpisodeCardList.tsx

@@ -33,10 +33,12 @@ export type EpisodeCardListType = readonly EpisodeCardType[]
 const EpisodeCardList = ({
   cards,
   notFound,
+  demo,
   underConstruction
 }: {
   cards: EpisodeCardListType
   notFound: boolean
+  demo: boolean
   underConstruction?: boolean
 }) => {
   const { episodeNumber } = useContext(EpisodeContext)
@@ -46,7 +48,7 @@ const EpisodeCardList = ({
   return (
     <>
       <EpisodePageInitialRenderWarning />
-      <EpisodeHero />
+      <EpisodeHero demo={demo} notFound={notFound} />
       <>
         {underConstruction && (
           <CardWrapper
@@ -118,6 +120,7 @@ const EpisodeCardList = ({
         )}
         {shareVisible &&
           !notFound &&
+          !demo &&
           cards.length - 1 === lastVisibleCardIndex && (
             <div
               css={css`
@@ -172,7 +175,8 @@ const EpisodeCardList = ({
 }
 
 EpisodeCardList.defaultProps = {
-  notFound: false
+  notFound: false,
+  demo: false
 }
 
 export default EpisodeCardList

src/components/EpisodeHero.tsx

@@ -24,7 +24,13 @@ const commonTitleClasses = css`
   text-align: center;
 `
 
-const EpisodeHero = () => {
+const EpisodeHero = ({
+  demo,
+  notFound
+}: {
+  demo: boolean
+  notFound: boolean
+}) => {
   const { episodeTitle, episodeNumber } = useContext(EpisodeContext)
   return (
     <header
@@ -33,7 +39,7 @@ const EpisodeHero = () => {
       `}
     >
       <>
-        {episodeTitle ? (
+        {episodeTitle || demo || notFound ? (
           <>
             <h3
               css={[
@@ -72,7 +78,13 @@ const EpisodeHero = () => {
                 `
               ]}
             >
-              {episodeTitle}
+              {notFound ? (
+                <H args={{ name: 'pageNotFound' }} />
+              ) : demo ? (
+                <H args={{ name: 'demoTitle' }} />
+              ) : (
+                episodeTitle
+              )}
             </h1>
           </>
         ) : (
@@ -99,17 +111,26 @@ const EpisodeHero = () => {
       </>
       <EmojiSeparator
         size="lg"
-        nodes={episodeEmojis[episodeNumber as keyof typeof episodeEmojis].map(
-          emoji =>
-            emoji === '🔲' ? (
-              <CustomEmoji type="mathBox" />
-            ) : (
-              <Emoji>{emoji}</Emoji>
-            )
+        nodes={(demo
+          ? ['🍱', '▶️', '🔲']
+          : notFound
+          ? ['❓', '😭', '❓']
+          : episodeEmojis[episodeNumber as keyof typeof episodeEmojis]
+        ).map(emoji =>
+          emoji === '🔲' ? (
+            <CustomEmoji type="mathBox" />
+          ) : (
+            <Emoji>{emoji}</Emoji>
+          )
         )}
       />
     </header>
   )
 }
 
+EpisodeHero.defaultProps = {
+  demo: false,
+  notFound: false
+}
+
 export default EpisodeHero

src/components/EpisodePage.tsx

@@ -12,7 +12,8 @@ import Page from 'src/components/Page'
 import TocModal from 'src/components/TocModal'
 import episodeEmojis from 'src/lib/episodeEmojis'
 import NotFoundCardList from 'src/components/NotFoundCardList'
-import { ogUrl } from 'src/lib/meta'
+import DemoCardList from 'src/components/DemoCardList'
+import { ogUrl, demoUrl } from 'src/lib/meta'
 import locale from 'src/lib/locale'
 
 export interface EpisodePageProps {
@@ -21,6 +22,7 @@ export interface EpisodePageProps {
   episodeTitleString?: React.ReactNode
   episodeNumber: number
   notFound: boolean
+  demo: boolean
   contentName: ContentProps['name']
 }
 
@@ -30,6 +32,7 @@ const EpisodePage = ({
   episodeTitleString,
   episodeNumber,
   notFound,
+  demo,
   contentName
 }: EpisodePageProps) => {
   const title = `${
@@ -42,17 +45,18 @@ const EpisodePage = ({
   const [modalVisible, setModalVisible] = useState(false)
   const hideModal = () => setModalVisible(false)
   const showModal = () => setModalVisible(true)
+  const url = demo ? demoUrl : ogUrl(episodeNumber)
   return (
     <Page>
       <Head>
         <title key="title">{title}</title>
         <meta property="og:title" content={title} />
         <meta property="og:site_name" content={lessonTitle} />
-        <meta property="og:url" content={ogUrl(episodeNumber)} />
-        <link rel="canonical" href={ogUrl(episodeNumber)} />
+        <meta property="og:url" content={url} />
+        <link rel="canonical" href={url} />
       </Head>
       {modalVisible && <TocModal hideModal={hideModal} />}
-      {!notFound ? (
+      {!notFound && !demo ? (
         <EpisodePageHeader
           showModal={showModal}
           episodeNumber={episodeNumber}
@@ -73,23 +77,36 @@ const EpisodePage = ({
             showModal
           }}
         >
-          {notFound ? <NotFoundCardList /> : <Content name={contentName} />}
+          {notFound ? (
+            <NotFoundCardList />
+          ) : demo ? (
+            <DemoCardList />
+          ) : (
+            <Content name={contentName} />
+          )}
         </EpisodeContext.Provider>
       </Container>
-      {!notFound && (
+      {!notFound && !demo ? (
         <EpisodePageHeader
           showModal={showModal}
           episodeNumber={episodeNumber}
           isBottom
         />
+      ) : (
+        <div
+          css={css`
+            padding: ${spaces(3)} 0;
+          `}
+        ></div>
       )}
       <EpisodePageFooter />
     </Page>
   )
 }
 
 EpisodePage.defaultProps = {
-  notFound: false
+  notFound: false,
+  demo: false
 }
 
 export default EpisodePage

src/components/EpisodePageWrapper.tsx

@@ -7,11 +7,13 @@ import H from 'src/components/H'
 interface EpisodePageWrapperProps {
   episodeNumber: number
   notFound: boolean
+  demo: boolean
 }
 
 const EpisodePageWrapper = ({
   episodeNumber,
-  notFound
+  notFound,
+  demo
 }: EpisodePageWrapperProps) => (
   <GlobalContextSetter episodeNumber={episodeNumber}>
     <EpisodePage
@@ -29,12 +31,14 @@ const EpisodePageWrapper = ({
       }
       episodeNumber={episodeNumber}
       contentName={`${episodeNumber}` as EpisodePageProps['contentName']}
+      demo={demo}
     />
   </GlobalContextSetter>
 )
 
 EpisodePageWrapper.defaultProps = {
-  notFound: false
+  notFound: false,
+  demo: false
 }
 
 export default EpisodePageWrapper

src/components/ExpressionRunnerControls.tsx

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core'
 import H from 'src/components/H'
-import { colors, spaces } from 'src/lib/theme'
+import { colors, spaces, fontSizes } from 'src/lib/theme'
 import Emoji from 'src/components/Emoji'
 import { ExpressionRunnerProps } from 'src/types/ExpressionRunnerTypes'
 import ExpressionRunnerButton from 'src/components/ExpressionRunnerButton'
+import locale from 'src/lib/locale'
 
 interface ExpressionRunnerControlsProps {
   canStepForward: boolean
@@ -62,7 +63,7 @@ const ExpressionRunnerControls = ({
   skipToTheEnd,
   convert
 }: ExpressionRunnerControlsProps) => {
-  const centerButtonWidth = convert ? 60 : 44
+  const centerButtonWidth = convert ? 66 : 44
   const sideButtonsWidth = (100 - centerButtonWidth) / 2 - 2
   return (
     <div
@@ -122,6 +123,11 @@ const ExpressionRunnerControls = ({
             !canStepForward &&
               css`
                 background: ${colors('pink50')};
+              `,
+            convert &&
+              locale === 'en' &&
+              css`
+                font-size: ${fontSizes(0.75)};
               `
           ]}
         >

src/components/ExpressionRunnerExplanation.tsx

@@ -65,14 +65,22 @@ const Explanation = ({
   switch (state) {
     case 'default': {
       if (locale === 'en') {
-        return <>…</>
+        return <>Next!</>
       } else {
         return <>次に進みます！</>
       }
     }
     case 'active': {
       if (locale === 'en') {
-        return <>…</>
+        return (
+          <>
+            Look at the pair of{' '}
+            <InlinePrioritiesLabel revert>
+              {activePriority}
+            </InlinePrioritiesLabel>
+            ’s
+          </>
+        )
       } else {
         return (
           <>

src/components/ExpressionRunnerPrecomputed.tsx

@@ -186,7 +186,7 @@ const ExpressionRunnerPrecomputed = ({
           horizontalPadding={0}
         >
           {explanationsVisible && (
-            <ExpressionRunnerCaptionWrapper>
+            <ExpressionRunnerCaptionWrapper t8d>
               <ExpressionRunnerExplanation
                 isPlaying={isPlaying}
                 expressionContainer={expressionContainers[currentIndex]}
@@ -198,7 +198,7 @@ const ExpressionRunnerPrecomputed = ({
             </ExpressionRunnerCaptionWrapper>
           )}
           {children && !explanationsVisible && !isPlaying && (
-            <ExpressionRunnerCaptionWrapper>
+            <ExpressionRunnerCaptionWrapper t8d>
               {children}
             </ExpressionRunnerCaptionWrapper>
           )}