It rotates
This commit is contained in:
Fándly Gergő
parent
acc40fdd10
commit
ef3300592f
@ -3,6 +3,10 @@
|
||||
{
|
||||
"selected_items":
|
||||
[
|
||||
[
|
||||
"baseRo",
|
||||
"baseRotateB"
|
||||
],
|
||||
[
|
||||
"groupb",
|
||||
"groupBName"
|
||||
@ -23,7 +27,7 @@
|
||||
"file": "src/index.html",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 3466,
|
||||
"buffer_size": 3555,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Windows"
|
||||
}
|
||||
@ -32,7 +36,7 @@
|
||||
"file": "src/script/script.js",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 5149,
|
||||
"buffer_size": 6140,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Windows"
|
||||
}
|
||||
@ -41,7 +45,7 @@
|
||||
"file": "src/style/style.scss",
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 1519,
|
||||
"buffer_size": 2227,
|
||||
"encoding": "UTF-8",
|
||||
"line_ending": "Windows"
|
||||
}
|
||||
@ -79,10 +83,7 @@
|
||||
},
|
||||
"expanded_folders":
|
||||
[
|
||||
"/H/Munkák/FortuneRoundtable",
|
||||
"/H/Munkák/FortuneRoundtable/src",
|
||||
"/H/Munkák/FortuneRoundtable/src/script",
|
||||
"/H/Munkák/FortuneRoundtable/src/style"
|
||||
"/home/gergo/Documents/FortuneRoundtable"
|
||||
],
|
||||
"file_history":
|
||||
[
|
||||
@ -91,7 +92,7 @@
|
||||
],
|
||||
"find":
|
||||
{
|
||||
"height": 40.0
|
||||
"height": 27.0
|
||||
},
|
||||
"find_in_files":
|
||||
{
|
||||
@ -136,23 +137,25 @@
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 3466,
|
||||
"buffer_size": 3555,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
2746,
|
||||
2746
|
||||
3555,
|
||||
3555
|
||||
]
|
||||
],
|
||||
"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.y": 134.0,
|
||||
"translation.y": 674.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 2,
|
||||
@ -164,23 +167,26 @@
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 5149,
|
||||
"buffer_size": 6140,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
4819,
|
||||
4819
|
||||
6070,
|
||||
6070
|
||||
]
|
||||
],
|
||||
"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.y": 1954.0,
|
||||
"translation.y": 2866.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 1,
|
||||
@ -192,24 +198,26 @@
|
||||
"semi_transient": false,
|
||||
"settings":
|
||||
{
|
||||
"buffer_size": 1519,
|
||||
"buffer_size": 2227,
|
||||
"regions":
|
||||
{
|
||||
},
|
||||
"selection":
|
||||
[
|
||||
[
|
||||
274,
|
||||
274
|
||||
232,
|
||||
232
|
||||
]
|
||||
],
|
||||
"settings":
|
||||
{
|
||||
"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.y": 0.0,
|
||||
"translation.y": 648.0,
|
||||
"zoom_level": 1.0
|
||||
},
|
||||
"stack_index": 0,
|
||||
@ -220,7 +228,7 @@
|
||||
],
|
||||
"incremental_find":
|
||||
{
|
||||
"height": 24.0
|
||||
"height": 27.0
|
||||
},
|
||||
"input":
|
||||
{
|
||||
@ -257,7 +265,7 @@
|
||||
"project": "fortuneRoundtable.sublime-project",
|
||||
"replace":
|
||||
{
|
||||
"height": 44.0
|
||||
"height": 50.0
|
||||
},
|
||||
"save_all_on_build": true,
|
||||
"select_file":
|
||||
|
||||
@ -57,6 +57,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="roller__button" onclick="roll()">Roll!</button>
|
||||
</div>
|
||||
<div id="results" style="display: none">
|
||||
<table>
|
||||
|
||||
@ -143,11 +143,17 @@ function updateOptions(){
|
||||
|
||||
|
||||
/* actual rolling */
|
||||
var baseRotateA=0;
|
||||
var baseRotateB=0;
|
||||
var countA=0;
|
||||
var countB=0;
|
||||
var degA=0;
|
||||
var degB=0;
|
||||
function setupRoll(){
|
||||
//set up roller A
|
||||
$("#rollerA").html("");
|
||||
var countA=dataStore.groupA.length;
|
||||
var degA=360/countA;
|
||||
countA=dataStore.groupA.length;
|
||||
degA=360/countA;
|
||||
var dataA=dataStore.groupA.map((id) => dataStore.entities[id]);
|
||||
$.each(dataA, (i, val) => {
|
||||
var rotSlicer=i*degA;
|
||||
@ -158,16 +164,43 @@ function setupRoll(){
|
||||
|
||||
//set up roller B
|
||||
$("#rollerB").html("");
|
||||
var countB=dataStore.groupB.length;
|
||||
var degB=360/countB;
|
||||
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\" 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__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();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
@ -16,7 +16,9 @@ ul {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
.roller__rotate {
|
||||
animation: rotate 10s;
|
||||
}
|
||||
.roller__base {
|
||||
display: grid;
|
||||
@ -45,34 +47,60 @@ ul {
|
||||
}
|
||||
.roller__slicer {
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
top: 49.75%;
|
||||
left: 50%;
|
||||
right: 0;
|
||||
height: 2%;
|
||||
height: 0.5%;
|
||||
background: black;
|
||||
transform-origin: left center;
|
||||
z-index: 3;
|
||||
}
|
||||
.roller__slicer__flip {
|
||||
top: 49.75%;
|
||||
left: 0;
|
||||
right: 50%;
|
||||
transform-origin: right center;
|
||||
}
|
||||
.roller__label {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 70%;
|
||||
right: 10%;
|
||||
height: 10%;
|
||||
top: 48%;
|
||||
left: 75%;
|
||||
right: 5%;
|
||||
height: 4%;
|
||||
font-size: 1.5em;
|
||||
background: grey;
|
||||
border: 1px solid darkgrey;
|
||||
border-radius: 1em;
|
||||
color: white;
|
||||
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 {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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"}
|
||||
@ -17,7 +17,10 @@ ul{
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
animation: rotate 2s linear infinite;
|
||||
|
||||
&__rotate{
|
||||
animation: rotate 10s;
|
||||
}
|
||||
|
||||
&__base{
|
||||
display: grid;
|
||||
@ -47,34 +50,61 @@ ul{
|
||||
|
||||
&__slicer{
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
top: 49.75%;
|
||||
left: 50%;
|
||||
right: 0;
|
||||
height: 2%;
|
||||
height: 0.5%;
|
||||
background: black;
|
||||
transform-origin: left center;
|
||||
z-index: 3;
|
||||
}
|
||||
&__slicer__flip{
|
||||
top: 49.75%;
|
||||
left: 0;
|
||||
right: 50%;
|
||||
transform-origin: right center;
|
||||
}
|
||||
|
||||
&__label{
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
left: 70%;
|
||||
right: 10%;
|
||||
height: 10%;
|
||||
top: 48%;
|
||||
left: 75%;
|
||||
right: 5%;
|
||||
height: 4%;
|
||||
font-size: 1.5em;
|
||||
background: grey;
|
||||
border: 1px solid darkgrey;
|
||||
border-radius: 1em;
|
||||
color: white;
|
||||
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{
|
||||
0%{
|
||||
transform: rotate(0);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(360deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user