add state message gif

1 files changed, 22 insertions, 19 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
index ff0968ef8..dc0930a23 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoUI.tsx
@@ -73,7 +73,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
                 docY = firstDoc()?.y;
                 return oneDoc;
             }],
-        }, setBackground("blue")); // prettier-ignore
+        }, setBackground("blue"), "/assets/dash-pin-with-view.gif"); // prettier-ignore
 
         const oneDoc = InfoState('Hello world! You can drag and drop to move your document around.', {
             // docCreated: [() => numDocs() > 1, () => multipleDocs],
@@ -136,22 +136,25 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const viewedLink = InfoState('Great work. You are now ready to create your own hypermedia world.', {
             linkDeleted: [() => !numDocLinks(), () => multipleDocs],
             docRemoved: [() => numDocs() < 2, () => oneDoc],
-            docCreated: [() => numDocs() == 3, () => demos],
-            // docPinned: [() => pin(), () => pinnedDoc],
+            docCreated: [() => numDocs() == 3, () => {
+                trail = pin().length;
+                return presentDocs;
+            }],
+            activePen: [() => activeTool() === InkTool.Pen, () => penMode],
         }, setBackground("black")); // prettier-ignore
 
-        const demos = InfoState('', {
-            // activePen: [() => activeTool() === InkTool.Pen, () => penMode],
-            docPinned: [() => pin().length, () => {
+        const presentDocs = InfoState('Another document! You could make a presentation. Click the pin icon on the top left corner.', {
+            docPinned: [() => pin().length > trail, () => {
                 trail = pin().length;
                 return pinnedDoc1;
             }],
-        });
+            docRemoved: [() => numDocs() < 3, () => viewedLink],
+        }, setBackground("pink"), "assets/dash-pin-with-view.gif");
 
-        // const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
-        //     // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode],
-        //     docRemoved: [() => numDocs() < 3, () => demos],
-        // }); // prettier-ignore
+        const penMode = InfoState('You\'re in pen mode. Click and drag to draw your first masterpiece.', {
+            // activePen: [() => activeTool() === InkTool.Eraser, () => eraserMode],
+            activePen: [() => activeTool() !== InkTool.Pen, () => viewedLink],
+        }); // prettier-ignore
 
         // const eraserMode = InfoState('You\'re in eraser mode. Say goodbye to your first masterpiece.', {
         //     docsRemoved: [() => numDocs() == 3, () => demos],
@@ -165,10 +168,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => demos],
+            docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
 
-        const pinnedDoc2 = InfoState('You pinned another doc.', {
+        const pinnedDoc2 = InfoState(`You pinned ${pin().length} docs.`, {
             docPinned: [() => pin().length > trail, () => {
                 trail = pin().length;
                 return pinnedDoc3;
@@ -176,10 +179,10 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => demos],
+            docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
 
-        const pinnedDoc3 = InfoState('You pinned yet another doc.', {
+        const pinnedDoc3 = InfoState(`You pinned ${pin().length} docs.`, {
             docPinned: [() => pin().length > trail, () => {
                 trail = pin().length;
                 return pinnedDoc2;
@@ -187,7 +190,7 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             // manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => demos],
+            docRemoved: [() => numDocs() < 3, () => viewedLink],
         });
 
         // const openedTrail = InfoState('This is your trails tab.', {
@@ -204,18 +207,18 @@ export class CollectionFreeFormInfoUI extends ObservableReactComponent<Collectio
         const manualPresentationMode = InfoState('You\'re in manual presentation mode.', {
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             autoPresentation: [() => presentationMode() === 'auto', () => autoPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => demos],
+            docRemoved: [() => numDocs() < 3, () => viewedLink],
             docCreated: [() => numDocs() == 4, () => completed],
         });
 
         const autoPresentationMode = InfoState('You\'re in auto presentation mode.', {
             // editPresentation: [() => presentationMode() === 'edit', () => editPresentationMode],
             manualPresentation: [() => presentationMode() === 'manual', () => manualPresentationMode],
-            docRemoved: [() => numDocs() < 3, () => demos],
+            docRemoved: [() => numDocs() < 3, () => viewedLink],
             docCreated: [() => numDocs() == 4, () => completed],
         });
 
-        const completed = InfoState('Eager to learn more? Click the ? icon to read our full documentation.', {
+        const completed = InfoState('Eager to learn more? Click the ? icon on the top right corner to read our full documentation.', {
             docRemoved: [() => numDocs() == 1, () => oneDoc],
         }, setBackground("white")); // prettier-ignore