Done

It works as it should work. It isn't the prettiest at some places, but it will do it.

fortuneRoundtable.sublime-workspace

@@ -27,25 +27,7 @@
 			"file": "src/index.html",
 			"settings":
 			{
-				"buffer_size": 3555,
+				"buffer_size": 4208,
-				"encoding": "UTF-8",
-				"line_ending": "Windows"
-			}
-		},
-		{
-			"file": "src/script/script.js",
-			"settings":
-			{
-				"buffer_size": 6140,
-				"encoding": "UTF-8",
-				"line_ending": "Windows"
-			}
-		},
-		{
-			"file": "src/style/style.scss",
-			"settings":
-			{
-				"buffer_size": 2227,
 				"encoding": "UTF-8",
 				"line_ending": "Windows"
 			}
@@ -83,10 +65,19 @@
 	},
 	"expanded_folders":
 	[
-		"/home/gergo/Documents/FortuneRoundtable"
+		"/home/gergo/Documents/FortuneRoundtable",
+		"/home/gergo/Documents/FortuneRoundtable/src",
+		"/home/gergo/Documents/FortuneRoundtable/src/script",
+		"/home/gergo/Documents/FortuneRoundtable/src/style"
 	],
 	"file_history":
 	[
+		"/home/gergo/Documents/FortuneRoundtable/build/index.html",
+		"/home/gergo/Documents/FortuneRoundtable/build/onefile.html",
+		"/home/gergo/Documents/FortuneRoundtable/src/style/style.scss",
+		"/home/gergo/Documents/FortuneRoundtable/src/script/script.js",
+		"/home/gergo/Documents/FortuneRoundtable/src/index.html",
+		"/home/gergo/Documents/FortuneRoundtable/src/script/jquery.fittext.js",
 		"/H/Munkák/FortuneRoundtable/README.md",
 		"/H/Munkák/FortuneRoundtable/src/script/jquery-3.3.1.min.js"
 	],
@@ -128,7 +119,7 @@
 	"groups":
 	[
 		{
-			"selected": 2,
+			"selected": 0,
 			"sheets":
 			[
 				{
@@ -137,15 +128,15 @@
 					"semi_transient": false,
 					"settings":
 					{
-						"buffer_size": 3555,
+						"buffer_size": 4208,
 						"regions":
 						{
 						},
 						"selection":
 						[
 							[
-								3555,
+								0,
-								3555
+								0
 							]
 						],
 						"settings":
@@ -155,69 +146,7 @@
 							"translate_tabs_to_spaces": true
 						},
 						"translation.x": 0.0,
-						"translation.y": 674.0,
+						"translation.y": 0.0,
-						"zoom_level": 1.0
-					},
-					"stack_index": 2,
-					"type": "text"
-				},
-				{
-					"buffer": 1,
-					"file": "src/script/script.js",
-					"semi_transient": false,
-					"settings":
-					{
-						"buffer_size": 6140,
-						"regions":
-						{
-						},
-						"selection":
-						[
-							[
-								6070,
-								6070
-							]
-						],
-						"settings":
-						{
-							"syntax": "Packages/JavaScript/JavaScript.sublime-syntax",
-							"tab_size": 4,
-							"translate_tabs_to_spaces": true,
-							"word_wrap": true
-						},
-						"translation.x": 0.0,
-						"translation.y": 2866.0,
-						"zoom_level": 1.0
-					},
-					"stack_index": 1,
-					"type": "text"
-				},
-				{
-					"buffer": 2,
-					"file": "src/style/style.scss",
-					"semi_transient": false,
-					"settings":
-					{
-						"buffer_size": 2227,
-						"regions":
-						{
-						},
-						"selection":
-						[
-							[
-								232,
-								232
-							]
-						],
-						"settings":
-						{
-							"auto_name": "",
-							"syntax": "Packages/CSS/CSS.sublime-syntax",
-							"tab_size": 4,
-							"translate_tabs_to_spaces": true
-						},
-						"translation.x": 0.0,
-						"translation.y": 648.0,
 						"zoom_level": 1.0
 					},
 					"stack_index": 0,

src/index.html

@@ -37,7 +37,8 @@
             <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/>
-                <button class="start" onclick="setupRoll()">Finish</button>
+                <button class="start" onclick="reroll()">Finish</button>
+                <button class="start" onclick="reset()">Clear ALL data</button>
             </div>
         </div>
         <div id="roller" style="display: none">
@@ -57,10 +58,19 @@
                     </div>
                 </div>
             </div>
-            <button type="button" class="roller__button" onclick="roll()">Roll!</button>
+            <div id="roll_results" class="roller__results" style="display: none">
+                <div id="resA" class="roller__result__label">
+                    <!-- here goes the result from group A -->
+                </div>
+                <div id="resB" class="roller__result__label roller__result__label__right">
+                    <!-- here goes the result from group B -->
+                </div>
+                <button onclick="reroll()" class="roller__button roller__result__button">Roll again!</button>
+            </div>
+            <button id="roller_button" type="button" class="roller__button" onclick="roll()">Roll!</button>
         </div>
         <div id="results" style="display: none">
-            <table>
+            <table class="resultsTable">
                 <thead>
                     <tr>
                         <th class="groupAName">Group A</th>

src/script/script.js

@@ -42,7 +42,7 @@ function loadDataStore(){
         })
         $.each(dataStore.groupB, (i, val) => {
             var el=dataStore.entities[val];
-            $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+el.id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+el.val+"</span></li>").hide().appendTo("#groupBList").slideDown();
+            $("<li><button class=\"forfa\" onclick=\"remGroupB(this, '"+el.id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+el.val+"</span></li>").hide().appendTo("#groupBList").slideDown();
         })
 
         //load options
@@ -119,7 +119,7 @@ function addGroupB(){
     $("#groupBInput").val("");
 
     //add to ui
-    $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+inp+"</span></li>").hide().appendTo("#groupBList").slideDown();
+    $("<li><button class=\"forfa\" onclick=\"remGroupB(this, '"+id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+inp+"</span></li>").hide().appendTo("#groupBList").slideDown();
 }
 function remGroupA(el, id){
     dataStore.groupA=dataStore.groupA.filter((el) => el!==id);
@@ -127,7 +127,8 @@ function remGroupA(el, id){
     $(el).parent().slideUp(() => $(el).parent().remove());
 }
 function remGroupB(el, id){
-    dataStore.groupA=dataStore.groupB.filter((el) => el!==id);
+    console.log(id);
+    dataStore.groupB=dataStore.groupB.filter((el) => el!==id);
     saveDataStore();
     $(el).parent().slideUp(() => $(el).parent().remove());
 }
@@ -150,8 +151,10 @@ var countB=0;
 var degA=0;
 var degB=0;
 function setupRoll(){
+    $("#roller").slideUp(() => {
         //set up roller A
         $("#rollerA").html("");
+        $("#rollerA").css("transform", "rotate(0)");
         countA=dataStore.groupA.length;
         degA=360/countA;
         var dataA=dataStore.groupA.map((id) => dataStore.entities[id]);
@@ -164,6 +167,7 @@ function setupRoll(){
 
         //set up roller B
         $("#rollerB").html("");
+        $("#rollerB").css("transform", "rotate(0)");
         countB=dataStore.groupB.length;
         degB=360/countB;
         var dataB=dataStore.groupB.map((id) => dataStore.entities[id]);
@@ -181,19 +185,33 @@ function setupRoll(){
             baseRotateB=degB/2;
         }
 
-    $("#rollerA").css("transform", "rotate("+baseRotateA.toString()+"deg)");
+        //$("#rollerA").css("transform", "rotate("+baseRotateA.toString()+"deg)");
-    $("#rollerB").css("transform", "rotate("+baseRotateB.toString()+"deg)");
+        //$("#rollerB").css("transform", "rotate("+baseRotateB.toString()+"deg)");
 
         $("#editor").slideUp();
         $("#roller").slideDown();
+        $("#roller_button").slideDown();
+    })
 }
 
+var idA="";
+var idB="";
 function roll(){
+    $("#roller_button").slideUp();
+
     var randA=Math.floor(Math.random()*countA);
     var randB=Math.floor(Math.random()*countB);
+    idA=dataStore.groupA[randA];
+    idB=dataStore.groupB[randB];
 
-    var rotA=(360*10)+baseRotateA+(randA*degA)+(degA/2);
+    var rotA=(360*10)-((randA-1)*degA)-(degA/2);
-    var rotB=(360*10)+baseRotateB+(randB*degB)+(degB/2);
+    var rotB=(360*10)-((randB-1)*degB)-(degB/2);
+
+    dataStore.assignments.push({a: idA, b: idB});
+    dataStore.groupA=dataStore.groupA.filter((id) => id!=idA);
+    if(dataStore.options.remFromB){
+        dataStore.groupB=dataStore.groupB.filter((id) => id!=idB);
+    }
 
     $("#rollerA").removeClass("roller__rotate");
     $("#rollerB").removeClass("roller__rotate");
@@ -202,5 +220,41 @@ function roll(){
     $("#rollerA").addClass("roller__rotate");
     $("#rollerB").addClass("roller__rotate");
 
-    console.log(randA, randB, rotA, rotB);
+    setTimeout(finishRoll, 11500);
+    saveDataStore();
+}
+
+function finishRoll(){
+    $("#resA").text(dataStore.entities[idA].val);
+    $("#resB").text(dataStore.entities[idB].val);
+    $("#roll_results").show();
+}
+
+function reroll(){
+    if(dataStore.groupA.length){
+        $("#roll_results").slideUp();
+        setupRoll();
+    }
+    else{
+        showResults();
+    }
+}
+
+function showResults(){
+    $("#editor").slideUp();
+    $("#roller").slideUp();
+
+    $.each(dataStore.assignments, (i, val) => {
+        var labelA=dataStore.entities[val.a].val;
+        var labelB=dataStore.entities[val.b].val;
+
+        $("<tr><td>"+labelA+"</td><td>"+labelB+"</td></tr>").appendTo("#resultsTable");
+    });
+
+    $("#results").slideDown();
+}
+
+function reset(){
+    localStorage.removeItem("dataStore");
+    location.reload();
 }

src/style/style.css

@@ -24,7 +24,10 @@ ul {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   column-gap: 5em;
-  margin: 3em;
+  width: 95%;
+  margin: auto;
+  margin-bottom: 3em;
+  overflow: hidden;
 }
 .roller__holder {
   width: 100%;
@@ -67,7 +70,6 @@ ul {
   left: 75%;
   right: 5%;
   height: 4%;
-  font-size: 1.5em;
   background: grey;
   border: 1px solid darkgrey;
   border-radius: 1em;
@@ -86,12 +88,51 @@ ul {
   margin-right: 5%;
   width: 89%;
   font-size: 3em;
-  background: repeating-linear-gradient(46deg, grey 0rem, grey 2rem, green 2rem, green 4rem, grey 4rem);
+  background: repeating-linear-gradient(45deg, grey 0rem, grey 2rem, green 2rem, green 4rem, grey 4rem);
   border: 2px solid darkgreen;
   border-radius: 2rem;
   background-size: 200% 200%;
   animation: barberpole 10s linear infinite;
 }
+.roller__results {
+  position: absolute;
+  top: 10%;
+  left: 30%;
+  right: 30%;
+  height: 15%;
+  z-index: 10;
+  background: linear-gradient(30deg, green, darkgreen);
+  background-size: 200% 200%;
+  border-radius: 1em;
+  overflow: auto;
+  padding: 3em;
+  animation: barberpole 10s linear infinite, growappear 0.5s linear;
+}
+.roller__result__label {
+  background: grey;
+  font-size: 2em;
+  border-radius: 2em;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  color: white;
+  padding: 0.3rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  float: left;
+  width: 40%;
+}
+.roller__result__label__right {
+  float: right;
+  border-radius: 2em;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  text-align: right;
+}
+.roller__result__button {
+  clear: both;
+  font-size: 1em;
+  margin-top: 4em;
+}
 
 @keyframes barberpole {
   100% {
@@ -103,5 +144,27 @@ ul {
     transform: rotate(0deg);
   }
 }
+@keyframes growappear {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+.resultsTable {
+  width: 95%;
+  margin: auto;
+  font-size: 2em;
+}
+.resultsTable th {
+  padding-bottom: 2em;
+}
+.resultsTable td {
+  border-bottom: 1px solid black;
+}
+.resultsTable tr:nth-child(even) {
+  background: lightgrey;
+}
 
 /*# sourceMappingURL=style.css.map */

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;;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;;;AAGR;EACI;IACI;;;AAGR;EACI;IACI","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;;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

@@ -26,7 +26,10 @@ ul{
         display: grid;
         grid-template-columns: 1fr auto 1fr;
         column-gap: 5em;
-        margin: 3em;
+        width: 95%;
+        margin: auto;
+        margin-bottom: 3em;
+        overflow: hidden;
     }
     &__holder{
         width: 100%;
@@ -71,7 +74,6 @@ ul{
         left: 75%;
         right: 5%;
         height: 4%;
-        font-size: 1.5em;
         background: grey;
         border: 1px solid darkgrey;
         border-radius: 1em;
@@ -91,12 +93,52 @@ ul{
         margin-right: 5%;
         width: 89%;
         font-size: 3em;
-        background: repeating-linear-gradient(46deg, grey 0rem, grey 2rem, green 2rem, green 4rem, grey 4rem);
+        background: repeating-linear-gradient(45deg, grey 0rem, grey 2rem, green 2rem, green 4rem, grey 4rem);
         border: 2px solid darkgreen;
         border-radius: 2rem;
         background-size: 200% 200%;
         animation: barberpole 10s linear infinite;
     }
+
+    &__results{
+        position: absolute;
+        top: 10%;
+        left: 30%;
+        right: 30%;
+        height: 15%;
+        z-index: 10;
+        background: linear-gradient(30deg, green, darkgreen);
+        background-size: 200% 200%;
+        border-radius: 1em;
+        overflow: auto;
+        padding: 3em;
+        animation: barberpole 10s linear infinite, growappear 0.5s linear;
+    }
+    &__result__label{
+        background: grey;
+        font-size: 2em;
+        border-radius: 2em;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        color: white;
+        padding: 0.3rem;
+        padding-left: 1rem;
+        padding-right: 1rem;
+        float: left;
+        width: 40%;
+    }
+    &__result__label__right{
+        float: right;
+        border-radius: 2em;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        text-align: right;
+    }
+    &__result__button{
+        clear: both;
+        font-size: 1em;
+        margin-top: 4em;
+    }
 }
 @keyframes barberpole{
     100%{
@@ -108,3 +150,28 @@ ul{
         transform: rotate(0deg);
     }
 }
+@keyframes growappear{
+    0%{
+        transform: scale(0);
+    }
+    100%{
+        transform: scale(1);
+    }
+}
+
+.resultsTable{
+    width: 95%;
+    margin: auto;
+    font-size: 2em;
+
+    th{
+        padding-bottom: 2em;
+    }
+
+    td{
+        border-bottom: 1px solid black;
+    }
+    tr:nth-child(even){
+        background: lightgrey;
+    }
+}