mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-23 23:58:02 -05:00
Adds initial modal and view for terrain generator
This commit is contained in:
parent
efa2bee08c
commit
c40da260f0
3 changed files with 191 additions and 0 deletions
148
app/styles/terrain_randomise.sass
Normal file
148
app/styles/terrain_randomise.sass
Normal file
|
@ -0,0 +1,148 @@
|
|||
#terrain-randomise-modal
|
||||
#noob-view p
|
||||
font-size: 30px
|
||||
|
||||
#skip-tutorial-button
|
||||
font-size: 16px
|
||||
|
||||
.tutorial-suggestion
|
||||
text-align: center
|
||||
font-size: 18px
|
||||
margin: 10px 0 30px
|
||||
|
||||
.play-option
|
||||
margin-bottom: 15px
|
||||
width: 100%
|
||||
height: 100px
|
||||
overflow: hidden
|
||||
background: white
|
||||
border: 1px solid #333
|
||||
position: relative
|
||||
|
||||
-webkit-transition: opacity 0.3s ease-in-out
|
||||
-moz-transition: opacity 0.3s ease-in-out
|
||||
-ms-transition: opacity 0.3s ease-in-out
|
||||
-o-transition: opacity 0.3s ease-in-out
|
||||
transition: opacity 0.3s ease-in-out
|
||||
|
||||
opacity: 0.4
|
||||
|
||||
border-radius: 5px
|
||||
.only-one
|
||||
-webkit-transition: opacity 0.3s ease-in-out
|
||||
-moz-transition: opacity 0.3s ease-in-out
|
||||
-ms-transition: opacity 0.3s ease-in-out
|
||||
-o-transition: opacity 0.3s ease-in-out
|
||||
transition: opacity 0.3s ease-in-out
|
||||
opacity: 0
|
||||
|
||||
.play-option:hover
|
||||
opacity: 1
|
||||
.only-one
|
||||
opacity: 1
|
||||
|
||||
.my-icon
|
||||
position: relative
|
||||
left: 0
|
||||
top: -10px
|
||||
z-index: 1
|
||||
|
||||
.my-team-icon
|
||||
height: 60px
|
||||
position: relative
|
||||
top: -10px
|
||||
left: 10px
|
||||
z-index: 0
|
||||
|
||||
.opponent-team-icon
|
||||
height: 60px
|
||||
position: relative
|
||||
top: 10px
|
||||
right: 10px
|
||||
z-index: 0
|
||||
float: right
|
||||
-moz-transform: scaleX(-1)
|
||||
-o-transform: scaleX(-1)
|
||||
-webkit-transform: scaleX(-1)
|
||||
transform: scaleX(-1)
|
||||
filter: FlipH
|
||||
-ms-filter: "FlipH"
|
||||
|
||||
.opponent-icon
|
||||
position: relative
|
||||
float: right
|
||||
right: 0
|
||||
top: -10px
|
||||
-moz-transform: scaleX(-1)
|
||||
-o-transform: scaleX(-1)
|
||||
-webkit-transform: scaleX(-1)
|
||||
transform: scaleX(-1)
|
||||
filter: FlipH
|
||||
-ms-filter: "FlipH"
|
||||
z-index: 1
|
||||
|
||||
.name-label
|
||||
border-bottom: 20px solid lightslategray
|
||||
height: 0
|
||||
width: 40%
|
||||
position: absolute
|
||||
bottom: 0
|
||||
color: black
|
||||
font-weight: bold
|
||||
text-align: center
|
||||
z-index: 2
|
||||
|
||||
span
|
||||
position: relative
|
||||
top: 1px
|
||||
|
||||
.my-name
|
||||
border-right: 15px solid transparent
|
||||
left: 0
|
||||
span
|
||||
left: 3px
|
||||
|
||||
.preset-size
|
||||
border-left: 15px solid transparent
|
||||
right: 0
|
||||
//text-align: right
|
||||
span
|
||||
right: 3px
|
||||
|
||||
.preset-name
|
||||
border-top: 25px solid darkgray
|
||||
border-left: 20px solid transparent
|
||||
border-right: 20px solid transparent
|
||||
height: 0
|
||||
width: 30%
|
||||
position: absolute
|
||||
left: 35%
|
||||
top: 0
|
||||
color: black
|
||||
text-align: center
|
||||
font-size: 18px
|
||||
font-weight: bold
|
||||
|
||||
span
|
||||
position: relative
|
||||
top: -25px
|
||||
|
||||
.easy-option .preset-name
|
||||
border-top: 25px solid limegreen
|
||||
|
||||
.medium-option .preset-name
|
||||
border-top: 25px solid darkorange
|
||||
|
||||
.hard-option .preset-name
|
||||
border-top: 25px solid black
|
||||
color: white
|
||||
|
||||
.vs
|
||||
position: absolute
|
||||
left: 40%
|
||||
right: 40%
|
||||
text-align: center
|
||||
top: 35px
|
||||
font-size: 40px
|
||||
font-weight: bolder
|
||||
color: black
|
14
app/templates/modal/terrain_randomise.jade
Normal file
14
app/templates/modal/terrain_randomise.jade
Normal file
|
@ -0,0 +1,14 @@
|
|||
extends /templates/modal/modal_base
|
||||
|
||||
block modal-header-content
|
||||
h3(data-i18n="editor.pick_a_terrain") Pick a Terrain
|
||||
|
||||
block modal-body-content
|
||||
div#normal-view
|
||||
a(href="#")
|
||||
div.play-option(data-preset-type="grassy", data-preset-size="small")
|
||||
div.preset-size.name-label
|
||||
span(data-i18n="ladder.small") Small
|
||||
div.preset-name
|
||||
span(data-i18n="ladder.grassy") Grassy
|
||||
//- for model in models
|
29
app/views/modal/terrain_randomise_modal.coffee
Normal file
29
app/views/modal/terrain_randomise_modal.coffee
Normal file
|
@ -0,0 +1,29 @@
|
|||
ModalView = require 'views/kinds/ModalView'
|
||||
template = require 'templates/modal/terrain_randomise'
|
||||
CocoModel = require 'models/CocoModel'
|
||||
|
||||
module.exports = class TerrainRandomiseModal extends ModalView
|
||||
id: 'terrain-randomise-modal'
|
||||
template: template
|
||||
thangs = []
|
||||
|
||||
events:
|
||||
'click .play-option': 'onRandomise'
|
||||
|
||||
onRevertModel: (e) ->
|
||||
id = $(e.target).val()
|
||||
CocoModel.backedUp[id].revert()
|
||||
$(e.target).closest('tr').remove()
|
||||
@reloadOnClose = true
|
||||
|
||||
onRandomise: (e) ->
|
||||
|
||||
getRenderData: ->
|
||||
c = super()
|
||||
models = _.values CocoModel.backedUp
|
||||
models = (m for m in models when m.hasLocalChanges())
|
||||
c.models = models
|
||||
c
|
||||
|
||||
onHidden: ->
|
||||
location.reload() if @reloadOnClose
|
Loading…
Reference in a new issue