Discoverable demos

package.json

@@ -17,7 +17,7 @@
     "easy-peasy": "^6.1.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
-    "marked": "^5.1.0",
+    "marked": "^17.0.1",
     "mime-types": "^2.1.35",
     "react": "^19.2.0",
     "react-ace": "^14.0.1",
@@ -27,6 +27,7 @@
     "react-dom": "^19.2.0",
     "react-error-boundary": "^6.0.0",
     "react-image-crop": "^11.0.10",
+    "react-markdown": "^10.1.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.9.6",
     "scratchblocks": "^3.6.2",

public/data/demos/firing-projectile/description.md

@@ -0,0 +1,58 @@
+# Basic Firing
+## Player
+The script for the player isn't very important for this example.
+Just glide left and right across the bottom of the screen.
+
+## Bullet 
+### When green start button is pressed
+The bullet can be in one of two states.  Either we're waiting to be fired, or we're in the middle of being fired up the screen.  Keep
+track of which state we're in, by remembering whether we're in the middle of being fired.  At the start, we're NOT in the middle of
+being fired.
+
+While we're waiting to be fired, we don't want to be visible.
+
+### When "space" key is pressed
+Once we've started being fired up the screen, we want pressing space
+to have no effect.  So quit this script before doing any real work
+if we are already in the middle of being fired.
+
+Once we get here, we ARE in the middle of being fired.  Remember
+that fact.
+
+Find the player sprite and move ourselves to its location, except a bit higher ("+20" for the Y coordinate) so the bullet appears at the top of the ship.
+
+Become visible.
+
+Move quite quickly up the screen, until we're well off the top.
+
+We are no longer in the middle of being fired, so remember that.
+
+# Advanced Firing
+## Player
+The script for the player isn't very important for this example.
+Just glide left and right across the bottom of the screen.
+
+## Bullet
+### When green start button is pressed
+This variable doesn't change, but it's helpful to have a named value
+for the maximum number of Bullet clones we want to be allowed to
+exist at one time.
+
+### When "space" key is pressed
+Make sure that only the original (hidden) Bullet responds to the
+keypress.  Without this, every clone makes a new clone and we soon
+have thousands of clones.
+
+If there are already the maximum number of Bullet clones being fired, stop here.
+
+Make the new Bullet clone; the "when I start as a clone" script below does the rest of the work.
+
+### When bullet starts as a clone
+Find the player sprite and move ourselves to its location, except a bit higher ("+20" for the Y coordinate) so the bullet appears at the top of the ship.
+
+Become visible.
+
+Move quite quickly up the screen, until we're well off the top.
+
+This clone has finished its job, so delete it to avoid cluttering up
+the game with lots of clones.

public/data/demos/jumping/description.md

@@ -0,0 +1,31 @@
+# Basic Jumping
+Thanks [GrafxKid](https://opengameart.org/content/green-robot) for costume!
+
+Start off in the middle left/right, and quite near the bottom,
+to stand on the earth.
+
+We need to remember whether we're currently in the middle of a jump
+or not.  We start NOT in the middle of a jump.
+
+Continuously check for left/right keys being pressed, and adjust our
+X coordinate if needed.  This simple version does not check for
+where the player is on the screen, so you can move the ship right
+outside the screen.  It does choose a different costume for moving
+left vs moving right, though, to look better.
+
+If we're already in the middle of jumping, quit this script
+immediately, so the player can't stack jumps.
+
+Remember that we ARE now jumping.
+
+# Smooth Jumping
+
+To get a smooth jump, start by moving up quite quickly, then reduce
+how much we move up every frame.  At some point, the y_velocity
+variable will become NEGATIVE, meaning we will move DOWN.  We stop
+this whole process just after we've done the movement with a velociy
+equal to the negative of the starting velocity, when we will be
+vertically back where we started.
+
+Record the fact that we have finished jumping, and so it's OK to
+jump again next time the player presses space.

public/data/demos/smooth-movement/description.md

@@ -0,0 +1,35 @@
+# Version 1
+Keep the speed in a variable.  Even though we don't change the value, giving it a name makes the code easier to read and easier to
+change.
+
+Continuously check for movement keys being pressed, and adjust our X
+or Y coordinate if needed.  This simple version does not check for
+where the player is on the screen, so you can move the ship right
+outside the screen.
+
+# Version 2
+## `x_limit`, `y_limit`
+Likewise, keep the X and Y coordinate limits (the furthest we want the player to be able to go left and right, and up 
+and down) in variables.
+
+# Version 3
+## `x_velocity`, `y_velocity`
+These variables DO change as the player plays the game.  They track
+the current speed of the player in each dimension.
+
+## `accel`
+This variable doesn't change value, but (as above) it's useful to
+give it a name.  This is the acceleration, which says how quickly 
+the player's speed changes.
+
+### Drift
+Continuously check for movement keys being pressed, and adjust our X
+or Y velocity if needed, up to the "speed" limit.  <mark>If neither
+left/right key is pressed, drift the horizontal velocity
+(x_velocity) towards zero.  And if neither up/down key is pressed,
+drift the vertical velocity (y_velocity) towards zero.  Then update
+the position according to the velocity, making sure we don't go
+outside the screen limits.</mark>
+
+It might also be nice to eventually have a pytch filetype if the project structure become more complex and we ever ended 
+up needing different filetypes for different purposes (like maybe for raspberry pi projects or )

src/App.tsx

@@ -16,6 +16,7 @@ import "./pytch-ide.scss";
 import "./pytch-jr-ide.scss";
 import "./pytch-jr-lesson.scss";
 import "./help-sidebar.scss";
+import "./demo-sidebar.scss";
 import "./font-awesome-lib";
 
 import { AllModals } from "./components/AllModals";
@@ -32,6 +33,7 @@ import { DeliberateFailureWithBoundary } from "./components/DeliberateFailure";
 import { fireAndForgetEvent } from "./model/anonymous-instrumentation";
 import { StandalonePlayDemo } from "./components/StandalonePlayDemo";
 import { StartTutorialAtCheckpoint } from "./components/StartTutorialAtCheckpoint";
+import { DemosList } from "./components/discoverable-demos-page/DemosList";
 
 const UnknownRoute: React.FC<EmptyProps> = () => {
   return (
@@ -98,6 +100,10 @@ function App() {
           path: "tutorials/",
           element: <TutorialList />,
         },
+        {
+          path: "demos/",
+          element: <DemosList />,
+        },
         {
           path: "ide/:projectIdString",
           element: <IDE />,

src/components/CaptiveContextMenu.tsx

@@ -12,6 +12,7 @@ import React, {
 import { Dropdown } from "react-bootstrap";
 import { useNonNullContext } from "./hooks/non-null-context";
 import { handleMovementKeys } from "./CaptiveContextMenu-utils";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 /** Context for internal use by dropdown items within the container.
  * Allows items to, e.g., dismiss the dropdown menu. */
@@ -219,11 +220,17 @@ const Container: React.FC<PropsWithChildren<ContainerProps>> = ({
 };
 
 ////////////////////////////////////////////////////////////////////////
+type MenuProps = {
+  toggle?: React.ReactNode;
+};
 
 /** Menu of choices relevant to the element which has a captive context
  * menu.  Should be rendered somewhere within a
  * `CaptiveContextMenu.Container`. */
-const DropdownMenu: React.FC<PropsWithChildren<object>> = ({ children }) => {
+const DropdownMenu: React.FC<PropsWithChildren<MenuProps>> = ({
+  toggle,
+  children,
+}) => {
   const ctx = useNonNullContext(Context);
 
   const onKeydown: KeyboardEventHandler = (evt) => {
@@ -245,7 +252,9 @@ const DropdownMenu: React.FC<PropsWithChildren<object>> = ({ children }) => {
       onKeyDown={onKeydown}
       data-captive-context-menu-container-id={ctx.containerId}
     >
-      <Dropdown.Toggle as="div">⋮</Dropdown.Toggle>
+      <Dropdown.Toggle as="div" className={"captive-dropdown-toggle"}>
+        {toggle || "⋮"}
+      </Dropdown.Toggle>
       <Dropdown.Menu align="end">{children}</Dropdown.Menu>
     </Dropdown>
   );

src/components/IDELayout.tsx

@@ -58,6 +58,7 @@ export const IDELayout: React.FC<EmptyProps> = () => {
         case "expanded-specimen":
         case "expanded-lesson":
         case "expanded-tutorial":
+        case "expanded-demo":
           return 1;
         case "expanded-keynavhelp":
           console.warn("should not have expanded-keynavhelp on first render");

src/components/Junior/ActivityBar.tsx

@@ -7,7 +7,7 @@ import { useJrEditActions, useJrEditState } from "./hooks";
 import classNames from "classnames";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconName } from "@fortawesome/fontawesome-common-types";
-import { useHasLinkedLesson, useHasLinkedSpecimen } from "./lesson/hooks";
+import { useHasLinkedDemo, useHasLinkedLesson, useHasLinkedSpecimen } from "./lesson/hooks";
 import { EmptyProps } from "../../utils";
 import { useStoreState } from "../../store";
 import { Nav } from "react-bootstrap";
@@ -23,6 +23,7 @@ const uiDetailsFromTabKeyLut = new Map<ActivityBarTabKey, TabKeyUiDetails>([
   ["lesson", { icon: "book", tooltip: "Lesson content" }],
   ["tutorial", { icon: "book", tooltip: "Tutorial content" }],
   ["specimen", { icon: "book", tooltip: "Lesson information" }],
+  ["demo", { icon: "play", tooltip: "Demo content" }],
 ]);
 
 function uiDetailsFromTabKey(tab: ActivityBarTabKey): TabKeyUiDetails {
@@ -86,13 +87,16 @@ export const ActivityBar: React.FC<EmptyProps> = () => {
   const hasLinkedTutorial = useStoreState(
     (state) => state.activeProject.project?.trackedTutorial != null
   );
+  const hasLinkedDemo = useHasLinkedDemo();
 
   const tabs: Array<ActivityBarTabKey> = hasLinkedLesson
     ? ["helpsidebar", "lesson", "keynavhelp"]
     : hasLinkedSpecimen
     ? ["helpsidebar", "specimen", "keynavhelp"]
     : hasLinkedTutorial
     ? ["helpsidebar", "tutorial", "keynavhelp"]
+    : hasLinkedDemo
+    ? ["helpsidebar", "demo", "keynavhelp"]
     : ["helpsidebar", "keynavhelp"];
 
   const focusGroupExtraClass =

src/components/Junior/ActivityContent.tsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { EmptyProps, assertNever } from "../../utils";
 import { useJrEditState } from "./hooks";
-import { MaybeContent as MaybeLessonContent } from "./lesson/MaybeContent";
+import {
+  MaybeContent,
+  MaybeContent as MaybeLessonContent,
+} from "./lesson/MaybeContent";
 import { WidthMonitor } from "./WidthMonitor";
 import { HelpSidebar } from "../HelpSidebar";
 import Tutorial from "../Tutorial";
@@ -14,8 +17,25 @@ export const ActivityContent: React.FC<EmptyProps> = () => {
     return <WidthMonitor nonStageWd={576} />;
   }
 
+  /* TODO There are, on the surface, two places the DemoSidebar is rendered.
+  The one which is followed is under case "demo" here.  There is another
+  one, though, in MaybeLessonContent (nb that is the name given on
+  import), but that is dead code because we never get to
+  MaybeLessonContent unless we're in tab "lesson" or "specimen".  It
+  would be easier to go through MaybeContent, because that takes care of
+  the loading machinery. - Done*/
+
   const content = (() => {
     switch (s.tab) {
+      case "demo":
+        return (
+          <>
+            <WidthMonitor nonStageWd={980} />
+            <div className={"bg-white h-100"}>
+              <MaybeContent />
+            </div>
+          </>
+        );
       case "helpsidebar":
         return (
           <>

src/components/Junior/ActorsList.tsx

@@ -18,6 +18,7 @@ import { CaptiveContextMenu } from "../CaptiveContextMenu";
 import { kFocusGroupItemClassName } from "../../model/junior/grouped-focus";
 import { useFocusContext } from "../hooks/focus-steering";
 import { FocusGroupContainer } from "../FocusGroupContainer";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type ActorThumbnailProps = { id: Uuid };
 const ActorThumbnail: React.FC<ActorThumbnailProps> = ({ id }) => {
@@ -131,7 +132,9 @@ const ActorCardDropdown: React.FC<ActorCardDropdownProps> = ({
   });
 
   return (
-    <CaptiveContextMenu.DropdownMenu>
+    <CaptiveContextMenu.DropdownMenu
+      toggle={<FontAwesomeIcon icon={"caret-down"} />}
+    >
       <CaptiveContextMenu.DropdownItem {...onInvokeProps("code")}>
         Go to code
       </CaptiveContextMenu.DropdownItem>

src/components/Junior/AssetCard.tsx

@@ -247,7 +247,9 @@ const AssetCardDropdown: React.FC<AssetCardDropdownProps> = ({
     );
 
   return (
-    <CaptiveContextMenu.DropdownMenu>
+    <CaptiveContextMenu.DropdownMenu
+      toggle={<FontAwesomeIcon icon={"caret-down"} />}
+    >
       <CopyAssetNameDropdownItem
         operationScope={operationScope}
         assetName={displayName}

src/components/Junior/CodeEditor.tsx

@@ -144,7 +144,7 @@ const ScriptsEditor = () => {
       groupedFocusKey={`ActorProperties/${actorId}/code`}
       opts={{ onReorder }}
     >
-      <div ref={scriptsDivRef} className="pt-2 pb-5 Junior-ScriptsEditor">
+      <div ref={scriptsDivRef} className="pt-2 pb-5 Junior-ScriptsEditor flex-grow-1">
         {maybeNoContentHelp}
         <ol className="Junior-ScriptsList">{scriptsContent}</ol>
       </div>

src/components/Junior/HatBlock.tsx

@@ -22,6 +22,7 @@ import {
 } from "./hooks";
 import { CaptiveContextMenu } from "../CaptiveContextMenu";
 import { useFocusContext } from "../hooks/focus-steering";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 /** See docstring for `HatBlockContent`. */
 type DisplayVariant = "kind-chosen" | "fully-specified" | "in-editor";
@@ -179,7 +180,9 @@ export const HatBlock: React.FC<HatBlockProps> = ({
           event={event}
           variant="in-editor"
         />
-        <CaptiveContextMenu.DropdownMenu>
+        <CaptiveContextMenu.DropdownMenu
+          toggle={<FontAwesomeIcon icon={"caret-down"} />}
+        >
           <CaptiveContextMenu.DropdownItem onInvoke={onChangeHatBlock}>
             Change hat block
           </CaptiveContextMenu.DropdownItem>

src/components/Junior/InfoPanel.tsx

@@ -51,7 +51,7 @@ const InfoDisclosure: React.FC<InfoDisclosureProps> = ({ tabContentId }) => {
   const toggleState = () => toggleStateAction();
 
   return (
-    <div>
+    <div className={"h-100 d-flex"}>
       <Button
         variant="outline-secondary"
         size="sm"

src/components/Junior/KeyNavHelpSidebar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { marked } from "marked";
+import { markedParse } from "../hooks/sync-marked";
 import { assertNever, EmptyProps } from "../../utils";
 import { Row, Col, Container, Spinner } from "react-bootstrap";
 import {
@@ -66,8 +66,7 @@ const Key: React.FC<{ keyDescr: KeyDescriptor }> = ({ keyDescr }) => {
 };
 
 const TextContent: React.FC<{ markdown: string }> = ({ markdown }) => {
-  marked.use({ mangle: false, headerIds: false });
-  const html = marked.parse(markdown);
+  const html = markedParse(markdown);
   return <div dangerouslySetInnerHTML={{ __html: html }} />;
 };