Catan -- board editor (for strategy discussion)

catan-board-editor-for-strategy-discussion.markdown

Catan -- board editor (for strategy discussion)

A Pen by Philip J. Reed on CodePen.

License.

index.html

<svg viewBox="0 0 1000 870.5">
  <defs>
    <!-- Image tile credit: https://dribbble.com/shots/1828250-Settlers-of-Catan-icons -->
    <pattern id="wheat" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" width="190px" height="190px" xlink:href="http://tmorian.com/sites/catan-images/wheat.png" preserveAspectRatio="xMinYMin meet"></image>
    </pattern>
    <pattern id="stone" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" width="190px" height="190px" xlink:href="http://tmorian.com/sites/catan-images/stone.png" preserveAspectRatio="xMinYMin meet"></image>
    </pattern>
    <pattern id="brick" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" width="190px" height="190px" xlink:href="http://tmorian.com/sites/catan-images/brick.png" preserveAspectRatio="xMinYMin meet"></image>
    </pattern>
    <pattern id="sheep" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" width="190px" height="190px" xlink:href="http://tmorian.com/sites/catan-images/sheep.png" preserveAspectRatio="xMinYMin meet"></image>
    </pattern>
    <pattern id="wood" x="0" y="0" patternUnits="objectBoundingBox" height="1" width="1">
      <image x="0" y="0" width="190px" height="190px" xlink:href="http://tmorian.com/sites/catan-images/wood.png" preserveAspectRatio="xMinYMin meet"></image>
    </pattern>
  </defs>
  <polygon fill="none" id="board" points="250,867.5 0,434.5 250,1.5 749.9,1.5 999.9,434.5 749.9,867.5 "/>
  <polygon class="tile" fill="none" id="tile-1" points="338,245.3 256.7,198.4 256.8,104.6 338.1,57.7 419.3,104.5 419.3,198.3 "/>
  <polygon class="tile" fill="none" id="tile-2" points="500.4,245.3 419.1,198.4 419.2,104.6 500.5,57.7 581.7,104.5 581.7,198.3 "/>
  <polygon class="tile" fill="none" id="tile-3" points="662.8,245.3 581.5,198.4 581.6,104.6 662.9,57.7 744.1,104.5 744,198.3 "/>
  <polygon class="tile" fill="none" id="tile-4" points="257,385.3 175.7,338.4 175.8,244.6 257.1,197.7 338.3,244.5 338.3,338.3 "/>
  <polygon class="tile" fill="none" id="tile-5" points="419.4,385.3 338.1,338.4 338.2,244.6 419.5,197.7 500.7,244.5 500.7,338.3 "/>
  <polygon class="tile" fill="none" id="tile-6" points="581.8,385.3 500.5,338.4 500.6,244.6 581.9,197.7 663.1,244.5 663,338.3 "/>
  <polygon class="tile" fill="none" id="tile-7" points="744.1,386.2 662.9,339.3 663,245.6 744.2,198.6 825.5,245.5 825.4,339.3 "/>
  <polygon class="tile" fill="none" id="tile-8" points="176,525.3 94.7,478.4 94.8,384.6 176.1,337.7 257.3,384.5 257.3,478.3 "/>
  <polygon class="tile" fill="none" id="tile-9" points="338.4,525.3 257.1,478.4 257.2,384.6 338.5,337.7 419.7,384.5 419.7,478.3 "/>
  <polygon fill="none" id="desert" points="500.8,525.3 419.5,478.4 419.6,384.6 500.9,337.7 582.1,384.5 582,478.3 "/>
  <polygon class="tile" fill="none" id="tile-10" points="663.1,526.2 581.9,479.3 582,385.6 663.2,338.6 744.5,385.5 744.4,479.3 "/>
  <polygon class="tile" fill="none" id="tile-11" points="825.5,525.3 744.3,478.4 744.3,384.6 825.6,337.7 906.9,384.5 906.8,478.3 "/>
  <polygon class="tile" fill="none" id="tile-12" points="256,665.3 174.7,618.4 174.8,524.6 256.1,477.7 337.3,524.5 337.3,618.3 "/>
  <polygon class="tile" fill="none" id="tile-13" points="418.4,665.3 337.1,618.4 337.2,524.6 418.5,477.7 499.7,524.5 499.7,618.3 "/>
  <polygon class="tile" fill="none" id="tile-14" points="580.8,665.3 499.5,618.4 499.6,524.6 580.9,477.7 662.1,524.5 662,618.3 "/>
  <polygon class="tile" fill="none" id="tile-15" points="743.1,666.2 661.9,619.3 662,525.6 743.2,478.6 824.5,525.5 824.4,619.3 "/>
  <polygon class="tile" fill="none" id="tile-16" points="337,807.3 255.7,760.4 255.8,666.6 337.1,619.7 418.3,666.5 418.3,760.3 "/>
  <polygon class="tile" fill="none" id="tile-17" points="499.4,807.3 418.1,760.4 418.2,666.6 499.5,619.7 580.7,666.5 580.7,760.3 "/>
  <polygon class="tile" fill="none" id="tile-18" points="661.8,807.3 580.5,760.4 580.6,666.6 661.9,619.7 743.1,666.5 743,760.3 "/>
</svg>
<button id="randomize">Randomize!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

script.js

var app = {};

app.tiles = $('.tile');
app.useableTiles = [];

app.tileOptions = [
	{
		'name' : 'wheat',
		'quantity' : 0
	},
	{
		'name' : 'wood',
		'quantity' : 1
	},
	{
		'name' : 'sheep',
		'quantity' : 3
	},
	{
		'name' : 'stone',
		'quantity' : 3
	},
	{
		'name' : 'brick',
		'quantity' : 3
	}
];

app.init = function (){
	app.useableTiles = [];
	app.getTileArray();
};

app.scatter = function () {
	app.tiles.each(function(i){
		$(this).css({
			'-webkit-transform': 'translate3d('+getRandomInt(-200, 200)+'px, '+getRandomInt(-200, 200)+'px, 0)',
			'-moz-transform': 'translate3d('+getRandomInt(-200, 200)+'px, '+getRandomInt(-200, 200)+'px, 0)',
			'-ms-transform': 'translate3d('+getRandomInt(-200, 200)+'px, '+getRandomInt(-200, 200)+'px, 0)',
			'-o-transform': 'translate3d('+getRandomInt(-200, 200)+'px, '+getRandomInt(-200, 200)+'px, 0)',
			'transform': 'translate3d('+getRandomInt(-200, 200)+'px, '+getRandomInt(-200, 200)+'px, 0)'
		});
		setTimeout(function(){
			app.unscatter();
		}, 800);
	});
};

app.unscatter = function () {
	app.tiles.css({
		'-webkit-transform': 'none',
		'-moz-transform': 'none',
		'-ms-transform': 'none',
		'-o-transform': 'none',
		'transform': 'none'
	});
};

app.shake = function () {
	app.tiles.each(function(i){
		console.log('yo');
		$(this).css({
			'-webkit-animation': 'shake .' + getRandomInt(2,6) + 's linear infinite;',
			'-moz-animation': 'shake .' + getRandomInt(2,6) + 's linear infinite;',
			'-o-animation': 'shake .' + getRandomInt(2,6) + 's linear infinite;',
			'animation': 'shake .' + getRandomInt(2,6) + 's linear infinite;'
		});
	});
}

app.getTileArray = function($$) {
	for (var primaryIndex = app.tileOptions.length - 1; primaryIndex >= 0; primaryIndex--) {
		var quantity = app.tileOptions[primaryIndex].quantity;

		for (var i = quantity - 1; i >= 0; i--) {
			app.useableTiles.push(app.tileOptions[primaryIndex].name);
		}
	}

	shuffle(app.useableTiles);
	app.scatter();
};

app.assignTiles = function () {
	app.tiles.each(function(i){
		app.setTileFill($(this), app.useableTiles[i]);
	});
};

app.setTileFill = function ($$, name) {
	var fillAtt = 'url(#'+ name +')';
	$$.attr('fill', fillAtt);
};

//Bind events
$('#randomize').hover(function(){
	app.shake();
}, function(){
	app.tiles.css({
		'-webkit-animation': 'none',
		'-moz-animation': 'none',
		'-ms-animation': 'none',
		'-o-animation': 'none',
		'animation': 'none'
	});
});

$(window).on('arrayReady', function(){
	app.assignTiles();
});

$('#randomize').click(function(){
	app.init();
});

$(document).ready(function() {
	app.init();
});

//helper functions
function getRandomInt(min, max) {
    return rand = Math.floor(Math.random() * (max - min + 1)) + min;
}

function shuffle(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    registerEvent('arrayReady');
    return array;
}

function registerEvent(event) {
    var evt = new CustomEvent(event);

    window.dispatchEvent(evt);
}

style.css

body{
  text-align:center;
}
svg{
  display:block;
  width:500px;
  margin:100px auto 50px auto;
}
button{
  appearance:none;
  position:relative;
  display:inline-block;
  background:transparent;
  padding:0.8em 5em;
  text-transform:uppercase;
  font-size:.85em;
  letter-spacing:1px;
  overflow:hidden;
  border:2px solid #50bbe4;
  transition:.3s;
  cursor:pointer;
}
#board{
  stroke:#50bbe4;
  fill:#50bbe4;
}
polygon{
  stroke:#090909;
}
#desert{
  fill:#FAD780;
}
.tile{
  transition:all 1000ms cubic-bezier(.17,.67,0,1.34);
}