☰

🐅 Theme In-Game Editor for Arras.io 🐅

Modify the look and feel of your Arras.io game, while you're playing it!

  1. // ==UserScript==
  2. // @name         🐅 Theme In-Game Editor for Arras.io 🐅
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.7
  5. // @description  Modify the look and feel of your Arras.io game, while you're playing it!
  6. // @author       Road6943
  7. // @match        *://arras.io/
  8. // @match        *://arras.netlify.app/
  9. // @require      https://cdn.jsdelivr.net/npm/vue@2.6.12
  10. // @resource     VERTE_CSS https://cdn.jsdelivr.net/npm/verte@0.0.12/dist/verte.css
  11. // @require      https://unpkg.com/prompt-boxes@2.0.6/src/js/prompt-boxes.js
  12. // @resource     PROMPT_BOXES_CSS https://unpkg.com/prompt-boxes@2.0.6/src/css/prompt-boxes.css
  13. // @require      https://unpkg.com/konva@4.0.0/konva.min.js
  14. // @require      https://cdn.jsdelivr.net/npm/vue-konva@1.0.7/lib/vue-konva.min.js
  15. // @grant        GM_getResourceText
  16. // @grant        GM_addStyle
  17. // @grant        GM_setClipboard
  18. // @grant        GM_getValue
  19. // @grant        GM_setValue
  20. // @grant        GM_deleteValue
  21. // ==/UserScript==
  22.  
  23.  
  24. /* IMPORTANT NOTES: use single quotes (') for the majority of stuff as they won't interfere with
  25. ** either HTML's " double quotes " or the js string interpolation backticks ``
  26. ** Arras() function is what allows this whole thing to work -- gives current theme values and allows you to set new ones */
  27. var CONTAINER_ID = 'app';
  28. var CANVAS_ID = 'canvas';
  29. var LAUNCH_BTN_ID = 'launch-btn';
  30.  
  31. (function() {
  32.     'use strict';
  33.  
  34.     // add these css files at the start so that the launch btn can be styled and positioned above canvas from the very start
  35.     // Verte css stuff can't go here because it screws with the Arras landing page styling
  36.     GM_addStyle( getUserscriptSpecificCSS() ); // positions items above canvas
  37.     GM_addStyle( getAppCSS() ); // adds styling for the majority of the Vue app's ui
  38.     //GM_addStyle( GM_getResourceText('PROMPT_BOXES_CSS') ); // (non-blocking dialogs)
  39.  
  40.     var canvas = document.getElementById(CANVAS_ID);
  41.  
  42.     // add a launch button to launch the main Vue instance, it should look identical to the toggle-btn
  43.     // thanks to their shared .tiger-btn class
  44.     canvas.insertAdjacentHTML('beforebegin', `
  45.       <button id="${LAUNCH_BTN_ID}" class="tiger-btn">
  46.         🐅 Open 🐅
  47.       </button>
  48.     `);
  49.  
  50.     document.getElementById(LAUNCH_BTN_ID).onclick = launchApp
  51. })();
  52.  
  53.  
  54. // launch the main editor app only if user is in-game (so that the themeColor stuff is actually availiable to grab)
  55. // also destroy the initial launch-btn at the end of this function because it is no longer needed and is replaced with toggle-btn inside the main Vue app
  56. function launchApp() {
  57.   if (!userIsCurrentlyInGame()) {
  58.     alert('You must be in-game to use this!');
  59.     return;
  60.   }
  61.  
  62.   // remove the launch button, so that the toggle-btn in the Vue instance can take over
  63.   // and also to prevent users from accidently creating multiple Vue instances through multiple clicks
  64.   document.getElementById(LAUNCH_BTN_ID).remove();
  65.  
  66.   // something in arras's default css styling screws with the top color picker
  67.   // by making it be too wide and overflow from the color picker container
  68.   // so this removes all existing css for just that top slider, so that only Verte's css can style it
  69.   // the width:85% thing is something that I used before to make the slider look correct,
  70.   // but it screwed with the functionality somewhat so I removed it
  71.   /* Verte-related */
  72.   GM_addStyle( '.verte-picker__slider { all: unset;        /* width: 85%; */ }' );
  73.  
  74.   // add verte css file (color picker styling)
  75.   // Must go here (in-game only, never landing page) because it screws with the Arras landing page styling somehow
  76.   GM_addStyle( GM_getResourceText("VERTE_CSS") );
  77.  
  78.   // add css to make the Prompt Boxes non-blocking dialog toasts work
  79.   GM_addStyle( GM_getResourceText('PROMPT_BOXES_CSS') );
  80.  
  81.   var canvas = document.getElementById(CANVAS_ID);
  82.   canvas.insertAdjacentHTML('beforebegin', getAppHTML());
  83.   runAppJS();
  84. }
  85.  
  86.  
  87. // a little hack to detect if the user is currently in game or on the main landing page
  88. function userIsCurrentlyInGame() {
  89.   // playerNameInput is disabled in-game, but enabled on the main landing page (because thats how players enter their name)
  90.   //return document.getElementById("playerNameInput").hasAttribute("disabled");
  91.  
  92.   // ^^ that no longer works, so heres a new hack:
  93.   // Arras().themeColor is undefined on the landing page, but has a value in-game
  94.   return (Arras().themeColor !== undefined)
  95. }
  96.  
  97. // this is css that allows the the userscript to properly show the editor above the game canvas
  98. // and anything else that's not used for the actual app functionality (anything that wouldn't go into a codepen of the app)
  99. function getUserscriptSpecificCSS() {
  100.   return `
  101.  
  102. /* These position the launch button and editor div directly above the canvas */
  103. #${CONTAINER_ID}, #${LAUNCH_BTN_ID} {
  104.   position: absolute;
  105.   z-index: 2;
  106. }
  107. #${CANVAS_ID} {
  108.   position: absolute;
  109.   z-index: 1;
  110. }
  111.  
  112. `}
  113.  
  114. // paste the vue js html code into here, but NOT the script tag stuff or the style tag stuff
  115. function getAppHTML() {
  116.   return `
  117.     <!-- 
  118.     This file contains the html (vue-template html) for the main editor
  119.     
  120.     The @keydown.stop stuff everywhere prevents typing into inputs in tiger from also affecting the game (e.g. when typing a theme name, you don't want presssing 'e' to also toggle autofire)
  121.  -->
  122.  
  123. <div id="app" 
  124.     :style="[showApp ? {
  125.                     backgroundColor: '#0004', /* not a typo */
  126.                     height: '50%',
  127.                     width: '30%',
  128.                     overflow: 'hidden',
  129.                 } : {
  130.                     backgroundColor: 'transparent',
  131.                     height: '0%',
  132.                     width: '0%',
  133.                 }]"
  134. > <!-- app when open gets a bg color of #0001 (not a typo, it's pure black but with near-complete transparency) so that its styling like table borders appear no matter which color the map bg is -->
  135. <!--MOUSEOVER BUG FIX:
  136.     When the container has a set size in a css file, your mouse inputs when over the app,
  137.         even if its closed, do not register with the game */
  138. /* You need to have the container have 0% height & width when closed so the mouse can freely move around the top left corner 
  139.     This is why we use the v-bind:style for this -->
  140. <!-- overflow:hidden is to prevent editor from extending past the transparentish background of the app -->
  141.  
  142.     <button id="toggle-btn" class="tiger-btn" @click="showApp = !showApp">
  143.         🐅 {{ showApp ? "Close" : "Open" }} 🐅
  144.     </button>
  145.     <button id="tab-btn" class="tiger-btn" @click="changeTab()" v-show="showApp">
  146.         Change Tab
  147.     </button>
  148.     <br>
  149.     <button id="save-btn" class="tiger-btn" v-show="showApp"
  150.             @mousedown="indicateClicked('saveCurrentTheme') "
  151.             @mouseup="saveCurrentTheme()"
  152.     >
  153.         Save Current Theme (Hold for 3s)
  154.     </button>
  155.  
  156.     <div id="editor" class="tab" v-show="showApp && currentTab === 'editor' ">
  157.         <div v-for="(_, category) in config" 
  158.             v-if="category !== 'themeColor' " 
  159.         > <!-- handle themeColor separately -->
  160.             <table>
  161.                 <thead>
  162.                     <th colspan="2" >
  163.                         Edit {{ category }}
  164.                     </th>
  165.                 </thead>
  166.  
  167.                 <!-- in Vue, key,val is reversed to val,key -->
  168.                 <tr v-for="(val,key) in config[category]" 
  169.                     @change="console.log('Arras().' + category + '.' + key + ' is now ' + config[category][key])"
  170.                 >
  171.                     <td>
  172.                         {{ key }}
  173.                     </td>
  174.  
  175.                     <!-- use the type of the value to determine the type of input selector :: typeof won't work because Vue represents numbers as strings -->
  176.                     <td v-if="getType(val) === 'number' ">
  177.                         <input type="number" v-model.number="config[category][key]" @keydown.stop>
  178.                     </td>
  179.  
  180.                     <td v-else-if="getType(val) === 'boolean' ">
  181.                         <input type="checkbox" v-model="config[category][key]" >
  182.                     </td>
  183.  
  184.                     <td v-else>
  185.                         <!-- This means that the type of one of the properties was not recognized by this.getType() -->
  186.                         <strong>:( This is broken. Please ping Road#6943 in Discord to fix this. ):</strong>
  187.                     </td>
  188.                 </tr>
  189.             </table>
  190.         </div>
  191.  
  192.         <div> <!-- themeColor is treated differently from other Arras() properties because color pickers need special attention (like the color descriptions, etc...) -->
  193.             <table>
  194.                 <thead>
  195.                     <th colspan="3" >
  196.                         Edit themeColor
  197.                     </th>
  198.                 </thead>
  199.  
  200.                 <tr>
  201.                     <td>
  202.                         border
  203.                     </td>
  204.                     <td colspan="2" >
  205.                         <input type="number" v-model.number="config.themeColor.border" @keydown.stop
  206.                                 @change="console.log('Arras().themeColor.border is now ' + config.themeColor.border)"
  207.                         >
  208.                     </td>
  209.                 </tr>
  210.  
  211.                 <tr v-for="[ description, colorName ] in colorDescriptions" >
  212.  
  213.                     <!-- A "dummy" column, so that the color picker doesn't flow out of the app -->
  214.                     <!-- Verte-related -->
  215.                     <td class="dummy-column">
  216.                         {{ colorName }}
  217.                     </td>
  218.  
  219.                     <td @keydown.stop> <!-- putting @keydown.stop in verte won't work, so this is the next best thing -->
  220.                         <!-- Why won't menuPosition="right" work!!! --> <!-- Verte-related -->
  221.                         <verte picker="square" model="hex" menuPosition="right"
  222.                                 v-model="config.themeColor.table[ colorNames.indexOf(colorName) ]"
  223.                                 @input=" console.log( colorName + ' is now ' + getHex(colorName) ) "
  224.                         ></verte>
  225.                     </td>
  226.  
  227.                     <td>
  228.                         {{ description }}
  229.                     </td>
  230.                 </tr>
  231.             </table>
  232.         </div>
  233.  
  234.         <div id="special-color-buttons-container">
  235.             <button class="tiger-btn" @click="randomizeColors">Randomize Colors</button>
  236.         </div>
  237.     </div>
  238.  
  239.     <div id="extras" class="tab" v-show="showApp && currentTab === 'extras' ">
  240.         
  241.         <button id="feedback-btn" class="tiger-btn"
  242.             onclick="window.open('https://forms.gle/M425vYsiBqZzjdRx6','_blank')"
  243.         >
  244.             Give Feedback! (Opens in New Tab)
  245.         </button>
  246.  
  247.         <table>
  248.             <tr>
  249.                 <td>
  250.                     Theme Name:
  251.                 </td>
  252.                 <td>
  253.                     <input type="text" v-model="themeDetails.name" 
  254.                         placeholder="Name" @keydown.stop
  255.                     >
  256.                 </td>
  257.             </tr>
  258.             <tr>
  259.                 <td>
  260.                     Theme Author:
  261.                 </td>
  262.                 <td>
  263.                     <input type="text" v-model="themeDetails.author" 
  264.                         placeholder="Author" @keydown.stop
  265.                     >
  266.                 </td>
  267.             </tr>
  268.             <tr>
  269.                 <td>
  270.                     <textarea id="import-theme-textarea" v-model="importedTheme" 
  271.                         placeholder="Enter theme" @keydown.stop
  272.                     ></textarea>
  273.                 </td>
  274.                 <td>
  275.                     <button class="tiger-btn" @click="indicateClicked('importTheme'); importTheme()">
  276.                         {{
  277.                             wasButtonClicked.importTheme
  278.                             ? 'Currently Importing Theme'
  279.                             : 'Import Theme (All Types Accepted)'
  280.                         }}
  281.                     </button>
  282.                 </td>
  283.             </tr>
  284.             <tr>
  285.                 <td>
  286.                     Best Option. Includes everything. Only works with Tiger (Theme In-Game Editor).
  287.                 </td>
  288.                 <td>
  289.                     <button class="tiger-btn" @click="indicateClicked('exportTiger'); exportTheme('TIGER_JSON')">
  290.                         {{ 
  291.                             wasButtonClicked.exportTiger
  292.                             ?  'Copied to clipboard!'
  293.                             : '🐅 Export Tiger Theme 🐅' 
  294.                         }}
  295.                     </button>
  296.                 </td>
  297.             </tr>
  298.             <tr>
  299.                 <td>
  300.                     Only includes colors (and the border size). DOES NOT INCLUDE ANY OTHER VALUES SUCH AS FOR GRAPHICAL OR GUI PROPERTIES. However, it can be used without Tiger, by entering it into Arras.io's custom theme input.
  301.                 </td>
  302.                 <td>
  303.                     <button class="tiger-btn" @click="indicateClicked('exportBackwardsCompatible'); exportTheme('backwardsCompatible')">
  304.                         {{ 
  305.                             wasButtonClicked.exportBackwardsCompatible
  306.                             ? 'Copied to clipboard!'
  307.                             : 'Export Backwards-Compatible Theme'
  308.                         }}
  309.                     </button>
  310.                 </td>
  311.             </tr>
  312.         </table>
  313.  
  314.         
  315.         
  316.     </div>
  317.  
  318.     <div id="savedThemes" class="tab" v-show="showApp && currentTab === 'savedThemes' ">
  319.         <table>
  320.             <tr v-for="(theme,index) in savedThemes">
  321.                 <td class="theme-details-container" >
  322.                     {{ theme.themeDetails.name }}
  323.                     <br><br>
  324.                     by:
  325.                     <br>
  326.                     {{ theme.themeDetails.author }}
  327.                     <br><br>
  328.                     <button class="delete-btn tiger-btn"
  329.                             @mousedown="indicateClicked('deleteTheme') 
  330.                                             /* sets the starting timestamp */
  331.                                         "
  332.                             @mouseup="deleteSavedTheme(index)  
  333.                                         /* only deletes if mouseup timestamp - mousedown timestamp >= 3 seconds, to prevent accidental deletion */ 
  334.                                         " 
  335.                     >
  336.                         Delete Theme<br>(Hold for 3s)
  337.                     </button>
  338.                 </td>
  339.                 <td class="theme-preview-container">
  340.                     <svg class="preview" 
  341.                         :style="{ 
  342.                             backgroundColor: getHex('white', theme) ,
  343.                             stroke: getHex('black', theme) ,
  344.                             strokeWidth: 3 ,
  345.                         }"
  346.                         @click="applyTheme(theme)"
  347.                     >
  348.                         <rect class="barrelsAndRocks" x="50" y="40" rx="5" ry="5" width="35" height="20" stroke-width="3"
  349.                             :fill="getHex('grey', theme)" />
  350.                         <circle class="blueTeam" cx="50" cy="50" r="20" stroke-width="3"
  351.                             :fill="getHex('blue', theme)" />
  352.                         
  353.                         <rect class="barrelsAndRocks" x="215" y="40" rx="5" ry="5" width="35" height="20" stroke-width="3"
  354.                             :fill="getHex('grey', theme)" />
  355.                         <circle class="greenTeam" cx="250" cy="50" r="20" stroke-width="3"
  356.                             :fill="getHex('green', theme)" />
  357.                         
  358.                         <rect class="barrelsAndRocks" x="215" y="140" rx="5" ry="5" width="35" height="20" stroke-width="3"
  359.                             :fill="getHex('grey', theme)" />
  360.                         <circle class="magentaTeam" cx="250" cy="150" r="20" stroke-width="3"
  361.                             :fill="getHex('magenta', theme)" />
  362.                         
  363.                         <rect class="barrelsAndRocks" x="50" y="140" rx="5" ry="5" width="35" height="20" stroke-width="3"
  364.                             :fill="getHex('grey', theme)" />
  365.                         <circle class="redTeam" cx="50" cy="150" r="20" stroke-width="3"
  366.                             :fill="getHex('red', theme)" />
  367.                         
  368.                         <polygon class="triangle" points="65.5,100  100,80  100,120"
  369.                             :fill="getHex('orange', theme)" />
  370.                         
  371.                         <polygon class="square" points="230.5,85 230.5,115 200.5,115 200.5,85"
  372.                             :fill="getHex('gold', theme)" />
  373.                         
  374.                         <polygon class="pentagon" points="138,113  130.6,90.2  150,76.1  169.4,90.2  162,113" 
  375.                             :fill="getHex('purple', theme)" />
  376.                         
  377.                         <polygon class="rock" class="barrelsAndRocks" points="142.1,53.7  131.15,42.75  131.15,27.25  142.1,16.3  157.6,16.1  168.55,27.25  168.55,42.75  157.6,53.7"
  378.                             :fill="getHex('grey', theme)" />
  379.                         
  380.                         <polygon class="crasher" points="150,130 140,147.32 160,147.32"
  381.                             :fill="getHex('pink', theme)" />
  382.                         
  383.                         <text x="87.5" y="180" class="gameText"
  384.                             :fill="getHex('guiwhite', theme)"
  385.                         >Click To Use</text>
  386.                     </svg>
  387.                 </td>
  388.             </tr>
  389.         </table>
  390.     </div>
  391. </div>
  392.  
  393.   `
  394. }
  395.  
  396. function getAppCSS() {
  397.   return `
  398.     /*
  399.     This file contains the css (non-userscript specific or library-imported) that makes the editor appear and then look presentable
  400. */
  401.  
  402. /* These make sure the editor doesn't take up the whole screen
  403. ** and instead stays in a nice neat tiny box */
  404. html,body {
  405.     height: 100%;
  406.     width: 100%;
  407. }
  408.  
  409. /* DO NOT SET HEIGHT/WIDTH/OVERFLOW FOR app IN HERE (CSS FILE) */
  410. /* SET IT USING Vue's conditional :style binding */
  411. /* When the container has a set size, your mouse inputs when over the app,
  412.         even if its closed, do not register with the game */
  413. /* You need to have the container have 0% height & width when closed so the mouse can freely move around the top left corner */
  414. #app .tab {
  415.     height: 75%; /* To prevent bottom from extending past app */
  416.     width: 100%;
  417.     overflow: auto;
  418. }
  419.  
  420. /* dummy column adds space for the color picker to fully expand into */
  421. /* Verte-related */
  422. td.dummy-column {
  423.     width: 100px;
  424. }
  425.  
  426. /* makes number/text inputs and textareas and editor buttons transparent */
  427. #app input[type="number"]:not(.verte__input), 
  428. #app input[type="text"]:not(.verte__input),
  429. #app textarea,
  430. .tiger-btn {
  431.     background-color:transparent;
  432. }
  433. /* adds outline to text so its visible against any background color, # of repeated shadows determines strength of outline */
  434. /* from https://stackoverflow.com/a/57465026 */
  435. /* also making all text bold and Ubuntu, so its easier to see */
  436. #app, 
  437. #app input[type="number"]:not(.verte__input),
  438. #app input[type="text"]:not(.verte__input),
  439. #app textarea,
  440. .tiger-btn {
  441.     text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
  442.     color: white;
  443.     
  444.     font-weight: bold;
  445.     /* no need to import Ubuntu font, Arras's default styling will take over in-game and provide it for free */
  446. }
  447.  
  448. /* makes the items more easy to visually separate from each other and the borders of the app */
  449. #app table, 
  450. #app th, 
  451. #app td {
  452.     border: 1px solid white;
  453.     border-collapse: collapse;
  454.     padding: 10px;
  455. }
  456.  
  457. /* forces the number in number inputs to be close to its label on the left */
  458. #app input[type="number"] {
  459.     text-align: left;
  460. }
  461.  
  462. /* force text inside toggle-btn to stay in 1 line */
  463. #toggle-btn {
  464.     white-space: nowrap;
  465. }
  466.  
  467. /* make the tab changing and save theme buttons stay away from the open/close button */
  468. #tab-btn, #save-btn {
  469.     float: right;
  470. }
  471. /* add some extra space below the #save-btn */
  472. #save-btn {
  473.     margin-bottom: 10px;
  474. }
  475.  
  476. /* make extras tab table stay within app */
  477. #extras table {
  478.     table-layout: fixed;
  479. }
  480. #extras textarea {
  481.     width: 100%;
  482. }
  483.  
  484. /* make the entire svg theme preview show up
  485. ** and give it a "softer" look */
  486. #savedThemes svg {
  487.     height: 250%;
  488.     border-radius: 5%;
  489. }
  490. /* make the full svg preview show up instead of being cut off at the bottom */
  491. #savedThemes .theme-preview-container {
  492.     height: 100px;
  493.     /* Align svg to top of cell */
  494.     vertical-align: top;
  495. }
  496.  
  497. /* make the svg text more visible and reflective of its in-game look */
  498. #savedThemes svg text {
  499.     font-family: Ubuntu, sans-serif;
  500.     font-size: 25px;
  501.     font-weight: bold;
  502.     stroke-width: 1;
  503.     letter-spacing: -1.5px;
  504. }
  505.  
  506. /* add some space around the deleteTheme buttons, 
  507. ** and make them half-transparent red
  508. */
  509. #savedThemes .delete-btn {
  510.     margin: 10px;
  511.     background-color: rgba(255, 0, 0, 0.7)
  512. }
  513.  
  514. #savedThemes .theme-details-container {
  515.     text-align: center;
  516.  
  517.     /* To prevent really long theme names or author names from 
  518.         fully displaying in one linemaking it impossible to scroll 
  519.         rightwards to the theme previews 
  520.         
  521.         Instead, they are forced to wrap, which generates a really tall cell */
  522.     word-break: break-all;
  523.     min-width: 150px;
  524. }
  525.  
  526. /* main verte container 
  527.     -- add some space between its left and the #app container's left */
  528. /* Verte-related */
  529. [class="verte__menu-origin verte__menu-origin--bottom verte__menu-origin--active"] {
  530.     margin-left: 25px;
  531. }
  532.  
  533. #special-color-buttons-container {
  534.     text-align: center;
  535.     margin-top: 10px;
  536. }
  537.  
  538.   `
  539. }
  540.  
  541. // paste the vue js <script> js </script> code into herexs
  542. function runAppJS() {
  543.  
  544.   /*
  545.     This file contains the Vue.js code that runs the editor
  546. */
  547. 'use strict';
  548.  
  549. // initializing PromptBoxes (used for its toasts, which are non-blocking dialogs)
  550. var pb = new PromptBoxes({
  551.     attrPrefix: 'pb',
  552.     toasts: {
  553.         direction: 'top',       // Which direction to show the toast  'top' | 'bottom'
  554.         max: 2,                 // The number of toasts that can be in the stack
  555.         duration: 1000 * 3,     // The time the toast appears (in milliseconds)
  556.         showTimerBar: true,     // Show timer bar countdown
  557.         closeWithEscape: true,  // Allow closing with escaping
  558.         allowClose: true,      // Whether to show a "x" to close the toast
  559.     }
  560. });
  561.  
  562.  
  563. var app = new Vue({
  564.     el: "#app",
  565.  
  566.     components: { Verte }, /* Verte-related */
  567.  
  568.     data: {
  569.         showApp: true, // applies to the overall app (#app)
  570.         currentTab: 'editor', // color pickers tab must be the initial one because otherwise the color pickers break
  571.                                 // other options can be found in the changeTab() function
  572.  
  573.         config: {}, // is filled with Arras(), and then stored currentTheme (config from previous session) on Vue instance creation
  574.                     // because this is linked directly to the game's Arras() obj, we don't need a watcher on config or a renderChange() function
  575.         themeDetails: {
  576.             name: "", // theme name
  577.             author: "",
  578.         },
  579.         
  580.         importedTheme: "",
  581.  
  582.         // is synced with GM_ storage using a watcher :: each theme's unique key is its index in this array
  583.         savedThemes: [],
  584.  
  585.         // used to temporarily change button text after being clicked
  586.         wasButtonClicked: {
  587.             importTheme: false,
  588.             exportTiger: false,
  589.             exportBackwardsCompatible: false,
  590.         },
  591.  
  592.         // used to ensure user holds down btn for 3 seconds before the functioanlity actually happens
  593.         // to prevent accidental stray clicks
  594.         buttonClickStartTime: {
  595.             deleteTheme: Infinity,
  596.             saveCurrentTheme: Infinity,
  597.         },
  598.  
  599.         // colorNames is an array of the names of the colors in the array at Arras().themeColor.table, in the same order
  600.         colorNames: ["teal","lgreen","orange","yellow","lavender","pink","vlgrey","lgrey","guiwhite","black","blue","green","red","gold","purple","magenta","grey","dgrey","white","guiblack"],
  601.         // colorNames and colorDescriptions CANNOT be combined because the order for colorNames is a bad description order (you shouldn't put magenta far apart from blue/green/red, etc...)
  602.         colorDescriptions: [
  603.             /* "Utility" stuff, not sure how to describe these */
  604.             /* Borders -- at top since the border size selector is right above the color selectors */
  605.             ["Borders, Text Outlines, Health Bar Background"
  606.                 , "black"],
  607.             ["Map Background"
  608.                 , "white"],
  609.             ["Map Border, Grid"
  610.                 , "guiblack"],
  611.             ["Text Color"
  612.                 , "guiwhite"],
  613.             
  614.             /* Teams */
  615.             ["Your tank in FFA, Left team in 2TDM, Top left team in 4TDM" 
  616.                 , "blue"],
  617.             ["Enemy tanks in FFA, Bottom left team in 4TDM"
  618.                 , "red"],
  619.             ["Right team in 2TDM, Top right team in 4TDM, Score Bar"
  620.                 , "green"],
  621.             ["Bottom right team in 4TDM"
  622.                 , "magenta"],
  623.             
  624.             /* Shapes */
  625.             ["Rocks, Barrels, Bar Backgrounds"
  626.                 , "grey"],
  627.             ["Squares, Level Bar"
  628.                 , "gold"],
  629.             ["Triangles"
  630.                 , "orange"],
  631.             ["Pentagons, Pentagon Nest Background"
  632.                 , "purple"],
  633.             ["Crashers"
  634.                 , "pink"],
  635.             ["Eggs, Minimap Background, Invulnerability Flash"
  636.                 , "vlgrey"],
  637.  
  638.             /* Bars under tanks/shapes/bosses/etc... */
  639.             ["Main Health Bar, Rare Polygons"
  640.                 , "lgreen"],
  641.             ["Shield/Regen Bar, Rare Polygons"
  642.                 , "teal"],
  643.  
  644.             /* Extras */
  645.             ["Arena Closers, Neutral Dominators"
  646.                 , "yellow"],
  647.             ["Rogue Palisades"
  648.                 , "dgrey"],
  649.             ["Unused"
  650.                 , "lavender"],
  651.             ["Unused"
  652.                 , "lgrey"],
  653.         ],
  654.     },
  655.  
  656.     methods: {
  657.         // this is needed because vue converts everything into a string once you change a value
  658.         // so the typeof operator won't work
  659.         getType(val) {
  660.             val = val.toString();
  661.             if (val === "true" || val === "false") {
  662.                 return "boolean";
  663.             }
  664.             if (!isNaN(val)) {
  665.                 return "number";
  666.             }
  667.             if (val[0] === "#") {
  668.                 return "color";
  669.             }
  670.         },
  671.  
  672.         // get the hexadecimal (#abc123) value for the given colorName in the themeColor table
  673.         // second optional argument is a themeObj to use in case you want to get a hex for a different theme
  674.         getHex(colorName, themeObj = this) {
  675.             return themeObj.config.themeColor.table[ this.colorNames.indexOf(colorName) ];
  676.         },
  677.  
  678.         // move to next tab in tabs array, and then wrap back around to beginning
  679.         changeTab() {
  680.             var tabs = ['editor', 'extras', 'savedThemes'];
  681.  
  682.             var currentTabIndex = tabs.indexOf( this.currentTab );
  683.  
  684.             var newTabIndex = currentTabIndex + 1;
  685.             if (newTabIndex === tabs.length) {
  686.                 newTabIndex = 0;
  687.             }
  688.  
  689.             this.currentTab = tabs[ newTabIndex ];
  690.         },
  691.  
  692.         // either changes the button's text for 3 seconds, 
  693.         // or starts a timer to ensure a button is held for 3 seconds before its functionality is run
  694.         indicateClicked(btnName) {
  695.             if (btnName === 'deleteTheme' || btnName === 'saveCurrentTheme') {
  696.                 pb.info('Hold button for 3 seconds to ' + btnName)
  697.                 // instead of a boolean, we want to use a numerical timestamp to make sure user holds click for 3 sec
  698.                 // to prevent stray click accidents
  699.                 this.buttonClickStartTime[btnName] = performance.now();
  700.             }
  701.             // button text depends on if true or false, this thus changes the button text for 3 seconds
  702.             else {
  703.                 this.wasButtonClicked[btnName] = true;
  704.                 setTimeout(() => {
  705.                     this.wasButtonClicked[btnName] = false;
  706.                 }, 1000 * 3);
  707.             }
  708.         },
  709.  
  710.         // export a theme as either a 'tiger' theme (using edn format) or 'arras' theme (json format, only contains themeColor changes)
  711.         exportTheme(type) {
  712.             var themeToExport = {};
  713.  
  714.             // 'tiger' themes are purposefully incompatible with 'arras' themes because we don't want people who are not familiar with tiger
  715.             // to become confused why a theme they got/found from someone else doesn't seem to work properly 
  716.             // (as the default arras custom theme input would only change colors and border, not any of the other graphical/gui properties)
  717.             // tiger themes look like this:
  718.             // TIGER_JSON{/* valid JSON */}
  719.             // this way it'll be easy in the future if we want to add in extra theme types like TIGER_BASE64/* valid base64 */ or TIGER_XML</* valid XML */>
  720.             if (type === 'TIGER_JSON') {
  721.                 themeToExport = {
  722.                     themeDetails: this.themeDetails,
  723.                     config: this.config,
  724.                 };
  725.  
  726.                 themeToExport = 'TIGER_JSON' + JSON.stringify(themeToExport);
  727.             }
  728.             else if (type === 'backwardsCompatible') {
  729.                 themeToExport = {
  730.                     name: this.themeDetails.name,
  731.                     author: this.themeDetails.author,
  732.                     content: {},
  733.                 };
  734.  
  735.                 for (var colorName of this.colorNames) {
  736.                     themeToExport.content[colorName] = this.getHex(colorName);
  737.                 }
  738.  
  739.                 themeToExport = JSON.stringify(themeToExport);
  740.             }
  741.             else {
  742.                 console.log('unsupported export theme type');
  743.                 return;
  744.             }
  745.  
  746.  
  747.             // copy to clipboard
  748.             GM_setClipboard(themeToExport);
  749.  
  750.             console.log('Exported the following theme:');
  751.             console.log(themeToExport);
  752.  
  753.             // use Prompt-Boxes library to notify user
  754.             pb.success('Copied to Clipboard!');
  755.         },
  756.  
  757.         // supports both types of arras themes as well as the new TIGER_JSON theme type
  758.         // this function only converts an imported theme string into a js object mirroring this.config/the game's Arras() object
  759.         // but importTheme calls a different function (applyTheme) that will take in a theme obj and change the game's visual properties
  760.         importTheme() {
  761.             var themeToImport = this.importedTheme;
  762.             themeToImport = themeToImport.trim();
  763.  
  764.             if (themeToImport === '') {
  765.                 pb.error('Enter theme in box to the left');
  766.                 return;
  767.             }
  768.  
  769.             // Tiger themes start with TIGER, and then _<datatype>, e.g. TIGER_JSON{valid json here}
  770.             if (themeToImport.startsWith('TIGER')) {
  771.                 if (themeToImport.startsWith('TIGER_JSON')) {
  772.                     // remove TIGER_JSON from start of string
  773.                     themeToImport = themeToImport.substring( 'TIGER_JSON'.length );
  774.                     themeToImport = JSON.parse(themeToImport);
  775.                 }
  776.                 else {
  777.                     console.log('invalid tiger theme format')
  778.                 }
  779.             }
  780.             // standard arras theme, either base64 or normal JSON
  781.             // use functions provided by CX to handle these
  782.             else {
  783.                 themeToImport = this.parseArrasTheme(themeToImport);
  784.  
  785.                 var newTheme = {
  786.                     themeDetails: {
  787.                         name: themeToImport.name,
  788.                         author: themeToImport.author,
  789.                     },
  790.                     config: {
  791.                         themeColor: {
  792.                             border: themeToImport.content.border,
  793.                             table: [],
  794.                         },
  795.                     },
  796.                 }
  797.  
  798.                 // add colors
  799.                 for (var colorName of this.colorNames) {
  800.                     var importedColorNameValue = themeToImport.content[colorName];
  801.                     (newTheme.config.themeColor.table).push( importedColorNameValue );
  802.                 }
  803.  
  804.                 // put the correctly formatted js object back into the themeToImport variable
  805.                 // to match the other branches of the if statement
  806.                 themeToImport = newTheme;
  807.             }
  808.  
  809.             /* At this point, themeToImport should contain a js object mirroring the structure of this.config */
  810.             console.log('Imported Theme has been parsed as:');
  811.             console.log(themeToImport)
  812.  
  813.             // clear the import theme textarea
  814.             this.importedTheme = '';
  815.  
  816.             // use the js object to change the game's colors
  817.             this.applyTheme(themeToImport);
  818.         },
  819.  
  820.         // takes in a themeObj, and changes the games visual properties using it
  821.         // be careful not to simply assign this.config to a new object, 
  822.         // because that will remove it being a reference to the actual game's Arras() object
  823.         // similarly, you can only directly change the atomic properties + arrays (not objects)
  824.         applyTheme(themeObj) {
  825.             // this function will create a new identical theme to remove reference to original theme object
  826.             // this prevents future theme modifications from screwing with the original theme
  827.             var newTheme = JSON.parse( JSON.stringify(themeObj) );
  828.  
  829.             this.themeDetails = newTheme.themeDetails;
  830.             
  831.             for (var category in newTheme.config) {
  832.                 for (var property in newTheme.config[category]) {
  833.                     this.config[category][property] = newTheme.config[category][property];
  834.                 }
  835.             }
  836.  
  837.             pb.success('Theme Imported!');
  838.         },
  839.         
  840.         // saves the current settings in the editor/extras as a new theme in savedThemes
  841.         saveCurrentTheme() {
  842.             // perforance.now uses milliseconds, so we divide by 1000 to convert to seconds
  843.             var timeButtonWasHeldFor = (performance.now() - this.buttonClickStartTime.saveCurrentTheme) / 1000;
  844.  
  845.             // button held for less than 3 sec
  846.             if (timeButtonWasHeldFor < 3) {
  847.                 // clear the hold for 3 sec notification
  848.                 pb.clear();
  849.                 return;
  850.             }
  851.             // no author/name entered
  852.             if (this.themeDetails.author.trim() === '' || this.themeDetails.name.trim() === '') {
  853.                 pb.error('Enter theme name and author!');
  854.                 return;
  855.             }
  856.             
  857.             // actual theme saving stuff
  858.             var themeToSave = {
  859.                 themeDetails: this.themeDetails,
  860.                 config: this.config,
  861.             };
  862.  
  863.             // create new identical theme to remove reference to the 'this' obj
  864.             // so that future changes won't modify the theme being saved
  865.             themeToSave = JSON.parse( JSON.stringify(themeToSave) );
  866.  
  867.             // add new theme to start of the list
  868.             this.savedThemes.unshift(themeToSave);
  869.  
  870.             pb.success('Saved ' + themeToSave.themeDetails.name + ' by ' + themeToSave.themeDetails.author);
  871.         },
  872.         // delete a theme previously saved
  873.         // only allow this function to complete if user holds down click for 3 seconds
  874.         deleteSavedTheme(indexInSavedThemes) {
  875.             // perforance.now uses milliseconds, so we divide by 1000 to convert to seconds
  876.             var timeButtonWasHeldFor = (performance.now() - this.buttonClickStartTime.deleteTheme) / 1000;
  877.             
  878.             if (timeButtonWasHeldFor < 3) {
  879.                 // clear the hold click notification
  880.                 pb.clear();
  881.                 return;
  882.             }
  883.  
  884.             var deletedThemeDetails = this.savedThemes[indexInSavedThemes].themeDetails;
  885.             // splice will do the actual deleting
  886.             this.savedThemes.splice(indexInSavedThemes, 1);
  887.             pb.success('Deleted ' + deletedThemeDetails.name + ' by ' + deletedThemeDetails.author);
  888.         },
  889.  
  890.  
  891.  
  892.         // Thank you to CX for providing this:
  893.         // converts standard arras themes (BOTH base64 and JSON) into a JSON object,
  894.         // in the same format as the standard arras JSON themes { name: "", author: "", content: {} }
  895.         parseArrasTheme(string){
  896.             // Compact Base64 Theme Format
  897.             // - stored as a regular base64 string without trailing equal signs
  898.             // name + \0 + author + \0 + border byte + (RGB colors)*
  899.         
  900.             try {
  901.             let stripped = string.replace(/\s+/g, '')
  902.             if (stripped.length % 4 == 2)
  903.                 stripped += '=='
  904.             else if (stripped.length % 4 == 3)
  905.                 stripped += '='
  906.             let data = atob(stripped)
  907.         
  908.             let name = 'Unknown Theme', author = ''
  909.             let index = data.indexOf('\x00')
  910.             if (index === -1) return null
  911.             name = data.slice(0, index) || name
  912.             data = data.slice(index + 1)
  913.             index = data.indexOf('\x00')
  914.             if (index === -1) return null
  915.             author = data.slice(0, index) || author
  916.             data = data.slice(index + 1)
  917.             let border = data.charCodeAt(0) / 0xff
  918.             data = data.slice(1)
  919.             let paletteSize = Math.floor(data.length / 3)
  920.             if (paletteSize < 2) return null
  921.             let colorArray = []
  922.             for (let i = 0; i < paletteSize; i++) {
  923.                 let red = data.charCodeAt(i * 3)
  924.                 let green = data.charCodeAt(i * 3 + 1)
  925.                 let blue = data.charCodeAt(i * 3 + 2)
  926.                 let color = (red << 16) | (green << 8) | blue
  927.                 colorArray.push('#' + color.toString(16).padStart(6, '0'))
  928.             }
  929.             let content = {
  930.                 teal:     colorArray[0],
  931.                 lgreen:   colorArray[1],
  932.                 orange:   colorArray[2],
  933.                 yellow:   colorArray[3],
  934.                 lavender: colorArray[4],
  935.                 pink:     colorArray[5],
  936.                 vlgrey:   colorArray[6],
  937.                 lgrey:    colorArray[7],
  938.                 guiwhite: colorArray[8],
  939.                 black:    colorArray[9],
  940.         
  941.                 blue:     colorArray[10],
  942.                 green:    colorArray[11],
  943.                 red:      colorArray[12],
  944.                 gold:     colorArray[13],
  945.                 purple:   colorArray[14],
  946.                 magenta:  colorArray[15],
  947.                 grey:     colorArray[16],
  948.                 dgrey:    colorArray[17],
  949.                 white:    colorArray[18],
  950.                 guiblack: colorArray[19],
  951.         
  952.                 paletteSize,
  953.                 border,
  954.             }
  955.             return { name, author, content }
  956.             } catch (e) {}
  957.             try {
  958.             let output = JSON.parse(string)
  959.             if (typeof output !== 'object')
  960.                 return null
  961.             let { name = 'Unknown Theme', author = '', content } = output
  962.         
  963.             for (let colorHex of [
  964.                 content.teal,
  965.                 content.lgreen,
  966.                 content.orange,
  967.                 content.yellow,
  968.                 content.lavender,
  969.                 content.pink,
  970.                 content.vlgrey,
  971.                 content.lgrey,
  972.                 content.guiwhite,
  973.                 content.black,
  974.         
  975.                 content.blue,
  976.                 content.green,
  977.                 content.red,
  978.                 content.gold,
  979.                 content.purple,
  980.                 content.magenta,
  981.                 content.grey,
  982.                 content.dgrey,
  983.                 content.white,
  984.                 content.guiblack,
  985.             ]) {
  986.                 if (!/^#[0-9a-fA-F]{6}$/.test(colorHex))
  987.                 return null
  988.             }
  989.         
  990.             return {
  991.                 isJSON: true,
  992.                 name: (typeof name === 'string' && name) || 'Unknown Theme',
  993.                 author: (typeof author === 'string' && author) || '',
  994.                 content,
  995.             }
  996.             } catch (e) {}
  997.         
  998.             return null
  999.         },
  1000.  
  1001.  
  1002.         // make the game colors random
  1003.         randomizeColors() {
  1004.             function getRandomColor() {
  1005.                 const chars = "0123456789ABCDEF";
  1006.                 let color = "#";
  1007.                 
  1008.                 for (let i = 0; i < 6; ++i) {
  1009.                     let charIndex = Math.floor(Math.random() * 16);
  1010.                     color += chars[charIndex];
  1011.                 }
  1012.                 return color;
  1013.             }
  1014.  
  1015.             const numColors = this.colorNames.length;
  1016.             const newColors = [];
  1017.             for (let i = 0; i < numColors; i++) {
  1018.                 newColors.push( getRandomColor() );
  1019.             }
  1020.             this.config.themeColor.table = newColors;
  1021.             console.log(`Game colors changed to [${newColors.join(", ")}]`);
  1022.         }
  1023.     },
  1024.  
  1025.     // function run when Vue instance is first mounted onto the DOM
  1026.     // loads savedThemes from
  1027.     mounted() {
  1028.         // used in case it's users first time using tiger, which means they have no saved themes yet
  1029.         // see default theme authors at this link: https://discord.com/channels/372930441826533386/379175293149118465/398373439133712384
  1030.         var defaultSavedThemes = [
  1031.             {"themeDetails":{"name":"Light Colors","author":"Neph"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#7adbbc","#b9e87e","#e7896d","#fdf380","#b58efd","#ef99c3","#e8ebf7","#aa9f9e","#ffffff","#484848","#3ca4cb","#8abc3f","#e03e41","#efc74b","#8d6adf","#cc669c","#a7a7af","#726f6f","#dbdbdb","#000000"],"border":0.5}}}
  1032.             ,
  1033.             {"themeDetails":{"name":"Dark Colors","author":"Neph"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#8975b7","#1ba01f","#c46748","#b2b224","#7d56c5","#b24fae","#1e1e1e","#3c3a3a","#000000","#e5e5e5","#379fc6","#30b53b","#ff6c6e","#ffc665","#9673e8","#c8679b","#635f5f","#73747a","#11110f","#ffffff"],"border":0.5}}}
  1034.             ,
  1035.             {"themeDetails":{"name":"Natural","author":"Neph"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#76c1bb","#aad35d","#e09545","#ffd993","#939fff","#d87fb2","#c4b6b6","#7f7f7f","#ffffff","#373834","#4f93b5","#00b659","#e14f65","#e5bf42","#8053a0","#b67caa","#998f8f","#494954","#a5b2a5","#000000"],"border":0.5}}}
  1036.             ,
  1037.             {"themeDetails":{"name":"Classic","author":"Neph"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#8efffb","#85e37d","#fc7676","#ffeb8e","#b58eff","#f177dd","#cdcdcd","#999999","#ffffff","#525252","#00b0e1","#00e06c","#f04f54","#ffe46b","#768cfc","#be7ff5","#999999","#545454","#c0c0c0","#000000"],"border":0.5}}}
  1038.             ,
  1039.             /* https://discord.com/channels/372930441826533386/380128318076223489/398339465166192641 */
  1040.             {"themeDetails":{"name":"Forest","author":"Sterlon"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#884aa5","#8c9b3e","#d16a80","#97596d","#499855","#60294f","#ddc6b8","#7e949e","#ffffe8","#665750","#807bb6","#a1be55","#e5b05b","#ff4747","#bac674","#ba78d1","#998866","#529758","#7da060","#000000"],"border":0.5}}}
  1041.             ,
  1042.             /* https://discord.com/channels/372930441826533386/380128318076223489/398358280784838656 */
  1043.             {"themeDetails":{"name":"Midnight","author":"uoiea"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#2b9098","#4baa5d","#345678","#cdc684","#89778e","#a85c90","#cccccc","#a7b2b7","#bac6ff","#091f28","#123455","#098765","#000013","#566381","#743784","#b29098","#555555","#649eb7","#444444","#000000"],"border":0.5}}}
  1044.             ,
  1045.             /* https://discord.com/channels/372930441826533386/380128318076223489/398368953921175553 */
  1046.             {"themeDetails":{"name":"Snow","author":"Deolveopoler"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#89bfba","#b5d17d","#e5e0e0","#b5bbe5","#939fff","#646de5","#b2b2b2","#7f7f7f","#ffffff","#383835","#aeaeff","#aeffae","#ffaeae","#ffffff","#c3c3d8","#ffb5ff","#cccccc","#a0a0b2","#f2f2f2","#000000"],"border":0.5}}}
  1047.             ,
  1048.             /* https://discord.com/channels/372930441826533386/380128318076223489/398633942661595147 */
  1049.             {"themeDetails":{"name":"Coral Reef","author":"Celesteα"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#76eec6","#41aa78","#ff7f50","#ffd250","#dc3388","#fa8072","#8b8886","#bfc1c2","#ffffff","#12466b","#4200ae","#0d6338","#dc4333","#fea904","#7b4bab","#5c246e","#656884","#d4d7d9","#3283bc","#000000"],"border":0.5}}}
  1050.             ,
  1051.             /* https://discord.com/channels/372930441826533386/380128318076223489/398638773392375819 */
  1052.             {"themeDetails":{"name":"Badlands","author":"Incognious"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#f9cb9c","#f1c232","#38761d","#e69138","#b7b7b7","#78866b","#6aa84f","#b7b7b7","#a4c2f4","#000000","#0c5a9e","#6e8922","#5b0000","#783f04","#591c77","#20124d","#2f1c16","#999999","#543517","#ffffff"],"border":0.5}}}
  1053.             ,
  1054.             /* https://discord.com/channels/372930441826533386/380128318076223489/398631247879995414 */
  1055.             {"themeDetails":{"name":"Bleach","author":"definitelynot."},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#00ffff","#00ff00","#ff3200","#ffec00","#ff24a7","#ff3cbd","#fff186","#918181","#f1f1f1","#5f5f5f","#0025ff","#00ff00","#ff0000","#fffa23","#3100ff","#d4d3d3","#838383","#4c4c4c","#fffefe","#000000"],"border":0.5}}}
  1056.             ,
  1057.             /* https://discord.com/channels/372930441826533386/380128318076223489/398626876249210881 */
  1058.             {"themeDetails":{"name":"Space","author":"Call"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#4788f3","#af1010","#ff0000","#82f850","#ffffff","#57006c","#ffffff","#272727","#000000","#7f7f7f","#0e1b92","#0aeb80","#c2b90a","#3e7e8c","#285911","#a9707e","#6f6a68","#2d0738","#000000","#ffffff"],"border":0.5}}}
  1059.             ,
  1060.             /* https://discord.com/channels/372930441826533386/380128318076223489/398635479022567435 */
  1061.             {"themeDetails":{"name":"Nebula","author":"Deleted User"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#38b06e","#22882e","#d28e7f","#d5d879","#e084eb","#df3e3e","#f0f2cc","#7d7d7d","#c2c5ef","#161616","#9274e6","#89f470","#e08e5d","#ecdc58","#58cbec","#ea58ec","#7e5713","#303030","#555555","#ffffff"],"border":0.5}}}
  1062.             ,
  1063.             {"themeDetails":{"name":"Pumpkin Skeleton","author":"Road"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#721970","#ff6347","#1b713a","#fdf380","#941100","#194417","#1b713a","#aa9f9e","#fed8b1","#484848","#3ca4cb","#76eec6","#f04f54","#1b713a","#1b713a","#cc669c","#ffffff","#726f6f","#ff9b58","#000000"],"border":"3.3"}}} /* Its supposed to be in quotes (Pumpkin Skeleton border) */
  1064.             ,
  1065.             {"themeDetails":{"name":"Solarized Dark","author":"Road"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#b58900","#2aa198","#cb4b16","#657b83","#eee8d5","#d33682","#e0e2e4","#073642","#ffffff","#000000","#268bd2","#869600","#dc322f","#b58900","#678cb1","#a082bd","#839496","#073642","#002b36","#000000"],"border":0.5}}}
  1066.             ,
  1067.             {"themeDetails":{"name":"Desert","author":"Road"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#783b31","#f5deb3","#e17d70","#dfab79","#b9a9bb","#c1938e","#a88e80","#ccb78e","#ffffff","#555555","#007ba7","#2e8b57","#e44d2e","#ddcf70","#5b968f","#856088","#989b9d","#9e8171","#ceb385","#000000"],"border":0.5}}}
  1068.             ,
  1069.             {"themeDetails":{"name":"Eggplant","author":"Road"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#e96ba8","#78d4b6","#d6100f","#a39e9b","#e7e9db","#e96ba8","#8d8687","#2b1a29","#ffffff","#2b1a29","#06b6ef","#48b685","#ef6155","#f99b15","#815ba4","#fec418","#b9b6b0","#40113f","#50374d","#000000"],"border":0.5}}}
  1070.             ,
  1071.             {"themeDetails":{"name":"Gruvbox","author":"Road"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#83a598","#8ec07c","#d65d0e","#d79920","#d3869b","#d3869b","#bdae93","#aa9f9e","#ebddd2","#000000","#458588","#98971a","#cc241d","#d79920","#417b58","#b16186","#928374","#000000","#282828","#000000"],"border":"0.6"}}}
  1072.             ,
  1073.             {"themeDetails":{"name":"Depths","author":"Skrialik"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"barChunk":5,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"darkBorders":false,"neon":false,"coloredNest":false},"gui":{"enabled":true,"alcoveSize":200,"spacing":20},"themeColor":{"table":["#fec700","#b51a00","#ffdbd8","#573400","#b58efd","#cde9b5","#cbf1ff","#aa9f9e","#ffffff","#000000","#002e7a","#375719","#000000","#fff2d5","#f4a4c0","#561029","#c1c1c1","#7a7a7a","#434343","#ffffff"],"border":0.7019607843137254}}}
  1074.             ,
  1075.  
  1076.             // Theme contest winners below, except Solarized Dark and Eggplant which were already included
  1077.  
  1078.             {"themeDetails":{"name":"Retro","author":"Damocles"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"renderNames":true,"censorNames":false,"darkBorders":false,"neon":false,"alternateBorder":false,"coloredNest":false},"gui":{"enabled":true,"scale":1,"alcoveSize":200,"spacing":20,"leaderboard":true,"barChunk":5},"themeColor":{"table":["#ffff62","#06bf3b","#318e95","#937d00","#eee8d5","#e72c76","#c8d8e7","#073642","#ffffff","#000000","#2c3eb9","#efb209","#b91234","#82dfe4","#1e616a","#8b124c","#839496","#76b68b","#081e20","#000000"],"border":0.7529411764705882}}}
  1079.             ,
  1080.             {"themeDetails":{"name":"Pastel","author":"Damocles"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"renderNames":true,"censorNames":false,"darkBorders":false,"neon":false,"alternateBorder":false,"coloredNest":false},"gui":{"enabled":true,"scale":1,"alcoveSize":200,"spacing":20,"leaderboard":true,"barChunk":5},"themeColor":{"table":["#ffff98","#8affb2","#d8b384","#ffeb76","#eee8d5","#ff8dbd","#f3f0d7","#073642","#ffffb5","#675240","#397697","#3ff7a1","#f65f64","#d2b869","#81654a","#a75299","#c1c1c1","#8da996","#f5dba7","#000000"],"border":0.7529411764705882}}}
  1081.             ,
  1082.             {"themeDetails":{"name":"Discord","author":"Damocles"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"renderNames":true,"censorNames":false,"darkBorders":false,"neon":false,"alternateBorder":false,"coloredNest":false},"gui":{"enabled":true,"scale":1,"alcoveSize":200,"spacing":20,"leaderboard":true,"barChunk":5},"themeColor":{"table":["#d53f3f","#29b399","#ff2828","#ffeb8e","#b58eff","#ff68ff","#cdcdcd","#999999","#e0e0e0","#000000","#7289da","#43b581","#f04747","#ffe800","#5c79ff","#faa419","#999999","#545454","#1e2124","#36393e"],"border":0.7529411764705882}}}
  1083.             ,
  1084.             {"themeDetails":{"name":"WR Sheet Theme","author":"alettera"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"renderNames":true,"censorNames":false,"darkBorders":false,"neon":false,"alternateBorder":false,"coloredNest":false},"gui":{"enabled":true,"scale":1,"alcoveSize":200,"spacing":20,"leaderboard":true,"barChunk":5},"themeColor":{"table":["#fd9827","#689168","#bb8e75","#f5deba","#9e8171","#b35757","#eae0c9","#aa9f9e","#ffffff","#795548","#6bb2bf","#68c56c","#b86358","#d8bc67","#6e78aa","#846187","#868788","#726f6f","#cbb690","#000000"],"border":0.2980392156862745}}}
  1085.             ,
  1086.             {"themeDetails":{"name":"Descent","author":"Rog456"},"config":{"graphical":{"screenshotMode":false,"borderChunk":6,"compensationScale":1.114,"lowGraphics":false,"alphaAnimations":true,"inversedRender":true,"miterStars":true,"miter":false,"fontSizeOffset":0,"shieldbars":false,"renderGrid":true,"renderNames":true,"censorNames":false,"darkBorders":false,"neon":false,"alternateBorder":false,"coloredNest":false},"gui":{"enabled":true,"scale":1,"alcoveSize":200,"spacing":20,"leaderboard":true,"barChunk":5},"themeColor":{"table":["#95cecf","#ffa5ff","#bc8989","#ffffb2","#000000","#bd91c4","#7f7360","#000000","#ffffff","#000000","#ababab","#a69768","#545454","#fde7a5","#878777","#85a686","#c4bb9d","#2e2e32","#3b3b37","#000000"],"border":0}}}
  1087.             ,
  1088.         ];
  1089.  
  1090.         defaultSavedThemes = JSON.stringify(defaultSavedThemes);
  1091.  
  1092.         // localStorage returns a string, and I think GM_ storage does too?
  1093.         var tigerSavedThemes = GM_getValue('tigerSavedThemes', defaultSavedThemes);
  1094.         tigerSavedThemes = JSON.parse(tigerSavedThemes);
  1095.  
  1096.         // load the stored themes into our savedThemes variable
  1097.         this.savedThemes = tigerSavedThemes;
  1098.  
  1099.         console.log('Retrieved the following themes from storage:');
  1100.         console.log(tigerSavedThemes);
  1101.  
  1102.         /*----------*/
  1103.         // tigerCurrentTheme stuff starts here:
  1104.  
  1105.         // first load the most up-to-date Arras() into config, 
  1106.         // in case new features were added recently that aren't in the saved currentTheme
  1107.         this.config = Arras();
  1108.  
  1109.         // Next, load the 'tigerCurrentTheme' if there is one, else use the current game colors
  1110.         // this holds the theme that the user had loaded on their previous game session
  1111.         var tigerCurrentTheme = GM_getValue( 'tigerCurrentTheme', JSON.stringify(Arras()) );
  1112.         tigerCurrentTheme = JSON.parse(tigerCurrentTheme);
  1113.  
  1114.         // do same for themeDetails
  1115.         var defaultTigerCurrentThemeDetails = {name: '', author: ''};
  1116.         defaultTigerCurrentThemeDetails =  JSON.stringify(defaultTigerCurrentThemeDetails);
  1117.         var tigerCurrentThemeDetails = GM_getValue( 'tigerCurrentThemeDetails', defaultTigerCurrentThemeDetails);
  1118.         tigerCurrentThemeDetails = JSON.parse(tigerCurrentThemeDetails);
  1119.  
  1120.         // this is to get the input to applyTheme into the right format so it will work properly
  1121.         tigerCurrentTheme = {
  1122.             themeDetails: tigerCurrentThemeDetails,
  1123.             config: tigerCurrentTheme,
  1124.         };
  1125.  
  1126.         // finally apply the saved theme if there is one to the actual game colors (and this.config as well)
  1127.         this.applyTheme(tigerCurrentTheme);
  1128.  
  1129.         console.log('Retrieved and applied this current theme from storage:');
  1130.         console.log(tigerCurrentTheme);
  1131.     },
  1132.  
  1133.     // store stuff to storage when they change
  1134.     watch: {
  1135.         // re-save this.savedThemes array to storage's tigerSavedThemes key whenever this.savedThemes changes
  1136.         savedThemes(newVal) {
  1137.             // save new savedThemes array to storage
  1138.             GM_setValue( 'tigerSavedThemes', JSON.stringify(newVal) );
  1139.  
  1140.             console.log('Saved the following savedThemes to storage:');
  1141.             console.log(newVal);
  1142.         },
  1143.  
  1144.         // re-save the themeDetails whenever they change
  1145.         // deep:true is because we want to detect if the object's keys change, not if
  1146.         // the object itself is changed to be a reference to a different object
  1147.         themeDetails: {
  1148.             deep: true,
  1149.             handler: function(newVal) {
  1150.                 // save new themeDetails object to storage
  1151.                 GM_setValue( 'tigerCurrentThemeDetails', JSON.stringify(newVal) );
  1152.  
  1153.                 console.log('Saved the following currentThemeDetails to storage:');
  1154.                 console.log(newVal);
  1155.             },
  1156.         },
  1157.     },
  1158.  
  1159.     // since config is so heavily nested, the deep:true stuff isn't working for it 
  1160.     // (in the userscript and game at least, the website seems to work fine for some reason (maybe because website's config isn't a reference to the actual game config object)??)
  1161.     // so instead, we grab and store its value from the Arras() object right before the page unloads (this won't work for the website though because it's Arras() object doesn't change)
  1162.     created() {
  1163.         // need to use Arras() object because Vue instance won't exist at this point in time
  1164.         window.addEventListener("beforeunload", function() {
  1165.             GM_setValue('tigerCurrentTheme', JSON.stringify(Arras()) );
  1166.  
  1167.             console.log('Saved the following currentTheme to storage:');
  1168.             console.log( JSON.stringify(Arras()) );
  1169.         });
  1170.     },
  1171. });
  1172.  
  1173. }
  1174.  
  1175.