Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: togglable click gui animations #4504

Draft
wants to merge 1 commit into
base: nextgen
Choose a base branch
from
+76 −41
Draft

feat: togglable click gui animations #4504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src-theme/src/routes/clickgui/ClickGui.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@
import {fade} from "svelte/transition";
import {listen} from "../../integration/ws";
import type {ClickGuiScaleChangeEvent, ScaleFactorChangeEvent} from "../../integration/events";
import {scaleFactor} from "./clickgui_store";
import {animationsEnabled, scaleFactor} from "./clickgui_store";

let categories: GroupedModules = {};
let modules: Module[] = [];
let minecraftScaleFactor = 2;
let clickGuiScaleFactor = 1;

$: {
scaleFactor.set(minecraftScaleFactor * clickGuiScaleFactor);
}
Expand All @@ -28,6 +29,7 @@

const clickGuiSettings = await getModuleSettings("ClickGUI");
clickGuiScaleFactor = clickGuiSettings.value.find(v => v.name === "Scale")?.value as number ?? 1
$animationsEnabled = clickGuiSettings.value.find(v => v.name === "Animations")?.value as boolean ?? true;
});

listen("scaleFactorChange", (e: ScaleFactorChangeEvent) => {
Expand Down
7 changes: 4 additions & 3 deletions src-theme/src/routes/clickgui/Panel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@
import type {ToggleModuleEvent} from "../../integration/events";
import {fly} from "svelte/transition";
import {quintOut} from "svelte/easing";
import {highlightModuleName, maxPanelZIndex} from "./clickgui_store";
import {animationsEnabled, highlightModuleName, maxPanelZIndex} from "./clickgui_store";
import {setItem} from "../../integration/persistent_storage";
import {scaleFactor} from "./clickgui_store";
import {maybe} from "./util";

export let category: string;
export let modules: TModule[];
Expand Down Expand Up @@ -170,8 +171,8 @@
class="panel"
style="left: {panelConfig.left}px; top: {panelConfig.top}px; z-index: {panelConfig.zIndex};"
bind:this={panelElement}
in:fly|global={{y: -30, duration: 200, easing: quintOut}}
out:fly|global={{y: -30, duration: 200, easing: quintOut}}
in:maybe|global={{y: -30, duration: 200, easing: quintOut, fn: fly, animate: $animationsEnabled}}
out:maybe|global={{y: -30, duration: 200, easing: quintOut, fn: fly, animate: $animationsEnabled}}
>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
Expand Down
4 changes: 3 additions & 1 deletion src-theme/src/routes/clickgui/clickgui_store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,4 +12,6 @@ export const maxPanelZIndex: Writable<number> = writable(0);

export const highlightModuleName: Writable<string | null> = writable(null);

export const scaleFactor: Writable<number> = writable(2);
export const scaleFactor: Writable<number> = writable(2);

export const animationsEnabled: Writable<boolean> = writable(true);
9 changes: 6 additions & 3 deletions src-theme/src/routes/clickgui/setting/ChoiceSetting.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import GenericSetting from "./common/GenericSetting.svelte";
import { setItem } from "../../../integration/persistent_storage";
import {convertToSpacedString, spaceSeperatedNames} from "../../../theme/theme_config";
import {animationsEnabled} from "../clickgui_store";

export let setting: ModuleSetting;
export let path: string;
Expand Down Expand Up @@ -40,7 +41,7 @@
<div class="setting">
{#if nestedSettings.length > 0}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="head expand" class:expanded on:contextmenu|preventDefault={toggleExpanded}>
<div class="head expand" class:expanded on:contextmenu|preventDefault={toggleExpanded} class:animate={$animationsEnabled}>
<Dropdown
bind:value={cSetting.active}
{options}
Expand All @@ -50,7 +51,7 @@
<ExpandArrow bind:expanded on:click={() => skipAnimationDelay = true} />
</div>
{:else}
<div class="head">
<div class="head" class:animate={$animationsEnabled}>
<Dropdown
bind:value={cSetting.active}
{options}
Expand All @@ -76,7 +77,9 @@
padding: 7px 0px;

.head {
transition: ease margin-bottom .2s;
&.animate {
transition: ease margin-bottom .2s;
}

&.expand {
display: grid;
Expand Down
8 changes: 6 additions & 2 deletions src-theme/src/routes/clickgui/setting/ConfigurableSetting.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import ExpandArrow from "./common/ExpandArrow.svelte";
import { setItem } from "../../../integration/persistent_storage";
import {convertToSpacedString, spaceSeperatedNames} from "../../../theme/theme_config";
import {animationsEnabled} from "../clickgui_store";

export let setting: ModuleSetting;
export let path: string;
Expand Down Expand Up @@ -35,7 +36,7 @@

<div class="setting">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="head" class:expanded on:contextmenu|preventDefault={toggleExpanded}>
<div class="head" class:expanded on:contextmenu|preventDefault={toggleExpanded} class:animate={$animationsEnabled}>
<div class="title">{$spaceSeperatedNames ? convertToSpacedString(cSetting.name) : cSetting.name}</div>
<ExpandArrow bind:expanded on:click={() => skipAnimationDelay = true} />
</div>
Expand Down Expand Up @@ -65,7 +66,10 @@
.head {
display: flex;
justify-content: space-between;
transition: ease margin-bottom .2s;

&.animate {
transition: ease margin-bottom .2s;
}

&.expanded {
margin-bottom: 10px;
Expand Down
64 changes: 34 additions & 30 deletions src-theme/src/routes/clickgui/setting/TogglableSetting.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import {createEventDispatcher} from "svelte";
import type {
ModuleSetting,
TogglableSetting,
Expand All @@ -8,8 +8,9 @@
import ExpandArrow from "./common/ExpandArrow.svelte";
import GenericSetting from "./common/GenericSetting.svelte";
import Switch from "./common/Switch.svelte";
import { setItem } from "../../../integration/persistent_storage";
import {setItem} from "../../../integration/persistent_storage";
import {convertToSpacedString, spaceSeperatedNames} from "../../../theme/theme_config";
import {animationsEnabled} from "../clickgui_store";

export let setting: ModuleSetting;
export let path: string;
Expand All @@ -29,7 +30,7 @@
$: setItem(thisPath, expanded.toString());

function handleChange() {
setting = { ...cSetting };
setting = {...cSetting};
dispatch("change");
}

Expand All @@ -42,55 +43,58 @@
<div class="setting">
{#if nestedSettings.length > 0}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="head expand" class:expanded on:contextmenu|preventDefault={toggleExpanded}>
<div class="head expand" class:expanded on:contextmenu|preventDefault={toggleExpanded}
class:animate={$animationsEnabled}>
<Switch
name={$spaceSeperatedNames ? convertToSpacedString(cSetting.name) : cSetting.name}
bind:value={enabledSetting.value}
on:change={handleChange}
name={$spaceSeperatedNames ? convertToSpacedString(cSetting.name) : cSetting.name}
bind:value={enabledSetting.value}
on:change={handleChange}
/>
<ExpandArrow bind:expanded on:click={() => skipAnimationDelay = true} />
<ExpandArrow bind:expanded on:click={() => skipAnimationDelay = true}/>
</div>
{:else}
<div class="head" class:expanded>
<div class="head" class:expanded class:animate={$animationsEnabled}>
<Switch
name={$spaceSeperatedNames ? convertToSpacedString(cSetting.name) : cSetting.name}
bind:value={enabledSetting.value}
on:change={handleChange}
name={$spaceSeperatedNames ? convertToSpacedString(cSetting.name) : cSetting.name}
bind:value={enabledSetting.value}
on:change={handleChange}
Comment on lines +58 to +60
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
name={$spaceSeperatedNames ? convertToSpacedString(cSetting.name) : cSetting.name}
bind:value={enabledSetting.value}
on:change={handleChange}
name={$spaceSeperatedNames ? convertToSpacedString(cSetting.name) : cSetting.name}
bind:value={enabledSetting.value}
on:change={handleChange}

Not sure why that extra space is needed...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

code styling

Copy link
Contributor

@DataM0del DataM0del Nov 17, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No? It was already indented enough. Usually you do

<x
    prop1="value"
    prop2="value"
    prop3="value"
    prop4="value"/>

instead of adding an extra 4 spaces.

/>
</div>
{/if}

{#if expanded}
<div class="nested-settings">
{#each nestedSettings as setting (setting.name)}
<GenericSetting {skipAnimationDelay} path={thisPath} bind:setting on:change={handleChange} />
<GenericSetting {skipAnimationDelay} path={thisPath} bind:setting on:change={handleChange}/>
{/each}
</div>
{/if}
</div>

<style lang="scss">
@import "../../../colors.scss";
@import "../../../colors.scss";

.setting {
padding: 7px 0px;
}

.head {
transition: ease margin-bottom .2s;
.setting {
padding: 7px 0px;
}

&.expand {
display: grid;
grid-template-columns: 1fr max-content;
}
.head {
&.animate {
transition: ease margin-bottom .2s;
}

&.expanded {
margin-bottom: 10px;
}
&.expand {
display: grid;
grid-template-columns: 1fr max-content;
}

.nested-settings {
border-left: solid 2px $accent-color;
padding-left: 7px;
&.expanded {
margin-bottom: 10px;
}
}

.nested-settings {
border-left: solid 2px $accent-color;
padding-left: 7px;
}
</style>
5 changes: 4 additions & 1 deletion src-theme/src/routes/clickgui/setting/common/GenericSetting.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
import BindSetting from "../BindSetting.svelte";
import VectorSetting from "../VectorSetting.svelte";
import KeySetting from "../KeySetting.svelte";
import {maybe} from "../../util";
import {animationsEnabled} from "../../clickgui_store";

export let setting: ModuleSetting;
export let path: string;
Expand All @@ -33,7 +35,8 @@
</script>

{#if ready}
<div in:slide|global={{duration: 200, axis: "y"}} out:slide|global={{duration: 200, axis: "y"}}>
<div in:maybe|global={{duration: 200, axis: "y", fn: slide, animate: $animationsEnabled}}
out:maybe|global={{duration: 200, axis: "y", fn: slide, animate: $animationsEnabled}}>
{#if setting.valueType === "BOOLEAN"}
<BooleanSetting bind:setting={setting} on:change/>
{:else if setting.valueType === "CHOICE"}
Expand Down
13 changes: 13 additions & 0 deletions src-theme/src/routes/clickgui/util.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import type {TransitionConfig} from "svelte/transition";

interface ExtendedTransitionConfig extends Partial<TransitionConfig> {
fn: Function;
animate: boolean;
[x: string]: unknown;
}

export function maybe(node: HTMLElement, options: ExtendedTransitionConfig) {
if (options.animate) {
return options.fn(node, options);
}
}
3 changes: 3 additions & 0 deletions src/main/kotlin/net/ccbluex/liquidbounce/features/module/modules/render/ModuleClickGui.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ object ModuleClickGui :
@Suppress("UnusedPrivateProperty")
private val searchBarAutoFocus by boolean("SearchBarAutoFocus", true)

@Suppress("UnusedPrivateProperty")
private val animations by boolean("Animations", true)

override fun enable() {
// Pretty sure we are not in a game, so we can't open the clickgui
if (mc.player == null || mc.world == null) {
Expand Down
Loading