It rotates
This commit is contained in:
parent
acc40fdd10
commit
ef3300592f
@ -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":
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
}
|
}
|
@ -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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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;
|
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user