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

It rotates

Browse Source
This commit is contained in:
Fándly Gergő 2018-10-01 14:24:57 +03:00
parent acc40fdd10
commit ef3300592f
6 changed files with 157 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
fortuneRoundtable.sublime-workspace
View File

@ -3,6 +3,10 @@
{ {
"selected_items": "selected_items":
[ [
[
"baseRo",
"baseRotateB"
],
[ [
"groupb", "groupb",
"groupBName" "groupBName"
@ -23,7 +27,7 @@
"file": "src/index.html", "file": "src/index.html",
"settings": "settings":
{ {
"buffer_size": 3466, "buffer_size": 3555,
"encoding": "UTF-8", "encoding": "UTF-8",
"line_ending": "Windows" "line_ending": "Windows"
} }
@ -32,7 +36,7 @@
"file": "src/script/script.js", "file": "src/script/script.js",
"settings": "settings":
{ {
"buffer_size": 5149, "buffer_size": 6140,
"encoding": "UTF-8", "encoding": "UTF-8",
"line_ending": "Windows" "line_ending": "Windows"
} }
@ -41,7 +45,7 @@
"file": "src/style/style.scss", "file": "src/style/style.scss",
"settings": "settings":
{ {
"buffer_size": 1519, "buffer_size": 2227,
"encoding": "UTF-8", "encoding": "UTF-8",
"line_ending": "Windows" "line_ending": "Windows"
} }
@ -79,10 +83,7 @@
}, },
"expanded_folders": "expanded_folders":
[ [
"/H/Munkák/FortuneRoundtable", "/home/gergo/Documents/FortuneRoundtable"
"/H/Munkák/FortuneRoundtable/src",
"/H/Munkák/FortuneRoundtable/src/script",
"/H/Munkák/FortuneRoundtable/src/style"
], ],
"file_history": "file_history":
[ [
@ -91,7 +92,7 @@
], ],
"find": "find":
{ {
"height": 40.0 "height": 27.0
}, },
"find_in_files": "find_in_files":
{ {
@ -136,23 +137,25 @@
"semi_transient": false, "semi_transient": false,
"settings": "settings":
{ {
"buffer_size": 3466, "buffer_size": 3555,
"regions": "regions":
{ {
}, },
"selection": "selection":
[ [
[ [
2746, 3555,
2746 3555
] ]
], ],
"settings": "settings":
{ {
"syntax": "Packages/HTML/HTML.sublime-syntax" "syntax": "Packages/HTML/HTML.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": true
}, },
"translation.x": 0.0, "translation.x": 0.0,
"translation.y": 134.0, "translation.y": 674.0,
"zoom_level": 1.0 "zoom_level": 1.0
}, },
"stack_index": 2, "stack_index": 2,
@ -164,23 +167,26 @@
"semi_transient": false, "semi_transient": false,
"settings": "settings":
{ {
"buffer_size": 5149, "buffer_size": 6140,
"regions": "regions":
{ {
}, },
"selection": "selection":
[ [
[ [
4819, 6070,
4819 6070
] ]
], ],
"settings": "settings":
{ {
"syntax": "Packages/JavaScript/JavaScript.sublime-syntax" "syntax": "Packages/JavaScript/JavaScript.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": true,
"word_wrap": true
}, },
"translation.x": 0.0, "translation.x": 0.0,
"translation.y": 1954.0, "translation.y": 2866.0,
"zoom_level": 1.0 "zoom_level": 1.0
}, },
"stack_index": 1, "stack_index": 1,
@ -192,24 +198,26 @@
"semi_transient": false, "semi_transient": false,
"settings": "settings":
{ {
"buffer_size": 1519, "buffer_size": 2227,
"regions": "regions":
{ {
}, },
"selection": "selection":
[ [
[ [
274, 232,
274 232
] ]
], ],
"settings": "settings":
{ {
"auto_name": "", "auto_name": "",
"syntax": "Packages/CSS/CSS.sublime-syntax" "syntax": "Packages/CSS/CSS.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": true
}, },
"translation.x": 0.0, "translation.x": 0.0,
"translation.y": 0.0, "translation.y": 648.0,
"zoom_level": 1.0 "zoom_level": 1.0
}, },
"stack_index": 0, "stack_index": 0,
@ -220,7 +228,7 @@
], ],
"incremental_find": "incremental_find":
{ {
"height": 24.0 "height": 27.0
}, },
"input": "input":
{ {
@ -257,7 +265,7 @@
"project": "fortuneRoundtable.sublime-project", "project": "fortuneRoundtable.sublime-project",
"replace": "replace":
{ {
"height": 44.0 "height": 50.0
}, },
"save_all_on_build": true, "save_all_on_build": true,
"select_file": "select_file":

1
src/index.html
View File

@ -57,6 +57,7 @@
</div> </div>
</div> </div>
</div> </div>
<button type="button" class="roller__button" onclick="roll()">Roll!</button>
</div> </div>
<div id="results" style="display: none"> <div id="results" style="display: none">
<table> <table>

47
src/script/script.js
View File

@ -143,11 +143,17 @@ function updateOptions(){
/* actual rolling */ /* actual rolling */
var baseRotateA=0;
var baseRotateB=0;
var countA=0;
var countB=0;
var degA=0;
var degB=0;
function setupRoll(){ function setupRoll(){
//set up roller A //set up roller A
$("#rollerA").html(""); $("#rollerA").html("");
var countA=dataStore.groupA.length; countA=dataStore.groupA.length;
var degA=360/countA; degA=360/countA;
var dataA=dataStore.groupA.map((id) => dataStore.entities[id]); var dataA=dataStore.groupA.map((id) => dataStore.entities[id]);
$.each(dataA, (i, val) => { $.each(dataA, (i, val) => {
var rotSlicer=i*degA; var rotSlicer=i*degA;
@ -158,16 +164,43 @@ function setupRoll(){
//set up roller B //set up roller B
$("#rollerB").html(""); $("#rollerB").html("");
var countB=dataStore.groupB.length; countB=dataStore.groupB.length;
var degB=360/countB; degB=360/countB;
var dataB=dataStore.groupB.map((id) => dataStore.entities[id]); var dataB=dataStore.groupB.map((id) => dataStore.entities[id]);
$.each(dataB, (i, val) => { $.each(dataB, (i, val) => {
var rotSlicer=i*degB; var rotSlicer=i*degB;
var rotLabel=((i-1)*degB)+(degB/2); var rotLabel=((i-1)*degB)+(degB/2);
$("<div class=\"roller__slicer\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerB"); $("<div class=\"roller__slicer roller__slicer__flip\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerB");
$("<div class=\"roller__label\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").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(); $("#editor").slideUp();
$("#roller").slideDown(); $("#roller").slideDown();
} }
function roll(){
var randA=Math.floor(Math.random()*countA);
var randB=Math.floor(Math.random()*countB);
var rotA=(360*10)+baseRotateA+(randA*degA)+(degA/2);
var rotB=(360*10)+baseRotateB+(randB*degB)+(degB/2);
$("#rollerA").removeClass("roller__rotate");
$("#rollerB").removeClass("roller__rotate");
$("#rollerA").css("transform", "rotate("+rotA.toString()+"deg)");
$("#rollerB").css("transform", "rotate("+rotB.toString()+"deg)");
$("#rollerA").addClass("roller__rotate");
$("#rollerB").addClass("roller__rotate");
console.log(randA, randB, rotA, rotB);
}

52
src/style/style.css
View File

@ -16,7 +16,9 @@ ul {
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
animation: rotate 2s linear infinite; }
.roller__rotate {
animation: rotate 10s;
} }
.roller__base { .roller__base {
display: grid; display: grid;
@ -45,34 +47,60 @@ ul {
} }
.roller__slicer { .roller__slicer {
position: absolute; position: absolute;
top: 49%; top: 49.75%;
left: 50%; left: 50%;
right: 0; right: 0;
height: 2%; height: 0.5%;
background: black; background: black;
transform-origin: left center; transform-origin: left center;
z-index: 3; z-index: 3;
} }
.roller__slicer__flip {
top: 49.75%;
left: 0;
right: 50%;
transform-origin: right center;
}
.roller__label { .roller__label {
position: absolute; position: absolute;
top: 45%; top: 48%;
left: 70%; left: 75%;
right: 10%; right: 5%;
height: 10%; height: 4%;
font-size: 1.5em;
background: grey; background: grey;
border: 1px solid darkgrey; border: 1px solid darkgrey;
border-radius: 1em; border-radius: 1em;
color: white; color: white;
text-align: center; text-align: center;
transform-origin: -100% center; transform-origin: -125% center;
}
.roller__label__flip {
top: 48%;
left: 5%;
right: 75%;
transform-origin: 225% center;
}
.roller__button {
margin-left: 5%;
margin-right: 5%;
width: 89%;
font-size: 3em;
background: repeating-linear-gradient(46deg, 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;
} }
@keyframes barberpole {
100% {
background-position: 100% 100%;
}
}
@keyframes rotate { @keyframes rotate {
0% { 0% {
transform: rotate(0); transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
} }
} }

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;EACA;;AAEA;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;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;IACI;;EAEJ;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;;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"}

54
src/style/style.scss
View File

@ -17,7 +17,10 @@ ul{
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
animation: rotate 2s linear infinite;
&__rotate{
animation: rotate 10s;
}
&__base{ &__base{
display: grid; display: grid;
@ -47,34 +50,61 @@ ul{
&__slicer{ &__slicer{
position: absolute; position: absolute;
top: 49%; top: 49.75%;
left: 50%; left: 50%;
right: 0; right: 0;
height: 2%; height: 0.5%;
background: black; background: black;
transform-origin: left center; transform-origin: left center;
z-index: 3; z-index: 3;
} }
&__slicer__flip{
top: 49.75%;
left: 0;
right: 50%;
transform-origin: right center;
}
&__label{ &__label{
position: absolute; position: absolute;
top: 45%; top: 48%;
left: 70%; left: 75%;
right: 10%; right: 5%;
height: 10%; height: 4%;
font-size: 1.5em;
background: grey; background: grey;
border: 1px solid darkgrey; border: 1px solid darkgrey;
border-radius: 1em; border-radius: 1em;
color: white; color: white;
text-align: center; text-align: center;
transform-origin: -100% center; transform-origin: -125% center;
}
&__label__flip{
top: 48%;
left: 5%;
right: 75%;
transform-origin: 225% center;
}
&__button{
margin-left: 5%;
margin-right: 5%;
width: 89%;
font-size: 3em;
background: repeating-linear-gradient(46deg, 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;
}
}
@keyframes barberpole{
100%{
background-position: 100% 100%;
} }
} }
@keyframes rotate{ @keyframes rotate{
0%{ 0%{
transform: rotate(0); transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
} }
} }