index.html.haml

%html{:xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "en", :lang => "en"}
  %head
    %link{rel: 'stylesheet', href: 'css/style.css', type: 'text/css'}
    %script{src: 'scripts/bundle.js'}
  %body
    .hud
      .options
        %ul.config.collapsed
          %li
            %input.submit{type: :submit, value: 'Generate'}
            .toggle
              options
            .toggle.hidden
              collapse
          %li.bag
            Draw tiles from bag?
            %input{type: :checkbox, value: true, checked: true}
          %li.bag-toggle
            Players:
            %select.players
              %option{value:2} 2
              %option{value:3} 3
              %option{value:4} 4
              %option{value:5} 5
              %option{value:6} 6
          %li.bag-toggle.hidden
            1
            %input.1{type: :text, value: 1}
          %li.bag-toggle.hidden
            2 Straight: 
            %input.2-straight{type: :text, value: 2}
          %li.bag-toggle.hidden
            2 Turn:
            %input.2-turn{type: :text, value: 2}
          %li.bag-toggle.hidden
            3:
            %input.3{type: :text, value: 0}
          %li.bag-toggle.hidden
            4:
            %input.4{type: :text, value: 1}
          %li
            Size:
            %select.size
              %option{value: 121} Big
              %option{value: 60, selected: true} Small
          %li
            Zones:
            %select.zones
              %option{value: 1} 1
              %option{value: 2} 2
              %option{value: 3} 3
              %option{value: 4} 4
              %option{value: 5} 5
              %option{value: 6} 6
              %option{value: 7} 7
              %option{value: 8} 8
              %option{value: 9, selected: true} 9
          %li
            Speed:
            %select.interval
              %option{value:0} PLAID!
              %option{value:10} 10ms
              %option{value:20, selected: true} 20ms
              %option{value:50} 50ms
              %option{value:100} 100ms
              %option{value:200} 200ms
              %option{value:500} 500ms
              %option{value:1000} 1s
              %option{value:2000} 2s
              %option{value:5000} 5s
          %li
            %button.save Save
          %li
            Tiles: 
            %span.min 0
            \/
            %span.max 0
          %li
            Char:
            %ul.characters
              %li
                %button.character.first{value: 0}='&nbsp'
                %button.character.second{value: 1}='&nbsp'
                %button.character.third{value: 2}='&nbsp'
                %button.character.fourth{value: 3}='&nbsp'
                  
        .info.hidden
      .character_info.hidden
        Fill me in

    .main
      %canvas.hidden{id: 'my_canvas', width: 2057, height: 2057}
      -#%canvas.hidden{id: 'my_canvas', width: 121, height: 121}