From 566440be69fe50125c48d657354f86aeb5a3f5f4 Mon Sep 17 00:00:00 2001
From: Jet <jetjdsimon@gmail.com>
Date: Thu, 18 Jan 2024 22:04:45 -0800
Subject: [PATCH] Add add state button

---
 changelog.md             |  5 ++++
 index.html               |  2 +-
 js/base.js               | 54 ++++++++++++++++++++++++++++++++++++++++
 js/components/pickers.js | 47 +++++++++++++++++++++++++---------
 4 files changed, 95 insertions(+), 13 deletions(-)

diff --git a/changelog.md b/changelog.md
index da50130..d64df9b 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 1.3.5
+
+- Clean up sidebar to fit closer together
+- Add "Add State" button as requested by S4M.
+
 ## 1.3.4
 
 - Make it so the issue field in issue answer effect is a dropdown instead.
diff --git a/index.html b/index.html
index 4b887d3..c6809a8 100644
--- a/index.html
+++ b/index.html
@@ -43,7 +43,7 @@
         </div>
     </div>
 
-    <div class="bg-blue-400 w-full drop-shadow-md mx-auto text-center text-white font-italic py-10">Made by <a class="hover:text-gray-200" href="https://jetsimon.com/">Jet Simon</a> | Version 1.3.4 | <a class="hover:text-gray-200" href="./changelog.html">Changelog</a> | <a class="hover:text-gray-200" href="https://github.com/JetSimon/Jets-The-Campaign-Trail-Mod-Tool-Website">Github Repo</a> | <span onclick="alert('I have decided to add minimal ads to this site. It is my hope they pay for hosting the domains and for any server costs my other TCT sites like CTS may use. Thank you so much for using this tool!')" style="cursor: pointer;" class="hover:text-gray-200" href="">Why Ads?</span></div>
+    <div class="bg-blue-400 w-full drop-shadow-md mx-auto text-center text-white font-italic py-10">Made by <a class="hover:text-gray-200" href="https://jetsimon.com/">Jet Simon</a> | Version 1.3.5 | <a class="hover:text-gray-200" href="./changelog.html">Changelog</a> | <a class="hover:text-gray-200" href="https://github.com/JetSimon/Jets-The-Campaign-Trail-Mod-Tool-Website">Github Repo</a> | <span onclick="alert('I have decided to add minimal ads to this site. It is my hope they pay for hosting the domains and for any server costs my other TCT sites like CTS may use. Thank you so much for using this tool!')" style="cursor: pointer;" class="hover:text-gray-200" href="">Why Ads?</span></div>
     
     <script src="js/base.js"></script>
     <script src="js/vueInit.js"></script>
diff --git a/js/base.js b/js/base.js
index c8e30e6..ae0b3fb 100644
--- a/js/base.js
+++ b/js/base.js
@@ -440,6 +440,60 @@ class TCTData {
         return candidatePk;
     }
 
+    createNewState() {
+        const cans = this.getAllCandidatePKs();
+        const issues = Object.keys(this.issues);
+
+        const newPk = this.getNewPk();
+        let x = {
+            "model": "campaign_trail.state",
+            "pk": newPk,
+            "fields": {
+                "name": "New State",
+                "abbr": "NST",
+                "electoral_votes": 1,
+                "popular_votes": 10,
+                "poll_closing_time": 120,
+                "winner_take_all_flg": 1,
+                "election": -1,
+            }
+        }
+        this.states[newPk] = x;
+        
+        for(let i = 0; i < cans.length; i++) {
+            const cPk = this.getNewPk();
+            // Create candidate state multipliers
+            let c = {
+                "model": "campaign_trail.candidate_state_multiplier",
+                "pk": cPk,
+                "fields": {
+                    "candidate": cans[i],
+                    "state": newPk,
+                    "state_multiplier": 1
+                }
+            }
+            this.candidate_state_multiplier[cPk] = c;
+        }
+
+        for(let i = 0; i < issues.length; i++) {
+            const iPk = this.getNewPk();
+            // Create state issue scores
+            let iss = {
+                "model": "campaign_trail.state_issue_score",
+                "pk": iPk,
+                "fields": {
+                    "state": newPk,
+                    "issue": issues[i],
+                    "state_issue_score": 0,
+                    "weight": 1.5
+                }
+            }
+            this.state_issue_scores[iPk] = iss;
+        }
+
+        return newPk;
+    }
+
     loadMap() {
 
         const cans = this.getAllCandidatePKs();
diff --git a/js/components/pickers.js b/js/components/pickers.js
index 2e042d8..22600e3 100644
--- a/js/components/pickers.js
+++ b/js/components/pickers.js
@@ -1,7 +1,7 @@
 Vue.component('question-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto p-3">
 
     <label for="questionPicker">Questions <span class="text-gray-700 italic">({{numberOfQuestions}})</span>:</label><br>
 
@@ -12,7 +12,7 @@ Vue.component('question-picker', {
     <button class="bg-green-500 text-white p-2 my-2 rounded hover:bg-green-600" v-on:click="addQuestion()">Add Question</button>
     <button class="bg-blue-500 text-white p-2 my-2 rounded hover:bg-blue-600" v-on:click="cloneQuestion()">Clone Question</button>
 
-    <p class="text-sm text-gray-700 italic">WARNING: When adding and deleting questions, remember that your code 1 needs to have the same number of questions as in your code 2!</p>
+    <p class="text-xs text-gray-700 italic">WARNING: When adding and deleting questions, remember that your code 1 needs to have the same number of questions as in your code 2!</p>
 
     </div>
     `,
@@ -91,14 +91,19 @@ Vue.component('question-picker', {
 Vue.component('state-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto p-3">
 
     <label for="statePicker">States:</label><br>
 
     <select @click="onClick" @change="onChange($event)" name="statePicker" id="statePicker">
-        <option v-for="state in states" :value="state.pk" :key="state.pk">{{state.pk}} - {{state.fields.abbr}}</option>
+        <option v-for="state in states" :value="state.pk" :selected="currentState == state.pk"  :key="state.pk">{{state.pk}} - {{state.fields.abbr}}</option>
     </select>
 
+    <br>
+    <button class="bg-green-500 text-white p-2 my-2 rounded hover:bg-green-600" v-on:click="addState()">Add State</button>
+
+    <p class="text-xs text-gray-700 italic">WARNING: If you add a state with the Add State button the abbreviation will need to exist in your map svg. Also change the election pk to your election. Use only if you know what you're doing.</p>
+
     </div>
     `,
 
@@ -112,6 +117,20 @@ Vue.component('state-picker', {
             if(Vue.prototype.$globalData.mode != STATE) {
                 Vue.prototype.$globalData.mode = STATE;
             }
+        },
+
+        addState:function(evt) {
+
+            let newPk = Vue.prototype.$TCT.createNewState();
+           
+            const temp = Vue.prototype.$globalData.filename;
+            Vue.prototype.$globalData.filename = "";
+            Vue.prototype.$globalData.filename = temp;
+
+            Vue.prototype.$globalData.mode = STATE;
+            Vue.prototype.$globalData.state = newPk;
+
+            this.onChange(newPk);
         }
     },
 
@@ -119,6 +138,10 @@ Vue.component('state-picker', {
         states: function () {
           let a = [Vue.prototype.$globalData.filename];
           return Object.values(Vue.prototype.$TCT.states);
+        },
+
+        currentState: function() {
+            return Vue.prototype.$globalData.state;
         }
     }
 })
@@ -126,7 +149,7 @@ Vue.component('state-picker', {
 Vue.component('issue-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto p-3">
 
     <label for="issuePicker">Issues:</label><br>
 
@@ -162,7 +185,7 @@ Vue.component('issue-picker', {
 Vue.component('candidate-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto p-3">
 
     <label for="candidatePicker">Candidates:</label><br>
 
@@ -213,7 +236,7 @@ Vue.component('candidate-picker', {
 Vue.component('cyoa-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto py-1 px-3">
 
     <button class="bg-gray-300 p-2 my-2 rounded hover:bg-gray-500" v-on:click="gotoCyoa()">CYOA</button>
 
@@ -230,7 +253,7 @@ Vue.component('cyoa-picker', {
 Vue.component('banner-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto py-1 px-3">
 
     <button class="bg-gray-300 p-2 my-2 rounded hover:bg-gray-500" v-on:click="gotoBanner()">Banner Settings</button>
 
@@ -247,7 +270,7 @@ Vue.component('banner-picker', {
 Vue.component('template-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto py-1 px-3">
 
     <label for="templatePicker">Choose a Template:</label><br>
 
@@ -280,7 +303,7 @@ Vue.component('template-picker', {
 Vue.component('ending-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto py-1 px-3">
 
     <button class="bg-gray-300 p-2 my-2 rounded hover:bg-gray-500" v-on:click="gotoEndings()">Custom Endings</button>
 
@@ -297,7 +320,7 @@ Vue.component('ending-picker', {
 Vue.component('mapping-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto py-1 px-3">
 
     <button class="bg-gray-300 p-2 my-2 rounded hover:bg-gray-500" v-on:click="gotoMapping()">Custom Map Tools</button>
 
@@ -314,7 +337,7 @@ Vue.component('mapping-picker', {
 Vue.component('bulk-picker', {
 
     template: `
-    <div class="mx-auto p-6">
+    <div class="mx-auto py-1 px-3">
 
     <button class="bg-gray-300 p-2 my-2 rounded hover:bg-gray-500" v-on:click="gotoBulk()">Bulk Tools</button>