Merge pull request #12 from JetSimon/margin-tool

Margin tool
JetSimon · Feb 9, 2024 · 84c5e50 · 84c5e50
2 parents 566440b + 3aa4a62
commit 84c5e50
Show file tree

Hide file tree

Showing 5 changed files with 375 additions and 2 deletions.
diff --git a/changelog.md b/changelog.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 1.3.6
+
+- Add PV predictor
+
 ## 1.3.5
 
 - Clean up sidebar to fit closer together

diff --git a/index.html b/index.html
@@ -17,6 +17,27 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/vue@2"></script>
     <title>Jet's TCT Mod Tool</title>
+
+    <style>
+
+        @media only screen and (max-width: 1000px) {
+                .starting-margins {
+                position: relative!important;
+                margin-bottom:32px;
+            }
+        }
+
+        .starting-margins {
+            background-color:rgba(255, 255, 255, 0.5);
+            padding:8px;
+            border-radius: 16px;
+            text-align:right;
+            position: fixed;
+            top:16px;
+            right:16px;
+            max-width: 500px;
+        }
+    </style>
 </head>
 <body class="bg-gray-100">
 
@@ -43,8 +64,9 @@
         </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.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>
+    <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.6 | <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/engine.js"></script>
     <script src="js/base.js"></script>
     <script src="js/vueInit.js"></script>
     <script src="js/components/editor.js"></script>

diff --git a/js/base.js b/js/base.js
@@ -401,6 +401,16 @@ class TCTData {
         }
     }
 
+    getPVForState(pk) {
+        return getCurrentVoteResults(this).filter((x) => x.state == pk)[0].result.map(
+            (x) => {
+                let nickname = this.getNicknameForCandidate(x.candidate);
+                let canName = nickname != '' && nickname != null ? nickname : x.candidate;
+                return `${canName} - ${(x.percent * 100).toFixed(2)}% (${x.votes} votes)`;
+            }
+        );
+    }
+
     addCandidate() {
         const candidatePk = this.getNewPk();
 

diff --git a/js/components/stateCandidateIssues.js b/js/components/stateCandidateIssues.js
@@ -2,13 +2,33 @@ Vue.component('state', {
 
     props: ['pk'],
 
+    data() {
+        return {
+            margins:Vue.prototype.$TCT.getPVForState(this.pk)
+        };
+    },
+
+    created() {
+        setInterval(() => {
+            this.margins = Vue.prototype.$TCT.getPVForState(this.pk);
+        }, 100);
+    },
+
     template: `
-    <div class="mx-auto bg-gray-100 p-4">
+    <div style="position:relative" class="mx-auto bg-gray-100 p-4">
 
     <button class="bg-red-500 text-white p-2 my-2 rounded hover:bg-red-600" v-on:click="deleteState()">Delete State</button>
 
     <h1 class="font-bold">{{stateName}} - STATE PK {{this.pk}}</h1><br>
 
+    <div class="starting-margins">
+        <h2 style="text-align:center" class="font-bold">Predicted Starting PV</h2>
+        <ul>
+        <li class="font-bold text-xl" v-for="info in margins" :key="info">{{info}}</li>
+        </ul>
+        <p class="text-xs">These use the default global_parameter values. To change those you can use the console and edit the global_parameter object. You only need to if you changed those values in your code 1.</p>
+    </div>
+
     <label for="name">State Name:</label><br>
     <input @input="onInput($event)" :value="stateName" name="name" type="text"><br><br>
 
@@ -71,6 +91,10 @@ Vue.component('state', {
 
             Vue.prototype.$TCT.states[this.pk].fields[evt.target.name] = value;
         },
+
+        refreshMargins: function(evt) {
+            Vue.prototype.$TCT.getPVForState(this.pk);
+        }
     },
 
     computed: {