gergof/FortuneRoundtable
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Done

Browse Source 
It works as it should work. It isn't the prettiest at some places, but it will do it.
This commit is contained in:
Fándly Gergő 2018-10-01 22:47:29 +03:00
parent ef3300592f
commit 39d086573d
6 changed files with 261 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
fortuneRoundtable.sublime-workspace
View File

@ -27,25 +27,7 @@
"file": "src/index.html",
"settings":
{
"buffer_size": 3555,
"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,
"buffer_size": 4208,
"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,
3555
0,
0
]
],
"settings":
@ -155,69 +146,7 @@
"translate_tabs_to_spaces": true
},
"translation.x": 0.0,
"translation.y": 674.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,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 0,

16
src/index.html
View File

@ -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>

136
src/script/script.js
View File

@ -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,50 +151,67 @@ var countB=0;
var degA=0;
var degB=0;
function setupRoll(){
//set up roller A
$("#rollerA").html("");
countA=dataStore.groupA.length;
degA=360/countA;
var dataA=dataStore.groupA.map((id) => dataStore.entities[id]);
$.each(dataA, (i, val) => {
var rotSlicer=i*degA;
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");
$("#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]);
$.each(dataA, (i, val) => {
var rotSlicer=i*degA;
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");
})
//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]);
$.each(dataB, (i, val) => {
var rotSlicer=i*degB;
var rotLabel=((i-1)*degB)+(degB/2);
$("<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");
});
if(countA%2!==0){
baseRotateA=-degA/2;
}
if(countB%2!==0){
baseRotateB=degB/2;
}
//$("#rollerA").css("transform", "rotate("+baseRotateA.toString()+"deg)");
//$("#rollerB").css("transform", "rotate("+baseRotateB.toString()+"deg)");
$("#editor").slideUp();
$("#roller").slideDown();
$("#roller_button").slideDown();
})
//set up roller B
$("#rollerB").html("");
countB=dataStore.groupB.length;
degB=360/countB;
var dataB=dataStore.groupB.map((id) => dataStore.entities[id]);
$.each(dataB, (i, val) => {
var rotSlicer=i*degB;
var rotLabel=((i-1)*degB)+(degB/2);
$("<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");
});
if(countA%2!==0){
baseRotateA=-degA/2;
}
if(countB%2!==0){
baseRotateB=degB/2;
}
$("#rollerA").css("transform", "rotate("+baseRotateA.toString()+"deg)");
$("#rollerB").css("transform", "rotate("+baseRotateB.toString()+"deg)");
$("#editor").slideUp();
$("#roller").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 rotB=(360*10)+baseRotateB+(randB*degB)+(degB/2);
var rotA=(360*10)-((randA-1)*degA)-(degA/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();
}

69
src/style/style.css
View File

@ -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 */

2
src/style/style.css.map
View File

@ -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"}

73
src/style/style.scss
View File

@ -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%{
@ -107,4 +149,29 @@ ul{
0%{
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;
}
}