From eea36bb92263852596ed4c3137b8297855c3dbf6 Mon Sep 17 00:00:00 2001 From: silas Date: Fri, 6 Jul 2018 18:39:42 +0200 Subject: [PATCH] update to laptop --- public/css/wordRotator.css | 2 +- public/js/app.js | 76 +++++++--- .../Application/pwa/js/WordRotatorDb.js | 4 - .../Application/pwa/js/site/LevelSite.js | 4 +- .../pwa/js/wordrotator/Level/LevelHelper.js | 6 +- .../js/wordrotator/Level/SixWordsRowLevel.js | 19 ++- .../wordrotator/Level/SixWordsRowLevel12.js | 7 + ...WordsRowLevel8.js => SixWordsRowLevel8.js} | 2 +- .../js/wordrotator/Segment/ParentSegment.js | 20 ++- .../pwa/js/wordrotator/Segment/RowSegment.js | 18 +++ src/scss/wordRotator.scss | 133 ++++++++++++------ 11 files changed, 206 insertions(+), 85 deletions(-) create mode 100644 src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel12.js rename src/module/Application/pwa/js/wordrotator/Level/{ThreeWordsRowLevel8.js => SixWordsRowLevel8.js} (68%) diff --git a/public/css/wordRotator.css b/public/css/wordRotator.css index 39e621c..deffad9 100644 --- a/public/css/wordRotator.css +++ b/public/css/wordRotator.css @@ -1 +1 @@ -.height-10{height:10%}.width-10{width:10%}.height-20{height:20%}.width-20{width:20%}.height-30{height:30%}.width-30{width:30%}.height-40{height:40%}.width-40{width:40%}.height-50{height:50%}.width-50{width:50%}.height-60{height:60%}.width-60{width:60%}.height-70{height:70%}.width-70{width:70%}.height-80{height:80%}.width-80{width:80%}.height-90{height:90%}.width-90{width:90%}.height-100{height:100%}.width-100{width:100%}@-webkit-keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}}@keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}}@keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}}@keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:transparent;z-index:0}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}}@keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:transparent;z-index:0}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}}.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}#level{white-space:nowrap;max-width:100%;overflow-y:visible}#level,#level *,.segment{-webkit-transition:none;transition:none}.segment{white-space:normal;cursor:pointer;display:inline-block;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1;background-color:#fff}.segment.segment-row{display:block;width:100%;-webkit-animation:none!important;animation:none!important;white-space:nowrap}.segment.segment-leaf{min-width:1em;height:2em;line-height:2em}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px}.segment.segment-parent>.child-container>.segment{width:50%}.show-when-won{visibility:hidden}.show-when-won,.show-when-won *{-webkit-transition:none;transition:none}.won .show-when-won{visibility:initial} \ No newline at end of file +.height-10{height:10%}.width-10{width:10%}.height-20{height:20%}.width-20{width:20%}.height-30{height:30%}.width-30{width:30%}.height-40{height:40%}.width-40{width:40%}.height-50{height:50%}.width-50{width:50%}.height-60{height:60%}.width-60{width:60%}.height-70{height:70%}.width-70{width:70%}.height-80{height:80%}.width-80{width:80%}.height-90{height:90%}.width-90{width:90%}.height-100{height:100%}.width-100{width:100%}@-webkit-keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}}@keyframes rotate-90{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}}@keyframes rotate-180{0%{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}}@keyframes rotate-270{0%{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}to{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}}@-webkit-keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:transparent;z-index:0}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}}@keyframes rotate-360{0%{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:transparent;z-index:0}99%{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:transparent;z-index:0}to{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}}.segment:not(.segment-row):not(.segment-triangle).rotating{overflow:hidden}.segment:not(.segment-row):not(.segment-triangle).rotating.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):not(.segment-triangle).rotating.rotate-90>.child-container>.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):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-90>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.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):not(.segment-triangle).rotating.rotate-180>.child-container>.segment{-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):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-180>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.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):not(.segment-triangle).rotating.rotate-270>.child-container>.segment{-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):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-270>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.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):not(.segment-triangle).rotating.rotate-360>.child-container>.segment{-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):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-90{-webkit-animation-name:rotate-180;animation-name:rotate-180}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-180{-webkit-animation-name:rotate-270;animation-name:rotate-270}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-270{-webkit-animation-name:rotate-360;animation-name:rotate-360}.segment:not(.segment-row):not(.segment-triangle).rotating.rotate-360>.child-container>.segment.rotate-360{-webkit-animation-name:rotate-90;animation-name:rotate-90}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-90.rotating{-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):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-180.rotating{-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):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-270.rotating{-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):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-90>.child-container>.segment.rotate-360.rotating{-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):not(.segment-triangle):not(.rotating).rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-90.rotating{-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):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-180.rotating{-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):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-270.rotating{-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):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-180>.child-container>.segment.rotate-360.rotating{-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):not(.segment-triangle):not(.rotating).rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-90.rotating{-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):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-180.rotating{-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):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-270.rotating{-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):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-270>.child-container>.segment.rotate-360.rotating{-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):not(.segment-triangle):not(.rotating).rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment{-webkit-transform:rotate(0deg);transform:rotate(0deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-90.rotating{-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):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-180.rotating{-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):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-270.rotating{-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):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360{-webkit-transform:rotate(1turn);transform:rotate(1turn);background-color:#fff;z-index:1}.segment:not(.segment-row):not(.segment-triangle):not(.rotating).rotate-360>.child-container>.segment.rotate-360.rotating{-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}#level{white-space:nowrap;max-width:100%;overflow-y:visible}#level,#level *,.segment{-webkit-transition:none;transition:none}.segment{white-space:normal;cursor:pointer;display:inline-block;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:1;background-color:#fff;line-height:0}.segment.segment-row{display:block;width:100%;-webkit-animation:none!important;animation:none!important;white-space:nowrap}.segment.segment-leaf{min-width:1em;padding:.8em}.segment.segment-leaf:before{content:" ";display:block;padding-top:100%}.segment.segment-leaf .leaf-element{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-transform:translateY(50%);transform:translateY(50%)}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px;padding:1px}.segment.segment-triangle>.child-container>.segment-parent{border:3px solid #000;position:relative}.show-when-won{visibility:hidden}.show-when-won,.show-when-won *{-webkit-transition:none;transition:none}.won .show-when-won{visibility:initial} \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index c51d875..5a05ef3 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -3107,13 +3107,16 @@ class ParentSegment extends Segment { this.rotation %= 360; this._updateRotationClass(); - this.getLevel().checkHasWon(new Promise((resolve, reject) => { - this.element.addEventListener("animationend", resolve); - })); - // return new DelayPromise(250); - return new Promise(function (resolve) { + this.element.classList.add("rotating"); + + let self = this; + let delayPromise = new Promise(function (resolve) { setTimeout(resolve, 250); + }).then(()=>{ + self.element.classList.remove("rotating"); }); + this.getLevel().checkHasWon(delayPromise); + return delayPromise; } } @@ -3180,13 +3183,18 @@ class ParentSegment extends Segment { this._updateRotationClass(); const self = this; - this.element.onclick = function () { + this.element.onclick = function (e) { self.rotate(); + e.stopPropagation(); }; for (let i = 0, n = this.children.length; i < n; i++) { this.children[i]._updateElement(); childContainer.appendChild(this.children[i].getElement()); + if (i%2 === 1 && this.children.length-1 !== i) + { + childContainer.appendChild(document.createElement("br")); + } } } } @@ -3357,6 +3365,24 @@ class RowSegment extends ParentSegment{ } return rotations; } + + _updateElement() { + const childContainer = this.element.querySelector(".child-container"); + childContainer.removeAllChildren(); + + this._updateRotationClass(); + + const self = this; + this.element.onclick = function (e) { + self.rotate(); + e.stopPropagation(); + }; + + for (let i = 0, n = this.children.length; i < n; i++) { + this.children[i]._updateElement(); + childContainer.appendChild(this.children[i].getElement()); + } + } } class RowLevel extends Level { @@ -3425,11 +3451,11 @@ class SixWordsRowLevel extends Level { ) { let leafsWords = []; leafsWords[0] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[1] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[2] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[3] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[4] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[5] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); + leafsWords[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate()); + leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate()); + leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate()); + leafsWords[4] = Level._createLeafsForWord(this.words[4], this.templateContainer.copyLeafTemplate()); + leafsWords[5] = Level._createLeafsForWord(this.words[5], this.templateContainer.copyLeafTemplate()); let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate()); for (let i = 0, n = this.wordLength / 4; i < n; i++) { @@ -3492,8 +3518,13 @@ class SixWordsRowLevel extends Level { triangle.getElement().classList.add("type-1"); } else { - triangle.addChild(parents[0]); - triangle.addChild(parents[1]); + + let rowSegment = new RowSegment(this.templateContainer.copyRowTemplate()); + + rowSegment.addChild(parents[0]); + rowSegment.addChild(parents[1]); + + triangle.addChild(rowSegment); triangle.addChild(parent); parent.addChild(parents[2]); @@ -3510,12 +3541,18 @@ class SixWordsRowLevel extends Level { } } -class ThreeWordsRowLevel8 extends SixWordsRowLevel { +class SixWordsRowLevel8 extends SixWordsRowLevel { constructor(templateContainer) { super(templateContainer, 8); } } +class SixWordsRowLevel12 extends SixWordsRowLevel { + constructor(templateContainer) { + super(templateContainer, 12); + } +} + class LevelHelper { static setLevelType(typeId, level) { LevelHelper.types[typeId] = level; @@ -3545,7 +3582,8 @@ LevelHelper.types = { 20: SimpleLevel, 40: RowLevel8, 60: RowLevel10, - 100: ThreeWordsRowLevel8, + 100: SixWordsRowLevel8, + 140: SixWordsRowLevel12, }; class WordRotatorDb extends MyDb { @@ -3599,10 +3637,6 @@ class WordRotatorDb extends MyDb { } } - console.log("levels count:", newLevels.length); - console.log("new levels:", newLevels); - console.log("wrong levels:", wrongLevels); - if (newLevels.length === 0) { return null; } @@ -3689,8 +3723,8 @@ class LevelSite extends AbstractSite$1 { this._siteContent.classList.remove('won'); const db = WordRotatorDb.getInstance(); - const nextLevelJson = await db.loadNextLevel([20,40,60]); - // const nextLevelJson = await db.loadNextLevel([100]); + // const nextLevelJson = await db.loadNextLevel([20,40,60, 100]); + const nextLevelJson = await db.loadNextLevel([140]); if (nextLevelJson === null) { this.startSite(EndSite); return; diff --git a/src/module/Application/pwa/js/WordRotatorDb.js b/src/module/Application/pwa/js/WordRotatorDb.js index a28deed..119887d 100644 --- a/src/module/Application/pwa/js/WordRotatorDb.js +++ b/src/module/Application/pwa/js/WordRotatorDb.js @@ -51,10 +51,6 @@ export class WordRotatorDb extends MyDb { } } - console.log("levels count:", newLevels.length); - console.log("new levels:", newLevels); - console.log("wrong levels:", wrongLevels); - if (newLevels.length === 0) { return null; } diff --git a/src/module/Application/pwa/js/site/LevelSite.js b/src/module/Application/pwa/js/site/LevelSite.js index 3459c3e..87af456 100644 --- a/src/module/Application/pwa/js/site/LevelSite.js +++ b/src/module/Application/pwa/js/site/LevelSite.js @@ -69,8 +69,8 @@ export class LevelSite extends AbstractSite { this._siteContent.classList.remove('won'); const db = WordRotatorDb.getInstance(); - const nextLevelJson = await db.loadNextLevel([20,40,60]); - // const nextLevelJson = await db.loadNextLevel([100]); + // const nextLevelJson = await db.loadNextLevel([20,40,60, 100]); + const nextLevelJson = await db.loadNextLevel([140]); if (nextLevelJson === null) { this.startSite(EndSite); return; diff --git a/src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js b/src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js index d8967c1..18aa572 100644 --- a/src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js +++ b/src/module/Application/pwa/js/wordrotator/Level/LevelHelper.js @@ -1,7 +1,8 @@ import {SimpleLevel} from "./SimpleLevel"; import {RowLevel8} from "./RowLevel8"; import {RowLevel10} from "./RowLevel10"; -import {ThreeWordsRowLevel8} from "./ThreeWordsRowLevel8"; +import {SixWordsRowLevel8} from "./SixWordsRowLevel8"; +import {SixWordsRowLevel12} from "./SixWordsRowLevel12"; export class LevelHelper { static setLevelType(typeId, level) { @@ -32,5 +33,6 @@ LevelHelper.types = { 20: SimpleLevel, 40: RowLevel8, 60: RowLevel10, - 100: ThreeWordsRowLevel8, + 100: SixWordsRowLevel8, + 140: SixWordsRowLevel12, }; \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel.js b/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel.js index 3d6ec5f..92e21ed 100644 --- a/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel.js +++ b/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel.js @@ -21,11 +21,11 @@ export class SixWordsRowLevel extends Level { ) { let leafsWords = []; leafsWords[0] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[1] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[2] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[3] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[4] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); - leafsWords[5] = Level._createLeafsForWord(this.words[0], this.templateContainer.copyLeafTemplate()); + leafsWords[1] = Level._createLeafsForWord(this.words[1], this.templateContainer.copyLeafTemplate()); + leafsWords[2] = Level._createLeafsForWord(this.words[2], this.templateContainer.copyLeafTemplate()); + leafsWords[3] = Level._createLeafsForWord(this.words[3], this.templateContainer.copyLeafTemplate()); + leafsWords[4] = Level._createLeafsForWord(this.words[4], this.templateContainer.copyLeafTemplate()); + leafsWords[5] = Level._createLeafsForWord(this.words[5], this.templateContainer.copyLeafTemplate()); let rootSegment = new RowSegment(this.templateContainer.copyRowTemplate()); for (let i = 0, n = this.wordLength / 4; i < n; i++) { @@ -88,8 +88,13 @@ export class SixWordsRowLevel extends Level { triangle.getElement().classList.add("type-1"); } else { - triangle.addChild(parents[0]); - triangle.addChild(parents[1]); + + let rowSegment = new RowSegment(this.templateContainer.copyRowTemplate()); + + rowSegment.addChild(parents[0]); + rowSegment.addChild(parents[1]); + + triangle.addChild(rowSegment); triangle.addChild(parent); parent.addChild(parents[2]); diff --git a/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel12.js b/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel12.js new file mode 100644 index 0000000..406a9ca --- /dev/null +++ b/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel12.js @@ -0,0 +1,7 @@ +import {SixWordsRowLevel} from "./SixWordsRowLevel"; + +export class SixWordsRowLevel12 extends SixWordsRowLevel { + constructor(templateContainer) { + super(templateContainer, 12); + } +} \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Level/ThreeWordsRowLevel8.js b/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel8.js similarity index 68% rename from src/module/Application/pwa/js/wordrotator/Level/ThreeWordsRowLevel8.js rename to src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel8.js index 59171a9..ea3b0fd 100644 --- a/src/module/Application/pwa/js/wordrotator/Level/ThreeWordsRowLevel8.js +++ b/src/module/Application/pwa/js/wordrotator/Level/SixWordsRowLevel8.js @@ -1,6 +1,6 @@ import {SixWordsRowLevel} from "./SixWordsRowLevel"; -export class ThreeWordsRowLevel8 extends SixWordsRowLevel { +export class SixWordsRowLevel8 extends SixWordsRowLevel { constructor(templateContainer) { super(templateContainer, 8); } diff --git a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js index 3d47763..efad630 100644 --- a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js +++ b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js @@ -14,13 +14,16 @@ export class ParentSegment extends Segment { this.rotation %= 360; this._updateRotationClass(); - this.getLevel().checkHasWon(new Promise((resolve, reject) => { - this.element.addEventListener("animationend", resolve); - })); - // return new DelayPromise(250); - return new Promise(function (resolve) { + this.element.classList.add("rotating"); + + let self = this; + let delayPromise = new Promise(function (resolve) { setTimeout(resolve, 250); + }).then(()=>{ + self.element.classList.remove("rotating"); }); + this.getLevel().checkHasWon(delayPromise); + return delayPromise; } } @@ -87,13 +90,18 @@ export class ParentSegment extends Segment { this._updateRotationClass(); const self = this; - this.element.onclick = function () { + this.element.onclick = function (e) { self.rotate(); + e.stopPropagation(); }; for (let i = 0, n = this.children.length; i < n; i++) { this.children[i]._updateElement(); childContainer.appendChild(this.children[i].getElement()); + if (i%2 === 1 && this.children.length-1 !== i) + { + childContainer.appendChild(document.createElement("br")); + } } } } \ No newline at end of file diff --git a/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js index 036c362..3c365b4 100644 --- a/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js +++ b/src/module/Application/pwa/js/wordrotator/Segment/RowSegment.js @@ -10,4 +10,22 @@ export class RowSegment extends ParentSegment{ } return rotations; } + + _updateElement() { + const childContainer = this.element.querySelector(".child-container"); + childContainer.removeAllChildren(); + + this._updateRotationClass(); + + const self = this; + this.element.onclick = function (e) { + self.rotate(); + e.stopPropagation(); + }; + + for (let i = 0, n = this.children.length; i < n; i++) { + this.children[i]._updateElement(); + childContainer.appendChild(this.children[i].getElement()); + } + } } \ No newline at end of file diff --git a/src/scss/wordRotator.scss b/src/scss/wordRotator.scss index fa9e499..36101f6 100644 --- a/src/scss/wordRotator.scss +++ b/src/scss/wordRotator.scss @@ -1,4 +1,5 @@ $rotationDegrees: (90 180 270 360); +$animationDuration: 0.25s; @for $i from 1 through 10 { $value: percentage($i/10); @@ -32,29 +33,81 @@ $rotationDegrees: (90 180 270 360); } } -.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:not(.segment-row):not(.segment-triangle) { + &.rotating { + overflow: hidden; - .segment { - animation-name: rotate-#{450- nth($rotationDegrees, $i)}; - animation-duration: 0.25s; + @for $i from 1 through length($rotationDegrees) { + &.rotate-#{nth($rotationDegrees, $i)} { + animation-name: rotate-#{nth($rotationDegrees, $i)}; + animation-duration: $animationDuration; 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; + > .child-container { + > .segment { + animation-name: rotate-#{450- nth($rotationDegrees, $i)}; + animation-duration: $animationDuration; 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)+90; + &.rotate-#{nth($rotationDegrees, $j)} { + animation-name: rotate-#{$animationName}; + + } + } + } + } + } + } + } + + &:not(.rotating) { + @for $i from 1 through length($rotationDegrees) { + &.rotate-#{nth($rotationDegrees, $i)} { + transform: rotate(#{nth($rotationDegrees, $i)}deg); + background-color: white; + z-index: 1; + > .child-container { + > .segment { + transform: rotate(#{360- nth($rotationDegrees, $i)}deg); + background-color: white; + z-index: 1; + @for $j from 1 through length($rotationDegrees) { + $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360); + @if $animationName==0 { + $animationName: 360; + } + + &.rotate-#{nth($rotationDegrees, $j)} { + transform: rotate(#{$animationName}deg); + background-color: white; + z-index: 1; + &.rotating { + animation-name: rotate-#{$animationName}; + animation-duration: $animationDuration; + animation-fill-mode: forwards; + animation-timing-function: linear; + + > .child-container { + > .segment { + @if $animationName==360 { + $animationName: 0; + } + //animation-name: rotate-#{90+ $animationName}; + //animation-duration: 2.5s; + //animation-fill-mode: forwards; + //animation-direction: reverse; + //animation-timing-function: linear; + + } + } + } + } + } } } } @@ -66,6 +119,7 @@ $rotationDegrees: (90 180 270 360); white-space: nowrap; transition: none; max-width: 100%; + //width: 100%; * { transition: none; @@ -83,6 +137,7 @@ $rotationDegrees: (90 180 270 360); user-select: none; z-index: 1; background-color: white; + line-height: 0; &.segment-row { display: block; @@ -93,39 +148,35 @@ $rotationDegrees: (90 180 270 360); &.segment-leaf { min-width: 1em; - height: 2em; - line-height: 2em; + padding: 0.8em; + &:before { + content: " "; + display: block; + padding-top: 100%; + } + .leaf-element { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + transform: translateY(50%); + } } &.segment-parent { border: solid 1px #a9a9a9; border-radius: 3px; - > .child-container{ - > .segment { - width: 50%; - } - } - .segment { - //width: 50%; - //height: 50%; - } + padding: 1px; } &.segment-triangle { - //display: inline-block; - //width: 100%; - //animation: none !important; - - //&.type-1 { - // > .child-container { - // > .segment-parent:first-child { - // //width: 100%; - // } - // > .segment-parent:not(:first-child) { - // //width: 50%; - // } - // } - //} + > .child-container { + > .segment-parent { + border: solid 3px #000000; + position: relative; + } + } } }