added mods list/improved list visual

.gitignore

@@ -1,2 +1,3 @@
 node_modules/*
 dist/js/bundle.js
+./package-lock.json

Changelog.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 1.0.5 (tbd)
+
+### UI Enhancements:
+- Improved "Community Creations" list panel
+- Added Mod list to Community Creations
+
+### Simulation Enhancements:
+- Added links to community mods
+
+
 ## 1.0.4 (9/17/2022)
 
 ### UI Enhancements:

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>
+			<div class="all-list-container">
-			<select id="worlds-load-dropdown"></select>
+				<div class="list-title-container">
-			<button id='load-env-btn'>Load</button><br>
+					<h2>Worlds</h2>
-			Organisms<br>
+					<div id="worlds-list-container" class="list-container">
-			<select id="organisms-load-dropdown"></select>
+						<ul id="worlds-list"></ul>
-			<button id='load-org-btn'>Load</button><br><br>
+					</div>
-			<input id="upload-json" style="display: none;" type="file">
+				</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>

src/Controllers/LoadController.js

@@ -9,31 +9,45 @@ const LoadController = {
         $('#community-creations-btn').click(()=>{
             this.open();
         });
-        $('#load-env-btn').click(async ()=>{
+        let panel = this;
-            let file = $('#worlds-load-dropdown').val();
+        $(".load-panel").on('click', '.list-item', async function() {
+            console.log('howdy')
+            let list_name = $(this).closest(".list-container").attr('id');
+			let value = $(this).find('.hidden-value').text();
+            if (list_name === 'worlds-list-container') {
                 const base = `./assets/worlds/`;
-            let resp = await fetch(base+file+'.json');
+                let resp = await fetch(base+value+'.json');
                 let json = await resp.json();
-            this.control_panel.loadEnv(json);
+                panel.control_panel.loadEnv(json);
-            this.close();
+                panel.close();
-        });
+            }
-        $('#load-org-btn').click(async ()=>{
+            else if (list_name === 'organisms-list-container') {
-            let file = $('#organisms-load-dropdown').val();
                 const base = `./assets/organisms/`;
-            let resp = await fetch(base+file+'.json');
+                let resp = await fetch(base+value+'.json');
                 let json = await resp.json();
-            this.control_panel.editor_controller.loadOrg(json);
+                panel.control_panel.editor_controller.loadOrg(json);
-            this.close();
+                panel.close();
                 $('#maximize').click();
                 $('#editor').click();
+            }
+            else if (list_name === 'mods-list-container') { 
+                window.open(value, '_blank');
+            }
         });
 
+        $('#load-env-btn').click(async ()=>{
 
-        this.loadDropdown('worlds');
+        });
-        this.loadDropdown('organisms');
+        $('#load-org-btn').click(async ()=>{
+
+        });
+        
+        this.loadList('worlds');
+        this.loadList('organisms');
+        this.loadList('mods');
     },
 
-    async loadDropdown(name) {
+    async loadList(name) {
         const base = `./assets/${name}/`;
 
         let list = [];
@@ -44,13 +58,14 @@ const LoadController = {
             console.error('Failed to load list: ', e);
         }
         
-        let id = `#${name}-load-dropdown`
+        let id = `#${name}-list`
         $(id).empty();
-        for (let opt of list) {
+        for (let item of list) {
             $(id).append(
-                `<option value="${opt.file}">
+                `<li class="list-item">
-                ${opt.name}
+                ${item.name}
-                </option>`
+                <div class="hidden-value" hidden>${item.value}</div>
+                </li>`
             );
         }
     },