Launcher: panel accounts via authlib-injector, skin & cape editor
Microsoft sign-in is gone. Server accounts now receive Yggdrasil tokens from the panel and launch with authlib-injector pointed at the panel's auth server, so online-mode servers verify players against it. - Download authlib-injector from the panel mirror (fallback: official), SHA-256 verified and cached, with prefetched metadata - New Skin & cape settings tab: upload, arm style, reset, cape picker with front/back previews - Avatars render from the panel's head endpoint Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011ARcGWxLx21FwXJ3yfGriS
This commit is contained in:
18 files changed
+454
-208
No files matched your search
@@ -1,18 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { app } from '../lib/store.svelte';
|
||||
import type { Account } from '../lib/types';
|
||||
|
||||
let { account, size = 2.2 }: { account: Account | null; size?: number } = $props();
|
||||
let failed = $state(false);
|
||||
const hue = $derived([...(account?.username ?? '?')].reduce((a, c) => a + c.charCodeAt(0), 0) % 360);
|
||||
// Microsoft accounts have real skins; everyone else gets a head by name.
|
||||
const src = $derived(account ? `https://mc-heads.net/avatar/${account.kind === 'microsoft' ? account.uuid : encodeURIComponent(account.username)}/64` : '');
|
||||
// Server accounts: head rendered by the panel from the player's skin.
|
||||
const src = $derived(account?.kind === 'panel' && account.panel_url ? `${account.panel_url}/api/v1/avatar/${account.uuid}?size=64&v=${app.skinVersion}` : null);
|
||||
$effect(() => {
|
||||
void src;
|
||||
failed = false;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if account && !failed}
|
||||
{#if src && !failed}
|
||||
<img {src} alt="" style:width="{size}rem" style:height="{size}rem" onerror={() => (failed = true)} />
|
||||
{:else}
|
||||
<span class="fb" style:width="{size}rem" style:height="{size}rem" style:background="hsl({hue} 55% 42%)">{account?.username.slice(0, 1).toUpperCase() ?? '?'}</span>
|
||||
<span class="fb" style:width="{size}rem" style:height="{size}rem" style:background="hsl({hue} 45% 40%)">{account?.username.slice(0, 1).toUpperCase() ?? '?'}</span>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
img, .fb { border-radius: 28%; image-rendering: pixelated; flex-shrink: 0; display: inline-grid; place-items: center; font-weight: 700; color: white; font-size: 0.9rem; }
|
||||
img, .fb { border-radius: 25%; image-rendering: pixelated; flex-shrink: 0; display: inline-grid; place-items: center; font-weight: 650; color: white; font-size: 0.9rem; }
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
import { abs, activeAccount, app, instances, removeAccount, selectInstance, switchAccount } from '../lib/store.svelte';
|
||||
|
||||
let menu = $state(false);
|
||||
const kindLabel = { panel: 'Account', microsoft: 'Microsoft', offline: 'Offline' };
|
||||
const kindLabel = { panel: 'Account', offline: 'Offline' };
|
||||
const initials = (name: string) => name.split(/\s+/).map((w) => w[0]).join('').slice(0, 2).toUpperCase();
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
<script lang="ts">
|
||||
import { UserRound, WifiOff, LoaderCircle, Copy, ExternalLink, Check, ArrowRight, UserPlus } from '@lucide/svelte';
|
||||
import { UserRound, WifiOff, LoaderCircle, Check, ArrowRight, UserPlus } from '@lucide/svelte';
|
||||
import { accountAdded, app, toast } from '../lib/store.svelte';
|
||||
import { errorText, invoke, openUrl } from '../lib/tauri';
|
||||
import type { Account, DeviceCode } from '../lib/types';
|
||||
import { errorText, invoke } from '../lib/tauri';
|
||||
import type { Account } from '../lib/types';
|
||||
|
||||
const auth = $derived(app.manifest?.auth);
|
||||
const methods = $derived(
|
||||
[
|
||||
auth?.panel_accounts !== false && { id: 'panel', label: 'Account' },
|
||||
auth?.microsoft && { id: 'microsoft', label: 'Microsoft' },
|
||||
auth?.offline_local !== false && { id: 'offline', label: 'Offline' },
|
||||
].filter(Boolean) as { id: string; label: string }[],
|
||||
);
|
||||
@@ -24,8 +23,6 @@
|
||||
let busy = $state(false);
|
||||
let error = $state('');
|
||||
let pendingNotice = $state(false);
|
||||
let code = $state<DeviceCode | null>(null);
|
||||
let copied = $state(false);
|
||||
|
||||
const canRegister = $derived(auth?.registration && auth.registration !== 'closed');
|
||||
|
||||
@@ -51,30 +48,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
async function microsoft() {
|
||||
error = '';
|
||||
busy = true;
|
||||
try {
|
||||
code = await invoke<DeviceCode>('ms_start');
|
||||
openUrl(code.verification_uri);
|
||||
const account = await invoke<Account>('ms_finish');
|
||||
code = null;
|
||||
await accountAdded(account);
|
||||
toast(`Signed in as ${account.username}`);
|
||||
} catch (err) {
|
||||
if (errorText(err) !== 'cancelled') error = errorText(err);
|
||||
code = null;
|
||||
} finally {
|
||||
busy = false;
|
||||
}
|
||||
}
|
||||
|
||||
function copy() {
|
||||
if (!code) return;
|
||||
navigator.clipboard.writeText(code.user_code);
|
||||
copied = true;
|
||||
setTimeout(() => (copied = false), 1500);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="signin">
|
||||
@@ -92,24 +65,6 @@
|
||||
<div><strong>Account created!</strong><p class="small muted">An admin needs to approve it before you can sign in. Check back soon.</p></div>
|
||||
</div>
|
||||
<button onclick={() => { pendingNotice = false; registering = false; }}>Back to sign in</button>
|
||||
{:else if method === 'microsoft'}
|
||||
{#if code}
|
||||
<div class="code">
|
||||
<p class="small muted">Go to <strong>{code.verification_uri.replace('https://', '')}</strong> and enter:</p>
|
||||
<button class="usercode" onclick={copy} title="Copy">{code.user_code} {#if copied}<Check size={18} />{:else}<Copy size={16} />{/if}</button>
|
||||
<div class="row">
|
||||
<button class="sm" onclick={() => code && openUrl(code.verification_uri)}><ExternalLink size={14} /> Open page</button>
|
||||
<button class="sm ghost" onclick={() => invoke('ms_cancel')}>Cancel</button>
|
||||
</div>
|
||||
<p class="tiny muted row wait"><LoaderCircle class="spin" size={14} /> Waiting for you to finish in the browser…</p>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="small muted">Own Minecraft? Sign in with Microsoft for your real skin and access to online-mode servers.</p>
|
||||
<button class="primary big ms" onclick={microsoft} disabled={busy}>
|
||||
<svg viewBox="0 0 21 21" width="18" height="18" aria-hidden="true"><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
|
||||
Sign in with Microsoft
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
<form class="col" onsubmit={submit}>
|
||||
<label class="field">
|
||||
@@ -148,12 +103,7 @@
|
||||
.inp .ic { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); color: var(--muted); display: flex; }
|
||||
.inp input { padding-left: 2.4rem; }
|
||||
.big { padding: 0.75rem; font-size: 0.95rem; }
|
||||
.ms { background: color-mix(in srgb, var(--text) 8%, transparent); border: 1px solid var(--line-strong); color: var(--text); }
|
||||
.ms:hover { background: color-mix(in srgb, var(--text) 12%, transparent); }
|
||||
.switch { align-self: center; color: var(--muted); }
|
||||
.code { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; text-align: center; padding: 0.5rem 0; }
|
||||
.usercode { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.12em; padding: 0.6rem 1.2rem; font-weight: 600; }
|
||||
.wait { gap: 0.4rem; }
|
||||
.error { font-size: 0.87rem; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--danger) 60%, white); background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }
|
||||
.notice { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--success) 12%, transparent); }
|
||||
.notice :global(svg) { color: var(--success); flex-shrink: 0; }
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
// Flat front/back render of a Minecraft skin (+ cape) on a canvas.
|
||||
let { skin, cape = null, slim = false, side = 'front', scale = 8 }: {
|
||||
skin: string | null; cape?: string | null; slim?: boolean; side?: 'front' | 'back'; scale?: number;
|
||||
} = $props();
|
||||
|
||||
let canvas = $state<HTMLCanvasElement>();
|
||||
|
||||
function load(src: string): Promise<HTMLImageElement> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const img = new Image();
|
||||
img.onload = () => resolve(img);
|
||||
img.onerror = reject;
|
||||
img.src = src;
|
||||
});
|
||||
}
|
||||
|
||||
type Part = [sx: number, sy: number, w: number, h: number, dx: number, dy: number, mirror?: boolean];
|
||||
|
||||
function parts(legacy: boolean): { base: Part[]; overlay: Part[] } {
|
||||
const aw = slim ? 3 : 4;
|
||||
const off = slim ? 1 : 0; // slim arms sit one pixel closer to the body
|
||||
if (side === 'front') {
|
||||
const base: Part[] = [
|
||||
[8, 8, 8, 8, 4, 0],
|
||||
[20, 20, 8, 12, 4, 8],
|
||||
[44, 20, aw, 12, off, 8],
|
||||
legacy ? [44, 20, aw, 12, 12, 8, true] : [36, 52, aw, 12, 12, 8],
|
||||
[4, 20, 4, 12, 4, 20],
|
||||
legacy ? [4, 20, 4, 12, 8, 20, true] : [20, 52, 4, 12, 8, 20],
|
||||
];
|
||||
const overlay: Part[] = [[40, 8, 8, 8, 4, 0]];
|
||||
if (!legacy) overlay.push([20, 36, 8, 12, 4, 8], [44, 36, aw, 12, off, 8], [52, 52, aw, 12, 12, 8], [4, 36, 4, 12, 4, 20], [4, 52, 4, 12, 8, 20]);
|
||||
return { base, overlay };
|
||||
}
|
||||
const rb = slim ? 51 : 52; // back face of the right arm
|
||||
const lb = slim ? 43 : 44;
|
||||
const base: Part[] = [
|
||||
[24, 8, 8, 8, 4, 0],
|
||||
[32, 20, 8, 12, 4, 8],
|
||||
[rb, 20, aw, 12, 12, 8],
|
||||
legacy ? [rb, 20, aw, 12, off, 8, true] : [lb, 52, aw, 12, off, 8],
|
||||
[12, 20, 4, 12, 8, 20],
|
||||
legacy ? [12, 20, 4, 12, 4, 20, true] : [28, 52, 4, 12, 4, 20],
|
||||
];
|
||||
const overlay: Part[] = [[56, 8, 8, 8, 4, 0]];
|
||||
if (!legacy) overlay.push([32, 36, 8, 12, 4, 8], [rb, 36, aw, 12, 12, 8], [lb + 16, 52, aw, 12, off, 8], [12, 36, 4, 12, 8, 20], [12, 52, 4, 12, 4, 20]);
|
||||
return { base, overlay };
|
||||
}
|
||||
|
||||
function draw(ctx: CanvasRenderingContext2D, img: HTMLImageElement, [sx, sy, w, h, dx, dy, mirror]: Part) {
|
||||
if (mirror) {
|
||||
ctx.save();
|
||||
ctx.translate((dx + w) * scale, dy * scale);
|
||||
ctx.scale(-1, 1);
|
||||
ctx.drawImage(img, sx, sy, w, h, 0, 0, w * scale, h * scale);
|
||||
ctx.restore();
|
||||
} else {
|
||||
ctx.drawImage(img, sx, sy, w, h, dx * scale, dy * scale, w * scale, h * scale);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
const el = canvas;
|
||||
const src = skin, capeSrc = cape, s = side, sl = slim;
|
||||
void s, sl;
|
||||
if (!el) return;
|
||||
const ctx = el.getContext('2d')!;
|
||||
ctx.imageSmoothingEnabled = false;
|
||||
ctx.clearRect(0, 0, el.width, el.height);
|
||||
let cancelled = false;
|
||||
(async () => {
|
||||
if (src) {
|
||||
const img = await load(src).catch(() => null);
|
||||
if (!img || cancelled) return;
|
||||
const { base, overlay } = parts(img.height === 32);
|
||||
base.forEach((p) => draw(ctx, img, p));
|
||||
overlay.forEach((p) => draw(ctx, img, p));
|
||||
} else {
|
||||
// Silhouette placeholder.
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.08)';
|
||||
for (const [x, y, w, h] of [[4, 0, 8, 8], [4, 8, 8, 12], [0, 8, 4, 12], [12, 8, 4, 12], [4, 20, 4, 12], [8, 20, 4, 12]]) {
|
||||
ctx.fillRect(x * scale, y * scale, w * scale, h * scale);
|
||||
}
|
||||
}
|
||||
if (capeSrc && s === 'back') {
|
||||
const c = await load(capeSrc).catch(() => null);
|
||||
if (!c || cancelled) return;
|
||||
const u = c.width / 64; // HD capes
|
||||
ctx.drawImage(c, 1 * u, 1 * u, 10 * u, 16 * u, 3 * scale, 8 * scale, 10 * scale, 16 * scale);
|
||||
}
|
||||
})();
|
||||
return () => (cancelled = true);
|
||||
});
|
||||
</script>
|
||||
|
||||
<canvas bind:this={canvas} width={16 * scale} height={32 * scale} aria-label="Skin {side}"></canvas>
|
||||
|
||||
<style>
|
||||
canvas { image-rendering: pixelated; display: block; }
|
||||
</style>
|
||||
@@ -1,7 +1,7 @@
|
||||
// In-browser stand-in for the Rust backend, used by `npm run dev` outside
|
||||
// Tauri and for UI screenshots. Scenario via ?mock=setup|login|main.
|
||||
import { mockEmit } from './tauri';
|
||||
import type { Account, Bootstrap, Manifest, Settings } from './types';
|
||||
import type { Account, Bootstrap, Manifest, PlayerProfile, Settings } from './types';
|
||||
|
||||
const scenario = new URLSearchParams(location.search).get('mock') ?? 'main';
|
||||
|
||||
@@ -37,7 +37,7 @@ const manifest: Manifest = {
|
||||
api_version: 1,
|
||||
panel_version: '0.1.0',
|
||||
user: null,
|
||||
auth: { panel_accounts: true, registration: 'approval', microsoft: true, microsoft_client_id: 'demo', offline_local: true },
|
||||
auth: { panel_accounts: true, registration: 'approval', offline_local: true, yggdrasil_url: 'https://panel.scopenet.gg/api/yggdrasil' },
|
||||
branding: {
|
||||
name: 'SCOPENET',
|
||||
tagline: 'Your worlds, one click away.',
|
||||
@@ -76,6 +76,18 @@ const accounts: Account[] = scenario === 'main' || scenario === 'progress' ? [
|
||||
let active: string | null = accounts[0]?.id ?? null;
|
||||
|
||||
const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
|
||||
|
||||
const profile: PlayerProfile = {
|
||||
uuid: 'b50ad385-829d-3141-a216-7e7d7539ba7f',
|
||||
name: 'Notch',
|
||||
skin_url: null,
|
||||
skin_model: 'classic',
|
||||
cape: null,
|
||||
available_capes: [
|
||||
{ id: 1, name: 'Founder', url: '' },
|
||||
{ id: 2, name: 'Season 4', url: '' },
|
||||
],
|
||||
};
|
||||
let running = false;
|
||||
|
||||
async function fakeLaunch(id: string) {
|
||||
@@ -134,11 +146,19 @@ export async function mockInvoke(cmd: string, args: Record<string, any>): Promis
|
||||
}
|
||||
case 'register_panel':
|
||||
return { account: null, pending: true };
|
||||
case 'ms_start':
|
||||
return { user_code: 'F7K2-QX9M', verification_uri: 'https://microsoft.com/link', expires_in: 900, interval: 5, message: '' };
|
||||
case 'ms_finish':
|
||||
await sleep(600_000);
|
||||
return null;
|
||||
case 'account_profile':
|
||||
case 'set_cape':
|
||||
case 'set_skin_model':
|
||||
if (cmd === 'set_cape') profile.cape = profile.available_capes.find((c) => c.id === args.capeId) ?? null;
|
||||
if (cmd === 'set_skin_model') profile.skin_model = args.model;
|
||||
return structuredClone(profile);
|
||||
case 'upload_skin':
|
||||
profile.skin_url = 'data:image/png;base64,' + args.data;
|
||||
profile.skin_model = args.model;
|
||||
return structuredClone(profile);
|
||||
case 'delete_skin':
|
||||
profile.skin_url = null;
|
||||
return structuredClone(profile);
|
||||
case 'select_account':
|
||||
active = args.id;
|
||||
return null;
|
||||
|
||||
@@ -39,6 +39,8 @@ export const app = $state({
|
||||
update: null as UpdateInfo | null,
|
||||
addAccount: false,
|
||||
instanceSettings: null as string | null,
|
||||
/** Bumped after a skin change so avatars reload. */
|
||||
skinVersion: 0,
|
||||
toasts: [] as { id: number; text: string; kind: 'ok' | 'error' | 'info' }[],
|
||||
});
|
||||
|
||||
|
||||
@@ -43,8 +43,7 @@ export interface Branding {
|
||||
export interface AuthConfig {
|
||||
panel_accounts: boolean;
|
||||
registration: 'closed' | 'open' | 'approval';
|
||||
microsoft: boolean;
|
||||
microsoft_client_id: string | null;
|
||||
yggdrasil_url: string | null;
|
||||
offline_local: boolean;
|
||||
}
|
||||
|
||||
@@ -57,7 +56,7 @@ export interface Manifest {
|
||||
user: { id: number; username: string; uuid: string; role: string; groups: string[] } | null;
|
||||
}
|
||||
|
||||
export interface Account { id: string; kind: 'panel' | 'microsoft' | 'offline'; username: string; uuid: string; panel_url: string | null; role: string | null }
|
||||
export interface Account { id: string; kind: 'panel' | 'offline'; username: string; uuid: string; panel_url: string | null; role: string | null }
|
||||
|
||||
export type Gc = 'default' | 'g1' | 'zgc';
|
||||
|
||||
@@ -108,5 +107,6 @@ export type ProgressEvent =
|
||||
| { type: 'log'; line: string };
|
||||
|
||||
export interface ServerStatus { online: boolean; version: string; players_online: number; players_max: number; sample: string[]; motd: string; favicon: string | null; latency_ms: number }
|
||||
export interface DeviceCode { user_code: string; verification_uri: string; expires_in: number; interval: number; message: string }
|
||||
export interface CapeInfo { id: number; name: string; url: string }
|
||||
export interface PlayerProfile { uuid: string; name: string; skin_url: string | null; skin_model: 'classic' | 'slim'; cape: CapeInfo | null; available_capes: CapeInfo[] }
|
||||
export interface UpdateInfo { version: string; notes: string; url: string; size: number }
|
||||
@@ -1,18 +1,21 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
UserRound, Gamepad2, Cpu, Keyboard, Palette, Rocket, HardDrive, Info, Plus, LogOut, Check, FolderOpen, Trash2,
|
||||
FileCode, RotateCcw, Download, LoaderCircle, RefreshCw, MousePointerClick, Zap, Gauge, Feather, Link2,
|
||||
FileCode, RotateCcw, Download, LoaderCircle, RefreshCw, MousePointerClick, Zap, Gauge, Feather, Link2, Shirt, Upload, Ban,
|
||||
} from '@lucide/svelte';
|
||||
import Avatar from '../components/Avatar.svelte';
|
||||
import SkinView from '../components/SkinView.svelte';
|
||||
import Toggle from '../components/Toggle.svelte';
|
||||
import { app, connect, instances, refresh, removeAccount, saveSettings, switchAccount, toast } from '../lib/store.svelte';
|
||||
import { activeAccount, app, connect, instances, refresh, removeAccount, saveSettings, switchAccount, toast } from '../lib/store.svelte';
|
||||
import { BIND_GROUPS, defaults, fromKeyboard, fromMouse, keyLabel } from '../lib/keys';
|
||||
import { bytes, gb } from '../lib/format';
|
||||
import { errorText, invoke, openUrl, pickFile } from '../lib/tauri';
|
||||
import type { Gc, UpdateInfo } from '../lib/types';
|
||||
import type { Gc, PlayerProfile, UpdateInfo } from '../lib/types';
|
||||
|
||||
const tabs = [
|
||||
const serverAccount = $derived(activeAccount()?.kind === 'panel');
|
||||
const tabs = $derived([
|
||||
{ id: 'account', label: 'Accounts', icon: UserRound },
|
||||
...(serverAccount ? [{ id: 'skin', label: 'Skin & cape', icon: Shirt }] : []),
|
||||
{ id: 'game', label: 'Game', icon: Gamepad2 },
|
||||
{ id: 'java', label: 'Java & performance', icon: Cpu },
|
||||
{ id: 'controls', label: 'Controls', icon: Keyboard },
|
||||
@@ -20,7 +23,7 @@
|
||||
{ id: 'launcher', label: 'Launcher', icon: Rocket },
|
||||
{ id: 'storage', label: 'Storage', icon: HardDrive },
|
||||
{ id: 'about', label: 'About', icon: Info },
|
||||
];
|
||||
]);
|
||||
|
||||
const s = $derived(app.settings!);
|
||||
const b = $derived(app.manifest?.branding);
|
||||
@@ -29,7 +32,7 @@
|
||||
const recommended = $derived(Math.min(8192, Math.max(2048, Math.floor(ram / 2 / 512) * 512)));
|
||||
const advanced = $derived(b?.features.allow_advanced_java !== false);
|
||||
const themeAllowed = $derived(b?.features.allow_user_theme !== false);
|
||||
const kindLabel = { panel: 'Server account', microsoft: 'Microsoft account', offline: 'Offline' };
|
||||
const kindLabel = { panel: 'Server account', offline: 'Offline' };
|
||||
|
||||
// ---- controls ----
|
||||
let capturing = $state<string | null>(null);
|
||||
@@ -54,6 +57,48 @@
|
||||
return new Set([...seen].filter(([, n]) => n > 1).map(([k]) => k));
|
||||
});
|
||||
|
||||
// ---- skin & cape ----
|
||||
let profile = $state<PlayerProfile | null>(null);
|
||||
let profileError = $state<string | null>(null);
|
||||
let skinBusy = $state(false);
|
||||
let dragging = $state(false);
|
||||
$effect(() => {
|
||||
if (app.settingsTab !== 'skin') return;
|
||||
void app.active;
|
||||
profile = null;
|
||||
profileError = null;
|
||||
invoke<PlayerProfile>('account_profile').then((p) => (profile = p)).catch((e) => (profileError = errorText(e)));
|
||||
});
|
||||
$effect(() => {
|
||||
if (app.settingsTab === 'skin' && !serverAccount) app.settingsTab = 'account';
|
||||
});
|
||||
async function skinAction(cmd: string, args: Record<string, unknown> = {}, done?: string) {
|
||||
skinBusy = true;
|
||||
try {
|
||||
profile = await invoke<PlayerProfile>(cmd, args);
|
||||
app.skinVersion++;
|
||||
if (done) toast(done);
|
||||
} catch (e) {
|
||||
toast(errorText(e), 'error');
|
||||
} finally {
|
||||
skinBusy = false;
|
||||
}
|
||||
}
|
||||
async function uploadSkin(file: File | undefined) {
|
||||
if (!file) return;
|
||||
if (file.type && file.type !== 'image/png') return toast('Skins must be PNG files', 'error');
|
||||
if (file.size > 2_000_000) return toast('That file is too large for a skin', 'error');
|
||||
const buf = new Uint8Array(await file.arrayBuffer());
|
||||
let bin = '';
|
||||
for (let i = 0; i < buf.length; i += 0x8000) bin += String.fromCharCode(...buf.subarray(i, i + 0x8000));
|
||||
await skinAction('upload_skin', { data: btoa(bin), model: profile?.skin_model ?? 'classic' }, 'Skin updated');
|
||||
}
|
||||
function onDrop(e: DragEvent) {
|
||||
e.preventDefault();
|
||||
dragging = false;
|
||||
uploadSkin(e.dataTransfer?.files[0]);
|
||||
}
|
||||
|
||||
// ---- storage ----
|
||||
let storage = $state<{ shared: number; runtimes: number; instances: [string, number][] } | null>(null);
|
||||
function loadStorage() {
|
||||
@@ -158,6 +203,55 @@
|
||||
{/each}
|
||||
<button class="add" onclick={() => (app.addAccount = true)}><Plus size={16} /> Add account</button>
|
||||
</div>
|
||||
{:else if app.settingsTab === 'skin'}
|
||||
<h1>Skin & cape</h1>
|
||||
<p class="lead">Stored on {b?.name ?? 'the server'} — visible to everyone on servers that use its sign-in.</p>
|
||||
{#if profileError}
|
||||
<div class="card glass"><p class="warn small">{profileError}</p></div>
|
||||
{:else if !profile}
|
||||
<div class="card glass center"><LoaderCircle size={20} class="spin" /></div>
|
||||
{:else}
|
||||
<div class="card glass skin-card" class:busy={skinBusy}>
|
||||
<div class="preview">
|
||||
<div class="figure"><SkinView skin={profile.skin_url} cape={profile.cape?.url ?? null} slim={profile.skin_model === 'slim'} side="front" scale={7} /><span class="tiny muted">Front</span></div>
|
||||
<div class="figure"><SkinView skin={profile.skin_url} cape={profile.cape?.url ?? null} slim={profile.skin_model === 'slim'} side="back" scale={7} /><span class="tiny muted">Back</span></div>
|
||||
</div>
|
||||
<div class="col grow skin-controls">
|
||||
<label class="drop" class:over={dragging} ondragover={(e) => { e.preventDefault(); dragging = true; }} ondragleave={() => (dragging = false)} ondrop={onDrop}>
|
||||
<Upload size={18} />
|
||||
<span><strong>Upload a skin</strong><span class="tiny muted">PNG, 64×64 or 64×32 — drop it here or click to browse</span></span>
|
||||
<input type="file" accept="image/png" onchange={(e) => { uploadSkin(e.currentTarget.files?.[0]); e.currentTarget.value = ''; }} />
|
||||
</label>
|
||||
<label class="field">Arm style
|
||||
<div class="segmented full">
|
||||
{#each [['classic', 'Classic (4px)'], ['slim', 'Slim (3px)']] as [id, label]}
|
||||
<button class:active={profile.skin_model === id} disabled={skinBusy} onclick={() => profile!.skin_model !== id && skinAction('set_skin_model', { model: id })}>{label}</button>
|
||||
{/each}
|
||||
</div>
|
||||
</label>
|
||||
{#if profile.skin_url}
|
||||
<button class="sm link-btn" disabled={skinBusy} onclick={() => skinAction('delete_skin', {}, 'Skin reset')}><RotateCcw size={14} /> Reset to default</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card glass col">
|
||||
<span class="label">Cape</span>
|
||||
{#if profile.available_capes.length}
|
||||
<div class="capes">
|
||||
<button class="cape" class:active={!profile.cape} disabled={skinBusy} onclick={() => profile!.cape && skinAction('set_cape', { capeId: null })}>
|
||||
<span class="cape-img none"><Ban size={18} /></span>No cape
|
||||
</button>
|
||||
{#each profile.available_capes as c (c.id)}
|
||||
<button class="cape" class:active={profile.cape?.id === c.id} disabled={skinBusy} onclick={() => profile!.cape?.id !== c.id && skinAction('set_cape', { capeId: c.id })}>
|
||||
<span class="cape-img" style:background-image={c.url ? `url(${c.url})` : undefined}></span>{c.name}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="muted small">No capes are available to you yet. Server staff can hand them out from the panel.</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{:else if app.settingsTab === 'game'}
|
||||
<h1>Game</h1>
|
||||
<p class="lead">Applies to every instance unless you override it in the instance's settings.</p>
|
||||
@@ -426,5 +520,22 @@
|
||||
.update { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
|
||||
.update :global(svg) { color: var(--accent); }
|
||||
.notes { margin: 0; white-space: pre-wrap; font-family: var(--font); font-size: 0.84rem; color: var(--muted); max-height: 12rem; overflow: auto; }
|
||||
@media (max-width: 1050px) { .binds { grid-template-columns: 1fr; } .tabs { width: 12rem; } }
|
||||
.center { display: grid; place-items: center; min-height: 8rem; }
|
||||
.skin-card { display: flex; gap: 1.6rem; align-items: center; transition: opacity 0.15s; }
|
||||
.skin-card.busy { opacity: 0.6; }
|
||||
.preview { display: flex; gap: 1rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg) 60%, transparent); }
|
||||
.figure { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
|
||||
.skin-controls { display: flex; flex-direction: column; gap: 1rem; }
|
||||
.drop { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
|
||||
.drop:hover, .drop.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
|
||||
.drop > span { display: flex; flex-direction: column; gap: 0.15rem; }
|
||||
.drop :global(svg) { color: var(--accent); flex-shrink: 0; }
|
||||
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
|
||||
.capes { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.6rem; }
|
||||
.cape { flex-direction: column; gap: 0.5rem; padding: 0.8rem 0.5rem 0.6rem; font-size: 0.8rem; background: color-mix(in srgb, var(--bg) 50%, transparent); white-space: normal; }
|
||||
.cape.active { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
|
||||
/* Cape texture: the outer face is the 10×16 region at (1,1) of a 64×32 sheet. */
|
||||
.cape-img { width: 2.5rem; height: 4rem; border-radius: 0.2rem; image-rendering: pixelated; background-color: color-mix(in srgb, var(--text) 8%, transparent); background-size: 640% 200%; background-position: 1.85% 6.25%; background-repeat: no-repeat; }
|
||||
.cape-img.none { display: grid; place-items: center; color: var(--muted); }
|
||||
@media (max-width: 1050px) { .binds { grid-template-columns: 1fr; } .tabs { width: 12rem; } .skin-card { flex-direction: column; align-items: stretch; } .preview { justify-content: center; } }
|
||||
</style>
|
||||
Reference in new issue
Block a user