🚧 Add warnings for incompatible plugins.

Author: SnaveSutit

src/components/incompatabilityPopup.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { closeIncompatabilityPopup } from '../interface/popup/incompatabilityPopup'
+	import { translate } from '../util/translation'
+
+	export let plugins: BBPlugin[]
+
+	let disabledPlugins: BBPlugin[] = []
+
+	function disablePlugin(plugin: BBPlugin) {
+		plugin.toggleDisabled()
+		plugins.remove(plugin)
+		disabledPlugins.push(plugin)
+		disabledPlugins = disabledPlugins
+		if (plugins.length === 0) {
+			closeIncompatabilityPopup()
+		}
+	}
+</script>
+
+<p>
+	{@html translate('popup.incompatability_popup.description').replaceAll('\n', '<br />')}
+</p>
+<ul>
+	{#each plugins as plugin}
+		<li>
+			{#if plugin.hasImageIcon()}
+				<img src={plugin.getIcon()} alt="" />
+			{/if}
+			{plugin.title}
+			{#key disabledPlugins}
+				{#if !disabledPlugins.includes(plugin)}
+					<button on:click={() => disablePlugin(plugin)}>
+						<i class="material-icons icon">bedtime</i>
+						{translate('popup.incompatability_popup.disable_button')}
+					</button>
+				{/if}
+			{/key}
+		</li>
+	{/each}
+</ul>
+
+<style>
+	ul {
+		margin-top: 1em;
+	}
+	li {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		font-size: 24px;
+		margin-bottom: 16px;
+	}
+	img {
+		width: 64px;
+		margin-right: 16px;
+	}
+	button {
+		margin-left: auto;
+		font-size: 16px;
+		height: 64px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	i {
+		font-size: 32px;
+		max-width: min-content;
+	}
+</style>

src/components/incompatiblePluginNotice.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { isIncompatiblePlugin } from '../interface/popup/incompatabilityPopup'
+	import { Valuable } from '../util/stores'
+	import { translate } from '../util/translation'
+
+	export let selectedPlugin: Valuable<BBPlugin | null>
+</script>
+
+{#if $selectedPlugin && isIncompatiblePlugin($selectedPlugin)}
+	<div>
+		<i class="material-icons icon">warning</i>
+		{translate('dialog.incompatability_notice')}
+	</div>
+{/if}
+
+<style>
+	div {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		background-color: var(--color-warning);
+		color: var(--color-accent_text);
+		padding: 4px 8px;
+		width: fit-content;
+		border-radius: 6px;
+		font-weight: 600;
+		margin-top: 8px;
+	}
+</style>

src/index.ts

@@ -44,6 +44,7 @@ import { openInstallPopup } from './interface/popup/installed'
 import { cleanupExportedFiles } from './systems/cleaner'
 import mcbFiles from './systems/datapackCompiler/mcbFiles'
 import { openChangelogDialog } from './interface/changelogDialog'
+import { checkForIncompatabilities } from './interface/popup/incompatabilityPopup'
 
 // @ts-ignore
 globalThis.AnimatedJava = {
@@ -87,10 +88,13 @@ globalThis.AnimatedJava = {
 		cleanupExportedFiles,
 		mcbFiles,
 		openChangelogDialog,
+		checkForIncompatabilities,
 	},
 }
 
 requestAnimationFrame(() => {
+	if (checkForIncompatabilities()) return
+
 	const lastVersion = localStorage.getItem('animated-java-last-version')
 	if (lastVersion !== PACKAGE.version) {
 		localStorage.setItem('animated-java-last-version', PACKAGE.version)

src/interface/index.ts

@@ -17,6 +17,11 @@ import './panel/vanillaBlockDisplayElement'
 import './panel/vanillaItemDisplayElement'
 import './panel/variants'
 
+import './popup/animatedJavaLoading'
+import './popup/blueprintLoading'
+import './popup/incompatabilityPopup'
+import './popup/installed'
+
 import './importAJModelLoader'
 import './animatedJavaBarItem'
 import './keyframeEasings'

src/interface/popup/incompatabilityPopup.ts

@@ -0,0 +1,47 @@
+import IncompatabilityPopup from '../../components/incompatabilityPopup.svelte'
+import { PACKAGE } from '../../constants'
+import { SvelteDialog } from '../../util/svelteDialog'
+import { translate } from '../../util/translation'
+
+const INCOMPATABLE_PLUGINS = ['animation_utils']
+
+let currentInstance: SvelteDialog<IncompatabilityPopup, any> | null = null
+
+export function openIncompatabilityPopup(plugins: BBPlugin[]) {
+	currentInstance = new SvelteDialog({
+		id: `${PACKAGE.name}:incompatabilityPopup`,
+		title: translate('popup.incompatability_popup.title'),
+		width: 700,
+		component: IncompatabilityPopup,
+		props: { plugins },
+		preventKeybinds: true,
+		buttons: [],
+	}).show()
+}
+
+export function closeIncompatabilityPopup() {
+	if (currentInstance) {
+		currentInstance.hide()
+		currentInstance.delete()
+		currentInstance = null
+	}
+}
+
+export function isIncompatiblePlugin(plugin: BBPlugin): boolean {
+	return INCOMPATABLE_PLUGINS.includes(plugin.id)
+}
+
+export function checkForIncompatabilities() {
+	const plugins: BBPlugin[] = []
+	for (const plugin of Plugins.all) {
+		if (!plugin.installed || plugin.disabled || !isIncompatiblePlugin(plugin)) {
+			continue
+		}
+		plugins.push(plugin)
+	}
+	if (plugins.length > 0) {
+		openIncompatabilityPopup(plugins)
+		return true
+	}
+	return false
+}

src/lang/en.yml

@@ -22,8 +22,15 @@ animated_java.popup.loading.offline: |-
     Animated Java Failed to Connect!
     Some features may be unavailable.
 
-animated_java.dialog.installed_popup.title: Thank you for installing!
-animated_java.dialog.installed_popup.close_button: Let's Get Animating!
+animated_java.popup.installed_popup.title: Thank you for installing!
+animated_java.popup.installed_popup.close_button: Let's Get Animating!
+
+animated_java.popup.incompatability_popup.title: Incompatible Plugin Detected!
+animated_java.popup.incompatability_popup.description: |-
+    Animated Java has detected incompatible plugin(s)!
+    Please disable / uninstall the following plugin(s) and restart Blockbench to use Animated Java:
+animated_java.popup.incompatability_popup.disable_button: Disable Plugin
+animated_java.dialog.incompatability_notice: This plugin is not compatible with Animated Java!
 
 ### Dialogs
 animated_java.dialog.reset: Reset to Default

src/mods/index.ts

@@ -28,3 +28,4 @@ import './saveProjectAsActionMod'
 import './showDefaultPoseMod'
 import './variantPreviewCubeFaceMod'
 import './cameraNameMod'
+import './pluginsDialogMod'

src/mods/pluginsDialogMod.ts

@@ -0,0 +1,37 @@
+import IncompatiblePluginNotice from '../components/incompatiblePluginNotice.svelte'
+import { PACKAGE } from '../constants'
+import { injectSvelteCompomponentMod } from '../util/injectSvelteComponent'
+import { createBlockbenchMod } from '../util/moddingTools'
+import { Valuable } from '../util/stores'
+
+const SELECTED_PLUGIN = new Valuable<BBPlugin | null>(null)
+
+injectSvelteCompomponentMod({
+	component: IncompatiblePluginNotice,
+	props: {
+		selectedPlugin: SELECTED_PLUGIN,
+	},
+	elementSelector() {
+		return document.querySelector('.plugin_browser_page_header')
+	},
+})
+
+createBlockbenchMod(
+	`${PACKAGE.name}:pluginsDialogMod`,
+	{
+		originalSelect: Plugins.dialog.component.methods.selectPlugin,
+	},
+	context => {
+		Plugins.dialog.component.methods.selectPlugin = function (this, plugin: BBPlugin) {
+			const result = context.originalSelect.call(this, plugin)
+			SELECTED_PLUGIN.set(plugin)
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+			return result
+		}
+
+		return context
+	},
+	context => {
+		Plugins.dialog.component.methods.selectPlugin = context.originalSelect
+	}
+)