Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 9944e1b75d
Fetching contributors…

Cannot retrieve contributors at this time

file 90 lines (66 sloc) 2.411 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      #board {height:200px; width:90%; margin-left:5%; position:relative; border:1px solid black;}
      #board div {height:15px; width:15px; background:green; position:absolute; left:0; -webkit-transition:left .5s ease-in-out;}
      
      html #u1 {background:green; top:15px;}
      html #u2 {background:red; top:45px;}
      html #u3 {background:blue; top:75px;}
      html #u4 {background:orange; top:105px;}
    </style>
  </head>
  
  <body>
    
    <div id="board">
      <div id="u1"></div>
      <div id="u2"></div>
      <div id="u3"></div>
      <div id="u4"></div>
    </div>
    
    <h2 id="h"></h2>
    
    <img src="" id="currentItem" />
    
    <form id="chatb">
      <input type="text" id="guess" />
      <input type="submit" value="Send" />
    </form>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect();
      
      var name = prompt('Input your name');
      var ID;
      
      socket.emit('name', name);
      
      socket.on('ack-name', function (id) {
        ID = id;
        socket.emit('join', {gameName: 'price-guess'});
      });
      
      socket.on('state', function (state) {
        $('#h').text(state);
      });
      
      socket.on('next-item', function (item) {
        document.getElementById('currentItem').src = item.image;
      });
      
      socket.on('new-positions', function (positions) {
        positions.forEach(function (pos, i) {
          var position = Math.min((pos * 100), 100);
          
          $('#u' + (i+1)).css({left: position + '%'});
        });
      });
      
      socket.on('round', function (round) {
        round.positions.forEach(function (pos, i) {
          var position = Math.min((pos * 100), 100);
          
          $('#u' + (i+1)).css({left: position + '%'});
        });
        
        document.getElementById('currentItem').src = round.currentItem.image;
      });
      
      socket.on('chat', function (chat) {
        
      });
      
      $('#chat').submit(function (e) {
        e.preventDefault();
        var guess = $('#guess').val();
        
        $('#guess').val('').focus();
        
        socket.emit('guess', guess);
        
      });
      
    </script>
  </body>
</html>
Something went wrong with that request. Please try again.