Choc Voxel Demo

HTML

<html class='no-js' lang='en'>
  <head>
      <link href='http://www.fullstack.io/choc/components/normalize-css/normalize.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/components/codemirror/lib/codemirror.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/components/components-foundation/css/foundation.min.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/components/jquery-ui/themes/ui-lightness/jquery-ui.min.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/styles/choc.css' rel='stylesheet'>
    <link href='http://www.fullstack.io/choc/styles/choc-editor.css' rel='stylesheet'>
    <script src='http://www.fullstack.io/choc/components/jquery/jquery.min.js'></script>
    <script src='http://www.fullstack.io/choc/components/spin.js/dist/spin.min.js'></script>
    <script src='http://www.fullstack.io/choc/components/components-foundation/js/foundation.min.js'></script>
    <script src='http://www.fullstack.io/choc/components/codemirror/lib/codemirror.js'></script>
    <script src='http://www.fullstack.io/choc/components/codemirror/mode/javascript/javascript.js'></script>
    <script src='http://www.fullstack.io/choc/components/codemirror-interactive-numbers/dist/codemirror-interactive-numbers.browser.js'></script>
    <script src='http://www.fullstack.io/choc/scripts/vendor/custom.modernizr.js'></script>
    <script src='http://www.fullstack.io/choc/scripts/vendor/jquery-ui-1.10.3.custom.js'></script>
    <script src='http://www.fullstack.io/choc/scripts/vendor/jquery.ui.touch-punch.min.js'></script>
    <script src='http://www.fullstack.io/choc/scripts/vendor/two.js'></script>

    <script src='http://www.fullstack.io/choc/components/choc/dist/choc.browser.js'></script>
  </head>
  <body>
    <script src='http://www.fullstack.io/choc/scripts/vendor/voxel-garden.js'></script>  
    
    <div class="voxel">
      <div class='choc-wrapper'>
        <div class='canvas-container'>
          <div...

CSS

.choc-wrapper {
  padding: 2em;
}

CoffeeScript

startVoxelDemo = (onLoaded) ->
  onLoaded ||= () ->

  container = document.getElementById("game")
  window.game = game = ChocGame(
    container: container
    texturePath: "http://www.fullstack.io/choc/images/textures/"
    playerSkin: "http://www.fullstack.io/choc/images/textures/substack.png"
  )
  game.paused = false
  game.createTree({ 
    position: {x: 0, y: 14, z: 0},
    bark: 5
    leaves: 4
  })
  # setTimeout((() -> game.createTree({bark: 5, leaves: 4})), 100) for [1..10]

  window.avatar.yaw.position.set 2, 28, 18 
  window.avatar.pitch.rotation = new game.THREE.Vector3(-0.44, 0, 0)

  newBlocks = []

  setBlock = (pos, type) ->
    type = switch type 
      when "clear" then 0 
      when "grass" then 1 
      when "brick" then 2
      when "bark" then 3
      when "leaves" then 4
      else type
    newBlocks.push [pos, game.getBlock(pos)] 
    game.setBlock(pos, type)

  setBlock.__choc_annotation = (args) ->
    [pos, type] = args
    posStr = _.map(pos, (p) -> "<span class='choc-variable'>#{p}</span>").join(", ")
    "set (#{posStr}) to #{type}"

  clearNewBlocks = () ->
    for item in newBlocks.reverse()
      [pos,type] = item
      game.setBlock(pos, type)
    newBlocks = []

  # notes: use Math.round y to fix the bug
  # left the bug in to show how one can use choc to find these sorts of bugs
  code = """
var material = "brick";
var radius = 3;
var floor = 14;
var height = 10;
var x = 0;
var y = floor;
var z = 0;
var l = radius * Math.cos(Math.PI / 4);
while( y <= height+floor) {
  while( x <= l ) {
    z = Math.sqrt((radius*radius) - (x*x));
    setBlock([x, y, z], material);
    setBlock([x, y, -z], material);
    setBlock([-x, y, z], material);
    setBlock([-x, y, -z], material);

    setBlock([z, y, x], material);
    setBlock([z, y, -x], material);
    setBlock([-z, y, x], material);
    setBlock([-z, y, -x], material);
    x = x + 1;
  }
  x = 0;
  y = y + 1;
}


  """

  editor = new window.choc.Editor({
    $: $
    id:...