From 7d32faf1381a85535a7cbfc686b53689ef04bc10 Mon Sep 17 00:00:00 2001 From: Rebbecca Bishop Date: Mon, 2 Oct 2023 10:46:38 -0500 Subject: [PATCH] Fixed Documentation (#12) --- docs/Adding-animation-to-plugin-source.md | 121 +++++++--------------- src/Animations.ts | 1 + src/main.ts | 2 + 3 files changed, 39 insertions(+), 85 deletions(-) diff --git a/docs/Adding-animation-to-plugin-source.md b/docs/Adding-animation-to-plugin-source.md index b5c0f1a..5d98431 100644 --- a/docs/Adding-animation-to-plugin-source.md +++ b/docs/Adding-animation-to-plugin-source.md @@ -8,7 +8,32 @@ For this pages examples, I will use the following popular character: Pikachu. > 👿 Please DO NOT add a Pikachu animation to a public copy of this plugin. -## 1. Adding quotes to QuoteManager.ts +## 1. Update Settings.ts + +Now we need to make it so that you can toggle which character to use in your settings. + +### AnimationSourceType + +In the animation source type section, we need to define the name of the character for the animations we have loaded thus far. + +**Before**: + +```ts +export enum AnimationSourceType { + GEMMY = 'gemmy', + DRAKE = 'drake', +``` + +**After**: + +```ts +export enum AnimationSourceType { + GEMMY = 'gemmy', + DRAKE = 'drake', + PIKACHU = 'pikachu', +``` + +## 2. Adding quotes to QuoteManager.ts > ⚠ If you have not already added your new character's quote lines in [Quotes](Quotes.ts), do that first. You can find instructions in [Adding quotes to Granite](Adding-quotes-to-Granite.md). @@ -74,7 +99,6 @@ In the QuoteManager class, you will want to add your new character to the quote [GraniteMode.IDLE]: this.getIdleQuotes(DRAKE_EXCLUSIVE_QUOTES), [GraniteMode.WRITING]: this.getWritingQuotes(DRAKE_EXCLUSIVE_QUOTES), }, - }; [AnimationSourceType.PIKACHU]: { [GraniteMode.IDLE]: this.getIdleQuotes(PIKACHU_EXCLUSIVE_QUOTES), [GraniteMode.WRITING]: this.getWritingQuotes(PIKACHU_EXCLUSIVE_QUOTES), @@ -82,13 +106,13 @@ In the QuoteManager class, you will want to add your new character to the quote }; ``` -## 2. Import your animations into Animations.ts +## 3. Import your animations into Animations.ts To add your newly created animations into Granite to be rendered, we need to tell the plugin to process the gifs. ### Imports -Under the import section, we need to map a value to the animations. +Under the import section, we need to import the animations under unique names. **Before**: ```ts @@ -105,8 +129,8 @@ import DISAPPOINT_IMG_DRAKE from '../animations/drake/drake_disappoint.gif'; After: ```ts // Draconic Animations -import EMERGE_MOTION_DRAKE from '../animations/PIKACHU/PIKACHU_emerge.gif'; -import POP_MOTION_DRAKE from '../animations/PIKACHU/PIKACHU_pop.gif'; +import EMERGE_MOTION_DRAKE from '../animations/drake/drake_emerge.gif'; +import POP_MOTION_DRAKE from '../animations/drake/drake_pop.gif'; import DISAPPEAR_MOTION_DRAKE from '../animations/drake/drake_disappear.gif'; import ANGRY_MOTION_DRAKE from '../animations/drake/drake_angry.gif'; import LOOK_MOTION_DRAKE from '../animations/drake/drake_lookAround.gif'; @@ -114,9 +138,9 @@ import IDLE_MOTION_DRAKE from '../animations/drake/drake_idle.gif'; import DISAPPOINT_IMG_DRAKE from '../animations/drake/drake_disappoint.gif'; // Pikachu Animations -import EMERGE_MOTION_PIKACHU from '../animations/drake/drake_emerge.gif'; -import POP_MOTION_PIKACHU from '../animations/drake/drake_pop.gif'; -import DISAPPEAR_MOTION_PIKACHU from '../animations/drake/pikachu_disappear.gif'; +import EMERGE_MOTION_PIKACHU from '../animations/pikachu/pikachu_emerge.gif'; +import POP_MOTION_PIKACHU from '../animations/pikachu/pikachu_pop.gif'; +import DISAPPEAR_MOTION_PIKACHU from '../animations/pikachu/pikachu_disappear.gif'; import ANGRY_MOTION_PIKACHU from '../animations/pikachu/pikachu_angry.gif'; import LOOK_MOTION_PIKACHU from '../animations/pikachu/pikachu_lookAround.gif'; import IDLE_MOTION_PIKACHU from '../animations/pikachu/pikachu_idle.gif'; @@ -125,7 +149,7 @@ import DISAPPOINT_IMG_PIKACHU from '../animations/pikachu/pikachu_disappoint.gif ### Animations class -Within the animations export class, you will want to add your animation map. +Within the animations class, you will want to add your animation map. **Before**: ```ts @@ -144,7 +168,7 @@ public readonly drakeAnimationMap: Record; ### Animation Map -Then further down, define the animation map. +Then further down, define the animation map. This is where you will tell Granite what animation to use for each emote. **Before**: @@ -215,31 +239,6 @@ this.animationSourceMap = { ``` -## 3. Update Settings.ts - -Now we need to make it so that you can toggle which character to use in your settings. - -### AnimationSourceType - -In the animation source type section, we need to define the name of the character for the animations we have loaded thus far. - -**Before**: - -```ts -export enum AnimationSourceType { - GEMMY = 'gemmy', - DRAKE = 'drake', -``` - -**After**: - -```ts -export enum AnimationSourceType { - GEMMY = 'gemmy', - DRAKE = 'drake', - PIKACHU = 'pikachu', -``` - ### PluginSettingsTab Now, we add the new character to the dropdown list. @@ -263,52 +262,4 @@ Now, we add the new character to the dropdown list. .addOption(AnimationSourceType.PIKACHU, 'Pikachu') ``` -## 4. Update Main.ts - -This last update will tell Granite what to load based on the settings provided. - -### Async loadsettings - -Before: - -```ts -async loadSettings() { - this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); - - // migrations - // @ts-ignore - if (this.settings.animationSource === 'dragon') { - this.settings.animationSource = AnimationSourceType.DRAKE; - } - // @ts-ignore - if (this.settings.animationSource === 'original') { - this.settings.animationSource = AnimationSourceType.GEMMY; - } - - await this.saveSettings(); -} -``` - - -```ts -async loadSettings() { - this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); - - // migrations - if (this.settings.animationSource === 'rat') { - this.settings.animationSource = AnimationSourceType.PIKACHU; - } - // @ts-ignore - if (this.settings.animationSource === 'dragon') { - this.settings.animationSource = AnimationSourceType.DRAKE; - } - // @ts-ignore - if (this.settings.animationSource === 'original') { - this.settings.animationSource = AnimationSourceType.GEMMY; - } - - await this.saveSettings(); -} -``` - - +And thats it! diff --git a/src/Animations.ts b/src/Animations.ts index 372cacb..d5b970c 100644 --- a/src/Animations.ts +++ b/src/Animations.ts @@ -60,6 +60,7 @@ export class Animations { // Add your character to the animation map. // Replace name with your new character's name. + // Be mindful of your indentations as comment mode strips them. // // this.nameAnimationMap = { // [AnimationType.EMERGE]: EMERGE_MOTION_NAME, diff --git a/src/main.ts b/src/main.ts index f574f4a..e3214cb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -77,6 +77,8 @@ export default class GranitePlugin extends Plugin { this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData()); // migrations + // These are not needed for new characters + // but are needed for users who used the original animations before they were renamed. // @ts-ignore if (this.settings.animationSource === 'dragon') { this.settings.animationSource = AnimationSourceType.DRAKE;