Skip to content

Instantly share code, notes, and snippets.

@reed9999

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

Created January 25, 2019 22:21
Show Gist options
  • Save reed9999/94bed13d527d992050d232bc69acba87 to your computer and use it in GitHub Desktop.
Save reed9999/94bed13d527d992050d232bc69acba87 to your computer and use it in GitHub Desktop.
Download ZIP
Catan -- board editor (for strategy discussion)
Raw
catan-board-editor-for-strategy-discussion.markdown
Raw
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>
Raw
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);
}
Raw
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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment