wip rules... ugh, complicated

packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx

@@ -5,11 +5,11 @@ import { EditTwitchEventRule } from '@storyteller/components/src/api/storyteller
 import { TwitchEventRuleElement } from './TwitchEventRuleElement';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft, faSave } from '@fortawesome/free-solid-svg-icons';
+import { faAngleLeft, faGem, faSave } from '@fortawesome/free-solid-svg-icons';
 import { EventMatchPredicate } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventMatchPredicate';
 import { EventResponse } from '@storyteller/components/src/api/storyteller/twitch_event_rules/shared/EventResponse';
 import { TtsModelListItem } from '@storyteller/components/src/api/tts/ListTtsModels';
-import { CHEERS } from '../../twitch/Cheers';
+import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../twitch/Cheers';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -83,23 +83,16 @@ function TtsConfigsEditRulePage(props: Props) {
       </div>
 
       <br />
-
-      <div className="content">
-        <TwitchEventRuleElement 
-          rule={twitchEventRule} 
-          hideButtons={true} 
-          allTtsModelsByToken={props.allTtsModelsByToken}
-          />
-      </div>
-
       <br />
 
       <form onSubmit={handleFormSubmit}>
 
+        <h2 className="title is-4">Match on</h2>
+
         <div className="field">
-          <label className="label">Match on</label>
+          <label className="label">Type</label>
           <div className="control">
-            <div className="select is-large is-fullwidth">
+            <div className="select is-medium is-fullwidth">
               <select>
                 <option>Bits Spend Threshold</option>
                 <option>Cheermote Name (Exact Match)</option>
@@ -111,6 +104,23 @@ function TtsConfigsEditRulePage(props: Props) {
 
         <ExactCheersForm />
 
+        <br />
+        <br />
+
+        <h2 className="title is-4">TTS Behavior</h2>
+        <p>Todo</p>
+        <br />
+        <br />
+
+        <h2 className="title is-4">Final Rule</h2>
+        <div className="content">
+          <TwitchEventRuleElement 
+            rule={twitchEventRule} 
+            hideButtons={true} 
+            allTtsModelsByToken={props.allTtsModelsByToken}
+            />
+        </div>
+
 
 
         <button className="button is-large is-fullwidth is-primary">
@@ -133,25 +143,137 @@ interface ExactCheersFormProps {
 };
 
 function ExactCheersForm(props: ExactCheersFormProps) {
-  const [cheerType, setCheerType] = useState<string|undefined>();
+  const [cheerPrefix, setCheerPrefix] = useState<string|undefined>();
+  const [bitsValue, setBitsValue] = useState<number>(1);
+  const [manualCheerValue, setManualCheerValue] = useState<string>("");
+
+  const updateCheerPrefix = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
+    const value = (ev.target as HTMLSelectElement).value;
+    setCheerPrefix(value);
+    calcuateFieldValue(value, bitsValue);
+    return true;
+  }
+
+  const updateBitsValue = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
+    const value = (ev.target as HTMLSelectElement).value;
+    const numericValue = parseInt(value);
+    console.log(value, numericValue);
+    setBitsValue(numericValue);
+    calcuateFieldValue(cheerPrefix, numericValue);
+    return true;
+  }
+
+  const updateTextCheerValue = (ev: React.FormEvent<HTMLInputElement>) : boolean => {
+    const value = (ev.target as HTMLInputElement).value;
+    setManualCheerValue(value);
+    return true;
+  }
+
+  const calcuateFieldValue = (prefix: string|undefined, bits: number) => {
+    if (prefix === undefined) {
+      return;
+    }
+    //if (!cheerPrefix || !bitsValue || !!manualCheerValue) {
+    //  return;
+    //}
+    const cheerValue = `${prefix}${bits}`;
+    setManualCheerValue(cheerValue);
+  }
+
+
+  let secondSelect = <></>;
+
+  if (!!cheerPrefix) {
+    secondSelect = (
+      <>
+        <div>
+          <div className="field">
+            <label className="label">Full cheer name (includes bit value)</label>
+            <div className="control">
+              <div className="select is-medium is-fullwidth">
+                <select onChange={updateBitsValue}>
+                  {CHEER_BIT_LEVELS.map(level => {
+                    return (
+                      <option
+                        key={`option-${cheerPrefix}-${level}`}
+                        value={level}
+                      >{cheerPrefix}{level}</option>
+                    );
+                  })}
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
 
   return (
     <>
       <div className="field">
-        <label className="label">Cheer type</label>
-        <div className="control">
-          <div className="select is-large is-fullwidth">
-            <select>
-              {CHEERS.map(cheerName => {
-                return <option>{cheerName}</option>
+      </div>
+
+
+      <div className="field is-grouped">
+        <p className="control">
+        <label className="label">Pick the cheer</label>
+          <div className="select is-medium">
+            <select onChange={updateCheerPrefix}>
+              <option
+                key={`option-*`}
+                value=""
+              >Select cheer...</option>
+              {CHEER_PREFIXES.map(cheerPrefix => {
+                return (
+                  <option
+                    key={`option-${cheerPrefix}`}
+                    value={cheerPrefix}
+                  >{cheerPrefix}</option>
+                );
               })}
             </select>
           </div>
-        </div>
+        </p>
+        <p className="control">
+
+          <label className="label">Then the bit value</label>
+          <div className="control">
+            <div className="select is-medium">
+              <select onChange={updateBitsValue}>
+                {CHEER_BIT_LEVELS.map(level => {
+                  return (
+                    <option
+                      key={`option-${cheerPrefix}-${level}`}
+                      value={level}
+                    >{level}</option>
+                  );
+                })}
+              </select>
+            </div>
+          </div>
+        </p>
+
+        <p className="control is-expanded">
+          <label className="label">To match against this (or set something custom)</label>
+          <p className="control has-icons-left is-large">
+            <input 
+              value={manualCheerValue}
+              onChange={updateTextCheerValue}
+              className="input is-medium is-primary" 
+              type="text" 
+              placeholder="Cheermote full name (including bit value)" />
+            <span className="icon is-small is-left">
+              <FontAwesomeIcon icon={faGem} />
+            </span>
+          </p>
+        </p>
       </div>
 
     </>
   )
 }
 
+
+
 export { TtsConfigsEditRulePage }

packages/storyteller/src/twitch/Cheers.ts

@@ -2,7 +2,7 @@
 
 /// This list seems pretty comprehensive
 /// https://github.com/nossebro/TwitchPubSubMirror/blob/master/TwitchPubSubMirror_StreamlabsSystem.py
-export const CHEERS : string[] = [
+export const CHEER_PREFIXES : string[] = [
     "Cheer",
     "DoodleCheer",
     "BibleThump",
@@ -35,3 +35,6 @@ export const CHEERS : string[] = [
     "Muxy",
     "HolidayCheer"
 ];
+
+/// Levels of cheering
+export const CHEER_BIT_LEVELS = [1, 100, 1000, 5000, 10000];