MediaWiki:Javascript-ungames-TestGame.js

document.getElementById("topNotice").style.display = "none";
document.getElementById("gameContent").style.display = "block";

mw.loader.load("https://en.uncyclopedia.co/w/index.php?title=MediaWiki:Javascript-ungames-TestGame.js/classes.js&action=raw&ctype=text/javascript");


// TODO: make it so customizing these values can make interesting gameplay challanges
var battleMode = "standard";
var placedCreatureLimit = 1;

// Creatures which have been placed down
var releasedCreatures = {};

// Which character is currently choosing their attacks (this will eventually allow the implementation of 1v1, 2v2, 1v2, etc., as well as POSSIBLE multiplayer, *no promises!*)
var characterTurn = 0;
var healthbars = {};
var alliedCharacters = ["0"];


function onLoaded() {
	try{
		// The id of 0 is always going to be the player
		releasedCreatures[0] = [new Creature("orangeKitten", {level: 5})];
		releasedCreatures[1] = [new Creature("orangeKitten", {level: 5})];
		
		startBattle();
		
		
	} catch(e) {
		mw.notify("Error during setup: " + e);
	}
}



function startBattle() {
	// Create healthbars
	healthbars = {};
	
	let healthbarCount = 0;
	let positionTopAlly = 0;
	let positionTopEnemies = 0;
	
	for (let characterId of Object.keys(releasedCreatures)) {
		healthbars[characterId] = [];
		let isAlly = alliedCharacters.includes(characterId);
		
		for (let creatureId = 0; placedCreatureLimit > creatureId; creatureId ++) {
			$("div[id=gameContent]").append(`<div id="healthbar-${healthbarCount}" style="position:absolute; top:${isAlly ? positionTopAlly : positionTopEnemies}em; ${isAlly ? "left:2em" : "right:2em"}"></div>`);
			healthbars[characterId].push(document.getElementById(`healthbar-${healthbarCount}`));
			healthbarCount++;
			
			if (isAlly) positionTopAlly += 4;
			else positionTopEnemies += 4;
		}
	}
	
	startNewTurn();
}


function startNewTurn() {
	let index = 0;
	characterTurn = 0;
	updateHealthbars();
	controlNextCreature();
	
	function controlNextCreature() {
		if (releasedCreatures[characterTurn].length <= index) {
			index = 0;
			characterTurn ++;
			
			if (releasedCreatures.length <= characterTurn) {
				// All characters have chosen their attacks
				simulateRound();
				return;
			}
		}
		
		// Player chooses their attacks
		if (characterTurn == 0) {
			controlPlayerCreature(index, controlNextCreature);
			index++;
		}
		// Enemies choose their attacks
		else {
			let creature = releasedCreatures[characterTurn][index];
			// AI enemies will pick a random attack at the moment.
			// Perhaps in the future I will implement a better AI system.
			let attackIndex = Math.floor(Math.random() * creature.attacks.length);
			creature.chosenAttack = creature.attacks[attackIndex];
			controlNextCreature();
		}
	}
}


var onPlayerChoseAttack;
// Allows the player to control which attack a creature will do.
function controlPlayerCreature(index, onDone) {
	let creature = releasedCreatures[characterTurn][index];
	let attacksHtml = "";
	
	let attackIndex = 0;
	onPlayerChoseAttack = onDone;
	for (let attack of creature.attacks) {
		attacksHtml += `<div class="attackButton" title="${attack.description}" onclick="playerChoseAttack(${index},${attackIndex})">${attack.name}</div>`;
		attackIndex++;
	}
	
	document.getElementById("game-myAttackList").innerHTML = attacksHtml;
}


function playerChoseAttack(creatureIndex, attackIndex) {
	// TODO: make it so if there are multiple targets, have the player choose the target
	document.getElementById("game-myAttackList").innerHTML = "";
	let creature = releasedCreatures[characterTurn][creatureIndex];
	
	creature.chosenAttack = creature.attacks[attackIndex];
	onPlayerChoseAttack();
}

function updateHealthbars() {
	for (let characterId of Object.keys(healthbars)) {
		let creatureId = 0;
		for (let healthbar of healthbars[characterId]) {
			healthbar.innerHTML = createHealthBar(releasedCreatures[characterId][creatureId]);
			creatureId++;
		}
	}
}


function createHealthBar(creature) {
	return `<div class="healthbar"><div><div style="display:inline; white-space: nowrap">(Lv ${creature.level}) ${creature.name}</div></div><div class="healthbarProgressBackground"></div><div class="healthbarProgress" style="background-color:green;width:${13 * (creature.health / creature.maxHealth)}em"></div></div>`;
}


function simulateRound() {
	// First, get the order of attacks
	let allAttckingCreatures = [];
	
	for (let characterId of Object.keys(releasedCreatures)) {
		for (let creature of releasedCreatures[characterId]) {
			if (creature.chosenAttack != null)
				allAttckingCreatures.push(creature);
		}
	}
	
	// Sets the attack order
	allAttckingCreatures.sort((a, b) => {
		return (a.chosenAttack.priority != b.chosenAttack.priority) ? a.chosenAttack.priority - b.chosenAttack.priority :
				(a.speed != b.speed) ? a.speed - b.speed : Math.random() - 0.5;
	});
	
	// TODO: simulate the fight that ensures
}




// Special functions designed for security

// TODO: When edititing a creature's nickname, make sure to run it though this function, so that it can't hold any html code.
function escapeHtml(unsafe){
	return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
}