mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2025-05-02 08:53:38 -04:00
Made the thang editor a little more organized.
This commit is contained in:
parent
59ec63c041
commit
ddbf45b50c
3 changed files with 82 additions and 60 deletions
app
|
@ -1,57 +1,73 @@
|
||||||
#editor-thang-type-edit-view
|
#editor-thang-type-edit-view
|
||||||
#save-button
|
#save-button
|
||||||
float: right
|
float: right
|
||||||
|
margin-right: 20px
|
||||||
|
|
||||||
|
#portrait
|
||||||
|
float: right
|
||||||
|
|
||||||
.control-row
|
.main-area
|
||||||
padding: 5px
|
padding: 5px
|
||||||
& > *
|
& > div.slider-cell
|
||||||
margin-right: 5px
|
margin-right: 5px
|
||||||
|
float: right
|
||||||
|
.file-controls
|
||||||
|
float: left
|
||||||
|
position: relative
|
||||||
|
top: 5px
|
||||||
|
left: 5px
|
||||||
|
button
|
||||||
|
margin-left: 5px
|
||||||
select
|
select
|
||||||
position: relative
|
position: relative
|
||||||
top: 5px
|
top: 5px
|
||||||
input
|
input
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
#state
|
|
||||||
position: absolute
|
|
||||||
top: 10px
|
|
||||||
left: 40%
|
|
||||||
right: 40%
|
|
||||||
height: 30px
|
|
||||||
text-align: center
|
|
||||||
font-size: 20px
|
|
||||||
line-height: 30px
|
|
||||||
text-transform: uppercase
|
|
||||||
|
|
||||||
#canvas
|
|
||||||
float: right
|
|
||||||
width: 400px
|
|
||||||
|
|
||||||
#settings-col
|
|
||||||
float: left
|
|
||||||
width: 550px
|
|
||||||
|
|
||||||
.rotation-label
|
|
||||||
width: 45px
|
|
||||||
display: inline-block
|
|
||||||
margin-left: 5px
|
|
||||||
|
|
||||||
.slider-cell
|
.slider-cell
|
||||||
margin: 5px 0
|
margin: 5px 0
|
||||||
float: left
|
float: left
|
||||||
width: 120px
|
width: 120px
|
||||||
|
|
||||||
.selector
|
.selector
|
||||||
display: inline-block
|
display: inline-block
|
||||||
width: 100px
|
width: 100px
|
||||||
position: relative
|
position: relative
|
||||||
top: 3px
|
top: 3px
|
||||||
|
|
||||||
#thang-components-edit-view
|
|
||||||
position: relative
|
|
||||||
height: 500px
|
|
||||||
top: -20px
|
|
||||||
|
|
||||||
.treema-root
|
#canvas
|
||||||
background-color: white
|
float: right
|
||||||
border-radius: 4px
|
width: 400px
|
||||||
|
border: 1px solid blue
|
||||||
|
|
||||||
|
#settings-col
|
||||||
|
float: left
|
||||||
|
width: 550px
|
||||||
|
|
||||||
|
#thang-type-treema
|
||||||
|
height: 400px
|
||||||
|
overflow: scroll
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
|
||||||
|
#thang-components-edit-view
|
||||||
|
position: relative
|
||||||
|
height: 500px
|
||||||
|
top: -20px
|
||||||
|
|
||||||
|
.treema-root
|
||||||
|
background-color: white
|
||||||
|
border-radius: 4px
|
||||||
|
|
||||||
|
#canvases
|
||||||
|
border: 1px solid green
|
||||||
|
max-width: 100%
|
||||||
|
max-height: 600px
|
||||||
|
overflow: scroll
|
||||||
|
clear: both
|
||||||
|
box-sizing: border-box
|
||||||
|
margin-bottom: 20px
|
||||||
|
canvas
|
||||||
|
background: darkseagreen
|
||||||
|
margin: 2px
|
||||||
|
|
||||||
|
|
|
@ -2,6 +2,8 @@ extends /templates/base
|
||||||
|
|
||||||
block content
|
block content
|
||||||
|
|
||||||
|
img#portrait.img-polaroid
|
||||||
|
|
||||||
button.btn.btn-primary#save-button(data-toggle="coco-modal", data-target="modal/save_version")
|
button.btn.btn-primary#save-button(data-toggle="coco-modal", data-target="modal/save_version")
|
||||||
| Save
|
| Save
|
||||||
|
|
||||||
|
@ -12,52 +14,55 @@ block content
|
||||||
a(href="#editor-thang-main-tab-view", data-toggle="tab") Main
|
a(href="#editor-thang-main-tab-view", data-toggle="tab") Main
|
||||||
li
|
li
|
||||||
a(href="#editor-thang-components-tab-view", data-toggle="tab") Components
|
a(href="#editor-thang-components-tab-view", data-toggle="tab") Components
|
||||||
|
li
|
||||||
|
a(href="#editor-thang-canvases-view", data-toggle="tab") Canvases
|
||||||
|
|
||||||
div.tab-content
|
div.tab-content
|
||||||
div.tab-pane.active#editor-thang-main-tab-view
|
div.tab-pane.active#editor-thang-main-tab-view
|
||||||
|
|
||||||
div.main-area
|
div.main-area.well
|
||||||
div.controls
|
div.file-controls
|
||||||
div.control-row#animation-row
|
select#animations-select
|
||||||
select#animations-select
|
for animation in animations
|
||||||
for animation in animations
|
option #{animation}
|
||||||
option #{animation}
|
button.btn.btn-small.btn-primary#upload-button
|
||||||
button.btn.btn-small.btn-primary#upload-button
|
i.icon-upload
|
||||||
i.icon-upload
|
button.btn.btn-small.btn-primary#clear-button
|
||||||
button.btn.btn-small.btn-primary#clear-button
|
i.icon-remove
|
||||||
i.icon-remove
|
input#real-upload-button(type="file")
|
||||||
input#real-upload-button(type="file")
|
|
||||||
|
|
||||||
canvas#canvas(width="400", height="400", style="background-color:#999999")
|
|
||||||
|
|
||||||
div#settings-col
|
|
||||||
div#thang-type-treema
|
|
||||||
div.slider-cell
|
div.slider-cell
|
||||||
| Rotation:
|
| Rotation:
|
||||||
span.rotation-label
|
span.rotation-label
|
||||||
.selector#rotation-slider
|
.selector#rotation-slider
|
||||||
|
|
||||||
div.slider-cell
|
div.slider-cell
|
||||||
| Scale:
|
| Scale:
|
||||||
span.scale-label
|
span.scale-label
|
||||||
.selector#scale-slider
|
.selector#scale-slider
|
||||||
|
|
||||||
div.slider-cell
|
div.slider-cell
|
||||||
| Resolution:
|
| Resolution:
|
||||||
span.resolution-label 4.0x
|
span.resolution-label 4.0x
|
||||||
.selector#resolution-slider
|
.selector#resolution-slider
|
||||||
|
|
||||||
div.slider-cell
|
div.slider-cell
|
||||||
| Health:
|
| Health:
|
||||||
span.health-label 10hp
|
span.health-label 10hp
|
||||||
.selector#health-slider
|
.selector#health-slider
|
||||||
|
|
||||||
img#portrait
|
.clearfix
|
||||||
|
|
||||||
div#canvases
|
div#settings-col
|
||||||
|
div#thang-type-treema
|
||||||
|
|
||||||
|
canvas#canvas(width="400", height="400", style="background-color:#999999")
|
||||||
|
|
||||||
|
.clearfix
|
||||||
|
|
||||||
div.tab-pane#editor-thang-components-tab-view
|
div.tab-pane#editor-thang-components-tab-view
|
||||||
|
|
||||||
#thang-components-edit-view
|
#thang-components-edit-view
|
||||||
|
|
||||||
|
div.tab-pane#editor-thang-canvases-view
|
||||||
|
|
||||||
|
div#canvases
|
||||||
|
|
||||||
.clearfix
|
.clearfix
|
||||||
|
|
|
@ -221,6 +221,7 @@ module.exports = class ThangTypeEditView extends View
|
||||||
portrait = @thangType.getPortraitImage(options)
|
portrait = @thangType.getPortraitImage(options)
|
||||||
return unless portrait
|
return unless portrait
|
||||||
portrait?.attr('id', 'portrait').addClass('img-polaroid')
|
portrait?.attr('id', 'portrait').addClass('img-polaroid')
|
||||||
|
portrait.addClass 'img-polaroid'
|
||||||
$('#portrait').replaceWith(portrait)
|
$('#portrait').replaceWith(portrait)
|
||||||
|
|
||||||
showDisplayObject: (displayObject) ->
|
showDisplayObject: (displayObject) ->
|
||||||
|
@ -246,7 +247,7 @@ module.exports = class ThangTypeEditView extends View
|
||||||
initSliders: ->
|
initSliders: ->
|
||||||
@rotationSlider = @initSlider $("#rotation-slider", @$el), 50, @updateRotation
|
@rotationSlider = @initSlider $("#rotation-slider", @$el), 50, @updateRotation
|
||||||
@scaleSlider = @initSlider $('#scale-slider', @$el), 29, @updateScale
|
@scaleSlider = @initSlider $('#scale-slider', @$el), 29, @updateScale
|
||||||
@resolutionSlider = @initSlider $('#resolution-slider', @$el), 19, @updateResolution
|
@resolutionSlider = @initSlider $('#resolution-slider', @$el), 39, @updateResolution
|
||||||
@healthSlider = @initSlider $('#health-slider', @$el), 100, @updateHealth
|
@healthSlider = @initSlider $('#health-slider', @$el), 100, @updateHealth
|
||||||
|
|
||||||
updateRotation: =>
|
updateRotation: =>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue