codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-11-27 09:35:39 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merged in the full-screen editor, and fixed a spell palette multi-language bug while at it.

Browse source
This commit is contained in:
Nick Winter 2014-07-09 13:41:42 -07:00
parent 44e5c2826c
commit 0ed8d2b371
16 changed files with 135 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/styles/play/level.sass
View file

@ -37,6 +37,12 @@ body.is-playing
right: 0
top: 0px
bottom: 0
transition: width 0.5s ease-in-out
&.fullscreen-editor
position: fixed
width: 100%
height: 100%
z-index: 20
#pointer
position: absolute

22
app/styles/play/level/tome/problem_alert.sass
View file

@ -6,13 +6,14 @@
bottom: -120px
left: 10px
right: 10px
background: transparent url(/images/level/code_editor_error_background.png) no-repeat
background-size: 100% 100%
background: transparent
border: 0
padding: 18px 35px 18px 14px
text-shadow: none
color: white
word-wrap: break-word
border-image: url(/images/level/code_editor_error_background.png) 16 20 fill round
border-width: 16px 20px
.close
@include opacity(0.80)
@ -29,6 +30,23 @@
//&.alert-error
&.alert-warning
border-image-source: url(/images/level/code_editor_warning_background.png)
&.alert-info
border-image-source: url(/images/level/code_editor_info_background.png)
&.alert-style
// Do we ever want to do this for style?
border-image-source: url(/images/level/code_editor_info_background.png)
html.no-borderimage
.problem-alert
border-width: 0
border-image: none
background: transparent url(/images/level/code_editor_error_background.png) no-repeat
background-size: 100% 100%
&.alert-warning
background-image: url(/images/level/code_editor_warning_background.png)

17
app/styles/play/level/tome/spell.sass
View file

@ -27,6 +27,13 @@
height: 100%
width: 100%
span.code-background
border-width: 22px
border-image: url(/images/level/code_editor_background.png) 22 fill round
img.code-background
display: none
.save-status
display: none
position: absolute
@ -64,7 +71,7 @@
.ace_gutter
background-color: rgba(255, 255, 255, 0.25)
width: 40px
width: 47px
margin-left: 4px
border-bottom: 1px dotted #2f261d
@ -133,3 +140,11 @@
.ace_searchbtn, .ace_replacebtn
padding: 0px 4px
html.no-borderimage
#spell-view
span.code-background
display: none
img.code-background
display: block

10
app/styles/play/level/tome/spell_debug.sass
View file

@ -6,8 +6,8 @@
min-width: 250px
max-width: 400px
padding: 10px
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border-image: url(/images/level/popover_background.png) 18 fill round
border-width: 8px
.progress
position: relative
span
@ -16,3 +16,9 @@
color: black
width: 100%
html.no-borderimage
.spell-debug-view
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0

7
app/styles/play/level/tome/spell_list.sass
View file

@ -8,6 +8,11 @@
left: 0%
right: 10%
padding: 4%
border-image: url(/images/level/popover_background.png) 18 fill round
border-width: 15px
html.no-borderimage
#spell-list-view
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0

25
app/styles/play/level/tome/spell_list_entry.sass
View file

@ -17,15 +17,15 @@
width: -webkit-calc(100% - 100px)
width: calc(100% - 100px)
padding: 0px 8px
background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
background-size: 100% 100%
border-width: 3px
border-image: url(/images/level/code_editor_tab_background.png) 4 fill repeat
text-align: center
&.read-only
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(/images/level/code_editor_tab_background.png)
background-size: 100% 100%
.spell-list-button, .thang-avatar-wrapper, .reload-code, .beautify-code
.spell-list-button, .thang-avatar-wrapper, .reload-code, .beautify-code, .fullscreen-code
width: $childSize
height: $childSize
margin: $childMargin
@ -41,6 +41,15 @@
.beautify-code
float: right
.fullscreen-code
float: right
&:not(.maximized)
.icon-resize-small
display: none
&.maximized
.icon-fullscreen
display: none
.btn.btn-small
background: transparent
padding: 0
@ -49,7 +58,7 @@
border-color: transparent
@include box-shadow(none)
.icon-chevron-down, .icon-repeat, .icon-magnet
.icon-chevron-down, .icon-repeat, .icon-magnet, .icon-fullscreen, .icon-resize-small
margin-top: 7px
.thang-avatar-wrapper
@ -94,3 +103,11 @@
.thang-avatar-wrapper
margin: 0 5px 0 0
//margin: 2px 10px 2px 5px
html.no-borderimage
.spell-list-entry-view.spell-tab
border-width: 0
border-image: none
background: transparent url(/images/level/code_editor_tab_background.png) no-repeat
background-size: 100% 100%

11
app/styles/play/level/tome/spell_list_entry_thangs.sass
View file

@ -10,8 +10,8 @@
max-height: 500px
overflow: scroll
padding: 4%
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border-image: url(/images/level/popover_background.png) 18 fill round
border-width: 15px
.thang-avatar-view
cursor: pointer
@ -20,4 +20,9 @@
display: inline-block
html.no-borderimage
.spell-list-entry-view
.spell-list-entry-thangs-view
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0

15
app/styles/play/level/tome/spell_palette.sass
View file

@ -17,7 +17,7 @@
z-index: 0
//overflow-y: auto
img
.code-palette-background
position: absolute
left: 0
top: 0
@ -25,6 +25,13 @@
height: 100%
z-index: -1
span.code-palette-background
border-width: 25px
border-image: url(/images/level/code_palette_background.png) 25 fill round
img.code-palette-background
display: none
&.disabled
@include opacity(0.80)
@ -86,3 +93,9 @@
&.io
background-image: url(/images/pages/home/language_logo_io.png)
html.no-borderimage
#spell-palette-view
span.code-palette-background
display: none
img.code-palette-background
display: block

12
app/styles/play/level/tome/tome.sass
View file

@ -37,9 +37,8 @@
.popover
padding: 10px 10px 30px 10px
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0
border-image: url(/images/level/popover_background.png) 18 fill round
border-width: 15px
@include box-shadow(0 0 0 #000)
h1:not(.not-code), h2:not(.not-code), h3:not(.not-code), h4:not(.not-code), h5:not(.not-code), h6:not(.not-code)
@ -70,3 +69,10 @@
pre
display: inline-block
padding: 5px
html.no-borderimage
#tome-view
.popover
background: transparent url(/images/level/popover_background.png)
background-size: 100% 100%
border: 0

1
app/templates/play/level/tome/spell.jade
View file

@ -1,4 +1,5 @@
img(src="/images/level/code_editor_background.png").code-background
span.code-background
div.ace

5
app/templates/play/level/tome/spell_list_tab_entry.jade
View file

@ -4,10 +4,15 @@
code #{methodSignature}
.btn.btn-small.fullscreen-code(title="Expand code editor")
i.icon-fullscreen
i.icon-resize-small
.btn.btn-small.reload-code(title="Reload original code for " + spell.name)
i.icon-repeat
.btn.btn-small.beautify-code(title="Ctrl+Shift+B: Beautify code for " + spell.name)
i.icon-magnet
.clearfix

1
app/templates/play/level/tome/spell_palette.jade
View file

@ -1,4 +1,5 @@
img(src="/images/level/code_palette_background.png").code-palette-background
span.code-palette-background
.code-language-logo
ul(class="nav nav-pills" + (tabbed ? ' multiple-tabs' : ''))
each slug, group in entryGroupSlugs

1
app/views/play/level/modal/docs_modal.coffee
View file

@ -8,7 +8,6 @@ utils = require 'lib/utils'
module.exports = class DocsModal extends View
template: template
id: 'docs-modal'
plain: true
shortcuts:
'enter': 'hide'

3
app/views/play/level/tome/doc_formatter.coffee
View file

@ -83,7 +83,7 @@ module.exports = class DocFormatter
@doc.title = if @options.shortenize then @doc.shorterName else @doc.shortName
# Grab the language-specific documentation for some sub-properties, if we have it.
toTranslate = [{obj: @doc, prop: 'example'}, {obj: @doc, prop: 'returns'}]
toTranslate = [{obj: @doc, prop: 'description'}, {obj: @doc, prop: 'example'}, {obj: @doc, prop: 'returns'}]
for arg in (@doc.args ? [])
toTranslate.push {obj: arg, prop: 'example'}, {obj: arg, prop: 'description'}
for {obj, prop} in toTranslate
@ -93,6 +93,7 @@ module.exports = class DocFormatter
obj[prop] = null
formatPopover: ->
console.log "gotta do the popover", @doc
content = popoverTemplate doc: @doc, language: @options.language, value: @formatValue(), marked: marked, argumentExamples: (arg.example or arg.default or arg.name for arg in @doc.args ? [])
owner = if @doc.owner is 'this' then @options.thang else window[@doc.owner]
content = content.replace /#{spriteName}/g, @options.thang.type ? @options.thang.spriteName # Prefer type, and excluded the quotes we'd get with @formatValue

9
app/views/play/level/tome/spell_list_tab_entry_view.coffee
View file

@ -18,6 +18,7 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
'click .spell-list-button': 'onDropdownClick'
'click .reload-code': 'onCodeReload'
'click .beautify-code': 'onBeautifyClick'
'click .fullscreen-code': 'onFullscreenClick'
constructor: (options) ->
super options
@ -86,6 +87,14 @@ module.exports = class SpellListTabEntryView extends SpellListEntryView
return unless @controlsEnabled
Backbone.Mediator.publish 'spell-beautify', spell: @spell
onFullscreenClick: ->
unless $('.fullscreen-code').hasClass 'maximized'
$('#code-area').addClass 'fullscreen-editor'
$('.fullscreen-code').addClass 'maximized'
else
$('#code-area').removeClass 'fullscreen-editor'
$('.fullscreen-code').removeClass 'maximized'
updateReloadButton: ->
changed = @spell.hasChanged null, @spell.getSource()
@$el.find('.reload-code').css('display', if changed then 'inline-block' else 'none')

6
bower.json
View file

@ -44,7 +44,8 @@
"bootstrap": "~3.1.1",
"validated-backbone-mediator": "~0.1.3",
"jquery.browser": "~0.0.6",
"zatanna": "~0.0.2"
"zatanna": "~0.0.2",
"modernizr": "~2.8.3"
},
"overrides": {
"backbone": {
@ -81,6 +82,9 @@
"./dist/fonts/glyphicons-halflings-regular.ttf",
"./dist/fonts/glyphicons-halflings-regular.woff"
]
},
"modernizr": {
"main": "modernizr.js"
}
}
}