add state message gifs

1 files changed, 73 insertions, 44 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index 8628ca3c3..cd76003c4 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -11,6 +11,7 @@ import { DocButtonState, DocumentLinksButton } from '../../nodes/DocumentLinksBu
 import { CollectionFreeFormInfoState, InfoState, StateEntryFunc, infoState } from './CollectionFreeFormInfoState';
 import { CollectionFreeFormView } from './CollectionFreeFormView';
 import './CollectionFreeFormView.scss';
+import { TopBar } from '../../topbar/TopBar';
 
 export interface CollectionFreeFormInfoUIProps {
     Document: Doc;
@@ -75,72 +76,98 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         // set of states
         const start = InfoState('Click anywhere and begin typing to create your first text document.', {
-            docCreated: [() => numDocs(), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return oneDoc;
-            }],
-        }, setBackground("blue")); // prettier-ignore
+          docCreated: [() => numDocs(), () => {
+            docX = firstDoc()?.x;
+            docY = firstDoc()?.y;
+            return oneDoc;
+          }],
+        }); // prettier-ignore
 
         const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', {
-            // docCreated: [() => numDocs() > 1, () => multipleDocs],
-            docDeleted: [() => numDocs() < 1, () => start],
-            docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc1;
-              }],
-        }, setBackground("red")); // prettier-ignore
+          // docCreated: [() => numDocs() > 1, () => multipleDocs],
+          docDeleted: [() => numDocs() < 1, () => start],
+          docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
+            docX = firstDoc()?.x;
+            docY = firstDoc()?.y;
+            return movedDoc1;
+          }],
+        }); // prettier-ignore
 
-        const movedDoc1 = InfoState('Great moves. Try creating a second document.', {
+        const movedDoc1 = InfoState(
+          'Great moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+          {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
             docDeleted: [() => numDocs() < 1, () => start],
             docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc2;
-              }],
-        }, setBackground("yellow")); // prettier-ignore
+              docX = firstDoc()?.x;
+              docY = firstDoc()?.y;
+              return movedDoc2;
+            }],
+          },
+          'dash-colon-menu.gif'
+        ); // prettier-ignore
 
-        const movedDoc2 = InfoState('Slick moves. Try creating a second document.', {
+        const movedDoc2 = InfoState(
+          'Slick moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+          {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
             docDeleted: [() => numDocs() < 1, () => start],
             docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc3;
-              }],
-        }, setBackground("pink")); // prettier-ignore
+              docX = firstDoc()?.x;
+              docY = firstDoc()?.y;
+              return movedDoc3;
+            }],
+          },
+          'dash-colon-menu.gif'
+        ); // prettier-ignore
 
-        const movedDoc3 = InfoState('Groovy moves. Try creating a second document.', {
+        const movedDoc3 = InfoState(
+          'Groovy moves. Try creating a second document. You can see the list of supported document types by typing \":\".',
+          {
             docCreated: [() => numDocs() == 2, () => multipleDocs],
             docDeleted: [() => numDocs() < 1, () => start],
             docMoved: [() => (docX && docX != docNewX()) || (docY && docY != docNewY()), () => {
-                docX = firstDoc()?.x;
-                docY = firstDoc()?.y;
-                return movedDoc1;
-              }],
-        }, setBackground("green")); // prettier-ignore
+              docX = firstDoc()?.x;
+              docY = firstDoc()?.y;
+              return movedDoc1;
+            }],
+          },
+          'dash-colon-menu.gif'
+        ); // prettier-ignore
 
-        const multipleDocs = InfoState('Let\'s create a new link. Click the link icon on one of your documents.', {
+        const multipleDocs = InfoState(
+          'Let\'s create a new link. Click the link icon on one of your documents.',
+          {
             linkStarted: [() => linkStart(), () => startedLink],
             docRemoved: [() => numDocs() < 2, () => oneDoc],
-        }, setBackground("purple")); // prettier-ignore
+          },
+          'dash-create-link-board.gif'
+        ); // prettier-ignore
 
-        const startedLink = InfoState('Now click the highlighted link icon on your other document.', {
+        const startedLink = InfoState(
+          'Now click the highlighted link icon on your other document.',
+          {
             linkCreated: [() => numDocLinks(), () => madeLink],
             docRemoved: [() => numDocs() < 2, () => oneDoc],
-        }, setBackground("orange")); // prettier-ignore
+          },
+          'dash-create-link-board.gif'
+        ); // prettier-ignore
 
-        const madeLink = InfoState('You made your first link! You can view your links by selecting the blue dot.', {
+        const madeLink = InfoState(
+          'You made your first link! You can view your links by selecting the blue dot.',
+          {
             linkCreated: [() => !numDocLinks(), () => multipleDocs],
             linkViewed: [() => linkMenuOpen(), () => {
-                alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
-                return viewedLink;
+              alert(numDocLinks() + " cheer for " + numDocLinks() + " link!");
+              return viewedLink;
             }],
-        }, setBackground("blue")); // prettier-ignore
+          },
+          'dash-following-link.gif'
+        ); // prettier-ignore
 
-        const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', {
+        const viewedLink = InfoState(
+          'Great work. You are now ready to create your own hypermedia world. Click the blinking question mark to learn more.',
+          {
             linkDeleted: [() => !numDocLinks(), () => multipleDocs],
             docRemoved: [() => numDocs() < 2, () => oneDoc],
             docCreated: [() => numDocs() == 3, () => {
@@ -148,7 +175,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 return presentDocs;
             }],
             activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-        }, setBackground("black")); // prettier-ignore
+          },
+          'documentation.png',
+
+        ); // prettier-ignore
 
         const presentDocs = InfoState(
             'Another document! You could make a presentation. Click the pin icon in the top left corner.',
@@ -162,7 +192,6 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 ],
                 docRemoved: [() => numDocs() < 3, () => viewedLink],
             },
-            setBackground('black'),
             '/assets/dash-pin-with-view.gif'
         );
 
@@ -244,7 +273,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
 
         const completed = InfoState('Eager to learn more? Click the ? icon in the top right corner to read our full documentation.', {
             docRemoved: [() => numDocs() == 1, () => oneDoc],
-        }, setBackground("white")); // prettier-ignore
+        }); // prettier-ignore
 
         return start;
     };