mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-27 09:35:39 -05:00
Starting on achievement overview style
This commit is contained in:
Ruben Vereecken
parent
9055612b24
commit
ea3d1fee74
11 changed files with 155 additions and 123 deletions
|
|
@ -40,7 +40,7 @@ Application = initialize: ->
|
|||
@facebookHandler = new FacebookHandler()
|
||||
@gplusHandler = new GPlusHandler()
|
||||
$(document).bind 'keydown', preventBackspace
|
||||
$.notify.addStyle 'achievement', html: $(AchievementNotify())
|
||||
$.notify.addStyle 'achievement', html: $(AchievementNotify popup:true)
|
||||
@linkedinHandler = new LinkedInHandler()
|
||||
preload(COMMON_FILES)
|
||||
$.i18n.init {
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@ module.exports = class SuperModel extends Backbone.Model
|
|||
res.markLoading()
|
||||
return res
|
||||
else
|
||||
console.debug 'adding collection', collection
|
||||
@addCollection collection
|
||||
@listenTo collection, 'sync', (c) ->
|
||||
console.debug 'Registering collection', url
|
||||
|
|
|
|||
100
app/styles/achievements.sass
Normal file
100
app/styles/achievements.sass
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
.notifyjs-achievement-base
|
||||
cursor: auto
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
padding: 20px 0px
|
||||
|
||||
.achievement-body
|
||||
.achievement-icon
|
||||
position: absolute
|
||||
width: 200px
|
||||
height: 200px
|
||||
left: -140px
|
||||
top: 0px
|
||||
|
||||
.achievement-image
|
||||
width: 100%
|
||||
height: 100%
|
||||
img
|
||||
position: absolute
|
||||
margin: auto
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
|
||||
.achievement-border-wood
|
||||
background: url("/images/achievements/border_wood.png") no-repeat
|
||||
background-size: 100% 100%
|
||||
|
||||
.achievement-border-silver
|
||||
background: url("/images/achievements/border_silver.png") no-repeat
|
||||
background-size: 100% 100%
|
||||
|
||||
.achievement-content
|
||||
background-image: url("/images/achievements/reward_background2.png")
|
||||
background-size: 100% 100%
|
||||
width: 450px
|
||||
height: 160px
|
||||
text-align: center
|
||||
padding: 24px 30px 20px 60px
|
||||
overflow: hidden
|
||||
|
||||
|
||||
.achievement-title
|
||||
font-family: Bangers
|
||||
font-size: 28px
|
||||
padding-left: -50px
|
||||
overflow: hidden
|
||||
|
||||
.achievement-description
|
||||
white-space: initial
|
||||
font-size: 15px
|
||||
line-height: 1.3em
|
||||
overflow: hidden
|
||||
max-height: 2.6em
|
||||
margin-top: auto
|
||||
margin-bottom: 0px !important
|
||||
|
||||
.achievement-progress
|
||||
padding: 8px 0px 0px 0px
|
||||
|
||||
.achievement-message
|
||||
font-family: Bangers
|
||||
font-size: 18px
|
||||
&:empty
|
||||
display: none
|
||||
|
||||
|
||||
|
||||
.progress-wrapper
|
||||
position: absolute
|
||||
padding-right: 30px
|
||||
bottom: 0px
|
||||
|
||||
.achievement-level
|
||||
float: left
|
||||
font-size: 15px
|
||||
|
||||
.progress-bar-wrapper
|
||||
padding-left: 30px
|
||||
width: 100%
|
||||
.progress
|
||||
border-radius: 20px
|
||||
|
||||
.progress-bar-border
|
||||
padding-left: 30px
|
||||
position: relative
|
||||
top: -44px
|
||||
|
||||
.progress-bar-border img
|
||||
width: 100%
|
||||
/*.earned-exp
|
||||
padding-left: 5px
|
||||
font-family: Bangers
|
||||
font-size: 16px
|
||||
float: right
|
||||
*/
|
||||
|
||||
.progress-bar-white
|
||||
background-color: white
|
||||
|
|
@ -1,100 +0,0 @@
|
|||
.notifyjs-achievement-base
|
||||
cursor: auto
|
||||
white-space: nowrap
|
||||
text-overflow: ellipsis
|
||||
padding: 20px 0px
|
||||
|
||||
.achievement-body
|
||||
.achievement-icon
|
||||
position: absolute
|
||||
width: 200px
|
||||
height: 200px
|
||||
left: -140px
|
||||
top: 0px
|
||||
|
||||
.achievement-image
|
||||
width: 100%
|
||||
height: 100%
|
||||
img
|
||||
position: absolute
|
||||
margin: auto
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
width: 72%
|
||||
|
||||
.achievement-border-wood
|
||||
background: url("/images/achievements/border_wood.png") no-repeat
|
||||
background-size: 100% 100%
|
||||
|
||||
.achievement-border-silver
|
||||
background: url("/images/achievements/border_silver.png") no-repeat
|
||||
background-size: 100% 100%
|
||||
|
||||
.achievement-content
|
||||
background-image: url("/images/achievements/reward_background2.png")
|
||||
background-size: 100% 100%
|
||||
width: 450px
|
||||
height: 160px
|
||||
text-align: center
|
||||
padding: 24px 30px 20px 60px
|
||||
overflow: hidden
|
||||
|
||||
|
||||
.achievement-title
|
||||
font-family: Bangers
|
||||
font-size: 28px
|
||||
padding-left: -50px
|
||||
overflow: hidden
|
||||
|
||||
.achievement-description
|
||||
white-space: initial
|
||||
font-size: 15px
|
||||
line-height: 1.3em
|
||||
overflow: hidden
|
||||
max-height: 2.6em
|
||||
margin-top: auto
|
||||
margin-bottom: 0px !important
|
||||
|
||||
.achievement-progress
|
||||
padding: 8px 0px 0px 0px
|
||||
|
||||
.achievement-message
|
||||
font-family: Bangers
|
||||
font-size: 18px
|
||||
&:empty
|
||||
display: none
|
||||
|
||||
|
||||
|
||||
.progress-wrapper
|
||||
position: absolute
|
||||
padding-right: 30px
|
||||
bottom: 0px
|
||||
|
||||
.achievement-level
|
||||
float: left
|
||||
font-size: 15px
|
||||
|
||||
.progress-bar-wrapper
|
||||
padding-left: 30px
|
||||
width: 100%
|
||||
.progress
|
||||
border-radius: 20px
|
||||
|
||||
.progress-bar-border
|
||||
padding-left: 30px
|
||||
position: relative
|
||||
top: -44px
|
||||
|
||||
.progress-bar-border img
|
||||
width: 100%
|
||||
/*.earned-exp
|
||||
padding-left: 5px
|
||||
font-family: Bangers
|
||||
font-size: 16px
|
||||
float: right
|
||||
*/
|
||||
.progress-bar-white
|
||||
background-color: white
|
||||
|
|
@ -2,10 +2,13 @@ div
|
|||
.clearfix.achievement-body
|
||||
.achievement-icon.achievement-border-silver
|
||||
.achievement-image(data-notify-html="image")
|
||||
if imgURL
|
||||
img(src=imgURL)
|
||||
.achievement-content
|
||||
.achievement-title(data-notify-html="title")
|
||||
p.achievement-description(data-notify-html="description")
|
||||
.achievement-title(data-notify-html="title") #{title}
|
||||
p.achievement-description(data-notify-html="description") #{description}
|
||||
|
||||
if popup
|
||||
.achievement-progress
|
||||
.achievement-message(data-notify-html="message")
|
||||
.progress-wrapper
|
||||
|
|
|
|||
|
|
@ -1 +1,10 @@
|
|||
extends /templates/kinds/user
|
||||
|
||||
block append content
|
||||
.row
|
||||
each achievement, index in achievements
|
||||
- var title = achievement.get('name');
|
||||
- var description = achievement.get('description');
|
||||
- var imgURL = achievement.get('icon');
|
||||
.col-sm-6.col-xs-12
|
||||
include ../achievement_notify
|
||||
|
|
|
|||
|
|
@ -18,5 +18,11 @@ module.exports = class UserAchievementsView extends UserView
|
|||
|
||||
onUserLoaded: (user) ->
|
||||
super user
|
||||
@earnedAchievements = @supermodel.loadCollection(new EarnedAchievementCollection(@user), 'achievements').model
|
||||
@achievements = @supermodel.loadCollection(new AchievementCollection, 'achievements').model
|
||||
@earnedAchievements = @supermodel.loadCollection(new EarnedAchievementCollection(@user), 'earnedAchievements').model
|
||||
|
||||
getRenderData: ->
|
||||
context = super()
|
||||
context.achievements = @achievements.models
|
||||
context.earnedAchievements = @earnedAchievements.models
|
||||
context
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ AchievementSchema.methods.getExpFunction = ->
|
|||
return utils.functionCreators[kind](parameters) if kind of utils.functionCreators
|
||||
|
||||
AchievementSchema.statics.jsonschema = jsonschema
|
||||
AchievementSchema.statics.achievements = {}
|
||||
AchievementSchema.statics.earnedAchievements = {}
|
||||
|
||||
# Reloads all achievements into memory.
|
||||
# TODO might want to tweak this to only load new achievements
|
||||
|
|
@ -41,15 +41,15 @@ AchievementSchema.statics.loadAchievements = (done) ->
|
|||
query.exec (err, docs) ->
|
||||
_.each docs, (achievement) ->
|
||||
category = achievement.get 'collection'
|
||||
AchievementSchema.statics.achievements[category] = [] unless category of AchievementSchema.statics.achievements
|
||||
AchievementSchema.statics.achievements[category].push achievement
|
||||
done(AchievementSchema.statics.achievements) if done?
|
||||
AchievementSchema.statics.earnedAchievements[category] = [] unless category of AchievementSchema.statics.earnedAchievements
|
||||
AchievementSchema.statics.earnedAchievements[category].push achievement
|
||||
done(AchievementSchema.statics.earnedAchievements) if done?
|
||||
|
||||
AchievementSchema.statics.getLoadedAchievements = ->
|
||||
AchievementSchema.statics.achievements
|
||||
AchievementSchema.statics.earnedAchievements
|
||||
|
||||
AchievementSchema.statics.resetAchievements = ->
|
||||
delete AchievementSchema.statics.achievements[category] for category of AchievementSchema.statics.achievements
|
||||
delete AchievementSchema.statics.earnedAchievements[category] for category of AchievementSchema.statics.earnedAchievements
|
||||
|
||||
# Queries are stored as JSON strings, objectify them upon loading
|
||||
AchievementSchema.post 'init', (doc) -> doc.objectifyQuery()
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ class EarnedAchievementHandler extends Handler
|
|||
recalculate: (req, res) ->
|
||||
onSuccess = (data) => log.debug 'Finished recalculating achievements'
|
||||
if 'achievements' of req.body # Support both slugs and IDs separated by commas
|
||||
achievementSlugsOrIDs = req.body.achievements
|
||||
achievementSlugsOrIDs = req.body.earnedAchievements
|
||||
EarnedAchievementHandler.recalculate achievementSlugsOrIDs, onSuccess
|
||||
else
|
||||
EarnedAchievementHandler.recalculate onSuccess
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ module.exports.DungeonArenaStarted = DungeonArenaStarted =
|
|||
_id: '53ba76249259823746b6b481'
|
||||
name: 'Dungeon Arena Started'
|
||||
description: 'Started playing Dungeon Arena. '
|
||||
icon: '/images/achievements/swords-01.png'
|
||||
worth: 3
|
||||
collection: 'level.session'
|
||||
query: "{\"level.original\":\"dungeon-arena\"}"
|
||||
|
|
@ -14,6 +15,7 @@ module.exports.Simulated = Simulated =
|
|||
_id: '53ba76249259823746b6b482'
|
||||
name: 'Simulated'
|
||||
description: 'Simulated Games.'
|
||||
icon: '/images/achievements/cup-02.png'
|
||||
worth: 1
|
||||
collection: 'users'
|
||||
query: "{\"simulatedBy\":{\"$gt\":0}}"
|
||||
|
|
|
|||
|
|
@ -10,9 +10,20 @@ fixtures = require '../../fixtures/achievements'
|
|||
module.exports = ->
|
||||
view = new UserAchievementsView {}, me.get '_id'
|
||||
|
||||
request = jasmine.Ajax.requests.mostRecent()
|
||||
respond = (request) ->
|
||||
return unless request
|
||||
if request.url.match /db\/achievement/
|
||||
request.response
|
||||
status: 200
|
||||
responseText: JSON.stringify fixtures.achievements
|
||||
else if request.url.match /db\/user\/[a-z0-9]*\/achievements/
|
||||
request.response
|
||||
status: 200
|
||||
responseText: JSON.stringify fixtures.earnedAchievements
|
||||
else
|
||||
request.response
|
||||
status: 404
|
||||
|
||||
_.each jasmine.Ajax.requests.all(), (request) -> respond request
|
||||
|
||||
view.render()
|
||||
|
|
|
|||
Loading…
Reference in a new issue