Reorderable queue

Drag support for reordering queue. A bit glitchy sometimes.

actions.js

@@ -4,7 +4,7 @@ import { unlockAchieve, unlockFeat } from './achieve.js';
 import { races, genus_traits, randomMinorTrait, cleanAddTrait, biomes } from './races.js';
 import { defineResources, loadMarket, spatialReasoning, resource_values, atomic_mass } from './resources.js';
 import { loadFoundry } from './jobs.js';
-import { defineGarrison, buildGarrison, armyRating, challenge_multiplier } from './civics.js';
+import { defineGarrison, buildGarrison, armyRating, challenge_multiplier, dragQueue } from './civics.js';
 import { spaceTech, interstellarTech, space, deepSpace } from './space.js';
 import { renderFortress, fortressTech } from './portal.js';
 import { arpa, gainGene } from './arpa.js';
@@ -9667,6 +9667,7 @@ export function setAction(c_action,action,type,old){
                                             }
                                             if (global.queue.queue.length < max_queue){
                                                 global.queue.queue.push({ id: c_action.id, action: action, type: type, label: typeof c_action.title === 'string' ? c_action.title : c_action.title(), cna: false });
+                                                dragQueue();
                                             }
                                         }
                                         break;

civics.js

@@ -2,6 +2,7 @@ import { global, vues, poppers, messageQueue, clearStates, modRes, save, keyMult
 import { unlockAchieve, unlockFeat, checkAchievements } from './achieve.js';
 import { races, racialTrait } from './races.js';
 import { loc } from './locale.js';
+//import * as drag from './lib/html5sortable.es.js';
 
 // Sets up government in civics tab
 export function defineGovernment(){
@@ -37,10 +38,10 @@ export function buildQueue(){
     $('#buildQueue').empty();
     $('#buildQueue').append($('<h2 class="has-text-success is-sr-only">Building Queue</h2>'));
 
-    let queue = $(`<div class="buildList"></div>`);
+    let queue = $(`<ul class="buildList"></ul>`);
     $('#buildQueue').append(queue);
 
-    queue.append($(`<a class="queued" v-bind:class="{ 'has-text-danger': item.cna }" v-for="(item, index) in queue" @click="remove(index)">{{ item.label }}</a>`));
+    queue.append($(`<li v-for="(item, index) in queue"><a class="queued" v-bind:class="{ 'has-text-danger': item.cna }" @click="remove(index)">{{ item.label }}</a></li>`));
 
     vues['builld_queue'] = new Vue({
         el: '#buildQueue',
@@ -51,6 +52,7 @@ export function buildQueue(){
             }
         }
     });
+    dragQueue();
 }
 
 function taxRates(govern){
@@ -987,6 +989,16 @@ export function challenge_multiplier(value){
     }
 }
 
+export function dragQueue(){
+    sortable('#buildQueue .buildList')[0].addEventListener('sortupdate', function(e){
+        let order = global.queue.queue;
+        var tmp = order[e.detail.origin.elementIndex];
+        order[e.detail.origin.elementIndex] = order[e.detail.destination.elementIndex];
+        order[e.detail.destination.elementIndex] = tmp;
+        global.queue.queue = order;
+    });
+}
+
 function warhead(){
     Object.keys(vues).forEach(function (v){
         vues[v].$destroy();

evolved.less

@@ -206,7 +206,12 @@ a {
         h2 {
             border-bottom: solid .0625rem;
         }
-        .queued:not(:last-child):after {
+        li {
+            display: inline-block;
+            height: 1rem;
+            padding: 0 .25rem 0 0;
+        }
+        li:not(:last-child) .queued:after {
             content: " -> "
         }
     }

index.html

@@ -12,6 +12,7 @@
     <script src="https://unpkg.com/[email protected]/dist/buefy.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script>
     <script src="lib/lz-string.min.js"></script>
+    <script src="lib/html5sortable.min.js"></script>
     <script src="vars.js" type="module"></script>
     <script src="locale.js" type="module"></script>
     <script src="achieve.js" type="module"></script>