codecombat/app/templates/courses/courses-view.jade
phoenixeliot 870ae9a8a1 Add hero selector for courses mode
Use selected hero in Course mode play

Show selected hero on Courses (in progress)

Add hero select modal

Use short names, only show warriors

Use box-shadow instead of borders

Add tests for HeroSelectModal

Refactor modal opening test

Address code review feedback
2016-06-03 13:40:41 -07:00

143 lines
5.8 KiB
Text

extends /templates/base-flat
block content
.container
.row.m-y-3
.col-xs-12
if me.isTeacher()
.alert.alert-danger.text-center
// DNT: Temporary
h3 ATTENTION TEACHERS:
p We are transitioning to a new classroom management system; this page will soon be student-only.
a(href="/teachers/classes") Go to teachers area.
#main-content
if me.isAnonymous()
h1.text-center(data-i18n="courses.welcome_to_courses")
.text-center
p
h2(data-i18n="courses.ready_to_play")
p
button#start-new-game-btn.btn.btn-navy(data-i18n="courses.start_new_game")
p
span.spr -
span.text-uppercase(data-i18n="general.or")
span.spl -
p
button#log-in-btn.btn.btn-forest(data-i18n="login.log_in")
h2#play-now-to-learn-header.text-center.text-uppercase(data-i18n="courses.play_now_learn_header")
ul#benefits-ul
li(data-i18n="courses.play_now_learn_1")
li(data-i18n="courses.play_now_learn_2")
li(data-i18n="courses.play_now_learn_3")
li(data-i18n="courses.play_now_learn_4")
else
.text-center
h1(data-i18n="courses.welcome_to_page") Welcome to your Courses page!
.current-hero-container.text-center.row
.hero-avatar
img(src=view.hero.getPortraitURL())
.current-hero-right-col
.semibold.current-hero-text
span.spr(data-i18n="TODO")
| Current Hero:
span.current-hero-name= view.hero.getHeroShortName()
button.change-hero-btn.btn.btn-lg.btn-forest
span(data-i18n="TODO")
| Change Hero
if view.classrooms.size()
h3.text-uppercase(data-i18n="courses.my_classes")
hr
for classroom in view.classrooms.models
- var justAdded = classroom.id === view.classroomJustAdded;
- var classroomClass = justAdded ? 'just-added' : '';
if justAdded
#just-added-text.text-center(data-i18n="courses.class_added")
//- sigh
div(class=classroomClass)
h5
span.spr= classroom.get('name')
span.spr (#{(classroom.get('aceConfig') || {}).language === 'javascript' ? 'JavaScript' : 'Python'})
a(href="/courses/"+classroom.id, data-i18n="courses.view_class")
- var courseInstances = view.courseInstances.where({classroomID: classroom.id});
for courseInstance in courseInstances
.course-instance-entry
- var course = view.courses.get(courseInstance.get('courseID'));
h6
span.spr= course.get('name')
small
a(href="/courses/"+courseInstance.get('courseID')+'/'+courseInstance.id, data-i18n="courses.view_levels")
+course-instance-body(courseInstance, classroom)
.clearfix
h3.text-uppercase(data-i18n="courses.join_class")
hr
form#join-class-form.form-inline
.help-block
em(data-i18n="courses.ask_teacher_for_code")
.form-group
input#class-code-input.form-control(data-i18n="[placeholder]courses.enter_c_code", placeholder="<Enter Class Code>", value=view.classCode)
input#join-class-button.btn.btn-navy(type="submit", data-i18n="[value]courses.join", value="Join")
if view.state === 'enrolling'
.progress.progress-striped.active
.progress-bar(style="width: 100%", data-i18n="courses.joining") Joining class
if view.errorMessage
.alert.alert-danger= view.errorMessage
mixin course-instance-body(courseInstance, classroom)
- var course = view.courses.get(courseInstance.get('courseID'));
- var stats = classroom.statsForSessions(courseInstance.sessions, course.id);
if stats.levels.done
.text-success
span.glyphicon.glyphicon-ok
span.spl(data-i18n="courses.course_complete")
span !
.pull-right
if stats.levels.done
- var arenaLevel = stats.levels.arena;
if arenaLevel
- var arenaURL = "/play/ladder/"+arenaLevel.get('slug')+"/course/"+courseInstance.id;
a.btn.btn-burgandy.btn-lg.m-b-1(href=arenaURL)
span(data-i18n="courses.play_arena")
else
a.btn.btn-default.btn-lg.m-b-1(disabled=true, data-i18n="courses.course_complete")
else if stats.levels.next != stats.levels.first
- var next = stats.levels.next;
- var levelURL = "/play/level/"+next.get('slug')+"?course="+courseInstance.get('courseID')+"&course-instance="+courseInstance.id;
a.btn.btn-forest.btn-lg.m-b-1(href=levelURL)
span(data-i18n="common.continue")
else
- var firstLevel = stats.levels.first;
- var levelURL = "/play/level/"+firstLevel.get('slug')+"?course="+courseInstance.get('courseID')+"&course-instance="+courseInstance.id;
a.btn.btn-navy.btn-lg.m-b-1(href=levelURL)
span(data-i18n="courses.start")
div
span(data-i18n="clans.playtime")
span.spr :
span= moment.duration(stats.playtime, 'seconds').humanize()
if stats.levels.lastPlayed
div
span(data-i18n="courses.last_level")
span.spr :
span= stats.levels.lastPlayed.get('name')
.clearfix
.progress
.progress-bar(style="width:"+stats.levels.pctDone)= stats.levels.pctDone