pointbazaar/rltt.html

## rltt.html
<html><head></head><body>
<canvas id="canvas" width="800" height="400"></canvas>


<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var text = ctx.measureText("hello"); //measures text width
text.width;

ctx.fillStyle = "green";
//ctx.fillRect(10,10,100,100);

var tl = {} //list of all technologies, as a dict for easy lookup
var tierdict = {} //list of tier number for technologies


function Tech(newname, newdepends){ //createTech
	t = [];
	t.push(newname);
	t.push(newdepends); //the technologies this tech depends upon
	console.log("created" + t[0]);
	return t;
}
function getTierOfTech(tech){ //accepts a string
	if(!(tech in tierdict)){
		var tobj = tl[tech]
		if(tobj[1].length == 0){
			tierdict[tech] = 0;
		}else{
			var tierlist = [];
			var deplist = tobj[1];
			for(var x =0;x<deplist.length;x++){
				depobj = tl[deplist[x]];
				deptier = getTierOfTech(depobj[0]);
				tierlist.push(deptier);
			}
			techtier = Math.max(tierlist);
			tierdict[tech]=techtier;
		}
	}
	return tierdict[tech]
}


ctx.fillText("hello world", 10,10);

//adding technologies
tl["bark"]=Tech("bark",["wood"]);
tl["wood"]=Tech("wood",[]);
tl["stone"]=Tech("stone",[]);
tl["water"]=Tech("water",[]);
tl["clay"]=Tech("clay",[]);

tl["fire"]=Tech("fire",["wood"]);
tl["pottery"]=Tech("pottery",["clay","water","fire"]);
tl["cordage"]=Tech("cordage",["bark"]);
tl["bow"]=Tech("bow",["wood","cordage"]);

function drawTech(){
	console.log("drawing tech");
	var ystep = 30;
	var xstep = 50;
	var yoffsetscolumns = [0,0,0,0,0,0,0,0];
	for(var key in tl){
		var x = tl[key]; //the value to that key
		console.log("drawing: "+x[0]);
		tier = getTierOfTech(key);
		xoff = tier * xstep;
		yoff = yoffsetscolumns[tier];

		x.push([xoff,yoff]); //inform the tech about its position on canvas

		ctx.fillText(x[0],xoff+30,yoff+30);
		yoffsetscolumns[tier]+=ystep;
	}
}

drawTech()

function drawLinks(){
	console.log("drawing links");
	for(key in tl){
		var x = tl[key];
		var techname = x[0];
		console.log("    for: "+techname);
		mypos = x[2];
		var mx = mypos[0];
		var my = mypos[1];
		console.log("        "+mx+" "+my);
		if(x[1].length >0){
			console.log("        this tech has dependencies to draw");
			for(var x1=0;x1<x[1].length;x1++){
				console.log("        dependency "+x1);
				var dependency = tl[x[1][x1]];

				var depx = dependency[2][0];
				var depy = dependency[2][1];
				console.log("            "+depx +" "+depy);

				ctx.fillStyle = "red";
				ctx.beginPath();
				ctx.moveTo(mx,my);
				ctx.lineTo(depx,depy);
				ctx.fill();
			}
		}

	}
}

drawLinks();

</script>


</body></html>
	<html><head></head><body>
	<canvas id="canvas" width="800" height="400"></canvas>


	<script>
	var canvas = document.getElementById("canvas");
	var ctx = canvas.getContext("2d");

	var text = ctx.measureText("hello"); //measures text width
	text.width;

	ctx.fillStyle = "green";
	//ctx.fillRect(10,10,100,100);

	var tl = {} //list of all technologies, as a dict for easy lookup
	var tierdict = {} //list of tier number for technologies


	function Tech(newname, newdepends){ //createTech
	t = [];
	t.push(newname);
	t.push(newdepends); //the technologies this tech depends upon
	console.log("created" + t[0]);
	return t;
	}
	function getTierOfTech(tech){ //accepts a string
	if(!(tech in tierdict)){
	var tobj = tl[tech]
	if(tobj[1].length == 0){
	tierdict[tech] = 0;
	}else{
	var tierlist = [];
	var deplist = tobj[1];
	for(var x =0;x<deplist.length;x++){
	depobj = tl[deplist[x]];
	deptier = getTierOfTech(depobj[0]);
	tierlist.push(deptier);
	}
	techtier = Math.max(tierlist);
	tierdict[tech]=techtier;
	}
	}
	return tierdict[tech]
	}


	ctx.fillText("hello world", 10,10);

	//adding technologies
	tl["bark"]=Tech("bark",["wood"]);
	tl["wood"]=Tech("wood",[]);
	tl["stone"]=Tech("stone",[]);
	tl["water"]=Tech("water",[]);
	tl["clay"]=Tech("clay",[]);

	tl["fire"]=Tech("fire",["wood"]);
	tl["pottery"]=Tech("pottery",["clay","water","fire"]);
	tl["cordage"]=Tech("cordage",["bark"]);
	tl["bow"]=Tech("bow",["wood","cordage"]);

	function drawTech(){
	console.log("drawing tech");
	var ystep = 30;
	var xstep = 50;
	var yoffsetscolumns = [0,0,0,0,0,0,0,0];
	for(var key in tl){
	var x = tl[key]; //the value to that key
	console.log("drawing: "+x[0]);
	tier = getTierOfTech(key);
	xoff = tier * xstep;
	yoff = yoffsetscolumns[tier];

	x.push([xoff,yoff]); //inform the tech about its position on canvas

	ctx.fillText(x[0],xoff+30,yoff+30);
	yoffsetscolumns[tier]+=ystep;
	}
	}

	drawTech()

	function drawLinks(){
	console.log("drawing links");
	for(key in tl){
	var x = tl[key];
	var techname = x[0];
	console.log(" for: "+techname);
	mypos = x[2];
	var mx = mypos[0];
	var my = mypos[1];
	console.log(" "+mx+" "+my);
	if(x[1].length >0){
	console.log(" this tech has dependencies to draw");
	for(var x1=0;x1<x[1].length;x1++){
	console.log(" dependency "+x1);
	var dependency = tl[x[1][x1]];

	var depx = dependency[2][0];
	var depy = dependency[2][1];
	console.log(" "+depx +" "+depy);

	ctx.fillStyle = "red";
	ctx.beginPath();
	ctx.moveTo(mx,my);
	ctx.lineTo(depx,depy);
	ctx.fill();
	}
	}

	}
	}

	drawLinks();

	</script>











	</body></html>