Skip to content

Instantly share code, notes, and snippets.

@christopheranderson

christopheranderson/cheap and dirty notsettlers

Created August 19, 2013 08:54
Show Gist options
  • Save christopheranderson/6267033 to your computer and use it in GitHub Desktop.
Save christopheranderson/6267033 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cheap and dirty notsettlers
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.6.0.min.js"></script>
<script defer="defer">
var xs = new Array("7","9","4","6","10","12","1","3","7","9","13","15","0","4","6","10","12","16","1","3","7","9","13","15","0","4","6","10","12","16","1","3","7","9","13","15","0","4","6","10","12","16","1","3","7","9","13","15","4","6","10","12","7","9");
var ys = new Array("0","0","1.5","1.5","1.5","1.5","3","3","3","3","3","3","4.5","4.5","4.5","4.5","4.5","4.5","6","6","6","6","6","6","7.5","7.5","7.5","7.5","7.5","7.5","9","9","9","9","9","9","10.5","10.5","10.5","10.5","10.5","10.5","12","12","12","12","12","12","13.5","13.5","13.5","13.5","15","15")
var numbers = new Array(2,2,3,3,4,4,5,5,6,6,8,8,9,9,10,10,11,11,12,12);
var resources = new Array(1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,5,5,5);
var tilePairs = new Array(
new Array(0,1,4,9,8,3),
new Array(2,3,8,14,13,7),
new Array(4,5,10,16,15,9),
new Array(6,7,13,19,18,12),
new Array(8,9,15,21,20,14),
new Array(10,11,17,23,22,16),
new Array(13,14,20,26,25,19),
new Array(15,16,22,28,27,21),
new Array(18,19,25,31,30,24),
new Array(20,21,27,33,32,26),
new Array(22,23,29,35,34,28),
new Array(25,26,32,38,37,31),
new Array(27,28,34,40,39,33),
new Array(30,31,37,43,42,36),
new Array(32,33,39,45,44,38),
new Array(34,35,41,47,46,40),
new Array(37,38,44,49,48,43),
new Array(39,40,46,51,50,45),
new Array(44,45,50,53,52,49)
);
var xbuf = 30;
var ybuf = 20;
var scale = 20;
var node = function(tx,ty,ti) {
this.x = tx;
this.y = ty;
this.index = ti;
this.draw = function(layer,scale,xbuf,ybuf)
{
var circle = new Kinetic.Circle({
x: xbuf+this.x*scale,
y: ybuf+this.y*scale,
radius: 4,
fill: 'red',
stroke: 'black',
strokeWidth: 2
});
circle.setAttr('nodeIndex',this.index);
circle.on('mousedown',function(e){
console.log(this.getAttr('nodeIndex'));
});
// add the shape to the layer
layer.add(circle);
};
};
var resourceGroup = function(ti,tmembers,ttype) {
this.index = ti;
this.members = tmembers;
this.type = ttype;
this.getColor = function(ltype)
{
var rColor = "black";
switch(ltype)
{
case 0:
rColor = 'gold';
break;
case 1:
rColor = 'yellow';
break;
case 2:
rColor = 'lime';
break;
case 3:
rColor = 'green';
break;
case 4:
rColor = 'red';
break;
case 5:
rColor = 'gray';
break;
}
return rColor;
};
this.draw = function(layer, nodeList,scale,xbuf,ybuf)
{
var pointsArray = new Array();
for(var i = 0; i < 6; i++)
{
pointsArray[2*i] = nodeList[this.members[i]].x*scale+xbuf;
pointsArray[2*i+1] = nodeList[this.members[i]].y*scale+ybuf;
}
var poly = new Kinetic.Polygon({
points: pointsArray,
fill: this.getColor(this.type),
stroke: 'black',
strokeWidth: 1
});
var text = new Kinetic.Text({
x: nodeList[this.members[0]].x*scale+xbuf+.75*scale,
y: nodeList[this.members[0]].y*scale+ybuf+.9*scale,
text: this.index,
fontSize: 20,
fontFamily: 'Calibri',
fill: 'black'
});
poly.setAttr('rType',this.type +":" +this.getColor(this.type)+":"+this.type.constructor.name);
poly.on('mouseover',function()
{
console.log(this.getAttr('rType'));
});
// add the shape to the layer
layer.add(poly);
layer.add(text);
};
};
var resourceGroupList = new Array();
var nodeList = new Array();
for(var i = 0; i < 54; i++)
{
nodeList[i] = new node(xs[i],ys[i],i);
}
var desertIndex = Math.floor(Math.random()*19);
for(var i = 0; i < 19; i++)
{
if(i===desertIndex)
{
resourceGroupList[i] = new resourceGroup(0,tilePairs[i],0);
}
else
{
resourceGroupList[i] = new resourceGroup(numbers.splice(Math.floor(Math.random()*numbers.length),1)[0],tilePairs[i],resources.splice(Math.floor(Math.random()*resources.length),1)[0]);
}
}
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var poly;
var circle;
// add the shape to the layer
//layer.add(circle);
for(var i = 0; i < resourceGroupList.length; i++)
{
resourceGroupList[i].draw(layer,nodeList,scale,xbuf,ybuf);
}
//Draw points
for(var i = 0; i < nodeList.length; i++)
{
nodeList[i].draw(layer,scale,xbuf,ybuf);
}
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>
@JLoppert
Copy link

Great job on getting this to work in a few hours. I don't understand your initialization scheme. I want to avoid using hard coded values at all costs...unless it's simply unavoidable.

How did you come up with xs, ys, and tilePairs?

I'm still trying to figure out how this works:

for(var i = 0; i < 6; i++)
{
    pointsArray[2*i] = nodeList[this.members[i]].x*scale+xbuf;
    pointsArray[2*i+1] = nodeList[this.members[i]].y*scale+ybuf;
}

It must be how you have your list initialized because you're only allowing a node (vertex/settlement) 2 edges when it can have up to 3. Otherwise I'm missing something.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment