Git init

.gitignore

@@ -0,0 +1,7 @@
+assets
+node_modules
+.DS_Store
+.jekyll-metadata
+.sass-cache
+Gemfile.lock
+Thumbs.db

Gemfile

@@ -0,0 +1,30 @@
+source "https://rubygems.org"
+
+# Hello! This is where you manage which Jekyll version is used to run.
+# When you want to use a different version, change it below, save the
+# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
+#
+#     bundle exec jekyll serve
+#
+# This will help ensure the proper Jekyll version is running.
+# Happy Jekylling!
+gem "jekyll", "~> 3.8.3"
+
+# This is the default theme for new Jekyll sites. You may change this to anything you like.
+# gem "minima", "~> 2.0"
+
+# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
+# uncomment the line below. To upgrade, run `bundle update github-pages`.
+# gem "github-pages", group: :jekyll_plugins
+
+# If you have any plugins, put them here!
+# group :jekyll_plugins do
+  # gem "jekyll-feed", "~> 0.6"
+# end
+
+# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
+gem "tzinfo-data", platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+# Performance-booster for watching directories on Windows
+gem "wdm", "~> 0.1.0" if Gem.win_platform?
+

README.md

@@ -1,2 +1,31 @@
-# hero-wars-planner
-Helper tool for Hero Wars war planning
+# iop-boilerplate-jekyll
+
+Common boilerplate for creating Jekyll sites at Ideas On Purpose.
+
+## Getting Started
+
+Assuming `npm` and `jekyll` are installed and working correctly on your machine:
+
+- Open a terminal window and navigate to the desired location for your new project, then run:
+- `git clone git@gitlab.com:ideasonpurpose/iop-boilerplate-jekyll.git .` - download a copy of this repository into the current terminal location.
+- `npm install` - install project dependencies, then
+- `npm run start` - start the development environment at [//localhost:3000](http://localhost:3000)
+- `npm run build` - build the site for production delivery.
+
+Once `npm run build` finishes all the tasks, the `_site` directory contents are ready for production delivery.
+
+As soon as everything is setup, remember to **update the package.json file** with the correct project information.
+
+## Available commands
+- `npm run start` - development environment
+- `npm run build` - production build
+- `npm run clean` - cleans all the generated files during development time
+- `npm run bundler` - updates the Jekyll bundler
+
+## Production delivery Checklist
+- `config.yml` variables MUST be assigned before delivery.
+- `favicon.html` setup MUST be complete before delivery
+- `meta_tags.html` setup MUST be complete before delivery
+
+WIP...
+

_assets/gulp_config/paths.js

@@ -0,0 +1,76 @@
+var paths = {};
+
+// Directory locations.
+paths.assetsDir        = '_assets/';      // The files Gulp will handle.
+paths.jekyllDir        = '';              // The files Jekyll will handle.
+paths.jekyllAssetsDir  = 'assets/';       // The asset files Jekyll will handle.
+paths.siteDir          = '_site/';        // The resulting static site.
+paths.siteAssetsDir    = '_site/assets/'; // The resulting static site's assets.
+
+// Folder naming conventions.
+paths.postFolderName   = '_posts';
+paths.fontFolderName   = 'fonts';
+paths.imageFolderName  = 'img';
+paths.scriptFolderName = 'js';
+paths.stylesFolderName = 'sass';
+paths.videoFolderName  = 'video';
+paths.pdfFolderName  = 'pdf';
+
+// Asset files locations.
+paths.sassFiles   = paths.assetsDir + paths.stylesFolderName;
+paths.jsFiles     = paths.assetsDir + paths.scriptFolderName;
+paths.imageFiles  = paths.assetsDir + paths.imageFolderName;
+paths.fontFiles   = paths.assetsDir + paths.fontFolderName;
+paths.videoFiles  = paths.assetsDir + paths.videoFolderName;
+paths.pdfFiles    = paths.assetsDir + paths.pdfFolderName;
+
+// Jekyll files locations.
+paths.jekyllPostFiles  = paths.jekyllDir       + paths.postFolderName;
+paths.jekyllCssFiles   = paths.jekyllAssetsDir + paths.stylesFolderName;
+paths.jekyllJsFiles    = paths.jekyllAssetsDir + paths.scriptFolderName;
+paths.jekyllImageFiles = paths.jekyllAssetsDir + paths.imageFolderName;
+paths.jekyllFontFiles  = paths.jekyllAssetsDir + paths.fontFolderName;
+paths.jekyllVideoFiles = paths.jekyllAssetsDir + paths.videoFolderName;
+paths.jekyllPdfFiles   = paths.jekyllAssetsDir + paths.pdfFolderName;
+
+// Site files locations.
+paths.siteCssFiles   = paths.siteAssetsDir + paths.stylesFolderName;
+paths.siteJsFiles    = paths.siteAssetsDir + paths.scriptFolderName;
+paths.siteImageFiles = paths.siteAssetsDir + paths.imageFolderName;
+paths.siteFontFiles  = paths.siteAssetsDir + paths.fontFolderName;
+paths.siteVideoFiles = paths.siteAssetsDir + paths.videoFolderName;
+paths.sitePdfFiles   = paths.siteAssetsDir + paths.pdfFolderName;
+
+// Glob patterns by file type.
+paths.sassPattern     = '/**/*.scss';
+paths.jsPattern       = '/**/*.js';
+paths.imagePattern    = '/**/*.+(jpg|JPG|jpeg|JPEG|png|PNG|svg|SVG|gif|GIF|webp|WEBP|tif|TIF|ico)';
+paths.markdownPattern = '/**/*.+(md|MD|markdown|MARKDOWN)';
+paths.htmlPattern     = '/**/*.html';
+paths.videoPattern    = '/**/*.+(mp4|ogg|webm|wav|flac|mp3)';
+paths.pdfPattern      = '/**/*.pdf';
+
+// Asset files globs
+paths.sassFilesGlob  = paths.sassFiles  + paths.sassPattern;
+paths.jsFilesGlob    = paths.jsFiles    + paths.jsPattern;
+paths.imageFilesGlob = paths.imageFiles + paths.imagePattern;
+paths.videoFilesGlob = paths.videoFiles + paths.videoPattern;
+paths.pdfFilesGlob   = paths.pdfFiles   + paths.pdfPattern;
+
+// Jekyll files globs
+paths.jekyllPostFilesGlob  = paths.jekyllPostFiles  + paths.markdownPattern;
+paths.jekyllHtmlFilesGlob  = paths.jekyllDir        + paths.htmlPattern;
+paths.jekyllXmlFilesGlob   = paths.jekyllDir        + paths.xmlPattern;
+paths.jekyllImageFilesGlob = paths.jekyllImageFiles + paths.imagePattern;
+paths.jekyllVideoFilesGlob = paths.jekyllVideoFiles + paths.videoPattern;
+paths.jekyllPdfFilesGlob   = paths.jekyllPdfFiles   + paths.pdfPattern;
+
+// Site files globs
+paths.siteHtmlFilesGlob = paths.siteDir + paths.htmlPattern;
+
+// HTML pages to run through the accessibility test.
+paths.htmlTestFiles = [
+  '_site/**/*.html'
+];
+
+module.exports = paths;

_assets/js/app.js

@@ -0,0 +1,79 @@
+
+$('#dataform').on('submit', function (e) {
+  e.preventDefault();
+
+  var warData = JSON.parse( $.trim( $('#data').val() ) );
+
+  if( warData.results && warData.results[1] && warData.results[1].result && warData.results[1].result.response ) {
+    initApp(warData, 'withSave', warData);
+  };
+});
+
+function initApp (data, callback, callbackData) {
+  console.log(data)
+  var mapData = data.results[1].result.response;
+
+  console.log('data', JSON.parse( JSON.stringify(data)) );
+
+  enhanceMap(mapData.enemySlots);
+  enhanceMap(mapData.ourSlots);
+
+  app.map = mapData;
+
+  console.log('app.map', JSON.parse( JSON.stringify(mapData)) );
+
+  Vue.nextTick(function () {
+    // Determine which player team has more power: titans or heroes
+    determineBestTeam('ally');
+    determineBestTeam('enemy');
+
+    // Syncs checkboxes between hero/titan teams
+    syncCheckboxes();
+
+    // Highlights the other player team when the other one is hovered
+    highlightHovered();
+
+    if(callback == 'withSave') {
+      saveToStorage(callbackData);
+    }
+  });
+}
+
+var app = new Vue({
+  el : '#app',
+  data : {
+    // the data obtained from the game
+    map: {}, //mapData,
+    // maps building names and types of data obtained from the game
+    mapSlots: mapSlots,
+    storage: JSON.parse( localStorage.getItem('HeroWarsHistory') ) || []
+  },
+  computed: {
+    // Helps render enemy teams in order by power level
+    orderedEnemies: function () {
+      return orderByPower(this.map.enemySlots);
+    },
+    // Helps render allied teams in order by power level
+    orderedAllies: function () {
+      return orderByPower(this.map.ourSlots);
+    },
+    // Renders total team powers: hero, titan, total
+    getAllyPower: function () {
+      return getTotalPower(this.map.ourSlots);
+    },
+    // Renders total enemy team powers: hero, titan, total
+    getEnemyPower: function () {
+      return getTotalPower(this.map.enemySlots);
+    }
+  },
+  filters: {
+    formatNumber: function (value) {
+      return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
+    },
+    unixToLocale: function (value) {
+      return new Date(value * 1000).toDateString();
+    }
+  }
+});
+
+

_assets/js/hamburger.js

@@ -0,0 +1,7 @@
+function toggleHamburger () {
+  $('.hamburger').toggleClass('is-active');
+}
+
+$('.hamburger-button').on('click', function () {
+  toggleHamburger();
+});

_assets/js/localstorage.js

@@ -0,0 +1,45 @@
+/*
+ * Compares dates (used to order localstorage items)
+ */
+function compareDates(a, b) {
+  var genreA = a.date;
+  var genreB = b.date;
+  var comparison = 0;
+
+  if (genreA > genreB) {
+    comparison = -1;
+  } else if (genreA < genreB) {
+    comparison = 1;
+  }
+  return comparison;
+}
+
+
+function saveToStorage(warData) {
+  var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
+
+  storageData.push(warData);
+  storageData.sort(compareDates);
+  localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData) );
+  app.storage = storageData;
+};
+
+
+$('body').on('click', '.js--load-war', function(){
+  var $t = $(this),
+      index = $t.attr('data-item'),
+      localData = JSON.parse( localStorage.getItem('HeroWarsHistory') ),
+      localWar = localData[index];
+
+  initApp(localWar);
+  toggleHamburger();
+});
+
+$('body').on('click', '.js--remove-storage', function (){
+  var storageData = JSON.parse( localStorage.getItem('HeroWarsHistory') ) || [];
+  var index = $(this).attr('data-item');
+
+  storageData.splice(index, 1);
+  localStorage.setItem('HeroWarsHistory', JSON.stringify(storageData) );
+  app.storage = storageData;
+});

_assets/js/map.js

@@ -0,0 +1,121 @@
+var mapSlots = [{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+},{
+  "name" : 'Mage Academy',
+  "type" : 'Hero'
+},{
+  "name" : 'Lighthouse',
+  "type" : 'Hero'
+},{
+  "name" : 'Barracks',
+  "type" : 'Hero'
+},{
+  "name" : 'Bridge',
+  "type" : 'Titan'
+},{
+  "name" : 'Spring of Elements',
+  "type" : 'Titan'
+},{
+  "name" : 'Foundry',
+  "type" : 'Hero'
+},{
+  "name" : 'Gates of Nature',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Fire',
+  "type" : 'Titan'
+},{
+  "name" : 'Bastion of Ice',
+  "type" : 'Titan'
+},{
+  "name" : 'Citadel',
+  "type" : 'Hero'
+}];

_assets/js/utils.js

@@ -0,0 +1,150 @@
+/*
+ * Adds more data to the mapData object
+ * so it's easier to print out information
+ * such as buildings/location and total power
+ */
+function enhanceMap( slots ) {
+  for (var index in slots) {
+    //console.log(slots[index])
+    var teamSlot = slots[index];
+
+    if(teamSlot.status == 'empty' || teamSlot.user == null) {
+      teamSlot['user'] = {
+        "name" : 'Empty'
+      }
+    }
+
+    // Add the name and type of building for this team
+    var mapSlot = mapSlots[index - 1];
+
+    teamSlot['location'] = {
+      "name" : mapSlot.name,
+      "type" : mapSlot.type
+    }
+
+    // Add the total amount of team power
+    var power = 0;
+    for (var teamMember in teamSlot.team[0]) {
+      power += teamSlot.team[0][teamMember].power;
+    }
+    teamSlot['power'] = power;
+  }
+}
+
+
+/*
+ * Compares team power (used to order teams by power)
+ */
+function compare(a, b) {
+  var genreA = a.power;
+  var genreB = b.power;
+  var comparison = 0;
+
+  if (genreA > genreB) {
+    comparison = -1;
+  } else if (genreA < genreB) {
+    comparison = 1;
+  }
+  return comparison;
+}
+
+
+/*
+ * Order teams by power level
+ */
+function orderByPower(teamSlots) {
+  var teamArray = [];
+
+  for(var key in teamSlots) {
+    teamArray.push(teamSlots[key])
+  }
+
+  return teamArray.sort(compare);
+}
+
+
+/*
+ * Determines which player team has more power: titan or hero.
+ * Adds a CSS class to each of the better .ally-hero teams
+ */
+function determineBestTeam(guild) {
+  $.each($('body').find('.js-'+ guild +'-hero'), function () {
+    var $t = $(this);
+    var name = $t.attr('data-name');
+    var heroPower = parseInt( $t.attr('data-power') );
+    var $titanTeam = $('.js-'+ guild +'-titan[data-name="'+ name +'"]');
+    var titanPower = parseInt( $titanTeam.attr('data-power') );
+    var className = 'best-team';
+
+    if (heroPower > titanPower) {
+      $t.addClass(className);
+      $titanTeam.removeClass(className);
+    } else {
+      $titanTeam.addClass(className);
+      $t.removeClass(className);
+    }
+  });
+}
+
+
+/*
+ * Sync checkboxes between hero/titan teams of the same player
+ */
+function syncCheckboxes() {
+  $('input[type="checkbox"]').on('change', function() {
+    var $t = $(this),
+        checkName = $t.attr('name'),
+        playerName = $t.parent().attr('data-name');
+
+    $('[data-name="'+ playerName +'"]')
+      .find('input[name="'+ checkName +'"]')
+      .prop('checked', $t.is(':checked'));
+  });
+}
+
+
+/*
+ * Visual aid to help find the corresponding hero/titan team
+ * when the other one is hovered
+ */
+function highlightHovered() {
+  $('.team').on({
+    'mouseenter': function () {
+      var $t = $(this),
+          name = $t.attr('data-name');
+      $('.team[data-name="'+ name +'"]').addClass('is--hover');
+    },
+    'mouseleave': function () {
+      var $t = $(this),
+          name = $t.attr('data-name');
+      $('.team[data-name="'+ name +'"]').removeClass('is--hover');
+    }
+  })
+}
+
+function getTotalPower(guild) {
+  var heroPower = 0;
+  var titanPower = 0;
+  var totalPower = 0;
+  var data = guild; //this.map.ourSlots;
+
+  for (var i in data) {
+    var member = data[i];
+
+    if( member.location.type == "Hero" ) {
+      heroPower += member.power;
+    } else {
+      titanPower += member.power;
+    }
+
+    totalPower += member.power;
+  }
+
+  return {
+    "heroPower" : heroPower,
+    "titanPower" : titanPower,
+    "totalPower": totalPower
+  };
+}
+
+

_assets/sass/base/_base.scss

@@ -0,0 +1,43 @@
+html {
+  color: $black;
+  margin: 0 0 40px;
+  font: 400 13px/1.4 'Open Sans', arial, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  outline: none;
+}
+
+button,
+.button {
+  &:hover {
+    opacity: .8;
+  }
+}
+
+label,
+button,
+input {
+  cursor: pointer;
+}
+
+strong, b {
+  font-weight: 600;
+}
+
+h1 {
+  text-align: center;
+  font-size: 32px;
+  font-weight: 600;
+  margin-top: 40px;
+}
+
+h4,
+h3 {
+  display: block;
+  width: 100%;
+  margin: 40px 0 10px;
+  font-size: 16px;
+  font-weight: 600;
+}

_assets/sass/base/_reset.scss

@@ -0,0 +1,88 @@
+* {
+  box-sizing: border-box;
+}
+
+main {
+  display: block;
+}
+
+html, body, div, span, applet, object, iframe, p, blockquote,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video, button, pre {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: 0;
+  font-size: 100%;
+  font-family: inherit;
+  vertical-align: baseline;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+svg {
+  fill: currentColor;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+img {
+  border-style: none;
+  max-width: 100%;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+[hidden] {
+  display: none;
+}

_assets/sass/main.scss

@@ -0,0 +1,25 @@
+@charset "utf-8";
+
+@import
+  // Variables
+  "variables/colors",
+  "variables/layout",
+
+  // Mixins
+  "mixins/breakpoint",
+  "mixins/columns",
+  "mixins/rows",
+
+  // Base styles
+  "base/reset",
+  "base/base",
+
+  // Layouts
+
+  // Modules
+  "modules/wrapper",
+  "modules/buttons",
+  "modules/war",
+  "modules/hamburger",
+  "modules/header"
+;

_assets/sass/mixins/_breakpoint.scss

@@ -0,0 +1,27 @@
+/*
+ * Media query shorthand, to be used with variables from $site-breakpoints
+ * Defaults to min-width
+ * 
+ * Usage: @include mq(lg, min/max(optional) ) { ... }
+ */
+
+@function breakpoint-min($name, $breakpoints: $site-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+@mixin mq($name, $type: min) {
+  $min: breakpoint-min($name);
+
+  @if $min {
+    @if $type == max {
+        $min: $min - 1px;
+    }
+
+    @media ( #{$type}-width: $min ) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

_assets/sass/mixins/_columns.scss

@@ -0,0 +1,48 @@
+/*
+ * Generate grid cols
+ * 
+ */
+
+@mixin grid-col-padding ($gutter) {
+  padding-left: $gutter / 2;
+  padding-right: $gutter / 2;
+  /*
+   * Default columns align left width smallest width
+   */
+  flex: 0 0 auto;
+}
+
+@mixin grid-col-flex ($size) {
+  width: percentage($size / $column-count);
+  max-width: percentage($size / $column-count);
+  flex: 0 0 percentage($size / $column-count);
+}
+
+// generate paddings
+@each $breakpoint, $gutter in $column-gutter {
+  @include mq($breakpoint) {
+    #{$row-class} > * {
+      @include grid-col-padding($gutter);
+    }
+  }
+}
+
+// generate flex styles
+@each $breakpoint, $size in $site-breakpoints {
+  @include mq($breakpoint) {
+
+    $index: index($site-breakpoints, $breakpoint $size);
+
+    @for $i from 1 through $column-count {
+      // ignore first breakpoint class, e.g. .col instead of .col-sm
+      $className : if( $index > 1, 
+                       #{$column-class}-#{$breakpoint}-#{$i}, 
+                       #{$column-class}-#{$i} );
+
+      #{$className} {
+        @include grid-col-flex($i);
+      }
+    }
+
+  }
+}

_assets/sass/mixins/_rows.scss

@@ -0,0 +1,27 @@
+/*
+ * Generate grid rows
+ * 
+ * $row-class defines the row classname. E.G. .row
+ * $column-gutter sets the negative margins for each defined breakpoint.
+ * 
+ */
+
+@mixin row-gutters($gutter) {
+  margin-left: ($gutter / -2);
+  margin-right: ($gutter / -2);
+}
+
+@mixin row () {
+  display: flex;
+  flex-wrap: wrap;
+
+  @each $breakpoint, $gutter in $column-gutter {
+    @include mq($breakpoint) {
+      @include row-gutters($gutter);
+    }
+  }
+}
+
+#{$row-class} {
+  @include row();
+}

_assets/sass/modules/_buttons.scss

@@ -0,0 +1,17 @@
+.button {
+  padding: 6px 16px;
+  background: #349000;
+  color: #ffefbf;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.2;
+  text-shadow: 0 1px 1px #000;
+  cursor: pointer;
+  border-radius: 40px;
+  border: 0;
+
+  &--danger {
+    background: #860602;
+    color: #fff;
+  }
+}

_assets/sass/modules/_hamburger.scss

@@ -0,0 +1,30 @@
+.hamburger {
+  position: fixed;
+  background: #fff;
+  top: 60px;
+  bottom: 0;
+  left: 0;
+  padding: 20px;
+  overflow: auto;
+  border-right: 1px solid #E1E1E1;
+  transform: translateX(-100%);
+  transition: transform 250ms;
+
+  &.is-active {
+    transform: translateX(0%);
+  }
+
+  h3 {
+    margin-top: 0;
+  }
+
+  li {
+    margin-bottom: 5px;
+    display: flex;
+    align-items: center;
+  }
+
+  .button {
+    margin-right: 8px;
+  }
+}

_assets/sass/modules/_header.scss

@@ -0,0 +1,37 @@
+header {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 20px;
+  border-bottom: 1px solid #E1E1E1;
+
+  .hamburger-button {
+
+  }
+
+  .form {
+    display: flex;
+    align-items: center;
+
+    h3 {
+      margin: 0;
+      width: auto;
+      margin-right: 10px;
+    }
+
+    textarea {
+      resize: none;
+      overflow: hidden;
+      width: 112px;
+      height: 28px;
+      line-height: 1.4;
+      padding: 4px;
+      outline: none;
+    }
+
+    .button {
+      margin-left: 10px;
+    }
+  }
+}

_assets/sass/modules/_war.scss

@@ -0,0 +1,61 @@
+.war {
+  .row {
+    justify-content: center;
+  }
+
+  h4 {
+    margin-left: 8px;
+  }
+
+  .team {
+    display: flex;
+    align-items: center;
+    color: #666;
+    line-height: 1.2;
+    padding: 2px 8px;
+
+    &.is--hover {
+      outline: 2px solid gold;
+    }
+
+    &__details {
+      margin-left: 8px;
+    }
+
+    &__location {
+      display: block;
+      font-weight: 800;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: 11px;
+      color: #0079b3;
+      margin-bottom: 2px;
+    }
+  }
+
+  .best-team {
+    font-weight: 600;
+    color: black;
+  }
+
+  img {
+    max-width: 32px;
+    background: black;
+    border-radius: 50%;
+    vertical-align: middle;
+    margin: 1px;
+    border: 1px solid grey;
+    display: none;
+  }
+
+  input[type="checkbox"] {
+    margin: 0 6px 0 0;
+    vertical-align: middle;
+  }
+
+  @include mq(xl) {
+    img {
+      display: inline-block;
+    }
+  }
+}

_assets/sass/modules/_wrapper.scss

@@ -0,0 +1,14 @@
+.wrapper {
+  position: relative;
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  max-width: $wrapper-max-width;
+
+  @each $name, $size in $wrapper-gutter {
+    @include mq($name) {
+        padding-left: $size;
+        padding-right: $size;
+    }
+  }
+}

_assets/sass/variables/_colors.scss

@@ -0,0 +1,2 @@
+$black: #000;
+$white: #fff;

_assets/sass/variables/_layout.scss

@@ -0,0 +1,34 @@
+// Breakpoints
+
+$site-breakpoints: (
+  sm: 0px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1700px
+);
+
+
+// Columns and Rows
+
+$row-class: '.row';
+$column-class: '.col';
+$column-count : 12;
+
+$column-gutter : (
+  sm: 12px,
+  md: 16px,
+  lg: 32px,
+  xl: 32px,
+);
+
+
+// .wrapper container
+
+$wrapper-max-width: 100%;
+
+$wrapper-gutter : (
+  sm: 24px,
+  md: 32px,
+  lg: 48px,
+  xl: 48px
+);

_config.yml

@@ -0,0 +1,26 @@
+# Meta tags settings
+name: '' # Used for Facebook meta og:site_name
+meta_title: '' # Global fallback meta title
+meta_description: '' # Global fallback meta description
+meta_image: '' # Global fallback for meta image
+
+# Build settings
+baseurl: "" # The subfolder where the site will live, no trailing slash. Ex: "investors/reports/2019"
+url: "" # The base url, no trailing slash. Ex: "https://www.example.com"
+
+is_production: true # Leave unchanged. Used for production build.
+
+permalink: /:title/
+markdown: kramdown
+
+testdata: ''
+
+# Exclude files and folders from build
+# Note: Jekyll automatically excludes directories prefixed by and underscore. Ex: `_dirname`.
+exclude: ["node_modules",
+          "Gemfile",
+          "Gemfile.lock",
+          "gulpfile.js",
+          "package.json",
+          "package-lock.json",
+          "README.md"]

_includes/favicon.html

@@ -0,0 +1,76 @@
+{%- comment -%}
+All of these can be automatically generated by
+http://faviconit.com/en : browserconfig.xml, all the .ico and favicon-XX.png files
+and https://realfavicongenerator.net : site.webmanifest + android-chrome-384x384.png and android-chrome-192x192.png
+
+CHECKLIST
+- http://faviconit.com/en :: add all files to the root of project (omit the instructions file)
+- realfavicongenerator.net :: add only the following to the root of the project
+    - site.webmanifest, 
+    - android-chrome-384x384.png 
+    - android-chrome-192x192.png
+- Update TileColor in browserconfing.xml and meta tag below
+- Update Theme and Background color in site.webmanifest
+- Update theme-color meta tag below
+{%- endcomment -%}
+
+<!-- _includes/partials/favicon.html -->
+
+    {% comment %}
+        Classic desktop browsers
+    {%- endcomment -%}
+    <link rel="shortcut icon" href="{{ "favicon.ico" | absolute_url }}" />
+
+    {% comment %}
+        Additional sizes for various browsers
+    {%- endcomment -%}
+    <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16.png" | absolute_url }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32.png" | absolute_url }}">
+    <link rel="icon" type="image/png" sizes="64x64" href="{{ "favicon-64.png" | absolute_url }}">
+    <link rel="icon" type="image/png" sizes="96x96" href="{{ "favicon-96.png" | absolute_url }}">
+    <link rel="icon" type="image/png" sizes="160x160" href="{{ "favicon-160.png" | absolute_url }}">
+    <link rel="icon" type="image/png" sizes="192x192" href="{{ "favicon-192.png" | absolute_url }}">
+
+    {% comment %}
+        Android Chrome
+    {%- endcomment -%}
+    <link rel="icon" type="image/png" sizes="192x192" href="{{ "favicon-192.png" | absolute_url }}">
+    <link rel="icon" type="image/png" sizes="384x384" href="{{ "android-chrome-384x384.png" | absolute_url }}">
+    <link rel="manifest" href="{{ "site.webmanifest" | absolute_url }}">
+
+    {% comment %}
+        iOS Safari & Android Chrome
+    {%- endcomment -%}
+    <link rel="apple-touch-icon" sizes="57x57" href="{{ "favicon-57.png" | absolute_url }}">
+    <link rel="apple-touch-icon" sizes="60x60" href="{{ "favicon-60.png" | absolute_url }}">
+    <link rel="apple-touch-icon" sizes="72x72" href="{{ "favicon-72.png" | absolute_url }}">
+    <link rel="apple-touch-icon" sizes="76x76" href="{{ "favicon-76.png" | absolute_url }}">
+    <link rel="apple-touch-icon" sizes="114x114" href="{{ "favicon-114.png" | absolute_url }}">
+    <link rel="apple-touch-icon" sizes="120x120" href="{{ "favicon-120.png" | absolute_url }}">
+    <link rel="apple-touch-icon" sizes="144x144" href="{{ "favicon-144.png" | absolute_url }}">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ "favicon-152.png" | absolute_url }}">
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon-180.png" | absolute_url }}">
+
+    {% comment %}
+        Win 8.0, Win 8.1, Edge and IE11+
+    {%- endcomment -%}
+    <meta name="msapplication-TileImage" content="favicon-144.png">
+    <meta name="msapplication-config" content="browserconfig.xml">
+    <meta name="msapplication-TileColor" content="#ffffff">
+
+    {% comment %}
+        Mobile Chrome theme color
+    {%- endcomment -%}
+    <meta name="theme-color" content="#ffffff">
+
+    {% comment %}
+        Preffered image for SERPs, optional, uncomment the code if needed.
+        https://support.google.com/customsearch/answer/1626955?hl=en
+
+        <meta name="thumbnail" content="{{ "thumbnail.png" | absolute_url }}" />
+    {%- endcomment -%}
+
+    <!-- / _includes/partials/favicon.html -->
+
+

_includes/footer.html

@@ -0,0 +1,7 @@
+<!-- _includes/partials/footer.html -->
+
+<footer>
+    
+</footer>
+
+<!-- / _includes/partials/footer.html -->

_includes/head.html

@@ -0,0 +1,17 @@
+<!-- _includes/partials/head.html -->
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0">
+
+    {% include favicon.html %}
+
+    {% include meta_tags.html %}
+
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ "assets/sass/main.css" | relative_url }}">
+</head>
+
+<!-- / _includes/partials/head.html -->
+

_includes/header.html

@@ -0,0 +1,17 @@
+<!-- _includes/partials/header.html -->
+
+<header>
+    <button class="button hamburger-button">
+      <strong>Load War</strong>
+    </button>
+
+    <form id="dataform" class="form">
+      <h3>Add War</h3>
+      <textarea id="data">{{ site.testdata }}</textarea>
+      <br />
+      <input type="submit" value="Submit" class="button" />
+      <input type="reset" value="Reset" class="button" />
+    </form>
+</header>
+
+<!-- / _includes/partials/header.html -->

_includes/meta_tags.html

@@ -0,0 +1,80 @@
+{%- capture pageURL -%}{{ page.url | replace:'index.html','' | absolute_url }}{%- endcapture -%}
+
+{%- capture metaTitle -%}
+    {%- if page.title -%}
+        {{ page.title }}
+    {%- else -%}
+        {{ site.meta_title }}
+    {%- endif -%}
+{%- endcapture -%}
+{%- assign metaTitle = metaTitle | strip_html | normalize_whitespace -%}
+
+{%- capture metaDescription -%}
+    {%- if page.meta_description -%}
+        {{ page.meta_description }}
+    {%- else -%}
+        {{ site.meta_description }}
+    {%- endif -%}
+{%- endcapture -%}
+{%- assign metaDescription = metaDescription | strip_html | normalize_whitespace | truncate: 160 -%}
+
+{%- capture metaImage -%}
+    {%- if page.meta_image -%}
+        {{ page.meta_image | absolute_url }}
+    {%- else -%}
+        {{ site.meta_image | absolute_url }}
+    {%- endif -%}
+{%- endcapture -%}
+
+<!-- _includes/partials/meta_tags.html -->
+
+    {% comment %}
+        Browser tags
+    {%- endcomment -%}
+    <title>{{ metaTitle }}</title>
+    <meta name="description" content="{{ metaDescription }}">
+
+    {% comment %}
+        Open Graph
+    {%- endcomment -%}
+    <meta property="og:site_name" content="{{ site.name }}">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="{{ metaTitle }}">
+    <meta property="og:description" content="{{ metaDescription }}">
+    <meta property="og:url" content="{{ pageURL }}">
+    <meta property="og:image" content="{{ metaImage }}">
+
+    {% comment %}
+        Twitter specific
+    {%- endcomment -%}
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="{{ metaTitle }}">
+    <meta name="twitter:description" content="{{ metaDescription }}">
+    <meta name="twitter:image" content="{{ metaImage }}">
+
+    {% comment %}
+        Optional tags
+
+        Facebook:
+            - https://developers.facebook.com/docs/sharing/webmasters
+
+        <meta property="fb:app_id" content="">
+
+        Twitter:
+            - https://dev.twitter.com/cards/overview
+            - https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/markup.html
+
+        <meta name="twitter:image:alt" content="Used with summary, summary_large_image, player cards">
+        <meta name="twitter:site" content="@site_username">
+        <meta name="twitter:creator" content="@creator_username">
+        <meta name="twitter:label1" value="Label 1">
+        <meta name="twitter:data1" value="value 1">
+    {%- endcomment -%}
+
+    {% comment %}
+        Canonical tag prevents content duplication for SEO
+    {%- endcomment -%}
+    <link rel="canonical" href="{{ pageURL }}">
+
+    <!-- / _includes/partials/meta_tags.html -->
+

_includes/scripts.html

@@ -0,0 +1,15 @@
+<!-- _includes/partials/scripts.html -->
+
+{% if site.is_production %}
+  <script src="{{ "/assets/js/main.min.js" | relative_url }}"></script>
+{% else %}
+  <script src="{{ "/assets/js/lib/vue.min.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/lib/jquery-3.4.1.min.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/map.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/utils.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/app.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/localstorage.js" | relative_url }}"></script>
+  <script src="{{ "/assets/js/hamburger.js" | relative_url }}"></script>
+{% endif %}
+
+<!-- / _includes/partials/scripts.html -->

_includes/svg.html

@@ -0,0 +1,7 @@
+{% comment %}
+    Use this file to store svg tags and reuse as variables with the capture tag.
+
+    {%- capture svg_icon -%}
+        Your svg code goes here
+    {%- endcapture -%}
+{% endcomment %}

_layouts/default.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" data-baseurl="{{site.baseurl}}">
+    {% include svg.html %}
+
+    {% include head.html %}
+
+    <body>
+        {% include header.html %}
+
+        <main class="wrapper">
+            {{ content }}
+        </main>
+
+        {% include footer.html %}
+
+        {% include scripts.html %}
+    </body>
+</html>

_layouts/war-planner.html

@@ -0,0 +1,89 @@
+---
+layout: default
+---
+{% raw %}
+<div id="app" class="war">
+  <nav class="hamburger">
+    <ul>
+      <li v-for="(item, index) in storage">
+        <button class="button button--danger js--remove-storage" :data-item="index">&times;</button>
+        <a class="js--load-war" href="javascript:;" :data-item="index">{{ item.date | unixToLocale}} -
+          {{ item.results[1].result.response.enemyClan.title }}</a>
+      </li>
+    </ul>
+  </nav>
+
+  <section v-if="orderedAllies.length">
+    <h1 v-if="orderedAllies.length">{{ map.ourSlots[1].user.clanTitle }} VS. {{ map.enemyClan.title }}</h1>
+
+    <div class="row">
+      <div class="col col-3">
+        <h4>HEROES - Allies</h4>
+        <div class="team team--hero ally-team js-ally-hero" :data-name="ally.user.name" :data-power="ally.power"
+          v-if="ally.location.type == 'Hero' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
+          <input name="attack_first" type="checkbox" />
+          <input name="attack_second" type="checkbox" />
+          <img v-for="character in ally.team[0]" :src="'assets/img/Heroes/00'+ character.id + '.png'" />
+          <div class="team__details">
+            {{ ally.user.name }} - {{ ally.power | formatNumber }}
+          </div>
+        </div>
+      </div>
+
+      <div class="col col-3">
+        <h4>HEROES - Enemies</h4>
+        <label class="team team--hero enemy-team js-enemy-hero" :data-name="enemy.user.name" :data-power="enemy.power"
+          v-if="enemy.location.type == 'Hero' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
+          <input type="checkbox" />
+          <img v-for="character in enemy.team[0]" :src="'assets/img/Heroes/00'+ character.id + '.png'" />
+          <div class="team__details">
+            <span class="team__location">{{ enemy.location.name }}</span>
+            {{ enemy.user.name }} - {{ enemy.power | formatNumber }}
+          </div>
+        </label>
+      </div>
+
+      <div class="col col-3">
+        <h4>Titans - Allies</h4>
+        <div class="team team--titan ally-team js-ally-titan" :data-name="ally.user.name" :data-power="ally.power"
+          v-if="ally.location.type == 'Titan' && ally.user.name != 'Empty'" v-for="ally in orderedAllies">
+          <input name="attack_first" type="checkbox" />
+          <input name="attack_second" type="checkbox" />
+          <img v-for="character in ally.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
+          <div class="team__details">
+            {{ ally.user.name }} - {{ ally.power | formatNumber }}
+          </div>
+        </div>
+      </div>
+
+      <div class="col col-3">
+        <h4>Titans - Enemies</h4>
+        <label class="team team--titan enemy-team js-enemy-titan" :data-name="enemy.user.name" :data-power="enemy.power"
+          v-if="enemy.location.type == 'Titan' && enemy.user.name != 'Empty'" v-for="enemy in orderedEnemies">
+          <input type="checkbox" />
+          <img v-for="character in enemy.team[0]" :src="'assets/img/Titans/'+ character.id + '.png'" />
+          <div class="team__details">
+            <span class="team__location">{{ enemy.location.name }}</span>
+            {{ enemy.user.name }} - {{ enemy.power | formatNumber }}
+          </div>
+        </label>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col col-3">
+        <h4>Allies Stats</h4>
+        Allies Hero Power: <strong>{{ getAllyPower.heroPower | formatNumber }}</strong> <br />
+        Allies Titan Power: <strong>{{ getAllyPower.titanPower | formatNumber }}</strong> <br />
+        Allies Total Power: <strong>{{ getAllyPower.totalPower | formatNumber }}</strong> <br />
+      </div>
+      <div class="col col-3">
+        <h4>Enemy Stats</h4>
+        Enemy Hero Power: <strong>{{ getEnemyPower.heroPower | formatNumber }}</strong> <br />
+        Enemy Titan Power: <strong>{{ getEnemyPower.titanPower | formatNumber }}</strong> <br />
+        Enemy Total Power: <strong>{{ getEnemyPower.totalPower | formatNumber }}</strong> <br />
+      </div>
+    </div>
+  </section>
+</div>
+{% endraw %}

gulpfile.js

@@ -0,0 +1,250 @@
+// Define variables.
+var autoprefixer = require('autoprefixer');
+var browserSync  = require('browser-sync').create();
+var cleancss     = require('gulp-clean-css');
+var concat       = require('gulp-concat');
+var del          = require('del');
+var gulp         = require('gulp');
+var gutil        = require('gulp-util');
+var imagemin     = require('gulp-imagemin');
+var notify       = require('gulp-notify');
+var postcss      = require('gulp-postcss');
+var run          = require('gulp-run');
+var runSequence  = require('run-sequence');
+var sass         = require('gulp-ruby-sass');
+var uglify       = require('gulp-uglify');
+
+var paths        = require('./_assets/gulp_config/paths');
+
+
+/*
+ * @task: gulp - default task, serve the site in a dev environment.
+ * @task: gulp build - build process for prod environment, all assets minified.
+ * @task: gulp clean - remove all expendable files (/assets/ and /_site/).
+ */
+
+/*
+ * Handle SCSS styles
+ */
+
+// Production build
+// Process styles, add vendor prefixes, minify, output to the appropriate location.
+gulp.task('build:styles', function() {
+    return sass(paths.sassFiles + '/main.scss', {
+        style: 'compressed',
+        trace: true,
+        loadPath: [paths.sassFiles]
+    })
+      .pipe(postcss([autoprefixer({ browsers: ['last 2 versions', 'ie >= 10'] })]) )
+      .pipe(cleancss())
+      .pipe(gulp.dest(paths.jekyllCssFiles))
+      .pipe(gulp.dest(paths.siteCssFiles))
+      .on('error', gutil.log);
+});
+
+// Local build
+// Process styles with line numbers, add vendor prefixes, output to the appropriate location.
+gulp.task('build:styles:local', function() {
+    return sass(paths.sassFiles + '/main.scss', {
+        style: 'expanded',
+        lineNumbers: true,
+        container: 'gulp-ruby-sass',
+        trace: true,
+        loadPath: [paths.sassFiles]
+    })
+      .pipe(postcss([autoprefixer({ browsers: ['last 2 versions', 'ie >= 10'] })]) )
+      .pipe(gulp.dest(paths.jekyllCssFiles))
+      .pipe(gulp.dest(paths.siteCssFiles))
+      .pipe(browserSync.stream())
+      .on('error', gutil.log);
+});
+
+
+/*
+ * Handle scripts
+ */
+
+// Concatenate library scripts, uglify, output to the appropriate location.
+// include jQuery first
+gulp.task('build:scripts', function() {
+    return gulp.src([paths.jsFiles + '/lib/jquery-3.3.1.min.js', paths.jsFilesGlob])
+        .pipe(concat('main.min.js'))
+        .pipe(uglify())
+        .pipe(gulp.dest(paths.jekyllJsFiles))
+        .pipe(gulp.dest(paths.siteJsFiles))
+        .on('error', gutil.log);
+});
+
+gulp.task('build:scripts:local', function() {
+    return gulp.src(paths.jsFilesGlob)
+        .pipe(gulp.dest(paths.jekyllJsFiles))
+        .pipe(gulp.dest(paths.siteJsFiles))
+        .on('error', gutil.log);
+});
+
+
+/*
+ * Handle images
+ */
+
+// Optimize and copy image files to the appropriate location.
+gulp.task('build:images', function() {
+    return gulp.src(paths.imageFilesGlob)
+        .pipe(imagemin({
+            verbose: true
+        }))
+        .pipe(gulp.dest(paths.jekyllImageFiles))
+        .pipe(gulp.dest(paths.siteImageFiles))
+        .pipe(browserSync.stream());
+});
+
+gulp.task('build:images:local', function() {
+    return gulp.src(paths.imageFilesGlob)
+        .pipe(gulp.dest(paths.jekyllImageFiles))
+        .pipe(gulp.dest(paths.siteImageFiles))
+        .pipe(browserSync.stream());
+});
+
+
+/*
+ * Handle font files
+ */
+
+// Copy font  files to the appropriate location.
+gulp.task('build:fonts', function() {
+    return gulp.src(paths.fontFiles + '/*/**.*')
+        .pipe(gulp.dest(paths.jekyllFontFiles))
+        .pipe(gulp.dest(paths.siteFontFiles))
+        .pipe(browserSync.stream())
+        .on('error', gutil.log);
+});
+
+
+/*
+ * Handle video files
+ */
+gulp.task('build:videos', function() {
+    return gulp.src(paths.videoFilesGlob)
+        .pipe(gulp.dest(paths.jekyllVideoFiles))
+        .pipe(gulp.dest(paths.siteVideoFiles))
+        .pipe(browserSync.stream())
+        .on('error', gutil.log);
+});
+
+/*
+ * Handle pdf files
+ */
+gulp.task('build:pdf', function() {
+    return gulp.src(paths.pdfFilesGlob)
+        .pipe(gulp.dest(paths.jekyllPdfFiles))
+        .pipe(gulp.dest(paths.sitePdfFiles))
+        .pipe(browserSync.stream())
+        .on('error', gutil.log);
+});
+
+
+/*
+ * Clean task
+ */
+
+gulp.task('clean', function(callback) {
+    del(['_site', 'assets']);
+    callback();
+});
+
+
+/*
+ * Build task
+ */
+
+// Runs jekyll build command.
+gulp.task('build:jekyll', function() {
+    return gulp.src('')
+        .pipe(run('bundle exec jekyll build --config _config.yml'))
+        .on('error', gutil.log);
+});
+
+// Runs jekyll build command using local config.
+gulp.task('build:jekyll:local', function() {
+    return gulp.src('')
+        .pipe(run('bundle exec jekyll build --config _config.yml,_config.dev.yml'))
+        .on('error', gutil.log);
+});
+
+// Builds site anew using local config.
+gulp.task('build:local', function(callback) {
+    runSequence(
+        'clean',
+        'build:jekyll:local',
+        ['build:scripts:local', 
+        'build:images:local', 
+        'build:styles:local', 
+        'build:fonts',
+        'build:videos',
+        'build:pdf'],
+        callback);
+});
+
+// Special tasks for building and then reloading BrowserSync.
+gulp.task('build:jekyll:watch', ['build:jekyll:local'], function(callback) {
+    browserSync.reload();
+    callback();
+});
+
+gulp.task('build:scripts:watch', ['build:scripts:local'], function(callback) {
+    browserSync.reload();
+    callback();
+});
+
+
+
+// Production build with minified assets
+gulp.task('build', function(callback) {
+    runSequence(
+        'clean',
+        'build:jekyll',
+        ['build:scripts', 
+        'build:images', 
+        'build:styles', 
+        'build:fonts',
+        'build:videos',
+        'build:pdf'],
+        callback);
+});
+
+// Static Server + watching files.
+// Note: passing anything besides hard-coded literal paths with globs doesn't
+// seem to work with gulp.watch().
+gulp.task('default', ['build:local'], function() {
+
+    browserSync.init({
+        server: paths.siteDir,
+        ghostMode: true, // Toggle to mirror clicks, reloads etc. (performance)
+        logFileChanges: true,
+        open: true        // Toggle to automatically open page when starting.
+    });
+
+    // Watch site settings.
+    gulp.watch(['_config.yml', '_config.dev.yml'], ['build:jekyll:watch']);
+
+    // Watch .scss files; changes are piped to browserSync.
+    gulp.watch('_assets/sass/**/*.scss', ['build:styles:local']);
+
+    // Watch .js files.
+    gulp.watch('_assets/js/**/*.js', ['build:scripts:watch']);
+
+    // Watch html and markdown files.
+    gulp.watch(['**/*.+(html|md|markdown|MD|json)', '!_site/**/*.*'], ['build:jekyll:watch']);
+
+    // Watch data files.
+    gulp.watch('_data/**.*+(yml|yaml|csv|json)', ['build:jekyll:watch']);
+});
+
+// Updates Ruby gems
+gulp.task('bundler', function() {
+    return gulp.src('')
+        .pipe(run('bundle install'))
+        .pipe(run('bundle update'))
+        .pipe(notify({ message: 'Bundle Update Complete' }))
+        .on('error', gutil.log);
+});

index.md

@@ -0,0 +1,6 @@
+---
+layout: war-planner
+title: ''
+meta_description: ''
+meta_image: ''
+---

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "hw",
+  "version": "1.0.0",
+  "description": "Project description",
+  "author": "Codrin Pavel (https://codrin.eu/)",
+  "contributors": [
+    "Codrin Pavel <zerospree@yahoo.com>"
+  ],
+  "scripts": {
+    "build": "gulp build",
+    "clean": "gulp clean",
+    "bundler": "gulp bundler",
+    "start": "gulp"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "browser-sync": "^2.26.3",
+    "del": "^3.0.0",
+    "gulp": "^3.9.1",
+    "gulp-autoprefixer": "^5.0.0",
+    "gulp-clean-css": "^3.10.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-imagemin": "^4.0.0",
+    "gulp-notify": "^3.2.0",
+    "gulp-postcss": "^8.0.0",
+    "gulp-ruby-sass": "^3.0.0",
+    "gulp-run": "^1.7.1",
+    "gulp-uglify": "^3.0.1",
+    "gulp-util": "^3.0.8",
+    "run-sequence": "^2.2.1"
+  },
+  "license": "ISC"
+}