wip

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

@@ -9,8 +9,9 @@ import { faAngleLeft, 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 { ExactCheerMatchForm } from './components/ExactCheerMatchForm';
+import { BitsCheermoteNameExactMatchForm } from './components/BitsCheermoteNameExactMatchForm';
 import { BitsSpendThresholdForm } from './components/BitsSpendThresholdForm';
+import { BitsCheermotePrefixSpendThresholdForm } from './components/BitsCheermotePrefixSpendThresholdForm';
 
 interface Props {
   sessionWrapper: SessionWrapper,
@@ -104,15 +105,29 @@ function TtsConfigsEditRulePage(props: Props) {
         </div>
 
         <hr />
-        <strong>Exact Cheer Match</strong>
+
         <br />
-        <ExactCheerMatchForm />
+        <strong>Exact Cheer Match</strong>
         <hr />
+        <br />
+        <BitsCheermoteNameExactMatchForm />
+        <hr />
+
+        <br />
         <strong>Bits Spend Threshold</strong>
+        <hr />
         <br />
         <BitsSpendThresholdForm />
         <hr />
 
+        <br />
+        <strong>Cheer Prefix + Spend Threshold</strong>
+        <hr />
+        <br />
+        <BitsCheermotePrefixSpendThresholdForm />
+        <hr />
+
+
         <br />
         <br />
 

packages/storyteller/src/pages/tts_configs/components/BitsCheermoteNameExactMatchForm.tsx

@@ -3,10 +3,10 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faGem } from '@fortawesome/free-solid-svg-icons';
 import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../twitch/Cheers';
 
-interface ExactCheerMatchFormProps {
+interface BitsCheermoteNameExactMatchProps {
 };
 
-function ExactCheerMatchForm(props: ExactCheerMatchFormProps) {
+function BitsCheermoteNameExactMatchForm(props: BitsCheermoteNameExactMatchProps) {
   const [cheerPrefix, setCheerPrefix] = useState<string|undefined>();
   const [bitsValue, setBitsValue] = useState<number>(1);
   const [manualCheerValue, setManualCheerValue] = useState<string>("");
@@ -44,8 +44,8 @@ function ExactCheerMatchForm(props: ExactCheerMatchFormProps) {
   return (
     <>
       <div className="field is-grouped">
-        <p className="control">
-        <label className="label">Pick the cheer</label>
+        <div className="control">
+          <label className="label">Pick the cheer</label>
           <div className="select is-medium">
             <select onChange={updateCheerPrefix}>
               <option
@@ -62,8 +62,8 @@ function ExactCheerMatchForm(props: ExactCheerMatchFormProps) {
               })}
             </select>
           </div>
-        </p>
-        <p className="control">
+        </div>
+        <div className="control">
           <label className="label">Then the bit value</label>
           <div className="control">
             <div className="select is-medium">
@@ -79,8 +79,8 @@ function ExactCheerMatchForm(props: ExactCheerMatchFormProps) {
               </select>
             </div>
           </div>
-        </p>
-        <p className="control is-expanded">
+        </div>
+        <div 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 
@@ -93,10 +93,10 @@ function ExactCheerMatchForm(props: ExactCheerMatchFormProps) {
               <FontAwesomeIcon icon={faGem} />
             </span>
           </p>
-        </p>
+        </div>
       </div>
     </>
   )
 }
 
-export { ExactCheerMatchForm }
+export { BitsCheermoteNameExactMatchForm }

packages/storyteller/src/pages/tts_configs/components/BitsCheermotePrefixSpendThresholdForm.tsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGem } from '@fortawesome/free-solid-svg-icons';
+import { CHEER_BIT_LEVELS, CHEER_PREFIXES } from '../../../twitch/Cheers';
+
+interface BitsCheermotePrefixSpendThresholdProps {
+};
+
+function BitsCheermotePrefixSpendThresholdForm(props: BitsCheermotePrefixSpendThresholdProps) {
+  const [cheerPrefix, setCheerPrefix] = useState<string|undefined>();
+  const [customCheerPrefix, setCustomCheerPrefix] = useState<string>("");
+
+  const [bitsValue, setBitsValue] = useState<number>(1);
+  const [customBitsValue, setCustomBitsValue] = useState<number>(1);
+
+  const updateCheerPrefix = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
+    const value = (ev.target as HTMLSelectElement).value;
+    setCheerPrefix(value);
+    recalcuateFieldValue(value, bitsValue);
+    return true;
+  }
+
+  const updateBitsValue = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
+    const value = (ev.target as HTMLSelectElement).value;
+    const numericValue = parseInt(value);
+    setBitsValue(numericValue);
+    recalcuateFieldValue(cheerPrefix, numericValue);
+    return true;
+  }
+
+  const updateTextCheerValue = (ev: React.FormEvent<HTMLInputElement>) : boolean => {
+    const value = (ev.target as HTMLInputElement).value;
+    setCustomCheerPrefix(value);
+    return true;
+  }
+
+  // When the dropdowns are used, replace any manual text entry.
+  const recalcuateFieldValue = (prefix: string|undefined, bits: number) => {
+    if (prefix === undefined) {
+      return;
+    }
+    const cheerValue = `${prefix}`;
+    setCustomCheerPrefix(cheerValue);
+  }
+
+  const handleBitSelect = (ev: React.FormEvent<HTMLSelectElement>) : boolean => {
+    const value = (ev.target as HTMLSelectElement).value;
+    const numericValue = parseInt(value);
+    setBitsValue(numericValue);
+    setCustomBitsValue(numericValue);
+    return true;
+  }
+  const handleCustomBitsValueUpdate = (ev: React.FormEvent<HTMLInputElement>) : boolean => {
+    const value = (ev.target as HTMLInputElement).value;
+    const numericValue = parseInt(value);
+    setCustomBitsValue(numericValue);
+    return true;
+  }
+
+
+  return (
+    <>
+      <article className="message is-warning">
+        <div className="message-body">
+          This rule type requires <strong>both</strong> the cheermote 
+          to match and the bits spent to be equal or greater than the amount specified.
+        </div>
+      </article>
+
+      <h1 className="title is-5">Cheermote matching</h1>
+      
+      <div className="field is-grouped">
+        <div className="control">
+          <label className="label">Pick the cheer prefix</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>
+        <div 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={customCheerPrefix}
+              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>
+        </div>
+      </div>
+
+      <article className="message">
+        <div className="message-body">
+          The "Cheer prefix" can be an actual cheer prefix, such as "SeemsGood", but it can also be an arbitrary
+          string value. So if you make it "ManBearPig", that will be searched for in cheers. 
+
+          Cheermotes will be removed from the words used in TTS, but currently custom strings will not (though 
+          this may change in the future).
+        </div>
+      </article>
+
+
+      <hr />
+      <h1 className="title is-5">Bits spent</h1>
+
+      <div className="field is-grouped">
+        <div className="control">
+          <label className="label">Preset thresholds</label>
+          <div className="control">
+            <div className="select is-medium">
+              <select onChange={handleBitSelect}>
+                {CHEER_BIT_LEVELS.map(level => {
+                  return (
+                    <option
+                      key={`option-${level}`}
+                      value={level}
+                    >Spend at least {level} bits</option>
+                  );
+                })}
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="control is-expanded">
+          <label className="label">Or a custom minimum amount.</label>
+          <p className="control has-icons-left is-large">
+            <input 
+              value={customBitsValue}
+              onChange={handleCustomBitsValueUpdate}
+              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>
+        </div>
+      </div>
+      <article className="message">
+        <div className="message-body">
+          Remember that all Cheermotes in a single message add up, 
+          eg. <em>&ldquo;Cheer100 + Cheer100 + Party100&rdquo;</em> is 300 bits. 
+          A custom amount should give you flexibility to charge, say, 300 or 500 bits. 
+          Or 420. Whatever you want.
+        </div>
+      </article>
+
+    </>
+  )
+}
+
+export { BitsCheermotePrefixSpendThresholdForm }

packages/storyteller/src/pages/tts_configs/components/BitsSpendThresholdForm.tsx

@@ -36,7 +36,7 @@ function BitsSpendThresholdForm(props: BitsSpendThresholdFormProps) {
   return (
     <>
       <div className="field is-grouped">
-        <p className="control">
+        <div className="control">
           <label className="label">Preset thresholds</label>
           <div className="control">
             <div className="select is-medium">
@@ -52,8 +52,8 @@ function BitsSpendThresholdForm(props: BitsSpendThresholdFormProps) {
               </select>
             </div>
           </div>
-        </p>
-        <p className="control is-expanded">
+        </div>
+        <div className="control is-expanded">
           <label className="label">Or a custom minimum amount.</label>
           <p className="control has-icons-left is-large">
             <input 
@@ -66,7 +66,7 @@ function BitsSpendThresholdForm(props: BitsSpendThresholdFormProps) {
               <FontAwesomeIcon icon={faGem} />
             </span>
           </p>
-        </p>
+        </div>
       </div>
       <article className="message">
         <div className="message-body">