scroll on add, prevent navigating away, prevent importing apworld onc…

…e imported, don't add extra spacing or capitalize and/or

css/main.css

@@ -77,6 +77,10 @@ input.name, select.region {
     width: 60%;
 }
 
+div.add-more {
+    margin-bottom: 30px;
+}
+
 div.add-more button.btn-info {
     margin-left: 20px;
 }
@@ -133,4 +137,10 @@ div.validation_text {
     color: #a32b2b;
     font-weight: bolder;
     letter-spacing: 2px;
+}
+
+/* Import styling */
+
+div.import-details strong {
+    font-size: 18px;
 }

index.html

@@ -61,16 +61,23 @@
                         </div>
                         <br /><br />
 
-                        <div class="input-group">
-                            <input type="file" name="file" v-on:change="getImporter($event)" />
-                            <i class="bi bi-info-circle-fill" data-bs-toggle="tooltip" data-bs-title="If you have a functional Manual apworld file that you created before, you can choose that here. Then click the Import button below to pull the items/locations/etc. from that apworld into this tool."></i>
-                            <div class="import-details" v-if="imported">
-                                <div v-if="imported.status" v-html="imported.status"></div>
+                        <template v-if="game == '' && creator == '' && filler">
+                            <div class="input-group">
+                                <input type="file" name="file" v-on:change="getImporter($event)" />
+                                <i class="bi bi-info-circle-fill" data-bs-toggle="tooltip" data-bs-title="If you have a functional Manual apworld file that you created before, you can choose that here. Then click the Import button below to pull the items/locations/etc. from that apworld into this tool."></i>
                             </div>
-                        </div>
-                        <div class="input-group">
-                            <button class="btn btn-warning" v-on:click="imported && imported.fillAll()">Import from apworld</button>
-                        </div><br /><br />
+                            <div class="input-group">
+                                <button class="btn btn-warning" v-on:click="imported && imported.fillAll()">Import from apworld</button>
+                            </div>
+                        </template>
+                        <template v-if="imported">
+                            <div class="input-group">
+                                <div class="import-details">
+                                    <div v-if="imported.status" v-html="imported.status"></div>
+                                </div>
+                            </div>
+                        </template>
+                        <br /><br />
                         <div class="input-group">
                             <button class="btn btn-success" v-on:click="getExporter().toZip()">Export to apworld</button>
                         </div>
@@ -287,5 +294,10 @@
         <script src="vendor/js/filesaver-1.3.8.js"></script>
 
         <script type="module" src="js/app.js"></script>
+        <script>
+            window.addEventListener("beforeunload", (event) => {
+                event.returnValue = true;
+            });
+        </script>
     </body>
 </html>

js/app.js

@@ -1,4 +1,4 @@
-import { createApp, computed, reactive } from 'vue';
+import { createApp, computed, reactive, nextTick } from 'vue';
 import { Importer } from './importer.js';
 import { Exporter } from './exporter.js';
 import { Template } from './template.js';
@@ -72,6 +72,8 @@ const app = createApp({
                     'classification': 'filler', 
                     'count': 1
                 }); 
+
+                this.scrollToBottom();
             },
             addLocation: () => { 
                 let newId = 1;
@@ -88,6 +90,8 @@ const app = createApp({
                     'id': newId,
                     'placement_type': 'none'
                 }); 
+
+                this.scrollToBottom();
             },
             addRegion: () => { 
                 let newId = 1;
@@ -103,6 +107,8 @@ const app = createApp({
                     // get the max id in the array, then increment by 1
                     'id': newId
                 }); 
+
+                this.scrollToBottom();
             },
 
             removeItem: (index) => { this.items.splice(index, 1); },
@@ -192,6 +198,12 @@ const app = createApp({
                 return Yaml.fromApp(this);
             },
 
+            scrollToBottom: () => {
+                nextTick(function () {
+                    document.documentElement.scrollTop = window.innerHeight;
+                });
+            },
+
             Importer,
             Exporter,
             Yaml,

js/helpers.js

@@ -64,11 +64,11 @@ export function translateRequirementsFromArray(json_object) {
 }
 
 export function translateRequirementsFromBooleans(boolean_string) {
-    return boolean_string
-        .replace(/\(\s*/g, '( ')
-        .replace(/\s*\)/g, ' )')
-        .replace(/\bor\b/ig, 'OR')
-        .replace(/\band\b/ig, 'AND');
+    return boolean_string;
+        // .replace(/\(\s*/g, '( ')
+        // .replace(/\s*\)/g, ' )')
+        // .replace(/\bor\b/ig, 'OR')
+        // .replace(/\band\b/ig, 'AND');
 }
 
 export function getItemsListedInRequirements(requirements) {

js/importer.js

@@ -113,8 +113,8 @@ export class Importer {
             }, function (e) {
                 self.status = `${file.name} failed because: ${e.message}`;
             });
-                
-        self.status = `Loaded: ${basename}`;
+
+        self.status = `<strong>Ready for Import!</strong> <span class="text-success">${basename}</span>`;
 
         return self;
     }
@@ -130,6 +130,8 @@ export class Importer {
         this.fillItems();
         this.fillLocations();
         this.fillRegions();
+
+        this.status = `<strong>Loaded!</strong>`;
     }
 
     fillGame() {