add state message gifs

1 files changed, 10 insertions, 10 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
index 58f6b1593..688f84cd5 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormInfoState.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import { SettingsManager } from '../../../util/SettingsManager';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import './CollectionFreeFormView.scss';
-// import assets from './assets/link.png';
 
 /**
  * An Fsa Arc.  The first array element is a test condition function that will be observed.
@@ -15,18 +14,18 @@ import './CollectionFreeFormView.scss';
 export type infoArc = [() => any, (res?: any) => infoState];
 
 export const StateMessage = Symbol('StateMessage');
-export const StateEntryFunc = Symbol('StateEntryFunc');
 export const StateMessageGIF = Symbol('StateMessageGIF');
+export const StateEntryFunc = Symbol('StateEntryFunc');
 export class infoState {
     [StateMessage]: string = '';
-    [StateEntryFunc]?: () => any;
-    [StateMessageGIF]?: string = '';
     [key: string]: infoArc;
-    constructor(message: string, arcs: { [key: string]: infoArc }, entryFunc?: () => any, messageGif?: string) {
+    [StateMessageGIF]?: string = '';
+    [StateEntryFunc]?: () => any;
+    constructor(message: string, arcs: { [key: string]: infoArc }, messageGif?: string, entryFunc?: () => any) {
         this[StateMessage] = message;
         Object.assign(this, arcs);
-        this[StateEntryFunc] = entryFunc;
         this[StateMessageGIF] = messageGif;
+        this[StateEntryFunc] = entryFunc;
     }
 }
 
@@ -36,16 +35,17 @@ export class infoState {
  * @param arcs an object with fields containing @infoArcs (an object with field names indicating the arc transition and
  * field values being a tuple of an arc transition trigger function (that returns a truthy value when the arc should fire),
  * and an arc transition action function (that sets the next state)
+ * @param gif the gif displayed when in this state
  * @param entryFunc a function to call when entering the state
  * @returns an FSA state
  */
 export function InfoState(
     msg: string, //
     arcs: { [key: string]: infoArc },
-    entryFunc?: () => any,
-    gif?: string
+    gif?: string,
+    entryFunc?: () => any
 ) {
-    return new infoState(msg, arcs, entryFunc, gif);
+    return new infoState(msg, arcs, gif, entryFunc);
 }
 
 export interface CollectionFreeFormInfoStateProps {
@@ -103,7 +103,7 @@ export class CollectionFreeFormInfoState extends ObservableReactComponent<Collec
             <div className="collectionFreeform-infoUI" style={{ display: this._hide ? 'none' : undefined }}>
                 <div className="msg">{this.State?.[StateMessage]}</div>
                 <div className="gif-container" style={{ display: this.State?.[StateMessageGIF] ? undefined : 'none' }}>
-                    <img className="gif" src={this.State?.[StateMessageGIF]} alt="state message gif"></img>
+                    <img className="gif" src={`/assets/${this.State?.[StateMessageGIF]}`} alt="state message gif"></img>
                 </div>
                 <div style={{ position: 'absolute', top: -10, left: -10 }}>
                     <IconButton icon="x" color={SettingsManager.userColor} size={Size.XSMALL} type={Type.TERT} background={SettingsManager.userBackgroundColor} onClick={action(e => this.props.close())} />