codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-04-26 22:13:32 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clans v1 UI with mock data

Browse source 
Main clans view shows public list, user’s clans, and create clan form.
Clan details view shows clan details and members list.
This commit is contained in:
Matt Lott 2015-03-31 13:28:57 -07:00
parent 2213aff909
commit 32b48a3c4c
7 changed files with 197 additions and 0 deletions

4
app/core/Router.coffee
View file

@ -44,6 +44,10 @@ module.exports = class CocoRouter extends Backbone.Router
'beta': go('HomeView')
'cla': go('CLAView')
'clans': go('clans/ClansView')
'clans/:clanID': go('clans/ClanDetailsView')
'community': go('CommunityView')
'contribute': go('contribute/MainContributeView')

1
app/styles/clans/clan-details.sass Normal file
View file

@ -0,0 +1 @@
// #clan-details-view

5
app/styles/clans/clans.sass Normal file
View file

@ -0,0 +1,5 @@
#clans-view
color: black
.clan-title
cursor: pointer

42
app/templates/clans/clan-details.jade Normal file
View file

@ -0,0 +1,42 @@
extends /templates/base
block content
ol.breadcrumb
li
a(href="/")
span.glyphicon.glyphicon-home
li
a(href="/clans") Clans
li.active= clan.title
h1= clan.title
div
span Owner:
a(href="/user/#{clan.ownerID}")= clan.owner
div Members: #{clan.memberCount}
if clan.owner === 'mrsmith'
div
button.btn.btn-sm.btn-warning Delete Clan
h3 Clan Members
table.table.table-striped.table-condensed
thead
tr
th Name
th Level
th
tbody
each member in members
tr
td
a(href="/user/#{member.id}")= member.name
td= member.level
if member.name !== clan.owner && clan.owner === 'mrsmith'
td
button.btn.btn-sm.btn-warning Remove Member
else
td
button.btn.btn-sm Load More

74
app/templates/clans/clans.jade Normal file
View file

@ -0,0 +1,74 @@
extends /templates/base
block content
ol.breadcrumb
li
a(href="/")
span.glyphicon.glyphicon-home
li.active Clans
div
button.btn.btn-sm.btn-success Create New Clan
span.spr.spl
input(type='text' placeholder='New clan name')
br
div(role='tabpanel')
ul.nav.nav-tabs(role='tablist')
li.active(role='presentation')
a(href='#public-clans' aria-controls='public-clans', role='tab', data-toggle='tab') Public Clans
li(role='presentation')
a(href='#my-clans' aria-controls='my-clans', role='tab', data-toggle='tab') My Clans
.tab-content
.tab-pane.active#public-clans(role='tabpanel')
table.table.table-striped.table-condensed
thead
tr
th Clan Name
th Members
th Owner
th
tbody
each clan in publicClans
tr
td
if clan.owner === 'mrsmith'
a(href="/clans/#{clan.id}", style='font-weight:bold')= clan.title
else
a(href="/clans/#{clan.id}")= clan.title
td= clan.memberCount
td
a(href="/user/#{clan.ownerID}")= clan.owner
td
if !clan.member
button.btn.btn-sm.btn-success Join Clan
else if clan.owner !== 'mrsmith'
button.btn.btn-sm.btn-warning Leave Clan
button.btn.btn-sm Load More
.tab-pane#my-clans(role='tabpanel')
table.table.table-striped.table-condensed
thead
tr
th Clan Name
th Members
th Owner
th
tbody
each clan in myClans
tr
td
if clan.owner === 'mrsmith'
a(href="/clans/#{clan.id}", style='font-weight:bold')= clan.title
else
a(href="/clans/#{clan.id}")= clan.title
td= clan.memberCount
td
a(href="/user/#{clan.ownerID}")= clan.owner
td
if clan.owner !== 'mrsmith'
button.btn.btn-sm.btn-warning Leave Clan
button.btn.btn-sm Load More

30
app/views/clans/ClanDetailsView.coffee Normal file
View file

@ -0,0 +1,30 @@
RootView = require 'views/core/RootView'
template = require 'templates/clans/clan-details'
module.exports = class ClanDetailsView extends RootView
id: 'clan-details-view'
template: template
constructor: (options, @clanID) ->
super options
@initMockData()
getRenderData: =>
context = super()
context.clan = @clan
context.members = @members
context
initMockData: ->
@clan =
title: 'Slay more munchkins'
owner: 'mrsmith'
memberCount: 8
ownerID: me.get('_id')
@members = [
{id: me.get('_id'), name: 'mrsmith', level: 24}
{id: me.get('_id'), name: 'Superman', level: 2}
{id: me.get('_id'), name: 'batman', level: 1}
{id: me.get('_id'), name: 'Bruce', level: 4}
]

41
app/views/clans/ClansView.coffee Normal file
View file

@ -0,0 +1,41 @@
app = require 'core/application'
RootView = require 'views/core/RootView'
template = require 'templates/clans/clans'
module.exports = class MainAdminView extends RootView
id: 'clans-view'
template: template
events:
'click .clan-title': 'onClickClanTitle'
constructor: (options) ->
super options
@initMockData()
getRenderData: ->
context = super()
context.myClans = @myClans
context.publicClans = @publicClans
context
onClickClanTitle: (e) ->
if clanID = $(e.target).data('id')
app.router.navigate "/clans/#{clanID}"
else
console.error "No clan ID found for public clan row."
initMockData: ->
@myClans = [
{id: 1, title: 'FC Dallas', owner: 'soccerfan', memberCount: 4, member: true, ownerID: me.get('_id')}
{id: 2, title: 'Mr. Smith 4th period', owner: 'mrsmith', memberCount: 23, member: true, ownerID: me.get('_id')}
{id: 3, title: 'Test Title 21', owner: 'matt', memberCount: 12, member: true, ownerID: me.get('_id')}
{id: 4, title: 'Slay more munchkins', owner: 'mrsmith', memberCount: 8, member: true, ownerID: me.get('_id')}
]
@publicClans = [
{id: 1, title: 'FC Dallas', owner: 'soccerfan', memberCount: 4, member: true, ownerID: me.get('_id')}
{id: 2, title: 'Mr. Smith 4th period', owner: 'mrsmith', memberCount: 23, member: true, ownerID: me.get('_id')}
{id: 5, title: 'tourney tanks', owner: 'jkl324', memberCount: 7, member: false, ownerID: me.get('_id')}
{id: 6, title: 'Pythonistas', owner: 'bob219', memberCount: 50, member: false, ownerID: me.get('_id')}
]