added mods list/improved list visual

dist/assets/mods/_list.json

@@ -0,0 +1,6 @@
+[
+    {
+        "name": "Life Engine Extended",
+        "value": "https://lifeengineextended.github.io/"
+    }
+]

dist/assets/organisms/_list.json

@@ -1,34 +1,34 @@
 [
     {
         "name": "Purple Flower",
-        "file": "purple_flower"
+        "value": "purple_flower"
     },
     {
         "name": "Rosa Finalis",
-        "file": "RosaFinalis"
+        "value": "RosaFinalis"
     },
     {
         "name": "Quadratus Anxius",
-        "file": "The_Anxious_Square"
+        "value": "The_Anxious_Square"
     },
     {
         "name": "Hunter",
-        "file": "hunter"
+        "value": "hunter"
     },
     {
         "name": "Small Bush Killer",
-        "file": "smallbushkiller"
+        "value": "smallbushkiller"
     },
     {
         "name": "Fly Catcher",
-        "file": "flycatcher"
+        "value": "flycatcher"
     },
     {
         "name": "Heart Locket",
-        "file": "HeartLocket"
+        "value": "HeartLocket"
     },
     {
         "name": "Napoleon",
-        "file": "Napoleon"
+        "value": "Napoleon"
     }
 ]

dist/assets/worlds/_list.json

@@ -1,38 +1,38 @@
 [
     {
         "name": "Colony",
-        "file": "colony"
+        "value": "colony"
     },
     {
         "name": "Ephemeral World",
-        "file": "ephemeral"
+        "value": "ephemeral"
     },
     {
         "name": "Trailblazer",
-        "file": "Trailblazer3"
+        "value": "Trailblazer3"
     },
     {
         "name": "Scarcity",
-        "file": "scarcity"
+        "value": "scarcity"
     },
     {
         "name": "High Def Sweepers",
-        "file": "world_HighDefSweepers_start"
+        "value": "world_HighDefSweepers_start"
     },
     {
         "name": "Shrub Swamp",
-        "file": "shrubland"
+        "value": "shrubland"
     },
     {
         "name": "Computer (unprogrammed)",
-        "file": "computer_unprogrammed"
+        "value": "computer_unprogrammed"
     },
     {
         "name": "Computer (fibonacci)",
-        "file": "compV2_fixed_labeled_fibofancy"
+        "value": "compV2_fixed_labeled_fibofancy"
     },
     {
         "name": "Life Engine of Nurgle",
-        "file": "Life_Engine_of_Nurgle"
+        "value": "Life_Engine_of_Nurgle"
     }
 ]

dist/css/style.css

@@ -308,10 +308,11 @@ input:hover,input:active {
 }
 
 .load-panel {
-    width: 300px;
+    width: 800px;
     background-color: var(--panel-bg);
     position: fixed;
     display: none;
+    text-align: center;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
@@ -324,6 +325,32 @@ input:hover,input:active {
     padding: 10px;
 }
 
+.list-title-container {
+    flex: 1;
+}
+.list-container {
+    overflow-y: scroll;
+    max-height: 300px;
+}
+
+.list-item {
+    cursor: pointer;
+    padding: 5px;
+    border-bottom: 1px solid #ccc;
+    background-color: var(--btn);
+}
+.list-item:hover {
+    background-color: var(--btn-hover);
+}
+.list-item:active {
+    background-color: var(--btn-click);
+}
+
+.all-list-container {
+    display: flex;
+    width: 100%;
+}
+
 #close-load-btn { 
     float: right;
 }

dist/index.html

@@ -280,15 +280,28 @@
 		<div class='load-panel'>
 			<div class="load-panel-title">
 				<button id='close-load-btn'><i class="fa fa-times"></i></button>
-				<h2 id="load-title">Community Creations</h2>
+				<h1>Community Creations</h1>
 			</div><br>
-			Worlds<br>
-			<select id="worlds-load-dropdown"></select>
-			<button id='load-env-btn'>Load</button><br>
-			Organisms<br>
-			<select id="organisms-load-dropdown"></select>
-			<button id='load-org-btn'>Load</button><br><br>
-			<input id="upload-json" style="display: none;" type="file">
+			<div class="all-list-container">
+				<div class="list-title-container">
+					<h2>Worlds</h2>
+					<div id="worlds-list-container" class="list-container">
+						<ul id="worlds-list"></ul>
+					</div>
+				</div>
+				<div class="list-title-container">
+					<h2>Organisms</h2>
+					<div id="organisms-list-container" class="list-container">
+						<ul id="organisms-list"></ul>
+					</div>
+				</div>
+				<div class="list-title-container">
+					<h2>Mods</h2>
+					<div id="mods-list-container" class="list-container">
+						<ul id="mods-list"></ul>
+					</div>
+				</div>
+			</div>
 		</div>
 		<div class='community-section'>
 			<button id="community-creations-btn" title="See worlds and organisms made by the community">Community Creations <i class="fa fa-users"></i></button>