pointbazaar · August 3, 2017 19:26
diff --git a/rltt.html b/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>