|
$rows: 4 !global; |
|
$columns: 12 !global; |
|
$gameObjects: 22; |
|
$tileSize: 48px; |
|
$walkSpeed: 1s; |
|
$tilesPerSegment: 3; |
|
$tilesPerSegmentVertical: 7; |
|
$segmentHeight: $tileSize * $tilesPerSegmentVertical; |
|
$debug: false; |
|
|
|
* { |
|
box-sizing: border-box; |
|
} |
|
|
|
@font-face { |
|
font-family: pixles; |
|
src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/04B_03__.TTF); |
|
} |
|
|
|
/* ------------------------------------------------------------------------------------ |
|
|
|
Game styling |
|
|
|
--------------------------------------------------------------------------------------- */ |
|
|
|
body { |
|
background: #141415; |
|
overflow: hidden; |
|
font-family: pixles; |
|
font-size: 15px; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
user-select: none; |
|
height: 100vh; |
|
margin: 0; |
|
|
|
& .game { |
|
width: $tileSize * $tilesPerSegment * $columns; |
|
position: absolute; |
|
left: calc(50% - 72px); |
|
right: 0; |
|
top: calc(50% - 212px); |
|
margin: auto; |
|
|
|
input { |
|
display: none; |
|
} |
|
|
|
// End screen styles |
|
|
|
&_win { |
|
position: fixed; |
|
left: 0; |
|
top: 0; |
|
background: #141415; |
|
z-index: 9; |
|
width: 100%; |
|
height: 100%; |
|
opacity: 0; |
|
pointer-events: none; |
|
transition: all 1s 0s; |
|
|
|
&__inner { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
margin: auto; |
|
width: 300px; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
text-align: center; |
|
opacity: 0; |
|
transition: all 1s 2s; |
|
|
|
p { |
|
color: white; |
|
margin-bottom: 30px; |
|
} |
|
|
|
span { |
|
color: white; |
|
opacity: 0.4; |
|
} |
|
|
|
a { |
|
margin-bottom: 16px; |
|
color: #78f148; |
|
text-align: center; |
|
width: 100%; |
|
display: block; |
|
} |
|
} |
|
|
|
.character { |
|
width: 48px; |
|
height: 48px; |
|
position: relative; |
|
left: -60px; |
|
margin: auto; |
|
background: red; |
|
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/corridorMainCharacter.gif'); |
|
animation: walk-1 $walkSpeed infinite; |
|
z-index: 1; |
|
background-position: 0 0; |
|
transform: translateY(-50%) translateX($tileSize * ($tilesPerSegment / 2) - 8); |
|
transition: all $walkSpeed linear; |
|
z-index: 1; |
|
pointer-events: none; |
|
} |
|
} |
|
|
|
// Side inventory styles |
|
|
|
&_inventory { |
|
position: fixed; |
|
z-index: 9; |
|
left: 0; |
|
color: white; |
|
top: 50%; |
|
-webkit-transform: translateY(-50%); |
|
font-size: 11px; |
|
right: 0; |
|
margin: auto; |
|
left: -420px; |
|
width: 140px; |
|
padding-left: 15px; |
|
transform: translateY(-50%); |
|
height: 64px; |
|
cursor: pointer; |
|
transition: all .6s .3s; |
|
|
|
&:hover { |
|
height: 371px; |
|
transition: all .6s .2s; |
|
|
|
.item { |
|
opacity: 1; |
|
left: 0px; |
|
transition: all 0.3s; |
|
-webkit-filter: blur(0px); |
|
|
|
&:first-child { |
|
display: block; |
|
} |
|
} |
|
} |
|
|
|
h1 { |
|
font-weight: normal; |
|
font-size: 12px; |
|
} |
|
|
|
img { |
|
transform: scale(3); |
|
image-rendering: pixelated; |
|
cursor: pointer; |
|
transform-origin: 0 0; |
|
|
|
&:hover { |
|
|
|
} |
|
} |
|
|
|
&__item { |
|
margin-top: 70px; |
|
text-align: center; |
|
position: relative; |
|
left: -24px; |
|
width: 100%; |
|
height: 100%; |
|
|
|
.item { |
|
margin: 10px 0 30px 0; |
|
display: none; |
|
opacity: 0; |
|
left: 0px; |
|
position: relative; |
|
transition: all 0s; |
|
float: left; |
|
margin-right: 10px; |
|
width: 34%; |
|
|
|
&:hover { |
|
z-index: 15; |
|
|
|
.details { |
|
opacity: 1; |
|
top: -4px; |
|
} |
|
} |
|
|
|
.name { |
|
position: relative; |
|
top: 11px; |
|
} |
|
|
|
.details { |
|
padding: 7px; |
|
opacity: 0; |
|
border-radius: 4px; |
|
position: absolute; |
|
font-size: 13px; |
|
text-align: center; |
|
transition: all 0.2s .2s; |
|
pointer-events: none; |
|
background: white; |
|
color: #141415; |
|
width: 120px; |
|
top: -4px; |
|
left: 50px; |
|
z-index: 20; |
|
} |
|
|
|
img { |
|
transform: scale(2); |
|
transform-origin: 50% 50%; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Padlock stuff |
|
|
|
.padlock { |
|
display: none; |
|
position: absolute; |
|
width: 280px; |
|
top: 71px; |
|
left: -70px; |
|
height: 280px; |
|
background: #301f41b8; |
|
z-index: 4; |
|
border-radius: 324px; |
|
border: 4px solid #ffb128; |
|
|
|
img { |
|
position: absolute; |
|
left: 80px; |
|
top: 35px; |
|
} |
|
} |
|
|
|
%o { |
|
display:block; |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
top: 220px; |
|
margin: auto; |
|
} |
|
|
|
.check { |
|
display: none; |
|
width: 80px; |
|
cursor: pointer; |
|
height: 80px; |
|
position: absolute; |
|
z-index: 6; |
|
top: 303px; |
|
left: 30px; |
|
text-align: center; |
|
line-height: 77px; |
|
background: wheat; |
|
color: #615133; |
|
border-radius: 100px; |
|
border: 3px solid #ffb128; |
|
transition: all 0.3s; |
|
|
|
&:hover { |
|
background: #ffb128; |
|
color: white; |
|
} |
|
} |
|
|
|
input#interactiveObject--lock:not(:checked) { |
|
+ span { |
|
display: none; |
|
} |
|
} |
|
|
|
input#interactiveObject--lock:checked { |
|
+ .padlock { |
|
display: block; |
|
|
|
$y: ''; |
|
$x: ' + span '; |
|
|
|
+ input { |
|
display: block; |
|
@for $i from 1 through 26 { |
|
|
|
$y: $y + ' + span + input'; |
|
$x: $x + ' + input + span '; |
|
|
|
#{$y} { |
|
display: block; |
|
} |
|
#{$x} { |
|
display: block; |
|
} |
|
#{$y} + span + label { |
|
display: block; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
#padlock1-1,#padlock2-1,#padlock3-1 { |
|
&:after { |
|
display: block !important; |
|
} |
|
} |
|
|
|
#padlock1-9,#padlock2-9,#padlock3-9 { |
|
&:after { |
|
display: none !important; |
|
} |
|
} |
|
|
|
input[id*="padlock"] { |
|
@extend %o; |
|
|
|
z-index: 3; |
|
outline: none; |
|
display:none; |
|
-webkit-appearance: none; |
|
|
|
+ span { |
|
@extend %o; |
|
|
|
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/padlockBG.png); |
|
width: 10px; |
|
width: 22px; |
|
height: 36px; |
|
left: 0; |
|
display: none; |
|
line-height: 40px; |
|
text-align: center; |
|
position: fixed; |
|
color: #444444; |
|
top: 50%; |
|
transform: translateY(9px) translateX(-35px); |
|
} |
|
|
|
@for $i from 1 through 34 { |
|
&:nth-of-type(#{$i}) { |
|
z-index: $i + 10; |
|
|
|
&:checked { |
|
z-index: 64 + $i; |
|
|
|
& + span { |
|
z-index: 64 - $i; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&:checked { |
|
z-index: 30; |
|
|
|
&:before { |
|
display: none; |
|
} |
|
|
|
& + span { |
|
& + input { |
|
&:after { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&:after { |
|
background: red; |
|
display: block; |
|
content: ''; |
|
top: 48px; |
|
position: absolute; |
|
cursor: pointer; |
|
height: 23px; |
|
left: -7px; |
|
width: 22px; |
|
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/padlockDown.png); |
|
} |
|
|
|
&:before { |
|
display: block; |
|
content: ''; |
|
position: absolute; |
|
height: 23px; |
|
width: 22px; |
|
left: -7px; |
|
top: -30px; |
|
color: white; |
|
background: red; |
|
cursor: pointer; |
|
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/padlockUp.png); |
|
} |
|
|
|
&[id*="padlock1"] { |
|
left: 19px; |
|
+ span { |
|
left: -27px; |
|
} |
|
} |
|
|
|
&[id*="padlock2"] { |
|
left: 64px; |
|
+ span { |
|
left: 66px; |
|
} |
|
} |
|
|
|
&[id*="padlock3"] { |
|
left: 106px; |
|
+ span { |
|
left: 149px; |
|
} |
|
} |
|
} |
|
|
|
// Loading screen styles |
|
|
|
&_loader { |
|
position: fixed; |
|
z-index: 15; |
|
background: #141415; |
|
left: 0; |
|
top: 0; |
|
width: 100%; |
|
height: 100%; |
|
pointer-events: none; |
|
opacity: 1; |
|
animation: fadeOut 1.5s 7s forwards; |
|
|
|
&__inner { |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
margin: auto; |
|
top: 50%; |
|
transform: translateY(-50%); |
|
font-size: 12px; |
|
width: 200px; |
|
text-align: center; |
|
|
|
h1 { |
|
font-weight: normal; |
|
font-size: 12px; |
|
} |
|
|
|
& .logo { |
|
width: 200px; |
|
height: 70px; |
|
margin: auto; |
|
margin-bottom: 10px; |
|
transform: scale(0); |
|
opacity: 0; |
|
animation: logo 2s forwards; |
|
|
|
img { |
|
width: 100%; |
|
} |
|
} |
|
|
|
span { |
|
color: rebeccapurple; |
|
display: block; |
|
opacity: 0; |
|
margin-top: 8px; |
|
animation: fadeIn 1.5s 3s forwards; |
|
} |
|
|
|
& .bar { |
|
background: #3c3c3e; |
|
position: relative; |
|
height: 2px; |
|
margin-top: 30px; |
|
opacity: 0; |
|
animation: fadeIn 1.5s 2.5s forwards; |
|
|
|
&_inner { |
|
width: 0px; |
|
height: 100%; |
|
background: white; |
|
position: absolute; |
|
top: 0; |
|
animation: bar 3s 3s forwards; |
|
} |
|
} |
|
|
|
& .subtitle { |
|
color: #f49112; |
|
margin: -18px 0px 40px 0; |
|
opacity: 0; |
|
animation: fadeIn 1.5s 1.5s forwards; |
|
} |
|
} |
|
} |
|
|
|
// Our little character |
|
|
|
&_character { |
|
width: 48px; |
|
height: 48px; |
|
background: red; |
|
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/corridorMainCharacter.gif'); |
|
position: absolute; |
|
top: 216px; |
|
left: -16px; |
|
z-index: 1; |
|
background-position: 0 0; |
|
transform: translateY(-50%) translateX($tileSize * ($tilesPerSegment / 2) - 8); |
|
transition: all $walkSpeed linear; |
|
z-index: 1; |
|
pointer-events: none; |
|
|
|
img { |
|
position: absolute; |
|
border: 512px solid #0c0c0d; |
|
transform: translateY(-685px) translateX(-670px); |
|
opacity: 1; |
|
} |
|
} |
|
|
|
// Intro dialogue |
|
|
|
&_intro { |
|
position: absolute; |
|
top: 38px; |
|
left: -33px; |
|
z-index: 14; |
|
|
|
input { |
|
display: none; |
|
} |
|
|
|
input[type="radio"]:checked + div { |
|
opacity: 1; |
|
top: 140px; |
|
transition: all 0.5s 0.8s; |
|
pointer-events: all; |
|
|
|
label { |
|
opacity: 1; |
|
bottom: -10px; |
|
} |
|
} |
|
|
|
input#intro-1[type="radio"]:checked + div { |
|
top: 140px; |
|
opacity: 0; |
|
transition: all 0.5s 0.8s; |
|
animation: dialogueIn .5s 9s forwards; |
|
pointer-events: all; |
|
} |
|
|
|
input#intro-1[type="radio"]:not(:checked) + div { |
|
opacity: 0; |
|
top: 160px; |
|
transition: all 0.5s 0.8s; |
|
} |
|
|
|
input[type="radio"]#intro-5:checked + div + input + div { |
|
opacity: 0; |
|
pointer-events: none !important; |
|
} |
|
|
|
input[type="radio"]#intro-5:checked + div { |
|
opacity: 0; |
|
animation: showResponse 2s 2s forwards; |
|
} |
|
|
|
& .overlay { |
|
position: fixed; |
|
top: 0 !important; |
|
width: 140%; |
|
left: 0; |
|
opacity: 1; |
|
height: 260%; |
|
background: #141415; |
|
z-index: -1; |
|
pointer-events: all; |
|
transition: all 4s .7s !important; |
|
} |
|
|
|
& .dialogue { |
|
position: absolute; |
|
top: 160px; |
|
opacity: 0; |
|
width: 170px; |
|
left: 20px; |
|
padding: 15px; |
|
border-radius: 4px; |
|
font-size: 13px; |
|
text-align: center; |
|
transition: all 0.2s .2s; |
|
pointer-events: none; |
|
background: white; |
|
color: #141415; |
|
|
|
&.end { |
|
position: absolute; |
|
width: 130px; |
|
left: 0; |
|
text-align: center; |
|
right: 0; |
|
pointer-events: none; |
|
top: 100px !important; |
|
margin: auto; |
|
transform: translateY(140px) translateX(39px); |
|
background: white; |
|
color: #141415; |
|
padding: 8px; |
|
border-radius: 5px; |
|
} |
|
|
|
label { |
|
border-radius: 5px; |
|
position: absolute; |
|
right: -6px; |
|
bottom: -20px; |
|
z-index: 1; |
|
opacity: 0; |
|
cursor: pointer; |
|
transition: all 0.4s 1s; |
|
|
|
img { |
|
transform: scale(2); |
|
image-rendering: pixelated; |
|
} |
|
|
|
&:hover { |
|
right: -13px; |
|
background: #66bf60; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Viewport |
|
|
|
.viewport { |
|
position: relative; |
|
z-index: 0; |
|
transition: all $walkSpeed linear; |
|
|
|
.level { |
|
position: absolute; |
|
left: 0; |
|
z-index: 1; |
|
transform: scale(3); |
|
transform-origin: 0 0; |
|
image-rendering: pixelated; |
|
} |
|
} |
|
|
|
&_segment { |
|
width: $tileSize * $tilesPerSegment; |
|
height: $segmentHeight; |
|
border: 0px solid white; |
|
float: left; |
|
z-index: 1; |
|
position: relative; |
|
color: white; |
|
|
|
.drip_container { |
|
position: relative; |
|
top: 80px; |
|
display: none; |
|
z-index: 10; |
|
|
|
& .drip { |
|
width: 3px; |
|
height: 20px; |
|
background: #81eeef; |
|
position: absolute; |
|
height: 0; |
|
top: 14px; |
|
opacity: 1; |
|
|
|
@for $i from 1 through 5 { |
|
&:nth-of-type(#{$i}) { |
|
left: random(144) + 0px; |
|
animation: drip 1.25s random(52) / 10 + 0s linear infinite; |
|
} |
|
} |
|
} |
|
} |
|
|
|
@keyframes drip { |
|
0% {height: 0;} |
|
2% {height: 6px;} |
|
5% {height: 6px;top:14px} |
|
22% {top:158px; height:4px;opacity:1;} |
|
23%{opacity: 0;height:0px} |
|
100%{opacity: 0} |
|
} |
|
|
|
& .tiles { |
|
& .tile { |
|
width: $tileSize; |
|
height: $tileSize; |
|
float: left; |
|
image-rendering: pixelated; |
|
|
|
// Special tiles |
|
|
|
&.door { |
|
position: absolute; |
|
top: 92px; |
|
height: 144px; |
|
left: -12px; |
|
width: 60px; |
|
|
|
img { |
|
position: relative; |
|
} |
|
} |
|
|
|
&.beam { |
|
position: absolute; |
|
top: 95px; |
|
height: 108px; |
|
} |
|
|
|
|
|
&.water { |
|
position: absolute; |
|
top: 107px; |
|
height: 108px; |
|
} |
|
|
|
&:before { |
|
display: none; |
|
content: ' '; |
|
position: absolute; |
|
width: 4px; |
|
height: 10px; |
|
border-left: 4px solid #e69c69; |
|
border-right: 4px solid #e69c69; |
|
z-index: 1; |
|
left: 67px; |
|
top: 140px; |
|
transition: all 1s linear; |
|
} |
|
|
|
&:after { |
|
top: -48px; |
|
transition: all 1s linear; |
|
height: 40px !important; |
|
display: block; |
|
overflow: hidden; |
|
pointer-events: none; |
|
|
|
img { |
|
position: relative; |
|
top: -400px; |
|
} |
|
} |
|
|
|
img { |
|
width: 100%; |
|
cursor: pointer; |
|
|
|
&:hover { |
|
-webkit-filter: drop-shadow(2px 0px white) drop-shadow(-2px 0px white) drop-shadow(0px -2px white); |
|
} |
|
} |
|
|
|
label { |
|
pointer-events: none; |
|
|
|
.response, |
|
.forcedResponse, |
|
.responseSuccess { |
|
display: none; |
|
position: absolute; |
|
width: 130px; |
|
left: 0; |
|
text-align: center; |
|
right: 0; |
|
pointer-events: none; |
|
top: calc(50% - 46px); |
|
margin: auto; |
|
background: white; |
|
color: #141415; |
|
padding: 8px; |
|
border-radius: 5px; |
|
} |
|
|
|
.forcedResponse { |
|
pointer-events: all !important; |
|
|
|
label { |
|
border-radius: 5px; |
|
position: absolute; |
|
right: -6px; |
|
cursor: pointer; |
|
bottom: -14px; |
|
transform: scale(2); |
|
z-index: 3; |
|
cursor: pointer; |
|
transition: all 0.4s 1s; |
|
|
|
&:hover { |
|
right: -2px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
&:after { |
|
display: block; |
|
width: $tileSize; |
|
height: $tileSize; |
|
transform: scale(3); |
|
image-rendering: pixelated; |
|
transform-origin: 0 0; |
|
} |
|
} |
|
} |
|
|
|
// Game controls |
|
|
|
&__control { |
|
div { |
|
position: absolute; |
|
opacity: 0; |
|
pointer-events: none; |
|
border-radius: 4px; |
|
top: 50%; |
|
cursor: pointer; |
|
|
|
img { |
|
transform: scale(3); |
|
image-rendering: pixelated; |
|
position: relative; |
|
left: 0; |
|
top: 0; |
|
transition: all 0.3s; |
|
} |
|
} |
|
|
|
& .forward { |
|
transform: translateY(50px) translateX(-$tileSize); |
|
left: 66px; |
|
transition: all 0.3s 0s; |
|
|
|
&:hover { |
|
img { |
|
left: 4px; |
|
} |
|
} |
|
} |
|
|
|
& .backward { |
|
transform: translateY(50px) translateX(47px); |
|
right: 65px; |
|
transition: all 0.3s .1s; |
|
|
|
&:hover { |
|
img { |
|
left: -4px; |
|
} |
|
} |
|
|
|
img { |
|
transform: rotate(180deg) scale(3); |
|
} |
|
} |
|
|
|
& .up { |
|
top: 90px !important; |
|
left: 50%; |
|
transform: translateX(-50%) translateY(25px); |
|
transition: all 0.3s .2s; |
|
|
|
&:hover { |
|
img { |
|
top: -4px; |
|
} |
|
} |
|
|
|
img { |
|
transform: rotate(-90deg) scale(3); |
|
} |
|
} |
|
|
|
& .down { |
|
bottom: 350px !important; |
|
left: 50%; |
|
opacity: 0; |
|
top: auto; |
|
transform: translateX(-50%) translateY(10px); |
|
transition: all 0.3s .2s; |
|
|
|
&:hover { |
|
img { |
|
top: 4px; |
|
} |
|
} |
|
|
|
img { |
|
transform: rotate(90deg) scale(3); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* ------------------------------------------------------------------------------------ |
|
|
|
Calculate the way an animated sprite should be shown from its width and frame count |
|
then animate the background image |
|
|
|
--------------------------------------------------------------------------------------- */ |
|
|
|
@function walkCycle($frames, $width, $height, $row) { |
|
|
|
$t: 100 / $frames; |
|
$o: 0; |
|
$p: ''; |
|
|
|
@for $i from 1 through $frames { |
|
$o: $o + $t; |
|
$p: $p + ($o - .1) + '%{background-position:-' + ($i - 1) * $width + 'px ' + $height * ($row - 1) + 'px;}'; |
|
$p: $p + $o + '%{background-position:-' + $i * $width + 'px ' + $height * ($row - 1) + 'px;}'; |
|
@if($o != 100) { |
|
$p: $p + ($o + .1) + '%{background-position:-' + $i * $width + 'px ' + $height * ($row - 1) + 'px;}'; |
|
} @else { |
|
$o: 100; |
|
} |
|
} |
|
|
|
$v: '1%{background-position: 0px ' + $height * ($row - 1) + 'px;}' + $p; |
|
|
|
@return unquote($v); |
|
} |
|
|
|
/* ------------------------------------------------------------------------------------------------------ |
|
|
|
Name: Traverse through scenes |
|
Description: Makes it incredibly easy to trigger scene changes using the checkbox *hack* |
|
Instead of doing input#index39:checked + input + div + div { props } |
|
|
|
--------------------------------------------------------------------------------------------------------- */ |
|
|
|
@mixin traverse($n: 4) { |
|
$div: "" !global; // Empty div string |
|
$input: "" !global; // Empty input string |
|
$input2: "" !global; |
|
$input3: "" !global; |
|
$input4: "" !global; |
|
$label: "" !global; // Empty input string |
|
$label2: "" !global; |
|
$label3: "" !global; |
|
$label4: "" !global; |
|
$inputOffset: "+ input " !global; |
|
|
|
// This needs to be made dynamic |
|
|
|
@for $i from 1 through 47 { |
|
$input: $input + "+ input " !global; |
|
$inputOffset: $inputOffset + "+ input " !global; |
|
} |
|
|
|
@for $i from 1 through 35 { |
|
$input2: $input2 + "+ input " !global; |
|
} |
|
|
|
@for $i from 1 through 23 { |
|
$input3: $input3 + "+ input " !global; |
|
} |
|
|
|
@for $i from 1 through 11 { |
|
$input4: $input4 + "+ input " !global; |
|
} |
|
|
|
@for $i from 1 through $columns { |
|
@keyframes walk-#{$i} { |
|
animation: walkCycle(6, 48, 48, 1); |
|
} |
|
} |
|
|
|
@for $i from 1 through $n { |
|
$div: "+ div" !global; |
|
$position: $i !global; // Make this global so we can pass it in to our content |
|
$i: $i !global; |
|
$label: $label + "+ div " !global; |
|
|
|
@if ($i > 1) { |
|
$input: str_slice($input, 0, -9) !global; // Slice out the last input string |
|
$input2: str_slice($input2, 0, -9) !global; // Slice out the last input string |
|
$input3: str_slice($input3, 0, -9) !global; // Slice out the last input string |
|
$input4: str_slice($input4, 0, -9) !global; // Slice out the last input string |
|
$label2: $label2 + "+ div " !global; |
|
} |
|
|
|
@content; |
|
} |
|
} |
|
|
|
/* ------------------------------------------------------------------------------------ |
|
|
|
When in specified semgent, show the down arrow and the up arrow of the segment below |
|
|
|
--------------------------------------------------------------------------------------- */ |
|
|
|
@mixin moveVerticleOnTile($row, $tile) { |
|
|
|
$totalInputs: $rows * $columns - ($row * $columns - ($columns - $tile)); |
|
$totalDivs: $row * $columns - ($columns - $tile) + $columns + 2; |
|
$id: $row * $columns - ($columns - $tile); |
|
$tInput: ''; |
|
$tDiv: ''; |
|
$tInputDown: ''; |
|
|
|
@for $i from 1 through $totalInputs { |
|
$tInput: $tInput + ' + input '; |
|
} |
|
|
|
@for $i from 1 through $totalDivs { |
|
$tDiv: $tDiv + ' + div '; |
|
} |
|
|
|
@for $i from 1 through $totalInputs - $columns { |
|
$tInputDown: $tInputDown + ' + input '; |
|
} |
|
|
|
.game_segment:nth-of-type(#{$id}) .tile:nth-of-type(14):after { |
|
content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/corridorLift.png'); |
|
position: relative; |
|
display: block; |
|
} |
|
|
|
.game_segment:nth-of-type(#{$id}) .tile:nth-of-type(14):before { |
|
display: block; |
|
} |
|
|
|
input#indexRow#{$row}-#{$tile}:checked #{$tInput} + div + div + .viewport > .game_segment:nth-of-type(#{$id + $columns}) { |
|
& .down { |
|
opacity: 1; |
|
pointer-events: all; |
|
transition: all 0.3s 1.1s; |
|
transform: translateX(-50%) translateY(0px); |
|
} |
|
} |
|
|
|
input#indexRow#{$row + 1}-#{$tile}:checked #{$tInputDown} + div + div + .viewport > .game_segment:nth-of-type(#{$id}) { |
|
.tile:nth-of-type(14):after { |
|
top :288px; |
|
} |
|
|
|
.tile:nth-of-type(14):before { |
|
height: 373px; |
|
} |
|
} |
|
|
|
input#indexRow#{$row + 1}-#{$tile}:checked #{$tInputDown} + div + div + .viewport > .game_segment:nth-of-type(#{$id + $columns}) { |
|
& .up { |
|
opacity: 1; |
|
pointer-events: all; |
|
transition: all 0.3s 1.1s; |
|
transform: translateX(-50%) translateY(15px); |
|
} |
|
} |
|
} |
|
|
|
/* ------------------------------------------------------------------------------------ |
|
|
|
Prevent movement labels showing on specified sement |
|
|
|
--------------------------------------------------------------------------------------- */ |
|
|
|
@mixin makeWallAt($row, $tile) { |
|
|
|
$totalInputs: $rows * $columns - ($row * $columns - ($columns - $tile)); |
|
$totalDivs: $row * $columns - ($columns - $tile) + $columns + 2; |
|
$id: $row * $columns - ($columns - $tile); |
|
$tInput: ''; |
|
$tDiv: ''; |
|
$tInputBack: ''; |
|
$tInputDown: ''; |
|
|
|
@for $i from 1 through $totalInputs + 1 { |
|
$tInput: $tInput + ' + input '; |
|
} |
|
|
|
@for $i from 1 through $totalInputs - 1 { |
|
$tInputBack: $tInputBack + ' + input '; |
|
} |
|
|
|
input#indexRow#{$row}-#{$tile - 1}:checked #{$tInput} + div + div + .viewport > .game_segment:nth-of-type(#{$id}) { |
|
& .forward { |
|
display: none !important; |
|
} |
|
} |
|
|
|
input#indexRow#{$row}-#{$tile + 1}:checked #{$tInputBack} + div + div + .viewport > .game_segment:nth-of-type(#{$id}) { |
|
& .backward { |
|
display: none !important; |
|
} |
|
} |
|
} |
|
|
|
/* ------------------------------------------------------------------------------------ |
|
|
|
Compare two inputs then do something |
|
|
|
--------------------------------------------------------------------------------------- */ |
|
|
|
@mixin checkWinCondition($criteria, $criteria2, $result) { |
|
|
|
$totalInputs: 48 + ($gameObjects - $criteria - 2); |
|
$tInput: ''; |
|
|
|
@for $i from 1 through $totalInputs { |
|
$tInput: $tInput + ' + input '; |
|
} |
|
|
|
input#interactiveObject#{$criteria}:checked + input:checked + input:checked #{$tInput} + div + div + div + div + div { |
|
opacity: 1; |
|
pointer-events: all; |
|
& .game_win__inner { |
|
opacity: 1; |
|
} |
|
} |
|
|
|
input#interactiveObject#{$criteria}:checked + input:checked + input:checked #{$tInput} + div + div + div + div { |
|
display: none; |
|
} |
|
|
|
input#interactiveObject#{$criteria}:checked + input:checked + input:checked #{$tInput} + div + div + div { |
|
animation: end 2s forwards; |
|
.forcedResponse { |
|
display: none !important; |
|
} |
|
} |
|
} |
|
|
|
/* ------------------------------------------------------------------------------------ |
|
|
|
Compare two inputs then do something |
|
|
|
--------------------------------------------------------------------------------------- */ |
|
|
|
@mixin compare($input, $segment, $tile, $destroy, $waterfall, $plank) { |
|
|
|
$totalInputs: 48 + ($gameObjects - $input - 1); |
|
$tInput: ''; |
|
|
|
@for $i from 1 through $totalInputs { |
|
$tInput: $tInput + ' + input '; |
|
} |
|
|
|
input#interactiveObject#{$input}:checked + input:checked #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment - 1}) { |
|
.game_segment__control { |
|
display: block !important; |
|
|
|
.backward, .forward { |
|
display: block !important; |
|
} |
|
} |
|
} |
|
|
|
input#interactiveObject#{$input}:checked + input:checked #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment + 3}) { |
|
.game_segment__control { |
|
display: block !important; |
|
|
|
.backward, .forward { |
|
display: block !important; |
|
} |
|
} |
|
} |
|
|
|
input#interactiveObject#{$input}:checked + input:checked #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment + 1}) { |
|
.game_segment__control { |
|
display: block !important; |
|
|
|
.forward { |
|
display: block !important; |
|
} |
|
|
|
.backward { |
|
display: block !important; |
|
} |
|
} |
|
} |
|
|
|
@if($destroy) { |
|
input#interactiveObject#{$input}:checked + input #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment}) { |
|
.tile img { |
|
display: none; |
|
} |
|
} |
|
|
|
input#interactiveObject#{$input}:checked + input #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment - 1}) { |
|
.game_segment__control { |
|
.backward,.forward { |
|
display: block !important; |
|
|
|
} |
|
} |
|
} |
|
} |
|
|
|
input#interactiveObject#{$input}:checked + input:checked #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment}) { |
|
.game_segment__control { |
|
.backward { |
|
display: block !important; |
|
} |
|
} |
|
|
|
@if($waterfall) { |
|
& + div .tiles .tile:nth-of-type(13) { |
|
content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/waterOff.gif'); |
|
|
|
img { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
@if($plank) { |
|
& + div .tiles .tile:nth-of-type(13) { |
|
content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/creepyCorridor-_170.png'); |
|
img { |
|
display: none; |
|
} |
|
} |
|
} |
|
} |
|
|
|
input#interactiveObject#{$input}:checked + input:checked #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment}) .tiles .tile:nth-of-type(#{$tile}) { |
|
img { |
|
display: none; |
|
} |
|
|
|
.forcedResponse { |
|
display: none; |
|
} |
|
|
|
.responseSuccess { |
|
display: block; |
|
animation: showResponse 2s forwards; |
|
} |
|
} |
|
} |
|
|
|
// Show the rain element on specific segment |
|
|
|
@mixin makeRainAt($segment) { |
|
.viewport .game_segment:nth-of-type(#{$segment}) .drip_container { |
|
display: block; |
|
} |
|
} |
|
|
|
/* ------------------------------------------------------------------------------------ |
|
|
|
Create an interactive object |
|
|
|
--------------------------------------------------------------------------------------- */ |
|
|
|
@mixin makeInteractiveObject($reference, $segment, $tile, $force, $animate, $plank) { |
|
|
|
$totalInputs: ($rows * $columns) + ($gameObjects - $reference); |
|
$tInput: ''; |
|
|
|
@for $i from 1 through $totalInputs { |
|
$tInput: $tInput + ' + input '; |
|
} |
|
|
|
@if($force) { |
|
input#interactiveObject#{$reference}:checked #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment + 1}), |
|
input#interactiveObject#{$reference}:checked #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment - 1}){ |
|
.game_segment__control { |
|
display: none; |
|
} |
|
} |
|
} |
|
|
|
input#interactiveObject#{$reference}:checked #{$tInput} + div + div + div + div .game_inventory__item .item[data-reference="#{$reference}"] { |
|
display: block; |
|
} |
|
|
|
@if($animate) { |
|
input#interactiveObject#{$reference}:checked #{$tInput} + div + div + div { |
|
animation: shake 1s forwards; |
|
} |
|
} |
|
|
|
input#interactiveObject#{$reference}:checked #{$tInput} + div + div + div > .game_segment:nth-of-type(#{$segment}) .tiles .tile:nth-of-type(#{$tile}) { |
|
img { |
|
pointer-events: none; |
|
|
|
&.object { |
|
display: none; |
|
} |
|
|
|
&.forced { |
|
pointer-events: all; |
|
} |
|
} |
|
|
|
.response { |
|
display: block; |
|
animation: showResponse 2s forwards; |
|
} |
|
|
|
.forcedResponse { |
|
display: block; |
|
animation: forcedResponse 2s forwards; |
|
} |
|
} |
|
} |
|
|
|
// Check padlock code. The math is floored in this and so its not currently dynamic TODO |
|
|
|
@mixin checkCode($one, $two, $three, $segment, $tile) { |
|
|
|
$diff: 2; |
|
$diff2: 6; // 13 |
|
$diff3: 13; // 2 |
|
$diff4: 3; // 4 |
|
|
|
$inputPadlock: ''; |
|
$inputPadlock2: ''; |
|
$inputPadlock3: ''; |
|
$inputPadlock4: ''; |
|
//7,9,4 |
|
$totalInputs: 48 + ($gameObjects); |
|
$tInput: ''; |
|
|
|
@for $i from 1 through $totalInputs { |
|
$tInput: $tInput + ' + input '; |
|
} |
|
|
|
@for $i from 1 through $diff { |
|
$inputPadlock: $inputPadlock + ' + input + span '; |
|
} |
|
|
|
@for $i from 1 through $diff2 { |
|
$inputPadlock2: $inputPadlock2 + ' + input + span '; |
|
} |
|
|
|
@for $i from 1 through $diff3 { |
|
$inputPadlock3: $inputPadlock3 + ' + input + span '; |
|
} |
|
|
|
@for $i from 1 through $diff4 { |
|
$inputPadlock4: $inputPadlock4 + ' + input + span '; |
|
} |
|
|
|
input#interactiveObject--lock:not(:checked) + div #{$inputPadlock} + input:checked + span #{$inputPadlock2} + input:checked + span #{$inputPadlock3} + input:checked + span #{$inputPadlock4} + label #{$tInput} + div + div + div .game_segment:nth-of-type(#{$segment}) .tiles .tile:nth-of-type(#{$tile}) { |
|
img { |
|
display:none; |
|
} |
|
content: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/doorUnlocked.png') |
|
} |
|
|
|
input#interactiveObject--lock:not(:checked) + div #{$inputPadlock} + input:checked + span #{$inputPadlock2} + input:checked + span #{$inputPadlock3} + input:checked + span #{$inputPadlock4} + label #{$tInput} + div + div + div .game_segment:nth-of-type(#{$segment}) { |
|
.forward,.backward { |
|
display: block !important; |
|
} |
|
} |
|
|
|
input#interactiveObject--lock:not(:checked) + div #{$inputPadlock} + input:checked + span #{$inputPadlock2} + input:checked + span #{$inputPadlock3} + input:checked + span #{$inputPadlock4} + label #{$tInput} + div + div + div .game_segment:nth-of-type(#{$segment - 1}) { |
|
.forward,.backward { |
|
display: block !important; |
|
} |
|
} |
|
} |
|
|
|
@include checkCode(7, 3, 6, 28, 13); |
|
|
|
/* ------------------------------------------------------------------------------------ |
|
|
|
Assign an image/gif at a specific tile |
|
|
|
--------------------------------------------------------------------------------------- */ |
|
|
|
@mixin assignTileAt($segment, $tiles, $id) { |
|
@each $tile in $tiles { |
|
.game_segment:nth-of-type(#{$segment}) .tiles .tile:nth-of-type(#{$tile}) { |
|
content: url($id); |
|
} |
|
} |
|
} |
|
|
|
/* ---------------------------------- |
|
|
|
Init the traverse |
|
|
|
------------------------------------- */ |
|
|
|
$animationIndex: 1; |
|
|
|
|
|
@include traverse($rows * $columns) { |
|
|
|
/* ---------------------------------- |
|
|
|
Global scene transitions |
|
|
|
------------------------------------- */ |
|
|
|
$animationRow: floor($position / $columns); |
|
$animationIndex: $position - ($animationRow * $columns); |
|
$inputMap: $input, $input2, $input3, $input4; |
|
|
|
@for $m from 1 through 4 { |
|
input#indexRow#{$m}-#{$i}:checked #{nth($inputMap, $m)} #{$div} { |
|
animation: walk-#{$animationIndex} $walkSpeed forwards; |
|
//static-#{$animationIndex} 2s $walkSpeed infinite |
|
//background-position: 0 48px; |
|
|
|
& + div + div { |
|
@if($debug) { |
|
left: (-$tileSize * $tilesPerSegment) * ($i - 1) / 2; |
|
} @else { |
|
left: (-$tileSize * $tilesPerSegment) * ($i - 1); |
|
} |
|
|
|
@if($debug != true) { |
|
clip-path: circle(140px at ((215px - ($tileSize * $tilesPerSegment)) + (($i - 1) * ($tileSize * $tilesPerSegment))) 212px + $segmentHeight * ($m - 1)); |
|
} |
|
|
|
@if($debug) { |
|
top: -($segmentHeight * ($m - 1)) / 2; |
|
} @else { |
|
top: -$segmentHeight * ($m - 1); |
|
} |
|
|
|
} |
|
} |
|
|
|
input#indexRow#{$m}-#{$i}:checked #{nth($inputMap, $m)} #{$div} + div + .viewport > .game_segment:nth-of-type(#{$i + 1 + (($m - 1) * $columns)}) { |
|
& .forward { |
|
opacity: 1; |
|
pointer-events: all; |
|
transform: translateY(39px) translateX(-48px); |
|
transition: all 0.3s .9s; |
|
} |
|
} |
|
|
|
input#indexRow#{$m}-#{$i}:checked #{nth($inputMap, $m)} #{$div} + div + .viewport > .game_segment:nth-of-type(#{#{$i + (($m - 1) * $columns)}}) { |
|
label { |
|
pointer-events: all !important; |
|
} |
|
} |
|
|
|
input#indexRow#{$m}-#{$i}:checked #{nth($inputMap, $m)} #{$div} + div + .viewport > .game_segment:nth-of-type(#{$i - 1 + (($m - 1) * $columns)}) { |
|
& .backward { |
|
opacity: 1; |
|
pointer-events: all; |
|
transform: translateY(39px) translateX(47px); |
|
transition: all 0.3s 1s; |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Assign all our animated tiles |
|
@include assignTileAt(2, 10, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif'); |
|
@include assignTileAt(19, 10, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif'); |
|
@include assignTileAt(23, 11, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif'); |
|
@include assignTileAt(7, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif'); |
|
@include assignTileAt(5, 17, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/spookyEyes.gif'); |
|
@include assignTileAt(3, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(3, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(6, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(8, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(15, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(18, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(10, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(30, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(27, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(21, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(24, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(44, 8, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
@include assignTileAt(12, 7, 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/swingingLantern.gif'); |
|
|
|
// Create objects |
|
@include makeInteractiveObject(1, 3, 15, false, false, false); // Empy crate |
|
@include makeInteractiveObject(2, 12, 15, false, false, false); // Pickaxe |
|
@include makeInteractiveObject(3, 7, 15, true, false, false); // Rock |
|
@include makeInteractiveObject(4, 8, 15, false, true, false); // Dynamite plunger |
|
@include makeInteractiveObject(5, 31, 13, true, false, false); // Dynamite door |
|
@include makeInteractiveObject(6, 18, 15, false, false, false); // Planks |
|
@include makeInteractiveObject(7, 29, 13, true, false, true); // Plank gap |
|
@include makeInteractiveObject(8, 6, 13, false, false, false); // Note 1 |
|
@include makeInteractiveObject(9, 10, 13, false, false, false); // Note 2 |
|
@include makeInteractiveObject(10, 29, 15, false, false, false); // Note 3 |
|
@include makeInteractiveObject(11, 27, 13, false, false, false); // Lock door |
|
@include makeInteractiveObject(12, 26, 13, false, false, false); // Handle |
|
@include makeInteractiveObject(13, 46, 13, false, false, false); // Cog |
|
@include makeInteractiveObject(14, 47, 13, false, false, false); // Waterfall |
|
@include makeInteractiveObject(15, 15, 15, false, false, false); // Dynamite |
|
@include makeInteractiveObject(16, 48, 15, false, false, false); // Fuses |
|
@include makeInteractiveObject(17, 24, 15, false, false, false); // End door |
|
@include makeInteractiveObject(18, 19, 15, false, false, false); // Empty box 1 |
|
@include makeInteractiveObject(19, 22, 15, false, false, false); // Empty box 2 |
|
@include makeInteractiveObject(20, 33, 15, false, false, false); // Empty box 3 |
|
@include makeInteractiveObject(21, 12, 13, false, false, false); // Empty box 4 |
|
@include makeInteractiveObject(22, 44, 13, false, false, false); // Empty box 5 |
|
|
|
// Compare game logic |
|
@include compare(2, 7, 15, false,false, false); // Compare pick to rock |
|
@include compare(4, 31, 13, true,false, false); // Compare plunger to door |
|
@include compare(6, 29, 13, false,false, true); // Compare planks to gap |
|
@include compare(12, 46, 13, false,true, false); |
|
|
|
// Check win condition |
|
@include checkWinCondition(15, 16, 17); |
|
|
|
// Create vertical tiles |
|
@include moveVerticleOnTile(1,5); //e.g make elevator between row 1 segment 5 and the tile below it |
|
@include moveVerticleOnTile(1,11); |
|
@include moveVerticleOnTile(2,2); |
|
@include moveVerticleOnTile(2,8); |
|
@include moveVerticleOnTile(3,9); |
|
|
|
// Create walls |
|
@include makeWallAt(1,1); |
|
@include makeWallAt(1,8); // Blocking dynamite plunger |
|
@include makeWallAt(1,9); |
|
@include makeWallAt(1,13); |
|
@include makeWallAt(2,13); |
|
@include makeWallAt(2,4); |
|
@include makeWallAt(2,1); |
|
@include makeWallAt(3,1); |
|
@include makeWallAt(3,3); |
|
@include makeWallAt(3,4); |
|
@include makeWallAt(3,6); // door |
|
@include makeWallAt(3,10); |
|
@include makeWallAt(4,7); |
|
@include makeWallAt(4,13); |
|
@include makeWallAt(4,11); |
|
|
|
// Effects |
|
@include makeRainAt(3); |
|
@include makeRainAt(7); |
|
@include makeRainAt(15); |
|
@include makeRainAt(29); |
|
@include makeRainAt(22); |
|
@include makeRainAt(31); |
|
@include makeRainAt(47); |
|
@include makeRainAt(18); |
|
|
|
// Animations |
|
@keyframes showResponse { |
|
0% {opacity:1; top: calc(50% - 36px);} |
|
70% {opacity: 1;top: calc(50% - 46px);} |
|
100% {opacity:0; top: calc(50% - 46px);} |
|
} |
|
|
|
@keyframes forcedResponse { |
|
0% {opacity:1; top: calc(50% - 36px);} |
|
70% {opacity: 1;top: calc(50% - 46px);} |
|
100% {opacity:1; top: calc(50% - 46px);} |
|
} |
|
|
|
@keyframes logo { |
|
0%{opacity: 0; transform: scale(0)} |
|
100%{opacity: 1; transform: scale(1)} |
|
} |
|
|
|
@keyframes fadeIn { |
|
0%{opacity: 0;} |
|
100%{opacity: 1;} |
|
} |
|
|
|
@keyframes fadeOut { |
|
0%{opacity: 1;} |
|
100%{opacity: 0;} |
|
} |
|
|
|
@keyframes bar { |
|
0%{width: 0%;} |
|
100%{width: 100%;} |
|
} |
|
|
|
@keyframes dialogueIn { |
|
0%{opacity: 0;left: 20px;} |
|
10%{left: 20px;} |
|
20%{left: 0px;} |
|
30%{left: 20px;} |
|
40%{left: 4px;} |
|
50%{left: 18px;} |
|
60%{left: 8px;} |
|
70%{left: 20px;} |
|
80%{left: 5px;} |
|
90%{left: 16px;} |
|
100%{opacity: 1;left: 20px;} |
|
} |
|
|
|
@keyframes shake { |
|
0%{transform: translateX(0px)} |
|
10%{transform: translateX(6px)} |
|
20%{transform: translateX(-6px)} |
|
30%{transform: translateX(6px)} |
|
40%{transform: translateX(-6px)} |
|
50%{transform: translateX(6px)} |
|
60%{transform: translateX(-6px)} |
|
70%{transform: translateX(6px)} |
|
80%{transform: translateX(-6px)} |
|
90%{transform: translateX(6px)} |
|
100%{transform: translateX(0px)} |
|
} |
|
|
|
@keyframes end { |
|
0%{transform: translateX(0px);opacity:1} |
|
10%{transform: translateX(6px)} |
|
20%{transform: translateX(-6px)} |
|
30%{transform: translateX(6px)} |
|
40%{transform: translateX(-6px)} |
|
50%{transform: translateX(6px)} |
|
60%{transform: translateX(-6px)} |
|
70%{transform: translateX(6px)} |
|
80%{transform: translateX(-6px)} |
|
90%{transform: translateX(6px)} |
|
100%{transform: translateX(0px);opacity:0;} |
|
} |
|
|
|
@keyframes shake-debug { |
|
0%{transform: translateX(0px) scale(0.5)} |
|
10%{transform: translateX(10px) scale(0.5)} |
|
20%{transform: translateX(-0px) scale(0.5)} |
|
30%{transform: translateX(10px) scale(0.5)} |
|
40%{transform: translateX(-10px) scale(0.5)} |
|
50%{transform: translateX(10px) scale(0.5)} |
|
60%{transform: translateX(-10px) scale(0.5)} |
|
70%{transform: translateX(10px) scale(0.5)} |
|
80%{transform: translateX(-10px) scale(0.5)} |
|
90%{transform: translateX(10px) scale(0.5)} |
|
100%{transform: translateX(0px) scale(0.5)} |
|
} |
|
|
|
|
|
// Trailer |
|
// Labels are out |