osumerge/www/js/client.js

var OSU_FILES = [];

const global = new Dispatcher();

function _removeFile(id) {
	//TODO: Remove from bars too
	let elem = document.getElementById(id);
	const file_id = elem.dataset.index;
	elem.remove();

	if(file_id!==undefined && OSU_FILES[file_id])
	{
		const osu = OSU_FILES[file_id];
		OSU_FILES[file_id] = null;
		global.signal("FILE_REMOVE", {id: file_id, osu: osu});
	}
}

const READ_WHOLE_BUFFER = true;

function _readfile(event) {
	var input = event.target;

	if(READ_WHOLE_BUFFER) {
		var reader = new FileReader();

		reader.onload = () => {
			var osu = new OsuFile();
			osu.LoadString(reader.result).then(result => { 
				console.log("Read version "+osu.version);
				if(osu.okay()) {
					//Push to read osu files
					
					OSU_FILES.push(osu);
					global.signal("FILE_ADD", {id: OSU_FILES.length-1, osu: osu});
				} else {
					var er = osu.errors;
					console.log("Parsing .osu file failed: "+JSON.stringify(er));
					//TODO: Signal error
				}
			});
		};
		reader.readAsText(input.files[0]);
	} else {
		var nav = new LineNavigator(input.files[0]);
	}
}

var SIDEBAR_VIEWING = null;

function get_aggregate()
{
	return OSU_FILES.where(x=> x)[0];
}

function clearChildren(node)
{
	while(node.firstChild)
		node.removeChild(node.firstChild);
}

function clear_sidebar() {
	for(const elem of document.getElementsByClassName("metadata")) {
		elem.innerText="";
		removeClass(elem, "meta-dupe");
	}

	clearChildren( document.getElementById("meta-colours"));
}

function populate_sidebar(osu) {

	const meta = (id, value_name, transform) => {
		transform = transform || ((value) => value);

		const elem = document.getElementById("meta-"+id);
		const value = transform(path(osu, value_name));
		elem.innerText = value;

		if(OSU_FILES.where(x=> x && transform(path(x, value_name)) == value).length != OSU_FILES.where(x=> x).length)
		{
			//Is a not-dupe.
			addClass(elem, "meta-dupe");
		}
		else removeClass(elem, "meta-dupe");
	};

	if(!osu) {
		if(OSU_FILES.where(x=> x).length<1) clear_sidebar();
		else {
			//Is aggregate.

			populate_sidebar(get_aggregate());

			SIDEBAR_VIEWING = null;
		}
	} else {
		//Is single

		//General
		meta("audio-filename", "data.General.AudioFilename");
		meta("audio-lead-in", "data.General.AudioLeadIn");
		meta("preview-time", "data.General.PreviewTime");
		meta("countdown", "data.General.Countdown");
		meta("sample-set", "data.General.SampleSet");
		meta("stacking", "data.General.StackLeniency");
		meta("mode", "data.General.Mode");
		meta("letterbox", "data.General.LetterboxInBreaks");
		meta("widescreen", "data.General.WidescreenStoryboard");
		
		//Metadata
		meta("title", "data.Metadata.TitleUnicode");
		meta("title-ascii", "data.Metadata.Title");
		meta("artist", "data.Metadata.ArtistUnicode");
		meta("artist-ascii", "data.Metadata.Artist");
		meta("mapper", "data.Metadata.Creator");
		meta("difficulty", "data.Metadata.Version");
		meta("source", "data.Metadata.Source");
		meta("tags", "data.Metadata.Tags", tags=> tags.join(", "));
		meta("beatmap-id", "data.Metadata.BeatmapID");
		meta("beatmap-set-id", "data.Metadata.BeatmapSetID");

		//Diff
		meta("diff-hp", "data.Difficulty.HPDrainRate");
		meta("diff-cs", "data.Difficulty.CircleSize");
		meta("diff-od", "data.Difficulty.OverallDifficulty");
		meta("diff-ar", "data.Difficulty.ApproachRate");
		meta("diff-sv", "data.Difficulty.SliderMultiplier");
		meta("diff-tr", "data.Difficulty.SliderTickRate");

		//Background
		meta("background", "spec.Background");

		//Colours
		clearChildren(document.getElementById("meta-colours"));
		if(osu.data.Colours) {
			const colourList = document.getElementById("meta-colours");
			const addColour = (rgb, combo) => {
				const node = document.createElement("li");
				node.setAttribute("class", "combo-colour");
				node.setAttribute("id", "meta-colour-"+combo);
				node.style.color =  "rgb("+rgb.r+","+rgb.g+","+rgb.b+")";
				node.innerText = rgb.toString();
				colourList.appendChild(node);
			};
			console.log(osu.data.Colours);
			for(let key in osu.data.Colours) {
				if(osu.data.Colours.hasOwnProperty(key)) {
					const rgb = osu.data.Colours[key];
					addColour(rgb, key);
				}
			}
		}

		SIDEBAR_VIEWING = osu;
	}
}

function repopulate_sidebar(get_sel) {
	if(get_sel) {
		const elem = document.getElementById("meta-selector");
		if(elem.selectedIndex==0)
			populate_sidebar();
		else
			populate_sidebar(OSU_FILES[elem.value]);
	}
	else
		populate_sidebar(SIDEBAR_VIEWING);
}

function _onload() {

	// --- Set up collapsers --- //
	const collapsers = document.getElementsByClassName('collapse');

	for(const elem of collapsers) {
		elem.addEventListener('click', function() {
			let block;
			if(this.dataset.collapse) {
				block = document.getElementById(this.dataset.collapse);
			}
			else block = this.parentElement.nextSibling.nextSibling;
			if(block.style.display === "none") {
				removeClass(this, "collapsed");
				block.style.display = "";
			}
			else {
				addClass(this, "collapsed");
				block.style.display = "none";
			}
		}, false);
	}
	// --- End collapsers --- //
	

	// --- Selector change -- //
	const metadataSelector = document.getElementById('meta-selector');
	metadataSelector.addEventListener("change", function(event) {
		if(this.selectedIndex==0) {
				populate_sidebar();
		} else {
			const osu = OSU_FILES[this.value];
			if(osu) {
				populate_sidebar(osu);
			}
		}
	});
}

const OSUFILE_DOM_PRE = "O_file";

function setWarn(elem, on, str) {
	if(!elem) return;

	if(on) {
		addClass(elem, "warning");
		elem.setAttribute("title", "Warning"+ (str?": "+str:""));
	} else if(hasClass(elem,"warning")) {
		removeClass(elem, "warning");
		elem.removeAttribute("title");
	}
}

/// --- HOOKS --- ///

//Create DOM elem for file.
global.hook("FILE_ADD", function(arg) {
	const id = arg.id;
	const osu = arg.osu;
	//A new file has been added.
	//<div id='_file1' data-index='0' class='osufile' onclick='_removeFile("_file1")'>test</div>
	
	var elem = document.createElement("div");
	elem.setAttribute("id", OSUFILE_DOM_PRE+id);
	elem.setAttribute("class", "osufile");
	elem.innerText = osu.Fullname();
	elem.addEventListener("click", function() {
		_removeFile(OSUFILE_DOM_PRE+id);
	});
	elem.dataset.index = id;

	console.log(OSU_FILES.where(x=> x && osu.equals(x)).length);
	console.log(OSU_FILES.where(x=> x && x.equals(new OsuFile())||true));
	console.log(OSU_FILES);
	if(OSU_FILES.where(x=> x && x.equals(osu)).length > 1) {
		setWarn(elem, true, "File already added!");
	}

	document.getElementById("selector").appendChild(elem);

	repopulate_sidebar();
});

//Add to Metadata Selector
global.hook("FILE_ADD", function(arg) {
	const osu = arg.osu;
	const id = arg.id;

	var elem = document.createElement("option");
	elem.setAttribute("value", id);
	elem.setAttribute("id", "meta-sel-"+id);
	elem.innerText = osu.Shortname();

	var sel = document.getElementById("meta-selector");
	sel.appendChild(elem);

	if(!SIDEBAR_VIEWING) {
		repopulate_sidebar();
	}
});

//Remove Metadata selector
global.hook("FILE_REMOVE", function(arg) {
	const osu = arg.osu;
	const id = arg.id;

	document.getElementById("meta-sel-"+id).remove();

	repopulate_sidebar(true);
});

//Recalc dupe warnings
global.hook("FILE_REMOVE", function(arg) {
	const osu = arg.osu;
	const id = arg.id;

	for(let i =OSU_FILES.length-1;i>=0;i--) {
		if(!OSU_FILES[i]) continue;
		let setwarn = false;
		for(let j = 0;j<i;j++) {
			if(!OSU_FILES[j]) continue;
			if(OSU_FILES[j].equals(OSU_FILES[i]))
			{
				setwarn = true;
				break;
			} 
		}
		console.log(i+" "+setwarn);
		if(setwarn) setWarn(document.getElementById(OSUFILE_DOM_PRE+i), true, "File already added!");
		else setWarn(document.getElementById(OSUFILE_DOM_PRE+i), false);
	}
});