<commit_before>import React, { Fragment } from 'react'
import {
  ThemeProvider,
  Heading,
  Container,
  Flex,
  Box,
  Text,
  Button,
  LargeButton,
  Section as S,
  Link as A,
  Module,
  mediaQueries,
  cx
} from '@hackclub/design-system'
import { Head, Link } from 'react-static'
import Nav from '../components/Nav'
import Footer from '../components/Footer'

/* will be fixed in next DS release */
const Section = S.extend`
  flex-direction: column;
`
const One = Section.extend`
  padding-top: 0 !important;
  background-color: ${cx('red.5')};
  background-image: linear-gradient(
    16deg,
    ${cx('orange.4')} 0%,
    ${cx('red.5')} 50%,
    ${cx('red.6')} 100%
  );
`
const Two = Section.extend`
  background-color: ${cx('violet.6')};
  background-image: linear-gradient(
    48deg,
    ${cx('violet.5')} 0%,
    ${cx('violet.6')} 50%,
    ${cx('indigo.4')} 100%
  );
`
const Three = Section.extend`
  background-color: ${cx('blue.6')};
  background-image: linear-gradient(
    -48deg,
    ${cx('blue.7')} 0%,
    ${cx('blue.6')} 50%,
    ${cx('indigo.4')} 100%
  );
`
const Four = Section.extend`
  background-color: ${cx('green.6')};
  background-image: linear-gradient(
    -32deg,
    ${cx('teal.7')} 0%,
    ${cx('lime.6')} 100%
  );
`

const Modules = Flex.extend.attrs({
  wrap: true,
  justify: 'center',
  mt: 3
})`
  max-width: 64rem;
`

const CardBase = Container.extend.attrs({ bg: 'blue.0', p: 3, mt: 3 })`
  border-radius: .25rem;
  box-shadow: 0 2px 16px 2px rgba(0,0,0,.1);
  max-width: 28rem;
  text-align: left;

  ${mediaQueries[1]} { transform: rotate(2deg); }

  p {
    color: ${cx('slate')};
    font-size: 1rem;
    line-height: 1.375;
    margin-top: .5rem;
  }
`
const Card = ({ name, children, ...props }) => (
  <CardBase {...props}>
    <Heading.h3 color="blue.6" m={0} f={3} children={name} />
    {children}
  </CardBase>
)

Button.link = Button.withComponent(Link)
LargeButton.link = LargeButton.withComponent(Link)

export default () => (
  <ThemeProvider>

      <title>Start – Hack Club</title>

    <One>

      <Heading.h1 f={[5, 6]} mt={[4, 5]}>
        Let’s get your Hack Club started.
      </Heading.h1>
      <Heading.h2 f={[3, 4]} my={2} style={{ fontWeight: 'normal' }}>
        The awesome coding club at your high school is coming soon.
      </Heading.h2>
    </One>
    <Two>
      <Heading.h2 f={[4, 5]}>Students: apply and start your club!</Heading.h2>
      <Modules>
        <Module
          icon="assignment"
          heading="Submit your application"
          body="Fill out a few questions to get going—totally free."
        />
        <Module
          icon="ring_volume"
          heading="Training call"
          body="We’ll start getting to know you and making a plan for your club."
        />
        <Module
          icon="event_available"
          heading="Lead your club!"
          body="Schedule your first meeting, start marketing, and get ready!"
        />
      </Modules>
      <Box p={3} pb={0} align="center">
        <LargeButton.link to="/apply" inverted>
          Apply to Hack Club
        </LargeButton.link>
      </Box>
    </Two>
    <Three>
      <Flex flexDirection={['column', 'row']} align="center">
        <Container maxWidth={28} align={['center', 'right']} mr={[0, 4]}>
          <Heading.h2 f={[4, 5]}>Hack Clubs are student-led.</Heading.h2>
          <Text f={[3, 4]} my={1}>
            Each club meets weekly after school at their high school.
          </Text>
          <Button.link bg="info" my={3} inverted to="/meetings" mt={4}>
            See what clubs look like →
          </Button.link>
        </Container>
        <Card name="Are you a teacher or parent?">
          <Text m={0}>
            We hate to say it, but we’re currently only accepting applications
            from students.
          </Text>
          <Text m={0}>
            Teachers and parents can help by recruiting students, sharing Hack
            Club with the local PTA, and expressing interest in Hack Club to
            school administration.
          </Text>
          <Text m={0}>
            That said, shoot us an email at{' '}

              contact@hackclub.com
            {' '}
            and we’d really love to help where we can.
          </Text>
        </Card>
      </Flex>
    </Three>
    <Four>
      <Heading.h2 f={[4, 5]}>
        HQ provides the resources you’ll need to soar.
      </Heading.h2>
      <Modules>
        <Module
          icon="forum"
          heading="Online community"
          body="Join our Slack and meet thousands of other club leaders and members."
        />
        <Module
          icon="chrome_reader_mode"
          heading="Curriculum"
          body="Give your members dozens of tutorials for making websites, apps, and games."
        />
        <Module
          icon="voice_chat"
          heading="Mentorship"
          body="Talk to our team for guidance and assistance whenever you need help."
        />
        <Module
          icon="description"
          heading="Structure & guidelines"
          body="Learn from hundreds of other clubs—we’ve got info, advice, and experience."
        />
        <Module
          icon="local_activity"
          heading="Local events"
          body="Attend hackathons, workshops, and other events from Hack Clubs nearby."
        />
        <Module
          icon="wallpaper"
          heading="Marketing"
          body="Get stickers, posters, and ideas for spreading the word about your club."
        />
      </Modules>
      <Box align="center" mt={4}>
        <LargeButton.link to="/apply" inverted f={[3, 4]}>
          Apply to Hack Club
        </LargeButton.link>
      </Box>
    </Four>

  </ThemeProvider>
)
<commit_msg>Standardize arrow on start page<commit_after>import React, { Fragment } from 'react'
import {
  ThemeProvider,
  Heading,
  Container,
  Flex,
  Box,
  Text,
  Button,
  LargeButton,
  Section as S,
  Link as A,
  Module,
  mediaQueries,
  cx
} from '@hackclub/design-system'
import { Head, Link } from 'react-static'
import Nav from '../components/Nav'
import Footer from '../components/Footer'

/* will be fixed in next DS release */
const Section = S.extend`
  flex-direction: column;
`
const One = Section.extend`
  padding-top: 0 !important;
  background-color: ${cx('red.5')};
  background-image: linear-gradient(
    16deg,
    ${cx('orange.4')} 0%,
    ${cx('red.5')} 50%,
    ${cx('red.6')} 100%
  );
`
const Two = Section.extend`
  background-color: ${cx('violet.6')};
  background-image: linear-gradient(
    48deg,
    ${cx('violet.5')} 0%,
    ${cx('violet.6')} 50%,
    ${cx('indigo.4')} 100%
  );
`
const Three = Section.extend`
  background-color: ${cx('blue.6')};
  background-image: linear-gradient(
    -48deg,
    ${cx('blue.7')} 0%,
    ${cx('blue.6')} 50%,
    ${cx('indigo.4')} 100%
  );
`
const Four = Section.extend`
  background-color: ${cx('green.6')};
  background-image: linear-gradient(
    -32deg,
    ${cx('teal.7')} 0%,
    ${cx('lime.6')} 100%
  );
`

const Modules = Flex.extend.attrs({
  wrap: true,
  justify: 'center',
  mt: 3
})`
  max-width: 64rem;
`

const CardBase = Container.extend.attrs({ bg: 'blue.0', p: 3, mt: 3 })`
  border-radius: .25rem;
  box-shadow: 0 2px 16px 2px rgba(0,0,0,.1);
  max-width: 28rem;
  text-align: left;

  ${mediaQueries[1]} { transform: rotate(2deg); }

  p {
    color: ${cx('slate')};
    font-size: 1rem;
    line-height: 1.375;
    margin-top: .5rem;
  }
`
const Card = ({ name, children, ...props }) => (
  <CardBase {...props}>
    <Heading.h3 color="blue.6" m={0} f={3} children={name} />
    {children}
  </CardBase>
)

Button.link = Button.withComponent(Link)
LargeButton.link = LargeButton.withComponent(Link)

export default () => (
  <ThemeProvider>

      <title>Start – Hack Club</title>

    <One>

      <Heading.h1 f={[5, 6]} mt={[4, 5]}>
        Let’s get your Hack Club started.
      </Heading.h1>
      <Heading.h2 f={[3, 4]} my={2} style={{ fontWeight: 'normal' }}>
        The awesome coding club at your high school is coming soon.
      </Heading.h2>
    </One>
    <Two>
      <Heading.h2 f={[4, 5]}>Students: apply and start your club!</Heading.h2>
      <Modules>
        <Module
          icon="assignment"
          heading="Submit your application"
          body="Fill out a few questions to get going—totally free."
        />
        <Module
          icon="ring_volume"
          heading="Training call"
          body="We’ll start getting to know you and making a plan for your club."
        />
        <Module
          icon="event_available"
          heading="Lead your club!"
          body="Schedule your first meeting, start marketing, and get ready!"
        />
      </Modules>
      <Box p={3} pb={0} align="center">
        <LargeButton.link to="/apply" inverted>
          Apply to Hack Club
        </LargeButton.link>
      </Box>
    </Two>
    <Three>
      <Flex flexDirection={['column', 'row']} align="center">
        <Container maxWidth={28} align={['center', 'right']} mr={[0, 4]}>
          <Heading.h2 f={[4, 5]}>Hack Clubs are student-led.</Heading.h2>
          <Text f={[3, 4]} my={1}>
            Each club meets weekly after school at their high school.
          </Text>
          <Button.link bg="info" my={3} inverted to="/meetings" mt={4}>
            See what clubs look like »
          </Button.link>
        </Container>
        <Card name="Are you a teacher or parent?">
          <Text m={0}>
            We hate to say it, but we’re currently only accepting applications
            from students.
          </Text>
          <Text m={0}>
            Teachers and parents can help by recruiting students, sharing Hack
            Club with the local PTA, and expressing interest in Hack Club to
            school administration.
          </Text>
          <Text m={0}>
            That said, shoot us an email at{' '}

              contact@hackclub.com
            {' '}
            and we’d really love to help where we can.
          </Text>
        </Card>
      </Flex>
    </Three>
    <Four>
      <Heading.h2 f={[4, 5]}>
        HQ provides the resources you’ll need to soar.
      </Heading.h2>
      <Modules>
        <Module
          icon="forum"
          heading="Online community"
          body="Join our Slack and meet thousands of other club leaders and members."
        />
        <Module
          icon="chrome_reader_mode"
          heading="Curriculum"
          body="Give your members dozens of tutorials for making websites, apps, and games."
        />
        <Module
          icon="voice_chat"
          heading="Mentorship"
          body="Talk to our team for guidance and assistance whenever you need help."
        />
        <Module
          icon="description"
          heading="Structure & guidelines"
          body="Learn from hundreds of other clubs—we’ve got info, advice, and experience."
        />
        <Module
          icon="local_activity"
          heading="Local events"
          body="Attend hackathons, workshops, and other events from Hack Clubs nearby."
        />
        <Module
          icon="wallpaper"
          heading="Marketing"
          body="Get stickers, posters, and ideas for spreading the word about your club."
        />
      </Modules>
      <Box align="center" mt={4}>
        <LargeButton.link to="/apply" inverted f={[3, 4]}>
          Apply to Hack Club
        </LargeButton.link>
      </Box>
    </Four>

  </ThemeProvider>
)
<|endoftext|>


<commit_before>//this is a class
//game.PlayerEntity is a class that is why there both capital
//me.Entity is a class
game.PlayerEntity = me.Entity.extend({
	//this is a constructer function
	//melon js uses this contructer on most things for setutp
	//you need x y and settings
	//you're initializing the basic guy
	//super is reaching into the constructer of me.Entity you need settings
	//getShape function is returning a rectangle shape
	//the numbers of the width and height of the box
	//polygon is a method
	init: function(x, y, settings){
		this._super(me.Entity, 'init', [x, y, {
			image: "player",
			width: 64,
			height: 64,
			spritewidth: "64",
			spriteheight: "64",
			getShape: function(){
				return(new me.Rect(0, 0, 64, 64)).toPolygon();
			}
		}]);

		//choosing a velocity for the player
		//moving 5 units to the right
		//y is 20 so character is on the floor
		//me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH); makes it so the character is always being followed on the screen
		this.body.setVelocity(5, 20);
		//keep track of which direction your character is going
		this.facing = "right";
		//this keeps track of time
		this.now = new Date().getTime();
		this.lastHit = this.now;
		//this allows you to have a hit delay
		this.lastAttack = new Date().getTime();
		me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);

		//this.renderable.addAnimation adds animation(makes your character look like its walking standing or attacking) using the pictures
		//80 miliseconds is the speed you go through each picture
		//the number is what picture from orcSpear.png the program uses
		this.renderable.addAnimation("idle", [78]);
		this.renderable.addAnimation("walk", [117, 118, 119, 120, 121, 122, 123, 124, 125], 80);
		this.renderable.addAnimation("attack", [65, 66, 67, 68, 69, 70, 71, 72], 80);

		//this is the animation it starts at (facing the screen)
		this.renderable.setCurrentAnimation("idle");
	},

	update: function(delta){
		//updating the time
		this.now = new Date().getTime();
		//checking if the right key is pressed
		if(me.input.isKeyPressed("right")){
			//if the key is pressed this is what happens
			//adds the position of my x by the velocity defined above in
			//setVelocity() and multiplying it by me.timer.tick
			//me.timer.tick makes the movement look smooth
			this.body.vel.x += this.body.accel.x * me.timer.tick;
			//this is so the character faces the right when moving to the right (if this isnt here the character faces the left when walking to the right)
			this.facing = "right";
			this.flipX(true);
		}
		//if you stop pressing the right key
		else if (me.input.isKeyPressed("left")){
			this.body.vel.x -=this.body.accel.x * me.timer.tick;
			//this is so the character faces the left when moving to the left (if this isnt here the character faces the right when walking to the left)
			this.facing = "left";
			this.flipX(false);
		}
		else{
			//it wont move
			this.body.vel.x = 0;
		}

		//if you press jump && make sure you dont double jumping // your not already jumping and your not falling
		if(me.input.isKeyPressed("jump") && !this.body.falling && !this.body.jumping){
			//if it runs you can jump
			this.body.jumping = true;
			this.body.vel.y -= this.body.accel.y * me.timer.tick;
		}

		//checking if attack is pressed
		if(me.input.isKeyPressed("attack")){
			//runs if your not attacking
			if(!this.renderable.isCurrentAnimation("attack")){
				//sets the current animation to attack and once that is over
				//goes back to the idle animation
				console.log(!this.renderable.isCurrentAnimation("attack"));
				this.renderable.setCurrentAnimation("attack", "idle");
				//makes it so that the next time we start the animation this sequence we begin
				//from the first animation, not wherever we left off when we
				//switched to another animation
				this.renderable.setAnimationFrame();
			}
		}
		//this will run only if the character is moving
//	//	//and if the attack animation is not going
		else if(this.body.vel.x !== 0 && !this.renderable.isCurrentAnimation("attack")){
			//this if statement checks what happening with the character
			////if its not moving it'll walk
			//if it isnt it'll walk
			if(!this.renderable.isCurrentAnimation("walk")){
				this.renderable.setCurrentAnimation("walk");
			}
		}
		//this will run if the velocity is not 0
		//this will make the walking stop
		//making sure your not attacking
		else if(!this.renderable.isCurrentAnimation("attack")){
			this.renderable.setCurrentAnimation("idle");
		}

		//sets up the collsions
		//passing a parameter to collideHandler about the player
		me.collision.check(this, true, this.collideHandler.bind(this), true);
		//delta is the change of time its happened
		this.body.update(delta);

		//calling the parent class
		//this is updating the super class so the animations can update
		this._super(me.Entity, "update", [delta]);
		return true;
	},

	//passing a parameter
	//collideHandler is function and responding to a collision
	collideHandler: function(response){
		//runs when response b is whatever your colliding with
		//in this case the enemy base entity
		//response a is related to the character
		if(response.b.type==='EnemyBaseEntity'){
			//runs if your running into the enemy base
			//var ydif is the difference between players y postion and
			// bases y position
			//var xdif is the difference between players y postion and
			// bases y position
			var ydif = this.pos.y - response.b.pos.y;
			var xdif = this.pos.x - response.b.pos.x;

			//runs if ydifference<-40 && xdif< 70 && xdif>-35
			//allows you to stand on base
			if(ydif<-40 && xdif< 70 && xdif>-35){
				this.body.falling = false;
				this.body.vel.y = -1;
			}
			//runs if your approaching/facing the base from the right
			// && if the xdif is less than zero
			else if(xdif>-35 && this.facing==='right' && (xdif<0)){
				//stops the character
				this.body.vel.x = 0;
				//makes sure the player cant break through the base
				this.pos.x = this.pos.x -1;
			}
			//runs if your approaching/facing the base from the left
			else if(xdif<70 && this.facing==='left' && xdif>0){
				//stops the character
				this.body.vel.x = 0;
				this.pos.x = this.pos.x +1;
			}
			//checking if your hitting the enemy base
			if(this.renderable.isCurrentAnimation("attack") && this.now-this.lastHit >=1000){
	//			//if it runs you lose health
	//			//updating last hit aka time
				this.lastHit = this.now;
				response.b.loseHealth();
			}

		}
	}
});

//this is a class
//making a constructor with ._super
//setting the picture and size
//getShape is returning a rectangle
//toPolygon is there so you can use it
game.PlayerBaseEntity = me.Entity.extend({
	init : function (x, y, settings){
		this._super(me.Entity, 'init', [x, y, {
			image : "tower",
			width : 100,
			height : 100,
			spritewidth : "100",
			spriteheight : "100",
			getShape: function(){
				return (new me.Rect (0, 0, 70, 70)).toPolygon();
			}
		}]);
		//this variable is saying the tower isnt broken
		this.broken = false;
		//this variable is setting the health to 10
		this.health = 10;
		//this variable is saying it'll always update whether or not your looking at it
		this.alwaysUpdate = true;
		//this variable is so if somebody runs into the tower you can collide with it
		this.body.onCollision = this.onCollision.bind(this);

		//the type allows you to use it when doing other collisions and you can check what your running into
		this.type = "PlayerBaseEntity";

		//0 because is the not burning animation
		//1 is another animation
		//this.renderable.setCurrentAnimation("idle"); sets the animation when the tower is broken
		this.renderable.addAnimation("idle", [0]);
		this.renderable.addAnimation("broken", [1]);
		this.renderable.setCurrentAnimation("idle");
	},

	update:function(delta) {
		//this runs when the health is less than or equal to zero
		if(this.health<=0){
			//if its true your character is dead
			this.broken = true;
			this.renderable.setCurrentAnimation("broken");
		}
		//then it updates delta (the time)
		this.body.update(delta);

		//calling the super
		//updating and returning
		this._super(me.Entity, "update", [delta]);
		return true;
	},

	//for colliding
	onCollision: function(){

	}

});

//this is a class for the enemy base
//almost the same the class above
game.EnemyBaseEntity = me.Entity.extend({
	init : function (x, y, settings){
		this._super(me.Entity, 'init', [x, y, {
			image : "tower",
			width : 100,
			height : 100,
			spritewidth : "100",
			spriteheight : "100",
			getShape: function(){
				return (new me.Rect (0, 0, 70, 70)).toPolygon();
			}
		}]);
		this.broken = false;
		this.health = 10;
		this.alwaysUpdate = true;
		this.body.onCollision = this.onCollision.bind(this);

		this.type = "EnemyBaseEntity";

		//0 because is the not burning animation
		//1 is another animation
		//this.renderable.setCurrentAnimation("idle"); sets the animation when the tower is broken
		this.renderable.addAnimation("idle", [0]);
		this.renderable.addAnimation("broken", [1]);
		this.renderable.setCurrentAnimation("idle");

	},

	update:function(delta) {
		if(this.health<=0){
			this.broken = true;
			this.renderable.setCurrentAnimation("broken");
		}
		this.body.update(delta);

		this._super(me.Entity, "update", [delta]);
		return true;
	},

	onCollision: function(){

	},

	//this function runs so you can lose health
	loseHealth: function(){
		//this makes your health go down one
		this.health--;
	}

});

//class for the enemy
game.EnemyCreep = me.Entity.extend({
	//this is a function
	//you need x y and settings
	//super is reaching into the constructer of me.Entity you need settings
	//getShape function is returning a rectangle shape
	//the numbers of the width and height of the box
	init: function(x,y, settings){
		this._super(me.Entity, 'init', [x, y, {
			image: "creep1",
			width: 32,
			height: 64,
			spritewidth: "32",
			spriteheight: "64",
			getShape: function(){
				return (new me.Rect(0,0,32,64)).toPolygon();
			}
		}]);
		this.health = 10;
		this.alwaysUpdate = true;

		this.body.setVelocity(3,20);

		this.type = "EnemyCreep";

		this.renderable.addAnimation("walk", [3,4,5], 80);
		this.renderable.setCurrentAnimation("walk");
	},

	update: function(delta){
		//makes the character move
		this.body.vel.x -= this.body.accel.x * me.timer.tick;

		//then it updates delta (the time)
		this.body.update(delta);

		//calling the super
		//updating and returning
		this._super(me.Entity, "update", [delta]);
	}

});

//class for all the timers
//not an entity wont show up on the screen
game.GameManager = Object.extend({
	//constructor function
	 init: function (x, y, settings){
	 	//for time
	 	this.now = new Date().getTime;
	 	//last time made a creep happen
	 	this.lastCreep = new Date().getTime();

	 	//so it constantly updates
	 	this.alwaysUpdate = true;
	 },
	 update: function(){
	 	//keeping track of time
	 	this.now = new Date().getTime();

	 	//keeping track if you need creeps
	 	//math.round checks and makes sure that you have amultiple of ten
	 	//checking to be a sec  % checks if you have a multiple of ten
	 	//and checking if you spawn over and over again
	 	if(Math.round(this.now/1000)%10 ===0 && (this.now - this.lastCreep >= 1000)){
	 		//update last creep time
	 		this.lastCreep = this.now;
	 		//building a creep
	 		var creepe = me.pool.pull("EnemyCreep", 1000, 0, {});
	 		//adding creeps to the world
	 		me.game.world.addChild(creepe, 5);
	 	}

	 	return true;
	 }
});<commit_msg>finished video 21 , no comments {Creepers hit the base}<commit_after>//this is a class
//game.PlayerEntity is a class that is why there both capital
//me.Entity is a class
game.PlayerEntity = me.Entity.extend({
	//this is a constructer function
	//melon js uses this contructer on most things for setutp
	//you need x y and settings
	//you're initializing the basic guy
	//super is reaching into the constructer of me.Entity you need settings
	//getShape function is returning a rectangle shape
	//the numbers of the width and height of the box
	//polygon is a method
	init: function(x, y, settings){
		this._super(me.Entity, 'init', [x, y, {
			image: "player",
			width: 64,
			height: 64,
			spritewidth: "64",
			spriteheight: "64",
			getShape: function(){
				return(new me.Rect(0, 0, 64, 64)).toPolygon();
			}
		}]);

		//choosing a velocity for the player
		//moving 5 units to the right
		//y is 20 so character is on the floor
		//me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH); makes it so the character is always being followed on the screen
		this.body.setVelocity(5, 20);
		//keep track of which direction your character is going
		this.facing = "right";
		//this keeps track of time
		this.now = new Date().getTime();
		this.lastHit = this.now;
		//this allows you to have a hit delay
		this.lastAttack = new Date().getTime();
		me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH);

		//this.renderable.addAnimation adds animation(makes your character look like its walking standing or attacking) using the pictures
		//80 miliseconds is the speed you go through each picture
		//the number is what picture from orcSpear.png the program uses
		this.renderable.addAnimation("idle", [78]);
		this.renderable.addAnimation("walk", [117, 118, 119, 120, 121, 122, 123, 124, 125], 80);
		this.renderable.addAnimation("attack", [65, 66, 67, 68, 69, 70, 71, 72], 80);

		//this is the animation it starts at (facing the screen)
		this.renderable.setCurrentAnimation("idle");
	},

	update: function(delta){
		//updating the time
		this.now = new Date().getTime();
		//checking if the right key is pressed
		if(me.input.isKeyPressed("right")){
			//if the key is pressed this is what happens
			//adds the position of my x by the velocity defined above in
			//setVelocity() and multiplying it by me.timer.tick
			//me.timer.tick makes the movement look smooth
			this.body.vel.x += this.body.accel.x * me.timer.tick;
			//this is so the character faces the right when moving to the right (if this isnt here the character faces the left when walking to the right)
			this.facing = "right";
			this.flipX(true);
		}
		//if you stop pressing the right key
		else if (me.input.isKeyPressed("left")){
			this.body.vel.x -=this.body.accel.x * me.timer.tick;
			//this is so the character faces the left when moving to the left (if this isnt here the character faces the right when walking to the left)
			this.facing = "left";
			this.flipX(false);
		}
		else{
			//it wont move
			this.body.vel.x = 0;
		}

		//if you press jump && make sure you dont double jumping // your not already jumping and your not falling
		if(me.input.isKeyPressed("jump") && !this.body.falling && !this.body.jumping){
			//if it runs you can jump
			this.body.jumping = true;
			this.body.vel.y -= this.body.accel.y * me.timer.tick;
		}

		//checking if attack is pressed
		if(me.input.isKeyPressed("attack")){
			//runs if your not attacking
			if(!this.renderable.isCurrentAnimation("attack")){
				//sets the current animation to attack and once that is over
				//goes back to the idle animation
				console.log(!this.renderable.isCurrentAnimation("attack"));
				this.renderable.setCurrentAnimation("attack", "idle");
				//makes it so that the next time we start the animation this sequence we begin
				//from the first animation, not wherever we left off when we
				//switched to another animation
				this.renderable.setAnimationFrame();
			}
		}
		//this will run only if the character is moving
//	//	//and if the attack animation is not going
		else if(this.body.vel.x !== 0 && !this.renderable.isCurrentAnimation("attack")){
			//this if statement checks what happening with the character
			////if its not moving it'll walk
			//if it isnt it'll walk
			if(!this.renderable.isCurrentAnimation("walk")){
				this.renderable.setCurrentAnimation("walk");
			}
		}
		//this will run if the velocity is not 0
		//this will make the walking stop
		//making sure your not attacking
		else if(!this.renderable.isCurrentAnimation("attack")){
			this.renderable.setCurrentAnimation("idle");
		}

		//sets up the collsions
		//passing a parameter to collideHandler about the player
		me.collision.check(this, true, this.collideHandler.bind(this), true);
		//delta is the change of time its happened
		this.body.update(delta);

		//calling the parent class
		//this is updating the super class so the animations can update
		this._super(me.Entity, "update", [delta]);
		return true;
	},

	//passing a parameter
	//collideHandler is function and responding to a collision
	collideHandler: function(response){
		//runs when response b is whatever your colliding with
		//in this case the enemy base entity
		//response a is related to the character
		if(response.b.type==='EnemyBaseEntity'){
			//runs if your running into the enemy base
			//var ydif is the difference between players y postion and
			// bases y position
			//var xdif is the difference between players y postion and
			// bases y position
			var ydif = this.pos.y - response.b.pos.y;
			var xdif = this.pos.x - response.b.pos.x;

			//runs if ydifference<-40 && xdif< 70 && xdif>-35
			//allows you to stand on base
			if(ydif<-40 && xdif< 70 && xdif>-35){
				this.body.falling = false;
				this.body.vel.y = -1;
			}
			//runs if your approaching/facing the base from the right
			// && if the xdif is less than zero
			else if(xdif>-35 && this.facing==='right' && (xdif<0)){
				//stops the character
				this.body.vel.x = 0;
				//makes sure the player cant break through the base
				this.pos.x = this.pos.x -1;
			}
			//runs if your approaching/facing the base from the left
			else if(xdif<70 && this.facing==='left' && xdif>0){
				//stops the character
				this.body.vel.x = 0;
				this.pos.x = this.pos.x +1;
			}
			//checking if your hitting the enemy base
			if(this.renderable.isCurrentAnimation("attack") && this.now-this.lastHit >=1000){
	//			//if it runs you lose health
	//			//updating last hit aka time
				this.lastHit = this.now;
				response.b.loseHealth();
			}

		}
	}
});

//this is a class
//making a constructor with ._super
//setting the picture and size
//getShape is returning a rectangle
//toPolygon is there so you can use it
game.PlayerBaseEntity = me.Entity.extend({
	init : function (x, y, settings){
		this._super(me.Entity, 'init', [x, y, {
			image : "tower",
			width : 100,
			height : 100,
			spritewidth : "100",
			spriteheight : "100",
			getShape: function(){
				return (new me.Rect (0, 0, 70, 70)).toPolygon();
			}
		}]);
		//this variable is saying the tower isnt broken
		this.broken = false;
		//this variable is setting the health to 10
		this.health = 10;
		//this variable is saying it'll always update whether or not your looking at it
		this.alwaysUpdate = true;
		//this variable is so if somebody runs into the tower you can collide with it
		this.body.onCollision = this.onCollision.bind(this);
		//the type allows you to use it when doing other collisions and you can check what your running into
		this.type = "PlayerBase";

		//0 because is the not burning animation
		//1 is another animation
		//this.renderable.setCurrentAnimation("idle"); sets the animation when the tower is broken
		this.renderable.addAnimation("idle", [0]);
		this.renderable.addAnimation("broken", [1]);
		this.renderable.setCurrentAnimation("idle");
	},

	update:function(delta) {
		//this runs when the health is less than or equal to zero
		if(this.health<=0){
			//if its true your character is dead
			this.broken = true;
			this.renderable.setCurrentAnimation("broken");
		}
		//then it updates delta (the time)
		this.body.update(delta);

		//calling the super
		//updating and returning
		this._super(me.Entity, "update", [delta]);
		return true;
	},

	loseHealth: function(damage){
		this.health = this.health - damage;
	},

	//for colliding
	onCollision: function(){

	}

});

//this is a class for the enemy base
//almost the same the class above
game.EnemyBaseEntity = me.Entity.extend({
	init : function (x, y, settings){
		this._super(me.Entity, 'init', [x, y, {
			image : "tower",
			width : 100,
			height : 100,
			spritewidth : "100",
			spriteheight : "100",
			getShape: function(){
				return (new me.Rect (0, 0, 70, 70)).toPolygon();
			}
		}]);
		this.broken = false;
		this.health = 10;
		this.alwaysUpdate = true;
		this.body.onCollision = this.onCollision.bind(this);

		this.type = "EnemyBaseEntity";

		//0 because is the not burning animation
		//1 is another animation
		//this.renderable.setCurrentAnimation("idle"); sets the animation when the tower is broken
		this.renderable.addAnimation("idle", [0]);
		this.renderable.addAnimation("broken", [1]);
		this.renderable.setCurrentAnimation("idle");

	},

	update:function(delta) {
		if(this.health<=0){
			this.broken = true;
			this.renderable.setCurrentAnimation("broken");
		}
		this.body.update(delta);

		this._super(me.Entity, "update", [delta]);
		return true;
	},

	onCollision: function(){

	},

	//this function runs so you can lose health
	loseHealth: function(){
		//this makes your health go down one
		this.health--;
	}

});

//class for the enemy
game.EnemyCreep = me.Entity.extend({
	//this is a function
	//you need x y and settings
	//super is reaching into the constructer of me.Entity you need settings
	//getShape function is returning a rectangle shape
	//the numbers of the width and height of the box
	init: function(x,y, settings){
		this._super(me.Entity, 'init', [x, y, {
			image: "creep1",
			width: 32,
			height: 64,
			spritewidth: "32",
			spriteheight: "64",
			getShape: function(){
				return (new me.Rect(0,0,32,64)).toPolygon();
			}
		}]);
		this.health = 10;
		this.alwaysUpdate = true;
		this.attacking = false;
		this.lastAttacking = new Date().getTime();
		this.lastHit = new Date().getTime();
		this.now = new Date().getTime();
		this.body.setVelocity(3,20);

		this.type = "EnemyCreep";

		this.renderable.addAnimation("walk", [3,4,5], 80);
		this.renderable.setCurrentAnimation("walk");
	},

	update: function(delta){
		this.now = new Date().getTime();
		//makes the character move
		this.body.vel.x -= this.body.accel.x * me.timer.tick;

		me.collision.check(this, true, this.collideHandler.bind(this), true);

		//then it updates delta (the time)
		this.body.update(delta);

		//calling the super
		//updating and returning
		this._super(me.Entity, "update", [delta]);
	},

	collideHandler: function(response){
		if(response.b.type==='PlayerBase'){
			this.attacking=true;
			//this.lastAttacking = this.now;
			this.body.vel.x = 0;
			this.pos.x = this.pos.x + 1;
			if((this.now-this.lastHit >=1000)){
				this.lastHit = this.now;
				response.b.loseHealth(1);
			}

		}
	}

});

//class for all the timers
//not an entity wont show up on the screen
game.GameManager = Object.extend({
	//constructor function
	 init: function (x, y, settings){
	 	//for time
	 	this.now = new Date().getTime;
	 	//last time made a creep happen
	 	this.lastCreep = new Date().getTime();

	 	//so it constantly updates
	 	this.alwaysUpdate = true;
	 },
	 update: function(){
	 	//keeping track of time
	 	this.now = new Date().getTime();

	 	//keeping track if you need creeps
	 	//math.round checks and makes sure that you have amultiple of ten
	 	//checking to be a sec  % checks if you have a multiple of ten
	 	//and checking if you spawn over and over again
	 	if(Math.round(this.now/1000)%10 ===0 && (this.now - this.lastCreep >= 1000)){
	 		//update last creep time
	 		this.lastCreep = this.now;
	 		//building a creep
	 		var creepe = me.pool.pull("EnemyCreep", 1000, 0, {});
	 		//adding creeps to the world
	 		me.game.world.addChild(creepe, 5);
	 	}

	 	return true;
	 }
});<|endoftext|>


<commit_before>const Promise = require('bluebird');
const Errors = require('common-errors');
const redisKey = require('../utils/key.js');
const jwt = require('../utils/jwt.js');
const getInternalData = require('../utils/getInternalData.js');
const userExists = require('../utils/userExists.js');
const handlePipeline = require('../utils/pipelineError.js');
const {
  USERS_INDEX,
  USERS_DATA,
  USERS_PUBLIC_INDEX,
  USERS_ACTIVE_FLAG,
  USERS_ALIAS_FIELD,
  USERS_USERNAME_FIELD,
  MAIL_ACTIVATE,
} = require('../constants.js');

// cache error
const Forbidden = new Errors.HttpStatusError(403, 'invalid token');

/**
 * @api {amqp} <prefix>.activate Activate User
 * @apiVersion 1.0.0
 * @apiName ActivateUser
 * @apiGroup Users
 *
 * @apiDescription This method allows one to activate user by 2 means: providing a username or encoded verification token.
 * When only username is provided, no verifications will be performed and user will be set to active. In contrary, `token`
 * would be verified. This allows for 2 scenarios: admin activating a user, or user completing verification challenge. In
 * case of success output would contain user object
 *
 * @apiParam (Payload) {String} username - currently email of the user
 * @apiParam (Payload) {String} token - if present, would be used against test challenge
 * @apiParam (Payload) {String} [remoteip] - not used, but is reserved for security log in the future
 * @apiParam (Payload) {String} [audience] - additional metadata will be pushed there from custom hooks
 *
 */
function verifyChallenge(request) {
  // TODO: add security logs
  // var remoteip = request.params.remoteip;
  const { token, username } = request.params;
  const { redis, config, log } = this;
  const audience = request.params.audience || config.defaultAudience;

  log.debug('incoming request params %j', request.params);

  // token verification
  const verifyToken = () => this.tokenManager
    .verify(token, {
      erase: config.validation.ttl > 0,
      control: {
        action: MAIL_ACTIVATE,
      },
    })
    .catchThrow(Forbidden)
    .get('id');

  function activateAccount(data) {
    const user = data.username;
    const alias = data[USERS_ALIAS_FIELD];
    const userKey = redisKey(user, USERS_DATA);

    // WARNING: `persist` is very important, otherwise we will lose user's information in 30 days
    // set to active & persist
    const pipeline = redis
      .pipeline()
      .hget(userKey, USERS_ACTIVE_FLAG)
      .hset(userKey, USERS_ACTIVE_FLAG, 'true')
      .persist(userKey)
      .sadd(USERS_INDEX, user);

    if (alias) {
      pipeline.sadd(USERS_PUBLIC_INDEX, user);
    }

    return pipeline
      .exec()
      .then(handlePipeline)
      .spread(function pipeResponse(isActive) {
        const status = isActive;
        if (status === 'true') {
          throw new Errors.HttpStatusError(417, `Account ${user} was already activated`);
        }
      });
  }

  function hook(user) {
    return this.hook.call(this, 'users:activate', user, audience);
  }

  return Promise
    .bind(this, username)
    .then(username ? userExists : verifyToken)
    .then(getInternalData)
    .get(USERS_USERNAME_FIELD)
    .tap(activateAccount)
    .tap(hook)
    .then(user => [user, audience])
    .spread(jwt.login);
}

module.exports = verifyChallenge;
<commit_msg>fix: this time make sure we use proper fields<commit_after>const Promise = require('bluebird');
const Errors = require('common-errors');
const redisKey = require('../utils/key.js');
const jwt = require('../utils/jwt.js');
const getInternalData = require('../utils/getInternalData.js');
const userExists = require('../utils/userExists.js');
const handlePipeline = require('../utils/pipelineError.js');
const {
  USERS_INDEX,
  USERS_DATA,
  USERS_PUBLIC_INDEX,
  USERS_ACTIVE_FLAG,
  USERS_ALIAS_FIELD,
  USERS_USERNAME_FIELD,
  MAIL_ACTIVATE,
} = require('../constants.js');

// cache error
const Forbidden = new Errors.HttpStatusError(403, 'invalid token');

/**
 * @api {amqp} <prefix>.activate Activate User
 * @apiVersion 1.0.0
 * @apiName ActivateUser
 * @apiGroup Users
 *
 * @apiDescription This method allows one to activate user by 2 means: providing a username or encoded verification token.
 * When only username is provided, no verifications will be performed and user will be set to active. In contrary, `token`
 * would be verified. This allows for 2 scenarios: admin activating a user, or user completing verification challenge. In
 * case of success output would contain user object
 *
 * @apiParam (Payload) {String} username - currently email of the user
 * @apiParam (Payload) {String} token - if present, would be used against test challenge
 * @apiParam (Payload) {String} [remoteip] - not used, but is reserved for security log in the future
 * @apiParam (Payload) {String} [audience] - additional metadata will be pushed there from custom hooks
 *
 */
function verifyChallenge(request) {
  // TODO: add security logs
  // var remoteip = request.params.remoteip;
  const { token, username } = request.params;
  const { redis, config, log } = this;
  const audience = request.params.audience || config.defaultAudience;

  log.debug('incoming request params %j', request.params);

  // token verification
  const verifyToken = () => this.tokenManager
    .verify(token, {
      erase: config.validation.ttl > 0,
      control: {
        action: MAIL_ACTIVATE,
      },
    })
    .catchThrow(Forbidden)
    .get('id');

  function activateAccount(data) {
    const user = data[USERS_USERNAME_FIELD];
    const alias = data[USERS_ALIAS_FIELD];
    const userKey = redisKey(user, USERS_DATA);

    // WARNING: `persist` is very important, otherwise we will lose user's information in 30 days
    // set to active & persist
    const pipeline = redis
      .pipeline()
      .hget(userKey, USERS_ACTIVE_FLAG)
      .hset(userKey, USERS_ACTIVE_FLAG, 'true')
      .persist(userKey)
      .sadd(USERS_INDEX, user);

    if (alias) {
      pipeline.sadd(USERS_PUBLIC_INDEX, user);
    }

    return pipeline
      .exec()
      .then(handlePipeline)
      .spread(function pipeResponse(isActive) {
        const status = isActive;
        if (status === 'true') {
          throw new Errors.HttpStatusError(417, `Account ${user} was already activated`);
        }
      })
      .return(user);
  }

  function hook(user) {
    return this.hook.call(this, 'users:activate', user, audience);
  }

  return Promise
    .bind(this, username)
    .then(username ? userExists : verifyToken)
    .then(getInternalData)
    .then(activateAccount)
    .tap(hook)
    .then(user => [user, audience])
    .spread(jwt.login);
}

module.exports = verifyChallenge;
<|endoftext|>


<commit_before>import React, { Fragment } from 'react'
import {
  Provider,
  Heading,
  Lead,
  Container,
  Flex,
  Box,
  Text,
  Subhead,
  Link as A
} from 'rebass'
import theme, { colors, cx, mx, mm } from '../theme'
import { Head, Link } from 'react-static'
import Nav from '../components/Nav'
import CTA from '../components/CTA'
import Icon from '../components/Icon'
import Section from '../components/Section'
import Footer from '../components/Footer'

const One = Section.extend`
  padding-top: 0 !important;
  background-color: ${cx('red.5')};
  background-image: linear-gradient(
    16deg,
    ${cx('orange.4')} 0%,
    ${cx('red.5')} 50%,
    ${cx('red.6')} 100%
  );
`
const Two = Section.extend`
  background-color: ${cx('violet.6')};
  background-image: linear-gradient(
    48deg,
    ${cx('violet.5')} 0%,
    ${cx('violet.6')} 50%,
    ${cx('indigo.4')} 100%
  );
`
const Three = Section.extend`
  background-color: ${cx('blue.6')};
  background-image: linear-gradient(
    -48deg,
    ${cx('blue.7')} 0%,
    ${cx('blue.6')} 50%,
    ${cx('indigo.4')} 100%
  );
`
const Four = Section.extend`
  background-color: ${cx('green.6')};
  background-image: linear-gradient(
    -32deg,
    ${cx('teal.7')} 0%,
    ${cx('lime.6')} 100%
  );
`

const Modules = Flex.extend.attrs({
  wrap: true,
  justify: 'center',
  mt: 3
})`
  max-width: 64rem;
  ${mm[1]} {
    text-align: left;
  }
`

const ModuleBase = Flex.extend.attrs({
  w: [1, 1 / 3],
  p: 2,
  direction: ['row', 'column'],
  align: ['flex-start', 'center']
})`
  img {
    width: 3rem !important;
    height: 3rem !important;
    flex-shrink: 0;
    margin-right: 1rem;
  }

  ${mx[1]} {
    max-width: 20rem;
    img { margin-right: 0; }
  }
`

const ModuleHeading = Subhead.extend.attrs({ mt: 0, mb: 1, f: 3 })``
const ModuleBody = Text.extend.attrs({ my: 0, f: 2 })`
  line-height: 1.5;
  position: relative;
`

const Module = ({ icon, heading, body, ...props }) => (
  <ModuleBase>
    <Icon name={icon} fill="white" />

      <ModuleHeading children={heading} />
      <ModuleBody children={body} />

  </ModuleBase>
)

const LeftCol = Flex.extend.attrs({
  direction: 'column',
  align: ['center', 'flex-end'],
  mr: [0, 4]
})`
  ${mx[1]} { text-align: right; }
`

const MeetingsLink = Box.extend.attrs({
  bg: 'white',
  color: 'blue.6',
  f: 4,
  px: 4,
  py: 3,
  my: 3
})`
  border-radius: 4rem;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
`

const CardBase = Container.extend.attrs({ bg: 'blue.0', p: 3, mt: 3 })`
  border-radius: .25rem;
  box-shadow: 0 2px 16px 2px rgba(0,0,0,.1);
  max-width: 28rem;
  text-align: left;

  ${mx[1]} { transform: rotate(2deg); }

  p {
    color: ${cx('slate')};
    font-size: 1rem;
    line-height: 1.375;
    margin-top: .5rem;
  }
`
const Card = ({ name, children, ...props }) => (
  <CardBase {...props}>
    <Subhead color="blue.6" m={0} f={3} children={name} />
    {children}
  </CardBase>
)

const CTASection = Box.extend.attrs({ is: 'section', p: 3, pb: 0 })`
  a {
    font-size: 1.5rem;
  }
`

export default () => (
  <Provider theme={theme}>

      <title>Start – Hack Club</title>

    <One>

      <Heading is="h1" f={[5, 6]} mt={[4, 5]}>
        Let’s get your Hack Club started.
      </Heading>
      <Heading f={[3, 4]} my={2} style={{ fontWeight: 'normal' }}>
        The awesome coding club at your high school is coming soon.
      </Heading>
    </One>
    <Two>
      <Heading f={[4, 5]}>Students: apply and start your club!</Heading>
      <Modules>
        <Module
          icon="assignment"
          heading="Submit your application"
          body="Fill out a few questions to get going—totally free."
        />
        <Module
          icon="ring_volume"
          heading="Training call"
          body="We’ll start getting to know you and making a plan for your club."
        />
        <Module
          icon="event_available"
          heading="Lead your club!"
          body="Schedule your first meeting, start marketing, and get ready!"
        />
      </Modules>
      <CTASection>
        <CTA to="/apply" bg="white" color="primary">
          Apply to Hack Club
        </CTA>
      </CTASection>
    </Two>
    <Three>
      <Flex direction={['column', 'row']} align="center">
        <LeftCol>
          <Heading f={[4, 5]}>Hack Clubs are student-led.</Heading>
          <Text f={[3, 4]}>
            Each club meets weekly after school
at their high school.
          </Text>
          <MeetingsLink is={Link} to="/meetings" mt={4}>
            See what clubs look like →
          </MeetingsLink>
        </LeftCol>
        <Card name="Are you a teacher or parent?">
          <Text>
            We hate to say it, but we’re currently only accepting applications
            from students.
          </Text>
          <Text>
            Teachers and parents can help by recruiting students, sharing Hack
            Club with the local PTA, and expressing interest in Hack Club to
            school administration.
          </Text>
          <Text>
            That said, shoot us an email at{' '}

              contact@hackclub.com
            {' '}
            and we’d really love to help where we can.
          </Text>
        </Card>
      </Flex>
    </Three>
    <Four>
      <Heading f={[4, 5]}>
        HQ provides the resources you’ll need to soar.
      </Heading>
      <Modules>
        <Module
          icon="forum"
          heading="Online community"
          body="Join our Slack and meet thousands of other club leaders and members."
        />
        <Module
          icon="chrome_reader_mode"
          heading="Curriculum"
          body="Give your members dozens of tutorials for making websites, apps, and games."
        />
        <Module
          icon="voice_chat"
          heading="Mentorship"
          body="Talk to our team for guidance and assistance whenever you need help."
        />
        <Module
          icon="description"
          heading="Structure & guidelines"
          body="Learn from hundreds of other clubs—we’ve got info, advice, and experience."
        />
        <Module
          icon="local_activity"
          heading="Local events"
          body="Attend hackathons, workshops, and other events from Hack Clubs nearby."
        />
        <Module
          icon="wallpaper"
          heading="Marketing"
          body="Get stickers, posters, and ideas for spreading the word about your club."
        />
      </Modules>
      <CTASection>
        <CTA to="/apply" bg="white" color="primary">
          Apply to Hack Club
        </CTA>
      </CTASection>
    </Four>

  </Provider>
)
<commit_msg>Convert Start page<commit_after>import React, { Fragment } from 'react'
import {
  ThemeProvider,
  Heading,
  Container,
  Flex,
  Box,
  Text,
  Button,
  LargeButton,
  Section as S,
  Link as A,
  Module,
  mediaQueries,
  cx
} from '@hackclub/design-system'
import { Head, Link } from 'react-static'
import Nav from '../components/Nav'
import Footer from '../components/Footer'

/* will be fixed in next DS release */
const Section = S.extend`
  flex-direction: column;
`
const One = Section.extend`
  padding-top: 0 !important;
  background-color: ${cx('red.5')};
  background-image: linear-gradient(
    16deg,
    ${cx('orange.4')} 0%,
    ${cx('red.5')} 50%,
    ${cx('red.6')} 100%
  );
`
const Two = Section.extend`
  background-color: ${cx('violet.6')};
  background-image: linear-gradient(
    48deg,
    ${cx('violet.5')} 0%,
    ${cx('violet.6')} 50%,
    ${cx('indigo.4')} 100%
  );
`
const Three = Section.extend`
  background-color: ${cx('blue.6')};
  background-image: linear-gradient(
    -48deg,
    ${cx('blue.7')} 0%,
    ${cx('blue.6')} 50%,
    ${cx('indigo.4')} 100%
  );
`
const Four = Section.extend`
  background-color: ${cx('green.6')};
  background-image: linear-gradient(
    -32deg,
    ${cx('teal.7')} 0%,
    ${cx('lime.6')} 100%
  );
`

const Modules = Flex.extend.attrs({
  wrap: true,
  justify: 'center',
  mt: 3
})`
  max-width: 64rem;
`

const CardBase = Container.extend.attrs({ bg: 'blue.0', p: 3, mt: 3 })`
  border-radius: .25rem;
  box-shadow: 0 2px 16px 2px rgba(0,0,0,.1);
  max-width: 28rem;
  text-align: left;

  ${mediaQueries[1]} { transform: rotate(2deg); }

  p {
    color: ${cx('slate')};
    font-size: 1rem;
    line-height: 1.375;
    margin-top: .5rem;
  }
`
const Card = ({ name, children, ...props }) => (
  <CardBase {...props}>
    <Heading.h3 color="blue.6" m={0} f={3} children={name} />
    {children}
  </CardBase>
)

Button.link = Button.withComponent(Link)
LargeButton.link = LargeButton.withComponent(Link)

export default () => (
  <ThemeProvider>

      <title>Start – Hack Club</title>

    <One>

      <Heading.h1 f={[5, 6]} mt={[4, 5]}>
        Let’s get your Hack Club started.
      </Heading.h1>
      <Heading.h2 f={[3, 4]} my={2} style={{ fontWeight: 'normal' }}>
        The awesome coding club at your high school is coming soon.
      </Heading.h2>
    </One>
    <Two>
      <Heading.h2 f={[4, 5]}>Students: apply and start your club!</Heading.h2>
      <Modules>
        <Module
          icon="assignment"
          heading="Submit your application"
          body="Fill out a few questions to get going—totally free."
        />
        <Module
          icon="ring_volume"
          heading="Training call"
          body="We’ll start getting to know you and making a plan for your club."
        />
        <Module
          icon="event_available"
          heading="Lead your club!"
          body="Schedule your first meeting, start marketing, and get ready!"
        />
      </Modules>
      <Box p={3} pb={0} align="center">
        <LargeButton.link to="/apply" inverted>
          Apply to Hack Club
        </LargeButton.link>
      </Box>
    </Two>
    <Three>
      <Flex flexDirection={['column', 'row']} align="center">
        <Container maxWidth={28} align={['center', 'right']} mr={[0, 4]}>
          <Heading.h2 f={[4, 5]}>Hack Clubs are student-led.</Heading.h2>
          <Text f={[3, 4]} my={1}>
            Each club meets weekly after school at their high school.
          </Text>
          <Button.link bg="info" my={3} inverted to="/meetings" mt={4}>
            See what clubs look like →
          </Button.link>
        </Container>
        <Card name="Are you a teacher or parent?">
          <Text m={0}>
            We hate to say it, but we’re currently only accepting applications
            from students.
          </Text>
          <Text m={0}>
            Teachers and parents can help by recruiting students, sharing Hack
            Club with the local PTA, and expressing interest in Hack Club to
            school administration.
          </Text>
          <Text m={0}>
            That said, shoot us an email at{' '}

              contact@hackclub.com
            {' '}
            and we’d really love to help where we can.
          </Text>
        </Card>
      </Flex>
    </Three>
    <Four>
      <Heading.h2 f={[4, 5]}>
        HQ provides the resources you’ll need to soar.
      </Heading.h2>
      <Modules>
        <Module
          icon="forum"
          heading="Online community"
          body="Join our Slack and meet thousands of other club leaders and members."
        />
        <Module
          icon="chrome_reader_mode"
          heading="Curriculum"
          body="Give your members dozens of tutorials for making websites, apps, and games."
        />
        <Module
          icon="voice_chat"
          heading="Mentorship"
          body="Talk to our team for guidance and assistance whenever you need help."
        />
        <Module
          icon="description"
          heading="Structure & guidelines"
          body="Learn from hundreds of other clubs—we’ve got info, advice, and experience."
        />
        <Module
          icon="local_activity"
          heading="Local events"
          body="Attend hackathons, workshops, and other events from Hack Clubs nearby."
        />
        <Module
          icon="wallpaper"
          heading="Marketing"
          body="Get stickers, posters, and ideas for spreading the word about your club."
        />
      </Modules>
      <Box align="center" mt={4}>
        <LargeButton.link to="/apply" inverted f={[3, 4]}>
          Apply to Hack Club
        </LargeButton.link>
      </Box>
    </Four>

  </ThemeProvider>
)
<|endoftext|>


<commit_before>// Copyright 2015 Yahoo! Inc.
// Copyrights licensed under the Mit License. See the accompanying LICENSE file for terms.

/**
 * @class scale
 * @module PNG
 * @submodule PNGCore
 * @constructor
 */
var scale = {};

/**
 * Write bytes when image is color and has already an alpha-channel
 *
 * @method _writeInColorAlphaBytes
 * @param {BufferedStream} output Output stream
 * @param {int[]} bytes Bytes that should be save to stream
 * @private
 */
scale._writeInColorAlphaBytes = function (output, bytes) {
	output.writeUInt8(bytes[0]);
	output.writeUInt8(bytes[1]);
	output.writeUInt8(bytes[2]);
	output.writeUInt8(bytes[3]);
};

/**
 * Write bytes when image is color and has no alpha-channel
 *
 * @method _writeInColorNoAlphaBytes
 * @param {BufferedStream} output Output stream
 * @param {int[]} bytes Bytes that should be save to stream
 * @private
 */
scale._writeInColorNoAlphaBytes = function (output, bytes) {
	output.writeUInt8(bytes[0]);
	output.writeUInt8(bytes[1]);
	output.writeUInt8(bytes[2]);
	output.writeUInt8(255);
};

/**
 * Write bytes when image is grayScale and has already an alpha-channel
 *
 * @method _writeInNoColorAlphaBytes
 * @param {BufferedStream} output Output stream
 * @param {int[]} bytes Bytes that should be save to stream
 * @private
 */
scale._writeInNoColorAlphaBytes = function (output, bytes) {
	output.writeUInt8(bytes[0]);
	output.writeUInt8(bytes[0]);
	output.writeUInt8(bytes[0]);
	output.writeUInt8(bytes[1]);
};

/**
 * Write bytes when image is grayScale and has no alpha-channel
 *
 * @method _writeInNoColorNoAlphaBytes
 * @param {BufferedStream} output Output stream
 * @param {int[]} bytes Bytes that should be save to stream
 * @private
 */
scale._writeInNoColorNoAlphaBytes = function (output, bytes) {
	output.writeUInt8(bytes[0]);
	output.writeUInt8(bytes[0]);
	output.writeUInt8(bytes[0]);
	output.writeUInt8(255);
};

/**
 * Write bytes when image is indexed on a palette
 *
 * @method _writeInIndexedBytes
 * @param {BufferedStream} output Output stream
 * @param {int[]} bytes Bytes that should be save to stream
 * @private
 */
scale._writeInIndexedBytes = function (output, bytes) {
	output.writeUInt8(bytes[0]);
	output.writeUInt8(0);
	output.writeUInt8(0);
	output.writeUInt8(255);
};

/**
 * Scales the image data up
 *
 * @static
 * @method scaleUp
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {function} spreadFn Function that will be called to save the bytes to the stream
 * @param {boolean} isColor Is data in color?
 * @param {boolean} hasAlphaChannel Does  data have an alpha-channel?
 * @param {boolean} isIndexedColor Is image indexed on a palette?
 * @param {boolean} [twoBytes=false] When set, reads 16-bit instead of 8-bit
 */
scale.scaleUp = function (input, output, spreadFn, isColor, hasAlphaChannel, isIndexedColor, twoBytes) {

	var i, len,
		value,
		bytes = [],
		bytesNeeded,
		method,
		increment = 1,
		currentBytes;

	if (isIndexedColor) {
		bytesNeeded = 1;
		method = '_writeInIndexedBytes';

	} else {

		if (isColor) {
			if (hasAlphaChannel) {
				bytesNeeded = 4;
				method = '_writeInColorAlphaBytes';
			} else {
				bytesNeeded = 3;
				method = '_writeInColorNoAlphaBytes';
			}
		} else {
			if (hasAlphaChannel) {
				bytesNeeded = 2;
				method = '_writeInNoColorAlphaBytes';
			} else {
				bytesNeeded = 1;
				method = '_writeInNoColorNoAlphaBytes';
			}
		}
	}

	if (twoBytes) {
		increment = 2;
	}

	for(i = 0, len = input.length; i < len; i += increment) {

		if (twoBytes) {
			value = input.readUInt16BE();
		} else {
			value = input.readUInt8();
		}

		spreadFn(value, bytes);

		while (bytes.length >= bytesNeeded) {
			currentBytes = bytes.splice(0, bytesNeeded);
			this[method](output, currentBytes);
		}
	}
};

/**
 * Converts a 1-bit stream to 8-bit
 *
 * @static
 * @method scale1to8bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {boolean} isColor Is data in color?
 * @param {boolean} hasAlphaChannel Does  data have an alpha-channel?
 * @param {boolean} isIndexedColor Is image indexed on a palette?
 * @param {number} paddingAt Defines the position of padding within each scanline
 */
scale.scale1to8bit = function (input, output, isColor, hasAlphaChannel, isIndexedColor, paddingAt) {

	var scaleFactor = isIndexedColor ? 1 : 255, // 255 / 1
		byteCounter = 0;

	this.scaleUp(input, output, function (value, bytes) {

		bytes.push(((value >> 7) & 1) * scaleFactor);
		bytes.push(((value >> 6) & 1) * scaleFactor);
		bytes.push(((value >> 5) & 1) * scaleFactor);
		bytes.push(((value >> 4) & 1) * scaleFactor);
		bytes.push(((value >> 3) & 1) * scaleFactor);
		bytes.push(((value >> 2) & 1) * scaleFactor);
		bytes.push(((value >> 1) & 1) * scaleFactor);
		bytes.push((value & 1) * scaleFactor);

		// Make sure that padding is removed
		if (paddingAt) {
			byteCounter += 8;
			if (byteCounter >= paddingAt) {
				if (byteCounter > paddingAt) {
					bytes.splice(-(byteCounter - paddingAt));
				}
				byteCounter = 0;
			}
		}

	}, isColor, hasAlphaChannel, isIndexedColor);
};

/**
 * Converts a 2-bit stream to 8-bit
 *
 * @static
 * @method scale2to8bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {boolean} isColor Is data in color?
 * @param {boolean} hasAlphaChannel Does  data have an alpha-channel?
 * @param {boolean} isIndexedColor Is image indexed on a palette?
 * @param {number} paddingAt Defines the position of padding within each scanline
 */
scale.scale2to8bit = function (input, output, isColor, hasAlphaChannel, isIndexedColor, paddingAt) {

	var scaleFactor = isIndexedColor ? 1 : 255 / 3,
		byteCounter = 0;

	this.scaleUp(input, output, function (value, bytes) {

		bytes.push(((value >> 6) & 3) * scaleFactor);
		bytes.push(((value >> 4) & 3) * scaleFactor);
		bytes.push(((value >> 2) & 3) * scaleFactor);
		bytes.push((value & 3) * scaleFactor);

		// Make sure that padding is removed
		if (paddingAt) {
			byteCounter += 4;
			if (byteCounter >= paddingAt) {
				if (byteCounter > paddingAt) {
					bytes.splice(-(byteCounter - paddingAt));
				}
				byteCounter = 0;
			}
		}

	}, isColor, hasAlphaChannel, isIndexedColor);
};

/**
 * Converts a 4-bit stream to 8-bit
 *
 * @static
 * @method scale4to8bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {boolean} isColor Is data in color?
 * @param {boolean} hasAlphaChannel Does  data have an alpha-channel?
 * @param {boolean} isIndexedColor Is image indexed on a palette?
 * @param {number} paddingAt Defines the position of padding within each scanline
 */
scale.scale4to8bit = function (input, output, isColor, hasAlphaChannel, isIndexedColor, paddingAt) {

	var scaleFactor = isIndexedColor ? 1 : 255 / 15,
		byteCounter = 0;

	this.scaleUp(input, output, function (value, bytes) {

		bytes.push(((value >> 4) & 15) * scaleFactor);
		bytes.push((value & 15) * scaleFactor);

		// Make sure that padding is removed
		if (paddingAt) {
			byteCounter += 2;
			if (byteCounter >= paddingAt) {
				if (byteCounter > paddingAt) {
					bytes.splice(-(byteCounter - paddingAt));
				}
				byteCounter = 0;
			}
		}

	}, isColor, hasAlphaChannel, isIndexedColor);
};

/**
 * Converts a 8-bit stream to 8-bit
 *
 * @static
 * @method scale8to8bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {boolean} isColor Is data in color?
 * @param {boolean} hasAlphaChannel Does  data have an alpha-channel?
 * @param {boolean} isIndexedColor Is image indexed on a palette?
 */
scale.scale8to8bit = function (input, output, isColor, hasAlphaChannel, isIndexedColor) {

	this.scaleUp(input, output, function (value, bytes) {
		bytes.push(value);
	}, isColor, hasAlphaChannel, isIndexedColor);
};

/**
 * Converts a 16-bit stream to 8-bit (lossy)
 *
 * @static
 * @method scale16to8bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {boolean} isColor Is data in color?
 * @param {boolean} hasAlphaChannel Does  data have an alpha-channel?
 * @param {boolean} isIndexedColor Is image indexed on a palette?
 */
scale.scale16to8bit = function (input, output, isColor, hasAlphaChannel, isIndexedColor) {

	var scaleFactor = isIndexedColor ? 1 : 255 / 65535;

	this.scaleUp(input, output, function (value, bytes) {
		bytes.push(Math.floor((value * scaleFactor) + 0.5));
	}, isColor, hasAlphaChannel, isIndexedColor, true);
};

/**
 * Converts a 8-bit stream to 1-bit
 *
 * @static
 * @method scale8to1bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 */
scale.scale8to1bit = function (input, output) {

	var scaleFactor = 1 / 255;

	for(var i = 0, len = input.length; i < len; i += 8) {
		output.writeUInt8(
			Math.floor((((input.readUInt8() & 1) << 7) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 6) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 5) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 4) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 3) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 2) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 1) * scaleFactor) + 0.5),
			Math.floor(((input.readUInt8() & 1) * scaleFactor) + 0.5)
		);
	}
};

/**
 * Converts a 8-bit stream to 2-bit
 *
 * @static
 * @method scale8to2bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 */
scale.scale8to2bit = function (input, output) {

	var scaleFactor = 3 / 255;

	for(var i = 0, len = input.length; i < len; i += 4) {
		output.writeUInt8(
			Math.floor((((input.readUInt8() & 3) << 6) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 3) << 4) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 3) << 2) * scaleFactor) + 0.5),
			Math.floor(((input.readUInt8() & 3) * scaleFactor) + 0.5)
		);
	}
};

/**
 * Converts a 8-bit stream to 4-bit
 *
 * @static
 * @method scale8to4bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 */
scale.scale8to4bit = function (input, output) {

	var scaleFactor = 15 / 255;

	for(var i = 0, len = input.length; i < len; i += 2) {
		output.writeUInt8(
			Math.floor((((input.readUInt8() & 15) << 4) * scaleFactor) + 0.5),
			Math.floor(((input.readUInt8() & 15) * scaleFactor) + 0.5)
		);
	}
};

/**
 * Converts a 8-bit stream to 16-bit
 *
 * @static
 * @method scale8to16bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 */
scale.scale8to16bit = function (input, output) {

	var i, len,
		value,
		scaleFactor = 65535 / 255;

	for(i = 0, len = input.length; i < len; i++) {
		value = input.readUInt8();
		output.writeUInt16BE(value * scaleFactor);
	}
};

/**
 * Duplicates bytes in a stream
 *
 * @static
 * @method duplicate
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {int} duplication Number of times the bytes should be duplicated
 */
scale.duplicate = function (input, output, duplication) {

	var i, j, len,
		value;

	for(i = 0, len = input.length; i < len; i++) {

		value = input.readUInt8();

		for(j = 0; j < duplication; j++) {
			output.writeUInt8(value);
		}
	}
};

/**
 * Reduces bytes in a stream by calculating its average
 *
 * @static
 * @method reduce
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {int} reduction Number of bytes the average should be calculated from
 */
scale.reduce = function (input, output, reduction) {

	var i, j, len,
		sum;

	for(i = 0, len = input.length; i < len; i++) {

		sum = 0;
		for(j = 0; j < reduction; j++) {
			sum += input.readUInt8();
		}

		output.writeUInt8(Math.floor((sum / reduction) + 0.5));
	}
};

/**
 * Injects every x number of bytes a value
 *
 * @static
 * @method inject
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {int} every Number of bytes to ignore before injection
 * @param {int} value Value to inject
 */
scale.inject = function (input, output, every, value) {

	var i, j, len;

	for(i = 0, len = input.length; i < len; i += every) {

		for(j = 0; j < every; j++) {
			output.writeUInt8(input.readUInt8());
		}

		output.writeUInt8(value);
	}
};

/**
 * Withdraws every x number of bytes one byte
 *
 * @static
 * @method withdraw
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {int} every Number of bytes to ignore for withdrawal
 */
scale.withdraw = function (input, output, every) {

	var i, j, len;

	for(i = 0, len = input.length; i < len; i += every - 1) {

		for(j = 0; j < every - 1; j++) {
			output.writeUInt8(input.readUInt8());
		}

		input.readUInt8(); // Ignore
	}
};

module.exports = scale;
<commit_msg>Remove unneeded methods for scaling<commit_after>// Copyright 2015 Yahoo! Inc.
// Copyrights licensed under the Mit License. See the accompanying LICENSE file for terms.

/**
 * @class scale
 * @module PNG
 * @submodule PNGCore
 * @constructor
 */
var scale = {};

/**
 * Converts a 8-bit stream to 1-bit
 *
 * @static
 * @method scale8to1bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 */
scale.scale8to1bit = function (input, output) {

	var scaleFactor = 1 / 255;

	for(var i = 0, len = input.length; i < len; i += 8) {
		output.writeUInt8(
			Math.floor((((input.readUInt8() & 1) << 7) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 6) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 5) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 4) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 3) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 2) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 1) << 1) * scaleFactor) + 0.5),
			Math.floor(((input.readUInt8() & 1) * scaleFactor) + 0.5)
		);
	}
};

/**
 * Converts a 8-bit stream to 2-bit
 *
 * @static
 * @method scale8to2bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 */
scale.scale8to2bit = function (input, output) {

	var scaleFactor = 3 / 255;

	for(var i = 0, len = input.length; i < len; i += 4) {
		output.writeUInt8(
			Math.floor((((input.readUInt8() & 3) << 6) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 3) << 4) * scaleFactor) + 0.5),
			Math.floor((((input.readUInt8() & 3) << 2) * scaleFactor) + 0.5),
			Math.floor(((input.readUInt8() & 3) * scaleFactor) + 0.5)
		);
	}
};

/**
 * Converts a 8-bit stream to 4-bit
 *
 * @static
 * @method scale8to4bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 */
scale.scale8to4bit = function (input, output) {

	var scaleFactor = 15 / 255;

	for(var i = 0, len = input.length; i < len; i += 2) {
		output.writeUInt8(
			Math.floor((((input.readUInt8() & 15) << 4) * scaleFactor) + 0.5),
			Math.floor(((input.readUInt8() & 15) * scaleFactor) + 0.5)
		);
	}
};

/**
 * Converts a 8-bit stream to 16-bit
 *
 * @static
 * @method scale8to16bit
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 */
scale.scale8to16bit = function (input, output) {

	var i, len,
		value,
		scaleFactor = 65535 / 255;

	for(i = 0, len = input.length; i < len; i++) {
		value = input.readUInt8();
		output.writeUInt16BE(value * scaleFactor);
	}
};

/**
 * Reduces bytes in a stream by calculating its average
 *
 * @static
 * @method reduce
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {int} reduction Number of bytes the average should be calculated from
 */
scale.reduce = function (input, output, reduction) {

	var i, j, len,
		sum;

	for(i = 0, len = input.length; i < len; i++) {

		sum = 0;
		for(j = 0; j < reduction; j++) {
			sum += input.readUInt8();
		}

		output.writeUInt8(Math.floor((sum / reduction) + 0.5));
	}
};

/**
 * Withdraws every x number of bytes one byte
 *
 * @static
 * @method withdraw
 * @param {BufferedStream} input Input stream
 * @param {BufferedStream} output Output stream
 * @param {int} every Number of bytes to ignore for withdrawal
 */
scale.withdraw = function (input, output, every) {

	var i, j, len;

	for(i = 0, len = input.length; i < len; i += every - 1) {

		for(j = 0; j < every - 1; j++) {
			output.writeUInt8(input.readUInt8());
		}

		input.readUInt8(); // Ignore
	}
};

module.exports = scale;
<|endoftext|>