bsparks/battle.html

## battle.html
<html>
<head>
<title>Battle!</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script>
//TEMPLATE!
//------------------------------------------------------
//Function:
//Purpose:
//Input:
//Output:
//Notes:
//------------------------------------------------------

//message/pane strings
var strMsg1 = "";

//**************************************************************************************************************************
//**************************************************************************************************************************
//ITEMS
//**************************************************************************************************************************
//**************************************************************************************************************************
function default_item(){
	this.name = "";
	this.desc = "";
	this.cost = 0;
	this.mod = 0;
	this.img = "";
}

//item categories A=Weapons B=Armor(chest) C=Armor(Helm) D=Armor(boots) E=Armor(gloves) F=Armor(legs) G=Shields
//H=Rings I=Misc(potions,scrolls,etc)
var numItemsA = 1;
var numItemsB = 1;
var numItemsC = 0;
var numItemsD = 0;
var numItemsE = 0;
var numItemsF = 0;
var numItemsG = 0;
var numItemsH = 0;
var numItemsI = 18;

var itemsA = new Array(numItemsA);
for (i=0; i<numItemsA; i++){
	itemsA[i] = new default_item();
}
var itemsB = new Array(numItemsB);
for (i=0; i<numItemsB; i++){
	itemsB[i] = new default_item();
}
var itemsI = new Array(numItemsI);
for (i=0; i<numItemsI; i++){
	itemsI[i] = new default_item();
}

function init_items(){
	//A = WEAPONS
	itemsA[0].name = "Dagger";
	itemsA[0].desc = "A sharp pointy dagger.";
	itemsA[0].cost = 10;
	itemsA[0].mod  = 4;
	itemsA[0].img  = "<img src=\"images\/dagger.gif\" alt=\"" + itemsA[0].desc + "\">";

	//B = ARMOR(CHEST)
	itemsB[0].name = "Leather Jerkin";
	itemsB[0].desc = "Provides meager protection.";
	itemsB[0].cost = 67;
	itemsB[0].mod  = 5;
	itemsB[0].img  = "<img src=\"images\/leatherchest.gif\" alt=\"" + itemsB[0].desc + "\">";

	//I = MISC
	itemsI[0].name = "Heal Potion";
	itemsI[0].desc = "A potion of healing.";
	itemsI[0].cost = 20;
	itemsI[0].mod = 50;
	itemsI[0].img = "<img src=\"images\/potion_red.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[1].name = "Fire Scroll";
	itemsI[1].desc = "A fire spell scroll.";
	itemsI[1].cost = 50;
	itemsI[1].mod = 150;
	itemsI[1].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[2].name = "Antidote Potion";
	itemsI[2].desc = "A antidote potion.";
	itemsI[2].cost = 50;
	itemsI[2].mod = 0;
	itemsI[2].img = "<img src=\"images\/potion_yellow.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[3].name = "Fire Scroll";
	itemsI[3].desc = "A fire spell scroll.";
	itemsI[3].cost = 50;
	itemsI[3].mod = 150;
	itemsI[3].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[4].name = "Fire Scroll";
	itemsI[4].desc = "A fire spell scroll.";
	itemsI[4].cost = 50;
	itemsI[4].mod = 150;
	itemsI[4].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[5].name = "Fire Scroll";
	itemsI[5].desc = "A fire spell scroll.";
	itemsI[5].cost = 50;
	itemsI[5].mod = 150;
	itemsI[5].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[6].name = "Fire Scroll";
	itemsI[6].desc = "A fire spell scroll.";
	itemsI[6].cost = 50;
	itemsI[6].mod = 150;
	itemsI[6].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[7].name = "Fire Scroll";
	itemsI[7].desc = "A fire spell scroll.";
	itemsI[7].cost = 50;
	itemsI[7].mod = 150;
	itemsI[7].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[8].name = "Fire Scroll";
	itemsI[8].desc = "A fire spell scroll.";
	itemsI[8].cost = 50;
	itemsI[8].mod = 150;
	itemsI[8].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[9].name = "Fire Scroll";
	itemsI[9].desc = "A fire spell scroll.";
	itemsI[9].cost = 50;
	itemsI[9].mod = 150;
	itemsI[9].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[10].name = "Fire Scroll";
	itemsI[10].desc = "A fire spell scroll.";
	itemsI[10].cost = 50;
	itemsI[10].mod = 150;
	itemsI[10].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[11].name = "Fire Scroll";
	itemsI[11].desc = "A fire spell scroll.";
	itemsI[11].cost = 50;
	itemsI[11].mod = 150;
	itemsI[11].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[12].name = "Fire Scroll";
	itemsI[12].desc = "A fire spell scroll.";
	itemsI[12].cost = 50;
	itemsI[12].mod = 150;
	itemsI[12].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[13].name = "Fire Scroll";
	itemsI[13].desc = "A fire spell scroll.";
	itemsI[13].cost = 50;
	itemsI[13].mod = 150;
	itemsI[13].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[14].name = "Fire Scroll";
	itemsI[14].desc = "A fire spell scroll.";
	itemsI[14].cost = 50;
	itemsI[14].mod = 150;
	itemsI[14].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[15].name = "Fire Scroll";
	itemsI[15].desc = "A fire spell scroll.";
	itemsI[15].cost = 50;
	itemsI[15].mod = 150;
	itemsI[15].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[16].name = "Fire Scroll";
	itemsI[16].desc = "A fire spell scroll.";
	itemsI[16].cost = 50;
	itemsI[16].mod = 150;
	itemsI[16].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";

	itemsI[17].name = "Fire Scroll";
	itemsI[17].desc = "A fire spell scroll.";
	itemsI[17].cost = 50;
	itemsI[17].mod = 150;
	itemsI[17].img = "<img src=\"images\/scroll.gif\" alt=\"" + itemsI[0].desc + "\">";
}

//**************************************************************************************************************************
//**************************************************************************************************************************
//PLAYER
//**************************************************************************************************************************
//**************************************************************************************************************************
//player related variables
function player_data(){
	this.name = " ";
	this.level = 0;
	this.exp = 0;
	this.gold = 0;
	this.str = 0;
	this.end = 0;
	this.spd = 0;
	this.hp = 0;
	this.mhp = 0;
	this.potion = 0;
}

//create one instance of the player_data object for the player
var player = new player_data();

//array of experience needed for every level, assign in init()
var expchart = new Array(20);

//------------------------------------------------------
//Function: check_levelup
//Purpose: test and apply levelup of player
//Input:
//Output:
//Notes:
//------------------------------------------------------
function check_levelup(){
	numTemp = 0;
	if (player.exp >= expchart[player.level-1]){
		player.level++;
		strMsg1 = "You have gained a level!!<br>";
		printMsg(strMsg1.fontcolor('gold'));
		strMsg1 = "You are now level " + player.level + "!<br>";
		printMsg(strMsg1.fontcolor('gold'));

		//per level give random health to player from 10 to str + end
		numTemp = Math.floor(Math.random()*(player.end + player.str))+10;
		player.mhp += numTemp;
		player.hp = player.mhp;
		strMsg1 = "You have gained <font color=\"green\">" + numTemp + "<\/font> health!<br>";
		printMsg(strMsg1.fontcolor('gold'));

		//randomly increase either strength or speed by random 10
		numTemp = Math.floor(Math.random()*3)+1;
		switch (numTemp){
			case 1:
				numTemp = Math.floor(Math.random()*10)+1;
				player.spd += numTemp;
				strMsg1 = "You have gained <font color=\"green\">" + numTemp + "<\/font> speed!<br>";
				printMsg(strMsg1.fontcolor('gold'));
				break;
			case 2:
				numTemp = Math.floor(Math.random()*10)+1;
				player.str += numTemp;
				strMsg1 = "You have gained <font color=\"green\">" + numTemp + "<\/font> strength!<br>";
				printMsg(strMsg1.fontcolor('gold'));
				break;
			case 3:
				numTemp = Math.floor(Math.random()*10)+1;
				player.end += numTemp;
				strMsg1 = "You have gained <font color=\"green\">" + numTemp + "<\/font> endurance!<br>";
				printMsg(strMsg1.fontcolor('gold'));
				break;
		}

		//update stats window
		draw_stats();
	}
}

//------------------------------------------------------
//Function: play
//Purpose: start the game, do character creation
//Input: na
//Output: na
//Notes: todo: change this to just new char gen
//------------------------------------------------------
function play(){
	document.all.infview.innerHTML = "<center>Character Creation<\/center><br><br>";
	document.all.infview.innerHTML += "Name: <input type=\"text\" id=\"txtName\" value=\"" + player.name + "\"><br>";
	document.all.infview.innerHTML += "Strength : " + player.str + "<br>";
	document.all.infview.innerHTML += "Endurance : " + player.end + "<br>";
	document.all.infview.innerHTML += "Speed : " + player.spd + "<br>";
	document.all.infview.innerHTML += "Health : " + player.hp + "<br>";
	document.all.infview.innerHTML += "<input type=\"button\" value=\"Reroll\" onclick=\"reroll()\" id=\"button\"1 name=\"button\"1>";
	document.all.infview.innerHTML += "<input type=\"button\" value=\"Accept\" onclick=\"gotown()\" id=\"button\"1 name=\"button\"1>";
}

//------------------------------------------------------
//Function: reroll
//Purpose: rerolling the stats...
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function reroll(){
	player.name = document.all.txtName.value;
	player.level = 1;
	player.str = Math.floor(Math.random()*40)+10;
	player.spd = Math.floor(Math.random()*40)+10;
	player.end = Math.floor(Math.random()*40)+10;
	player.mhp = player.end + player.str;
	player.hp = player.mhp;
	player.gold = 100;
	play();
}

function draw_equip(){
	//document.all.infview.innerHTML = "Inventory<br>";
	document.all.infview.innerHTML = "<img src=\"images\/equipback.gif\">";

	//document.all.infview.innerHTML += itemsA[0].name + "<br>";
	document.all.infview.innerHTML += itemsA[0].img;
}
//**************************************************************************************************************************
//**************************************************************************************************************************
//NPC
//**************************************************************************************************************************
//**************************************************************************************************************************
//------------------------------------------------------
//Function: npcs
//Purpose: base object for an npc
//Input: na
//Output: na
//Notes: do not use just the base class!
//------------------------------------------------------
function npcs(){
	this.name = "";
	this.desc = "";
	this.img = "";
}

var numNpc = 2;
var npc = new Array(numNpc);

function npcinit(){
	for (i=0;i<numNpc;i++){
		npc[i] = new npcs();
	}

	npc[0].name = "Lothas";
	npc[0].img = "<img src=\"images\/priest.gif\" class=\"npcimg\">";
	npc[0].desc = "A priest of the church.";

	npc[1].name = "Progan";
	npc[1].img = "<img src=\"images\/shopkeep.gif\" class=\"npcimg\">";
	npc[1].desc = "A shop keeper.";
}


//------------------------------------------------------
//Function: npcinfo
//Purpose: display info for a npc into info pane
//Input: numIndex, the index of the npc array
//Output: npc info to the infoview pane
//Notes:
//------------------------------------------------------
function npcinfo(numIndex){
	document.all.infview.innerHTML = npc[numIndex].name + "<br><br>";
	document.all.infview.innerHTML += npc[numIndex].desc;
}

//**************************************************************************************************************************
//**************************************************************************************************************************
//MONSTER
//**************************************************************************************************************************
//**************************************************************************************************************************
//------------------------------------------------------
//Function: mob
//Purpose: base object for monsters
//Input: na
//Output: na
//Notes: do not use just the base class!
//------------------------------------------------------
function mob(){
	this.name = "None";
	this.exp = 0;
	this.gold = 0;
	this.str = 0;
	this.spd = 0;
	this.hp = 0;
	this.mhp = 0;
	this.img = "none.bmp";
	this.desc = "Nothing, if this shows up it's bad.";
}

//monster related variables
//monsterA = easy list, B medium C hard D superhard E boss(etc)
var numMobTotalA = 6;
var numMobTotalB = 0;
var numMobTotalC = 0;
var numMobTotalD = 0;
var numMobTotalE = 0;
var monsterA = new Array(numMobTotalA);
var curMonster = new mob();

//------------------------------------------------------
//Function: mobinit
//Purpose: load data for monsters into arrays
//Input: na
//Output: na
//Notes: MUST be called in init!
//------------------------------------------------------
function mobinit(){
	for (i=0;i<numMobTotalA;i++){
		monsterA[i] = new mob();
	}

	//populate monster data
	monsterA[0].name = "Giant Spider";
	monsterA[0].exp = 35;
	monsterA[0].gold = Math.floor(Math.random()*30)+1;
	monsterA[0].str = 20;
	monsterA[0].spd = 40;
	monsterA[0].hp = 30;
	monsterA[0].mhp = 30;
	monsterA[0].img = "<img src=\"images\/lgspider.gif\" class=\"mobimg\">";
	monsterA[0].desc = "A giant spider.<br>Watch out for its deadly venom and sticky webs.<br>";

	monsterA[1].name = "Kobold";
	monsterA[1].exp = 10;
	monsterA[1].gold = Math.floor(Math.random()*30)+1;
	monsterA[1].str = 10;
	monsterA[1].spd = 30;
	monsterA[1].hp = 15;
	monsterA[1].mhp = 15;
	monsterA[1].img = "<img src=\"images\/kobold.gif\" class=\"mobimg\">";
	monsterA[1].desc = "<p>The typical kobold is a fur-covered, dog headed creature ranging in height from ";
	monsterA[1].desc += "3 to 4 feet when standing on its retrograde hind legs.  It has long arms ending with ";
	monsterA[1].desc += "sharp claws, with which it fights while standing on its legs, but kobolds do run on ";
	monsterA[1].desc += "all fours.<\/p><p>Kobolds are agressive and will attack anything deemed a threat to ";
	monsterA[1].desc += "them and that they feel strong enough to take down.<\/p>";

	monsterA[2].name = "Giant Snake";
	monsterA[2].exp = 25;
	monsterA[2].gold = Math.floor(Math.random()*30)+1;
	monsterA[2].str = 30;
	monsterA[2].spd = 60;
	monsterA[2].hp = 37;
	monsterA[2].mhp = 37;
	monsterA[2].img = "<img src=\"images\/snake.gif\" class=\"mobimg\">";
	monsterA[2].desc = "<p>Giant snake.... ooooh hissssss<\/p>";

	monsterA[3].name = "Skeleton";
	monsterA[3].exp = 75;
	monsterA[3].gold = Math.floor(Math.random()*30)+1;
	monsterA[3].str = 45;
	monsterA[3].spd = 40;
	monsterA[3].hp = 60;
	monsterA[3].mhp = 60;
	monsterA[3].img = "<img src=\"images\/skeleton.gif\" class=\"mobimg\">";
	monsterA[3].desc = "<p>A minion of the undead. Reanimated for your killing pleasure. heh...<\/p>";

	monsterA[4].name = "Mantis";
	monsterA[4].exp = 8;
	monsterA[4].gold = Math.floor(Math.random()*30)+1;
	monsterA[4].str = 8;
	monsterA[4].spd = 60;
	monsterA[4].hp = 10;
	monsterA[4].mhp = 10;
	monsterA[4].img = "<img src=\"images\/mantis.gif\" class=\"mobimg\">";
	monsterA[4].desc = "<p>A giant preying mantis..<\/p>";

	monsterA[5].name = "Carnivorous Plant";
	monsterA[5].exp = 40;
	monsterA[5].gold = Math.floor(Math.random()*30)+1;
	monsterA[5].str = 32;
	monsterA[5].spd = 40;
	monsterA[5].hp = 45;
	monsterA[5].mhp = 45;
	monsterA[5].img = "<img src=\"images\/plant.gif\" class=\"mobimg\">";
	monsterA[5].desc = "<p>A giant carnivorous plant.. Feed me Seymour!<\/p>";
}

//------------------------------------------------------
//Function: mobinfo
//Purpose: display info for monsters into info pane
//Input: numIndex, the index of the monster array
//Output: monster info to the infoview pane
//Notes:
//------------------------------------------------------
function mobinfo(numIndex){
	document.all.infview.innerHTML = monsterA[numIndex].name + "<br><br>";
	document.all.infview.innerHTML += monsterA[numIndex].desc;
}

//**************************************************************************************************************************
//**************************************************************************************************************************
//LOCATIONS
//**************************************************************************************************************************
//**************************************************************************************************************************
//location related
function loc(){
	this.name = "";
	this.img = "";
	this.desc = "";
	this.encounterMsg = "";
}
var numLocations = 5;
var numCurLoc = 0;
var location = new Array(numLocations);

//------------------------------------------------------
//Function: locinit
//Purpose: load data for locations into arrays
//Input: na
//Output: na
//Notes: MUST be called in init!
//------------------------------------------------------
function locinit(){
	for (i=0;i<numLocations;i++){
		location[i] = new loc();
	}

	location[0].name = "Town of Keekleos";
	location[0].img = "<img src=\"images\/town.gif\">";
	location[0].desc = "A lovely town. Really.";
	location[0].encounterMsg = "jumps out of an alley";

	location[1].name = "Forest";
	location[1].img = "<img src=\"images\/forest.bmp\">";
	location[1].desc = "A forest, there are trees here...";
	location[1].encounterMsg = "leaps from the trees";

	location[2].name = "Mountain";
	location[2].img = "<img src=\"images\/mountain.jpg\">";
	location[2].desc = "A mountain pass...";
	location[2].encounterMsg = "runs down the mountain";

	location[3].name = "Church";
	location[3].img = "<img src=\"images\/church.gif\">";
	location[3].desc = "A beautiful temple.";
	location[3].encounterMsg = "jumps out of the shadows";

	location[4].name = "Shop";
	location[4].img = "<img src=\"images\/shop.gif\">";
	location[4].desc = "A humble shop.";
	location[4].encounterMsg = "jumps out of the shadows";
}

//------------------------------------------------------
//Function: init
//Purpose: load all startup stuff
//Input: na
//Output: na
//Notes: called in body onload
//------------------------------------------------------
function init(){
	strMsg1 = "Welcome to the Battle Arena!<br><br>";
	strMsg1 += "Your travels have brought you to a land of mystery and wonder.<br>";
	strMsg1 += "It has been many moons since you left your home in search of adventure, what will you find here?<br>";

	printMsg(strMsg1);

	//display title graphic
	document.all.gfxview.innerHTML = "<img src=\"images\/dragon.bmp\">";

	//items list init
	init_items();

	//experience chart
	expchart_init();

	//load location data
	locinit();

	//load npc data
	npcinit();

	//load monster data
	mobinit();

	//begin with the starting buttons
	start_buttons();
}

function expchart_init(){
	expchart[0] = 100;
	expchart[1] = 250;
	expchart[2] = 400;
	expchart[3] = 550;
	expchart[4] = 700;
	expchart[5] = 1000;
	expchart[6] = 1300;
	expchart[7] = 1600;
	expchart[8] = 1900;
	expchart[9] = 2200;
	expchart[10] = 3200;
	expchart[11] = 4200;
	expchart[12] = 5200;
	expchart[13] = 6200;
	expchart[14] = 7200;
	expchart[15] = 10000;
	expchart[16] = 15000;
	expchart[17] = 20000;
	expchart[18] = 25000;
	expchart[19] = 40000;
}

//------------------------------------------------------
//Function: start_buttons
//Purpose: draw buttons for start of play
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function start_buttons(){
	document.all.cmdview.innerHTML = "<input type=\"button\" value=\"New\" class=\"cmdbut\" onclick=\"play()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Manual\" class=\"cmdbut\" onclic=\"read_docs()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"About\" class=\"cmdbut\" onclick=\"about()\">";
}

//------------------------------------------------------
//Function: town_buttons
//Purpose: draw buttons appropriate for in town
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function town_buttons(){
	document.all.cmdview.innerHTML = "<input type=\"button\" value=\"Forest\" class=\"cmdbut\" onclick=\"explore_buttons(1)\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Mountain\" class=\"cmdbut\" onclick=\"explore_buttons(2)\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Shop\" class=\"cmdbut\" onclick=\"shop()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Inn\" class=\"cmdbut\" onclick=\"inn()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Church\" class=\"cmdbut\" onclick=\"church()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Item\" class=\"cmdbut\" onclick=\"item()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Inventory\" class=\"cmdbut\" onclick=\"draw_equip()\">";
	//update player stats window
	draw_stats();
}

function item(){
	if (player.potion >= 1){
		strMsg1 = "You drink a potion.<br>";
		printMsg(strMsg1);
		player.potion--;
		numTemp = Math.floor(Math.random()*40)+10;
		player.hp += numTemp;
		if (player.hp > player.mhp)
			player.hp = player.mhp;
		strMsg1 = "You regain " + numTemp + " health.<br>";
		printMsg(strMsg1.fontcolor('lightgreen'));
		draw_stats();
	} else {
		strMsg1 = "You do not have any potions left!<br>";
		printMsg(strMsg1.fontcolor('red'));
	}
}

//**************************************************************************************************************************
//**************************************************************************************************************************
//SHOP
//**************************************************************************************************************************
//**************************************************************************************************************************
function shop(){
	//draw background and npc
	document.all.gfxview.innerHTML = location[4].img;
	document.all.gfxview.innerHTML += npc[1].img;

	//command buttons for the shop
	document.all.cmdview.innerHTML = "<input type=\"button\" value=\"Town\" class=\"cmdbut\" onclick=\"gotown()\">";

	strMsg1 = "Welcome to my humble shop.<br>";
	printMsg(strMsg1);
	strMsg1 = "Please browse my <a href=\"#na\" onclick=\"browse_wares(1)\"><font color=\"lightgreen\">wares<\/font><\/a>.<br>";
	printMsg(strMsg1);
}

function browse_wares(numCategory){
	document.all.infview.innerHTML = "<a href=\"#na\" onclick=\"browse_wares(1)\">Weapons<\/a>";
	document.all.infview.innerHTML += " <a href=\"#na\" onclick=\"browse_wares(2)\">Armor<\/a>";
	document.all.infview.innerHTML += " <a href=\"#na\" onclick=\"browse_wares(3)\">Shields<\/a>";
	document.all.infview.innerHTML += " <a href=\"#na\" onclick=\"browse_wares(4)\">Misc<\/a>";
	document.all.infview.innerHTML += "<br><br>";

	switch (numCategory){
		case 1:
			for (i=0; i<numItemsA; i++){
				document.all.infview.innerHTML += itemsA[i].img;
				document.all.infview.innerHTML += " <a href=\"#na\" onclick=\"buy_potion()\"><font color=\"lightgreen\">" + itemsA[i].name + "<\/font><\/a>";
				document.all.infview.innerHTML += " <font color=\"gold\">" + itemsA[i].cost + "<\/font> gold.<br>";
			}
			break;
		case 2:
			for (i=0; i<numItemsB; i++){
				document.all.infview.innerHTML += itemsB[i].img;
				document.all.infview.innerHTML += " <a href=\"#na\" onclick=\"buy_potion()\"><font color=\"lightgreen\">" + itemsB[i].name + "<\/font><\/a>";
				document.all.infview.innerHTML += " <font color=\"gold\">" + itemsB[i].cost + "<\/font> gold.<br>";
			}
			break;
		case 3:
			break;
		case 4:
			for (i=0; i<numItemsI; i++){
				document.all.infview.innerHTML += itemsI[i].img;
				document.all.infview.innerHTML += " <a href=\"#na\" onclick=\"buy_potion()\"><font color=\"lightgreen\">" + itemsI[i].name + "<\/font><\/a>";
				document.all.infview.innerHTML += " <font color=\"gold\">" + itemsI[i].cost + "<\/font> gold.<br>";
			}
			break;
	}
}

function buy_potion(){
	if (player.gold >= 20){
		player.gold -= 20;
		player.potion++;
		strMsg1 = "Thank you for your purchase.<br>";
		printMsg(strMsg1.fontcolor('gold'));
		draw_stats();
	} else {
		strMsg1 = "You do not have enough gold!<br>";
		printMsg(strMsg1.fontcolor('red'));
	}
}

//**************************************************************************************************************************
//**************************************************************************************************************************
//CHURCH
//**************************************************************************************************************************
//**************************************************************************************************************************

//------------------------------------------------------
//Function: church
//Purpose: do the church stuff
//Input: na
//Output: na
//Notes: buttons will be in here not separate function
//------------------------------------------------------
function church(){
	//draw the background images
	document.all.gfxview.innerHTML = location[3].img;
	document.all.gfxview.innerHTML += npc[0].img;

	//command buttons for the church
	document.all.cmdview.innerHTML = "<input type=\"button\" value=\"Town\" class=\"cmdbut\" onclick=\"gotown()\">";

	//info pane
	document.all.infview.innerHTML = "Church";

	//messages to the player
	strMsg1 = "Welcome to the temple my child.<br> I am father <a href=\"#na\" onclick=\"npcinfo(0)\">";
	strMsg1 += "<font color=\"lightgreen\">" + npc[0].name + "<\/font><\/a>.";
	strMsg1 += " Do you come here to <a href=\"#na\"><font color=\"lightgreen\">pray<\/font><\/a> or would you like other ";
	strMsg1 += "<a href=\"#na\" onclick=\"church_services()\"><font color=\"lightgreen\">services<\/font><\/a>.<br>";
	printMsg(strMsg1);
}

function church_services(){
	document.all.infview.innerHTML = "Services<br><br>";
	document.all.infview.innerHTML += "Currently the church has the following services to offer:<br>";
	document.all.infview.innerHTML += "<a href=\"#na\" onclick=\"church_healing()\"><font color=\"lightgreen\">Healing<\/font><\/a>";
	document.all.infview.innerHTML += " <font color=\"gold\">10<\/font> gold.<br>";
}

function church_healing(){
	if (player.gold >= 10){
		player.gold -= 10;
		player.hp = player.mhp;
		strMsg1 = "You have been healed.<br>";
		printMsg(strMsg1.fontcolor('gold'));
		draw_stats();
	} else {
		strMsg1 = "You do not have enough gold!<br>";
		printMsg(strMsg1.fontcolor('red'));
	}
}

//------------------------------------------------------
//Function: explore_buttons
//Purpose: draw buttons appropriate for exploring
//Input: numLoc, index of location
//Output: na
//Notes:
//------------------------------------------------------
function explore_buttons(numLoc){
	document.all.gfxview.innerHTML = location[numLoc].img;
	strMsg1 = "You enter the " + location[numLoc].name + ".<br>";
	printMsg(strMsg1);
	numCurLoc = numLoc;
	document.all.cmdview.innerHTML = "<input type=\"button\" value=\"Explore\" class=\"cmdbut\" onclick=\"explore()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Item\" class=\"cmdbut\" onclick=\"item()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Town\" class=\"cmdbut\" onclick=\"gotown()\">";
}

//------------------------------------------------------
//Function: combat_buttons()
//Purpose: draw buttons appropriate for combat
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function combat_buttons(){
	document.all.cmdview.innerHTML = "<input type=\"button\" value=\"Fight\" class=\"cmdbut\" onclick=\"fight()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Item\" class=\"cmdbut\" onclick=\"item()\">";
	document.all.cmdview.innerHTML += "<input type=\"button\" value=\"Run\" class=\"cmdbut\" onclick=\"run_away()\">";
	//update player stats window
	draw_stats();
}

function run_away(){
	strMsg1 = "You flee in terror!<br>";
	printMsg(strMsg1.fontcolor('red'));
	gotown();
}

//------------------------------------------------------
//Function: dead_buttons()
//Purpose: draw buttons appropriate for being dead
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function dead_buttons(){
	document.all.cmdview.innerHTML = "<input type=\"button\" value=\"Retry\" class=\"cmdbut\" onclick=\"gotown()\">";
}

//------------------------------------------------------
//Function: fight
//Purpose: combat sequence
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function fight(){
	//combat variables
	//attacker spd vs random(low range - high range)
	numLRange = Math.abs(player.spd - curmonster.spd);
	numHRange = player.spd + curmonster.spd;

	numDmg = Math.floor(Math.random()*player.str)+1;

	strMsg1 = "You attack the " + curmonster.name;
	if (player.spd >= Math.floor(Math.random()*numHRange) + numLRange){
		strMsg1 += " and hit for ";
		strMsg1 += "<font color=\"red\">" + numDmg + "<\/font> damage!<br>";
		curmonster.hp -= numDmg;
	} else {
		strMsg1 += " and <font color=\"red\">miss!<\/font><br>";
	}
	printMsg(strMsg1.fontcolor('green'));
	if (curmonster.hp <= 0){
		strMsg1 = "The " + curmonster.name + " has been slain!<br>";
		strMsg1 += "You gain " + curmonster.exp + " experience!<br>";
		player.exp += curmonster.exp;
		strMsg1 += "You gain " + curmonster.gold + " gold!<br>";
		player.gold += curmonster.gold;
		printMsg(strMsg1.fontcolor('gold'));
		check_levelup();
		//reset the monsters hp
		curmonster.hp = curmonster.mhp;
		explore_buttons(numCurLoc);
	} else {
		numDmg = Math.floor(Math.random()*curmonster.str)+1;
		strMsg1 = "The " + curmonster.name + " attacks you ";
		if (curmonster.spd >= Math.floor(Math.random()*numHRange)+numLRange){
			strMsg1 += " and hits you for <font color=\"red\">" + numDmg + "<\/font> damage!<br>";
			player.hp -= numDmg;
			printMsg(strMsg1.fontcolor('orange'));
			if (player.hp <= 0){
				strMsg1 = "You have died!!!!<br>";
				printMsg(strMsg1.fontcolor('red'));
				document.all.gfxview.innerHTML = "<image src=\"images\/dead.gif\">";
				dead_buttons();
			}
		} else {
			strMsg1 += " and <font color=\"red\">misses!<\/font><br>";
			printMsg(strMsg1);
		}
	}
	//update player stats window
	draw_stats();
}

//------------------------------------------------------
//Function: draw_stats
//Purpose: draw the player stats window
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function draw_stats(){
	document.all.stsview.innerHTML = "Name : " + player.name + "<br>";
	document.all.stsview.innerHTML += "Level: " + player.level + "<br>";
	document.all.stsview.innerHTML += "Str: " + player.str + "<br>";
	document.all.stsview.innerHTML += "End: " + player.end + "<br>";
	document.all.stsview.innerHTML += "Spd: " + player.spd + "<br>";
	document.all.stsview.innerHTML += "HP: " + player.hp + "\/" + player.mhp + "<br>";
	document.all.stsview.innerHTML += "XP: " + player.exp + "<br>";
	document.all.stsview.innerHTML += "Gold: " + player.gold + "<br>";
}

//------------------------------------------------------
//Function: gotown
//Purpose: accept the stats...
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function gotown(){
	if (player.hp < 1)
		player.hp = 1;
	document.all.infview.innerHTML = " ";
	document.all.gfxview.innerHTML = location[0].img;
	strMsg1 = "You enter "+ location[0].name + " .<br>";
	printMsg(strMsg1);
	draw_stats();
	town_buttons();
}

//------------------------------------------------------
//Function: about
//Purpose: display the game info and credits
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function about(){
	document.all.infview.innerHTML = "Battle Quest v.07<br><br>";
	document.all.infview.innerHTML += "Programmed by Ben Sparks<br>";
	document.all.infview.innerHTML += "A JavaScript RPG inspired by Hyuu The Destroyer<br>";
	document.all.infview.innerHTML += "Special Thanks To:<br> Ryan Cope for his help, motivation, graphics, and knowledge.<br>";
	document.all.infview.innerHTML += "Hue Henry for the legacy of Hyuu.<br>";
}

//------------------------------------------------------
//Function: explore
//Purpose: explore an area, generate random events
//Input: na
//Output: na
//Notes:
//------------------------------------------------------
function explore(){
	//generate an encounter
	numEncounter = Math.floor(Math.random()*6)+1;
	strMsg1 = "You begin to explore...<br>";
	switch(numEncounter){
		case 1:
			curmonster = monsterA[5];
			strMsg1 += "A <a href=\"#na\" onclick=\"mobinfo(5)\" class=\"moblink\">"+ monsterA[5].name + "<\/a> approaches from the woods!<br>";
			document.all.gfxview.innerHTML += monsterA[5].img;
			//activate the combat buttons
			combat_buttons();
			break;
		case 2:
			curmonster = monsterA[0];
			strMsg1 += "A <a href=\"#na\" onclick=\"mobinfo(0)\" class=\"moblink\">"+ monsterA[0].name + "<\/a> approaches from the woods!<br>";
			document.all.gfxview.innerHTML += monsterA[0].img;
			//activate the combat buttons
			combat_buttons();
			break;
		case 3:
			curmonster = monsterA[2];
			strMsg1 += "A <a href=\"#na\" onclick=\"mobinfo(2)\" class=\"moblink\">"+ monsterA[2].name + "<\/a> approaches from the woods!<br>";
			document.all.gfxview.innerHTML += monsterA[2].img;
			//activate the combat buttons
			combat_buttons();
			break;
		case 4:
			curmonster = monsterA[3];
			strMsg1 += "A <a href=\"#na\" onclick=\"mobinfo(3)\" class=\"moblink\">"+ monsterA[3].name + "<\/a> approaches from the woods!<br>";
			document.all.gfxview.innerHTML += monsterA[3].img;
			//activate the combat buttons
			combat_buttons();
			break;
		case 5:
			curmonster = monsterA[4];
			strMsg1 += "A <a href=\"#na\" onclick=\"mobinfo(4)\" class=\"moblink\">"+ monsterA[4].name + "<\/a> approaches from the woods!<br>";
			document.all.gfxview.innerHTML += monsterA[4].img;
			//activate the combat buttons
			combat_buttons();
			break;
		case 6:
			curmonster = monsterA[1];
			strMsg1 += "A <a href=\"#na\" onclick=\"mobinfo(1)\" class=\"moblink\">"+ monsterA[1].name + "<\/a> approaches from the woods!<br>";
			document.all.gfxview.innerHTML += monsterA[1].img;
			//activate the combat buttons
			combat_buttons();
			break;
	}
	printMsg(strMsg1);
}

//------------------------------------------------------
//Function: printMsg
//Purpose: print messages to the message window
//Input: strMsg, the message you want to print
//Output: html to message pane
//Notes:
//------------------------------------------------------
function printMsg(strMsg){
	strTmp = document.all.msgview.innerHTML;
	strMsg = strMsg + strTmp;
	document.all.msgview.innerHTML = strMsg;
}

</script>
</head>
<body onload="init()">
<span name="infview" id="infview" class="infview"></span>
<span name="gfxview" id="gfxview" class="gfxview"></span>
<span name="msgview" id="msgview" class="msgview"></span>
<span name="cmdview" id="cmdview" class="cmdview"></span>
<span name="stsview" id="stsview" class="stsview"></span>
</body>
</html>

## style.css
BODY
{
    BACKGROUND-COLOR: green
}
.infview
{
    BORDER-RIGHT: 4px groove;
    PADDING-RIGHT: 0px;
    BORDER-TOP: 4px groove;
    PADDING-LEFT: 2px;
    LEFT: 0px;
    PADDING-BOTTOM: 0px;
    OVERFLOW: auto;
    BORDER-LEFT: 4px groove;
    WIDTH: 255px;
    COLOR: green;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: 4px groove;
    POSITION: absolute;
    TOP: 0px;
    HEIGHT: 520px;
    BACKGROUND-COLOR: black
}
.gfxview
{
    BORDER-RIGHT: 8px groove;
    BORDER-TOP: 8px groove;
    LEFT: 256px;
    OVERFLOW: hidden;
    BORDER-LEFT: 8px groove;
    WIDTH: 640px;
    BORDER-BOTTOM: 8px groove;
    POSITION: absolute;
    TOP: 0px;
    HEIGHT: 384px;
    BACKGROUND-COLOR: black
}
.msgview
{
    BORDER-RIGHT: 4px groove;
    PADDING-RIGHT: 4px;
    BORDER-TOP: 4px groove;
    PADDING-LEFT: 4px;
    LEFT: 256px;
    PADDING-BOTTOM: 4px;
    OVERFLOW: auto;
    BORDER-LEFT: 4px groove;
    WIDTH: 640px;
    COLOR: lightblue;
    PADDING-TOP: 4px;
    BORDER-BOTTOM: 4px groove;
    POSITION: absolute;
    TOP: 386px;
    HEIGHT: 134px;
    BACKGROUND-COLOR: black
}
.cmdview
{
    BORDER-RIGHT: 2px groove;
    PADDING-RIGHT: 2px;
    BORDER-TOP: 2px groove;
    PADDING-LEFT: 2px;
    LEFT: 897px;
    PADDING-BOTTOM: 2px;
    OVERFLOW: hidden;
    BORDER-LEFT: 2px groove;
    WIDTH: 128px;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: 2px groove;
    POSITION: absolute;
    TOP: 0px;
    HEIGHT: 256px;
    BACKGROUND-COLOR: black
}
.stsview
{
    BORDER-RIGHT: 2px groove;
    PADDING-RIGHT: 2px;
    BORDER-TOP: 2px groove;
    PADDING-LEFT: 2px;
    LEFT: 897px;
    PADDING-BOTTOM: 2px;
    OVERFLOW: hidden;
    BORDER-LEFT: 2px groove;
    WIDTH: 128px;
    COLOR: gold;
    PADDING-TOP: 2px;
    BORDER-BOTTOM: 2px groove;
    POSITION: absolute;
    TOP: 257px;
    HEIGHT: 264px;
    BACKGROUND-COLOR: black
}
.cmdbut
{
    WIDTH: 60px
}
.mobimg
{
    LEFT: 230px;
    POSITION: absolute;
    TOP: 150px
}
.moblink
{
    COLOR: red
}
.npcimg
{
    LEFT: 180px;
    POSITION: absolute;
    TOP: 95px
}
.itmimg
{
    LEFT: 10px;
    MARGIN-LEFT: 0px;
    POSITION: absolute;
    TOP: 50px
}
	BODY
	{
	BACKGROUND-COLOR: green
	}
	.infview
	{
	BORDER-RIGHT: 4px groove;
	PADDING-RIGHT: 0px;
	BORDER-TOP: 4px groove;
	PADDING-LEFT: 2px;
	LEFT: 0px;
	PADDING-BOTTOM: 0px;
	OVERFLOW: auto;
	BORDER-LEFT: 4px groove;
	WIDTH: 255px;
	COLOR: green;
	PADDING-TOP: 2px;
	BORDER-BOTTOM: 4px groove;
	POSITION: absolute;
	TOP: 0px;
	HEIGHT: 520px;
	BACKGROUND-COLOR: black
	}
	.gfxview
	{
	BORDER-RIGHT: 8px groove;
	BORDER-TOP: 8px groove;
	LEFT: 256px;
	OVERFLOW: hidden;
	BORDER-LEFT: 8px groove;
	WIDTH: 640px;
	BORDER-BOTTOM: 8px groove;
	POSITION: absolute;
	TOP: 0px;
	HEIGHT: 384px;
	BACKGROUND-COLOR: black
	}
	.msgview
	{
	BORDER-RIGHT: 4px groove;
	PADDING-RIGHT: 4px;
	BORDER-TOP: 4px groove;
	PADDING-LEFT: 4px;
	LEFT: 256px;
	PADDING-BOTTOM: 4px;
	OVERFLOW: auto;
	BORDER-LEFT: 4px groove;
	WIDTH: 640px;
	COLOR: lightblue;
	PADDING-TOP: 4px;
	BORDER-BOTTOM: 4px groove;
	POSITION: absolute;
	TOP: 386px;
	HEIGHT: 134px;
	BACKGROUND-COLOR: black
	}
	.cmdview
	{
	BORDER-RIGHT: 2px groove;
	PADDING-RIGHT: 2px;
	BORDER-TOP: 2px groove;
	PADDING-LEFT: 2px;
	LEFT: 897px;
	PADDING-BOTTOM: 2px;
	OVERFLOW: hidden;
	BORDER-LEFT: 2px groove;
	WIDTH: 128px;
	PADDING-TOP: 2px;
	BORDER-BOTTOM: 2px groove;
	POSITION: absolute;
	TOP: 0px;
	HEIGHT: 256px;
	BACKGROUND-COLOR: black
	}
	.stsview
	{
	BORDER-RIGHT: 2px groove;
	PADDING-RIGHT: 2px;
	BORDER-TOP: 2px groove;
	PADDING-LEFT: 2px;
	LEFT: 897px;
	PADDING-BOTTOM: 2px;
	OVERFLOW: hidden;
	BORDER-LEFT: 2px groove;
	WIDTH: 128px;
	COLOR: gold;
	PADDING-TOP: 2px;
	BORDER-BOTTOM: 2px groove;
	POSITION: absolute;
	TOP: 257px;
	HEIGHT: 264px;
	BACKGROUND-COLOR: black
	}
	.cmdbut
	{
	WIDTH: 60px
	}
	.mobimg
	{
	LEFT: 230px;
	POSITION: absolute;
	TOP: 150px
	}
	.moblink
	{
	COLOR: red
	}
	.npcimg
	{
	LEFT: 180px;
	POSITION: absolute;
	TOP: 95px
	}
	.itmimg
	{
	LEFT: 10px;
	MARGIN-LEFT: 0px;
	POSITION: absolute;
	TOP: 50px
	}