Sound Effects 🔊
{sfx.map((soundEffect: SoundEffect, index: number) => (
-
+ (soundEffect.target === null) ? (
+
) : ""
))}
{isProcessing && (
@@ -355,6 +355,212 @@ function CharacterStateSfxEditor({ state }: { state: CharacterState }) {
);
}
+/** Editor for users to specify sound effects for certain characters */
+function CharacterStateTargetEditor({ state }: { state: CharacterState }) {
+ const { character, setCharacter } = useContext(CharacterContext);
+ const [targets, setTargets] = useState(0);
+
+ // @ts-expect-error
+ let sfx = character.stateSoundEffects[state.id];
+ if (targets == 0) {
+ if (sfx.length > 1) setTargets(sfx.length - 1)
+ }
+
+ const changeTargets = (amount: number) => {
+ let prevTarget = targets;
+ let newTarget = targets + amount;
+ if (newTarget >= 0 && newTarget < 50) setTargets(newTarget);
+ else return;
+
+ let temp: SoundEffect = {
+ name: "Targeted SFX",
+ base64EncodedAudio: "",
+ target: "Target Name"
+ };
+ let newCharacter = character;
+ for (let i = prevTarget; i < newTarget; i++) {
+ // @ts-expect-error
+ newCharacter.stateSoundEffects[state.id].push(temp);
+ }
+ for (let i = prevTarget; i > newTarget; i--) {
+ // @ts-expect-error
+ newCharacter.stateSoundEffects[state.id].pop();
+ }
+ setCharacter(newCharacter);
+ }
+
+ return (
+
+
Targeted Sound Effects 🎯
+
+
# of targets: {targets}
+
+ { changeTargets(-1) }} className="button is-small">➖
+ { changeTargets(1) }} className="button is-small">➕
+
+
+
+ {sfx.map((soundEffect: SoundEffect, index: number) => (
+ soundEffect.target != null ?
+
+
+ );
+}
+
+/** Editor for users to provide the audio clips and target character for a targeted sound effect */
+function CharacterStateTargetedSFXEditor({ state, target, targetName }: { state: CharacterState, target: number, targetName: string }) {
+ const { character, setCharacter } = useContext(CharacterContext);
+ const audioInputRef = useRef
(null);
+
+ const [isProcessing, setIsProcessing] = useState(false);
+
+ if (!(state.id in character.stateSoundEffects)) {
+ return null;
+ }
+
+ const handleProcessAudio = (
+ b64: string,
+ sfxName: string,
+ mimetype: "audio/mpeg" | "audio/ogg"
+ ) => {
+ setIsProcessing(true);
+ processAudio(b64, mimetype)
+ .then((processB64) => {
+ let newCharacter = character;
+ // @ts-expect-error
+ newCharacter.stateSoundEffects[state.id][target + 1] = {
+ name: sfxName?.trim(),
+ base64EncodedAudio: processB64,
+ // @ts-expect-error
+ target: character.stateSoundEffects[state.id][target + 1].target
+ }
+
+ setCharacter(newCharacter);
+ })
+ .catch((err) => {
+ alert(
+ "There was an error uploading and/or processing the audio. Please try again later!"
+ );
+ console.error(err);
+ })
+ .finally(() => {
+ setIsProcessing(false);
+ });
+ };
+
+ const handleSfxRecorded = (b64Url: string) => {
+ const sfxName = prompt("What's the name of the sound effect?");
+ if (!sfxName) return;
+
+ const b64 = b64Url.slice(b64Url.indexOf("base64,") + 7); // Remove URL prefix
+
+ handleProcessAudio(b64, sfxName, "audio/ogg");
+ };
+
+ const handleSfxUpload: React.ChangeEventHandler = (ev) => {
+ if (ev.target.files?.length) {
+ const file = ev.target.files[0];
+
+ let sfxName = prompt(
+ `What's the name of the sound effect? (default: ${file.name.replace(
+ ".mp3",
+ ""
+ )})`
+ );
+
+ if (!sfxName || sfxName.trim().length === 0) {
+ sfxName = file.name.replace(".mp3", "");
+ }
+
+ fileToBase64Url(file).then((b64MP3Url) => {
+ const b64 = b64MP3Url.replace("data:audio/mpeg;base64,", "");
+ handleProcessAudio(b64, sfxName!, "audio/mpeg");
+ });
+ }
+ };
+
+ // @ts-expect-error
+ const sfx = character.stateSoundEffects[state.id][target];
+
+ const handleClearSfx = () => {
+ setCharacter({
+ ...character,
+ stateSoundEffects: {
+ ...character.stateSoundEffects,
+ [state.id]: [],
+ },
+ });
+ if (audioInputRef.current) {
+ audioInputRef.current.value = "";
+ }
+ };
+
+ return (
+
+
Target 🏹
+
+
+
+
+
+
+ {isProcessing && (
+
+ )}
+
+
+
+
+
+ 📁
+ Upload MP3
+
+
+
+
+
+ {sfx.length > 0 && (
+
+ Clear
+
+ )}
+
+
+
+
);
@@ -392,7 +601,7 @@ export function CharacterStatesStage() {
character.stateAnimations[state.id].length > 0 &&
(state.id in character.stateSoundEffects
? // @ts-expect-error
- character.stateSoundEffects[state.id].length > 0
+ character.stateSoundEffects[state.id].length > 0
: true);
return (
diff --git a/src/pages/IndexPage/IndexPage.tsx b/src/pages/IndexPage/IndexPage.tsx
index 5a492fc..223416f 100644
--- a/src/pages/IndexPage/IndexPage.tsx
+++ b/src/pages/IndexPage/IndexPage.tsx
@@ -1,7 +1,7 @@
import { Link } from "react-router-dom";
import HelpButton from "../../components/HelpButton";
-import thing from "../../assets/light_punch_pose_frame_0.png";
+import logo from "../../assets/img/light_punch_pose_frame_0.png";
import "./IndexPage.scss";
@@ -47,7 +47,7 @@ export function IndexPage() {