MediaWiki:Common.js: Difference between revisions

Latest revision as of 12:23, 4 September 2026

/* Any JavaScript here will be loaded for all users on every page load. */
/* [[Template:Spoiler]] */
mw.hook('wikipage.content').add(function() {
	$('.spoiler-content').off('click').on('click', function(){
		$(this).toggleClass('show');
	}).find('a').on('click', function(e){
		e.stopPropagation();
	});
});

/* Code for ACC/DMG graph of weapons */
mw.hook( 'wikipage.content' ).add( ( $content ) => {
	if (document.getElementById('accuracy-damage-graph')) {
		var script = document.createElement('script');
		script.src = 'https://cdn.plot.ly/plotly-3.3.0.min.js';
		
		script.onload = function() {
			createAccDmgGraph();
		};
		
		document.head.appendChild(script);
	}
});

function generateAccCurve(idealRange, accMod, accDropoff, minRange, maxRange) {
	const accBase = 50;
	const accPeak = accBase + accMod;
	const accXValues = Array.from({ length: 15 }, (_, i) => i + 1);
	const accYValues = accXValues.map(x => {             
		const value = Math.max(0, accPeak - Math.abs(x - idealRange) * Math.abs(accDropoff));             
		return ((x < minRange || x > maxRange) ? null : value);         
	});              
	return { x: accXValues, y: accYValues };     
	
}      

function generateDmgCurve(damage, damageDropoff, minRange, maxRange, startY = 100) {         
	const relativeDmgDropoff = (Math.abs(damageDropoff) * startY) / damage;              
	const dmgXValues = Array.from({ length: 15 }, (_, i) => i + 1);       
	const dmgYValues = dmgXValues.map(x => {             
		const value = Math.max(0, startY - (x - 1) * relativeDmgDropoff);             
		return ((x < minRange || x > maxRange) ? null : value);         
	});              
	return { x: dmgXValues, y: dmgYValues };     
}

function createAccDmgGraph() {
	const minRange = 1;
	const idealRange = 4;
	const maxRange = 8;
	const accMod = 0;
	const accDropoff = -6;
	
	const damage = 9;
	const damageDropoff = -1;
	
	const accData = generateAccCurve(idealRange, accMod, accDropoff, minRange, maxRange);
	const dmgData = generateDmgCurve(damage, damageDropoff, minRange, maxRange);
	
	const trace2 = {         
		x: accData.x,         
		y: accData.y,
		mode: 'lines',
		name: 'Accuracy',
		line: { color: 'green' },
		};
		
	const trace1 = {
		x: dmgData.x,
		y: dmgData.y,
		mode: 'lines',
		name: 'HP Damage',
		line: { color: 'red' },
	};
		
	const layout = {
		autosize: false,
		width: 600,
		height: 200,
		margin: {
			l: 50,
			r: 50,
			b: 75,
			t: 50,
			pad: 0
		},
		xaxis: {
			title: {
				text: 'Distance in Tiles',
				font: {
					color: 'white'
					}
			},
			tickfont: {
				color: 'white'
			}, 			
			tickvals: Array.from({length: 15}, (_, i) => i+1),
			ticktext: [1, '', '', '', 5, '', '', '', '', 10, '', '', '', '', 15],
			showgrid: true,
			gridcolor: '#303030',
			zeroline: true,
			linecolor: 'white',
			ticklen: 4,
			tickwidth: 2,
			tickcolor: 'white'
		},         
		
		yaxis: {
			title: '',
			showgrid: false, 
			zeroline: false,
			range: [0, 100],
			showline: true,
			linecolor: 'white',
			tick0: 0,
			tickd: 50,
			tickcolor: 'white',
			showticklabels: false
		},         
		shapes: [
			{ type: 'line', x0: minRange, y0: 0, x1: minRange, y1: 100, line: { color: 'white', width: 1, dash: 'dash' } },
			{ type: 'line', x0: maxRange, y0: 0, x1: maxRange, y1: 100, line: { color: 'white', width: 1, dash: 'dash' } },
		],
		paper_bgcolor: '#15181b',
		plot_bgcolor: '#15181b',
	};      
	
	Plotly.newPlot('accuracy-damage-graph', [trace1, trace2], layout, {staticPlot: true}, {displayModeBar: false});		
}