<?xml version="1.0" encoding="UTF-8"?>
<!--
passing object as argument in function?

fill-opacity=".5"
stroke-opacity=".5"
scale(-1, -1)
rotate(180 45,45) 
 --> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<head>
		<title id="title">Isometric Game Engine v0.6 "Covert Cobra"</title>
  	<!--[if IE]><script src="svg2xaml.js"></script><![endif]-->
  	<script type="text/javascript" src="ige.js"/>
		<script type="text/javascript">
		//<![CDATA[
				window.onload=function(){
engine = $('title').innerHTML 
$('siding').textContent = engine			
// $('watermark').textContent = '@'			

game = new Game('checkers')
// game = new Game('ch3ck3rs')

// pointer = $('use-arrow').cloneNode(false)
// pointer.setAttribute('id','pointer')
// document.getElementById('map').appendChild(pointer).cloneNode(false)

// DiceAttack(Players[0].pieces[0],Players[1].pieces[0])

			}
		//]]>
		</script>
	<style>
		body {
			background: #003648 url(../images/ds.png);
      color: #fff;
			font-family: 'corbel','arial';
			line-height: 1.1em;
			margin: 0;
			padding: 0 0 3em;
		}
		h1, h2, h3 {
			font-variant: small-caps;
		}
		p {
			margin: 1em 2em;
		}
		a {color: #afa;text-decoration: none;}
		.status {position: absolute;max-height: 10em;padding: 0;overflow: hidden;background: 0;}
		#back {text-align: right;float: right;background: #006B8F;-moz-border-radius: 0 15px; margin: .5em 1em;}
		#back a {display: block; padding: .5em 1em;}
		#comment {position: absolute; bottom: 0; right: 0; display:inline; padding: .5em 1em;}
	</style>
	</head>
<body xmlns="http://www.w3.org/1999/xhtml">
<div class="status">
<p><a href="javascript:void(0);" onclick="toggle('status')">+/- Log</a></p>
<p id="status" style="display:none;"/>
</div>
<a id="comment" href="http://vezquex.com/bb/viewtopic.php?id=184">Comments &raquo;</a>
<!--
<p style="display:none;" class="status" id="status"/>
-->		

<svg:svg id="svg" viewBox="0 0 1273 769" preserveAspectRatio="preserve" xmlns:svg="http://www.w3.org/2000/svg" version="1.1" baseProfile="full">
	<svg:defs>

	 	<svg:line id="gridline"/>

		<svg:use id="use-hexagon" xlink:href="#hexagon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:polygon id="hexagon" points="32,0 96,0 128,55 96,110 32,110 0,55"/>

		<svg:use id="use-checker" xlink:href="#checker" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:g id="checker">
			<svg:circle r="40" cx="45" cy="45"/>
			<svg:circle r="40" cx="45" cy="45" fill="#000" fill-opacity=".75"/>
			<svg:circle r="40" cx="60" cy="30"/>
			<svg:circle r="35" cx="60" cy="30" fill="#000" fill-opacity=".5"/>
			<svg:circle r="28" cx="55" cy="35" fill-opacity=".5"/>
			<svg:circle r="28" cx="60" cy="30"/>
		</svg:g>
		<svg:g id="king">
			<svg:use xlink:href="#checker" xmlns:xlink="http://www.w3.org/1999/xlink"/>
			<svg:use transform="translate(14,-14)" xlink:href="#checker" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		</svg:g>

		<svg:use id="use-cube" xlink:href="#cube" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:g id="cube" transform="translate(-90, -52)" stroke="#000" stroke-width="3">
			<svg:g transform="rotate(45) translate(115,-115) scale(.58,1)">
				<svg:g transform="skewY(30)">
					<svg:rect width="90" height="90"/>
				</svg:g>
				<svg:g transform="skewY(-30) translate(90, 104)">
					<svg:rect width="90" height="90"/>
				</svg:g>
				<svg:g transform="rotate(-30) skewX(30) scale(1.1547, 1)">
					<svg:rect width="90" height="90"/>
				</svg:g>
			</svg:g>
		</svg:g>
	
		<svg:use id="use-square" xlink:href="#square" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:g id="square">
			<svg:rect width="90" height="90" x="-5" y="5"/>
			<svg:rect width="90" height="90" x="-5" y="5" fill="url(#glossy)"/>
			<svg:rect width="85" height="85" x="0" y="5"/>
			<svg:text id="watermark" x="0" y="75" fill="#00f" fill-opacity=".5" font-size="75" font-family="Cambria" transform="skewX(0)"/>
			<svg:rect width="85" height="85" x="0" y="5" fill="url(#glassy)"/>
		</svg:g>
<!--Simple Square
		<svg:g id="square">
			<svg:rect width="90" height="90"/>
		</svg:g>
-->		

		<svg:use id="use-arrow" display="none" xlink:href="#arrow" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:g id="arrow" transform="translate(190, -140) scale(0.5, 1) skewX(-60)" fill="#fff" fill-opacity=".75" stroke="none">
			<svg:rect width="90" height="90"/>
			<svg:polygon points="-30,90 120,90 45,150"/>
		</svg:g>
<!--Flat Arrow
		<svg:g id="arrow" transform="translate(190, -140) rotate(45) scale(0.5, 1)" fill="#fff" fill-opacity=".75" stroke="none">
-->		

		<svg:linearGradient id="sea" x1="0" y1="0" x2="1" y2="1">
			<svg:stop offset="0.05" stop-color="#000"/>
			<svg:stop offset="0.95" stop-color="#666"/>
		</svg:linearGradient>

		<svg:linearGradient id="realsea" x1="0" y1="0" x2="1" y2="1">
			<svg:stop offset="0.05" stop-color="#002A8D"/>
			<svg:stop offset="0.95" stop-color="#598ECB"/>
		</svg:linearGradient>

		<svg:linearGradient id="glass" x1="0" y1="1" x2="1" y2="0">
			<svg:stop offset="0.05" stop-color="#002A8D"/>
			<svg:stop offset="0.4" stop-color="#598ECB"/>
			<svg:stop offset="0.5" stop-color="#8cf"/>
			<svg:stop offset="0.6" stop-color="#598ECB"/>
			<svg:stop offset="0.95" stop-color="#002A8D"/>
		</svg:linearGradient>

		<svg:linearGradient id="glossy" x1="0" y1="0" x2="1" y2="1">
			<svg:stop offset="0" stop-color="#000" stop-opacity=".5"/>
			<svg:stop offset="1" stop-color="#fff" stop-opacity=".5"/>
		</svg:linearGradient>

		<svg:linearGradient id="glassy" x1="0" y1="0" x2="1" y2="1">
			<svg:stop offset="0" stop-color="#000" stop-opacity="0"/>
			<svg:stop offset=".5" stop-color="#fff" stop-opacity=".75"/>
			<svg:stop offset="1" stop-color="#000" stop-opacity="0"/>
		</svg:linearGradient>

		<svg:radialGradient id="bg" cx="0.5" cy="0.5">
			<svg:stop offset=".65" stop-color="#fff" stop-opacity="1"/>
			<svg:stop offset="1" stop-color="#003648" stop-opacity="0" id="bgfill"/>
		</svg:radialGradient>

	</svg:defs>
	
	
	<svg:rect id="bg" width="100%" height="100%" fill="url(#bg)"/>
	<!--
	<svg:g transform="translate(192,128) scale(1, .58)" stroke="url(#glass)" stroke-width="4">
		<svg:use fill="url(#realsea)" transform="translate(96,-55)" xlink:href="#hexagon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:use fill="url(#realsea)" transform="translate(0,0)" xlink:href="#hexagon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:use fill="url(#realsea)" transform="translate(96,55)" xlink:href="#hexagon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:use fill="url(#realsea)" transform="translate(192,0)" xlink:href="#hexagon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:use fill="url(#realsea)" transform="translate(0,110)" xlink:href="#hexagon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:use fill="url(#realsea)" transform="translate(96,165)" xlink:href="#hexagon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
		<svg:use fill="url(#realsea)" transform="translate(192,110)" xlink:href="#hexagon" xmlns:xlink="http://www.w3.org/1999/xlink"/>
	</svg:g>
	-->

	<svg:g id="map" transform="translate(186.5,133) scale(1, .58) rotate(-45 450,450)">
		<svg:text fill="white" font-size="90" font-family="Candara" y="-25" transform="skewX(-45)">Checkers Demo</svg:text>
		<svg:text id="siding" fill="white" font-size="40" font-family="Constantia" x="980" y="-20" transform="rotate(90 900,0) skewX(45)"/>
	<!--
	-->
	</svg:g>
</svg:svg>

<p>The Isometric Game Engine is a project to make cool games you can run in your browser*. Checkers is the first game made with the engine, involving essential game elements such as creating a board, moving pieces around according to the rules, and capturing pieces.</p>
<p>What makes IGE special is that instead of using Flash player to render and animate the game, it uses <acronym title="Scalable Vector Graphics">SVG</acronym>. The advantages of SVG over Flash are:</p>
<ul>
	<li>no expensive developer tools required</li>
	<li>open web <a href="http://w3c.org/">standard</a> (Flash is proprietary)</li>
	<li>no compiling</li>
</ul>
<p>*Please be aware that the main developer, Vezquex, tests IGE primarily in Firefox, but that it is targeted to run in Opera as well. No support for Internet Explorer is currently planned due to its lack of an SVG renderer.</p>
<p>If you are having performance issues, decrease your window size.</p>
<p>Study <a href="ige.js">the source code</a> to find the Steven Colbert reference!</p>

<p id="back"><a href="/">&laquo; Home</a></p>

</body></html>
