codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-12-01 03:16:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
codecombat/app/styles/play/campaign-view.sass

573 lines
14 KiB
Sass
Raw Normal View History

Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
@import "app/styles/mixins"
@import "app/styles/bootstrap/variables"
$mapHeight: 1536
Merged in campaign editor and campaign view. Destroyed WorldMapView, CampaignOptions, and LevelOptions. Lots of stuff is now stored in the database instead of code. Cleaned up a few unneeded old features. Fixed some problems with checking permissions on first rather than latest versions of documents.
2014-12-28 16:25:20 -05:00
$mapWidth: 2350
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
$levelDotWidth: 2%
Merged in campaign editor and campaign view. Destroyed WorldMapView, CampaignOptions, and LevelOptions. Lots of stuff is now stored in the database instead of code. Cleaned up a few unneeded old features. Fixed some problems with checking permissions on first rather than latest versions of documents.
2014-12-28 16:25:20 -05:00
$levelDotHeight: $levelDotWidth * $mapWidth / $mapHeight
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
$levelDotZ: $levelDotHeight * 0.25
$levelDotHoverZ: $levelDotZ * 2
$levelDotShadowWidth: 0.8 * $levelDotWidth
$levelDotShadowHeight: 0.8 * $levelDotHeight
$levelClickRadius: 40px
$gameControlSize: 80px
$gameControlMargin: 30px
+keyframes(levelStartedPulse)
from
@include box-shadow(0px 0px 4px #333)
margin-bottom: -$levelDotHeight / 3 + $levelDotZ
50%
@include box-shadow(0px 0px 22px skyblue)
margin-bottom: -$levelDotHeight / 3 + ($levelDotHoverZ + $levelDotZ) / 2
to
@include box-shadow(0px 0px 4px #333)
margin-bottom: -$levelDotHeight / 3 + $levelDotZ
#campaign-view
width: 100%
height: 100%
position: absolute
.gradient
position: absolute
z-index: 0
&.horizontal-gradient
left: 0
right: 0
height: 3%
&.vertical-gradient
top: 0
bottom: 0
width: 3%
&.top-gradient
top: 0
&.right-gradient
right: 0
&.bottom-gradient
bottom: 0
&.left-gradient
left: 0
.map
position: relative
.map-background
width: 100%
height: 100%
background-size: 100%
@include user-select(none)
.level, .level-shadow
position: absolute
Fixed showing hero unlock portraits on world map. Showing them now even before their levels are unlocked, and showing until you purchase, not just unlock them.
2015-01-29 22:05:30 -05:00
border-radius: 50%
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
-webkit-transform: scaleY(0.75)
transform: scaleY(0.75)
.level
z-index: 2
width: $levelDotWidth
height: $levelDotHeight
margin-left: -0.5 * $levelDotWidth
margin-bottom: -$levelDotHeight / 3 + $levelDotZ
border: 2px groove white
@include transition(margin-bottom 0.5s ease)
&.disabled, &.locked
background-image: url(/images/pages/game-menu/lock.png)
background-size: 75%
background-repeat: no-repeat
background-position: 50% 50%
opacity: 0.7
a
cursor: default
&.next
width: 2 * $levelDotWidth
height: 2 * $levelDotHeight
margin-left: -0.5 * 2 * $levelDotWidth
margin-bottom: -2 * $levelDotHeight / 3 + 2 * $levelDotZ
&.started, &.next
border: 3px solid lightgreen
@include box-shadow(0px 0px 35px skyblue)
// Would be cool, but kills performance, since we have to re-render all the time.
//&:not(:hover)
// -webkit-animation-name: levelStartedPulse
// -webkit-animation-duration: 3s
// -webkit-animation-iteration-count: infinite
&.complete
border: 3px solid gold
@include box-shadow(0px 0px 35px skyblue)
img.banner
position: absolute
bottom: 38%
left: -50%
width: 200%
pointer-events: none
img.star
width: 100%
bottom: 7%
position: absolute
pointer-events: none
.glyphicon-star
position: absolute
color: lightblue
font-size: 21px
left: 1.5px
&.started .glyphicon-star
left: 0.5px
Fixed showing hero unlock portraits on world map. Showing them now even before their levels are unlocked, and showing until you purchase, not just unlock them.
2015-01-29 22:05:30 -05:00
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
img.hero-portrait
width: 120%
Fixed showing hero unlock portraits on world map. Showing them now even before their levels are unlocked, and showing until you purchase, not just unlock them.
2015-01-29 22:05:30 -05:00
height: auto
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
bottom: 75%
left: 75%
Fixed showing hero unlock portraits on world map. Showing them now even before their levels are unlocked, and showing until you purchase, not just unlock them.
2015-01-29 22:05:30 -05:00
margin-left: 0
margin-bottom: 0
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
Fixed showing hero unlock portraits on world map. Showing them now even before their levels are unlocked, and showing until you purchase, not just unlock them.
2015-01-29 22:05:30 -05:00
img.hero-portrait
position: absolute
border: 1px solid black
border-radius: 50%
background: white
width: $levelDotWidth * 1.5
Fixed some memory leaks and particle disposal problems. Re-enabled particles. Tweaked particle stylings.
2015-02-02 21:02:57 -05:00
height: $levelDotHeight * 1.5 / 1.75
Fixed showing hero unlock portraits on world map. Showing them now even before their levels are unlocked, and showing until you purchase, not just unlock them.
2015-01-29 22:05:30 -05:00
margin-left: -0.5 * $levelDotWidth * 1.5
Fixed some memory leaks and particle disposal problems. Re-enabled particles. Tweaked particle stylings.
2015-02-02 21:02:57 -05:00
margin-bottom: -$levelDotHeight / 3 * 1.5 / 1.75
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
.level-shadow
z-index: 1
width: $levelDotShadowWidth
height: $levelDotShadowHeight
margin-left: -0.5 * $levelDotShadowWidth
margin-bottom: -$levelDotShadowHeight / 3
background-color: black
@include box-shadow(0px 0px 10px black)
@include opacity(0.75)
&.next
width: 2 * $levelDotShadowWidth
height: 2 * $levelDotShadowHeight
margin-left: -0.5 * 2 * $levelDotShadowWidth
margin-bottom: -2 * $levelDotShadowHeight / 3
.level:hover
// TODO: This rotate stops Firefox from flickering, but also disables the scaleY(0.75)
// TODO: The dot looks like it's jumping.
// TODO: -moz-transform: scaleY(0.75) didn't do anything
// TODO: Does not break Chrome's oval.
-moz-transform: rotate(0)
margin-bottom: -$levelDotHeight / 3 + $levelDotHoverZ
@include box-shadow(0px 0px 35px skyblue)
&.next
margin-bottom: -2 * $levelDotHeight / 3 + 2 * $levelDotHoverZ
.level
a
display: block
padding: $levelClickRadius
margin-left: -0.5 * $levelClickRadius
margin-top: -0.5 * $levelClickRadius
border-radius: $levelClickRadius
&.next a
padding: 2 * $levelClickRadius
margin-left: 2 * -0.5 * $levelClickRadius
margin-top: 2 * -0.5 * $levelClickRadius
border-radius: 2 * $levelClickRadius
.tooltip
z-index: 2
Updates to require/restrict level logic.
2015-01-02 18:44:43 -05:00
.tooltip-arrow
display: none
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
.level-info-container
display: none
position: absolute
z-index: 3
Upgraded level info popover; made it a click instead of a hover; added view scores button to it when level has been completed.
2015-02-03 21:25:38 -05:00
width: 362px
//min-height: 179px
padding: 17px 20px 20px 20px
border: 0
background: transparent url(/images/pages/play/level-info-background.png) no-repeat center center
background-size: 100% 100%
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
.level-info
Upgraded level info popover; made it a click instead of a hover; added view scores button to it when level has been completed.
2015-02-03 21:25:38 -05:00
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
h3
Upgraded level info popover; made it a click instead of a hover; added view scores button to it when level has been completed.
2015-02-03 21:25:38 -05:00
color: rgb(232, 217, 87)
text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
padding: 0 2px
margin: 0 0 10px 31px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
.level-description
color: black
Upgraded level info popover; made it a click instead of a hover; added view scores button to it when level has been completed.
2015-02-03 21:25:38 -05:00
.level-status
background: transparent url(/images/pages/play/level-info-status-spritesheet.png) no-repeat 0 0
width: 60px
height: 60px
position: absolute
left: -15px
top: -15px
&.complete .level-status
background-position: -60px 0
&.premium .level-status
background-position: -120px 0
&.complete.premium .level-status
background-position: -180px 0
.start-level
min-width: 200px
display: block
margin: 10px auto 0 auto
Added a difficulty badge when going to play a replayable level.
2015-02-04 16:42:49 -05:00
position: relative
.badge
position: absolute
top: initial
left: initial
right: -25px
bottom: -25px
font-size: 20px
color: black
border: 1px solid black
background-color: rgb(232, 217, 87)
border-radius: 50%
opacity: 1
padding: 3px 9px
Upgraded level info popover; made it a click instead of a hover; added view scores button to it when level has been completed.
2015-02-03 21:25:38 -05:00
&.complete
.start-level, .view-solutions
min-width: initial
display: inline-block
width: calc(50% - 5px)
.start-level
margin: 10px 0 0 5px
.view-solutions
margin: 10px 5px 0 0
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
.campaign-switch
color: purple
position: absolute
z-index: 1
font-size: 2vw
text-shadow: 0 0 0.3vw white, 0 0 0.3vw white
&:hover
text-decoration: none
Reimplemented next-level arrow highlighting. Campaign Editor now draws lines to show level unlock patterns. Removed more old WorldMapView stuff. Can now configure Hero Placeholder say cooldowns per-level.
2015-01-13 12:04:09 -05:00
.next-level-line
transform-origin: 0 100%
height: 8px
position: absolute
.line
width: calc(100% - 12px - 10px)
float: left
margin-top: 2px
margin-bottom: 2px
height: 4px
background: repeating-linear-gradient(-45deg, #AF9F7D, #DFC89C 5px, #F1EAC0 5px, #AF9F7D 10px)
box-shadow: 0px 0px 4px black
.point
width: 12px
float: left
margin-top: -4px
border-top: 8px solid transparent
border-bottom: 8px solid transparent
border-left: 12px solid lighten(#F1EAC0, 10%)
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
.game-controls
position: absolute
right: 1%
bottom: 1%
z-index: 3
.btn
&:not(:first-child)
margin-left: $gameControlMargin
width: $gameControlSize
height: $gameControlSize
background: url(/images/pages/play/menu_icons.png) no-repeat
position: relative
img
position: absolute
left: 0
top: 0
width: 100%
height: 100%
background-size: cover
@include transition(0.5s ease)
@include box-shadow(2px 2px 4px black)
border: 0
border-radius: 12px
// IE9 shows a blank white button with this MS gradient filter in place
filter: none
&:hover
@include box-shadow(0 0 12px #bbf)
&:active
@include box-shadow(0 0 20px white)
&.heroes
background-position: (-1 * $gameControlSize) 0px
&.achievements
background-position: (-2 * $gameControlSize) 0px
&.account
background-position: (-3 * $gameControlSize) 0px
&.settings
background-position: (-4 * $gameControlSize) 0px
&.gems
background-position: (-5 * $gameControlSize) 0px
.tooltip
font-size: 24px
.tooltip-arrow
display: none
.user-status
position: absolute
bottom: 16px
left: 8px
text-align: center
font-size: 24px
color: white
text-shadow: 0px 2px 1px black, 0px -2px 1px black, -2px 0px 1px black, 2px 0px 1px black
height: 32px
line-height: 32px
.user-status-line
position: relative
button.btn.btn-illustrated
margin-left: 10px
min-width: 90px
height: 32px
color: white
.gem, .player-level-icon, .player-hero-icon
position: absolute
top: 1px
#gems-count
margin-left: 40px
.player-level
margin-left: 34px
.player-name
margin-left: 45px
$spriteSheetSize: 30px
.player-level-icon, .player-hero-icon
background: transparent url(/images/pages/play/play-spritesheet.png)
background-size: cover
background-position: (-2 * $spriteSheetSize) 0
display: inline-block
width: 30px
height: 30px
margin: 0px 2px
.player-hero-icon
margin-left: 10px
background-position: (-4 * $spriteSheetSize) 0
&.knight
background-position: (-5 * $spriteSheetSize) 0
&.librarian
background-position: (-6 * $spriteSheetSize) 0
&.ninja
background-position: (-7 * $spriteSheetSize) 0
&.potion-master
background-position: (-8 * $spriteSheetSize) 0
&.samurai
background-position: (-9 * $spriteSheetSize) 0
&.trapper
background-position: (-10 * $spriteSheetSize) 0
&.forest-archer
background-position: (-11 * $spriteSheetSize) 0
&.sorcerer
background-position: (-12 * $spriteSheetSize) 0
#volume-button
position: absolute
left: 1%
top: 1%
padding: 3px 8px
@include opacity(0.75)
&:hover
@include opacity(1.0)
.glyphicon
display: none
font-size: 32px
&.vol-up .glyphicon.glyphicon-volume-up
display: inline-block
&.vol-off .glyphicon.glyphicon-volume-off
display: inline-block
@include opacity(0.50)
&:hover
@include opacity(0.75)
&.vol-down .glyphicon.glyphicon-volume-down
display: inline-block
Added a back button to hit campaign selector view.
2015-02-05 18:40:33 -05:00
#back-button
position: absolute
left: 70px
left: -webkit-calc(1% + 55px)
left: calc(1% + 55px)
top: 1%
padding: 3px 8px
@include opacity(0.75)
&:hover
@include opacity(1.0)
.glyphicon
font-size: 32px
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
#campaign-status
position: absolute
left: 0
Added campaign label banner art.
2015-02-03 12:56:27 -05:00
top: 0
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
width: 100%
margin: 0
text-align: center
Added campaign label banner art.
2015-02-03 12:56:27 -05:00
color: rgb(232, 217, 87)
font-size: 28px
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
Added campaign completion progress indicator.
2015-01-29 11:26:12 -05:00
z-index: 30
pointer-events: none
.campaign-status-background
Added campaign label banner art.
2015-02-03 12:56:27 -05:00
background: transparent url(/images/pages/play/campaign-banner.png) no-repeat center center
Added campaign completion progress indicator.
2015-01-29 11:26:12 -05:00
border-radius: 10px
Added campaign label banner art.
2015-02-03 12:56:27 -05:00
padding-top: 30px
Added campaign completion progress indicator.
2015-01-29 11:26:12 -05:00
display: inline-block
Added campaign label banner art.
2015-02-03 12:56:27 -05:00
min-width: 250px
height: 106px
Added campaign completion progress indicator.
2015-01-29 11:26:12 -05:00
Added campaign label banner art.
2015-02-03 12:56:27 -05:00
.campaign-name
line-height: 26px
.levels-completed
font-size: 22px
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
Fixed showing hero unlock portraits on world map. Showing them now even before their levels are unlocked, and showing until you purchase, not just unlock them.
2015-01-29 22:05:30 -05:00
.particle-man
z-index: 2
Added campaign world selector portal screen for half of players.
2015-02-05 18:05:22 -05:00
.portal
position: relative
width: 100%
height: 100%
background: transparent url(/images/pages/play/portal-background.png)
display: flex
align-items: center
justify-content: center
.portals
$campaignWidth: 317px
$campaignHeight: 634px
$campaignHoverScale: 1.2
width: 6 * $campaignWidth
height: $campaignHeight * $campaignHoverScale
flex-wrap: nowrap
display: flex
overflow: hidden
.campaign
width: $campaignWidth
height: $campaignHeight
margin-top: $campaignHeight * ($campaignHoverScale - 1) / 2
background: transparent url(/images/pages/play/portal-campaigns.png) no-repeat 0 0
display: inline-block
flex-shrink: 0
position: relative
cursor: pointer
// http://easings.net/#easeOutBack plus tweaked a bit: http://cubic-bezier.com/#.11,.67,.08,1.42
@include transition(0.25s cubic-bezier(0.11, 0.67, 0.8, 1.42))
&:hover
@include scale($campaignHoverScale)
&.silhouette
@include filter(contrast(50%) brightness(65%))
pointer-events: none
&.locked
@include filter(contrast(80%) brightness(80%))
pointer-events: none
&.forest
background-position: (-1 * $campaignWidth) 0
&.desert
background-position: (-2 * $campaignWidth) 0
&.mountain
background-position: (-3 * $campaignWidth) 0
&.ice
background-position: (-4 * $campaignWidth) 0
&.volcano
background-position: (-5 * $campaignWidth) 0
.campaign-label
position: absolute
top: 55%
width: 100%
text-align: center
.campaign-name, .levels-completed, .campaign-locked
margin: 0
Added a back button to hit campaign selector view.
2015-02-05 18:40:33 -05:00
color: white
Added campaign world selector portal screen for half of players.
2015-02-05 18:05:22 -05:00
text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0
.levels-completed
font-size: 22px
.play-button
margin-top: 30px
min-width: 100px
Also added campaign view jade and sass file clones.
2014-12-19 13:06:20 -05:00
body.ipad #campaign-view
// iPad only supports up to Kithgard Gates for now.
.campaign-switch
display: none
Reference in a new issue Copy permalink