mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-27 09:35:39 -05:00
Update /courses UI
This commit is contained in:
parent
01affc2054
commit
b647252956
6 changed files with 43 additions and 23 deletions
|
@ -18,6 +18,9 @@ class NameLoader extends CocoClass
|
||||||
loadedNames: (newNames) =>
|
loadedNames: (newNames) =>
|
||||||
_.extend namesCache, newNames
|
_.extend namesCache, newNames
|
||||||
|
|
||||||
getName: (id) -> namesCache[id]?.name or id
|
getName: (id) ->
|
||||||
|
if namesCache[id]?.firstName and namesCache[id]?.lastName
|
||||||
|
return "#{namesCache[id]?.firstName} #{namesCache[id]?.lastName}"
|
||||||
|
namesCache[id]?.firstName or namesCache[id]?.name or id
|
||||||
|
|
||||||
module.exports = new NameLoader()
|
module.exports = new NameLoader()
|
||||||
|
|
|
@ -1235,7 +1235,7 @@
|
||||||
play_now_learn_2: "while loops to solve pesky puzzles"
|
play_now_learn_2: "while loops to solve pesky puzzles"
|
||||||
play_now_learn_3: "strings & variables to customize actions"
|
play_now_learn_3: "strings & variables to customize actions"
|
||||||
play_now_learn_4: "how to defeat an ogre (important life skills!)"
|
play_now_learn_4: "how to defeat an ogre (important life skills!)"
|
||||||
welcome_to_page: "Welcome to your Courses page!"
|
welcome_to_page: "My Student Dashboard" # {change}
|
||||||
completed_hoc: "Amazing! You've completed the Hour of Code course!"
|
completed_hoc: "Amazing! You've completed the Hour of Code course!"
|
||||||
ready_for_more_header: "Ready for more? Play the campaign mode!"
|
ready_for_more_header: "Ready for more? Play the campaign mode!"
|
||||||
ready_for_more_1: "Use gems to unlock new items!"
|
ready_for_more_1: "Use gems to unlock new items!"
|
||||||
|
@ -1243,10 +1243,9 @@
|
||||||
ready_for_more_3: "Learn even more programming!"
|
ready_for_more_3: "Learn even more programming!"
|
||||||
saved_games: "Saved Games"
|
saved_games: "Saved Games"
|
||||||
hoc: "Hour of Code"
|
hoc: "Hour of Code"
|
||||||
my_classes: "My Classes"
|
my_classes: "Current Classes" # {change}
|
||||||
class_added: "Class successfully added!"
|
class_added: "Class successfully added!"
|
||||||
view_class: "view class"
|
view_levels: "view all levels in course" # {change}
|
||||||
view_levels: "view levels"
|
|
||||||
join_class: "Join A Class"
|
join_class: "Join A Class"
|
||||||
join_class_2: "Join class"
|
join_class_2: "Join class"
|
||||||
ask_teacher_for_code: "Ask your teacher if you have a CodeCombat class code! If so, enter it below:"
|
ask_teacher_for_code: "Ask your teacher if you have a CodeCombat class code! If so, enter it below:"
|
||||||
|
@ -1257,7 +1256,7 @@
|
||||||
play_arena: "Play Arena"
|
play_arena: "Play Arena"
|
||||||
view_project: "View Project"
|
view_project: "View Project"
|
||||||
start: "Start"
|
start: "Start"
|
||||||
last_level: "Last Level"
|
last_level: "Last level played" # {change}
|
||||||
welcome_to_hoc: "Adventurers, welcome to our Hour of Code!"
|
welcome_to_hoc: "Adventurers, welcome to our Hour of Code!"
|
||||||
logged_in_as: "Logged in as:"
|
logged_in_as: "Logged in as:"
|
||||||
not_you: "Not you?"
|
not_you: "Not you?"
|
||||||
|
|
|
@ -132,6 +132,7 @@ module.exports = class Classroom extends CocoModel
|
||||||
complete = session.get('state').complete ? false
|
complete = session.get('state').complete ? false
|
||||||
playtime += session.get('playtime') ? 0
|
playtime += session.get('playtime') ? 0
|
||||||
lastPlayed = level
|
lastPlayed = level
|
||||||
|
lastPlayedNumber = index + 1
|
||||||
if complete
|
if complete
|
||||||
currentIndex = index
|
currentIndex = index
|
||||||
else
|
else
|
||||||
|
@ -161,6 +162,7 @@ module.exports = class Classroom extends CocoModel
|
||||||
numDone: levelsTotal - levelsLeft
|
numDone: levelsTotal - levelsLeft
|
||||||
pctDone: (100 * (levelsTotal - levelsLeft) / levelsTotal).toFixed(1) + '%'
|
pctDone: (100 * (levelsTotal - levelsLeft) / levelsTotal).toFixed(1) + '%'
|
||||||
lastPlayed: lastPlayed
|
lastPlayed: lastPlayed
|
||||||
|
lastPlayedNumber: lastPlayedNumber ? 1
|
||||||
next: nextLevel
|
next: nextLevel
|
||||||
first: courseLevels.first()
|
first: courseLevels.first()
|
||||||
arena: arena
|
arena: arena
|
||||||
|
|
|
@ -16,6 +16,12 @@
|
||||||
hr
|
hr
|
||||||
border-top: 1px solid grey
|
border-top: 1px solid grey
|
||||||
margin: 5px 0
|
margin: 5px 0
|
||||||
|
padding-bottom: 20px
|
||||||
|
opacity: 0.5
|
||||||
|
|
||||||
|
.view-levels-btn
|
||||||
|
font-size: 13px
|
||||||
|
padding-left: 10px
|
||||||
|
|
||||||
.text-uppercase
|
.text-uppercase
|
||||||
margin-top: 40px
|
margin-top: 40px
|
||||||
|
@ -29,7 +35,7 @@
|
||||||
padding: 0 20px
|
padding: 0 20px
|
||||||
|
|
||||||
.course-instance-entry
|
.course-instance-entry
|
||||||
padding-left: 40px
|
padding-bottom: 10px
|
||||||
|
|
||||||
.progress-bar
|
.progress-bar
|
||||||
min-width: 15%
|
min-width: 15%
|
||||||
|
|
|
@ -38,7 +38,7 @@ block content
|
||||||
else
|
else
|
||||||
|
|
||||||
.text-center
|
.text-center
|
||||||
h1(data-i18n="courses.welcome_to_page") Welcome to your Courses page!
|
h1(data-i18n="courses.welcome_to_page")
|
||||||
|
|
||||||
.current-hero-container.text-center.row
|
.current-hero-container.text-center.row
|
||||||
.hero-avatar
|
.hero-avatar
|
||||||
|
@ -51,10 +51,11 @@ block content
|
||||||
span(data-i18n="courses.change_hero")
|
span(data-i18n="courses.change_hero")
|
||||||
|
|
||||||
if view.classrooms.size()
|
if view.classrooms.size()
|
||||||
h3.text-uppercase(data-i18n="courses.my_classes")
|
br
|
||||||
hr
|
h3(data-i18n="courses.my_classes")
|
||||||
|
|
||||||
for classroom in view.classrooms.models
|
for classroom in view.classrooms.models
|
||||||
|
hr.class-break
|
||||||
- var justAdded = classroom.id === view.classroomJustAdded;
|
- var justAdded = classroom.id === view.classroomJustAdded;
|
||||||
- var classroomClass = justAdded ? 'just-added' : '';
|
- var classroomClass = justAdded ? 'just-added' : '';
|
||||||
if justAdded
|
if justAdded
|
||||||
|
@ -65,8 +66,12 @@ block content
|
||||||
h5
|
h5
|
||||||
span.spr= classroom.get('name')
|
span.spr= classroom.get('name')
|
||||||
span.spr (#{(classroom.get('aceConfig') || {}).language === 'javascript' ? 'JavaScript' : 'Python'})
|
span.spr (#{(classroom.get('aceConfig') || {}).language === 'javascript' ? 'JavaScript' : 'Python'})
|
||||||
a.view-class-btn(data-classroom-id=classroom.id, data-i18n="courses.view_class")
|
p
|
||||||
|
span(data-i18n="courses.teacher")
|
||||||
|
span :
|
||||||
|
if view.ownerNameMap && view.ownerNameMap[classroom.get('ownerID')]
|
||||||
|
span.spl= view.ownerNameMap[classroom.get('ownerID')]
|
||||||
|
|
||||||
- var courseInstances = view.courseInstances.where({classroomID: classroom.id});
|
- var courseInstances = view.courseInstances.where({classroomID: classroom.id});
|
||||||
for courseInstance in courseInstances
|
for courseInstance in courseInstances
|
||||||
|
|
||||||
|
@ -78,7 +83,7 @@ block content
|
||||||
a.view-levels-btn(data-course-id=courseInstance.get('courseID'), data-courseinstance-id=courseInstance.id, data-i18n="courses.view_levels")
|
a.view-levels-btn(data-course-id=courseInstance.get('courseID'), data-courseinstance-id=courseInstance.id, data-i18n="courses.view_levels")
|
||||||
+course-instance-body(courseInstance, classroom)
|
+course-instance-body(courseInstance, classroom)
|
||||||
.clearfix
|
.clearfix
|
||||||
|
|
||||||
h3.text-uppercase(data-i18n="courses.join_class")
|
h3.text-uppercase(data-i18n="courses.join_class")
|
||||||
hr
|
hr
|
||||||
|
|
||||||
|
@ -111,11 +116,11 @@ mixin course-instance-body(courseInstance, classroom)
|
||||||
- var projectLevel = stats.levels.project;
|
- var projectLevel = stats.levels.project;
|
||||||
if arenaLevel
|
if arenaLevel
|
||||||
- var arenaURL = "/play/ladder/"+arenaLevel.get('slug')+"/course/"+courseInstance.id;
|
- var arenaURL = "/play/ladder/"+arenaLevel.get('slug')+"/course/"+courseInstance.id;
|
||||||
a.play-btn.btn.btn-burgandy.btn-lg.m-b-1(data-href=arenaURL, data-level-slug=arenaLevel.get('slug'), data-event-action="Students Play Arena")
|
a.play-btn.btn.btn-forest-alt.btn-lg.m-b-1(data-href=arenaURL, data-level-slug=arenaLevel.get('slug'), data-event-action="Students Play Arena")
|
||||||
span(data-i18n="courses.play_arena")
|
span(data-i18n="courses.play_arena")
|
||||||
else if projectLevel
|
else if projectLevel
|
||||||
- var projectURL = "/play/level/"+projectLevel.get('slug')+"?course="+course.id+"&course-instance="+courseInstance.id;
|
- var projectURL = "/play/level/"+projectLevel.get('slug')+"?course="+course.id+"&course-instance="+courseInstance.id;
|
||||||
a.play-btn.btn.btn-burgandy.btn-lg.m-b-1(data-href=projectURL, data-level-slug=projectLevel.get('slug'), data-event-action="Students Play Project")
|
a.play-btn.btn.btn-forest-alt.btn-lg.m-b-1(data-href=projectURL, data-level-slug=projectLevel.get('slug'), data-event-action="Students Play Project")
|
||||||
span(data-i18n="courses.view_project")
|
span(data-i18n="courses.view_project")
|
||||||
else
|
else
|
||||||
a.btn.btn-default.btn-lg.m-b-1(disabled=true, data-i18n="courses.course_complete")
|
a.btn.btn-default.btn-lg.m-b-1(disabled=true, data-i18n="courses.course_complete")
|
||||||
|
@ -130,16 +135,12 @@ mixin course-instance-body(courseInstance, classroom)
|
||||||
a.play-btn.btn.btn-navy.btn-lg.m-b-1(data-href=levelURL, data-level-slug=firstLevel.get('slug'), data-event-action="Students Start Course")
|
a.play-btn.btn.btn-navy.btn-lg.m-b-1(data-href=levelURL, data-level-slug=firstLevel.get('slug'), data-event-action="Students Start Course")
|
||||||
span(data-i18n="courses.start")
|
span(data-i18n="courses.start")
|
||||||
|
|
||||||
div
|
|
||||||
span(data-i18n="clans.playtime")
|
|
||||||
span.spr :
|
|
||||||
span= moment.duration(stats.playtime, 'seconds').humanize()
|
|
||||||
|
|
||||||
if stats.levels.lastPlayed
|
if stats.levels.lastPlayed
|
||||||
div
|
div
|
||||||
span(data-i18n="courses.last_level")
|
span(data-i18n="courses.last_level")
|
||||||
span.spr :
|
span : #{stats.levels.lastPlayedNumber}.
|
||||||
span= stats.levels.lastPlayed.get('name')
|
span.spl= stats.levels.lastPlayed.get('name')
|
||||||
|
|
||||||
.clearfix
|
.clearfix
|
||||||
.progress
|
.progress
|
||||||
|
|
|
@ -13,6 +13,7 @@ Course = require 'models/Course'
|
||||||
Classroom = require 'models/Classroom'
|
Classroom = require 'models/Classroom'
|
||||||
Classrooms = require 'collections/Classrooms'
|
Classrooms = require 'collections/Classrooms'
|
||||||
LevelSession = require 'models/LevelSession'
|
LevelSession = require 'models/LevelSession'
|
||||||
|
NameLoader = require 'core/NameLoader'
|
||||||
Campaign = require 'models/Campaign'
|
Campaign = require 'models/Campaign'
|
||||||
ThangType = require 'models/ThangType'
|
ThangType = require 'models/ThangType'
|
||||||
utils = require 'core/utils'
|
utils = require 'core/utils'
|
||||||
|
@ -59,7 +60,7 @@ module.exports = class CoursesView extends RootView
|
||||||
@listenTo @hero, 'all', ->
|
@listenTo @hero, 'all', ->
|
||||||
@render()
|
@render()
|
||||||
window.tracker?.trackEvent 'Students Loaded', category: 'Students', ['Mixpanel']
|
window.tracker?.trackEvent 'Students Loaded', category: 'Students', ['Mixpanel']
|
||||||
|
|
||||||
afterInsert: ->
|
afterInsert: ->
|
||||||
super()
|
super()
|
||||||
unless me.isStudent() or (@classCodeQueryVar and not me.isTeacher())
|
unless me.isStudent() or (@classCodeQueryVar and not me.isTeacher())
|
||||||
|
@ -90,6 +91,14 @@ module.exports = class CoursesView extends RootView
|
||||||
@joinClass()
|
@joinClass()
|
||||||
else if @classCodeQueryVar and me.isAnonymous()
|
else if @classCodeQueryVar and me.isAnonymous()
|
||||||
@openModalView(new CreateAccountModal())
|
@openModalView(new CreateAccountModal())
|
||||||
|
ownerIDs = _.map(@classrooms.models, (c) -> c.get('ownerID')) ? []
|
||||||
|
Promise.resolve($.ajax(NameLoader.loadNames(ownerIDs)))
|
||||||
|
.then(=>
|
||||||
|
@ownerNameMap = {}
|
||||||
|
@ownerNameMap[ownerID] = NameLoader.getName(ownerID) for ownerID in ownerIDs
|
||||||
|
@render?()
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
onClickLogInButton: ->
|
onClickLogInButton: ->
|
||||||
modal = new AuthModal()
|
modal = new AuthModal()
|
||||||
|
|
Loading…
Reference in a new issue