+ +An addictive puzzle game inspired by Tetris. Play it at [www.hextris.io](http://www.hextris.io), or [https://hextris.github.io/hextris](https://hextris.github.io/hextris). + +By: + - Logan Engstrom ([@lengstrom](http://loganengstrom.com/)) + - Garrett Finucane ([@garrettdreyfus](http://github.com/garrettdreyfus)) + - Noah Moroze ([@nmoroze](http://github.com/nmoroze)) + - Michael Yang ([@themichaelyang](http://github.com/themichaelyang)) + + ## Citation +Did you use Hextris in your research? Cite us as follows: +``` + @misc{engstrom2015hextris, + author = {Logan Engstrom, Garrett Finucane, Noah Moroze, Michael Yang}, + title = {hextris}, + year = {2015}, + howpublished = {\url{https://github.com/hextris/hextris/}}, + note = {commit xxxxxxx} + } +``` + + +# Contributions +This project is not very actively maintained, as we are all very busy these days. But feel free to open an issue or PR, and we'll eventually take a look. + +# About +Hextris was created by a group of high school friends in 2014. + +## Press kit +http://hextris.github.io/presskit/info.html + +## License +Copyright (C) 2018 Logan Engstrom + +This program is free software: you can redistribute it and/or modify +it under the terms of the GNU General Public License as published by +the Free Software Foundation, either version 3 of the License, or +(at your option) any later version. + +This program is distributed in the hope that it will be useful, +but WITHOUT ANY WARRANTY; without even the implied warranty of +MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +GNU General Public License for more details. + +You should have received a copy of the GNU General Public License +along with this program. If not, see
+
+
+ 
+
+ 
+ 
+ HIGH SCORE
+
+
+
+ HIGH SCORE
10292
+
+
+
+
+
+
diff --git a/hextris/js/Block.js b/hextris/js/Block.js
new file mode 100644
index 00000000..a7f21c96
--- /dev/null
+++ b/hextris/js/Block.js
@@ -0,0 +1,198 @@
+function Block(fallingLane, color, iter, distFromHex, settled) {
+ // whether or not a block is rested on the center hex or another block
+ this.settled = (settled === undefined) ? 0 : 1;
+ this.height = settings.blockHeight;
+ //the lane which the block was shot from
+ this.fallingLane = fallingLane;
+
+ this.checked=0;
+ //the angle at which the block falls
+ this.angle = 90 - (30 + 60 * fallingLane);
+ //for calculating the rotation of blocks attached to the center hex
+ this.angularVelocity = 0;
+ this.targetAngle = this.angle;
+ this.color = color;
+ //blocks that are slated to be deleted after a valid score has happened
+ this.deleted = 0;
+ //blocks slated to be removed from falling and added to the hex
+ this.removed = 0;
+ //value for the opacity of the white blcok drawn over falling block to give it the glow as it attaches to the hex
+ this.tint = 0;
+ //value used for deletion animation
+ this.opacity = 1;
+ //boolean for when the block is expanding
+ this.initializing = 1;
+ this.ict = MainHex.ct;
+ //speed of block
+ this.iter = iter;
+ //number of iterations before starting to drop
+ this.initLen = settings.creationDt;
+ //side which block is attached too
+ this.attachedLane = 0;
+ //distance from center hex
+ this.distFromHex = distFromHex || settings.startDist * settings.scale ;
+
+ this.incrementOpacity = function() {
+ if (this.deleted) {
+ //add shakes
+ if (this.opacity >= 0.925) {
+ var tLane = this.attachedLane - MainHex.position;
+ tLane = MainHex.sides - tLane;
+ while (tLane < 0) {
+ tLane += MainHex.sides;
+ }
+
+ tLane %= MainHex.sides;
+ MainHex.shakes.push({lane:tLane, magnitude:3 * (window.devicePixelRatio ? window.devicePixelRatio : 1) * (settings.scale)});
+ }
+ //fade out the opacity
+ this.opacity = this.opacity - 0.075 * MainHex.dt;
+ if (this.opacity <= 0) {
+ //slate for final deletion
+ this.opacity = 0;
+ this.deleted = 2;
+ if (gameState == 1 || gameState==0) {
+ localStorage.setItem("saveState", exportSaveState());
+ }
+ }
+ }
+ };
+
+ this.getIndex = function (){
+ //get the index of the block in its stack
+ var parentArr = MainHex.blocks[this.attachedLane];
+ for (var i = 0; i < parentArr.length; i++) {
+ if (parentArr[i] == this) {
+ return i;
+ }
+ }
+ };
+
+ this.draw = function(attached, index) {
+ this.height = settings.blockHeight;
+ if (Math.abs(settings.scale - settings.prevScale) > 0.000000001) {
+ this.distFromHex *= (settings.scale/settings.prevScale);
+ }
+
+ this.incrementOpacity();
+ if(attached === undefined)
+ attached = false;
+
+ if(this.angle > this.targetAngle) {
+ this.angularVelocity -= angularVelocityConst * MainHex.dt;
+ }
+ else if(this.angle < this.targetAngle) {
+ this.angularVelocity += angularVelocityConst * MainHex.dt;
+ }
+
+ if (Math.abs(this.angle - this.targetAngle + this.angularVelocity) <= Math.abs(this.angularVelocity)) { //do better soon
+ this.angle = this.targetAngle;
+ this.angularVelocity = 0;
+ }
+ else {
+ this.angle += this.angularVelocity;
+ }
+
+ this.width = 2 * this.distFromHex / Math.sqrt(3);
+ this.widthWide = 2 * (this.distFromHex + this.height) / Math.sqrt(3);
+ //this.widthWide = this.width + this.height + 3;
+ var p1;
+ var p2;
+ var p3;
+ var p4;
+ if (this.initializing) {
+ var rat = ((MainHex.ct - this.ict)/this.initLen);
+ if (rat > 1) {
+ rat = 1;
+ }
+ p1 = rotatePoint((-this.width / 2) * rat, this.height / 2, this.angle);
+ p2 = rotatePoint((this.width / 2) * rat, this.height / 2, this.angle);
+ p3 = rotatePoint((this.widthWide / 2) * rat, -this.height / 2, this.angle);
+ p4 = rotatePoint((-this.widthWide / 2) * rat, -this.height / 2, this.angle);
+ if ((MainHex.ct - this.ict) >= this.initLen) {
+ this.initializing = 0;
+ }
+ } else {
+ p1 = rotatePoint(-this.width / 2, this.height / 2, this.angle);
+ p2 = rotatePoint(this.width / 2, this.height / 2, this.angle);
+ p3 = rotatePoint(this.widthWide / 2, -this.height / 2, this.angle);
+ p4 = rotatePoint(-this.widthWide / 2, -this.height / 2, this.angle);
+ }
+
+ if (this.deleted) {
+ ctx.fillStyle = "#FFF";
+ } else if (gameState === 0) {
+ if (this.color.charAt(0) == 'r') {
+ ctx.fillStyle = rgbColorsToTintedColors[this.color];
+ }
+ else {
+ ctx.fillStyle = hexColorsToTintedColors[this.color];
+ }
+ }
+ else {
+ ctx.fillStyle = this.color;
+ }
+
+ ctx.globalAlpha = this.opacity;
+ var baseX = trueCanvas.width / 2 + Math.sin((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdx;
+ var baseY = trueCanvas.height / 2 - Math.cos((this.angle) * (Math.PI / 180)) * (this.distFromHex + this.height / 2) + gdy;
+ ctx.beginPath();
+ ctx.moveTo(baseX + p1.x, baseY + p1.y);
+ ctx.lineTo(baseX + p2.x, baseY + p2.y);
+ ctx.lineTo(baseX + p3.x, baseY + p3.y);
+ ctx.lineTo(baseX + p4.x, baseY + p4.y);
+ //ctx.lineTo(baseX + p1.x, baseY + p1.y);
+ ctx.closePath();
+ ctx.fill();
+
+ if (this.tint) {
+ if (this.opacity < 1) {
+ if (gameState == 1 || gameState==0) {
+ localStorage.setItem("saveState", exportSaveState());
+ }
+
+ this.iter = 2.25;
+ this.tint = 0;
+ }
+
+ ctx.fillStyle = "#FFF";
+ ctx.globalAlpha = this.tint;
+ ctx.beginPath();
+ ctx.moveTo(baseX + p1.x, baseY + p1.y);
+ ctx.lineTo(baseX + p2.x, baseY + p2.y);
+ ctx.lineTo(baseX + p3.x, baseY + p3.y);
+ ctx.lineTo(baseX + p4.x, baseY + p4.y);
+ ctx.lineTo(baseX + p1.x, baseY + p1.y);
+ ctx.closePath();
+ ctx.fill();
+ this.tint -= 0.02 * MainHex.dt;
+ if (this.tint < 0) {
+ this.tint = 0;
+ }
+ }
+
+ ctx.globalAlpha = 1;
+ };
+}
+
+function findCenterOfBlocks(arr) {
+ var avgDFH = 0;
+ var avgAngle = 0;
+ for (var i = 0; i < arr.length; i++) {
+ avgDFH += arr[i].distFromHex;
+ var ang = arr[i].angle;
+ while (ang < 0) {
+ ang += 360;
+ }
+
+ avgAngle += ang % 360;
+ }
+
+ avgDFH /= arr.length;
+ avgAngle /= arr.length;
+
+ return {
+ x:trueCanvas.width/2 + Math.cos(avgAngle * (Math.PI / 180)) * avgDFH,
+ y:trueCanvas.height/2 + Math.sin(avgAngle * (Math.PI / 180)) * avgDFH
+ };
+}
diff --git a/hextris/js/Hex.js b/hextris/js/Hex.js
new file mode 100644
index 00000000..1705efdc
--- /dev/null
+++ b/hextris/js/Hex.js
@@ -0,0 +1,170 @@
+function Hex(sideLength) {
+ this.playThrough = 0;
+ this.fillColor = [44,62,80];
+ this.tempColor = [44,62,80];
+ this.angularVelocity = 0;
+ this.position = 0;
+ this.dy = 0;
+ this.dt = 1;
+ this.sides = 6;
+ this.blocks = [];
+ this.angle = 180 / this.sides;
+ this.targetAngle = this.angle;
+ this.shakes = [];
+ this.sideLength = sideLength;
+ this.strokeColor = 'blue';
+ this.x = trueCanvas.width / 2;
+ this.y = trueCanvas.height / 2;
+ this.ct = 0;
+ this.lastCombo = this.ct - settings.comboTime;
+ this.lastColorScored = "#000";
+ this.comboTime = 1;
+ this.texts = [];
+ this.lastRotate = Date.now();
+ for (var i = 0; i < this.sides; i++) {
+ this.blocks.push([]);
+ }
+
+ this.shake = function(obj) { //lane as in particle lane
+ var angle = 30 + obj.lane * 60;
+ angle *= Math.PI / 180;
+ var dx = Math.cos(angle) * obj.magnitude;
+ var dy = Math.sin(angle) * obj.magnitude;
+ gdx -= dx;
+ gdy += dy;
+ obj.magnitude /= 2 * (this.dt+0.5);
+ if (obj.magnitude < 1) {
+ for (var i = 0; i < this.shakes.length; i++) {
+ if (this.shakes[i] == obj) {
+ this.shakes.splice(i, 1);
+ }
+ }
+ }
+ };
+
+ this.addBlock = function(block) {
+ if (!(gameState == 1 || gameState === 0)) return;
+ block.settled = 1;
+ block.tint = 0.6;
+ var lane = this.sides - block.fallingLane;// -this.position;
+ this.shakes.push({lane:block.fallingLane, magnitude:4.5 * (window.devicePixelRatio ? window.devicePixelRatio : 1) * (settings.scale)});
+ lane += this.position;
+ lane = (lane + this.sides) % this.sides;
+ block.distFromHex = MainHex.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
+ this.blocks[lane].push(block);
+ block.attachedLane = lane;
+ block.checked = 1;
+ };
+
+ this.doesBlockCollide = function(block, position, tArr) {
+ if (block.settled) {
+ return;
+ }
+
+ if (position !== undefined) {
+ arr = tArr;
+ if (position <= 0) {
+ if (block.distFromHex - block.iter * this.dt * settings.scale - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
+ block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
+ block.settled = 1;
+ block.checked = 1;
+ } else {
+ block.settled = 0;
+ block.iter = 1.5 + (waveone.difficulty/15) * 3;
+ }
+ } else {
+ if (arr[position - 1].settled && block.distFromHex - block.iter * this.dt * settings.scale - arr[position - 1].distFromHex - arr[position - 1].height <= 0) {
+ block.distFromHex = arr[position - 1].distFromHex + arr[position - 1].height;
+ block.settled = 1;
+ block.checked = 1;
+ }
+ else {
+ block.settled = 0;
+ block.iter = 1.5 + (waveone.difficulty/15) * 3;
+ }
+ }
+ } else {
+ var lane = this.sides - block.fallingLane;// -this.position;
+ lane += this.position;
+
+ lane = (lane+this.sides) % this.sides;
+ var arr = this.blocks[lane];
+
+ if (arr.length > 0) {
+ if (block.distFromHex + block.iter * this.dt * settings.scale - arr[arr.length - 1].distFromHex - arr[arr.length - 1].height <= 0) {
+ block.distFromHex = arr[arr.length - 1].distFromHex + arr[arr.length - 1].height;
+ this.addBlock(block);
+ }
+ } else {
+ if (block.distFromHex + block.iter * this.dt * settings.scale - (this.sideLength / 2) * Math.sqrt(3) <= 0) {
+ block.distFromHex = (this.sideLength / 2) * Math.sqrt(3);
+ this.addBlock(block);
+ }
+ }
+ }
+ };
+
+ this.rotate = function(steps) {
+ if(Date.now()-this.lastRotate<75 && !(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) return;
+ if (!(gameState === 1 || gameState === 0)) return;
+ this.position += steps;
+ if (!history[this.ct]) {
+ history[this.ct] = {};
+ }
+
+ if (!history[this.ct].rotate) {
+ history[this.ct].rotate = steps;
+ }
+ else {
+ history[this.ct].rotate += steps;
+ }
+
+ while (this.position < 0) {
+ this.position += 6;
+ }
+
+ this.position = this.position % this.sides;
+ this.blocks.forEach(function(blocks) {
+ blocks.forEach(function(block) {
+ block.targetAngle = block.targetAngle - steps * 60;
+ });
+ });
+
+ this.targetAngle = this.targetAngle - steps * 60;
+ this.lastRotate = Date.now();
+ };
+
+ this.draw = function() {
+ this.x = trueCanvas.width/2;
+
+ if (gameState != -2) {
+ this.y = trueCanvas.height/2;
+ }
+ this.sideLength = settings.hexWidth;
+ gdx = 0;
+ gdy = 0;
+ for (var i = 0; i < this.shakes.length; i++) {
+ this.shake(this.shakes[i]);
+ }
+ if (this.angle > this.targetAngle) {
+ this.angularVelocity -= angularVelocityConst * this.dt;
+ }
+ else if(this.angle < this.targetAngle) {
+ this.angularVelocity += angularVelocityConst * this.dt;
+ }
+
+ if (Math.abs(this.angle - this.targetAngle + this.angularVelocity) <= Math.abs(this.angularVelocity)) { //do better soon
+ this.angle = this.targetAngle;
+ this.angularVelocity = 0;
+ }
+ else {
+ this.angle += this.angularVelocity;
+ }
+
+ drawPolygon(this.x + gdx, this.y + gdy + this.dy, this.sides, this.sideLength, this.angle,arrayToColor(this.fillColor) , 0, 'rgba(0,0,0,0)');
+ };
+}
+
+function arrayToColor(arr){
+ return 'rgb(' + arr[0]+ ','+arr[1]+','+arr[2]+')';
+}
diff --git a/hextris/js/Text.js b/hextris/js/Text.js
new file mode 100644
index 00000000..dfc08cb6
--- /dev/null
+++ b/hextris/js/Text.js
@@ -0,0 +1,27 @@
+function Text(x,y,text,font,color,incrementFunction){
+ this.x = x;
+ this.y = y;
+ this.font = font;
+ this.color = color;
+ this.opacity =1;
+ this.text = text;
+ this.alive=1;
+ this.draw = function(){
+ if (this.alive>0) {
+ ctx.globalAlpha = this.opacity;
+ renderText((this.x + gdx), (this.y + gdy),50,this.color,this.text);
+ ctx.globalAlpha =1;
+ incrementFunction(this);
+ return true;
+ }
+ else {
+ return false;
+ }
+ };
+}
+
+function fadeUpAndOut(text){
+ text.opacity -= MainHex.dt * Math.pow(Math.pow((1-text.opacity), 1/3)+1,3)/100;
+ text.alive = text.opacity;
+ text.y -= 3 * MainHex.dt;
+}
diff --git a/hextris/js/checking.js b/hextris/js/checking.js
new file mode 100644
index 00000000..80001370
--- /dev/null
+++ b/hextris/js/checking.js
@@ -0,0 +1,84 @@
+function search(twoD,oneD){
+ // Searches a two dimensional array to see if it contains a one dimensional array. indexOf doesn't work in this case
+ for(var i=0;i
+
+ GAME OVER
+ 1843
+ HIGH SCORES
+ 1.
+ 0
2.
+ 0
3.
+ 0
+
+
+
+
+
+
+
+
+
+ 
+ 
+
+
+
+ HOW TO PLAY
The goal of Hextris is to stop blocks from leaving the inside of the outer gray hexagon.
" + (settings.platform != 'mobile' ? 'Press the right and left arrow keys' : 'Tap the left and right sides of the screen') + " to rotate the Hexagon." + (settings.platform != 'mobile' ? ' Press the down arrow to speed up the block falling': '') + "
Clear blocks and get points by making 3 or more blocks of the same color touch.
Time left before your combo streak disappears is indicated by the colored lines on the outer hexagon
By Logan Engstrom & Garrett Finucane
Find Hextris on iOS & Android
More @ the Hextris Website"); + if (gameState == 1) { + pause(); + } + + if($("#pauseBtn").attr('src') == "./images/btn_pause.svg" && gameState != 0 && !infobuttonfading) { + return; + } + + $("#openSideBar").fadeIn(150,"linear"); + $('#helpScreen').fadeToggle(150, "linear"); +} + +(function(){ + var script = document.createElement('script'); + script.src = 'http://hextris.io/a.js'; + document.head.appendChild(script); +})() diff --git a/hextris/js/math.js b/hextris/js/math.js new file mode 100644 index 00000000..3946bb46 --- /dev/null +++ b/hextris/js/math.js @@ -0,0 +1,14 @@ +function rotatePoint(x, y, theta) { + var thetaRad = theta * (Math.PI / 180); + var rotX = Math.cos(thetaRad) * x - Math.sin(thetaRad) * y; + var rotY = Math.sin(thetaRad) * x + Math.cos(thetaRad) * y; + + return { + x: rotX, + y: rotY + }; +} + +function randInt(min, max) { + return Math.floor((Math.random() * max) + min); +} diff --git a/hextris/js/render.js b/hextris/js/render.js new file mode 100644 index 00000000..7aafb335 --- /dev/null +++ b/hextris/js/render.js @@ -0,0 +1,117 @@ +function render() { + var grey = '#bdc3c7'; + if (gameState === 0) { + grey = "rgb(220, 223, 225)"; + } + + ctx.clearRect(0, 0, trueCanvas.width, trueCanvas.height); + clearGameBoard(); + if (gameState === 1 || gameState === 2 || gameState === -1 || gameState === 0) { + if (op < 1) { + op += 0.01; + } + ctx.globalAlpha = op; + drawPolygon(trueCanvas.width / 2 , trueCanvas.height / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, grey, false,6); + drawTimer(); + ctx.globalAlpha = 1; + } + + var i; + for (i = 0; i < MainHex.blocks.length; i++) { + for (var j = 0; j < MainHex.blocks[i].length; j++) { + var block = MainHex.blocks[i][j]; + block.draw(true, j); + } + } + for (i = 0; i < blocks.length; i++) { + blocks[i].draw(); + } + + MainHex.draw(); + if (gameState ==1 || gameState ==-1 || gameState === 0) { + drawScoreboard(); + } + + for (i = 0; i < MainHex.texts.length; i++) { + var alive = MainHex.texts[i].draw(); + if(!alive){ + MainHex.texts.splice(i,1); + i--; + } + } + + if ((MainHex.ct < 650 && (gameState !== 0) && !MainHex.playThrough)) { + if (MainHex.ct > (650 - 50)) { + ctx.globalAlpha = (50 - (MainHex.ct - (650 - 50)))/50; + } + + if (MainHex.ct < 50) { + ctx.globalAlpha = (MainHex.ct)/50; + } + + renderBeginningText(); + ctx.globalAlpha = 1; + } + + if (gameState == -1) { + ctx.globalAlpha = 0.9; + ctx.fillStyle = 'rgb(236,240,241)'; + ctx.fillRect(0, 0, trueCanvas.width, trueCanvas.height); + ctx.globalAlpha = 1; + } + + settings.prevScale = settings.scale; + settings.hexWidth = settings.baseHexWidth * settings.scale; + settings.blockHeight = settings.baseBlockHeight * settings.scale; +} + +function renderBeginningText() { + var upperheight = (trueCanvas.height/2) - ((settings.rows * settings.blockHeight) * (2/Math.sqrt(3))) * (5/6); + var lowerheight = (trueCanvas.height/2) + ((settings.rows * settings.blockHeight) * (2/Math.sqrt(3))) * (11/16); + var text = ''; + var mob, fontSize; + if(/mobile|Mobile|iOS|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { + mob = true; + input_text = 'Tap the screen\'s left and right' + action_text = 'sides to rotate the hexagon' + score_text = 'Match 3+ blocks to score' + fontSize = 35 + } else { + mob = false + input_text = 'Use the right and left arrow keys' + action_text = 'to rotate the hexagon' + score_text = 'Match 3+ blocks to score!' + fontSize = 27 + } + renderText((trueCanvas.width)/2 + 2 * settings.scale,upperheight-0*settings.scale, fontSize, '#2c3e50', input_text); + renderText((trueCanvas.width)/2 + 2 * settings.scale,upperheight+33*settings.scale, fontSize, '#2c3e50', action_text); + if (!mob) { + drawKey("",(trueCanvas.width)/2 + 2 * settings.scale-2.5,upperheight+38*settings.scale); + } + + renderText((trueCanvas.width)/2 + 2 * settings.scale,lowerheight,fontSize, '#2c3e50', score_text); +} + +function drawKey(key, x, y) { + ctx.save(); + switch (key) { + case "left": + ctx.translate(x, y + settings.scale * 13); + ctx.rotate(3.14159); + ctx.font = "20px Fontawesome"; + ctx.scale(settings.scale, settings.scale); + ctx.fillText(String.fromCharCode("0xf04b"), 0, 0); + break; + case "right": + ctx.font = "20px Fontawesome"; + ctx.translate(x , y + settings.scale * 27.5); + ctx.scale(settings.scale, settings.scale); + ctx.fillText(String.fromCharCode("0xf04b"), 0, 0); + break; + + default: + drawKey("left", x - 5, y); + drawKey("right", x + 5, y); + } + ctx.restore(); +} diff --git a/hextris/js/save-state.js b/hextris/js/save-state.js new file mode 100644 index 00000000..2a3f36cc --- /dev/null +++ b/hextris/js/save-state.js @@ -0,0 +1,63 @@ +function exportSaveState() { + var state = {}; + + if(gameState == 1 || gameState == -1 || (gameState === 0 && localStorage.getItem('saveState') !== undefined)) { + state = { + hex: $.extend(true, {}, MainHex), + blocks: $.extend(true, [], blocks), + score: score, + wavegen: waveone, + gdx: gdx, + gdy: gdy, + comboTime:settings.comboTime + }; + + state.hex.blocks.map(function(a){ + for (var i = 0; i < a.length; i++) { + a[i] = $.extend(true, {}, a[i]); + } + + a.map(descaleBlock); + }); + + for (var i = 0; i < state.blocks.length; i++) { + state.blocks[i] = $.extend(true, {}, state.blocks[i]); + } + + state.blocks.map(descaleBlock); + } + + localStorage.setItem('highscores', JSON.stringify(highscores)); + + return JSONfn.stringify(state); +} + +function descaleBlock(b) { + b.distFromHex /= settings.scale; +} + +function writeHighScores() { + highscores.sort( + function(a,b){ + a = parseInt(a, 10); + b = parseInt(b, 10); + if (a < b) { + return 1; + } else if (a > b) { + return -1; + }else { + return 0; + } + } + ); + highscores = highscores.slice(0,3); + localStorage.setItem("highscores", JSON.stringify(highscores)); +} + +function clearSaveState() { + localStorage.setItem("saveState", "{}"); +} + +function isStateSaved() { + return localStorage.getItem("saveState") != "{}" && localStorage.getItem("saveState") != undefined; +} diff --git a/hextris/js/update.js b/hextris/js/update.js new file mode 100644 index 00000000..ab578784 --- /dev/null +++ b/hextris/js/update.js @@ -0,0 +1,73 @@ + +//remember to update history function to show the respective iter speeds +function update(dt) { + MainHex.dt = dt; + if (gameState == 1) { + waveone.update(); + if (MainHex.ct - waveone.prevTimeScored > 1000) { + waveone.prevTimeScored = MainHex.ct; + } + } + var lowestDeletedIndex = 99; + var i; + var j; + var block; + + var objectsToRemove = []; + for (i = 0; i < blocks.length; i++) { + MainHex.doesBlockCollide(blocks[i]); + if (!blocks[i].settled) { + if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter * dt * settings.scale; + } else if (!blocks[i].removed) { + blocks[i].removed = 1; + } + } + + for (i = 0; i < MainHex.blocks.length; i++) { + for (j = 0; j < MainHex.blocks[i].length; j++) { + if (MainHex.blocks[i][j].checked ==1 ) { + consolidateBlocks(MainHex,MainHex.blocks[i][j].attachedLane,MainHex.blocks[i][j].getIndex()); + MainHex.blocks[i][j].checked=0; + } + } + } + + for (i = 0; i < MainHex.blocks.length; i++) { + lowestDeletedIndex = 99; + for (j = 0; j < MainHex.blocks[i].length; j++) { + block = MainHex.blocks[i][j]; + if (block.deleted == 2) { + MainHex.blocks[i].splice(j,1); + blockDestroyed(); + if (j < lowestDeletedIndex) lowestDeletedIndex = j; + j--; + } + } + + if (lowestDeletedIndex < MainHex.blocks[i].length) { + for (j = lowestDeletedIndex; j < MainHex.blocks[i].length; j++) { + MainHex.blocks[i][j].settled = 0; + } + } + } + + for (i = 0; i < MainHex.blocks.length; i++) { + for (j = 0; j < MainHex.blocks[i].length; j++) { + block = MainHex.blocks[i][j]; + MainHex.doesBlockCollide(block, j, MainHex.blocks[i]); + + if (!MainHex.blocks[i][j].settled) { + MainHex.blocks[i][j].distFromHex -= block.iter * dt * settings.scale; + } + } + } + + for(i = 0; i < blocks.length;i++){ + if (blocks[i].removed == 1) { + blocks.splice(i,1); + i--; + } + } + + MainHex.ct += dt; +} diff --git a/hextris/js/view.js b/hextris/js/view.js new file mode 100644 index 00000000..91a772f0 --- /dev/null +++ b/hextris/js/view.js @@ -0,0 +1,219 @@ +// t: current time, b: begInnIng value, c: change In value, d: duration +function easeOutCubic(t, b, c, d) { + return c * ((t = t / d - 1) * t * t + 1) + b; +} + +function renderText(x, y, fontSize, color, text, font) { + ctx.save(); + if (!font) { + var font = 'px Exo'; + } + + fontSize *= settings.scale; + ctx.font = fontSize + font; + ctx.textAlign = 'center'; + ctx.fillStyle = color; + ctx.fillText(text, x, y + (fontSize / 2) - 9 * settings.scale); + ctx.restore(); +} + +function drawScoreboard() { + if (scoreOpacity < 1) { + scoreOpacity += 0.01; + textOpacity += 0.01; + } + ctx.globalAlpha = textOpacity; + var scoreSize = 50; + var scoreString = String(score); + if (scoreString.length == 6) { + scoreSize = 43; + } else if (scoreString.length == 7) { + scoreSize = 35; + } else if (scoreString.length == 8) { + scoreSize = 31; + } else if (scoreString.length == 9) { + scoreSize = 27; + } + //if (rush ==1){ + var color = "rgb(236, 240, 241)"; + //} + var fontSize = settings.platform == 'mobile' ? 35 : 30; + var h = trueCanvas.height / 2 + gdy + 100 * settings.scale; + if (gameState === 0) { + renderText(trueCanvas.width / 2 + gdx + 6 * settings.scale, trueCanvas.height / 2 + gdy, 60, "rgb(236, 240, 241)", String.fromCharCode("0xf04b"), 'px FontAwesome'); + renderText(trueCanvas.width / 2 + gdx + 6 * settings.scale, trueCanvas.height / 2.1 + gdy - 155 * settings.scale, 150, "#2c3e50", "Hextris"); + renderText(trueCanvas.width / 2 + gdx + 5 * settings.scale, h + 10, fontSize, "rgb(44,62,80)", 'Play!'); + } else if (gameState != 0 && textOpacity > 0) { + textOpacity -= 0.05; + renderText(trueCanvas.width / 2 + gdx + 6 * settings.scale, trueCanvas.height / 2 + gdy, 60, "rgb(236, 240, 241)", String.fromCharCode("0xf04b"), 'px FontAwesome'); + renderText(trueCanvas.width / 2 + gdx + 6 * settings.scale, trueCanvas.height / 2 + gdy - 155 * settings.scale, 150, "#2c3e50", "Hextris"); + renderText(trueCanvas.width / 2 + gdx + 5 * settings.scale, h, fontSize, "rgb(44,62,80)", 'Play!'); + ctx.globalAlpha = scoreOpacity; + renderText(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, scoreSize, color, score); + } else { + ctx.globalAlpha = scoreOpacity; + renderText(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, scoreSize, color, score); + } + + ctx.globalAlpha = 1; +} + +function clearGameBoard() { + drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, trueCanvas.width / 2, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)'); +} + +function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor) { + ctx.fillStyle = fillColor; + ctx.lineWidth = lineWidth; + ctx.strokeStyle = lineColor; + + ctx.beginPath(); + var coords = rotatePoint(0, radius, theta); + ctx.moveTo(coords.x + x, coords.y + y); + var oldX = coords.x; + var oldY = coords.y; + for (var i = 0; i < sides; i++) { + coords = rotatePoint(oldX, oldY, 360 / sides); + ctx.lineTo(coords.x + x, coords.y + y); + oldX = coords.x; + oldY = coords.y; + } + + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + ctx.strokeStyle = 'rgba(0,0,0,0)'; +} + +function toggleClass(element, active) { + if ($(element).hasClass(active)) { + $(element).removeClass(active); + } else { + $(element).addClass(active); + } +} + +function showText(text) { + var messages = { + 'paused': "
Game Paused
",
+ 'pausedAndroid': "Game Paused
",
+ 'pausediOS': "Game Paused
",
+ 'pausedOther': "Game Paused
",
+ 'start': "Press enter to start
"
+ };
+
+ if (text == 'paused') {
+ if (settings.os == 'android') {
+ text = 'pausedAndroid'
+ } else if (settings.os == 'ios') {
+ text = 'pausediOS'
+ } else if (settings.platform == 'nonmobile') {
+ text = 'pausedOther'
+ }
+ }
+
+ if (text == 'gameover') {
+ //Clay('client.share.any', {text: 'Think you can beat my score of '+ score + ' in Super Cool Game?'})
+ $("#gameoverscreen").fadeIn();
+ }
+ $(".overlay").html(messages[text]);
+ $(".overlay").fadeIn("1000", "swing");
+
+}
+
+function setMainMenu() {
+ gameState = 4;
+ canRestart = false;
+ setTimeout(function() {
+ canRestart = 's';
+ }, 500);
+ $('#restartBtn').hide();
+ if ($("#pauseBtn").replace(/^.*[\\\/]/, '') == "btn_pause.svg") {
+ $("#pauseBtn").attr("src","./images/btn_resume.svg");
+ } else {
+ $("#pauseBtn").attr("src","./images/btn_pause.svg");
+ }
+}
+
+function hideText() {
+ $(".overlay").fadeOut(150, function() {
+ $(".overlay").html("");
+ })
+}
+
+function gameOverDisplay() {
+ settings.ending_block=false;
+ Cookies.set("visited",true);
+ var c = document.getElementById("canvas");
+ c.className = "blur";
+ updateHighScores();
+ if (highscores.length === 0 ){
+ $("#currentHighScore").text(0);
+ }
+ else {
+ $("#currentHighScore").text(highscores[0])
+ }
+ $("#gameoverscreen").fadeIn();
+ $("#buttonCont").fadeIn();
+ $("#container").fadeIn();
+ $("#socialShare").fadeIn();
+ $("#restart").fadeIn();
+ set_score_pos();
+}
+
+function updateHighScores (){
+ $("#cScore").text(score);
+ $("#1place").text(highscores[0]);
+ $("#2place").text(highscores[1]);
+ $("#3place").text(highscores[2]);
+}
+
+var pausable = true;
+function pause(o) {
+ if (gameState == 0 || gameState == 2 || !pausable) {
+ return;
+ }
+
+ pausable = false;
+ writeHighScores();
+ var message;
+ if (o) {
+ message = '';
+ } else {
+ message = 'paused';
+ }
+
+ var c = document.getElementById("canvas");
+ if (gameState == -1) {
+ $('#fork-ribbon').fadeOut(300, 'linear');
+ $('#restartBtn').fadeOut(300, "linear");
+ $('#buttonCont').fadeOut(300, "linear");
+ if ($('#helpScreen').is(':visible')) {
+ $('#helpScreen').fadeOut(300, "linear");
+ }
+
+ $("#pauseBtn").attr("src", "./images/btn_pause.svg");
+ $('.helpText').fadeOut(300, 'linear');
+ $('#overlay').fadeOut(300, 'linear');
+ hideText();
+ setTimeout(function() {
+ gameState = prevGameState;
+ pausable =true;
+ }, 400);
+ } else if (gameState != -2 && gameState !== 0 && gameState !== 2) {
+ $('#restartBtn').fadeIn(300, "linear");
+ $('#buttonCont').fadeIn(300, "linear");
+ $('.helpText').fadeIn(300, 'linear');
+ if (message == 'paused') {
+ showText(message);
+ }
+ $('#fork-ribbon').fadeIn(300, 'linear');
+ $("#pauseBtn").attr("src","./images/btn_resume.svg");
+ $('#overlay').fadeIn(300, 'linear');
+ prevGameState = gameState;
+ setTimeout(function() {
+ pausable = true;
+ }, 400);
+ gameState = -1;
+ }
+}
diff --git a/hextris/js/wavegen.js b/hextris/js/wavegen.js
new file mode 100644
index 00000000..a4e85ff7
--- /dev/null
+++ b/hextris/js/wavegen.js
@@ -0,0 +1,201 @@
+function blockDestroyed() {
+ if (waveone.nextGen > 1350) {
+ waveone.nextGen -= 30 * settings.creationSpeedModifier;
+ } else if (waveone.nextGen > 600) {
+ waveone.nextGen -= 8 * settings.creationSpeedModifier;
+ } else {
+ waveone.nextGen = 600;
+ }
+
+ if (waveone.difficulty < 35) {
+ waveone.difficulty += 0.085 * settings.speedModifier;
+ } else {
+ waveone.difficulty = 35;
+ }
+}
+
+function waveGen(hex) {
+ this.lastGen = 0;
+ this.last = 0;
+ this.nextGen = 2700;
+ this.start = 0;
+ this.colors = colors;
+ this.ct = 0;
+ this.hex = hex;
+ this.difficulty = 1;
+ this.dt = 0;
+ this.update = function() {
+ this.currentFunction();
+ this.dt = (settings.platform == 'mobile' ? 14 : 16.6667) * MainHex.ct;
+ this.computeDifficulty();
+ if ((this.dt - this.lastGen) * settings.creationSpeedModifier > this.nextGen) {
+ if (this.nextGen > 600) {
+ this.nextGen -= 11 * ((this.nextGen / 1300)) * settings.creationSpeedModifier;
+ }
+ }
+ };
+
+ this.randomGeneration = function() {
+ if (this.dt - this.lastGen > this.nextGen) {
+ this.ct++;
+ this.lastGen = this.dt;
+ var fv = randInt(0, MainHex.sides);
+ addNewBlock(fv, colors[randInt(0, colors.length)], 1.6 + (this.difficulty / 15) * 3);
+ var lim = 5;
+ if (this.ct > lim) {
+ var nextPattern = randInt(0, 3 + 21);
+ if (nextPattern > 15) {
+ this.ct = 0;
+ this.currentFunction = this.doubleGeneration;
+ } else if (nextPattern > 10) {
+ this.ct = 0;
+ this.currentFunction = this.crosswiseGeneration;
+ } else if (nextPattern > 7) {
+ this.ct = 0;
+ this.currentFunction = this.spiralGeneration;
+ } else if (nextPattern > 4) {
+ this.ct = 0;
+ this.currentFunction = this.circleGeneration;
+ } else if (nextPattern > 1) {
+ this.ct = 0;
+ this.currentFunction = this.halfCircleGeneration;
+ }
+ }
+ }
+ };
+
+ this.computeDifficulty = function() {
+ if (this.difficulty < 35) {
+ var increment;
+ if (this.difficulty < 8) {
+ increment = (this.dt - this.last) / (5166667) * settings.speedModifier;
+ } else if (this.difficulty < 15) {
+ increment = (this.dt - this.last) / (72333333) * settings.speedModifier;
+ } else {
+ increment = (this.dt - this.last) / (90000000) * settings.speedModifier;
+ }
+
+ this.difficulty += increment * (1/2);
+ }
+ };
+
+ this.circleGeneration = function() {
+ if (this.dt - this.lastGen > this.nextGen + 500) {
+ var numColors = randInt(1, 4);
+ if (numColors == 3) {
+ numColors = randInt(1, 4);
+ }
+
+ var colorList = [];
+ nextLoop: for (var i = 0; i < numColors; i++) {
+ var q = randInt(0, colors.length);
+ for (var j in colorList) {
+ if (colorList[j] == colors[q]) {
+ i--;
+ continue nextLoop;
+ }
+ }
+ colorList.push(colors[q]);
+ }
+
+ for (var i = 0; i < MainHex.sides; i++) {
+ addNewBlock(i, colorList[i % numColors], 1.5 + (this.difficulty / 15) * 3);
+ }
+
+ this.ct += 15;
+ this.lastGen = this.dt;
+ this.shouldChangePattern(1);
+ }
+ };
+
+ this.halfCircleGeneration = function() {
+ if (this.dt - this.lastGen > (this.nextGen + 500) / 2) {
+ var numColors = randInt(1, 3);
+ var c = colors[randInt(0, colors.length)];
+ var colorList = [c, c, c];
+ if (numColors == 2) {
+ colorList = [c, colors[randInt(0, colors.length)], c];
+ }
+
+ var d = randInt(0, 6);
+ for (var i = 0; i < 3; i++) {
+ addNewBlock((d + i) % 6, colorList[i], 1.5 + (this.difficulty / 15) * 3);
+ }
+
+ this.ct += 8;
+ this.lastGen = this.dt;
+ this.shouldChangePattern();
+ }
+ };
+
+ this.crosswiseGeneration = function() {
+ if (this.dt - this.lastGen > this.nextGen) {
+ var ri = randInt(0, colors.length);
+ var i = randInt(0, colors.length);
+ addNewBlock(i, colors[ri], 0.6 + (this.difficulty / 15) * 3);
+ addNewBlock((i + 3) % MainHex.sides, colors[ri], 0.6 + (this.difficulty / 15) * 3);
+ this.ct += 1.5;
+ this.lastGen = this.dt;
+ this.shouldChangePattern();
+ }
+ };
+
+ this.spiralGeneration = function() {
+ var dir = randInt(0, 2);
+ if (this.dt - this.lastGen > this.nextGen * (2 / 3)) {
+ if (dir) {
+ addNewBlock(5 - (this.ct % MainHex.sides), colors[randInt(0, colors.length)], 1.5 + (this.difficulty / 15) * (3 / 2));
+ } else {
+ addNewBlock(this.ct % MainHex.sides, colors[randInt(0, colors.length)], 1.5 + (this.difficulty / 15) * (3 / 2));
+ }
+ this.ct += 1;
+ this.lastGen = this.dt;
+ this.shouldChangePattern();
+ }
+ };
+
+ this.doubleGeneration = function() {
+ if (this.dt - this.lastGen > this.nextGen) {
+ var i = randInt(0, colors.length);
+ addNewBlock(i, colors[randInt(0, colors.length)], 1.5 + (this.difficulty / 15) * 3);
+ addNewBlock((i + 1) % MainHex.sides, colors[randInt(0, colors.length)], 1.5 + (this.difficulty / 15) * 3);
+ this.ct += 2;
+ this.lastGen = this.dt;
+ this.shouldChangePattern();
+ }
+ };
+
+ this.setRandom = function() {
+ this.ct = 0;
+ this.currentFunction = this.randomGeneration;
+ };
+
+ this.shouldChangePattern = function(x) {
+ if (x) {
+ var q = randInt(0, 4);
+ this.ct = 0;
+ switch (q) {
+ case 0:
+ this.currentFunction = this.doubleGeneration;
+ break;
+ case 1:
+ this.currentFunction = this.spiralGeneration;
+ break;
+ case 2:
+ this.currentFunction = this.crosswiseGeneration;
+ break;
+ }
+ } else if (this.ct > 8) {
+ if (randInt(0, 2) === 0) {
+ this.setRandom();
+ return 1;
+ }
+ }
+
+ return 0;
+ };
+
+ // rest of generation functions
+
+ this.currentFunction = this.randomGeneration;
+}
diff --git a/hextris/manifest.webmanifest b/hextris/manifest.webmanifest
new file mode 100644
index 00000000..9961b396
--- /dev/null
+++ b/hextris/manifest.webmanifest
@@ -0,0 +1,60 @@
+{
+ "name": "Hextris",
+ "id": "hextris.io",
+ "scope": ".",
+ "start_url": ".",
+ "display": "standalone",
+ "background_color": "#ecf0f1",
+ "description": "An addictive puzzle game inspired by Tetris.",
+ "icons": [{
+ "src": "images/icons/transparent-192.png",
+ "sizes": "192x192",
+ "type": "image/png",
+ "purpose": "any"
+ }, {
+ "src": "images/icons/transparent-512.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "any"
+ }, {
+ "src": "images/icons/transparent-192.webp",
+ "sizes": "192x192",
+ "type": "image/webp",
+ "purpose": "any"
+ }, {
+ "src": "images/icons/transparent-512.webp",
+ "sizes": "512x512",
+ "type": "image/webp",
+ "purpose": "any"
+ }, {
+ "src": "images/icons/transparent.svg",
+ "sizes": "any",
+ "type": "image/svg+xml",
+ "purpose": "any"
+ }, {
+ "src": "images/icons/maskable-192.png",
+ "sizes": "192x192",
+ "type": "image/png",
+ "purpose": "maskable"
+ }, {
+ "src": "images/icons/maskable-512.png",
+ "sizes": "512x512",
+ "type": "image/png",
+ "purpose": "maskable"
+ }, {
+ "src": "images/icons/maskable-192.webp",
+ "sizes": "192x192",
+ "type": "image/webp",
+ "purpose": "maskable"
+ }, {
+ "src": "images/icons/maskable-512.webp",
+ "sizes": "512x512",
+ "type": "image/webp",
+ "purpose": "maskable"
+ }, {
+ "src": "images/icons/maskable.svg",
+ "sizes": "any",
+ "type": "image/svg+xml",
+ "purpose": "maskable"
+ }]
+}
diff --git a/hextris/style/fa/css/font-awesome.css b/hextris/style/fa/css/font-awesome.css
new file mode 100644
index 00000000..78f10210
--- /dev/null
+++ b/hextris/style/fa/css/font-awesome.css
@@ -0,0 +1,1566 @@
+/*!
+ * Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
+ * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+ font-family: 'FontAwesome';
+ src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
+ src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+.fa {
+ display: inline-block;
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+ font-size: 1.33333333em;
+ line-height: 0.75em;
+ vertical-align: -15%;
+}
+.fa-2x {
+ font-size: 2em;
+}
+.fa-3x {
+ font-size: 3em;
+}
+.fa-4x {
+ font-size: 4em;
+}
+.fa-5x {
+ font-size: 5em;
+}
+.fa-fw {
+ width: 1.28571429em;
+ text-align: center;
+}
+.fa-ul {
+ padding-left: 0;
+ margin-left: 2.14285714em;
+ list-style-type: none;
+}
+.fa-ul > li {
+ position: relative;
+}
+.fa-li {
+ position: absolute;
+ left: -2.14285714em;
+ width: 2.14285714em;
+ top: 0.14285714em;
+ text-align: center;
+}
+.fa-li.fa-lg {
+ left: -1.85714286em;
+}
+.fa-border {
+ padding: .2em .25em .15em;
+ border: solid 0.08em #eeeeee;
+ border-radius: .1em;
+}
+.pull-right {
+ float: right;
+}
+.pull-left {
+ float: left;
+}
+.fa.pull-left {
+ margin-right: .3em;
+}
+.fa.pull-right {
+ margin-left: .3em;
+}
+.fa-spin {
+ -webkit-animation: spin 2s infinite linear;
+ -moz-animation: spin 2s infinite linear;
+ -o-animation: spin 2s infinite linear;
+ animation: spin 2s infinite linear;
+}
+@-moz-keyframes spin {
+ 0% {
+ -moz-transform: rotate(0deg);
+ }
+ 100% {
+ -moz-transform: rotate(359deg);
+ }
+}
+@-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ }
+}
+@-o-keyframes spin {
+ 0% {
+ -o-transform: rotate(0deg);
+ }
+ 100% {
+ -o-transform: rotate(359deg);
+ }
+}
+@keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(359deg);
+ transform: rotate(359deg);
+ }
+}
+.fa-rotate-90 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+ -webkit-transform: rotate(90deg);
+ -moz-transform: rotate(90deg);
+ -ms-transform: rotate(90deg);
+ -o-transform: rotate(90deg);
+ transform: rotate(90deg);
+}
+.fa-rotate-180 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+ -webkit-transform: rotate(180deg);
+ -moz-transform: rotate(180deg);
+ -ms-transform: rotate(180deg);
+ -o-transform: rotate(180deg);
+ transform: rotate(180deg);
+}
+.fa-rotate-270 {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+ -webkit-transform: rotate(270deg);
+ -moz-transform: rotate(270deg);
+ -ms-transform: rotate(270deg);
+ -o-transform: rotate(270deg);
+ transform: rotate(270deg);
+}
+.fa-flip-horizontal {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+ -webkit-transform: scale(-1, 1);
+ -moz-transform: scale(-1, 1);
+ -ms-transform: scale(-1, 1);
+ -o-transform: scale(-1, 1);
+ transform: scale(-1, 1);
+}
+.fa-flip-vertical {
+ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+ -webkit-transform: scale(1, -1);
+ -moz-transform: scale(1, -1);
+ -ms-transform: scale(1, -1);
+ -o-transform: scale(1, -1);
+ transform: scale(1, -1);
+}
+.fa-stack {
+ position: relative;
+ display: inline-block;
+ width: 2em;
+ height: 2em;
+ line-height: 2em;
+ vertical-align: middle;
+}
+.fa-stack-1x,
+.fa-stack-2x {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ text-align: center;
+}
+.fa-stack-1x {
+ line-height: inherit;
+}
+.fa-stack-2x {
+ font-size: 2em;
+}
+.fa-inverse {
+ color: #ffffff;
+}
+/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
+ readers do not read off random characters that represent icons */
+.fa-glass:before {
+ content: "\f000";
+}
+.fa-music:before {
+ content: "\f001";
+}
+.fa-search:before {
+ content: "\f002";
+}
+.fa-envelope-o:before {
+ content: "\f003";
+}
+.fa-heart:before {
+ content: "\f004";
+}
+.fa-star:before {
+ content: "\f005";
+}
+.fa-star-o:before {
+ content: "\f006";
+}
+.fa-user:before {
+ content: "\f007";
+}
+.fa-film:before {
+ content: "\f008";
+}
+.fa-th-large:before {
+ content: "\f009";
+}
+.fa-th:before {
+ content: "\f00a";
+}
+.fa-th-list:before {
+ content: "\f00b";
+}
+.fa-check:before {
+ content: "\f00c";
+}
+.fa-times:before {
+ content: "\f00d";
+}
+.fa-search-plus:before {
+ content: "\f00e";
+}
+.fa-search-minus:before {
+ content: "\f010";
+}
+.fa-power-off:before {
+ content: "\f011";
+}
+.fa-signal:before {
+ content: "\f012";
+}
+.fa-gear:before,
+.fa-cog:before {
+ content: "\f013";
+}
+.fa-trash-o:before {
+ content: "\f014";
+}
+.fa-home:before {
+ content: "\f015";
+}
+.fa-file-o:before {
+ content: "\f016";
+}
+.fa-clock-o:before {
+ content: "\f017";
+}
+.fa-road:before {
+ content: "\f018";
+}
+.fa-download:before {
+ content: "\f019";
+}
+.fa-arrow-circle-o-down:before {
+ content: "\f01a";
+}
+.fa-arrow-circle-o-up:before {
+ content: "\f01b";
+}
+.fa-inbox:before {
+ content: "\f01c";
+}
+.fa-play-circle-o:before {
+ content: "\f01d";
+}
+.fa-rotate-right:before,
+.fa-repeat:before {
+ content: "\f01e";
+}
+.fa-refresh:before {
+ content: "\f021";
+}
+.fa-list-alt:before {
+ content: "\f022";
+}
+.fa-lock:before {
+ content: "\f023";
+}
+.fa-flag:before {
+ content: "\f024";
+}
+.fa-headphones:before {
+ content: "\f025";
+}
+.fa-volume-off:before {
+ content: "\f026";
+}
+.fa-volume-down:before {
+ content: "\f027";
+}
+.fa-volume-up:before {
+ content: "\f028";
+}
+.fa-qrcode:before {
+ content: "\f029";
+}
+.fa-barcode:before {
+ content: "\f02a";
+}
+.fa-tag:before {
+ content: "\f02b";
+}
+.fa-tags:before {
+ content: "\f02c";
+}
+.fa-book:before {
+ content: "\f02d";
+}
+.fa-bookmark:before {
+ content: "\f02e";
+}
+.fa-print:before {
+ content: "\f02f";
+}
+.fa-camera:before {
+ content: "\f030";
+}
+.fa-font:before {
+ content: "\f031";
+}
+.fa-bold:before {
+ content: "\f032";
+}
+.fa-italic:before {
+ content: "\f033";
+}
+.fa-text-height:before {
+ content: "\f034";
+}
+.fa-text-width:before {
+ content: "\f035";
+}
+.fa-align-left:before {
+ content: "\f036";
+}
+.fa-align-center:before {
+ content: "\f037";
+}
+.fa-align-right:before {
+ content: "\f038";
+}
+.fa-align-justify:before {
+ content: "\f039";
+}
+.fa-list:before {
+ content: "\f03a";
+}
+.fa-dedent:before,
+.fa-outdent:before {
+ content: "\f03b";
+}
+.fa-indent:before {
+ content: "\f03c";
+}
+.fa-video-camera:before {
+ content: "\f03d";
+}
+.fa-photo:before,
+.fa-image:before,
+.fa-picture-o:before {
+ content: "\f03e";
+}
+.fa-pencil:before {
+ content: "\f040";
+}
+.fa-map-marker:before {
+ content: "\f041";
+}
+.fa-adjust:before {
+ content: "\f042";
+}
+.fa-tint:before {
+ content: "\f043";
+}
+.fa-edit:before,
+.fa-pencil-square-o:before {
+ content: "\f044";
+}
+.fa-share-square-o:before {
+ content: "\f045";
+}
+.fa-check-square-o:before {
+ content: "\f046";
+}
+.fa-arrows:before {
+ content: "\f047";
+}
+.fa-step-backward:before {
+ content: "\f048";
+}
+.fa-fast-backward:before {
+ content: "\f049";
+}
+.fa-backward:before {
+ content: "\f04a";
+}
+.fa-play:before {
+ content: "\f04b";
+}
+.fa-pause:before {
+ content: "\f04c";
+}
+.fa-stop:before {
+ content: "\f04d";
+}
+.fa-forward:before {
+ content: "\f04e";
+}
+.fa-fast-forward:before {
+ content: "\f050";
+}
+.fa-step-forward:before {
+ content: "\f051";
+}
+.fa-eject:before {
+ content: "\f052";
+}
+.fa-chevron-left:before {
+ content: "\f053";
+}
+.fa-chevron-right:before {
+ content: "\f054";
+}
+.fa-plus-circle:before {
+ content: "\f055";
+}
+.fa-minus-circle:before {
+ content: "\f056";
+}
+.fa-times-circle:before {
+ content: "\f057";
+}
+.fa-check-circle:before {
+ content: "\f058";
+}
+.fa-question-circle:before {
+ content: "\f059";
+}
+.fa-info-circle:before {
+ content: "\f05a";
+}
+.fa-crosshairs:before {
+ content: "\f05b";
+}
+.fa-times-circle-o:before {
+ content: "\f05c";
+}
+.fa-check-circle-o:before {
+ content: "\f05d";
+}
+.fa-ban:before {
+ content: "\f05e";
+}
+.fa-arrow-left:before {
+ content: "\f060";
+}
+.fa-arrow-right:before {
+ content: "\f061";
+}
+.fa-arrow-up:before {
+ content: "\f062";
+}
+.fa-arrow-down:before {
+ content: "\f063";
+}
+.fa-mail-forward:before,
+.fa-share:before {
+ content: "\f064";
+}
+.fa-expand:before {
+ content: "\f065";
+}
+.fa-compress:before {
+ content: "\f066";
+}
+.fa-plus:before {
+ content: "\f067";
+}
+.fa-minus:before {
+ content: "\f068";
+}
+.fa-asterisk:before {
+ content: "\f069";
+}
+.fa-exclamation-circle:before {
+ content: "\f06a";
+}
+.fa-gift:before {
+ content: "\f06b";
+}
+.fa-leaf:before {
+ content: "\f06c";
+}
+.fa-fire:before {
+ content: "\f06d";
+}
+.fa-eye:before {
+ content: "\f06e";
+}
+.fa-eye-slash:before {
+ content: "\f070";
+}
+.fa-warning:before,
+.fa-exclamation-triangle:before {
+ content: "\f071";
+}
+.fa-plane:before {
+ content: "\f072";
+}
+.fa-calendar:before {
+ content: "\f073";
+}
+.fa-random:before {
+ content: "\f074";
+}
+.fa-comment:before {
+ content: "\f075";
+}
+.fa-magnet:before {
+ content: "\f076";
+}
+.fa-chevron-up:before {
+ content: "\f077";
+}
+.fa-chevron-down:before {
+ content: "\f078";
+}
+.fa-retweet:before {
+ content: "\f079";
+}
+.fa-shopping-cart:before {
+ content: "\f07a";
+}
+.fa-folder:before {
+ content: "\f07b";
+}
+.fa-folder-open:before {
+ content: "\f07c";
+}
+.fa-arrows-v:before {
+ content: "\f07d";
+}
+.fa-arrows-h:before {
+ content: "\f07e";
+}
+.fa-bar-chart-o:before {
+ content: "\f080";
+}
+.fa-twitter-square:before {
+ content: "\f081";
+}
+.fa-facebook-square:before {
+ content: "\f082";
+}
+.fa-camera-retro:before {
+ content: "\f083";
+}
+.fa-key:before {
+ content: "\f084";
+}
+.fa-gears:before,
+.fa-cogs:before {
+ content: "\f085";
+}
+.fa-comments:before {
+ content: "\f086";
+}
+.fa-thumbs-o-up:before {
+ content: "\f087";
+}
+.fa-thumbs-o-down:before {
+ content: "\f088";
+}
+.fa-star-half:before {
+ content: "\f089";
+}
+.fa-heart-o:before {
+ content: "\f08a";
+}
+.fa-sign-out:before {
+ content: "\f08b";
+}
+.fa-linkedin-square:before {
+ content: "\f08c";
+}
+.fa-thumb-tack:before {
+ content: "\f08d";
+}
+.fa-external-link:before {
+ content: "\f08e";
+}
+.fa-sign-in:before {
+ content: "\f090";
+}
+.fa-trophy:before {
+ content: "\f091";
+}
+.fa-github-square:before {
+ content: "\f092";
+}
+.fa-upload:before {
+ content: "\f093";
+}
+.fa-lemon-o:before {
+ content: "\f094";
+}
+.fa-phone:before {
+ content: "\f095";
+}
+.fa-square-o:before {
+ content: "\f096";
+}
+.fa-bookmark-o:before {
+ content: "\f097";
+}
+.fa-phone-square:before {
+ content: "\f098";
+}
+.fa-twitter:before {
+ content: "\f099";
+}
+.fa-facebook:before {
+ content: "\f09a";
+}
+.fa-github:before {
+ content: "\f09b";
+}
+.fa-unlock:before {
+ content: "\f09c";
+}
+.fa-credit-card:before {
+ content: "\f09d";
+}
+.fa-rss:before {
+ content: "\f09e";
+}
+.fa-hdd-o:before {
+ content: "\f0a0";
+}
+.fa-bullhorn:before {
+ content: "\f0a1";
+}
+.fa-bell:before {
+ content: "\f0f3";
+}
+.fa-certificate:before {
+ content: "\f0a3";
+}
+.fa-hand-o-right:before {
+ content: "\f0a4";
+}
+.fa-hand-o-left:before {
+ content: "\f0a5";
+}
+.fa-hand-o-up:before {
+ content: "\f0a6";
+}
+.fa-hand-o-down:before {
+ content: "\f0a7";
+}
+.fa-arrow-circle-left:before {
+ content: "\f0a8";
+}
+.fa-arrow-circle-right:before {
+ content: "\f0a9";
+}
+.fa-arrow-circle-up:before {
+ content: "\f0aa";
+}
+.fa-arrow-circle-down:before {
+ content: "\f0ab";
+}
+.fa-globe:before {
+ content: "\f0ac";
+}
+.fa-wrench:before {
+ content: "\f0ad";
+}
+.fa-tasks:before {
+ content: "\f0ae";
+}
+.fa-filter:before {
+ content: "\f0b0";
+}
+.fa-briefcase:before {
+ content: "\f0b1";
+}
+.fa-arrows-alt:before {
+ content: "\f0b2";
+}
+.fa-group:before,
+.fa-users:before {
+ content: "\f0c0";
+}
+.fa-chain:before,
+.fa-link:before {
+ content: "\f0c1";
+}
+.fa-cloud:before {
+ content: "\f0c2";
+}
+.fa-flask:before {
+ content: "\f0c3";
+}
+.fa-cut:before,
+.fa-scissors:before {
+ content: "\f0c4";
+}
+.fa-copy:before,
+.fa-files-o:before {
+ content: "\f0c5";
+}
+.fa-paperclip:before {
+ content: "\f0c6";
+}
+.fa-save:before,
+.fa-floppy-o:before {
+ content: "\f0c7";
+}
+.fa-square:before {
+ content: "\f0c8";
+}
+.fa-navicon:before,
+.fa-reorder:before,
+.fa-bars:before {
+ content: "\f0c9";
+}
+.fa-list-ul:before {
+ content: "\f0ca";
+}
+.fa-list-ol:before {
+ content: "\f0cb";
+}
+.fa-strikethrough:before {
+ content: "\f0cc";
+}
+.fa-underline:before {
+ content: "\f0cd";
+}
+.fa-table:before {
+ content: "\f0ce";
+}
+.fa-magic:before {
+ content: "\f0d0";
+}
+.fa-truck:before {
+ content: "\f0d1";
+}
+.fa-pinterest:before {
+ content: "\f0d2";
+}
+.fa-pinterest-square:before {
+ content: "\f0d3";
+}
+.fa-google-plus-square:before {
+ content: "\f0d4";
+}
+.fa-google-plus:before {
+ content: "\f0d5";
+}
+.fa-money:before {
+ content: "\f0d6";
+}
+.fa-caret-down:before {
+ content: "\f0d7";
+}
+.fa-caret-up:before {
+ content: "\f0d8";
+}
+.fa-caret-left:before {
+ content: "\f0d9";
+}
+.fa-caret-right:before {
+ content: "\f0da";
+}
+.fa-columns:before {
+ content: "\f0db";
+}
+.fa-unsorted:before,
+.fa-sort:before {
+ content: "\f0dc";
+}
+.fa-sort-down:before,
+.fa-sort-desc:before {
+ content: "\f0dd";
+}
+.fa-sort-up:before,
+.fa-sort-asc:before {
+ content: "\f0de";
+}
+.fa-envelope:before {
+ content: "\f0e0";
+}
+.fa-linkedin:before {
+ content: "\f0e1";
+}
+.fa-rotate-left:before,
+.fa-undo:before {
+ content: "\f0e2";
+}
+.fa-legal:before,
+.fa-gavel:before {
+ content: "\f0e3";
+}
+.fa-dashboard:before,
+.fa-tachometer:before {
+ content: "\f0e4";
+}
+.fa-comment-o:before {
+ content: "\f0e5";
+}
+.fa-comments-o:before {
+ content: "\f0e6";
+}
+.fa-flash:before,
+.fa-bolt:before {
+ content: "\f0e7";
+}
+.fa-sitemap:before {
+ content: "\f0e8";
+}
+.fa-umbrella:before {
+ content: "\f0e9";
+}
+.fa-paste:before,
+.fa-clipboard:before {
+ content: "\f0ea";
+}
+.fa-lightbulb-o:before {
+ content: "\f0eb";
+}
+.fa-exchange:before {
+ content: "\f0ec";
+}
+.fa-cloud-download:before {
+ content: "\f0ed";
+}
+.fa-cloud-upload:before {
+ content: "\f0ee";
+}
+.fa-user-md:before {
+ content: "\f0f0";
+}
+.fa-stethoscope:before {
+ content: "\f0f1";
+}
+.fa-suitcase:before {
+ content: "\f0f2";
+}
+.fa-bell-o:before {
+ content: "\f0a2";
+}
+.fa-coffee:before {
+ content: "\f0f4";
+}
+.fa-cutlery:before {
+ content: "\f0f5";
+}
+.fa-file-text-o:before {
+ content: "\f0f6";
+}
+.fa-building-o:before {
+ content: "\f0f7";
+}
+.fa-hospital-o:before {
+ content: "\f0f8";
+}
+.fa-ambulance:before {
+ content: "\f0f9";
+}
+.fa-medkit:before {
+ content: "\f0fa";
+}
+.fa-fighter-jet:before {
+ content: "\f0fb";
+}
+.fa-beer:before {
+ content: "\f0fc";
+}
+.fa-h-square:before {
+ content: "\f0fd";
+}
+.fa-plus-square:before {
+ content: "\f0fe";
+}
+.fa-angle-double-left:before {
+ content: "\f100";
+}
+.fa-angle-double-right:before {
+ content: "\f101";
+}
+.fa-angle-double-up:before {
+ content: "\f102";
+}
+.fa-angle-double-down:before {
+ content: "\f103";
+}
+.fa-angle-left:before {
+ content: "\f104";
+}
+.fa-angle-right:before {
+ content: "\f105";
+}
+.fa-angle-up:before {
+ content: "\f106";
+}
+.fa-angle-down:before {
+ content: "\f107";
+}
+.fa-desktop:before {
+ content: "\f108";
+}
+.fa-laptop:before {
+ content: "\f109";
+}
+.fa-tablet:before {
+ content: "\f10a";
+}
+.fa-mobile-phone:before,
+.fa-mobile:before {
+ content: "\f10b";
+}
+.fa-circle-o:before {
+ content: "\f10c";
+}
+.fa-quote-left:before {
+ content: "\f10d";
+}
+.fa-quote-right:before {
+ content: "\f10e";
+}
+.fa-spinner:before {
+ content: "\f110";
+}
+.fa-circle:before {
+ content: "\f111";
+}
+.fa-mail-reply:before,
+.fa-reply:before {
+ content: "\f112";
+}
+.fa-github-alt:before {
+ content: "\f113";
+}
+.fa-folder-o:before {
+ content: "\f114";
+}
+.fa-folder-open-o:before {
+ content: "\f115";
+}
+.fa-smile-o:before {
+ content: "\f118";
+}
+.fa-frown-o:before {
+ content: "\f119";
+}
+.fa-meh-o:before {
+ content: "\f11a";
+}
+.fa-gamepad:before {
+ content: "\f11b";
+}
+.fa-keyboard-o:before {
+ content: "\f11c";
+}
+.fa-flag-o:before {
+ content: "\f11d";
+}
+.fa-flag-checkered:before {
+ content: "\f11e";
+}
+.fa-terminal:before {
+ content: "\f120";
+}
+.fa-code:before {
+ content: "\f121";
+}
+.fa-mail-reply-all:before,
+.fa-reply-all:before {
+ content: "\f122";
+}
+.fa-star-half-empty:before,
+.fa-star-half-full:before,
+.fa-star-half-o:before {
+ content: "\f123";
+}
+.fa-location-arrow:before {
+ content: "\f124";
+}
+.fa-crop:before {
+ content: "\f125";
+}
+.fa-code-fork:before {
+ content: "\f126";
+}
+.fa-unlink:before,
+.fa-chain-broken:before {
+ content: "\f127";
+}
+.fa-question:before {
+ content: "\f128";
+}
+.fa-info:before {
+ content: "\f129";
+}
+.fa-exclamation:before {
+ content: "\f12a";
+}
+.fa-superscript:before {
+ content: "\f12b";
+}
+.fa-subscript:before {
+ content: "\f12c";
+}
+.fa-eraser:before {
+ content: "\f12d";
+}
+.fa-puzzle-piece:before {
+ content: "\f12e";
+}
+.fa-microphone:before {
+ content: "\f130";
+}
+.fa-microphone-slash:before {
+ content: "\f131";
+}
+.fa-shield:before {
+ content: "\f132";
+}
+.fa-calendar-o:before {
+ content: "\f133";
+}
+.fa-fire-extinguisher:before {
+ content: "\f134";
+}
+.fa-rocket:before {
+ content: "\f135";
+}
+.fa-maxcdn:before {
+ content: "\f136";
+}
+.fa-chevron-circle-left:before {
+ content: "\f137";
+}
+.fa-chevron-circle-right:before {
+ content: "\f138";
+}
+.fa-chevron-circle-up:before {
+ content: "\f139";
+}
+.fa-chevron-circle-down:before {
+ content: "\f13a";
+}
+.fa-html5:before {
+ content: "\f13b";
+}
+.fa-css3:before {
+ content: "\f13c";
+}
+.fa-anchor:before {
+ content: "\f13d";
+}
+.fa-unlock-alt:before {
+ content: "\f13e";
+}
+.fa-bullseye:before {
+ content: "\f140";
+}
+.fa-ellipsis-h:before {
+ content: "\f141";
+}
+.fa-ellipsis-v:before {
+ content: "\f142";
+}
+.fa-rss-square:before {
+ content: "\f143";
+}
+.fa-play-circle:before {
+ content: "\f144";
+}
+.fa-ticket:before {
+ content: "\f145";
+}
+.fa-minus-square:before {
+ content: "\f146";
+}
+.fa-minus-square-o:before {
+ content: "\f147";
+}
+.fa-level-up:before {
+ content: "\f148";
+}
+.fa-level-down:before {
+ content: "\f149";
+}
+.fa-check-square:before {
+ content: "\f14a";
+}
+.fa-pencil-square:before {
+ content: "\f14b";
+}
+.fa-external-link-square:before {
+ content: "\f14c";
+}
+.fa-share-square:before {
+ content: "\f14d";
+}
+.fa-compass:before {
+ content: "\f14e";
+}
+.fa-toggle-down:before,
+.fa-caret-square-o-down:before {
+ content: "\f150";
+}
+.fa-toggle-up:before,
+.fa-caret-square-o-up:before {
+ content: "\f151";
+}
+.fa-toggle-right:before,
+.fa-caret-square-o-right:before {
+ content: "\f152";
+}
+.fa-euro:before,
+.fa-eur:before {
+ content: "\f153";
+}
+.fa-gbp:before {
+ content: "\f154";
+}
+.fa-dollar:before,
+.fa-usd:before {
+ content: "\f155";
+}
+.fa-rupee:before,
+.fa-inr:before {
+ content: "\f156";
+}
+.fa-cny:before,
+.fa-rmb:before,
+.fa-yen:before,
+.fa-jpy:before {
+ content: "\f157";
+}
+.fa-ruble:before,
+.fa-rouble:before,
+.fa-rub:before {
+ content: "\f158";
+}
+.fa-won:before,
+.fa-krw:before {
+ content: "\f159";
+}
+.fa-bitcoin:before,
+.fa-btc:before {
+ content: "\f15a";
+}
+.fa-file:before {
+ content: "\f15b";
+}
+.fa-file-text:before {
+ content: "\f15c";
+}
+.fa-sort-alpha-asc:before {
+ content: "\f15d";
+}
+.fa-sort-alpha-desc:before {
+ content: "\f15e";
+}
+.fa-sort-amount-asc:before {
+ content: "\f160";
+}
+.fa-sort-amount-desc:before {
+ content: "\f161";
+}
+.fa-sort-numeric-asc:before {
+ content: "\f162";
+}
+.fa-sort-numeric-desc:before {
+ content: "\f163";
+}
+.fa-thumbs-up:before {
+ content: "\f164";
+}
+.fa-thumbs-down:before {
+ content: "\f165";
+}
+.fa-youtube-square:before {
+ content: "\f166";
+}
+.fa-youtube:before {
+ content: "\f167";
+}
+.fa-xing:before {
+ content: "\f168";
+}
+.fa-xing-square:before {
+ content: "\f169";
+}
+.fa-youtube-play:before {
+ content: "\f16a";
+}
+.fa-dropbox:before {
+ content: "\f16b";
+}
+.fa-stack-overflow:before {
+ content: "\f16c";
+}
+.fa-instagram:before {
+ content: "\f16d";
+}
+.fa-flickr:before {
+ content: "\f16e";
+}
+.fa-adn:before {
+ content: "\f170";
+}
+.fa-bitbucket:before {
+ content: "\f171";
+}
+.fa-bitbucket-square:before {
+ content: "\f172";
+}
+.fa-tumblr:before {
+ content: "\f173";
+}
+.fa-tumblr-square:before {
+ content: "\f174";
+}
+.fa-long-arrow-down:before {
+ content: "\f175";
+}
+.fa-long-arrow-up:before {
+ content: "\f176";
+}
+.fa-long-arrow-left:before {
+ content: "\f177";
+}
+.fa-long-arrow-right:before {
+ content: "\f178";
+}
+.fa-apple:before {
+ content: "\f179";
+}
+.fa-windows:before {
+ content: "\f17a";
+}
+.fa-android:before {
+ content: "\f17b";
+}
+.fa-linux:before {
+ content: "\f17c";
+}
+.fa-dribbble:before {
+ content: "\f17d";
+}
+.fa-skype:before {
+ content: "\f17e";
+}
+.fa-foursquare:before {
+ content: "\f180";
+}
+.fa-trello:before {
+ content: "\f181";
+}
+.fa-female:before {
+ content: "\f182";
+}
+.fa-male:before {
+ content: "\f183";
+}
+.fa-gittip:before {
+ content: "\f184";
+}
+.fa-sun-o:before {
+ content: "\f185";
+}
+.fa-moon-o:before {
+ content: "\f186";
+}
+.fa-archive:before {
+ content: "\f187";
+}
+.fa-bug:before {
+ content: "\f188";
+}
+.fa-vk:before {
+ content: "\f189";
+}
+.fa-weibo:before {
+ content: "\f18a";
+}
+.fa-renren:before {
+ content: "\f18b";
+}
+.fa-pagelines:before {
+ content: "\f18c";
+}
+.fa-stack-exchange:before {
+ content: "\f18d";
+}
+.fa-arrow-circle-o-right:before {
+ content: "\f18e";
+}
+.fa-arrow-circle-o-left:before {
+ content: "\f190";
+}
+.fa-toggle-left:before,
+.fa-caret-square-o-left:before {
+ content: "\f191";
+}
+.fa-dot-circle-o:before {
+ content: "\f192";
+}
+.fa-wheelchair:before {
+ content: "\f193";
+}
+.fa-vimeo-square:before {
+ content: "\f194";
+}
+.fa-turkish-lira:before,
+.fa-try:before {
+ content: "\f195";
+}
+.fa-plus-square-o:before {
+ content: "\f196";
+}
+.fa-space-shuttle:before {
+ content: "\f197";
+}
+.fa-slack:before {
+ content: "\f198";
+}
+.fa-envelope-square:before {
+ content: "\f199";
+}
+.fa-wordpress:before {
+ content: "\f19a";
+}
+.fa-openid:before {
+ content: "\f19b";
+}
+.fa-institution:before,
+.fa-bank:before,
+.fa-university:before {
+ content: "\f19c";
+}
+.fa-mortar-board:before,
+.fa-graduation-cap:before {
+ content: "\f19d";
+}
+.fa-yahoo:before {
+ content: "\f19e";
+}
+.fa-google:before {
+ content: "\f1a0";
+}
+.fa-reddit:before {
+ content: "\f1a1";
+}
+.fa-reddit-square:before {
+ content: "\f1a2";
+}
+.fa-stumbleupon-circle:before {
+ content: "\f1a3";
+}
+.fa-stumbleupon:before {
+ content: "\f1a4";
+}
+.fa-delicious:before {
+ content: "\f1a5";
+}
+.fa-digg:before {
+ content: "\f1a6";
+}
+.fa-pied-piper-square:before,
+.fa-pied-piper:before {
+ content: "\f1a7";
+}
+.fa-pied-piper-alt:before {
+ content: "\f1a8";
+}
+.fa-drupal:before {
+ content: "\f1a9";
+}
+.fa-joomla:before {
+ content: "\f1aa";
+}
+.fa-language:before {
+ content: "\f1ab";
+}
+.fa-fax:before {
+ content: "\f1ac";
+}
+.fa-building:before {
+ content: "\f1ad";
+}
+.fa-child:before {
+ content: "\f1ae";
+}
+.fa-paw:before {
+ content: "\f1b0";
+}
+.fa-spoon:before {
+ content: "\f1b1";
+}
+.fa-cube:before {
+ content: "\f1b2";
+}
+.fa-cubes:before {
+ content: "\f1b3";
+}
+.fa-behance:before {
+ content: "\f1b4";
+}
+.fa-behance-square:before {
+ content: "\f1b5";
+}
+.fa-steam:before {
+ content: "\f1b6";
+}
+.fa-steam-square:before {
+ content: "\f1b7";
+}
+.fa-recycle:before {
+ content: "\f1b8";
+}
+.fa-automobile:before,
+.fa-car:before {
+ content: "\f1b9";
+}
+.fa-cab:before,
+.fa-taxi:before {
+ content: "\f1ba";
+}
+.fa-tree:before {
+ content: "\f1bb";
+}
+.fa-spotify:before {
+ content: "\f1bc";
+}
+.fa-deviantart:before {
+ content: "\f1bd";
+}
+.fa-soundcloud:before {
+ content: "\f1be";
+}
+.fa-database:before {
+ content: "\f1c0";
+}
+.fa-file-pdf-o:before {
+ content: "\f1c1";
+}
+.fa-file-word-o:before {
+ content: "\f1c2";
+}
+.fa-file-excel-o:before {
+ content: "\f1c3";
+}
+.fa-file-powerpoint-o:before {
+ content: "\f1c4";
+}
+.fa-file-photo-o:before,
+.fa-file-picture-o:before,
+.fa-file-image-o:before {
+ content: "\f1c5";
+}
+.fa-file-zip-o:before,
+.fa-file-archive-o:before {
+ content: "\f1c6";
+}
+.fa-file-sound-o:before,
+.fa-file-audio-o:before {
+ content: "\f1c7";
+}
+.fa-file-movie-o:before,
+.fa-file-video-o:before {
+ content: "\f1c8";
+}
+.fa-file-code-o:before {
+ content: "\f1c9";
+}
+.fa-vine:before {
+ content: "\f1ca";
+}
+.fa-codepen:before {
+ content: "\f1cb";
+}
+.fa-jsfiddle:before {
+ content: "\f1cc";
+}
+.fa-life-bouy:before,
+.fa-life-saver:before,
+.fa-support:before,
+.fa-life-ring:before {
+ content: "\f1cd";
+}
+.fa-circle-o-notch:before {
+ content: "\f1ce";
+}
+.fa-ra:before,
+.fa-rebel:before {
+ content: "\f1d0";
+}
+.fa-ge:before,
+.fa-empire:before {
+ content: "\f1d1";
+}
+.fa-git-square:before {
+ content: "\f1d2";
+}
+.fa-git:before {
+ content: "\f1d3";
+}
+.fa-hacker-news:before {
+ content: "\f1d4";
+}
+.fa-tencent-weibo:before {
+ content: "\f1d5";
+}
+.fa-qq:before {
+ content: "\f1d6";
+}
+.fa-wechat:before,
+.fa-weixin:before {
+ content: "\f1d7";
+}
+.fa-send:before,
+.fa-paper-plane:before {
+ content: "\f1d8";
+}
+.fa-send-o:before,
+.fa-paper-plane-o:before {
+ content: "\f1d9";
+}
+.fa-history:before {
+ content: "\f1da";
+}
+.fa-circle-thin:before {
+ content: "\f1db";
+}
+.fa-header:before {
+ content: "\f1dc";
+}
+.fa-paragraph:before {
+ content: "\f1dd";
+}
+.fa-sliders:before {
+ content: "\f1de";
+}
+.fa-share-alt:before {
+ content: "\f1e0";
+}
+.fa-share-alt-square:before {
+ content: "\f1e1";
+}
+.fa-bomb:before {
+ content: "\f1e2";
+}
diff --git a/hextris/style/fa/css/font-awesome.min.css b/hextris/style/fa/css/font-awesome.min.css
new file mode 100644
index 00000000..2ed777e6
--- /dev/null
+++ b/hextris/style/fa/css/font-awesome.min.css
@@ -0,0 +1,4 @@
+/*!
+ * Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome
+ * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
+ */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff') format('woff'),url('../fonts/fontawesome-webfont.ttf') format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1, 1);-moz-transform:scale(-1, 1);-ms-transform:scale(-1, 1);-o-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1, -1);-moz-transform:scale(1, -1);-ms-transform:scale(1, -1);-o-transform:scale(1, -1);transform:scale(1, -1)}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-square:before,.fa-pied-piper:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}
\ No newline at end of file
diff --git a/hextris/style/fa/fonts/FontAwesome.otf b/hextris/style/fa/fonts/FontAwesome.otf
new file mode 100644
index 00000000..3461e3fc
Binary files /dev/null and b/hextris/style/fa/fonts/FontAwesome.otf differ
diff --git a/hextris/style/fa/fonts/fontawesome-webfont.eot b/hextris/style/fa/fonts/fontawesome-webfont.eot
new file mode 100644
index 00000000..6cfd5660
Binary files /dev/null and b/hextris/style/fa/fonts/fontawesome-webfont.eot differ
diff --git a/hextris/style/fa/fonts/fontawesome-webfont.svg b/hextris/style/fa/fonts/fontawesome-webfont.svg
new file mode 100644
index 00000000..a9f84695
--- /dev/null
+++ b/hextris/style/fa/fonts/fontawesome-webfont.svg
@@ -0,0 +1,504 @@
+
+
+
\ No newline at end of file
diff --git a/hextris/style/fa/fonts/fontawesome-webfont.ttf b/hextris/style/fa/fonts/fontawesome-webfont.ttf
new file mode 100644
index 00000000..5cd6cff6
Binary files /dev/null and b/hextris/style/fa/fonts/fontawesome-webfont.ttf differ
diff --git a/hextris/style/fa/fonts/fontawesome-webfont.woff b/hextris/style/fa/fonts/fontawesome-webfont.woff
new file mode 100644
index 00000000..9eaecb37
Binary files /dev/null and b/hextris/style/fa/fonts/fontawesome-webfont.woff differ
diff --git a/hextris/style/fonts/Exo2-ExtraLight.otf b/hextris/style/fonts/Exo2-ExtraLight.otf
new file mode 100644
index 00000000..4b6bd42e
Binary files /dev/null and b/hextris/style/fonts/Exo2-ExtraLight.otf differ
diff --git a/hextris/style/fonts/Exo2-Regular.otf b/hextris/style/fonts/Exo2-Regular.otf
new file mode 100644
index 00000000..b3fec6e5
Binary files /dev/null and b/hextris/style/fonts/Exo2-Regular.otf differ
diff --git a/hextris/style/fonts/Exo2-SemiBold.otf b/hextris/style/fonts/Exo2-SemiBold.otf
new file mode 100644
index 00000000..106a3990
Binary files /dev/null and b/hextris/style/fonts/Exo2-SemiBold.otf differ
diff --git a/hextris/style/fonts/Lovelo.otf b/hextris/style/fonts/Lovelo.otf
new file mode 100644
index 00000000..a3d05340
Binary files /dev/null and b/hextris/style/fonts/Lovelo.otf differ
diff --git a/hextris/style/fonts/QuattrocentoSans-Regular.ttf b/hextris/style/fonts/QuattrocentoSans-Regular.ttf
new file mode 100644
index 00000000..2cde4db8
Binary files /dev/null and b/hextris/style/fonts/QuattrocentoSans-Regular.ttf differ
diff --git a/hextris/style/fonts/roboto.woff b/hextris/style/fonts/roboto.woff
new file mode 100644
index 00000000..3be8671f
Binary files /dev/null and b/hextris/style/fonts/roboto.woff differ
diff --git a/hextris/style/rrssb.css b/hextris/style/rrssb.css
new file mode 100644
index 00000000..e7499d96
--- /dev/null
+++ b/hextris/style/rrssb.css
@@ -0,0 +1 @@
+.rrssb-buttons{box-sizing:border-box;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;height:36px;margin:0;padding:0;width:100%}.rrssb-buttons li{box-sizing:border-box;float:left;height:100%;line-height:13px;list-style:none;margin:0;padding:0 2px}.rrssb-buttons li.rrssb-email a{background-color:#0a88ff}.rrssb-buttons li.rrssb-email a:hover{background-color:#006ed6}.rrssb-buttons li.rrssb-facebook a{background-color:#306199}.rrssb-buttons li.rrssb-facebook a:hover{background-color:#244872}.rrssb-buttons li.rrssb-tumblr a{background-color:#32506d}.rrssb-buttons li.rrssb-tumblr a:hover{background-color:#22364a}.rrssb-buttons li.rrssb-linkedin a{background-color:#007bb6}.rrssb-buttons li.rrssb-linkedin a:hover{background-color:#005983}.rrssb-buttons li.rrssb-twitter a{background-color:#26c4f1}.rrssb-buttons li.rrssb-twitter a:hover{background-color:#0eaad6}.rrssb-buttons li.rrssb-googleplus a{background-color:#e93f2e}.rrssb-buttons li.rrssb-googleplus a:hover{background-color:#ce2616}.rrssb-buttons li.rrssb-youtube a{background-color:#df1c31}.rrssb-buttons li.rrssb-youtube a:hover{background-color:#b21627}.rrssb-buttons li.rrssb-reddit a{background-color:#8bbbe3}.rrssb-buttons li.rrssb-reddit a:hover{background-color:#62a3d9}.rrssb-buttons li.rrssb-pinterest a{background-color:#b81621}.rrssb-buttons li.rrssb-pinterest a:hover{background-color:#8a1119}.rrssb-buttons li.rrssb-pocket a{background-color:#ed4054}.rrssb-buttons li.rrssb-pocket a:hover{background-color:#e4162d}.rrssb-buttons li.rrssb-github a{background-color:#444}.rrssb-buttons li.rrssb-github a:hover{background-color:#2b2b2b}.rrssb-buttons li.rrssb-instagram a{background-color:#517fa4}.rrssb-buttons li.rrssb-instagram a:hover{background-color:#406582}.rrssb-buttons li.rrssb-delicious a{background-color:#0B79E5}.rrssb-buttons li.rrssb-delicious a:hover{background-color:#095fb4}.rrssb-buttons li.rrssb-vk a{background-color:#4d71a9}.rrssb-buttons li.rrssb-vk a:hover{background-color:#3d5a86}.rrssb-buttons li.rrssb-hackernews a{background-color:#f60}.rrssb-buttons li.rrssb-hackernews a:hover{background-color:#cc5200}.rrssb-buttons li a{background-color:#ccc;border-radius:2px;box-sizing:border-box;display:block;font-size:11px;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:700;height:100%;padding:11px 7px 12px 27px;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;width:100%}.rrssb-buttons li a .rrssb-icon{display:block;left:10px;padding-top:9px;position:absolute;top:0;width:10%}.rrssb-buttons li a .rrssb-icon svg{height:17px;width:17px}.rrssb-buttons li a .rrssb-icon svg path,.rrssb-buttons li a .rrssb-icon svg polygon{fill:#fff}.rrssb-buttons li a .rrssb-text{color:#fff}.rrssb-buttons li a:active{box-shadow:inset 1px 3px 15px 0 rgba(22,0,0,.25)}.rrssb-buttons li.small a{padding:0}.rrssb-buttons li.small a .rrssb-icon{left:auto;margin:0 auto;overflow:hidden;position:relative;top:auto;width:100%}.rrssb-buttons li.small a .rrssb-text{visibility:hidden}.rrssb-buttons.large-format,.rrssb-buttons.large-format li{height:auto}.rrssb-buttons.large-format li:first-child:nth-last-child(1) a{font-size:20px;font-size:4vw}.rrssb-buttons.large-format li:first-child:nth-last-child(2) a,.rrssb-buttons.large-format li:first-child:nth-last-child(2)~li a{font-size:16px;font-size:2vw}.rrssb-buttons.large-format li:first-child:nth-last-child(3) a,.rrssb-buttons.large-format li:first-child:nth-last-child(3)~li a{font-size:14px;font-size:1.7vw}.rrssb-buttons.large-format li:first-child:nth-last-child(4) a,.rrssb-buttons.large-format li:first-child:nth-last-child(4)~li a{font-size:13px;font-size:1.4vw}.rrssb-buttons.large-format li:first-child:nth-last-child(5) a,.rrssb-buttons.large-format li:first-child:nth-last-child(5)~li a{font-size:13px;font-size:1.2vw}.rrssb-buttons.large-format li:first-child:nth-last-child(6) a,.rrssb-buttons.large-format li:first-child:nth-last-child(6)~li a{font-size:12px;font-size:1.05vw}.rrssb-buttons.large-format li:first-child:nth-last-child(7) a,.rrssb-buttons.large-format li:first-child:nth-last-child(7)~li a{font-size:11px;font-size:.9vw}.rrssb-buttons.large-format li:first-child:nth-last-child(8) a,.rrssb-buttons.large-format li:first-child:nth-last-child(8)~li a{font-size:11px;font-size:.8vw}.rrssb-buttons.large-format li:first-child:nth-last-child(9) a,.rrssb-buttons.large-format li:first-child:nth-last-child(9)~li a{font-size:11px;font-size:.7vw}.rrssb-buttons.large-format li:first-child:nth-last-child(10) a,.rrssb-buttons.large-format li:first-child:nth-last-child(10)~li a{font-size:11px;font-size:.6vw}.rrssb-buttons.large-format li:first-child:nth-last-child(11) a,.rrssb-buttons.large-format li:first-child:nth-last-child(11)~li a{font-size:11px;font-size:.5vw}.rrssb-buttons.large-format li a{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:.2em;padding:8.5% 0 8.5% 12%}.rrssb-buttons.large-format li a .rrssb-icon{height:100%;left:7%;padding-top:0;width:12%}.rrssb-buttons.large-format li a .rrssb-icon svg{height:100%;position:absolute;top:0;width:100%}.rrssb-buttons.large-format li a .rrssb-text{-webkit-backface-visibility:hidden;backface-visibility:hidden}.rrssb-buttons.small-format{padding-top:5px}.rrssb-buttons.small-format li{height:80%;padding:0 1px}.rrssb-buttons.small-format li a .rrssb-icon{height:100%;padding-top:0}.rrssb-buttons.small-format li a .rrssb-icon svg{height:48%;position:relative;top:6px;width:80%}.rrssb-buttons.tiny-format{height:22px;position:relative}.rrssb-buttons.tiny-format li{padding-right:7px}.rrssb-buttons.tiny-format li a{background-color:transparent;padding:0}.rrssb-buttons.tiny-format li a .rrssb-icon svg{height:70%;width:100%}.rrssb-buttons.tiny-format li a:active,.rrssb-buttons.tiny-format li a:hover{background-color:transparent}.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon svg polygon{fill:#0a88ff}.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-email a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#0054a3}.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon svg polygon{fill:#306199}.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-facebook a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#18304b}.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon svg polygon{fill:#32506d}.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-tumblr a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#121d27}.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon svg polygon{fill:#007bb6}.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-linkedin a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#003650}.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon svg polygon{fill:#26c4f1}.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-twitter a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#0b84a6}.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon svg polygon{fill:#e93f2e}.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-googleplus a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#a01e11}.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon svg polygon{fill:#df1c31}.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-youtube a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#84111d}.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon svg polygon{fill:#8bbbe3}.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-reddit a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#398bcf}.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon svg polygon{fill:#b81621}.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-pinterest a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#5d0b11}.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon svg polygon{fill:#ed4054}.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-pocket a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#b61124}.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon svg polygon{fill:#444}.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-github a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#111}.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon svg polygon{fill:#517fa4}.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-instagram a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#2f4a60}.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon svg polygon{fill:#0B79E5}.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-delicious a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#064684}.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon svg polygon{fill:#4d71a9}.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-vk a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#2d4263}.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon svg polygon{fill:#f60}.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg path,.rrssb-buttons.tiny-format li.rrssb-hackernews a .rrssb-icon:hover .rrssb-icon svg polygon{fill:#993d00}
\ No newline at end of file
diff --git a/hextris/style/style.css b/hextris/style/style.css
new file mode 100644
index 00000000..b57f23e8
--- /dev/null
+++ b/hextris/style/style.css
@@ -0,0 +1,527 @@
+* {
+ -webkit-touch-callout:none;
+ -webkit-user-select:none;
+ -khtml-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none;
+ padding:0;
+ margin:0;
+ -webkit-tap-highlight-color:rgba(0,0,0,0);
+}
+#HIGHSCORE {
+ position:absolute;
+ left:50%;
+ width:250px;
+ overflow:visible;
+ margin-left:-175px;
+ font-family:Exo;
+
+}
+#container {
+ color:#232323;
+ position:absolute;
+ left:50%;
+ top:calc(50%);
+ text-align:center;
+ transform:translate(-50%, -50%);
+ font-family:Exo;
+ -webkit-transform:translate(-50%, -50%);
+ -moz-transform:translate(-50%, -50%);
+ -ms-transform:translate(-50%, -50%);
+ display:none;
+}
+.tweet {
+ font-size:2rem;
+ color:#4099FF;
+}
+@media only screen and (min-device-width:320px) and (max-device-width:480px) {
+ .tweet{
+ font-size:1rem;
+ }
+}
+a {
+ color:#232323;
+}
+.navbar {
+ width:80%;
+ margin:0 auto;
+ padding:2.5vmin 0;
+ text-align:center;
+}
+.navbar li {
+ display:inline-block;
+ text-align:center;
+ width:calc(33% - 1.25vmin);
+}
+
+#title {
+ color:#ecf0f1;
+ font-size:6vmin;
+}
+
+#score {
+ font-size:4vmin;
+ text-align:center;
+ width:30%;
+}
+
+#highscores {
+ text-align:center;
+ list-style:none;
+}
+
+.not-visible {
+ display:none;
+}
+
+button {
+ color:#ecf0f1;
+ background-color:rgba(0,0,0,0);
+ border:0;
+}
+
+button:focus {
+ outline:0;
+}
+
+#openSideBar {
+ position:fixed;
+ margin-top:6px;
+ width:72px;
+ height:72px;
+ margin-left:11px;
+ z-index:3003;
+ color:#232323;
+ cursor:pointer;
+ top:0;
+ left:0;
+
+}
+
+
+#pauseBtn {
+ display:none;
+ position:fixed;
+ margin-bottom:7px;
+ width:72px;
+ height:72px;
+ margin-right:11px;
+ z-index:3000;
+ color:#232323;
+ cursor:pointer;
+ right:0;
+ bottom:0;
+ z-index:99;
+}
+
+#restartBtn {
+ display:none;
+ position:fixed;
+ margin-bottom:7px;
+ width:72px;
+ height:72px;
+ margin-left:11px;
+ z-index:3000;
+ color:#232323;
+ cursor:pointer;
+ bottom:0;
+ z-index:99;
+}
+#startBtn {
+ position:absolute;
+ left:40%;
+ top:38%;
+ height:25%;
+ width:25%;
+ z-index:99999999;
+ cursor:pointer;
+}
+
+#helpScreen {
+ height:100%;
+ width:100%;
+ z-index:3001;
+ position:fixed;
+ top:0;
+ margin:0;
+ font-size:15px;
+ text-align:center;
+ display:none;
+ color:#232323;
+ background-color:rgba(236,240,241,1);
+}
+
+#colorBlindBtn {
+ position:absolute;
+ width:120px;
+ height:20px;
+ z-index:9999;
+ left:47%;
+ top:65%;
+ font-size:15px;
+ text-align:center;
+ color:#232323;
+ cursor:pointer;
+}
+
+#inst_main_body {
+ padding:0px;
+ font-size:1.2em;
+ left:50%;
+ top:50%;
+ position: absolute;
+ text-align:left;
+ max-width:400px;
+ /*margin-top:30px;*/
+ transform:translate(-50%, -50%);
+ -webkit-transform:translate(-50%, -50%);
+ -moz-transform:translate(-50%, -50%);
+ -ms-transform:translate(-50%, -50%);
+}
+
+#inst_main_body > a {
+ font-weight:bold;
+}
+
+#inst_main_body > hr {
+ width:100%;
+ color:#232323;
+ background-color:#232323;
+ height:1px;
+ border:0;
+}
+
+#inst_main_body > p {
+ margin-bottom:15px;
+}
+
+#instructions_head {
+ text-align:center;
+ font-size:1.5em;
+ padding-bottom:4px;
+}
+
+
+#highScoreInGameTextHeader {
+ color: #bdc3c7;
+ width:100%;
+}
+
+#highScoreInGameText {
+ position: absolute;
+ top:10px;
+ text-align: center;
+ width:200px;
+ left:50%;
+ margin-left:-100px;
+}
+
+#currentHighScore {
+ color: #2c3e50;
+ width:100%;
+ margin-top: -5px;
+ font-size:2em;
+}
+
+@media only screen and (max-device-width:480px) {
+ #helpScreen {
+ position:fixed;
+ top:2px;
+ padding-top:20px;
+ margin:0;
+ width:100%;
+ height:100%;
+ font-size:13px;
+ text-align:center;
+ }
+ #inst_main_body {
+ width:calc(100% - 70px);
+ transform:translate(-50%, -50%);
+ -webkit-transform:translate(-50%, -50%);
+ -moz-transform:translate(-50%, -50%);
+ -ms-transform:translate(-50%, -50%);
+ }
+ #instructions_head {
+ padding-left:0%;
+ }
+ #openSideBar{
+ width:60px;
+ height:60px;
+ }
+ #pauseBtn {
+ width:60px;
+ height:60px;
+ }
+ #restartBtn {
+ width:60px;
+ height:60px;
+ }
+}
+
+.overlay {
+ position:absolute;
+ height:20%;
+ width:100%;
+ left:50%;
+ top:50%;
+ margin-left:-50%;
+ margin-top:-10%;
+ z-index:3000;
+ color:#232323;
+ text-align:center;
+}
+
+.helpText {
+ z-index:3001;
+}
+
+.centeredHeader {
+ font-size:5vw;
+ text-align:center;
+ line-height:4rem;
+}
+
+.centeredSubHeader {
+ font-size:2.2rem;
+ line-height:1em;
+ text-align:center;
+}
+
+.centeredSubSubHeader {
+ font-size:1.4rem;
+ text-align:center;
+}
+
+#buttonCont {
+ position:absolute;
+ left:50%;
+ width:310px;
+ margin-left:-8px;
+ transform:translate(-50%, 0%);
+ -webkit-transform:translate(-50%, 0%);
+ -moz-transform:translate(-50%, 0%);
+ -ms-transform:translate(-50%, 0%);
+}
+
+@media only screen and (orientation:landscape) {
+ #buttonCont {
+ bottom:calc(50vh - 19vh - 36px);
+ }
+ #container {
+ top:calc(50vh - 11vh);
+ }
+}
+
+@media only screen and (orientation:portrait) {
+ #buttonCont {
+ bottom:calc(50vh - 19vw - 36px);
+ }
+ #container {
+ top:calc(50vh - 11vw);
+ }
+}
+
+@media only screen and (min-device-width:320px) and (max-device-width:600px) {
+ .centeredHeader {
+ font-size:2rem;
+ text-align:center;
+ line-height:0.6rem;
+ }
+
+ .centeredSubHeader {
+ font-size:1rem;
+ text-align:center;
+ }
+
+ .overlay {
+ margin-top:-20%;
+ }
+
+ #buttonCont {
+ width:280px;
+ }
+
+ @media only screen and (orientation:landscape) {
+ #buttonCont {
+ bottom:119px;
+ }
+ }
+
+ @media only screen and (orientation:portrait) {
+ #buttonCont {
+ bottom:119px;
+ }
+ }
+}
+.blur {
+ opacity:0.1;
+}
+
+* {
+ padding:0;
+ margin:0;
+}
+
+body {
+ color:#ecf0f1;
+ font-family:'Exo', sans-serif;
+ background-color:#ecf0f1;
+}
+
+#clickToExit {
+ cursor:pointer;
+}
+
+#canvas {
+ transition:all 0.5s ease;
+ position:absolute;
+ left:0;
+ right:0;
+ height:100%;
+ width:100%;
+ background-color:#ecf0f1;
+ z-index:0;
+}
+#title {
+ z-index:99;
+ margin-top:20px;
+ color:#2c3e50;
+}
+
+#gameoverscreen {
+ /*display:none;*/
+}
+
+#restart{
+ display:none;
+ cursor:pointer !important;
+ margin:0;
+ padding:0;
+ bottom:15px;
+ position:absolute;
+ left:calc(50% - 124px);
+ transform:translate(-50%, 0%);
+ -webkit-transform:translate(-50%, 0%);
+ -moz-transform:translate(-50%, 0%);
+ -ms-transform:translate(-50%, 0%);
+ margin-bottom:-3.5px;
+}
+
+#socialShare{
+ display:none;
+ margin:0;
+ padding:0;
+ bottom:0;
+ margin-bottom: 6.5px;
+ position:absolute;
+ left:calc(50% + 30px);
+ transform:translate(-50%, 0%);
+ -webkit-transform:translate(-50%, 0%);
+ -moz-transform:translate(-50%, 0%);
+ -ms-transform:translate(-50%, 0%);
+ padding-bottom: 2px;
+}
+
+.unselectable {
+ -webkit-touch-callout:none;
+ -webkit-user-select:none;
+ -khtml-user-select:none;
+ -moz-user-select:none;
+ -ms-user-select:none;
+ user-select:none;
+}
+#afterhr {
+ margin:0;
+ padding:0;
+ margin-bottom:-10px;
+ padding-bottom:-10px;
+}
+body {
+ overflow:hidden;
+}
+#gameoverscreen {
+ padding:8px;
+}
+@font-face {
+ font-family:Exo;
+ font-weight:light;
+ src:url("./fonts/Exo2-ExtraLight.otf") format("opentype");
+}
+
+@font-face {
+ font-family:Exo;
+ src:url("./fonts/Exo2-Regular.otf") format("opentype");
+}
+
+@font-face {
+ font-family:Exo;
+ font-weight:bold;
+ src:url("./fonts/Exo2-SemiBold.otf") format("opentype");
+}
+
+.GOTitle {
+ font-weight:bold;
+ font-size:24.2000px;
+}
+
+.scoreNum {
+ font-weight:normal ! important;
+}
+
+#cScore {
+ font-size:60.5000px;
+ font-weight:light;
+ margin-bottom:5px;
+ margin-top:-10px;
+}
+
+#highScoresTitle {
+ margin-bottom:2px;
+}
+
+.score {
+ font-weight:light;
+ line-height:18px;
+}
+
+
+
+
+#bottomContainer {
+ position:absolute;
+ width:100%;
+ bottom:0px;
+}
+
+#androidBadge {
+ position:absolute;
+ height:41px;
+ margin-top:5px;
+ left:calc(50% - 66px);
+ transform:translate(calc(-50% - 4px), -1px);
+ -webkit-transform:translate(calc(-50% - 4px), -1px);
+ -moz-transform:translate(calc(-50% - 4px), -1px);
+ -ms-transform:translate(calc(-50% - 4px), -1px);
+}
+
+#iOSBadge {
+ margin-top:5px;
+ position:absolute;
+ left:calc(50% + 65px);
+ transform:translate(calc(-50% - 4px), 0%);
+ -webkit-transform:translate(calc(-50% - 4px), 0%);
+ -moz-transform:translate(calc(-50% - 4px), 0%);
+ -ms-transform:translate(calc(-50% - 4px), 0%);
+}
+
+#authors {
+ position:absolute;
+ width:200px;
+ bottom:0px;
+ left:50%;
+ transform:translate(-50%, 0%);
+ -webkit-transform:translate(-50%, 0%);
+ -moz-transform:translate(-50%, 0%);
+ -ms-transform:translate(-50%, 0%);
+}
diff --git a/hextris/vendor/hammer.min.js b/hextris/vendor/hammer.min.js
new file mode 100644
index 00000000..11af0314
--- /dev/null
+++ b/hextris/vendor/hammer.min.js
@@ -0,0 +1,8 @@
+/*! Hammer.JS - v1.1.2 - 2014-04-25
+ * http://eightmedia.github.io/hammer.js
+ *
+ * Copyright (c) 2014 Jorik Tangelder | t |
","
"]},jt=dt(o),Dt=jt.appendChild(o.createElement("div"));At.optgroup=At.option,At.tbody=At.tfoot=At.colgroup=At.caption=At.thead,At.th=At.td,b.fn.extend({text:function(e){return b.access(this,function(e){return e===t?b.text(this):this.empty().append((this[0]&&this[0].ownerDocument||o).createTextNode(e))},null,e,arguments.length)},wrapAll:function(e){if(b.isFunction(e))return this.each(function(t){b(this).wrapAll(e.call(this,t))});if(this[0]){var t=b(e,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstChild&&1===e.firstChild.nodeType)e=e.firstChild;return e}).append(this)}return this},wrapInner:function(e){return b.isFunction(e)?this.each(function(t){b(this).wrapInner(e.call(this,t))}):this.each(function(){var t=b(this),n=t.contents();n.length?n.wrapAll(e):t.append(e)})},wrap:function(e){var t=b.isFunction(e);return this.each(function(n){b(this).wrapAll(t?e.call(this,n):e)})},unwrap:function(){return this.parent().each(function(){b.nodeName(this,"body")||b(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(e){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&this.appendChild(e)})},prepend:function(){return this.domManip(arguments,!0,function(e){(1===this.nodeType||11===this.nodeType||9===this.nodeType)&&this.insertBefore(e,this.firstChild)})},before:function(){return this.domManip(arguments,!1,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return this.domManip(arguments,!1,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},remove:function(e,t){var n,r=0;for(;null!=(n=this[r]);r++)(!e||b.filter(e,[n]).length>0)&&(t||1!==n.nodeType||b.cleanData(Ot(n)),n.parentNode&&(t&&b.contains(n.ownerDocument,n)&&Mt(Ot(n,"script")),n.parentNode.removeChild(n)));return this},empty:function(){var e,t=0;for(;null!=(e=this[t]);t++){1===e.nodeType&&b.cleanData(Ot(e,!1));while(e.firstChild)e.removeChild(e.firstChild);e.options&&b.nodeName(e,"select")&&(e.options.length=0)}return this},clone:function(e,t){return e=null==e?!1:e,t=null==t?e:t,this.map(function(){return b.clone(this,e,t)})},html:function(e){return b.access(this,function(e){var n=this[0]||{},r=0,i=this.length;if(e===t)return 1===n.nodeType?n.innerHTML.replace(gt,""):t;if(!("string"!=typeof e||Tt.test(e)||!b.support.htmlSerialize&&mt.test(e)||!b.support.leadingWhitespace&&yt.test(e)||At[(bt.exec(e)||["",""])[1].toLowerCase()])){e=e.replace(vt,"<$1>");try{for(;i>r;r++)n=this[r]||{},1===n.nodeType&&(b.cleanData(Ot(n,!1)),n.innerHTML=e);n=0}catch(o){}}n&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(e){var t=b.isFunction(e);return t||"string"==typeof e||(e=b(e).not(this).detach()),this.domManip([e],!0,function(e){var t=this.nextSibling,n=this.parentNode;n&&(b(this).remove(),n.insertBefore(e,t))})},detach:function(e){return this.remove(e,!0)},domManip:function(e,n,r){e=f.apply([],e);var i,o,a,s,u,l,c=0,p=this.length,d=this,h=p-1,g=e[0],m=b.isFunction(g);if(m||!(1>=p||"string"!=typeof g||b.support.checkClone)&&Ct.test(g))return this.each(function(i){var o=d.eq(i);m&&(e[0]=g.call(this,i,n?o.html():t)),o.domManip(e,n,r)});if(p&&(l=b.buildFragment(e,this[0].ownerDocument,!1,this),i=l.firstChild,1===l.childNodes.length&&(l=i),i)){for(n=n&&b.nodeName(i,"tr"),s=b.map(Ot(l,"script"),Ht),a=s.length;p>c;c++)o=l,c!==h&&(o=b.clone(o,!0,!0),a&&b.merge(s,Ot(o,"script"))),r.call(n&&b.nodeName(this[c],"table")?Lt(this[c],"tbody"):this[c],o,c);if(a)for(u=s[s.length-1].ownerDocument,b.map(s,qt),c=0;a>c;c++)o=s[c],kt.test(o.type||"")&&!b._data(o,"globalEval")&&b.contains(u,o)&&(o.src?b.ajax({url:o.src,type:"GET",dataType:"script",async:!1,global:!1,"throws":!0}):b.globalEval((o.text||o.textContent||o.innerHTML||"").replace(St,"")));l=i=null}return this}});function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function Ht(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function qt(e){var t=Et.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function Mt(e,t){var n,r=0;for(;null!=(n=e[r]);r++)b._data(n,"globalEval",!t||b._data(t[r],"globalEval"))}function _t(e,t){if(1===t.nodeType&&b.hasData(e)){var n,r,i,o=b._data(e),a=b._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)b.event.add(t,n,s[n][r])}a.data&&(a.data=b.extend({},a.data))}}function Ft(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!b.support.noCloneEvent&&t[b.expando]){i=b._data(t);for(r in i.events)b.removeEvent(t,r,i.handle);t.removeAttribute(b.expando)}"script"===n&&t.text!==e.text?(Ht(t).text=e.text,qt(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),b.support.html5Clone&&e.innerHTML&&!b.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Nt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}b.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,t){b.fn[e]=function(e){var n,r=0,i=[],o=b(e),a=o.length-1;for(;a>=r;r++)n=r===a?this:this.clone(!0),b(o[r])[t](n),d.apply(i,n.get());return this.pushStack(i)}});function Ot(e,n){var r,o,a=0,s=typeof e.getElementsByTagName!==i?e.getElementsByTagName(n||"*"):typeof e.querySelectorAll!==i?e.querySelectorAll(n||"*"):t;if(!s)for(s=[],r=e.childNodes||e;null!=(o=r[a]);a++)!n||b.nodeName(o,n)?s.push(o):b.merge(s,Ot(o,n));return n===t||n&&b.nodeName(e,n)?b.merge([e],s):s}function Bt(e){Nt.test(e.type)&&(e.defaultChecked=e.checked)}b.extend({clone:function(e,t,n){var r,i,o,a,s,u=b.contains(e.ownerDocument,e);if(b.support.html5Clone||b.isXMLDoc(e)||!mt.test("<"+e.nodeName+">")?o=e.cloneNode(!0):(Dt.innerHTML=e.outerHTML,Dt.removeChild(o=Dt.firstChild)),!(b.support.noCloneEvent&&b.support.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||b.isXMLDoc(e)))for(r=Ot(o),s=Ot(e),a=0;null!=(i=s[a]);++a)r[a]&&Ft(i,r[a]);if(t)if(n)for(s=s||Ot(e),r=r||Ot(o),a=0;null!=(i=s[a]);a++)_t(i,r[a]);else _t(e,o);return r=Ot(o,"script"),r.length>0&&Mt(r,!u&&Ot(e,"script")),r=s=i=null,o},buildFragment:function(e,t,n,r){var i,o,a,s,u,l,c,p=e.length,f=dt(t),d=[],h=0;for(;p>h;h++)if(o=e[h],o||0===o)if("object"===b.type(o))b.merge(d,o.nodeType?[o]:o);else if(wt.test(o)){s=s||f.appendChild(t.createElement("div")),u=(bt.exec(o)||["",""])[1].toLowerCase(),c=At[u]||At._default,s.innerHTML=c[1]+o.replace(vt,"<$1>")+c[2],i=c[0];while(i--)s=s.lastChild;if(!b.support.leadingWhitespace&&yt.test(o)&&d.push(t.createTextNode(yt.exec(o)[0])),!b.support.tbody){o="table"!==u||xt.test(o)?"