Merge pull request #6 from DrkCloudStrife/cleanup-projects-page

Cleanup projects page

Gemfile

@@ -7,7 +7,7 @@ gem 'rails', '4.2.8'
 gem 'uglifier', '>= 1.3.0'
 
 # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
-gem 'turbolinks'
+gem 'turbolinks', '~> 2.5.3'
 
 # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
 gem 'spring', group: :development

Gemfile.lock

@@ -176,7 +176,7 @@ DEPENDENCIES
   sass-rails (~> 4.0.5)
   spring
   thin (~> 1.6.3)
-  turbolinks
+  turbolinks (~> 2.5.3)
   uglifier (>= 1.3.0)
 
 RUBY VERSION

app/assets/javascripts/application.js

@@ -13,4 +13,3 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
-//= require_tree .

app/assets/javascripts/projects/config.coffee

@@ -3,5 +3,6 @@
 #= require_tree ./utils
 
 window.DrkStrife ||= {}
+window.DrkStrife.config ||= {}
 window.DrkStrife.games ||= {}
 window.DrkStrife.utils ||= {}

app/assets/javascripts/projects/maze.coffee

@@ -13,6 +13,7 @@ class DrkStrife.games.Maze
     @config = DrkStrife.utils.extend(@config, options)
     @config.mazeStart = DrkStrife.utils.generateLocationZone(@config.wallSize, @config.mazeWalls)
     @config.mazeEnd   = DrkStrife.utils.generateExitZone(@config.wallSize, @config.mazeWalls, @config.mazeStart)
+    @config.isSupported = DrkStrife.utils.browserDetection() is 'Web Browser'
 
     @viewport = document.getElementById('viewport')
     @walls= []
@@ -24,7 +25,10 @@ class DrkStrife.games.Maze
     )
 
     #launching game
-    @play()
+    if @config.isSupported
+      @play()
+    else
+      @notSupported()
 
   score: 0
 
@@ -83,6 +87,10 @@ class DrkStrife.games.Maze
       @config.mazeWalls + ' x ' + @config.mazeWalls
     ]
 
+  notSupported: ->
+    notSupported = document.createElement('p')
+    notSupported.innerHTML = "We currently do not support this platform"
+    @viewport.appendChild notSupported
 
   paintBlock: (x, y, color, type='wall')->
     return console.error 'x must be defined' if x is null
@@ -150,3 +158,7 @@ DrkStrife.utils.generateExitZone = (size, limit, start)->
 DrkStrife.utils.checkNeighbor = (location, collection)->
   if location
     return
+
+# prepare on page load.
+$ ->
+  window.app = new DrkStrife.games.Maze()

app/assets/javascripts/projects/snake.coffee

@@ -0,0 +1,241 @@
+#= require ./config
+
+# The objective of the game is to eat pills without colliding with self or walls
+#
+# As snake eats pills, snake increases in size
+# When snake eats pill, the game will increase snake movement speed
+# When snake collides with self is game over
+# When snake collides with wall is game over
+
+class DrkStrife.games.Snake
+  # speed controls
+  gameFPS: 60
+  currentFPS: 0
+  gameSpeed: 10
+  gameMaxSpeed: 25
+  speedDidChange: false
+
+  # canvas dimensions (px)
+  boardWidth: 600
+  boardHeight: 400
+  cellWidth: 10
+
+  # default settings
+  snakeLength: 4
+  snakeCells: []
+  userScore: 0
+  direction: 'right'
+  isMoving: false
+
+  # game colors
+  boardBackground: '#FFF'
+  boardBorder: '#000'
+  snakeColor: '#0B6274'
+  snakeBorder: '#FFF'
+  pillColor: '#D0342D'
+  pillBorder: '#FFF'
+  textColor: '#333'
+
+  constructor: (elementID)->
+    @$el = $(elementID)
+    @_buildCanvas()
+
+    @$canvas.attr('tabindex',0)
+    @$canvas.on('focus', @play)
+    @$canvas.on('blur', @pause)
+    @$canvas.on('keydown', @_toggleMovement)
+
+    @$canvas.attr('contentEditable', true)
+    @$canvas[0].contentEditable = true
+
+  # Builds the board and game assets
+  startGame: ()->
+    @resetGame()
+    @_buildSnake()
+    @_createPill()
+    @draw()
+
+  # Starts updating game and rendering
+  play: ()=>
+    @_refreshRateIntervalId = setInterval(@loop, 1000 / @gameFPS) # 60 fps
+    @_gameSpeedIntervalId   = setInterval(@update, 1000 / @gameSpeed)
+
+  # Pauses the game from updating and rendering
+  pause: ()=>
+    clearInterval(@_refreshRateIntervalId) if @_refreshRateIntervalId
+    clearInterval(@_gameSpeedIntervalId) if @_gameSpeedIntervalId
+
+  # Draws into canvas what is currently happening in the game
+  draw: ()->
+    @_drawBoard()
+    @_drawSnake()
+    @_drawPill()
+
+  # Resets the snake game to it's starting configuration
+  resetGame: ()->
+    @pause()
+    @snakeLength = 4
+    @snakeCells = []
+    @userScore = 0
+    @direction = 'right'
+    @isMoving = false
+
+  # Builds a canvas where our snake game will live
+  _buildCanvas: ()->
+    @$canvas  = $('<canvas>')
+    canvas   = @$canvas[0]
+    @context = canvas.getContext('2d')
+
+    canvas.width = @boardWidth
+    canvas.height = @boardHeight
+
+    @$el.html(canvas)
+
+  # Builds the snake in memory so we can keep track of it in the canvas
+  _buildSnake: ()->
+    i = @snakeLength - 1
+    while i >= 0
+      @snakeCells.push({ x: i, y: 0 })
+      i--
+
+  # Creates the pill, or food for the snake to eat in memory so we can keep
+  # track of it when drawing on canvas
+  _createPill: ()->
+    @pill =
+      x: Math.round(Math.random() * (@boardWidth - @cellWidth) / @cellWidth)
+      y: Math.round(Math.random() * (@boardHeight - @cellWidth) / @cellWidth)
+
+  #### Canvas Drawings ####
+
+  # Draws the game board to the canvas
+  _drawBoard: ()->
+    @context.fillStyle = @boardBackground
+    @context.fillRect(0, 0, @boardWidth, @boardHeight)
+    @context.strokeStyle = @boardBorder
+    @context.strokeRect(0, 0, @boardWidth, @boardHeight)
+
+  # Draws the snake to the canvas
+  _drawSnake: ()->
+    i = @snakeCells.length - 1
+    while i >= 0
+      cell = @snakeCells[i]
+      @_drawCell(cell.x, cell.y)
+      i--
+
+  # Checks that the pill is not colliding with the current location of the
+  # snake and then renders it, otherwise it will search for a new location
+  # where to place the pill
+  _drawPill: ()->
+    if @snakeCells.indexOf(@pill) isnt -1
+      @_createPill()
+      return @_drawPill()
+
+    @_drawCell(@pill.x, @pill.y, @pillColor, @pillBorder)
+
+  # Draws a square on the board
+  _drawCell: (x, y, color=@snakeColor, border=@snakeBorder)->
+    posX = x * @cellWidth
+    posY = y * @cellWidth
+
+    @context.fillStyle = color
+    @context.fillRect(posX, posY, @cellWidth, @cellWidth)
+    @context.strokeStyle = border
+    @context.strokeRect(posX, posY, @cellWidth, @cellWidth)
+
+  #### End of drawings ####
+
+  # Game Controls
+  # TODO: if snake direction is changing, we should also queue the upcoming
+  # movement to ensure the 180 degree takes effect if for some reason the
+  # game fails to update the snake movement in time prior to the second
+  # keystroke. i.e. If snake is going down, and user wants snake to go upward
+  # instead, they would have to press left or right and up. If l/r is still
+  # pending, we have to queue up and vice versa to ensure the 180 turn works
+  # without causing collision.
+  _toggleMovement: (e)=>
+    e.preventDefault
+
+    key = parseInt(e.keyCode)
+    return false if @isMoving
+
+    # Here we check which arrow key the user pressed and check that the snake
+    # is not going the opposite direction so it doesn't collide with itself
+    # causing an instant game over.
+    newDirection = switch
+      when key is 37 and @direction isnt 'right' then 'left' # left key is pressed
+      when key is 39 and @direction isnt 'left' then 'right' # right key is pressed
+      when key is 38 and @direction isnt 'down' then 'up'    # up key is pressed
+      when key is 40 and @direction isnt 'up' then 'down'    # down key is pressed
+      when key is 27 or key is 9
+        @$canvas.blur()
+        false
+      else false
+
+    if typeof newDirection isnt 'undefined' and newDirection isnt @direction and newDirection isnt false
+      @direction = newDirection
+      @isMoving  = true
+
+    return false # used to prevent page scrolling
+
+  # Logic to move the snake within the grid of the canvas
+  moveSnake: ()->
+    snakeHeadXPosition = @snakeCells[0].x
+    snakeHeadYPosition = @snakeCells[0].y
+
+    switch @direction
+      when 'right' then snakeHeadXPosition++
+      when 'left' then snakeHeadXPosition--
+      when 'up' then snakeHeadYPosition--
+      when 'down' then snakeHeadYPosition++
+
+    newPosition = {
+      x: snakeHeadXPosition
+      y: snakeHeadYPosition
+    }
+
+    @validate(newPosition)
+
+    if newPosition.x is @pill.x and newPosition.y is @pill.y
+      @_createPill()
+    else
+      @snakeCells.pop()
+
+    # TODO: Add scoring
+    @snakeCells.unshift(newPosition)
+
+    @isMoving = false if @isMoving is true
+
+  # Validations of snake position
+  # Should end game if snake is out of bound
+  # Should end game if snake collides with self
+  validate: (nextPosition)->
+    endGame = false
+    nx = nextPosition.x
+    ny = nextPosition.y
+
+    # check out of bound
+    endGame = true if nx <= -1 or ny <= -1
+    endGame = true if nx >= (@boardWidth / @cellWidth)
+    endGame = true if ny >= (@boardHeight / @cellWidth)
+
+    # check snake collision
+    i = 0
+    while i < @snakeCells.length
+      cells = @snakeCells[i]
+      endGame = true if cells.x is nx and cells.y is ny
+      i++
+
+    # TODO: Add end game view
+    @pause() if endGame
+
+  # Updates the snake position,
+  update: ()=>
+    @moveSnake()
+
+  loop: ()=>
+    @draw()
+
+
+$ ->
+  window.app = new DrkStrife.games.Snake('#viewport')
+  app.startGame()

app/assets/javascripts/projects/utils/browser_detection.coffee

@@ -0,0 +1,24 @@
+DrkStrife.utils.browserDetection = ->
+  userAgent = window.navigator.userAgent
+
+  @mobileDetector = (userAgent)->
+    switch true
+      when /Android/i.test(userAgent)
+        # get Android version
+        'Android'
+      when /iPhone|iPad|iPod/i.test(userAgent)
+        # get iOS version
+        'iOS'
+      when /BlackBerry/i.test(userAgent)
+        'BlackBerry'
+      when /IEMobile|Windows Phone/i.test(userAgent)
+        'Windows Phone'
+
+
+  # check for mobile devices
+  if /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Windows Phone/i.test(userAgent)
+    return @mobileDetector(userAgent)
+
+  # check for browser type
+  if /opera|chrome|safari|firefox|msie/i.test(userAgent)
+    return 'Web Browser'

app/assets/stylesheets/global.scss

@@ -2,7 +2,7 @@ html, body {
   position: relative;
   height: 100%;
   font-family: sans-serif, 'Droid Serif';
-  color: #707070;
+  color: #333;
 }
 
 body {
@@ -21,13 +21,13 @@ body {
   }
 
   a {
-    color: #989898;
+    color: #333;
     &:hover{
-      color: #9f9f9f;
+      color: #3a3a3a;
       text-decoration: none;
     }
     &:active, &.active {
-      color: #707070;
+      color: #444;
       text-decoration: none;
     }
   }

app/assets/stylesheets/layout/header.scss

@@ -2,8 +2,8 @@ header {
 
   h1, h2, h3 {
     &.title {
-      font-size: 200%;
-      line-height: 200%;
+      font-size: 2em;
+      line-height: 1.5em;
     }
   }
 
@@ -14,7 +14,7 @@ header {
   &.text-header {
     font-weight: bold;
     h1 { font-size: 175%; }
-    h2 { font-size: 175%; }
-    h3 { font-size: 150%; }
+    h2 { font-size: 150%; }
+    h3 { font-size: 125%; }
   }
 }