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: ClickGui Tab system #3140

Draft
wants to merge 11 commits into
base: nextgen
Choose a base branch
from
Draft

Feat: ClickGui Tab system #3140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e53bb1f
Format clickgui
Ell1ott May 26, 2024
97755a5
Create ClickGuiTabs.svelte
Ell1ott May 26, 2024
1508827
Format search
Ell1ott May 26, 2024
8ce4a5e
Adds tabs to clickgui
Ell1ott May 26, 2024
e02c4a6
Move search down
Ell1ott May 26, 2024
f531d25
First version ClickGuiTabs
Ell1ott May 26, 2024
03b648c
New tabs lok
Ell1ott May 26, 2024
1ea517f
Move files around
Ell1ott May 26, 2024
c56e218
Delete +layout.svelte
Ell1ott May 26, 2024
fe69f5a
Add example hud element
Ell1ott May 27, 2024
311a779
locked ratio
Ell1ott May 27, 2024
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
160 changes: 80 additions & 80 deletions src-theme/src/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,96 +1,96 @@
<script lang="ts">
import Router, {push} from "svelte-spa-router";
import ClickGui from "./routes/clickgui/ClickGui.svelte";
import Hud from "./routes/hud/Hud.svelte";
import {getVirtualScreen} from "./integration/rest";
import {cleanupListeners, listenAlways} from "./integration/ws";
import {onMount} from "svelte";
import {insertPersistentData} from "./integration/persistent_storage";
import Inventory from "./routes/inventory/Inventory.svelte";
import Title from "./routes/menu/title/Title.svelte";
import SplashScreen from "./routes/menu/splash/SplashScreen.svelte";
import Multiplayer from "./routes/menu/multiplayer/Multiplayer.svelte";
import AltManager from "./routes/menu/altmanager/AltManager.svelte";
import Singleplayer from "./routes/menu/singleplayer/Singleplayer.svelte";
import ProxyManager from "./routes/menu/proxymanager/ProxyManager.svelte";
import None from "./routes/none/None.svelte";
import Disconnected from "./routes/menu/disconnected/Disconnected.svelte";
import Router, { push } from "svelte-spa-router";
import ClickGui from "./routes/clickgui/ClickGui.svelte";
import Hud from "./routes/hud/Hud.svelte";
import { getVirtualScreen } from "./integration/rest";
import { cleanupListeners, listenAlways } from "./integration/ws";
import { onMount } from "svelte";
import { insertPersistentData } from "./integration/persistent_storage";
import Inventory from "./routes/inventory/Inventory.svelte";
import Title from "./routes/menu/title/Title.svelte";
import SplashScreen from "./routes/menu/splash/SplashScreen.svelte";
import Multiplayer from "./routes/menu/multiplayer/Multiplayer.svelte";
import AltManager from "./routes/menu/altmanager/AltManager.svelte";
import Singleplayer from "./routes/menu/singleplayer/Singleplayer.svelte";
import ProxyManager from "./routes/menu/proxymanager/ProxyManager.svelte";
import None from "./routes/none/None.svelte";
import Disconnected from "./routes/menu/disconnected/Disconnected.svelte";

const routes = {
"/clickgui": ClickGui,
"/hud": Hud,
"/inventory": Inventory,
"/title": Title,
"/splash": SplashScreen,
"/multiplayer": Multiplayer,
"/altmanager": AltManager,
"/singleplayer": Singleplayer,
"/proxymanager": ProxyManager,
"/none": None,
"/disconnected": Disconnected
};
const routes = {
"/clickgui": ClickGui,
"/hud": Hud,
"/inventory": Inventory,
"/title": Title,
"/splash": SplashScreen,
"/multiplayer": Multiplayer,
"/altmanager": AltManager,
"/singleplayer": Singleplayer,
"/proxymanager": ProxyManager,
"/none": None,
"/disconnected": Disconnected,
};

const url = window.location.href;
const staticTag = url.split("?")[1];
const isStatic = staticTag === "static";
let showSplash = false;
const url = window.location.href;
const staticTag = url.split("?")[1];
const isStatic = staticTag === "static";
let showSplash = false;

// HACK: Just in case
setTimeout(() => {
showSplash = false;
}, 10 * 1000);
// HACK: Just in case
setTimeout(() => {
showSplash = false;
}, 10 * 1000);

async function changeRoute(name: string) {
cleanupListeners();
console.log(`[Router] Redirecting to ${name}`);
await push(`/${name}`);
}

onMount(async () => {
await insertPersistentData();
async function changeRoute(name: string) {
cleanupListeners();
console.log(`[Router] Redirecting to ${name}`);
await push(`/${name}`);
}

if (isStatic) {
return;
}
onMount(async () => {
await insertPersistentData();

listenAlways("socketReady", async () => {
const virtualScreen = await getVirtualScreen();
showSplash = virtualScreen.showingSplash;
await changeRoute(virtualScreen.name || "none");
});
if (isStatic) {
return;
}

listenAlways("splashOverlay", async (event: any) => {
showSplash = event.showingSplash;
if (!showSplash) {
// Dirty fix to patch lagging browser after launch.
window.location.replace(window.location.href.split("#").shift()!);
}
});
listenAlways("socketReady", async () => {
const virtualScreen = await getVirtualScreen();
showSplash = virtualScreen.showingSplash;
await changeRoute(virtualScreen.name || "none");
});

listenAlways("virtualScreen", async (event: any) => {
console.log(`[Router] Virtual screen change to ${event.screenName}`);
const action = event.action;
listenAlways("splashOverlay", async (event: any) => {
showSplash = event.showingSplash;
if (!showSplash) {
// Dirty fix to patch lagging browser after launch.
window.location.replace(window.location.href.split("#").shift()!);
}
});

switch (action) {
case "close":
await changeRoute("none");
break;
case "open":
await changeRoute(event.screenName || "none");
break;
}
});
listenAlways("virtualScreen", async (event: any) => {
console.log(`[Router] Virtual screen change to ${event.screenName}`);
const action = event.action;

const virtualScreen = await getVirtualScreen();
showSplash = virtualScreen.showingSplash;
await changeRoute(virtualScreen.name || "none");
switch (action) {
case "close":
await changeRoute("none");
break;
case "open":
await changeRoute(event.screenName || "none");
break;
}
});

const virtualScreen = await getVirtualScreen();
showSplash = virtualScreen.showingSplash;
await changeRoute(virtualScreen.name || "none");
});
</script>

<main>
{#if showSplash}
<SplashScreen/>
{:else}
<Router {routes}/>
{/if}
{#if showSplash}
<SplashScreen />
{:else}
<Router {routes} />
{/if}
</main>
98 changes: 54 additions & 44 deletions src-theme/src/routes/clickgui/ClickGui.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,60 @@
<script lang="ts">
import {onMount} from "svelte";
import {getComponents, getGameWindow, getModules, getModuleSettings} from "../../integration/rest";
import {groupByCategory} from "../../integration/util";
import type {GroupedModules, Module} from "../../integration/types";
import Panel from "./Panel.svelte";
import Search from "./Search.svelte";
import Description from "./Description.svelte";
import {fade} from "svelte/transition";
import {listen} from "../../integration/ws";
import type {ClickGuiScaleChangeEvent, ScaleFactorChangeEvent} from "../../integration/events";

let categories: GroupedModules = {};
let modules: Module[] = [];
let minecraftScaleFactor = 2;
let clickGuiScaleFactor = 1;
$: scaleFactor = minecraftScaleFactor * clickGuiScaleFactor;
$: zoom = scaleFactor * 50;

onMount(async () => {
const gameWindow = await getGameWindow();
minecraftScaleFactor = gameWindow.scaleFactor;

modules = await getModules();
categories = groupByCategory(modules);

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

listen("scaleFactorChange", (e: ScaleFactorChangeEvent) => {
minecraftScaleFactor = e.scaleFactor;
});

listen("clickGuiScaleChange", (e: ClickGuiScaleChangeEvent) => {
clickGuiScaleFactor = e.value;
});
</script>
import ClickGuiTabs from "./ClickGuiTabs.svelte";
import { onMount } from "svelte";
import { getGameWindow, getModuleSettings } from "../../integration/rest";
import Description from "./modules/Description.svelte";
import { fade } from "svelte/transition";
import { listen } from "../../integration/ws";
import type {
ClickGuiScaleChangeEvent,
ScaleFactorChangeEvent,
} from "../../integration/events";
import Modules from "./modules/Modules.svelte";
import HudEditor from "./Hud/HudEditor.svelte";

let minecraftScaleFactor = 2;
let clickGuiScaleFactor = 1;
$: scaleFactor = minecraftScaleFactor * clickGuiScaleFactor;
$: zoom = scaleFactor * 50;

onMount(async () => {
const gameWindow = await getGameWindow();
minecraftScaleFactor = gameWindow.scaleFactor;

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

<div class="clickgui" transition:fade|global={{duration: 200}}
style="zoom: {zoom}%; width: {2 / scaleFactor * 100}vw; height: {2 / scaleFactor * 100}vh;">
<Description/>
<Search modules={structuredClone(modules)}/>
listen("scaleFactorChange", (e: ScaleFactorChangeEvent) => {
minecraftScaleFactor = e.scaleFactor;
});

listen("clickGuiScaleChange", (e: ClickGuiScaleChangeEvent) => {
clickGuiScaleFactor = e.value;
});

let activeTab: string;
</script>

{#each Object.entries(categories) as [category, modules], panelIndex}
<Panel {category} {modules} {panelIndex} {scaleFactor}/>
{/each}
<div
class="clickgui"
transition:fade|global={{ duration: 200 }}
style="zoom: {zoom}%; width: {(2 / scaleFactor) * 100}vw; height: {(2 /
scaleFactor) *
100}vh;"
>
<Description />
<ClickGuiTabs bind:activeTab />
{#if activeTab === "Modules"}
<Modules {scaleFactor} />
{:else if activeTab === "Settings"}
settings
{:else if activeTab === "Hud"}
<HudEditor {scaleFactor} />
{/if}
<slot></slot>
</div>

<style lang="scss">
Expand Down
59 changes: 59 additions & 0 deletions src-theme/src/routes/clickgui/ClickGuiTabs.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<script lang="ts">
const tabs = ["Modules", "Hud", "Settings", "Friends"];

export let activeTab: string = tabs[0];
</script>

<div class="tabs">
{#each tabs as tab}
<button
class="tab"
class:active={tab == activeTab}
on:click={() => (activeTab = tab)}
>
{tab}
</button>
{/each}
</div>

<style lang="scss">
@use "sass:color";
@import "../../colors.scss";

.tabs {
position: fixed;
display: flex;
left: 50%;
top: 14px;
gap: 15px;
transform: translateX(-50%);
width: 600px;

// border-radius: 30px;

// overflow: hidden;
// box-shadow: 0 0 10px rgba($clickgui-base-color, 0.5);

&:focus-within {
z-index: 9999999999;
}
}

.tab {
background-color: transparent;
color: $clickgui-text-dimmed-color;
border: none;
font-size: 16px;
font-family: inherit;
padding: 12px 30px;
flex: 1;
border-radius: 30px;

background-color: rgba($clickgui-base-color, 0.8);
&.active {
color: $clickgui-text-color;
// border: 2px solid $accent-color;
outline: 2px solid $accent-color;
}
}
</style>
Loading
Loading