diff --git a/app/assets/images/pages/home/video_border.png b/app/assets/images/pages/home/video_border.png new file mode 100644 index 000000000..b07b2f2eb Binary files /dev/null and b/app/assets/images/pages/home/video_border.png differ diff --git a/app/styles/home.sass b/app/styles/home.sass index 60e36802d..535bf43ca 100644 --- a/app/styles/home.sass +++ b/app/styles/home.sass @@ -7,9 +7,20 @@ text-align: center margin-top: 0 - #trailer-wrapper iframe - display: block - margin: 0 auto + #trailer-wrapper + position: relative + margin: 0 auto 40px + width: 950px + iframe + display: block + margin: 0 auto + position: relative + top: 8px + img + position: absolute + left: 0 + top: 0 + pointer-events: none .game-mode-wrapper position: relative @@ -49,8 +60,9 @@ &:hover div color: lighten($yellow, 20%) &:hover img - filter: brightness(1.1) - -webkit-filter: brightness(1.1) + filter: brightness(1.2) + -webkit-filter: brightness(1.2) + box-shadow: 0 0 5px black #multiplayer-launch-modal .modal-dialog diff --git a/app/styles/play/level/loading.sass b/app/styles/play/level/loading.sass index 71ec1b424..177334f72 100644 --- a/app/styles/play/level/loading.sass +++ b/app/styles/play/level/loading.sass @@ -32,7 +32,9 @@ width: $WIDTH margin-left: (-$WIDTH / 2) z-index: 100 - background-color: rgba(220, 255, 230, 0.5) + background-color: rgba(220, 255, 230, 0.6) + color: darkslategray + font-size: 15px border-radius: 30px padding: 10px text-align: center @@ -44,11 +46,20 @@ transition: top $UNVEIL_TIME cubic-bezier(0.285, -0.595, 0.670, -0.600) .load-progress - width: 100% + position: absolute + left: 2% + top: 0px + opacity: 0.6 + width: 96% + margin: 10px auto 0 .progress-bar width: 1% transition-duration: 1.2s + + #tip-wrapper + position: relative + z-index: 2 .left-wing, .right-wing width: 100% diff --git a/app/templates/home.jade b/app/templates/home.jade index 7181e7485..0d7c5f0fd 100644 --- a/app/templates/home.jade +++ b/app/templates/home.jade @@ -5,7 +5,8 @@ block content h1#site-slogan(data-i18n="home.slogan") Learn to Code JavaScript by Playing a Game #trailer-wrapper - + + img(src="/images/pages/home/video_border.png") hr diff --git a/app/templates/play/level/level_loading.jade b/app/templates/play/level/level_loading.jade index 8a1936f3f..2a3d59122 100644 --- a/app/templates/play/level/level_loading.jade +++ b/app/templates/play/level/level_loading.jade @@ -4,10 +4,24 @@ .loading-details - h2(data-i18n='play_level.loading_level') Loading Level - .load-progress .progress.progress-striped.active .progress-bar.progress-bar-success - h4= tip \ No newline at end of file + #tip-wrapper + strong.tip(data-i18n='play_level.tip_insert_positions') Shift+Click a point on the map to insert it into the spell editor. + strong.tip(data-i18n='play_level.tip_toggle_play') Toggle play/paused with Ctrl+P. + strong.tip(data-i18n='play_level.tip_scrub_shortcut') Ctrl+[ and Ctrl+] rewind and fast-forward. + strong.tip(data-i18n='play_level.tip_guide_exists') Click the guide at the top of the page for useful info. + strong.tip(data-i18n='play_level.tip_open_source') CodeCombat is 100% open source! + strong.tip(data-i18n='play_level.tip_beta_launch') CodeCombat launched its beta in October, 2013. + strong.tip(data-i18n='play_level.tip_js_beginning') JavaScript is just the beginning. + strong.tip(data-i18n='play_level.tip_autocast_setting') Adjust autocast settings by clicking the gear on the cast button. + + strong.tip.rare(data-i18n='play_level.tip_baby_coders') In the future, even babies will be Archmages. + strong.tip.rare(data-i18n='play_level.tip_morale_improves') Loading will continue until morale improves. + strong.tip.rare(data-i18n='play_level.tip_all_species') We believe in equal opportunities to learn programming for all species. + strong.tip.rare(data-i18n='play_level.tip_reticulating') Reticulating spines. + strong.tip.rare + span(data-i18n='play_level.tip_harry') Yer a Wizard, + span= me.get('name') || 'Anoner' diff --git a/app/views/play/ladder_view.coffee b/app/views/play/ladder_view.coffee index e0d25ea7f..068921627 100644 --- a/app/views/play/ladder_view.coffee +++ b/app/views/play/ladder_view.coffee @@ -127,18 +127,18 @@ module.exports = class LadderView extends RootView session = (s for s in @sessions.models when s.get('team') is teamID)[0] modal = new LadderPlayModal({}, @level, session, teamID) @openModalView modal - + showApologeticSignupModal: -> SignupModal = require 'views/modal/signup_modal' @openModalView(new SignupModal({showRequiredError:true})) onClickedLink: (e) -> link = $(e.target).closest('a').attr('href') - if link?.startsWith '/play/level' + if link?.startsWith('/play/level') and me.get('anonymous') e.stopPropagation() e.preventDefault() @showApologeticSignupModal() - + destroy: -> clearInterval @refreshInterval @simulator.destroy() diff --git a/app/views/play/level/level_loading_view.coffee b/app/views/play/level/level_loading_view.coffee index 47ef06fbc..c50107b6d 100644 --- a/app/views/play/level/level_loading_view.coffee +++ b/app/views/play/level/level_loading_view.coffee @@ -2,27 +2,23 @@ View = require 'views/kinds/CocoView' template = require 'templates/play/level/level_loading' -tips = [ - "Tip: you can shift+click a position on the map to insert it into the spell editor." - "You can toggle play/paused with ctrl+p." - "Pressing ctrl+[ and ctrl+] rewinds and fast-forwards." - "CodeCombat is 100% open source!" - "In the future, even babies will be Archmages." - "Loading will continue until morale improves." - "CodeCombat launched its beta in October, 2013." - "JavaScript is just the beginning." - "We believe in equal opportunities to learn programming for all species." -] - module.exports = class LevelLoadingView extends View id: "level-loading-view" template: template subscriptions: 'level-loader:progress-changed': 'onLevelLoaderProgressChanged' + + afterRender: -> + @$el.find('.tip.rare').remove() if _.random(1, 10) < 9 + tips = @$el.find('.tip').addClass('to-remove') + tip = _.sample(tips) + $(tip).removeClass('to-remove') + @$el.find('.to-remove').remove() onLevelLoaderProgressChanged: (e) -> @progress = e.progress + @progress = 0.01 if @progress < 0.01 @updateProgressBar() updateProgressBar: -> @@ -47,8 +43,3 @@ module.exports = class LevelLoadingView extends View onUnveilEnded: => return if @destroyed Backbone.Mediator.publish 'onLoadingViewUnveiled', view: @ - - getRenderData: (c={}) -> - super c - c.tip = _.sample tips - c