Ainias/wordRotator
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added simpleLevel

Browse Source
This commit is contained in:
silas 2018-05-22 10:28:17 +02:00
parent cae3ef29ea
commit f7cbd1da71
9 changed files with 173 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/css/stories.css
View File

@ -1 +0,0 @@
.author{color:#979797}.author:after{content:":";padding-right:2px}.author-image-container,.chat-img-container{width:2.4rem;position:relative}.author-image-container .author-image,.author-image-container .chat-img,.chat-img-container .author-image,.chat-img-container .chat-img{position:absolute;margin:.2em;border-radius:50%;width:1.8em}.chat{border-bottom:1px solid #ececec}.chat.overview{cursor:pointer}.chat .chat-name{font-weight:700}.chat .chat-last-message{color:#555;overflow:hidden;white-space:nowrap}.chat .chat-last-message .isWriting{color:#aa1c1d}.chat .chat-last-message-timestamp{font-size:.8rem}.chat .unread-message-counter{background-color:red;border-radius:50%;color:#fff;font-size:.7rem;border:1px solid #9b0000;width:1.2rem;height:1.2rem;line-height:1.2rem;text-align:center;vertical-align:middle}.chat .unread-message-counter:empty{display:none}#chat-title{border-bottom:none}#chat-title .chat-img{width:1.4em;position:relative}.message{margin-bottom:.1rem}.message.my-message{text-align:right}.message.my-message .author,.message.my-message .author-image-container{display:none}.message.my-message .bubble{background-color:rgba(255,0,0,.5);border-radius:5px 5px 0 5px}.message .author-image{bottom:0}.message .bubble{display:inline-block;padding:.2rem;border:1px solid #646464;border-radius:5px 5px 5px 0;max-width:80%;text-align:left}.message .bubble .author{font-size:.7rem;text-align:left;line-height:.9}.message .bubble .message-text{line-height:1}.message .bubble .time{line-height:.9;font-size:.5rem;text-align:right}#answer{text-align:center;height:100%;min-height:50px}.answer-button-container .answer-button{overflow:hidden;margin:-.1em 0 0;font-size:3rem;line-height:1;padding:0 .1em .1em;text-align:center;vertical-align:middle}#author-list .author-entry{border-bottom:1px solid #ececec}#author-list .author-entry .author-image-container .author-image{position:relative}#author-list .author-entry .user-flag{display:none}#author-list .author-entry.isUser .user-flag{display:inherit}

1
public/css/wordRotator.css Normal file
View File

File diff suppressed because one or more lines are too long

2
public/html/application/level.html
View File

@ -1 +1 @@
<div><div id=segment-leaf-template class=segment><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=level></div></div>
<div><div id=segment-leaf-template class="segment segment-leaf"><div class=leaf-element></div></div><div id=segment-parent-template class="segment segment-parent"><div class=child-container></div></div><div id=segment-row-template class="segment segment-row"><div class=child-container></div></div><div id=level></div></div>

36
public/js/app.js
View File

@ -2766,7 +2766,7 @@ class Segment{
}
isSolved(){
return this.rotation === 0;
return (this.rotation === 0);
}
rotate(){};
@ -2793,15 +2793,14 @@ class ParentSegment extends Segment {
rotate() {
this.rotation += 90;
this.rotation %= 360;
this._updateRotationClass();
}
applyRotations(rotations)
{
applyRotations(rotations) {
// debugger;
this.rotation = rotations[0];
rotations.splice(0,1);
rotations.splice(0, 1);
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].applyRotations(rotations);
}
@ -2829,10 +2828,30 @@ class ParentSegment extends Segment {
this._updateElement();
}
_updateRotationClass(){
_updateRotationClass() {
// this.style.transform = "rotate("+this.rotation+"deg)";
this.element.classList.remove(this.class);
this.class = "rotate-" + this.rotation;
if (this.class === "rotate-0")
{
this.class = "rotate-360";
}
this.element.classList.add(this.class);
// if (this.rotation === 0) {
// const self = this;
// self.element.classList.add("no-transition");
//
// setTimeout(() => {
// if (self.class === "rotate-0") {
// requestAnimationFrame(()=>{
//
// self.element.classList.remove("rotate-0");
// self.element.classList.remove("no-transition");
// });
// }
// }, 250);
// }
}
_updateElement() {
@ -2907,7 +2926,10 @@ class Level {
setWords(words)
{
this.words = words;
this.words = [];
for (let i = 0, n = words.length; i < n; i++) {
this.words.push(words[i].toUpperCase());
}
}
setStartRotations(rotations)

2
src/module/Application/pwa/html/application/level.html
View File

@ -1,5 +1,5 @@
<div>
<div id = 'segment-leaf-template' class = 'segment'>
<div id = 'segment-leaf-template' class = 'segment segment-leaf'>
<div class = 'leaf-element'></div>
</div>
<div id = 'segment-parent-template' class = 'segment segment-parent'>

5
src/module/Application/pwa/js/wordrotator/Level/Level.js
View File

@ -11,7 +11,10 @@ export class Level {
setWords(words)
{
this.words = words;
this.words = [];
for (let i = 0, n = words.length; i < n; i++) {
this.words.push(words[i].toUpperCase());
}
}
setStartRotations(rotations)

33
src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js
View File

@ -10,15 +10,14 @@ export class ParentSegment extends Segment {
rotate() {
this.rotation += 90;
this.rotation %= 360;
this._updateRotationClass()
}
applyRotations(rotations)
{
applyRotations(rotations) {
// debugger;
this.rotation = rotations[0];
rotations.splice(0,1);
rotations.splice(0, 1);
for (let i = 0, n = this.children.length; i < n; i++) {
rotations = this.children[i].applyRotations(rotations);
}
@ -46,22 +45,42 @@ export class ParentSegment extends Segment {
this._updateElement();
}
_updateRotationClass(){
_updateRotationClass() {
// this.style.transform = "rotate("+this.rotation+"deg)";
this.element.classList.remove(this.class);
this.class = "rotate-" + this.rotation;
if (this.class === "rotate-0")
{
this.class = "rotate-360";
}
this.element.classList.add(this.class);
// if (this.rotation === 0) {
// const self = this;
// self.element.classList.add("no-transition");
//
// setTimeout(() => {
// if (self.class === "rotate-0") {
// requestAnimationFrame(()=>{
//
// self.element.classList.remove("rotate-0");
// self.element.classList.remove("no-transition");
// });
// }
// }, 250);
// }
}
_updateElement() {
const childContainer = this.element.querySelector(".child-container");
childContainer.removeAllChildren();
this._updateRotationClass()
this._updateRotationClass();
const self = this;
this.element.onclick = function () {
self.rotate();
}
};
for (let i = 0, n = this.children.length; i < n; i++) {
this.children[i]._updateElement();

2
src/module/Application/pwa/js/wordrotator/Segment/Segment.js
View File

@ -7,7 +7,7 @@ export class Segment{
}
isSolved(){
return this.rotation === 0;
return (this.rotation === 0);
}
rotate(){};

136
src/scss/wordRotator.scss
View File

@ -1,36 +1,120 @@
.segment
{
$rotationDegrees: (90 180 270 360);
@for $i from 1 through length($rotationDegrees) {
$startDegree: ((nth($rotationDegrees, $i)+270)%360);
@keyframes rotate-#{nth($rotationDegrees, $i)} {
0% {
transform: rotate(#{$startDegree}deg)
}
100% {
transform: rotate(#{nth($rotationDegrees, $i)}deg)
}
}
//@keyframes rotate-minus-#{nth($rotationDegrees, $i)} {
// 0% {
// transform: rotate(#{nth($rotationDegrees, $i)}deg)
// }
// 100% {
// transform: rotate(calc(90 - #{nth($rotationDegrees, $i)}) deg)
// }
//}
}
.segment:not(.segment-row) {
@for $i from 1 through length($rotationDegrees) {
&.rotate-#{nth($rotationDegrees, $i)} {
animation-name: rotate-#{nth($rotationDegrees, $i)};
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-timing-function: linear;
.segment {
animation-name: rotate-#{450- nth($rotationDegrees, $i)};
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-direction: reverse;
animation-timing-function: linear;
@for $j from 1 through length($rotationDegrees) {
$animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
&.rotate-#{nth($rotationDegrees, $j)} {
animation-name: rotate-#{$animationName};
animation-duration: 0.25s;
animation-fill-mode: forwards;
animation-direction: reverse;
animation-timing-function: linear;
}
}
}
}
}
}
.segment {
cursor: pointer;
display: inline-block;
text-align: center;
&.segment-parent{
position: relative;
transition: .0s;
&.segment-row {
display: block;
width: 100%;
animation: none !important;
}
&.segment-leaf {
min-width: 15px;
height: 30px;
}
&.segment-parent {
border: solid 1px #a9a9a9;
border-radius: 3px;
.segment{
.segment {
width: 50%;
}
}
&.rotate-90
{
transform: rotate(90deg);
.segment{
transform: rotate(-90deg);
}
}
&.rotate-180
{
transform: rotate(180deg);
.segment{
transform: rotate(-180deg);
}
}
&.rotate-270
{
transform: rotate(270deg);
.segment{
transform: rotate(-270deg);
}
}
//&.rotate-0 {
// animation-name: rotate-360;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(360deg);
// .segment {
// transform: rotate(-360deg);
// }
//}
//
//&.rotate-90 {
// animation-name: rotate-90;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(90deg);
// .segment {
// transform: rotate(-90deg);
// }
//}
//
//&.rotate-180 {
// animation-name: rotate-180;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(180deg);
// .segment {
// transform: rotate(-180deg);
// }
//}
//
//&.rotate-270 {
// animation-name: rotate-270;
// animation-duration: 0.25s;
// animation-fill-mode: forwards;
// //transform: rotate(270deg);
// .segment {
// transform: rotate(-270deg);
// }
//}
}