Add JSON exporting

index.html

@@ -53,6 +53,10 @@ <h4>Aquatic Plants</h4>
         <h4>Fish</h4>
       </div>
       <button type="button" id="genMD">Generate Markdown</button>
+      <div class="center">
+        <button type="button" id="genJSON">Generate JSON</button> 
+        <button type="button" id="importJSON">Import JSON</button>
+      </div>
       <p>Source available on <a href="https://github.com/SecretOnline/NMS-Report">GitHub</a>.</p>
     </main>
   </body>

main.js

@@ -8,6 +8,10 @@ function init(){
     addAddButton(arr[i]);
   var button = document.getElementById('genMD');
   button.addEventListener('click', function(){showModal(generateMarkdown());});
+  button = document.getElementById('genJSON');
+  button.addEventListener('click', function(){showModal(generateJSON());});
+  button = document.getElementById('importJSON');
+  button.addEventListener('click', function(){importJSON();});
 }
 function addInput(parent){
   'use strict';
@@ -51,6 +55,90 @@ function addRemoveButton(parent){
   button.addEventListener('click', function(){removeInput(this.parentNode);});
   parent.appendChild(button);
 }
+function generateJSON(){
+  var obj = {};
+  obj._v = '1.0'; // JSON Version, in case structure changes later
+  obj.beacon = document.getElementById('beacon').value;
+  obj.planet = document.getElementById('planetName').value;
+  obj.star = document.getElementById('starName').value;
+  obj.region = document.getElementById('region').value;
+  obj.discoverer = document.getElementById('discoverer').value;
+  obj.atmosphere = [];
+  arr = document.querySelectorAll('#atmosphere input');
+  for (var i = 0; i < arr.length; i++)
+    obj.atmosphere[i] = arr[i].value;
+  obj.general = {};
+  obj.general.space = [];
+  var arr = document.querySelectorAll('#spaceFeatures input');
+  for (var i = 0; i < arr.length; i++)
+    obj.general.space[i] = arr[i].value;
+  obj.general.ground = [];
+  arr = document.querySelectorAll('#ground input');
+  for (var i = 0; i < arr.length; i++)
+    obj.general.ground[i] = arr[i].value;
+  obj.general.aquatic = [];
+  arr = document.querySelectorAll('#water input');
+  for (var i = 0; i < arr.length; i++)
+    obj.general.aquatic[i] = arr[i].value;
+  obj.plants = {};
+  obj.plants.ground = [];
+  var arr = document.querySelectorAll('#groundPlants .detail');
+  for (var i = 0; i < arr.length; i++){
+    obj.plants.ground[i] = {};
+    obj.plants.ground[i].name = arr[i].querySelector('.name').value;
+    obj.plants.ground[i].image = arr[i].querySelector('.image').value;
+    obj.plants.ground[i].general = [];
+    var bullets = arr[i].querySelectorAll('.input input');
+    for (var j = 0; j < bullets.length; j++)
+      obj.plants.ground[i].general[j] = bullets[j].value;
+  }
+  obj.plants.tree = [];
+  var arr = document.querySelectorAll('#trees .detail');
+  for (var i = 0; i < arr.length; i++){
+    obj.plants.tree[i] = {};
+    obj.plants.tree[i].name = arr[i].querySelector('.name').value;
+    obj.plants.tree[i].image = arr[i].querySelector('.image').value;
+    obj.plants.tree[i].general = [];
+    var bullets = arr[i].querySelectorAll('.input input');
+    for (var j = 0; j < bullets.length; j++)
+      obj.plants.tree[i].general[j] = bullets[j].value;
+  }
+  obj.plants.aquatic = [];
+  var arr = document.querySelectorAll('#waterPlants .detail');
+  for (var i = 0; i < arr.length; i++){
+    obj.plants.aquatic[i] = {};
+    obj.plants.aquatic[i].name = arr[i].querySelector('.name').value;
+    obj.plants.aquatic[i].image = arr[i].querySelector('.image').value;
+    obj.plants.aquatic[i].general = [];
+    var bullets = arr[i].querySelectorAll('.input input');
+    for (var j = 0; j < bullets.length; j++)
+      obj.plants.aquatic[i].general[j] = bullets[j].value;
+  }
+  obj.animals = {};
+  obj.animals.ground = [];
+  var arr = document.querySelectorAll('#groundAnimals .detail');
+  for (var i = 0; i < arr.length; i++){
+    obj.animals.ground[i] = {};
+    obj.animals.ground[i].name = arr[i].querySelector('.name').value;
+    obj.animals.ground[i].image = arr[i].querySelector('.image').value;
+    obj.animals.ground[i].general = [];
+    var bullets = arr[i].querySelectorAll('.input input');
+    for (var j = 0; j < bullets.length; j++)
+      obj.animals.ground[i].general[j] = bullets[j].value;
+  }
+  obj.animals.aquatic = [];
+  var arr = document.querySelectorAll('#waterAnimals .detail');
+  for (var i = 0; i < arr.length; i++){
+    obj.animals.aquatic[i] = {};
+    obj.animals.aquatic[i].name = arr[i].querySelector('.name').value;
+    obj.animals.aquatic[i].image = arr[i].querySelector('.image').value;
+    obj.animals.aquatic[i].general = [];
+    var bullets = arr[i].querySelectorAll('.input input');
+    for (var j = 0; j < bullets.length; j++)
+      obj.animals.aquatic[i].general[j] = bullets[j].value;
+  }
+  return JSON.stringify(obj);
+}
 function generateMarkdown(){
   var md = '#Beacon Number: ' + document.getElementById('beacon').value + '<br>#Planet Name: ' + document.getElementById('planetName').value + '<br>#Star Name: ' + document.getElementById('starName').value + '<br>#Region: ' + document.getElementById('region').value + '<br>#Discoverer: ' + document.getElementById('discoverer').value + '<br><br>##Space Features: <br><br>';
   var arr = document.querySelectorAll('#spaceFeatures input');
@@ -139,27 +227,26 @@ function generateMarkdown(){
   }
   return md;
 }
-
 function hideModal(){
   'use strict';
   var oldDetail = document.querySelector('#modalContainer');
   if (oldDetail){
     oldDetail.parentNode.removeChild(oldDetail);
   }
 }
-
 function showModal(text){
   'use strict';
   hideModal();
 
   var close = document.createElement('button');
   close.innerHTML = 'Close';
   close.type = 'button';
+  close.id = 'close';
   close.addEventListener('click', hideModal);
   var quote = document.createElement('blockquote');
   quote.innerHTML = text;
   var help = document.createElement('p');
-  help.innerHTML = 'The following text has been generated from the information provided. Something wrong? Submit an issue on <a href="https://github.com/SecretOnline/NMS-Report">GitHub</a>'
+  help.innerHTML = 'Something wrong? Submit an issue on <a href="https://github.com/SecretOnline/NMS-Report">GitHub</a>'
   var modal = document.createElement('div');
   modal.id = 'modal';
   modal.appendChild(close);
@@ -171,4 +258,8 @@ function showModal(text){
   document.querySelector('body').appendChild(modalContainer);
 }
 
-window.addEventListener('load', init);
+function importJSON(){
+  showModal("Unfortunately, JSON importing is not yet available. It should be here Soon<sup>tm</sup>, just like No Man's Sky itself... :(");
+}
+
+window.addEventListener('load', init);

style.css

@@ -9,8 +9,18 @@
     font-weight: normal;
     font-style: normal;
 }
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Raleway'), url(http://fonts.gstatic.com/s/raleway/v9/0dTEPzkLWceF7z0koJaX1A.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
 * {
-  font-family: 'geosanslight-nmsregular', Helvetica, Verdana, Arial, sans-serif;
+  font-family: Raleway, Helvetica, Verdana, Arial, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 {
+font-family: geosanslight-nmsregular, Helvetica, Verdana, Arial, sans-serif;
 }
 /* Main layout */
 header {
@@ -36,6 +46,10 @@ main {
   width: auto;
   padding: 16px;
 }
+.center {
+  margin: 0 auto;
+  text-align: center;
+}
 button[type=button]{
   color: #FFFFFF;
   background-color: #A4443C;
@@ -67,6 +81,11 @@ button#genMD {
   margin: 10px auto;
   display: block;
 }
+button#close {
+  margin-right: 10px;
+  position: absolute;
+  right: 0;
+}
 .detailContainer, .inputContainer {
   position: relative;
 }