Combo colour parsing & Skin tinting

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,22 @@ export const SKinProvider = ({children}) => {
 		console.log("loaded skin assets", textures);
 	}
 
+	const loadPresetSkin = useCallback(async (id) => {
+		if (id == "default-classic") {
+			loadSkin(await parsePresetSkin("classic"), "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");
+			//await loadPresetSkin("default-simple");
 		})();
 	}, []);
 
@@ -66,7 +82,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

@@ -4,9 +4,9 @@ import { calculatePreempt } from "../../../utils/ApproachRate";
 import { PlayStateContext } from "../../../contexts/PlayStateContext";
 import { CalculateScaleFromCircleSize } from "../../../utils/CalculateCSScale";
 import useRefState from "../../../hooks/useRefState";
-import "./ObjectsCanvas.scss";
+//import "./LegacyObjectsCanvas.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/ObjectsCanvas.jsx

@@ -16,7 +16,8 @@ export function ObjectsCanvas({
 }) {
 	const ref = useRef(null);
 
-	const {skinAssets} = useContext(SkinContext);
+	const { skin, skinAssets } = useContext(SkinContext);
+	const skinComboColours = skin?.comboColours ?? [0xffffff];
 
 
 	const { verticalScale,
@@ -42,6 +43,10 @@ export function ObjectsCanvas({
 		managerRef.current.setSkinAssets(skinAssets);
 	}, [skinAssets]);
 
+	useEffect(() => {
+		managerRef.current.setComboColours(skinComboColours);
+	}, [skinComboColours]);
+
 	useEffect(() => {
 		managerRef.current.setObjects(ctbObjects);
 	}, [ctbObjects, catcherPath]);
@@ -171,6 +176,10 @@ class PixiManager {
 		this.skinAssets = skin;
 		this.applyToAllFruits(fruit => fruit.updateTexture());
 	}
+	setComboColours(comboColours) {
+		this.comboColours = comboColours;
+		this.applyToAllFruits(fruit => fruit.updateComboColour());
+	}
 	setPlayer(playerRef) {
 		this.playerRef = playerRef.current;
 	}
@@ -290,6 +299,7 @@ class Fruit {
 		this.setVisiblity(false);
 
 		this.updateSize();
+		this.updateComboColour();
 		this.updateVisualStyle();
 
 		manager.app.stage.addChild(this.sprite);
@@ -333,8 +343,12 @@ class Fruit {
 	updateSize() {
 		this.sprite.width = this.sprite.height = this.overlay.width = this.overlay.height
 		= this.manager.getFruitSize() *
-		(this.obj.type === 'droplet' ? 0.5 : 1) *
-		(this.bananaScale ?? 1);
+		 (this.obj.type === 'droplet' ? 0.5 : 1) *
+		 (this.bananaScale ?? 1);
+	}
+	updateComboColour() {
+		if (this.obj.type === "banana") return;
+		this.sprite.tint = this.manager.comboColours[this.obj.combo % this.manager.comboColours.length];
 	}
 	updateVisualStyle() {
 		const spriteFilters = [], overlayFilters = [];

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([
@@ -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/HitobjectsParser.js

@@ -170,8 +170,16 @@ export const parseHitObjects = (beatmap, hardRock, easy, gameSpeed) => {
 	applyVisualPresentation(nestedFruits);
 	applyPositionOffsets(nestedFruits);
 	applyHyperFruits(nestedFruits, beatmap, hardRock, easy, gameSpeed);
+	// denest nestedFruits
 	const fruits = nestedFruits.flatMap((nested) => nested.fruits);
 	fruits.sort((a, b) => a.time - b.time); // sort again because some maps have simultaneous hitobjects
+	// apply combo ids
+	let combo = -1;
+	for (let i = 0; i < fruits.length; i++) {
+		if (fruits[i].isNewCombo) combo++;
+		fruits[i].combo = combo;
+	}
+	console.log(fruits);
 	return fruits;
 }
 
@@ -332,6 +340,7 @@ const applyHyperFruits = (nestedFruits, beatmap, hardRock, easy, gameSpeed) => {
 
 
 
+
 const getSliderPointByPercent = (slider, percent) => {
 	const baseX = slider.startPosition.x;
 	const baseY = slider.startPosition.y;

src/parser/SkinParser.js

@@ -1,5 +1,5 @@
 import { parseZipFromBuffer } from '../utils/parseZipFromBuffer';
-import defaultSkin from "../assets/default-skin.zip?base64";
+import classicSkin from "../assets/classic-skin.zip?base64";
 import simpleSkin from "../assets/simple-skin.zip?base64";
 import { parseZip } from './ZipParser';
 
@@ -56,12 +56,40 @@ export async function parseSkinFromZipFile(zipFile) {
 		}
 	}
 
+	// read combo colours from skin.ini
+	const skinIni = (await (async () => {
+		try {
+			return await zipFile["skin.ini"].async("text");
+		} catch (e) {
+			return "";
+		}
+	})()).split("\n").map(line => line.trim()).filter(line => line.startsWith("Combo"));
+
+	let comboColours = [];
+
+	for (let i = 1; i <= 8; i++) {
+		const line = skinIni.find(line => line.startsWith(`Combo${i}:`));
+		if (!line) break;
+		const [r, g, b] = line.split(":")[1].split(",").map(x => parseInt(x));
+		comboColours.push([r, g, b]);
+	}
+	console.log('combo colours', comboColours);
+	if (!comboColours.length) {
+		comboColours.push([255, 192, 0]);
+		comboColours.push([0, 202, 0]);
+		comboColours.push([18, 124, 255]);
+		comboColours.push([242, 24, 57]);
+	}
+	console.log('combo colours', comboColours);
+	comboColours = comboColours.map(([r, g, b]) => r * 256 * 256 + g * 256 + b);
+	skin.comboColours = comboColours;
+
 	return skin;
 }
 
 export async function parsePresetSkin(name) {
 	console.log('loading preset skin', name);
-	const base64 = name === "default" ? defaultSkin : simpleSkin;
+	const base64 = (name === "classic" ? classicSkin : simpleSkin);
 	const buffer = atob(base64);
 	const zipFile = await parseZipFromBuffer(buffer);
 	return await parseSkinFromZipFile(zipFile);