From 099ffdf60c85f3e83f7ada70b0adb49d5092cfe3 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Wed, 23 Feb 2022 03:47:37 -0500 Subject: [PATCH] wip --- .../tts_configs/TtsConfigsEditRulePage.tsx | 21 ++- ...sx => BitsCheermoteNameExactMatchForm.tsx} | 20 +-- .../BitsCheermotePrefixSpendThresholdForm.tsx | 168 ++++++++++++++++++ .../components/BitsSpendThresholdForm.tsx | 8 +- 4 files changed, 200 insertions(+), 17 deletions(-) rename packages/storyteller/src/pages/tts_configs/components/{ExactCheerMatchForm.tsx => BitsCheermoteNameExactMatchForm.tsx} (88%) create mode 100644 packages/storyteller/src/pages/tts_configs/components/BitsCheermotePrefixSpendThresholdForm.tsx diff --git a/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx b/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx index 047b615def..a7ad262940 100644 --- a/packages/storyteller/src/pages/tts_configs/TtsConfigsEditRulePage.tsx +++ b/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) {
- Exact Cheer Match +
- + Exact Cheer Match
+
+ +
+ +
Bits Spend Threshold +

+
+ Cheer Prefix + Spend Threshold +
+
+ +
+ +

diff --git a/packages/storyteller/src/pages/tts_configs/components/ExactCheerMatchForm.tsx b/packages/storyteller/src/pages/tts_configs/components/BitsCheermoteNameExactMatchForm.tsx similarity index 88% rename from packages/storyteller/src/pages/tts_configs/components/ExactCheerMatchForm.tsx rename to packages/storyteller/src/pages/tts_configs/components/BitsCheermoteNameExactMatchForm.tsx index e38c5c3bb7..60df279ba5 100644 --- a/packages/storyteller/src/pages/tts_configs/components/ExactCheerMatchForm.tsx +++ b/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(); const [bitsValue, setBitsValue] = useState(1); const [manualCheerValue, setManualCheerValue] = useState(""); @@ -44,8 +44,8 @@ function ExactCheerMatchForm(props: ExactCheerMatchFormProps) { return ( <>
-

- +

+
-

-

+

+

-

+
) } -export { ExactCheerMatchForm } +export { BitsCheermoteNameExactMatchForm } diff --git a/packages/storyteller/src/pages/tts_configs/components/BitsCheermotePrefixSpendThresholdForm.tsx b/packages/storyteller/src/pages/tts_configs/components/BitsCheermotePrefixSpendThresholdForm.tsx new file mode 100644 index 0000000000..29fdb01c5c --- /dev/null +++ b/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(); + const [customCheerPrefix, setCustomCheerPrefix] = useState(""); + + const [bitsValue, setBitsValue] = useState(1); + const [customBitsValue, setCustomBitsValue] = useState(1); + + const updateCheerPrefix = (ev: React.FormEvent) : boolean => { + const value = (ev.target as HTMLSelectElement).value; + setCheerPrefix(value); + recalcuateFieldValue(value, bitsValue); + return true; + } + + const updateBitsValue = (ev: React.FormEvent) : boolean => { + const value = (ev.target as HTMLSelectElement).value; + const numericValue = parseInt(value); + setBitsValue(numericValue); + recalcuateFieldValue(cheerPrefix, numericValue); + return true; + } + + const updateTextCheerValue = (ev: React.FormEvent) : 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) : boolean => { + const value = (ev.target as HTMLSelectElement).value; + const numericValue = parseInt(value); + setBitsValue(numericValue); + setCustomBitsValue(numericValue); + return true; + } + const handleCustomBitsValueUpdate = (ev: React.FormEvent) : boolean => { + const value = (ev.target as HTMLInputElement).value; + const numericValue = parseInt(value); + setCustomBitsValue(numericValue); + return true; + } + + + return ( + <> +
+
+ This rule type requires both the cheermote + to match and the bits spent to be equal or greater than the amount specified. +
+
+ +

Cheermote matching

+ +
+
+ +
+ +
+
+
+ +

+ + + + +

+
+
+ +
+
+ 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). +
+
+ + +
+

Bits spent

+ +
+
+ +
+
+ +
+
+
+
+ +

+ + + + +

+
+
+
+
+ Remember that all Cheermotes in a single message add up, + eg. “Cheer100 + Cheer100 + Party100” is 300 bits. + A custom amount should give you flexibility to charge, say, 300 or 500 bits. + Or 420. Whatever you want. +
+
+ + + ) +} + +export { BitsCheermotePrefixSpendThresholdForm } diff --git a/packages/storyteller/src/pages/tts_configs/components/BitsSpendThresholdForm.tsx b/packages/storyteller/src/pages/tts_configs/components/BitsSpendThresholdForm.tsx index b3e76b79ab..ec807a977f 100644 --- a/packages/storyteller/src/pages/tts_configs/components/BitsSpendThresholdForm.tsx +++ b/packages/storyteller/src/pages/tts_configs/components/BitsSpendThresholdForm.tsx @@ -36,7 +36,7 @@ function BitsSpendThresholdForm(props: BitsSpendThresholdFormProps) { return ( <>
-

+

@@ -52,8 +52,8 @@ function BitsSpendThresholdForm(props: BitsSpendThresholdFormProps) {
-

-

+

+

-

+