diff --git a/public/css/stories.css b/public/css/stories.css deleted file mode 100644 index f1e6cf2..0000000 --- a/public/css/stories.css +++ /dev/null @@ -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} \ No newline at end of file diff --git a/public/css/wordRotator.css b/public/css/wordRotator.css new file mode 100644 index 0000000..a3793f5 --- /dev/null +++ b/public/css/wordRotator.css @@ -0,0 +1 @@ +@-webkit-keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(90deg);transform:rotate(90deg)}}@-webkit-keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg)}to{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}@-webkit-keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}to{-webkit-transform:rotate(270deg);transform:rotate(270deg)}}@-webkit-keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.segment:not(.segment-row).rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-90 .segment{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-90 .segment.rotate-90{-webkit-animation-name:rotate-0;animation-name:rotate-0;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-90 .segment.rotate-180{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-90 .segment.rotate-270{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-90 .segment.rotate-360{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-180 .segment,.segment:not(.segment-row).rotate-180 .segment.rotate-90{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-180 .segment.rotate-180{-webkit-animation-name:rotate-0;animation-name:rotate-0;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-180 .segment.rotate-270{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-180 .segment.rotate-360{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-270 .segment,.segment:not(.segment-row).rotate-270 .segment.rotate-90{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-270 .segment.rotate-180{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-270 .segment.rotate-270{-webkit-animation-name:rotate-0;animation-name:rotate-0;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-270 .segment.rotate-360{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-360 .segment,.segment:not(.segment-row).rotate-360 .segment.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-360 .segment.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-360 .segment.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment:not(.segment-row).rotate-360 .segment.rotate-360{-webkit-animation-name:rotate-0;animation-name:rotate-0;-webkit-animation-duration:.25s;animation-duration:.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;animation-direction:reverse;-webkit-animation-timing-function:linear;animation-timing-function:linear}.segment{cursor:pointer;display:inline-block;text-align:center;position:relative;-webkit-transition:0s;transition:0s}.segment.segment-row{display:block;width:100%;-webkit-animation:none!important;animation:none!important}.segment.segment-leaf{min-width:15px;height:30px}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px}.segment.segment-parent .segment{width:50%} \ No newline at end of file diff --git a/public/html/application/level.html b/public/html/application/level.html index 6d79f5a..386d6b5 100644 --- a/public/html/application/level.html +++ b/public/html/application/level.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index a93c2f0..62c5fc3 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -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) diff --git a/src/module/Application/pwa/html/application/level.html b/src/module/Application/pwa/html/application/level.html index 6cdd2ec..978d568 100644 --- a/src/module/Application/pwa/html/application/level.html +++ b/src/module/Application/pwa/html/application/level.html @@ -1,5 +1,5 @@
-
+
diff --git a/src/module/Application/pwa/js/wordrotator/Level/Level.js b/src/module/Application/pwa/js/wordrotator/Level/Level.js index 1618bf2..f3b23ed 100644 --- a/src/module/Application/pwa/js/wordrotator/Level/Level.js +++ b/src/module/Application/pwa/js/wordrotator/Level/Level.js @@ -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) diff --git a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js index f8cb72e..ab34f89 100644 --- a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js +++ b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js @@ -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(); diff --git a/src/module/Application/pwa/js/wordrotator/Segment/Segment.js b/src/module/Application/pwa/js/wordrotator/Segment/Segment.js index 6c6e619..7c8f55a 100644 --- a/src/module/Application/pwa/js/wordrotator/Segment/Segment.js +++ b/src/module/Application/pwa/js/wordrotator/Segment/Segment.js @@ -7,7 +7,7 @@ export class Segment{ } isSolved(){ - return this.rotation === 0; + return (this.rotation === 0); } rotate(){}; diff --git a/src/scss/wordRotator.scss b/src/scss/wordRotator.scss index da1c90d..3382de6 100644 --- a/src/scss/wordRotator.scss +++ b/src/scss/wordRotator.scss @@ -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); + // } + //} } \ No newline at end of file