update server

src/contexts/SettingsContext.jsx

@@ -21,6 +21,8 @@ export const SettingsProvider = ({children}) => {
 
 	const [volume, volumeRef, setVolume] = useSetting("volume", 1, true);
 
+	const [useLegacyDOMrenderer, useLegacyDOMrendererRef, setUseLegacyDOMrenderer] = useSetting("useLegacyDOMrenderer", false, true);
+
 	return (
 		<SettingsContext.Provider value={{
 			verticalScale, setVerticalScale, verticalScaleRef,
@@ -33,6 +35,7 @@ export const SettingsProvider = ({children}) => {
 			showFPS, setShowFPS, showFPSRef,
 			backgroundDim, setBackgroundDim, backgroundDimRef,
 			volume, setVolume, volumeRef,
+			useLegacyDOMrenderer, setUseLegacyDOMrenderer, useLegacyDOMrendererRef,
 		}}>
 			{children}
 		</SettingsContext.Provider>

src/contexts/SkinContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useLayoutEffect, useState } from "react";
+import { createContext, useCallback, useLayoutEffect, useState } from "react";
 import { parsePresetSkin } from "../parser/SkinParser";
 import { Assets } from "pixi.js";
 import transparentSVG from "../assets/transparent.svg?base64";
@@ -13,15 +13,20 @@ const loadTransparentTexture = async () => {
 }
 
 export const SKinProvider = ({children}) => {
+	const [skinName, setSkinName] = useState(null);
+	const [skinID, setSkinID] = useState(null); // Skin ID is either ^default-[a-z]$ or a hash
 	const [skin, setSkin] = useState(null);
 	const [skinAssets, setSkinAssets] = useState(null);
 
-	const loadSkin = async (skin) => {
-		console.log("loaded skin", skin);
+	const loadSkin = async (skin, skinID, skinName) => {
+		console.log("loaded skin", skinName, skin);
 
 		setSkin(skin);
 		console.log(skin);
 
+		setSkinID(skinID);
+		setSkinName(skinName);
+
 		// TODO: Unload previous skin assets
 
 		// Load skin as PIXI textures
@@ -53,11 +58,21 @@ export const SKinProvider = ({children}) => {
 		console.log("loaded skin assets", textures);
 	}
 
+	const loadPresetSkin = useCallback(async (id) => {
+		if (id == "default-classic") {
+			loadSkin(await parsePresetSkin("default"), "default-classic", "Classic");
+		} else if (id == "default-simple") {
+			loadSkin(await parsePresetSkin("simple"), "default-simple", "Simple");
+		} else {
+			console.error("unknown skin id for default skin", id);
+		}
+	}, []);
+
 	useLayoutEffect(() => {
 		// Load default skin
 		(async () => {
 			console.log("loading default skin");
-			loadSkin(await parsePresetSkin("default"));
+			await loadPresetSkin("default-classic");
 		})();
 	}, []);
 
@@ -66,7 +81,9 @@ export const SKinProvider = ({children}) => {
 		<SkinContext.Provider value={{
 			skin,
 			loadSkin,
-			skinAssets
+			skinAssets,
+			skinName,
+			loadPresetSkin,
 		}}>
 			{ skin && <SkinCSSLayer skin={skin} /> }
 			{children}

src/modules/Main/Playfield/ObjectsCanvas_old.jsx → src/modules/Main/Playfield/LegacyObjectsCanvas.jsx

@@ -6,7 +6,7 @@ import { CalculateScaleFromCircleSize } from "../../../utils/CalculateCSScale";
 import useRefState from "../../../hooks/useRefState";
 import "./ObjectsCanvas.scss";
 
-export function ObjectsCanvas({ beatmap, ctbObjects, catcherPath }) {
+export function LegacyObjectsCanvas({ beatmap, ctbObjects, catcherPath }) {
 	const ref = useRef(null);
 
 	const [width, widthRef, setWidth] = useRefState(0);

src/modules/Main/Playfield/Playfield.jsx

@@ -10,6 +10,7 @@ import "./Playfield.scss";
 import { Grids } from './Grids';
 import { ActualPlayfieldBorder } from './ActualPlayfieldBorder';
 import { ObjectsCanvas } from './ObjectsCanvas';
+import { LegacyObjectsCanvas } from './LegacyObjectsCanvas';
 import { AutoCatcher } from './AutoCatcher';
 
 const inDevelopmentBuild = import.meta.env.DEV;
@@ -46,6 +47,7 @@ export function Playfield({ beatmap }) {
 		easy,
 		gameSpeed,
 		maxSpinLeniency,
+		useLegacyDOMrenderer,
 	} = useContext(SettingsContext);
 
 	const ctbObjectsKey = JSON.stringify([
@@ -85,7 +87,7 @@ export function Playfield({ beatmap }) {
 			easy,
 			derandomize,
 			gameSpeed,
-			maxSpinLeniency
+			maxSpinLeniency,
 		)).path;
 		setPath(normalPath);
 	}
@@ -147,7 +149,11 @@ export function Playfield({ beatmap }) {
 		>
 			<Grids />
 			<ActualPlayfieldBorder />
-			<ObjectsCanvas beatmap={beatmap} ctbObjects={ctbObjects} catcherPath={bestCatcherPath || catcherPath} />
+			{
+				useLegacyDOMrenderer ?
+			  		<LegacyObjectsCanvas beatmap={beatmap} ctbObjects={ctbObjects} catcherPath={bestCatcherPath || catcherPath} /> :
+					<ObjectsCanvas beatmap={beatmap} ctbObjects={ctbObjects} catcherPath={bestCatcherPath || catcherPath} />
+			}
 			<AutoCatcher beatmap={beatmap} catcherPath={bestCatcherPath || catcherPath} />
 			<BananaPathCalculatingOverlay progress={pathCalcProgress} calculating={calculatingPath} />
 			<StatsOverlay beatmap={beatmap} ctbObjects={ctbObjects} progress={pathCalcProgress} calculating={calculatingPath} />

src/modules/Navbar/SettingsPanel.jsx

@@ -1,6 +1,7 @@
 import { useContext, useRef, useState } from 'react'
 import { MapPackContext } from '../../contexts/MapPackContext'
 import { SettingsContext } from '../../contexts/SettingsContext'
+import { SkinContext } from '../../contexts/SkinContext'
 import { MdRefresh, MdSettings } from "react-icons/md";
 import ClickAwayListener from 'react-click-away-listener';
 import clsx from 'clsx';
@@ -18,8 +19,13 @@ export function SettingsPanel () {
 		gameSpeed, setGameSpeed,
 		showFPS, setShowFPS,
 		backgroundDim, setBackgroundDim,
+		useLegacyDOMrenderer, setUseLegacyDOMrenderer,
 	} = useContext(SettingsContext);
 
+	const {
+		skinName, skinID, loadPresetSkin
+	} = useContext(SkinContext);
+
 	const [open, setOpen] = useState(false);
 
 	const mapPack = useContext(MapPackContext).mapPack;
@@ -132,6 +138,13 @@ export function SettingsPanel () {
 							setShowFPS(value);
 						}}
 					/>
+					<Checkbox
+						label="Use Legacy DOM Renderer"
+						description="Low performance, not recommended"
+						value={useLegacyDOMrenderer}
+						onChange={(value) => setUseLegacyDOMrenderer(value)}
+					/>
+					<SkinSelector />
 				</div>
 			</button>
 		</ClickAwayListener>
@@ -192,4 +205,15 @@ function Mod({ label, acronym, description, semiSelected, value, onChange }) {
 			<div className="mod-label">{label}</div>
 		</div>
 	)
+}
+
+function SkinSelector() {
+	return (
+		<div className="skin-selector">
+			<div className="skin-selector-content">
+				<div className="skin-selector-label">Skin</div>
+				<div className="skin-selector-value">Default</div>
+			</div>
+		</div>
+	)
 }

src/parser/SkinParser.js

@@ -55,13 +55,17 @@ export async function parseSkinFromZipFile(zipFile) {
 			}
 		}
 	}
+	// read skin.ini
+	const skinIni = await zipFile["skin.ini"].async("text");
+
+
 
 	return skin;
 }
 
 export async function parsePresetSkin(name) {
 	console.log('loading preset skin', name);
-	const base64 = name === "default" ? defaultSkin : simpleSkin;
+	const base64 = name === "classic" ? defaultSkin : simpleSkin;
 	const buffer = atob(base64);
 	const zipFile = await parseZipFromBuffer(buffer);
 	return await parseSkinFromZipFile(zipFile);