From 2c3775308f6575377512609c4efd8da820c1f92a Mon Sep 17 00:00:00 2001 From: silas Date: Fri, 21 Sep 2018 17:09:02 +0200 Subject: [PATCH] =?UTF-8?q?Animationen=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/core/css/core.css | 774 +++++++----------- public/core/css/framework.css | 143 ++-- public/core/css/settingsSite.css | 21 +- public/css/wordRotator.css | 2 +- public/html/application/level.html | 2 +- public/js/app.js | 136 ++- public/pwaAssets/css/pwaAssets.css | 5 + .../sound/single_coin_fall_on_concrete_.mp3 | Bin 0 -> 24001 bytes src/js/lib/pwa-assets.js | 68 +- .../pwa/html/application/level.html | 18 +- .../Application/pwa/js/site/LevelSite.js | 67 +- .../js/wordrotator/Segment/ParentSegment.js | 1 - src/scss/_editStory.scss | 19 - src/scss/wordRotator.scss | 38 +- 14 files changed, 630 insertions(+), 664 deletions(-) create mode 100644 public/sound/single_coin_fall_on_concrete_.mp3 delete mode 100755 src/scss/_editStory.scss diff --git a/public/core/css/core.css b/public/core/css/core.css index f1f0bb0..905711c 100755 --- a/public/core/css/core.css +++ b/public/core/css/core.css @@ -5,8 +5,7 @@ * Licensed under MIT Open Source */ .top-bar-title { - white-space: nowrap; -} + white-space: nowrap; } #action-bar .close-listener { position: fixed; @@ -15,197 +14,136 @@ right: 0; bottom: 0; background: transparent; - z-index: 9000; -} + z-index: 9000; } #action-bar #responsive-menu .top-bar-right { position: relative; text-align: right; - width: 100%; -} + width: 100%; } #action-bar .top-bar-right { - width: auto; -} -#action-bar .top-bar-right .menu.action-bar a img + span { - display: none; -} -#action-bar .top-bar-right .menu.action-bar .action { - position: relative; - z-index: 9000; -} -#action-bar .top-bar-right .menu.action-bar .action.is-dropdown-submenu-parent { - z-index: 9001; -} -#action-bar .top-bar-right .menu.action-bar .action.hidden { - display: none; -} -@media screen and (max-width: 24.9375em) { - #action-bar .top-bar-right .menu.action-bar .action.smedium { - display: none; - } -} -@media screen and (max-width: 39.9375em) { - #action-bar .top-bar-right .menu.action-bar .action li { - display: table-cell; - } - #action-bar .top-bar-right .menu.action-bar .action.medium { - display: none; - } -} -@media screen and (max-width: 63.9375em) { - #action-bar .top-bar-right .menu.action-bar .action.large { - display: none; - } -} -#action-bar .top-bar-right .menu.action-bar .action.never { - display: none; -} -#action-bar .top-bar-right .menu.action-bar.hidden { - display: inline-block; - position: absolute; - z-index: 9000; - border: 1px solid #cacaca; - padding: 0.2rem; - transform: translateX(-100%); - text-align: left; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action.hidden { - display: none; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent { - z-index: 9001; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent ul.is-dropdown-submenu { - top: auto; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent ul.is-dropdown-submenu > li.action, #action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent ul.is-dropdown-submenu > .close-listener { - z-index: 9001; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent > a:after { - display: block; - width: 0; - height: 0; - border: 6px inset; - content: ""; - border-bottom-width: 0; - border-top-style: solid; - border-color: #ffffff transparent transparent; - right: 5px; - left: auto; - margin-top: -3px; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action a { - white-space: nowrap; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action a img { - display: none; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action a img + span { - display: inherit; -} -@media print, screen and (min-width: 40em) { - #action-bar .top-bar-right .menu.action-bar.hidden .action.medium { - display: none; - } -} -@media print, screen and (min-width: 25em) { - #action-bar .top-bar-right .menu.action-bar.hidden .action.smedium { - display: none; - } -} -@media print, screen and (min-width: 64em) { - #action-bar .top-bar-right .menu.action-bar.hidden .action.large { - display: none; - } -} -@media screen and (max-width: 24.9375em) { - #action-bar .top-bar-right .menu.action-bar.hidden .action.smedium { - display: block; - } - #action-bar .top-bar-right .menu.action-bar.hidden .action.smedium.hidden { - display: none; - } -} -@media screen and (max-width: 39.9375em) { - #action-bar .top-bar-right .menu.action-bar.hidden .action.medium { - display: block; - } - #action-bar .top-bar-right .menu.action-bar.hidden .action.medium.hidden { - display: none; - } -} -@media screen and (max-width: 63.9375em) { - #action-bar .top-bar-right .menu.action-bar.hidden .action.large { - display: block; - } - #action-bar .top-bar-right .menu.action-bar.hidden .action.large.hidden { - display: none; - } -} -#action-bar .top-bar-right .menu.action-bar.hidden .action.never { - display: block; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action.never.hidden { - display: none; -} -#action-bar .top-bar-right .menu.action-bar.hidden .action.always { - display: none; -} -#action-bar .top-bar-right .menu .action { - z-index: 100; -} -@media screen and (max-width: 39.9375em) { - #action-bar .top-bar-right .menu .action a { - width: 100%; - } -} -@media screen and (max-width: 39.9375em) { - #action-bar .top-bar-right .menu .action a { - padding-left: 0.68rem; - } -} -@media screen and (max-width: 24.9375em) { - #action-bar .top-bar-right .menu .action a { - padding-left: 0.236rem; - } -} -@media screen and (max-width: 39.9375em) { - #action-bar .top-bar-right .menu .action:not(.is-dropdown-submenu-parent) a { - padding-right: 0.68rem; - } -} -@media screen and (max-width: 24.9375em) { - #action-bar .top-bar-right .menu .action:not(.is-dropdown-submenu-parent) a { - padding-right: 0.236rem; - } -} -#action-bar .top-bar-right .menu .action.img a { - padding-top: 0; -} -#action-bar .top-bar-right .menu .action.img a img { - vertical-align: inherit; - max-height: 1.4rem; -} -#action-bar .top-bar-right .menu > li > ul.is-dropdown-submenu { - min-width: 0; -} -#action-bar .top-bar-right .menu > li > ul.is-dropdown-submenu .action { - display: inherit; -} -#action-bar .top-bar-right .menu > li.opens-right > ul.is-dropdown-submenu { - right: auto; - left: auto; -} -#action-bar .top-bar-right .menu > li.opens-right > ul.is-dropdown-submenu a { - text-align: left; -} + width: auto; } + #action-bar .top-bar-right .menu.action-bar a img + span { + display: none; } + #action-bar .top-bar-right .menu.action-bar .action { + position: relative; + z-index: 9000; } + #action-bar .top-bar-right .menu.action-bar .action.is-dropdown-submenu-parent { + z-index: 9001; } + #action-bar .top-bar-right .menu.action-bar .action.hidden { + display: none; } + @media screen and (max-width: 24.9375em) { + #action-bar .top-bar-right .menu.action-bar .action.smedium { + display: none; } } + @media screen and (max-width: 39.9375em) { + #action-bar .top-bar-right .menu.action-bar .action li { + display: table-cell; } + #action-bar .top-bar-right .menu.action-bar .action.medium { + display: none; } } + @media screen and (max-width: 63.9375em) { + #action-bar .top-bar-right .menu.action-bar .action.large { + display: none; } } + #action-bar .top-bar-right .menu.action-bar .action.never { + display: none; } + #action-bar .top-bar-right .menu.action-bar.hidden { + display: inline-block; + position: absolute; + z-index: 9000; + border: 1px solid #cacaca; + padding: 0.2rem; + transform: translateX(-100%); + text-align: left; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.hidden { + display: none; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent { + z-index: 9001; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent ul.is-dropdown-submenu { + top: auto; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent ul.is-dropdown-submenu > li.action, #action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent ul.is-dropdown-submenu > .close-listener { + z-index: 9001; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.is-dropdown-submenu-parent > a:after { + display: block; + width: 0; + height: 0; + border: 6px inset; + content: ""; + border-bottom-width: 0; + border-top-style: solid; + border-color: #ffffff transparent transparent; + right: 5px; + left: auto; + margin-top: -3px; } + #action-bar .top-bar-right .menu.action-bar.hidden .action a { + white-space: nowrap; } + #action-bar .top-bar-right .menu.action-bar.hidden .action a img { + display: none; } + #action-bar .top-bar-right .menu.action-bar.hidden .action a img + span { + display: inherit; } + @media print, screen and (min-width: 40em) { + #action-bar .top-bar-right .menu.action-bar.hidden .action.medium { + display: none; } } + @media print, screen and (min-width: 25em) { + #action-bar .top-bar-right .menu.action-bar.hidden .action.smedium { + display: none; } } + @media print, screen and (min-width: 64em) { + #action-bar .top-bar-right .menu.action-bar.hidden .action.large { + display: none; } } + @media screen and (max-width: 24.9375em) { + #action-bar .top-bar-right .menu.action-bar.hidden .action.smedium { + display: block; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.smedium.hidden { + display: none; } } + @media screen and (max-width: 39.9375em) { + #action-bar .top-bar-right .menu.action-bar.hidden .action.medium { + display: block; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.medium.hidden { + display: none; } } + @media screen and (max-width: 63.9375em) { + #action-bar .top-bar-right .menu.action-bar.hidden .action.large { + display: block; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.large.hidden { + display: none; } } + #action-bar .top-bar-right .menu.action-bar.hidden .action.never { + display: block; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.never.hidden { + display: none; } + #action-bar .top-bar-right .menu.action-bar.hidden .action.always { + display: none; } + #action-bar .top-bar-right .menu .action { + z-index: 100; } + @media screen and (max-width: 39.9375em) { + #action-bar .top-bar-right .menu .action a { + width: 100%; } } + @media screen and (max-width: 39.9375em) { + #action-bar .top-bar-right .menu .action a { + padding-left: 0.68rem; } } + @media screen and (max-width: 24.9375em) { + #action-bar .top-bar-right .menu .action a { + padding-left: 0.236rem; } } + @media screen and (max-width: 39.9375em) { + #action-bar .top-bar-right .menu .action:not(.is-dropdown-submenu-parent) a { + padding-right: 0.68rem; } } + @media screen and (max-width: 24.9375em) { + #action-bar .top-bar-right .menu .action:not(.is-dropdown-submenu-parent) a { + padding-right: 0.236rem; } } + #action-bar .top-bar-right .menu .action.img a { + padding-top: 0; } + #action-bar .top-bar-right .menu .action.img a img { + vertical-align: inherit; + max-height: 1.4rem; } + #action-bar .top-bar-right .menu > li > ul.is-dropdown-submenu { + min-width: 0; } + #action-bar .top-bar-right .menu > li > ul.is-dropdown-submenu .action { + display: inherit; } + #action-bar .top-bar-right .menu > li.opens-right > ul.is-dropdown-submenu { + right: auto; + left: auto; } + #action-bar .top-bar-right .menu > li.opens-right > ul.is-dropdown-submenu a { + text-align: left; } .dropdown.menu > li.is-dropdown-submenu-parent > a:after { - border-color: #ffffff transparent transparent; -} + border-color: #ffffff transparent transparent; } form { - position: relative; -} + position: relative; } .sending .sending-loader { position: absolute; @@ -219,103 +157,83 @@ form { bottom: 0; right: 0; z-index: 10; - border-radius: 2px; -} -.sending .sending-loader .loader { - position: absolute; -} + border-radius: 2px; } + .sending .sending-loader .loader { + position: absolute; } .sending-loader { - display: none; -} + display: none; } input.notEmpty:invalid { - background-color: lightcoral; -} + background-color: lightcoral; } label { - position: relative; -} -label [type=text], label [type=password], label [type=date], label [type=datetime], label [type=datetime-local], label [type=month], label [type=week], label [type=email], label [type=number], label [type=search], label [type=tel], label [type=time], label [type=url], label [type=color], label textarea, label input[type=text], label input:not([type]) { - display: block; - width: 100%; - height: 2.4375rem; - margin: 0 0 1rem; - padding: 0.5rem; - box-shadow: none !important; - font-size: 1rem; - font-weight: normal; - line-height: 1.5; - border: none; - border-bottom: solid black; - outline: 0; - margin-bottom: 15px; -} -label [type=text]:focus, label [type=password]:focus, label [type=date]:focus, label [type=datetime]:focus, label [type=datetime-local]:focus, label [type=month]:focus, label [type=week]:focus, label [type=email]:focus, label [type=number]:focus, label [type=search]:focus, label [type=tel]:focus, label [type=time]:focus, label [type=url]:focus, label [type=color]:focus, label textarea:focus, label input[type=text]:focus, label input:not([type]):focus { - border: none; - box-shadow: none !important; - border-bottom: solid black; -} -label [type=text]:focus ~ span, label [type=text].notEmpty:not(:focus) ~ span, label [type=password]:focus ~ span, label [type=password].notEmpty:not(:focus) ~ span, label [type=date]:focus ~ span, label [type=date].notEmpty:not(:focus) ~ span, label [type=datetime]:focus ~ span, label [type=datetime].notEmpty:not(:focus) ~ span, label [type=datetime-local]:focus ~ span, label [type=datetime-local].notEmpty:not(:focus) ~ span, label [type=month]:focus ~ span, label [type=month].notEmpty:not(:focus) ~ span, label [type=week]:focus ~ span, label [type=week].notEmpty:not(:focus) ~ span, label [type=email]:focus ~ span, label [type=email].notEmpty:not(:focus) ~ span, label [type=number]:focus ~ span, label [type=number].notEmpty:not(:focus) ~ span, label [type=search]:focus ~ span, label [type=search].notEmpty:not(:focus) ~ span, label [type=tel]:focus ~ span, label [type=tel].notEmpty:not(:focus) ~ span, label [type=time]:focus ~ span, label [type=time].notEmpty:not(:focus) ~ span, label [type=url]:focus ~ span, label [type=url].notEmpty:not(:focus) ~ span, label [type=color]:focus ~ span, label [type=color].notEmpty:not(:focus) ~ span, label textarea:focus ~ span, label textarea.notEmpty:not(:focus) ~ span, label input[type=text]:focus ~ span, label input[type=text].notEmpty:not(:focus) ~ span, label input:not([type]):focus ~ span, label input:not([type]).notEmpty:not(:focus) ~ span { - top: -11px; - left: 0; - bottom: 0; - font-size: 11px; - opacity: 1; - color: black; -} -label [type=text] ~ span, label [type=password] ~ span, label [type=date] ~ span, label [type=datetime] ~ span, label [type=datetime-local] ~ span, label [type=month] ~ span, label [type=week] ~ span, label [type=email] ~ span, label [type=number] ~ span, label [type=search] ~ span, label [type=tel] ~ span, label [type=time] ~ span, label [type=url] ~ span, label [type=color] ~ span, label textarea ~ span, label input[type=text] ~ span, label input:not([type]) ~ span { - position: absolute; - pointer-events: none; - left: 10px; - bottom: 10px; - top: 7px; - transition: 0.2s ease all; - color: #626262; -} + position: relative; } + label [type='text'], label [type='password'], label [type='date'], label [type='datetime'], label [type='datetime-local'], label [type='month'], label [type='week'], label [type='email'], label [type='number'], label [type='search'], label [type='tel'], label [type='time'], label [type='url'], label [type='color'], label textarea, label input[type=text], label input:not([type]) { + display: block; + width: 100%; + height: 2.4375rem; + margin: 0 0 1rem; + padding: 0.5rem; + box-shadow: none !important; + font-size: 1rem; + font-weight: normal; + line-height: 1.5; + border: none; + border-bottom: solid black; + outline: 0; + margin-bottom: 15px; } + label [type='text']:focus, label [type='password']:focus, label [type='date']:focus, label [type='datetime']:focus, label [type='datetime-local']:focus, label [type='month']:focus, label [type='week']:focus, label [type='email']:focus, label [type='number']:focus, label [type='search']:focus, label [type='tel']:focus, label [type='time']:focus, label [type='url']:focus, label [type='color']:focus, label textarea:focus, label input[type=text]:focus, label input:not([type]):focus { + border: none; + box-shadow: none !important; + border-bottom: solid black; } + label [type='text']:focus ~ span, label [type='text'].notEmpty:not(:focus) ~ span, label [type='password']:focus ~ span, label [type='password'].notEmpty:not(:focus) ~ span, label [type='date']:focus ~ span, label [type='date'].notEmpty:not(:focus) ~ span, label [type='datetime']:focus ~ span, label [type='datetime'].notEmpty:not(:focus) ~ span, label [type='datetime-local']:focus ~ span, label [type='datetime-local'].notEmpty:not(:focus) ~ span, label [type='month']:focus ~ span, label [type='month'].notEmpty:not(:focus) ~ span, label [type='week']:focus ~ span, label [type='week'].notEmpty:not(:focus) ~ span, label [type='email']:focus ~ span, label [type='email'].notEmpty:not(:focus) ~ span, label [type='number']:focus ~ span, label [type='number'].notEmpty:not(:focus) ~ span, label [type='search']:focus ~ span, label [type='search'].notEmpty:not(:focus) ~ span, label [type='tel']:focus ~ span, label [type='tel'].notEmpty:not(:focus) ~ span, label [type='time']:focus ~ span, label [type='time'].notEmpty:not(:focus) ~ span, label [type='url']:focus ~ span, label [type='url'].notEmpty:not(:focus) ~ span, label [type='color']:focus ~ span, label [type='color'].notEmpty:not(:focus) ~ span, label textarea:focus ~ span, label textarea.notEmpty:not(:focus) ~ span, label input[type=text]:focus ~ span, label input[type=text].notEmpty:not(:focus) ~ span, label input:not([type]):focus ~ span, label input:not([type]).notEmpty:not(:focus) ~ span { + top: -11px; + left: 0; + bottom: 0; + font-size: 11px; + opacity: 1; + color: black; } + label [type='text'] ~ span, label [type='password'] ~ span, label [type='date'] ~ span, label [type='datetime'] ~ span, label [type='datetime-local'] ~ span, label [type='month'] ~ span, label [type='week'] ~ span, label [type='email'] ~ span, label [type='number'] ~ span, label [type='search'] ~ span, label [type='tel'] ~ span, label [type='time'] ~ span, label [type='url'] ~ span, label [type='color'] ~ span, label textarea ~ span, label input[type=text] ~ span, label input:not([type]) ~ span { + position: absolute; + pointer-events: none; + left: 10px; + bottom: 10px; + top: 7px; + transition: 0.2s ease all; + color: #626262; } .listjs { - position: relative; -} -.listjs label { - display: inline-block; -} -.listjs label input { - margin-bottom: 0; -} -.listjs table { - border-collapse: collapse; -} -.listjs table thead tr th, .listjs table tfoot tr th { - text-align: left; -} -.listjs table thead tr th.sort, .listjs table tfoot tr th.sort { - cursor: pointer; -} -.listjs table tbody.list tr:first-child td { - border-top: solid 1px #696969; -} -.listjs table tbody.list tr:last-child td { - border-bottom: solid 1px #696969; -} -.listjs table tbody.list tr td { - border-top: solid 1px #c8c8c8; - padding: 0.3rem; -} -.listjs ul.pagination { - float: right; - display: inline-block; - margin: 0; -} -.listjs ul.pagination li { - display: inline-block; - padding-left: 5px; - padding-right: 5px; - text-decoration: underline; -} -.listjs ul.pagination li.active, .listjs ul.pagination li.disabled { - text-decoration: none; -} + position: relative; } + .listjs label { + display: inline-block; } + .listjs label input { + margin-bottom: 0; } + .listjs table { + border-collapse: collapse; } + .listjs table thead tr th, .listjs table tfoot tr th { + text-align: left; } + .listjs table thead tr th.sort, .listjs table tfoot tr th.sort { + cursor: pointer; } + .listjs table tbody.list tr:first-child td { + border-top: solid 1px #696969; } + .listjs table tbody.list tr:last-child td { + border-bottom: solid 1px #696969; } + .listjs table tbody.list tr td { + border-top: solid 1px #c8c8c8; + padding: 0.3rem; } + .listjs ul.pagination { + float: right; + display: inline-block; + margin: 0; } + .listjs ul.pagination li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + text-decoration: underline; } + .listjs ul.pagination li.active, .listjs ul.pagination li.disabled { + text-decoration: none; } + /** * Foundation for Sites by ZURB * Version 6.4.3 @@ -323,21 +241,18 @@ label [type=text] ~ span, label [type=password] ~ span, label [type=date] ~ span * Licensed under MIT Open Source */ *, :after, :before { - box-sizing: inherit; -} + box-sizing: inherit; } html { min-height: 100%; width: 100%; height: 100%; font-size: 18px; - letter-spacing: 1px; -} + letter-spacing: 1px; } .max-height { height: 100%; - min-height: 100%; -} + min-height: 100%; } body { margin: 0; @@ -350,19 +265,16 @@ body { display: flex; flex-direction: column; background: #fefefe; - color: #0a0a0a; -} + color: #0a0a0a; } footer { border-top: #d8d8d8 solid 1px; - text-align: center; -} + text-align: center; } .top-bar .top-bar-title strong { vertical-align: middle; display: inline-block; - /*margin-left: 8px;*/ -} + /*margin-left: 8px;*/ } nav.top-bar { color: #FFF; @@ -370,52 +282,40 @@ nav.top-bar { font-size: 20px; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 2px 9px 1px rgba(0, 0, 0, 0.12), 0 4px 2px -2px rgba(0, 0, 0, 0.2); padding: 0.6rem; - display: block; -} + display: block; } .top-bar ul { - background: red !important; -} + background: red !important; } button.button, a.button { border-radius: 2px; - background-color: red; -} -button.button.disabled, button.button.disabled:hover, button.button.disabled:focus, a.button.disabled, a.button.disabled:hover, a.button.disabled:focus { - background-color: red; -} -button.button:focus, button.button:hover, a.button:focus, a.button:hover { - background-color: #e00000; -} + background-color: red; } + button.button.disabled, button.button.disabled:hover, button.button.disabled:focus, a.button.disabled, a.button.disabled:hover, a.button.disabled:focus { + background-color: red; } + button.button:focus, button.button:hover, a.button:focus, a.button:hover { + background-color: #e00000; } .fill-me { display: flex; - flex-direction: column; -} -.fill-me.vertical { - flex-direction: row; -} -.fill-me .grow { - flex: 1; -} + flex-direction: column; } + .fill-me.vertical { + flex-direction: row; } + .fill-me .grow { + flex: 1; } .flex-center { flex-direction: column; justify-content: center; display: flex; - align-items: center; -} -.flex-center > * { - max-height: 100%; -} + align-items: center; } + .flex-center > * { + max-height: 100%; } .menu a, .dropdown.menu a { - padding: 0.4rem 0.5rem; -} + padding: 0.4rem 0.5rem; } svg path { - fill: currentColor; -} + fill: currentColor; } div.mainContainer { position: relative; @@ -423,52 +323,42 @@ div.mainContainer { max-width: 100%; overflow: auto; flex: 1; - margin: 0.5rem; -} -div.mainContainer > .row, div.mainContainer #main-content, div.mainContainer #site-content { - position: absolute; - width: 100%; - height: 100%; - top: 0; - bottom: 0; - left: 0; - right: 0; -} + margin: 0.5rem; } + div.mainContainer > .row, div.mainContainer #main-content, div.mainContainer #site-content { + position: absolute; + width: 100%; + height: 100%; + top: 0; + bottom: 0; + left: 0; + right: 0; } .inline-block { - display: inline-block; -} + display: inline-block; } .right { - float: right; -} + float: right; } #logo-img { - max-height: 2.2rem; -} + max-height: 2.2rem; } a { text-decoration: none; cursor: pointer; - color: inherit; -} + color: inherit; } a.hidden-link { text-decoration: none; - color: inherit; -} + color: inherit; } label { - cursor: pointer; -} + cursor: pointer; } .align-right { - text-align: right; -} + text-align: right; } .view-panel { - display: none; -} + display: none; } .loader { left: 50%; @@ -476,212 +366,160 @@ label { position: fixed; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); - text-align: center; -} -.loader.inline { - left: initial; - top: initial; - position: initial; - -webkit-transform: initial; - transform: initial; - text-align: center; - display: inline; -} -.loader.small #spinner { - transform: scale(0.5); -} -.loader #spinner { - box-sizing: border-box; - stroke: #b71c1a; - stroke-width: 3px; - transform-origin: 50%; - animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; -} + text-align: center; } + .loader.inline { + left: initial; + top: initial; + position: initial; + -webkit-transform: initial; + transform: initial; + text-align: center; + display: inline; } + .loader.small #spinner { + transform: scale(0.5); } + .loader #spinner { + box-sizing: border-box; + stroke: #b71c1a; + stroke-width: 3px; + transform-origin: 50%; + animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; } @keyframes rotate { from { - transform: rotate(0); - } + transform: rotate(0); } to { - transform: rotate(450deg); - } -} + transform: rotate(450deg); } } @keyframes line { 0% { stroke-dasharray: 2, 85.964; - transform: rotate(0); - } + transform: rotate(0); } 50% { stroke-dasharray: 65.973, 21.9911; - stroke-dashoffset: 0; - } + stroke-dashoffset: 0; } 100% { stroke-dasharray: 2, 85.964; stroke-dashoffset: -65.973; - transform: rotate(90deg); - } -} + transform: rotate(90deg); } } #print-content { - display: none; -} + display: none; } .action-button { max-height: 1.7rem; margin-left: 0.4rem; - margin-right: 0.4rem; -} -.action-button:hover { - background: #e8e8e8; -} + margin-right: 0.4rem; } + .action-button:hover { + background: #e8e8e8; } .vcenter-container { width: 100%; height: 100%; - display: table; -} -.vcenter-container .vcenter { - vertical-align: middle; - display: table-cell; - flex-direction: column; - justify-content: center; -} + display: table; } + .vcenter-container .vcenter { + vertical-align: middle; + display: table-cell; + flex-direction: column; + justify-content: center; } .max-width { - width: 100%; -} + width: 100%; } input, button { - letter-spacing: 1px !important; -} + letter-spacing: 1px !important; } .no-padding { padding: 0; - border: 0; -} + border: 0; } .center { - text-align: center; -} + text-align: center; } @media print { nav, .mainContainer, footer, #styles { - display: none !important; - } + display: none !important; } #print-content { - display: block !important; - } -} + display: block !important; } } .overflow-y-auto { - overflow-y: auto !important; -} + overflow-y: auto !important; } .row.no-after:after { - content: initial; -} + content: initial; } .margin-bottom { - margin-bottom: 1rem; -} -@media print, screen and (min-width: 25em) { - .margin-bottom { - margin-bottom: 2rem; - } -} -@media print, screen and (min-width: 40em) { - .margin-bottom { - margin-bottom: 3rem; - } -} -@media print, screen and (min-width: 64em) { - .margin-bottom { - margin-bottom: 4rem; - } -} -@media screen and (min-width: 75em) { - .margin-bottom { - margin-bottom: 5rem; - } -} + margin-bottom: 1rem; } + @media print, screen and (min-width: 25em) { + .margin-bottom { + margin-bottom: 2rem; } } + @media print, screen and (min-width: 40em) { + .margin-bottom { + margin-bottom: 3rem; } } + @media print, screen and (min-width: 64em) { + .margin-bottom { + margin-bottom: 4rem; } } + @media screen and (min-width: 75em) { + .margin-bottom { + margin-bottom: 5rem; } } .font-small { - font-size: 0.7em; -} + font-size: 0.7em; } .border-bottom { - border-bottom: 1px solid #cacaca; -} + border-bottom: 1px solid #cacaca; } .border-right { - border-right: 1px solid #cacaca; -} + border-right: 1px solid #cacaca; } .border-left { - border-left: 1px solid #cacaca; -} + border-left: 1px solid #cacaca; } img.logo { vertical-align: inherit; display: inline-block; height: auto; max-width: 1.1rem; - margin-right: 2px; -} + margin-right: 2px; } .align-center { - text-align: center; -} + text-align: center; } hr.separator { - margin: 1rem 0; -} + margin: 1rem 0; } .button-line { - display: flex; -} -.button-line .button { - flex: 1; - margin-left: 1px; - margin-right: 1px; - padding: 0.5rem 0.77rem; -} + display: flex; } + .button-line .button { + flex: 1; + margin-left: 1px; + margin-right: 1px; + padding: 0.5rem 0.77rem; } @media screen and (max-width: 24.9375em) { .small-small { - font-size: small; - } -} + font-size: small; } } select { border: 0; - padding: 0.3rem 0.3rem; -} + padding: 0.3rem 0.3rem; } .share-icon { max-width: 1.5rem; - margin: 0.1rem; -} + margin: 0.1rem; } .hidden { - display: none; -} + display: none; } .no-transition { - transition: none !important; -} + transition: none !important; } img.action-image { max-height: 1.4rem; - cursor: pointer; -} + cursor: pointer; } img.back-button { max-height: 0.6rem; margin-right: 0.2rem; cursor: pointer; - vertical-align: inherit; -} + vertical-align: inherit; } .no-margin-bottom { - margin-bottom: 0; -} + margin-bottom: 0; } diff --git a/public/core/css/framework.css b/public/core/css/framework.css index 211dcae..3a68d2b 100755 --- a/public/core/css/framework.css +++ b/public/core/css/framework.css @@ -8,85 +8,64 @@ overflow: auto; background-color: black; /* Fallback color */ - background-color: rgba(0, 0, 0, 0.56); -} -.background .modal { - position: relative; - top: 50%; - margin: auto; - width: 80%; - background-color: #fefefe; - transform: translateY(-50%); - padding: 0.5rem; - display: flex; - flex-direction: column; - max-height: 80%; - max-width: 1024px; -} -@media screen and (max-width: 63.9375em) { - .background .modal.small-margin { - width: 90%; - } -} -@media screen and (max-width: 24.9375em) { - .background .modal.small-margin { - width: 95%; - } -} -.background .modal.max-small { - max-width: 0; -} -.background .modal.max-smedium { - max-width: 400px; -} -.background .modal.max-medium { - max-width: 640px; -} -.background .modal.max-large { - max-width: 1024px; -} -.background .modal.max-xlarge { - max-width: 1200px; -} -.background .modal.max-xxlarge { - max-width: 1440px; -} -.background .modal .title { - font-weight: bold; - padding-bottom: 0.5rem; -} -.background .modal .content-container { - overflow-y: auto; - max-height: 100%; -} -.background .modal .content-container .loader { - position: static; - transform: none; -} -.background .modal .close { - text-align: right; - color: #aaa; - float: right; - font-size: 28px; - font-weight: bold; - line-height: 1; -} -.background .modal .close:hover, .background .modal .close:focus { - color: black; - text-decoration: none; - cursor: pointer; -} -.background .modal .modal-button-container { - padding-top: 0.5rem; -} -.background .modal .modal-button-container .button { - margin-left: 0.2rem; - margin-bottom: 0 !important; - padding: 0.6em 0.8em; -} -@media screen and (max-width: 24.9375em) { - .background .modal .modal-button-container .button { - margin-left: 0.1rem; - padding: 0.3em 0.5em; - } -} + background-color: rgba(0, 0, 0, 0.56); } + .background .modal { + position: relative; + top: 50%; + margin: auto; + width: 80%; + background-color: #fefefe; + transform: translateY(-50%); + padding: 0.5rem; + display: flex; + flex-direction: column; + max-height: 80%; + max-width: 1024px; } + @media screen and (max-width: 63.9375em) { + .background .modal.small-margin { + width: 90%; } } + @media screen and (max-width: 24.9375em) { + .background .modal.small-margin { + width: 95%; } } + .background .modal.max-small { + max-width: 0; } + .background .modal.max-smedium { + max-width: 400px; } + .background .modal.max-medium { + max-width: 640px; } + .background .modal.max-large { + max-width: 1024px; } + .background .modal.max-xlarge { + max-width: 1200px; } + .background .modal.max-xxlarge { + max-width: 1440px; } + .background .modal .title { + font-weight: bold; + padding-bottom: 0.5rem; } + .background .modal .content-container { + overflow-y: auto; + max-height: 100%; } + .background .modal .content-container .loader { + position: static; + transform: none; } + .background .modal .close { + text-align: right; + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + line-height: 1; } + .background .modal .close:hover, .background .modal .close:focus { + color: black; + text-decoration: none; + cursor: pointer; } + .background .modal .modal-button-container { + padding-top: 0.5rem; } + .background .modal .modal-button-container .button { + margin-left: 0.2rem; + margin-bottom: 0 !important; + padding: 0.6em 0.8em; } + @media screen and (max-width: 24.9375em) { + .background .modal .modal-button-container .button { + margin-left: 0.1rem; + padding: 0.3em 0.5em; } } diff --git a/public/core/css/settingsSite.css b/public/core/css/settingsSite.css index c77a997..3a7ff58 100755 --- a/public/core/css/settingsSite.css +++ b/public/core/css/settingsSite.css @@ -7,16 +7,11 @@ .settings-container { border: 1px solid black; border-radius: 2px; - padding: 0.3rem; -} -@media print, screen and (min-width: 40em) { - .settings-container #settings-fragments-container { - border-left: 1px solid #cacaca; - } -} -.settings-container #settings-fragments-container #settings-fragments > * { - display: none; -} -.settings-container #settings-fragments-container #settings-fragments > *.active { - display: block; -} + padding: 0.3rem; } + @media print, screen and (min-width: 40em) { + .settings-container #settings-fragments-container { + border-left: 1px solid #cacaca; } } + .settings-container #settings-fragments-container #settings-fragments > * { + display: none; } + .settings-container #settings-fragments-container #settings-fragments > *.active { + display: block; } diff --git a/public/css/wordRotator.css b/public/css/wordRotator.css index 4f0f09b..415c55c 100755 --- a/public/css/wordRotator.css +++ b/public/css/wordRotator.css @@ -1,2 +1,2 @@ -nav.top-bar.title-bar{padding:.3rem .6rem 0}#action-bar .top-bar-right .menu .action.img a{padding-bottom:0}#action-bar .top-bar-right .menu .action.img a img{max-height:1.8rem}.dropdown.menu a,.menu a{padding:.2rem .5rem}#level-number-container{-webkit-transition:none;transition:none;position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);border:3px solid #fff;border-radius:50%;visibility:hidden;display:table-cell;height:35px;width:35px;text-align:center;vertical-align:middle}#level-number-container.visible{visibility:visible}#level-number-container #level-number{-webkit-transition:none;transition:none;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700}.coin-counter{display:inline-block;position:relative;font-size:1.6rem}.coin-counter :after{background-image:url(../img/coinTower.png);background-size:28px 28px;width:28px;height:28px;display:inline-block;content:""}#coin-container .coin{margin:3px;max-width:30px;display:inline-block}.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)}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):not(.segment-triangle).rotating{z-index:10!important;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;z-index:1}.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,.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;z-index:1}.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;z-index:1}.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{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;max-width:100%;-webkit-tap-highlight-color:rgba(255,255,255,0);overflow-y:visible}#level,#level *,.segment{-webkit-transition:none;transition:none}.segment{vertical-align:top;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{background-color:transparent;min-width:1em;padding:.8em}.segment.segment-leaf:before{content:" ";display:block;padding-top:100%}.segment.segment-leaf .leaf-element{position:absolute;width:100%;height:100%;line-height:1.5em;top:0;left:0}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px;padding:1px}.segment.segment-parent.layer-2{border:3px solid #000}#site-content>:not(.won) .segment.locked,#site-content>:not(.won) .segment.locked>.child-container>.segment-leaf{border-color:#3adb76;background-color:#9ffbb5!important}.show-when-won{display:none}.show-when-won,.show-when-won *{-webkit-transition:none;transition:none}.won .show-when-won{display:-webkit-box;display:-ms-flexbox;display:flex}.won .show-while-playing{display:none}.text-right{text-align:right} +nav.top-bar.title-bar{padding:.3rem .6rem 0}#action-bar .top-bar-right .menu .action.img a{padding-bottom:0}#action-bar .top-bar-right .menu .action.img a img{max-height:1.8rem}.dropdown.menu a,.menu a{padding:.2rem .5rem}#level-number-container{-webkit-transition:none;transition:none;position:absolute;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);border:3px solid #fff;border-radius:50%;visibility:hidden;display:table-cell;height:35px;width:35px;text-align:center;vertical-align:middle}#level-number-container.visible{visibility:visible}#level-number-container #level-number{-webkit-transition:none;transition:none;position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);font-weight:700}.coin-counter{display:inline-block;position:relative;font-size:1.6rem}.coin-counter :after{background-image:url(../img/coinTower.png);background-size:28px 28px;width:28px;height:28px;display:inline-block;content:""}#coin-container{height:30px}#coin-container .coin{margin-left:3px;margin-right:3px;max-width:30px;display:inline-block}.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)}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):not(.segment-triangle).rotating{z-index:10!important;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;z-index:1}.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,.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;z-index:1}.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;z-index:1}.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{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;max-width:100%;-webkit-tap-highlight-color:rgba(255,255,255,0);overflow-y:visible}#level,#level *,.segment{-webkit-transition:none;transition:none}.segment{vertical-align:top;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{background-color:transparent;min-width:1em;padding:.8em}.segment.segment-leaf:before{content:" ";display:block;padding-top:100%}.segment.segment-leaf .leaf-element{position:absolute;width:100%;height:100%;line-height:1.5em;top:0;left:0}.segment.segment-parent{border:1px solid #a9a9a9;border-radius:3px;padding:1px}.segment.segment-parent.layer-2{border:3px solid #000}#site-content>:not(.won) .segment.locked,#site-content>:not(.won) .segment.locked>.child-container>.segment-leaf{border-color:#3adb76;background-color:#9ffbb5!important}#site-content>:not(.won) .show-when-won{display:none}.level-container{height:100%;-webkit-transition:none;transition:none}.won .level-container{height:60%}.won .show-while-playing{display:none}.text-right{text-align:right} /*# sourceMappingURL=wordRotator.css.map */ \ No newline at end of file diff --git a/public/html/application/level.html b/public/html/application/level.html index 10d36f6..16a6d53 100755 --- 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 54b30e9..a48b891 100755 --- a/public/js/app.js +++ b/public/js/app.js @@ -4578,17 +4578,55 @@ InitPromise.addPromise(function(app){ }); class ScaleHelper { - scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, addListener) { + async scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, addListener) { + + addListener = Helper.nonNull(addListener, true); + animationDelay = Helper.nonNull(animationDelay, 0); + + let newFontSize = await this._getNewFontSize(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay === 0); + + if (animationDelay > 0) { + await new Promise(r => { + setTimeout(r, animationDelay); + fontElement.style.fontSize = newFontSize + "px"; + }); + } + + let self = this; + let listener = function () { + let timeout = (typeof addListener === 'number')?addListener:255; + setTimeout(() => { + self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, false); + }, timeout); + }; + if (addListener !== false) { + window.addEventListener("resize", listener); + } + return listener; + } + + async scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animDelay, addListener) { + return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animDelay, addListener); + } + + async _getNewFontSize(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, setFontSize) { + margin = Helper.nonNull(margin, 10); ignoreHeight = Helper.nonNull(ignoreHeight, false); ignoreWidth = Helper.nonNull(ignoreWidth, false); fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length); - addListener = Helper.nonNull(addListener, true); + setFontSize = Helper.nonNull(setFontSize, true); let hasNoTransitionClass = container.classList.contains("no-transition"); - container.classList.add("no-transition"); + if (!hasNoTransitionClass) { + container.classList.add("no-transition"); + } + + // debugger; + + let beforeFontSize = fontElement.style.fontSize; let currentFontSize = 1; let diff = 0; let widthDiff = 0; @@ -4613,26 +4651,20 @@ class ScaleHelper { } diff = newDiff; } while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight)); - fontElement.style.fontSize = (currentFontSize - margin) + 'px'; + + + console.log(setFontSize, currentFontSize, beforeFontSize, fontElement.style.fontSize, fontElement); + currentFontSize -= margin; + fontElement.style.fontSize = ((setFontSize) ? currentFontSize + "px" : beforeFontSize); if (!hasNoTransitionClass) { + await new Promise((r) => { + setTimeout(r, 50); + }); container.classList.remove("no-transition"); } - let self = this; - let listener = function () { - setTimeout(() => { - self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, false); - }, 255); - }; - if (addListener) { - window.addEventListener("resize", listener); - } - return listener; - } - - scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) { - return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight); + return currentFontSize; } } @@ -4926,7 +4958,6 @@ class ParentSegment extends Segment { } applyLocks(locks) { - console.log(locks); this.rotatable = locks[0]; locks.splice(0, 1); for (let i = 0, n = this.children.length; i < n; i++) { @@ -5605,7 +5636,7 @@ class LevelSite extends WordRotatorBaseSite { return super.onConstruct(args); } - onFirstStart() { + async onFirstStart() { super.onFirstStart(); let leafSegmentTemplate = this.findBy("#segment-leaf-template"); @@ -5632,14 +5663,17 @@ class LevelSite extends WordRotatorBaseSite { let wonText = this.findBy("#won-text"); let scaleHelper = new ScaleHelper(); - this.continueButtonScaler = scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true); - this.wonTextScaler = scaleHelper.scaleToFull(wonText, wonText.parentElement); + this.continueButtonScaler = await scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true); + this.wonTextScaler = await scaleHelper.scaleToFull(wonText, wonText.parentElement, false, false, 10, null, 5); + this.wonText = wonText; + this.wonText.style.fontSize = "0"; //Benutze Document, da Element außerhalb von Seite (eigentlich unschön!) this.levelCounterActionContainer = document.getElementById("level-number-container"); this.levelCounterAction = document.getElementById("level-number"); this.levelCounterAction.innerText = this.levelCounter; - this.levelNumberScaler = scaleHelper.scaleToFull(this.levelCounterAction, this.levelCounterActionContainer, false, false, 4); + this.levelNumberScaler = await scaleHelper.scaleToFull(this.levelCounterAction, this.levelCounterActionContainer, false, false, 4); + this.levelCounterActionContainer.classList.add("visible"); this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate); this.coinTemplate = this.findBy("#coin-template"); @@ -5685,7 +5719,7 @@ class LevelSite extends WordRotatorBaseSite { let levelSegment = this.findBy("#level"); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); + this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0); this.level = level; return; @@ -5700,6 +5734,7 @@ class LevelSite extends WordRotatorBaseSite { async nextLevel() { try { this._siteContent.classList.remove('won'); + this.wonText.style.fontSize = "0"; const db = WordRotatorDb.getInstance(); const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]); @@ -5722,7 +5757,7 @@ class LevelSite extends WordRotatorBaseSite { let levelSegment = this.findBy("#level"); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); + this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0); this.level = level; this.levelCounterAction.innerText = this.levelCounter; @@ -5739,8 +5774,11 @@ class LevelSite extends WordRotatorBaseSite { onStart(args) { let res = super.onStart(args); - this.levelCounterAction.innerText = this.levelCounter; - this.levelCounterActionContainer.classList.add("visible"); + if (this.levelCounterAction) { + + this.levelCounterAction.innerText = this.levelCounter; + this.levelCounterActionContainer.classList.add("visible"); + } this.levelScaler(); return res; } @@ -5761,17 +5799,52 @@ class LevelSite extends WordRotatorBaseSite { this._siteContent.classList.add('won'); localStorage.removeItem("currentLevel"); + let continueButton = this.findBy("#continue-button"); + continueButton.style.transition = "none"; + continueButton.style.opacity = 0; + this.coinContainer.removeAllChildren(); let coinsPerLevel = SystemSettings.get("coinsPerLevel", 5); + let coinsBefore = parseInt(Helper.nonNull(localStorage.getItem("coins"), "0")); + localStorage.setItem("coins", coinsBefore + parseInt(coinsPerLevel)); + + let audio = (new Audio(Helper.basePath("/sound/single_coin_fall_on_concrete_.mp3"))); + let coinPromise = Promise.all([new Promise((r) => { + setTimeout(r, 500); + }), + new Promise(r => { + audio.addEventListener('loadeddata', r); + }) + ]); for (let i = 0; i < coinsPerLevel; i++) { let coinElem = Helper.cloneNode(this.coinTemplate); this.coinContainer.appendChild(coinElem); + coinPromise = coinPromise.then(() => { + return new Promise(r => { + let timeout = 350; + coinElem.fadeIn(timeout / 1000); + if (audio !== null) { + audio.pause(); + audio.currentTime = 0; + audio.play(); + } + + setTimeout(() => { + this.coinAction.setTitle(coinsBefore++); + this.coinAction.redraw(); + }, timeout / 2); + setTimeout(r, timeout); + }) + }); } - localStorage.setItem("coins", parseInt(Helper.nonNull(localStorage.getItem("coins"), "0")) + parseInt(coinsPerLevel)); this.wonTextScaler(); this.continueButtonScaler(); + this.levelScaler(); + coinPromise.then(() => { + continueButton.fadeIn(); + }); await savePromise; } catch (e) { @@ -5790,8 +5863,11 @@ class LevelSite extends WordRotatorBaseSite { this.coinAction.redraw(); let rotatables = this.level.getRotatableSegments(); + rotatables = rotatables.filter((segment) => { + return (segment.rotation !== 0); + }); + let index = Math.floor(Math.random() * rotatables.length); - console.log(rotatables, index); let segmentToHelp = rotatables[index]; while (segmentToHelp.rotation !== 0) { @@ -5800,7 +5876,7 @@ class LevelSite extends WordRotatorBaseSite { segmentToHelp.setIsRotatable(false); this.level.saveAsCurrentLevel(); } - else{ + else { FlashMessenger.addMessage("not-enough-coins"); } } diff --git a/public/pwaAssets/css/pwaAssets.css b/public/pwaAssets/css/pwaAssets.css index 19add3e..22e34fc 100755 --- a/public/pwaAssets/css/pwaAssets.css +++ b/public/pwaAssets/css/pwaAssets.css @@ -8,3 +8,8 @@ .tab-header-container .tab-header.active { border-bottom: 0; background-color: #FFF; } + +.no-transition { + transition: none !important; } + .no-transition * { + transition: none !important; } diff --git a/public/sound/single_coin_fall_on_concrete_.mp3 b/public/sound/single_coin_fall_on_concrete_.mp3 new file mode 100644 index 0000000000000000000000000000000000000000..e3e6ad0de9af0cd1a3b849ee39ae0b90df7edbea GIT binary patch literal 24001 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 literal 0 HcmV?d00001 diff --git a/src/js/lib/pwa-assets.js b/src/js/lib/pwa-assets.js index 990f0e8..c29cf42 100755 --- a/src/js/lib/pwa-assets.js +++ b/src/js/lib/pwa-assets.js @@ -9,17 +9,55 @@ class DelayPromise extends Promise { } class ScaleHelper { - scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, addListener) { + async scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, addListener) { + + addListener = Helper.nonNull(addListener, true); + animationDelay = Helper.nonNull(animationDelay, 0); + + let newFontSize = await this._getNewFontSize(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay === 0); + + if (animationDelay > 0) { + await new Promise(r => { + setTimeout(r, animationDelay); + fontElement.style.fontSize = newFontSize + "px"; + }); + } + + let self = this; + let listener = function () { + let timeout = (typeof addListener === 'number')?addListener:255; + setTimeout(() => { + self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animationDelay, false); + }, timeout); + }; + if (addListener !== false) { + window.addEventListener("resize", listener); + } + return listener; + } + + async scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animDelay, addListener) { + return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, animDelay, addListener); + } + + async _getNewFontSize(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, setFontSize) { + margin = Helper.nonNull(margin, 10); ignoreHeight = Helper.nonNull(ignoreHeight, false); ignoreWidth = Helper.nonNull(ignoreWidth, false); fontWeight = Helper.nonNull(fontWeight, fontElement.innerHTML.length); - addListener = Helper.nonNull(addListener, true); + setFontSize = Helper.nonNull(setFontSize, true); let hasNoTransitionClass = container.classList.contains("no-transition"); - container.classList.add("no-transition"); + if (!hasNoTransitionClass) { + container.classList.add("no-transition"); + } + + // debugger; + + let beforeFontSize = fontElement.style.fontSize; let currentFontSize = 1; let diff = 0; let widthDiff = 0; @@ -44,26 +82,20 @@ class ScaleHelper { } diff = newDiff; } while ((widthDiff > (1 - scale) * containerWidth || ignoreWidth) && (heightDiff > (1 - scale) * containerHeight || ignoreHeight)); - fontElement.style.fontSize = (currentFontSize - margin) + 'px'; + + + console.log(setFontSize, currentFontSize, beforeFontSize, fontElement.style.fontSize, fontElement); + currentFontSize -= margin; + fontElement.style.fontSize = ((setFontSize) ? currentFontSize + "px" : beforeFontSize); if (!hasNoTransitionClass) { + await new Promise((r) => { + setTimeout(r, 50); + }); container.classList.remove("no-transition"); } - let self = this; - let listener = function () { - setTimeout(() => { - self.scaleTo(scale, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight, false); - }, 255); - }; - if (addListener) { - window.addEventListener("resize", listener); - } - return listener; - } - - scaleToFull(fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight) { - return this.scaleTo(1, fontElement, container, ignoreHeight, ignoreWidth, margin, fontWeight); + return currentFontSize; } } diff --git a/src/module/Application/pwa/html/application/level.html b/src/module/Application/pwa/html/application/level.html index 5d12886..1475318 100755 --- a/src/module/Application/pwa/html/application/level.html +++ b/src/module/Application/pwa/html/application/level.html @@ -14,18 +14,20 @@
-
- +
+
-
- -
-
- +
+
+ +
+
+
+
-
+
diff --git a/src/module/Application/pwa/js/site/LevelSite.js b/src/module/Application/pwa/js/site/LevelSite.js index 7dfde9f..d4c4752 100755 --- a/src/module/Application/pwa/js/site/LevelSite.js +++ b/src/module/Application/pwa/js/site/LevelSite.js @@ -34,7 +34,7 @@ export class LevelSite extends WordRotatorBaseSite { return super.onConstruct(args); } - onFirstStart() { + async onFirstStart() { super.onFirstStart(); let leafSegmentTemplate = this.findBy("#segment-leaf-template"); @@ -61,14 +61,17 @@ export class LevelSite extends WordRotatorBaseSite { let wonText = this.findBy("#won-text"); let scaleHelper = new ScaleHelper(); - this.continueButtonScaler = scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true); - this.wonTextScaler = scaleHelper.scaleToFull(wonText, wonText.parentElement); + this.continueButtonScaler = await scaleHelper.scaleToFull(continueButton, continueButton.parentElement, false, true); + this.wonTextScaler = await scaleHelper.scaleToFull(wonText, wonText.parentElement, false, false, 10, null, 5); + this.wonText = wonText; + this.wonText.style.fontSize = "0"; //Benutze Document, da Element außerhalb von Seite (eigentlich unschön!) this.levelCounterActionContainer = document.getElementById("level-number-container"); this.levelCounterAction = document.getElementById("level-number"); this.levelCounterAction.innerText = this.levelCounter; - this.levelNumberScaler = scaleHelper.scaleToFull(this.levelCounterAction, this.levelCounterActionContainer, false, false, 4); + this.levelNumberScaler = await scaleHelper.scaleToFull(this.levelCounterAction, this.levelCounterActionContainer, false, false, 4); + this.levelCounterActionContainer.classList.add("visible"); this.templateContainer = new TemplateContainer(leafSegmentTemplate, parentSegmentTemplate, rowSegmentTemplate, triangleTemplate); this.coinTemplate = this.findBy("#coin-template"); @@ -114,7 +117,7 @@ export class LevelSite extends WordRotatorBaseSite { let levelSegment = this.findBy("#level"); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); + this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0); this.level = level; return; @@ -129,6 +132,7 @@ export class LevelSite extends WordRotatorBaseSite { async nextLevel() { try { this._siteContent.classList.remove('won'); + this.wonText.style.fontSize = "0"; const db = WordRotatorDb.getInstance(); const nextLevelJson = await db.loadNextLevel([20, 40, 60, 100, 120, 140, 160]); @@ -151,7 +155,7 @@ export class LevelSite extends WordRotatorBaseSite { let levelSegment = this.findBy("#level"); levelSegment.removeAllChildren().appendChild(level.getRootSegment().getElement()); let scaleHelper = new ScaleHelper(); - this.levelScaler = scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2); + this.levelScaler = await scaleHelper.scaleToFull(levelSegment, levelSegment.parentElement, false, false, 2, level.words[0].length * 2, null, 0); this.level = level; this.levelCounterAction.innerText = this.levelCounter; @@ -168,8 +172,11 @@ export class LevelSite extends WordRotatorBaseSite { onStart(args) { let res = super.onStart(args); - this.levelCounterAction.innerText = this.levelCounter; - this.levelCounterActionContainer.classList.add("visible"); + if (this.levelCounterAction) { + + this.levelCounterAction.innerText = this.levelCounter; + this.levelCounterActionContainer.classList.add("visible"); + } this.levelScaler(); return res; } @@ -190,17 +197,52 @@ export class LevelSite extends WordRotatorBaseSite { this._siteContent.classList.add('won'); localStorage.removeItem("currentLevel"); + let continueButton = this.findBy("#continue-button"); + continueButton.style.transition = "none"; + continueButton.style.opacity = 0; + this.coinContainer.removeAllChildren(); let coinsPerLevel = SystemSettings.get("coinsPerLevel", 5); + let coinsBefore = parseInt(Helper.nonNull(localStorage.getItem("coins"), "0")); + localStorage.setItem("coins", coinsBefore + parseInt(coinsPerLevel)); + + let audio = (new Audio(Helper.basePath("/sound/single_coin_fall_on_concrete_.mp3"))); + let coinPromise = Promise.all([new Promise((r) => { + setTimeout(r, 500) + }), + new Promise(r => { + audio.addEventListener('loadeddata', r); + }) + ]); for (let i = 0; i < coinsPerLevel; i++) { let coinElem = Helper.cloneNode(this.coinTemplate); this.coinContainer.appendChild(coinElem); + coinPromise = coinPromise.then(() => { + return new Promise(r => { + let timeout = 350; + coinElem.fadeIn(timeout / 1000); + if (audio !== null) { + audio.pause(); + audio.currentTime = 0; + audio.play(); + } + + setTimeout(() => { + this.coinAction.setTitle(coinsBefore++); + this.coinAction.redraw(); + }, timeout / 2); + setTimeout(r, timeout); + }) + }); } - localStorage.setItem("coins", parseInt(Helper.nonNull(localStorage.getItem("coins"), "0")) + parseInt(coinsPerLevel)); this.wonTextScaler(); this.continueButtonScaler(); + this.levelScaler(); + coinPromise.then(() => { + continueButton.fadeIn(); + }); await savePromise; } catch (e) { @@ -219,8 +261,11 @@ export class LevelSite extends WordRotatorBaseSite { this.coinAction.redraw(); let rotatables = this.level.getRotatableSegments(); + rotatables = rotatables.filter((segment) => { + return (segment.rotation !== 0); + }); + let index = Math.floor(Math.random() * rotatables.length); - console.log(rotatables, index); let segmentToHelp = rotatables[index]; while (segmentToHelp.rotation !== 0) { @@ -229,7 +274,7 @@ export class LevelSite extends WordRotatorBaseSite { segmentToHelp.setIsRotatable(false); this.level.saveAsCurrentLevel(); } - else{ + else { FlashMessenger.addMessage("not-enough-coins"); } } diff --git a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js index df06670..399eede 100755 --- a/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js +++ b/src/module/Application/pwa/js/wordrotator/Segment/ParentSegment.js @@ -100,7 +100,6 @@ export class ParentSegment extends Segment { } applyLocks(locks) { - console.log(locks); this.rotatable = locks[0]; locks.splice(0, 1); for (let i = 0, n = this.children.length; i < n; i++) { diff --git a/src/scss/_editStory.scss b/src/scss/_editStory.scss deleted file mode 100755 index 4527812..0000000 --- a/src/scss/_editStory.scss +++ /dev/null @@ -1,19 +0,0 @@ -#author-list { - .author-entry { - border-bottom: 1px solid $borderColor; - .author-image-container { - .author-image { - position: relative; - } - } - .user-flag{ - display: none; - } - - &.isUser{ - .user-flag{ - display: inherit; - } - } - } -} \ No newline at end of file diff --git a/src/scss/wordRotator.scss b/src/scss/wordRotator.scss index 54e6e79..9e28e95 100755 --- a/src/scss/wordRotator.scss +++ b/src/scss/wordRotator.scss @@ -61,10 +61,15 @@ $coinTowerDimension: 28px; } } -#coin-container .coin { - margin: 3px; - max-width: 30px; - display: inline-block; +#coin-container { + height: 30px; + .coin { + margin-left: 3px; + margin-right: 3px; + //height: 30px; + max-width:30px; + display: inline-block; + } } //Segments @@ -247,18 +252,28 @@ $animationDuration: 0.25s; } //Won-screen -.show-when-won { - //visibility: hidden; - display: none; - transition: none; - * { - transition: none; +#site-content > :not(.won) { + .show-when-won { + //visibility: hidden; + display: none; + //transition: none; + //* { + // transition: none; + //} } } +.level-container { + height: 100%; + transition: none; +} + .won { + .level-container { + height: 60%; + } .show-when-won { - display: flex; + //visibility: initial; } .show-while-playing { display: none; @@ -268,4 +283,3 @@ $animationDuration: 0.25s; .text-right { text-align: right; } -