Skip to content

Commit

Permalink
Improved jewels moving performance
Browse files Browse the repository at this point in the history
  • Loading branch information
@ErickPetru
ErickPetru committed Sep 10, 2019
1 parent 1cfd975 commit d7d2be3
Show file tree
Hide file tree
Showing 12 changed files with 281 additions and 322 deletions.
6 changes: 3 additions & 3 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
dist/bundled/
dist/inlined/
dist/zipped/
dist/
!dist/index.html
node_modules/
.npm
.eslintcache
.node_repl_history
.env
.env.test
.cache
*.bak
12 changes: 6 additions & 6 deletions dist/index.html
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/css/base.styl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ html, body
padding: 0
height: 100vh
font: 1.15em / 1.3 sans-serif
background-image: linear-gradient(to bottom, #1e528e 0%,#728a7c 50%,#e9ce5d 100%)
background: linear-gradient(to bottom, #1e528e 0%,#728a7c 50%,#e9ce5d 100%)
overflow: auto

.transitions-off
transition: none !important

@import './keyframes'

@import './board'
@import './jewels'
44 changes: 20 additions & 24 deletions src/css/board.styl
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,46 @@
game-board
display: grid
overflow: hidden
overflow: hidden // TODO: hidden
box-sizing: border-box
width: calc(100vmin - 30px)
height: calc(100vmin - 30px)
border: 3px solid #3339
border-radius: 5px
cursor: pointer
border: 5px solid #3335
border-radius: 10px
cursor: default
box-shadow: inset 0 5px 30px #0007
// backdrop-filter: blur(20px)
&[grabbing]
cursor: grabbing !important
&[animating]
cursor: default !important

.prod game-board
transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1)

.dev game-board
transition: all .1s cubic-bezier(0.645, 0.045, 0.355, 1)
&:not([animating]) board-slot:not(:empty)
cursor: pointer !important

board-slot
position: relative
display: grid
padding: 10px
box-sizing: border-box
outline: 5px solid #3690
outline: 5px solid transparent
transition: all .5s ease
&:empty
cursor: default
&:nth-child(even)
background: #11111177
&:nth-child(odd)
background: #00000077
&[locked]
border: 3px solid #3333
border: 3px solid #3335
background: transparent
cursor: default
&[selected]
outline-color: #3699
outline-offset: -7px
background: #11336699
background: #3697
cursor: grabbing
animation: slot-selected .3s ease-in infinite alternate forwards
jewel-piece
z-index: 2
&.exploding
animation: slot-exploding .25s ease both
animation: slot-exploding .3s ease both

.dev board-slot[targetable]
background: #c805
board-slot.first-row.first-column
border-radius: 4px 0 0 0
board-slot.first-row.last-column
border-radius: 0 4px 0 0
board-slot.last-row.first-column
border-radius: 0 0 0 4px
board-slot.last-row.last-column
border-radius: 0 0 4px 0
155 changes: 70 additions & 85 deletions src/css/jewels.styl
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,107 @@
$color-square = #f44336
$color-diamond = #ffc107
$color-circle = #ff5722
$color-circle = #e85f0b
$color-triangle = #e040fb
$color-hexagon = #8bc34a
$color-heptagon = #2196f3
$color-heptagon = #0f6de6
$color-rainbow = #dfdcd5
$color-nebula = #455a64

$ease-in-elastic = cubic-bezier(.6, .25, .55, 1)

jewel-piece
position: relative
position: absolute
z-index: 1
box-sizing: border-box
transition: opacity .25s ease, filter .25s ease, transform .25s ease
display: flex
.border, .shape
flex: 1
display: flex
padding: 7px
width: 100%
height: @width
pointer-events: none
transform-style: preserve-3d
&:not([hidden])
display: block
.border, .shape, .shape::after
box-sizing: border-box
width: 100%
height: @width
.border
padding: 2px
.shape
margin: 2px
display: flex
&::after
content: ''
flex: 1
margin: 16%
&.arriving, &.moving
transition: opacity .15s ease-in, transform .15s ease-in
padding: 15%
.shape::after
content: ''
display: block
&.arriving
animation: jewel-arriving .25s cubic-bezier(.25, .25, .5, 1.1) forwards
&.falling
transition: transform .25s cubic-bezier(.25, .25, .5, 1.1)
&.moving
transition: transform .25s cubic-bezier(.25, .25, .5, 1.1)
&.flipping
transition: transform .15s ease-in
&.exploding
animation: jewel-exploding .15s ease-out forwards

.dev jewel-piece[matchable]
filter: drop-shadow(1px 2px 5px red)
animation: jewel-exploding .25s ease-out forwards

conic-background($c, $deg = 45deg)
$arr = ($c + 20%), $c, ($c - 10%), ($c + 15%), $c, ($c - 15%), ($c + 15%), $c, ($c - 15%), ($c + 10%), $c, ($c - 15%), ($c + 20%)
$arr = ($c + 12%), $c, ($c - 7%), ($c + 8%), $c, ($c - 5%), ($c + 12%), $c, ($c - 5%), ($c + 7%), $c, ($c - 7%), ($c + 15%)
background: radial-gradient(($c + 45%), ($c - 25%))
background: conic-gradient(from $deg, $arr)

jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])
&[type='square']
$color = $color-square
$colors = (($color + 50%) ($color + 25%) ($color - 25%) ($color - 50%))
$colors = (($color + 50%) ($color + 15%) ($color - 7%) ($color - 15%))
padding: 11px
.border, .shape, .shape::after
border-radius: 10%
.border
background: linear-gradient(130deg, $color + 40%, $color - 50%)
margin: 1px
.shape
conic-background($color)
.shape::after
background: linear-gradient(130deg, alpha($color + 60%, 40%), alpha($color + 40%, 25%))
background: linear-gradient(130deg, alpha($color + 55%, 30%), alpha($color + 55%, 25%))

&[type='diamond']
$color = $color-diamond
$colors = (($color + 60%) ($color + 40%) ($color - 15%) ($color - 30%))
width: calc(100% + 4px)
height: @width
margin: -2px 0 0 -2px
.border, .shape, .shape::after
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
.border
background: linear-gradient(130deg, $colors[0], $colors[3])
.shape
conic-background($color, 30deg)
.shape::after
background: linear-gradient(130deg, alpha($color + 60%, 50%), alpha($color + 40%, 75%))
background: linear-gradient(130deg, alpha($color + 70%, 40%), alpha($color + 40%, 75%))

&[type='circle']
$color = $color-circle
$colors = (($color + 75%) ($color + 35%) ($color - 10%) ($color - 40%))
$colors = (($color + 50%) ($color + 25%) ($color - 5%) ($color - 20%))
padding: 10px
.border, .shape, .shape::after
border-radius: 50%
.border
background: linear-gradient(130deg, $colors[0], $colors[3])
margin: 1px
.shape
conic-background($color)
.shape::after
background: linear-gradient(130deg, alpha($color + 60%, 50%), alpha($color + 40%, 75%))
background: linear-gradient(130deg, alpha($color + 40%, 50%), alpha($color + 30%, 75%))

&[type='triangle']
$color = $color-triangle
$colors = (($color + 90%) ($color + 40%) ($color - 20%) ($color - 40%))
padding: 9px
.border, .shape, .shape::after
clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
.border
background: linear-gradient(130deg, $colors[0], $colors[3])
.shape
conic-background($color, 120deg)
padding: 22% 16% 11%
.shape::after
background: linear-gradient(130deg, alpha($color + 60%, 50%), alpha($color + 40%, 90%))
margin: 22% 16% 11%
background: linear-gradient(130deg, alpha($color + 40%, 50%), alpha($color + 40%, 90%))

&[type='hexagon']
$color = $color-hexagon
$colors = (($color + 90%) ($color + 40%) ($color - 20%) ($color - 40%))
padding: 9px
.border, .shape, .shape::after
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
.border
Expand All @@ -108,18 +114,21 @@ jewel-piece:not([promoted='rainbow']):not([promoted='nebula'])
&[type='heptagon']
$color = $color-heptagon
$colors = (($color + 80%) ($color + 45%) ($color - 12%) ($color - 40%))
padding: 9px
.border, .shape, .shape::after
clip-path: polygon(30% 0, 0 20%, 0 55%, 50% 100%, 100% 55%, 100% 20%, 70% 0)
.border
background: linear-gradient(130deg, $colors[0], $colors[3])
.shape
conic-background($color)
padding: 13% 15% 15%
.shape::after
background: linear-gradient(130deg, alpha($color + 60%, 40%), alpha($color + 40%, 55%))

jewel-piece[promoted]
animation: jewel-brightening 1s .5s ease infinite alternate both
&::before, &::after
&:not(.arriving)
animation: jewel-brightening .5s ease .75s infinite alternate backwards
&::after
position: absolute
left: 50%
z-index: 2
Expand All @@ -128,91 +137,67 @@ jewel-piece[promoted]
background-position: center
background-size: 100% 100%
content: ''
transform: translateX(-50%)
transform: translate3d(-50%, 0, 0)
pointer-events: none
&::before
z-index: -1

jewel-piece[promoted='smoke']
&::before, &::after
background-image: url('../img/smoke.webp')
&::before
width: 180%
height: @width
top: -35%
filter: brightness(1.3) contrast(1.5)
&::after
width: 125%
height: @width
top: -12%
width: 115%
height: @width
filter: brightness(5) contrast(1.2) opacity(.5)
background-image: url('../img/smoke.webp')

jewel-piece[promoted='fire']
&::before
background-image: url('../img/smoke.webp')
width: 160%
height: @width
top: -25%
filter: brightness(1.2) contrast(1.5) opacity(.5)
&::after
width: 215%
bottom: 9px
bottom: 16%
left: 52%
width: 170%
height: 140%
filter: saturate(2) brightness(1.2) contrast(1.25) opacity(1)
background-image: url('../img/fire.webp')
&[type="heptagon"]::after
bottom: 26%

jewel-piece[promoted='star']
&::before
background-image: url('../img/smoke.webp')
width: 160%
height: @width
top: -25%
filter: brightness(1.5) contrast(1.5) opacity(.5)
&::after
animation: star-blinking .85s .5s ease infinite alternate both
width: 120%
animation: star-blinking .85s ease .75s infinite alternate both
width: 110%
height: @width
top: -10%
clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 35%)
top: -5%
clip-path: polygon(50% 0%, 55% 45%, 100% 50%, 55% 55%, 50% 100%, 45% 55%, 0 50%, 45% 45%)
background-image: radial-gradient(circle, #fffb, #fff2)
mix-blend-mode: lighten

jewel-piece[promoted='rainbow']
$color = $color-rainbow
$colors = (($color + 50%) ($color - 50%))
padding: 8px
.border, .shape, .shape::after
border-radius: 10%
clip-path: none
border-radius: 0
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)
.border
background: linear-gradient(130deg, $colors[0], $colors[1])
margin: 1px
background: linear-gradient(98deg, $color-circle, $color-diamond, $color-hexagon, $color-heptagon, $color-triangle, $color-square)
background: conic-gradient(from 90deg, #fff5, #fff2, #fff0, #fff5, #fff3, #fff0, #fff5, #fff2, #fff0, #fff5, #fff3, #fff0, #fff5), linear-gradient(to right, $color-circle, $color-diamond, $color-hexagon, $color-heptagon, $color-triangle, $color-square)
.shape
background: linear-gradient(to right, $color-square, $color-circle, $color-diamond, $color-hexagon, $color-heptagon, $color-triangle, $color-square)
background: linear-gradient(90deg, $color-circle, $color-diamond, $color-hexagon, $color-heptagon, $color-triangle, $color-square)
background: conic-gradient(from 45deg, #fff5, #fff2, #fff0, #fff5, #fff3, #fff0, #fff5, #fff2, #fff0, #fff5, #fff3, #fff0, #fff5), linear-gradient(to right, $color-circle, $color-diamond, $color-hexagon, $color-heptagon, $color-triangle, $color-square)
.shape::after
background: linear-gradient(130deg, alpha($color, 30%), alpha($color, 50%))
z-index: 1
background: linear-gradient(130deg, #fff2, #fff3)
backdrop-filter: blur(4px)

jewel-piece[promoted='nebula']
$color = $color-nebula
$colors = (($color + 65%) ($color + 5%) ($color - 25%))
margin: -3px
.border, .shape
border-radius: 50%
clip-path: none
.border
background: linear-gradient(130deg, $colors[0], $colors[1])
margin: 1px
.shape
background: linear-gradient(130deg, $color, $colors[2])
.shape::after
display: none
&::before, &::after
&::after
background-image: url('../img/smoke.webp')
&::before
width: 160%
height: @width
top: -25%
filter: brightness(1.2) contrast(1.5) opacity(.5)
&::after
top: -39%
top: -36%
filter: brightness(0) contrast(2)
Loading

0 comments on commit d7d2be3

Please sign in to comment.