codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-02-17 08:50:58 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactored contribute pages, each class has it's own page. Better fix to issue 13 and solution to 14

Browse source
This commit is contained in:
Tom Steinbrecher 2014-01-06 00:41:31 -05:00
parent 598106e39a
commit 34dd42a7ca
2 changed files with 296 additions and 336 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
app/styles/contribute.sass
View file

@ -1,41 +0,0 @@
#contribute-view
#homepage_screenshot
margin: 20px 0px
.signature
text-align: right
a
cursor: pointer
.class_image
float: left
width: 150px
margin: 10px 10px 20px 20px
padding-top: 65px
#contribute-nav
float: left
max-width: 20%
width: 250px
box-sizing: border-box
margin-left: 20px
li
float: none
width: 100%
#contribute-main
margin-left: 25%
padding: 40px
box-sizing: border-box
h3
padding-top: 70px
.well
padding: 5px 5px 5px 30px
.saved-notification
display: none
float: right

591
app/templates/contribute.jade
View file

@ -2,325 +2,326 @@ extends /templates/base
block content
ul.affix.nav.nav-list.nav-pills#contribute-nav
li
h3 Character Classes
li
a(href="#archmage") Archmage (Coder)
li
a(href="#artisan") Artisan (Level Builder)
li
a(href="#adventurer") Adventurer (Level Playtester)
li
a(href="#scribe") Scribe (Article Editor)
li
a(href="#diplomat") Diplomat (Translator)
li
a(href="#ambassador") Ambassador (Support)
li
a(href="#counselor") Counselor (Expert/Teacher)
div.contribute_class
hr
p Thanks to our lovely contributors: (work in progress; let us know who you are!)
li Turkish - Nazım Gediz Aydındoğmuş
li Brazilian Portuguese - Gutenberg Barros, Kieizroe, Matthew Burt
li Portugal Portuguese - Matthew Burt
li German - Dirk, Anon
li Thai - Kamolchanok Jittrepit
li Greek - Stergios
li Latin American Spanish - Jesús Ruppel, Matthew Burt, Mariano Luzza
li Spain Spanish - Matthew Burt, Anon
li French - Xeonarno, Anon
li Hungarian - Anon
li Japanese - g1itch
li Chinese - spacepope
li Polish - Anon
li Danish - Anon
li Slovak - Anon
li Artisans - Sootn, Aftermath, mcdavid1991
li Scribes - Ryan Faidley
li Adventurers - Kieizroe, (...)
li Archmages - David Golds, Zach Martin, Tom Steinbrecher, Mischa Lewis-Norelle, Sébastien Moratinos
ul.affix.nav.nav-list.nav-pills#contribute-nav
li
h3 Character Classes
li
a(href="#archmage") Archmage (Coder)
li
a(href="#artisan") Artisan (Level Builder)
li
a(href="#adventurer") Adventurer (Level Playtester)
li
a(href="#scribe") Scribe (Article Editor)
li
a(href="#diplomat") Diplomat (Translator)
li
a(href="#ambassador") Ambassador (Support)
li
a(href="#counselor") Counselor (Expert/Teacher)
div#contribute-main
div#intro
div#contribute-main.class_main
div#intro
h2 Contributing
h2 Contributing
#homepage_screenshot
img(src="/images/pages/contribute/contribute_header.png", alt="")
#homepage_screenshot
img(src="/images/pages/contribute/contribute_header.png", alt="")
p
strong We have high hopes for CodeCombat.
| We want to be where programmers of all stripes come to learn and play together,
| introduce others to the wonderful world of coding,
| and reflect the best parts of the community.
| We can't and don't want to do that alone;
| what makes projects like GitHub, Stack Overflow and Linux great are the people who
| use them and build on them.
| To that end,
a(href="https://github.com/codecombat/codecombat") CodeCombat is totally open source
| , and we aim to provide as many ways as possible for you to take part and
| make this project as much yours as ours.
p We hope you'll join our party!
p.signature - Nick, George, Scott, Michael, and Jeremy
hr
p
strong We have high hopes for CodeCombat.
| We want to be where programmers of all stripes come to learn and play together,
| introduce others to the wonderful world of coding,
| and reflect the best parts of the community.
| We can't and don't want to do that alone;
| what makes projects like GitHub, Stack Overflow and Linux great are the people who
| use them and build on them.
| To that end,
a(href="https://github.com/codecombat/codecombat") CodeCombat is totally open source
| , and we aim to provide as many ways as possible for you to take part and
| make this project as much yours as ours.
p We hope you'll join our party!
p.signature - Nick, George, Scott, Michael, and Jeremy
hr
if me.attributes.anonymous
div#sign-up.alert.alert-info
strong Hey there!
| To subscribe for class emails, you'll need to
a(data-toggle="coco-modal", data-target="modal/signup") create an account
| first .
if me.attributes.anonymous
div#sign-up.alert.alert-info
strong Hey there!
| To subscribe for class emails, you'll need to
a(data-toggle="coco-modal", data-target="modal/signup") create an account
| first .
#archmage
.class_image
img(src="/images/pages/contribute/archmage.png", alt="")
#archmage
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/archmage.png", alt="")
h3 Archmage (Coder)
p One of the best parts about building games is they synthesize so many different things.
| Graphics, sound, real-time networking, social networking, and of course many of the
| more common aspects of programming, from low-level database management,
| and server administration to user facing design and interface building.
| There's a lot to do, and if you're an experienced programmer with a hankering
| to really dive into the nitty-gritty of CodeCombat, this class might be for you.
| We would love to have your help building the best programming game ever.
h3.header-scrolling-fix Archmage (Coder)
p One of the best parts about building games is they synthesize so many different things.
| Graphics, sound, real-time networking, social networking, and of course many of the
| more common aspects of programming, from low-level database management,
| and server administration to user facing design and interface building.
| There's a lot to do, and if you're an experienced programmer with a hankering
| to really dive into the nitty-gritty of CodeCombat, this class might be for you.
| We would love to have your help building the best programming game ever.
h4 Class Attributes
ul
li Knowledge in
a(href="http://coffeescript.org/") CoffeeScript
| , or a desire to learn. Most of our code is in this language.
| If you're a fan of Ruby or Python, you'll feel right at home.
| It's just JavaScript, but with a nicer syntax.
li Some experience in programming and personal initiative.
| We'll help you get oriented, but we can't spend much time training you.
h4 How To Join
p
| Anyone can help out! Just check out our
a(title='GitHub', href="https://github.com/codecombat/codecombat", tabindex=-1) GitHub
| to get started, and check the box below to mark yourself as a brave Archmage and get the latest news by email.
| Want to chat about what to do or how to get more deeply involved?
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Email us
| , or find us in our
a(href="http://www.hipchat.com/g3plnOKqa") public HipChat room
| and we'll go from there!
a(href="/contribute/archmage")
h3 Learn More About Becoming A Powerful Archmage
label.checkbox(for="developer").well
input(type='checkbox', name="developer", id="developer")
| Get emails on new coding opportunities and announcements.
.saved-notification ✓ Saved
#artisan
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/artisan.png", alt="")
h3.header-scrolling-fix Artisan (Level Builder)
p We must construct additional levels!
| People be clamoring for more content, and we can only build so many ourselves.
| Right now your workstation is level one; our level editor is barely
| usable even by its creators, so be wary.
| If you have visions of campaigns spanning for-loops to
a(href="http://stackoverflow.com/questions/758088/seeking-contrived-example-code-continuations/758105#758105") Mondo Bizzaro
| to then this class might be for you.
h4 Class Attributes
ul
li Any experience in building content like this would be nice, such as using
| Blizzard's level editors. But not required!
li A hankering to do a whole lot of testing and iteration.
| To make good levels, you need to take it to others and watch them play it,
| and be prepared to find a lot of things to fix.
li For the time being, endurance en par with an Adventurer.
| Our Level Editor is super preliminary and frustrating to use. You have been warned!
h4 How To Join
p The Level Editor is live! Go forth and fiddle with it.
| Right now for the sake of security, you can't make Components (the most powerful part of level building)
| but be in touch with us and we'll see if we can make what you need.
| See the
a(href="https://docs.google.com/document/d/117tMcL95T1KY8BDisr0iGi5Frb2ZvBJTC0us5hyQkJY/edit?usp=sharing") preliminary documentation
| for more info, and please comment on it so we can make the whole system better.
a(href="/contribute/artisan")
h3 Learn More About Becoming A Creative Artisan
label.checkbox(for="level_creator").well
input(type='checkbox', name="level_creator", id="level_creator")
| Get emails on level editor updates and announcements.
.saved-notification ✓ Saved
#adventurer
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/adventurer.png", alt="")
h3.header-scrolling-fix Adventurer (Level Playtester)
p Let's be clear about your role: you are the tank. You're going to take heavy damage.
| We need people to try out brand-new levels and help identify how to make things better.
| The pain will be enormous; making good games is a long process and no one gets
| it right the first time.
| If you can endure and have a high constitution score, then this class might be for you.
h4 Class Attributes
ul
li A thirst for learning. You want to learn how to code and we want to teach you how to code.
| You'll probably be doing most of the teaching in this case, though.
li Charismatic. Be gentle but articulate about what needs improving, and offer suggestions
| on how to improve.
h4 How To Join
p Either get together with (or recruit!) an Artisan and work with them, or
| check the box below to receive emails when there are new levels to test.
| We'll also be posting about levels to review on our networks like
a(href="http://discourse.codecombat.com/category/adventurer") our forum
| ,
a(href="https://www.facebook.com/codecombat") Facebook
| ,
a(href="http://www.reddit.com/r/CodeCombat/") Reddit
| ,
a(href="https://twitter.com/CodeCombat") Twitter
| , and
a(href="https://plus.google.com/115285980638641924488/posts") Google+
| , so if you prefer to be notified those ways, sign up there!
a(href="/contribute/adventurer")
h3 Learn More About Becoming A Brave Adventurer
label.checkbox(for="tester").well
input(type='checkbox', name="tester", id="tester")
| Get emails when there are new levels to test.
.saved-notification ✓ Saved
h4 Class Attributes
ul
li Knowledge in
a(href="http://coffeescript.org/") CoffeeScript
| , or a desire to learn. Most of our code is in this language.
| If you're a fan of Ruby or Python, you'll feel right at home.
| It's just JavaScript, but with a nicer syntax.
li Some experience in programming and personal initiative.
| We'll help you get oriented, but we can't spend much time training you.
h4 How To Join
p
| Anyone can help out! Just check out our
a(title='GitHub', href="https://github.com/codecombat/codecombat", tabindex=-1) GitHub
| to get started, and check the box below to mark yourself as a brave Archmage and get the latest news by email.
| Want to chat about what to do or how to get more deeply involved?
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Email us
| , or find us in our
a(href="http://www.hipchat.com/g3plnOKqa") public HipChat room
| and we'll go from there!
label.checkbox(for="developer").well
input(type='checkbox', name="developer", id="developer")
| Get emails on new coding opportunities and announcements.
.saved-notification ✓ Saved
#artisan
.class_image
img(src="/images/pages/contribute/artisan.png", alt="")
h3 Artisan (Level Builder)
p We must construct additional levels!
| People be clamoring for more content, and we can only build so many ourselves.
| Right now your workstation is level one; our level editor is barely
| usable even by its creators, so be wary.
| If you have visions of campaigns spanning for-loops to
a(href="http://stackoverflow.com/questions/758088/seeking-contrived-example-code-continuations/758105#758105") Mondo Bizzaro
| to then this class might be for you.
h4 Class Attributes
ul
li Any experience in building content like this would be nice, such as using
| Blizzard's level editors. But not required!
li A hankering to do a whole lot of testing and iteration.
| To make good levels, you need to take it to others and watch them play it,
| and be prepared to find a lot of things to fix.
li For the time being, endurance en par with an Adventurer.
| Our Level Editor is super preliminary and frustrating to use. You have been warned!
#scribe
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/scribe.png", alt="")
h3.header-scrolling-fix Scribe (Article Editor)
p CodeCombat isn't just going to be a bunch of levels.
| It will also include a resource for knowledge, a wiki of programming concepts that levels can hook into.
| That way rather than each Artisan having to describe in detail what a comparison operator is, they
| can simply link their level to the Article describing them that is already written for the player's edification.
| Something along the lines of what the
a(href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide") Mozilla Developer Network
| has built. If your idea of fun is articulating the concepts of programming in Markdown form,
| then this class might be for you.
h4 How To Join
p The Level Editor is live! Go forth and fiddle with it.
| Right now for the sake of security, you can't make Components (the most powerful part of level building)
| but be in touch with us and we'll see if we can make what you need.
| See the
a(href="https://docs.google.com/document/d/117tMcL95T1KY8BDisr0iGi5Frb2ZvBJTC0us5hyQkJY/edit?usp=sharing") preliminary documentation
| for more info, and please comment on it so we can make the whole system better.
h4 Class Attributes
ul
li Skill in words is pretty much all you need.
| Not only grammar and spelling, but able to convey complicated ideas to others.
h4 How To Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, your experience with programming and
| what sort of things you'd like to write about. We'll go from there!
label.checkbox(for="level_creator").well
input(type='checkbox', name="level_creator", id="level_creator")
| Get emails on level editor updates and announcements.
.saved-notification ✓ Saved
a(href="/contribute/scribe")
h3 Learn More About Becoming A Diligent Scribe
label.checkbox(for="article_editor").well
input(type='checkbox', name="article_editor", id="article_editor")
| Get emails about article writing announcements.
.saved-notification ✓ Saved
#adventurer
.class_image
img(src="/images/pages/contribute/adventurer.png", alt="")
#diplomat
h3 Adventurer (Level Playtester)
p Let's be clear about your role: you are the tank. You're going to take heavy damage.
| We need people to try out brand-new levels and help identify how to make things better.
| The pain will be enormous; making good games is a long process and no one gets
| it right the first time.
| If you can endure and have a high constitution score, then this class might be for you.
h4 Class Attributes
ul
li A thirst for learning. You want to learn how to code and we want to teach you how to code.
| You'll probably be doing most of the teaching in this case, though.
li Charismatic. Be gentle but articulate about what needs improving, and offer suggestions
| on how to improve.
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/diplomat.png", alt="")
h3.header-scrolling-fix Diplomat (Translator)
p So, if there's one thing we learned from the
a(href="blog.codecombat.com/post/64658141307/codecombat-in-y-combinator") launch in October
| , it's that there
| is sizeable interest in CodeCombat in other countries, particularly Brazil!
| We're building a corps of translators eager to turn one set of words into
| another set of words to get CodeCombat as accessible across the world as possible.
| If you like getting sneak peeks at upcoming content and getting these levels to
| your fellow nationals ASAP, then this class might be for you.
h4 How To Join
p Either get together with (or recruit!) an Artisan and work with them, or
| check the box below to receive emails when there are new levels to test.
| We'll also be posting about levels to review on our networks like
a(href="http://discourse.codecombat.com/category/adventurer") our forum
| ,
a(href="https://www.facebook.com/codecombat") Facebook
| ,
a(href="http://www.reddit.com/r/CodeCombat/") Reddit
| ,
a(href="https://twitter.com/CodeCombat") Twitter
| , and
a(href="https://plus.google.com/115285980638641924488/posts") Google+
| , so if you prefer to be notified those ways, sign up there!
h4 Class Attributes
ul
li Fluency in English and the language you would like to translate to.
| When conveying complicated ideas, it's important to have a strong grasp in both!
h4 How to Join
p We've started a lot of initial translations at
a(href="https://docs.google.com/a/codecombat.com/spreadsheet/ccc?key=0AjsR1nOoMQ4MdFBqS1NqUmRTVG1hbEMxWTZEd1JrNXc&usp=drive_web#gid=0") this Google Doc
| , so check it out and add things for your language. Also, check this box below to
| keep up-to-date on new internationalization developments!
label.checkbox(for="tester").well
input(type='checkbox', name="tester", id="tester")
| Get emails when there are new levels to test.
.saved-notification ✓ Saved
#scribe
a(href="/contribute/diplomat")
h3 Learn More About Becoming A Great Diplomat
.class_image
img(src="/images/pages/contribute/scribe.png", alt="")
h3 Scribe (Article Editor)
p CodeCombat isn't just going to be a bunch of levels.
| It will also include a resource for knowledge, a wiki of programming concepts that levels can hook into.
| That way rather than each Artisan having to describe in detail what a comparison operator is, they
| can simply link their level to the Article describing them that is already written for the player's edification.
| Something along the lines of what the
a(href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide") Mozilla Developer Network
| has built. If your idea of fun is articulating the concepts of programming in Markdown form,
| then this class might be for you.
h4 Class Attributes
ul
li Skill in words is pretty much all you need.
| Not only grammar and spelling, but able to convey complicated ideas to others.
label.checkbox(for="translator").well
input(type='checkbox', name="translator", id="translator")
| Get emails about i18n developments and levels to translate.
.saved-notification ✓ Saved
h4 How To Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, your experience with programming and
| what sort of things you'd like to write about. We'll go from there!
label.checkbox(for="article_editor").well
input(type='checkbox', name="article_editor", id="article_editor")
| Get emails about article writing announcements.
.saved-notification ✓ Saved
#diplomat
.class_image
img(src="/images/pages/contribute/diplomat.png", alt="")
h3 Diplomat (Translator)
p So, if there's one thing we learned from the
a(href="blog.codecombat.com/post/64658141307/codecombat-in-y-combinator") launch in October
| , it's that there
| is sizeable interest in CodeCombat in other countries, particularly Brazil!
| We're building a corps of translators eager to turn one set of words into
| another set of words to get CodeCombat as accessible across the world as possible.
| If you like getting sneak peeks at upcoming content and getting these levels to
| your fellow nationals ASAP, then this class might be for you.
h4 Class Attributes
ul
li Fluency in English and the language you would like to translate to.
| When conveying complicated ideas, it's important to have a strong grasp in both!
h4 How to Join
p We've started a lot of initial translations at
a(href="https://docs.google.com/a/codecombat.com/spreadsheet/ccc?key=0AjsR1nOoMQ4MdFBqS1NqUmRTVG1hbEMxWTZEd1JrNXc&usp=drive_web#gid=0") this Google Doc
| , so check it out and add things for your language. Also, check this box below to
| keep up-to-date on new internationalization developments!
label.checkbox(for="translator").well
input(type='checkbox', name="translator", id="translator")
| Get emails about i18n developments and levels to translate.
.saved-notification ✓ Saved
#ambassador
#ambassador
.class_image
img(src="/images/pages/contribute/ambassador.png", alt="")
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/ambassador.png", alt="")
h3 Ambassador (Support)
p This is a community we're building, and you are the connections.
| We've got Olark chats, emails, and social networks with lots of people to talk with
| and help get acquainted with the game and learn from.
| If you want to help people get involved and have fun, and get a good feel of the pulse of
| CodeCombat and where we're going, then this class might be for you.
h4 Class Attributes
ul
li Communication skills. Be able to identify the problems players are having
| and help them solve them. Also, keep the rest of us informed about what
| players are saying, what they like and don't like and want more of!
h4 How to Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, what you've done and what you'd
| be interested in doing. We'll go from there!
p
strong Note
| : One of our top priorities is to build multiplayer where players having difficulty
| solving levels can summon higher level wizards to help them.
| This will be a great way for ambassadors to do their thing. We'll keep you posted!
h3.header-scrolling-fix Ambassador (Support)
p This is a community we're building, and you are the connections.
| We've got Olark chats, emails, and social networks with lots of people to talk with
| and help get acquainted with the game and learn from.
| If you want to help people get involved and have fun, and get a good feel of the pulse of
| CodeCombat and where we're going, then this class might be for you.
h4 Class Attributes
ul
li Communication skills. Be able to identify the problems players are having
| and help them solve them. Also, keep the rest of us informed about what
| players are saying, what they like and don't like and want more of!
h4 How to Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, what you've done and what you'd
| be interested in doing. We'll go from there!
p
strong Note
| : One of our top priorities is to build multiplayer where players having difficulty
| solving levels can summon higher level wizards to help them.
| This will be a great way for ambassadors to do their thing. We'll keep you posted!
label.checkbox(for="support").well
input(type='checkbox', name="support", id="support")
| Get emails on support updates and multiplayer developments.
.saved-notification ✓ Saved
#counselor
a(href="/contribute/ambassador")
h3 Learn More About Becoming A Helpful Ambassador
.class_image
img(src="/images/pages/contribute/counselor.png", alt="")
label.checkbox(for="support").well
input(type='checkbox', name="support", id="support")
| Get emails on support updates and multiplayer developments.
.saved-notification ✓ Saved
#counselor
h3 Counselor (Expert)
p Do you have life experience?
| A different perspective on things that can help us decide how to shape CodeCombat?
| Of all these roles, this will probably take the least time, but
| individually you may make the most difference.
| We're on the lookout for wisened sages, particularly in areas like: teaching,
| game development, open source project management, technical recruiting, entrepreneurship,
| or design.
p Or really anything that is relevant to the development of CodeCombat.
| If you have knowledge and want to share it to help grow this project, then
| this class might be for you.
h4 Class Attributes
ul
li Experience, in any of the areas above or something you think might be helpful.
li A little bit of free time!
h4 How to Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, what you've done and what you'd
| be interested in doing. We'll put you in our contact list and be in touch
| when we could use advice (not too often).
.class_image.header-scrolling-fix
img(src="/images/pages/contribute/counselor.png", alt="")
div.clearfix
h3.header-scrolling-fix Counselor (Expert)
p Do you have life experience?
| A different perspective on things that can help us decide how to shape CodeCombat?
| Of all these roles, this will probably take the least time, but
| individually you may make the most difference.
| We're on the lookout for wisened sages, particularly in areas like: teaching,
| game development, open source project management, technical recruiting, entrepreneurship,
| or design.
p Or really anything that is relevant to the development of CodeCombat.
| If you have knowledge and want to share it to help grow this project, then
| this class might be for you.
h4 Class Attributes
ul
li Experience, in any of the areas above or something you think might be helpful.
li A little bit of free time!
h4 How to Join
p
a(title='Contact', tabindex=-1, data-toggle="coco-modal", data-target="modal/contact") Contact us
| , tell us a little about yourself, what you've done and what you'd
| be interested in doing. We'll put you in our contact list and be in touch
| when we could use advice (not too often).
a(href="/contribute/counselor")
h3 Learn More About Becoming A Valuable Counselor
div.clearfix