First patch

Added some color, added import from file and added stuff to not roll a single element.

src/index.html

@@ -37,6 +37,9 @@
             <div id="options">
                 <input type="checkbox" id="remFromBOnMatch" onclick="updateOptions()"/><label for="remFromBOnMatch">Remove element from group B when it has a match</label>
                 <br/>
+                <input type="file" id="fileImport"/>
+                <button type="button" onclick="importFile()">Import from file</button>
+                <br/>
                 <button class="start" onclick="reroll()">Finish</button>
                 <button class="start" onclick="reset()">Clear ALL data</button>
             </div>

src/script/script.js

@@ -93,8 +93,8 @@ function saveGroupB(){
 
 
 /* Element manipulation */
-function addGroupA(){
+function addGroupA(fromfile){
-    var inp=$("#groupAInput").val();
+    var inp=fromfile?fromfile:$("#groupAInput").val();
     var id=guid();
 
     var el={id: id, val: inp};
@@ -107,8 +107,8 @@ function addGroupA(){
     //add to ui
     $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+inp+"</span></li>").hide().appendTo("#groupAList").slideDown();
 }
-function addGroupB(){
+function addGroupB(fromfile){
-    var inp=$("#groupBInput").val();
+    var inp=fromfile?fromfile:$("#groupBInput").val();
     var id=guid();
 
     var el={id: id, val: inp};
@@ -163,7 +163,8 @@ function setupRoll(){
             var rotLabel=((i-1)*degA)+(degA/2);
             $("<div class=\"roller__slicer\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerA");
             $("<div class=\"roller__label\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").appendTo("#rollerA");
-        })
+        });
+        $("#rollerA").css("background", "#674B6F");
 
         //set up roller B
         $("#rollerB").html("");
@@ -177,6 +178,7 @@ function setupRoll(){
             $("<div class=\"roller__slicer roller__slicer__flip\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerB");
             $("<div class=\"roller__label roller__label__flip\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").appendTo("#rollerB");
         });
+        $("#rollerB").css("background", "#9AA05B");
 
         if(countA%2!==0){
             baseRotateA=-degA/2;
@@ -231,11 +233,15 @@ function finishRoll(){
 }
 
 function reroll(){
-    if(dataStore.groupA.length){
+    if(dataStore.groupA.length>1){
         $("#roll_results").slideUp();
         setupRoll();
     }
     else{
+        dataStore.assignments.push({"a": dataStore.groupA[0], "b": dataStore.groupB[0]});
+        dataStore.groupA=[];
+        dataStore.groupB=[];
+        saveDataStore();
         showResults();
     }
 }
@@ -257,4 +263,21 @@ function showResults(){
 function reset(){
     localStorage.removeItem("dataStore");
     location.reload();
+}
+
+function importFile(){
+    var file=$("#fileImport")[0].files[0];
+    var fr=new FileReader();
+    fr.onload=function(){
+        //load string
+        var map=JSON.parse(fr.result);
+        $.each(map.a, (i, val) => {
+            addGroupA(val);
+        });
+        $.each(map.b, (i, val) => {
+            addGroupB(val);
+        });
+        saveDataStore();
+    };
+    fr.readAsText(file, "UTF-8");
 }

src/style/style.css

@@ -42,8 +42,8 @@ ul {
   position: absolute;
   top: 45%;
   bottom: 45%;
-  left: -10em;
+  left: -7em;
-  right: -10em;
+  right: -7em;
   background: black;
   z-index: 5;
   clip-path: polygon(0% 50%, 30% 0%, 30% 30%, 70% 30%, 70% 0%, 100% 50%, 70% 100%, 70% 70%, 30% 70%, 30% 100%);
@@ -76,6 +76,7 @@ ul {
   color: white;
   text-align: center;
   transform-origin: -125% center;
+  font-weight: bolder;
 }
 .roller__label__flip {
   top: 48%;
@@ -99,7 +100,7 @@ ul {
   top: 10%;
   left: 30%;
   right: 30%;
-  height: 15%;
+  height: 20%;
   z-index: 10;
   background: linear-gradient(30deg, green, darkgreen);
   background-size: 200% 200%;

src/style/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAGR;EACI;IACI;;;AAGR;EACI;IACI;;;AAGR;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAEJ;EACI","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;;AAGR;EACI;IACI;;;AAGR;EACI;IACI;;;AAGR;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAEJ;EACI","file":"style.css"}

src/style/style.scss

@@ -44,8 +44,8 @@ ul{
         position: absolute;
         top: 45%;
         bottom: 45%;
-        left: -10em;
+        left: -7em;
-        right: -10em;
+        right: -7em;
         background: black;
         z-index: 5;
         clip-path: polygon(0% 50%, 30% 0%, 30% 30%, 70% 30%, 70% 0%, 100% 50%, 70% 100%, 70% 70%, 30% 70%, 30% 100%);
@@ -80,6 +80,7 @@ ul{
         color: white;
         text-align: center;
         transform-origin: -125% center;
+        font-weight: bolder;
     }
     &__label__flip{
         top: 48%;
@@ -105,7 +106,7 @@ ul{
         top: 10%;
         left: 30%;
         right: 30%;
-        height: 15%;
+        height: 20%;
         z-index: 10;
         background: linear-gradient(30deg, green, darkgreen);
         background-size: 200% 200%;

test/testimport.json

@@ -0,0 +1,16 @@
+{
+    "a":[
+        "Osz1",
+        "Osz2",
+        "Osz3",
+        "Osz4",
+        "Osz5"
+    ],
+    "b":[
+        "Orsz1",
+        "Orsz2",
+        "Orsz3",
+        "Orsz4",
+        "Orsz5"
+    ]
+}