emilwidlund

{App, View, Focusable, Grid} = require 'joystick'

class CardCarousel extends ScrollComponent
    constructor: (properties={}) ->
        super properties

        @content.clip = properties.clip;

        app.on 'change:focusedElement', (focusable) =>
            if focusable && focusable.parent == @content

emilwidlund

{Grid} = require 'joystick'

new Layer
    width: Grid.getWidth(2) # We're asking for 2 columns. That will include 1 gutter as well. Result: 135px
    height: Grid.getHeight(10) # We're asking for 10 rows. Result: 100px

emilwidlund

Gamepad.on 'gamepadevent', (e) ->
    switch e.keyCode
        when 39
            print 'Stick going right'
        when 37
            print 'Stick going left'
        when 40
            print 'Stick going down'
        when 38
            print 'Stick going up'

emilwidlund

{App, View, Gamepad, Focusable, Transitions, Grid} = require 'joystick'

homeView = new View
    background:
        backgroundColor: '#eaeaea'

for index in [0..2]
    new Focusable
        parent: homeView.safezone
        x: 300 * index

emilwidlund

{App, View, Gamepad, Focusable, Transitions, Grid} = require 'joystick'

homeView = new View
    background:
        backgroundColor: '#eaeaea'

for index in [0..2]
    new Focusable
        parent: homeView.safezone
        x: 300 * index

emilwidlund

{App, View, Gamepad, Focusable, Transitions, Grid} = require 'joystick'

homeView = new View
  background:
    backgroundColor: '#eaeaea'

myApp = new App
myApp.transitionToView(homeView)

emilwidlund

class Grid {
    constructor() {
        this.columns = 24;
        this.columnWidth = 62;
        this.columnGutter = 10;
        this.rowHeight = 10;
        
        this.safezoneWidth = 1718;
        this.safezoneHeight = 970;
    }

emilwidlund

new Focusable({
  width: 100,
  height: 100,
  backgroundColor: 'rgba(0, 0, 0, .66)',
  animationOptions: {
    time: .2,
    curve: 'ease-out'
  },
  focusProperties: {
    backgroundColor: '#fff',