Changeset 27 for web

Show
Ignore:
Timestamp:
02/05/08 19:00:53 (4 years ago)
Author:
mike
Message:

Added async stuff

Location:
web
Files:
2 modified

Legend:

Unmodified
Added
Removed
  • web/client.html

    r26 r27  
    66     <script type="text/javascript" src="js/poker-client.js"></script> 
    77    <body> 
     8        <div id="status"> </div> 
    89        <form id="connect_form">Connect to: 
    910            <table> 
     
    1516            </table> 
    1617        </form> 
    17         <div id="status"> 
    18              
     18 
     19        <div id="you">Your status: </div> 
     20        <div> 
     21            Required Actions: 
     22            <div id="action_box"> 
     23               
     24            </div> 
    1925        </div> 
     26 
     27        <div> 
     28            Player status's: 
     29            <table> <tr id="player_status"/> </table> 
     30        </div> 
     31 
     32        <table class="playerbox"><tr> 
     33                <td id="baseplayer"> 
     34                    <span class="playername"> </pre> 
     35                    <table> 
     36                        <tr><td>owner</td><td class="owner"></td></tr> 
     37                        <tr><td>id</td><td class="id"></td></tr> 
     38                        <tr><td>money</td><td class="money"></td></tr> 
     39                        <tr><td>seat</td><td class="seat"></td></tr> 
     40                        <tr><td>actions</td><td class="actions"></td></tr> 
     41                        <tr><td>cards</td><td class="cards"></td></tr> 
     42                    </table> 
     43                </td> 
     44        </tr></table> 
    2045    </body> 
    2146</html> 
  • web/js/poker-client.js

    r26 r27  
    55var user_id = null; 
    66var client_id = null; 
    7  
    8 function updateStatus( stat ) { 
     7var connection_state = "disconnected"; 
     8var baseplayer = null; 
     9var player_status = null; 
     10var you = null; 
     11var action_box = null; 
     12var players = {} 
     13var n_requests = 0; 
     14 
     15function Player(bp) { 
     16        this.pl = bp; 
     17        this.money = $(".money",bp); 
     18        this.id = $(".id",bp); 
     19        this.owner = $(".owner",bp); 
     20        this.seat = $(".seat",bp); 
     21        this.actions = $(".actions",bp); 
     22        this.cards = $(".cards",bp); 
     23} 
     24Player.prototype = { 
     25        updatePrivate: function( privateData ) { 
     26                if( privateData == null ) { 
     27                        this.cards.text(""); 
     28                } 
     29        }, 
     30        updatePublic: function( publicData ) { 
     31                pd = publicData; //make it shorter 
     32                this.money.text(pd.money); 
     33                this.seat.text(pd.seat); 
     34                this.owner.text(pd.owner); 
     35                //this.actions.text(actionList.toString()); 
     36        }, 
     37        updateActions: function( actions ) { 
     38                this.actions.empty(); 
     39                this.actions.append(makeListList(actions)); 
     40        } 
     41} 
     42 
     43function makeListList( list ) { 
     44        var root = $("<table/>"); 
     45        for( i in list ) { 
     46                row = $("<tr/>"); 
     47                act = list[i]; 
     48                for( j in act ) { 
     49                        row.append($("<td/>").text(act[j])); 
     50                } 
     51                root.append(row); 
     52        } 
     53        return root; 
     54} 
     55function processStatus( stat ) { 
    956    token = stat["token"]; 
    10     gstatus.text(String(stat)); 
     57//gstatus.text(String(stat)); 
    1158    if(token) { 
    12         $.getJSON(host, 
    13                 {"token":token, 
    14                 "method":"get_update"}, 
    15                 function(json) { updateStatus( json ) }) 
    16     } else { 
    17         alert(token); 
    18     } 
    19 } 
     59                if( connection_state == "disconnected" ) { 
     60                        $("form#connect_form").hide(); 
     61                        state = "connected"; 
     62            gstatus.text(state); 
     63                } 
     64                //Do status generating code here 
     65                var player_names = [] 
     66 
     67                 
     68                if( stat.table_info ) { 
     69                        ti = stat.table_info; 
     70                        player_names = ti.player_names; 
     71                        for( i in player_names ) { 
     72                                pn = player_names[i] 
     73                                if( players[pn] == null ) { //if it's null let's create a new player object 
     74                                        newPlayer = baseplayer.clone(true); 
     75                                 
     76                                        players[pn] = new Player(newPlayer); 
     77                                        players[pn].id.text(pn); 
     78                                        if( pn == stat.you.id ) { 
     79                                                you = players[stat.you.id] 
     80                                                $("#you").append(you.pl)  
     81                                        } else { 
     82                                                player_status.append( newPlayer ); 
     83                                        } 
     84                                } 
     85                                players[pn].updatePublic( ti.players[pn] ); 
     86                        } 
     87                } 
     88                if( stat.game_state ) { 
     89                        gs = stat.game_state; 
     90                        for( i in player_names ) { 
     91                                pn = player_names[i] 
     92                                if( gs.player_actions[pn] ) { //if it's null let's create a new player object 
     93                                        players[pn].updateActions( gs.player_actions[pn] ); 
     94                                } 
     95                        } 
     96                } 
     97 
     98                if( stat.you ) { 
     99                        you.updatePrivate(you); 
     100                        if( stat.you.required_action ) { 
     101                                for( i in stat.you.possible_actions ) { 
     102                                        act = new Action( i, stat.you.possible_actions[i][0], stat.you.possible_actions[i][1] ); 
     103                                        action_box.append( act.form ); 
     104                                } 
     105                                action_box.show(); 
     106                        } 
     107                } 
     108        } 
     109} 
     110 
     111function makeRequest( data ) { 
     112        $.getJSON(host, 
     113                        data, 
     114                        updateStatus ) 
     115        n_requests += 1; 
     116} 
     117 
     118function updateStatus( statarr ) { 
     119        n_requests -= 1; 
     120        for( i in statarr ) { 
     121                processStatus( statarr[i] ); 
     122                if( n_requests == 0 ) { 
     123                        makeRequest( {"token":token, "method":"get_update"} ); 
     124                } 
     125        } 
     126} 
     127 
     128function Action( action, min, max ) { 
     129        this.name = action; 
     130        this.min = min; 
     131        this.max = max; 
     132        this.requiresInput = this.min && !(this.min == this.max); 
     133        this.title = this.name + " "; 
     134        if( this.min ) { 
     135                if( this.min != this.max ) { 
     136                        this.title += this.min + " < x < " + this.max; 
     137                } else { 
     138                        this.title += this.min; 
     139                } 
     140        } 
     141        this.val = null; 
     142        this.form = $("<form/>"); 
     143        this.form.append($("<input type='submit' value='" + this.title + "'/>")); 
     144        if( this.requiresInput ) {  
     145                this.val = $("<input type='input' value='" + this.min + "' name='money'/>"); 
     146                this.form.append(this.val); 
     147        } 
     148    var myself = this; 
     149    this.form.submit(function() {  
     150            myself.submitForm(); 
     151            return false; }); 
     152 
     153 
     154} 
     155 
     156Action.prototype = { 
     157        checkRange : function() { 
     158                                         var v = null; 
     159                                         if( this.requiresInput ) { 
     160                                                 v = parseFloat(this.val.val()); 
     161                                                 if( !v || v < this.min || v > this.max ) { 
     162                                                         alert( "requires valid input for " + this.name ); 
     163                                                         return null; 
     164                                                 } 
     165                                         } else { 
     166                                                 v = this.min; 
     167                                         } 
     168                                         return v; 
     169                                 }, 
     170        submitForm : function() { 
     171                                         var v = null 
     172                                         if(this.min != null && (v=this.checkRange()) == null ) { 
     173                                                 return false; 
     174                                         } 
     175                                         makeRequest({"method":"action", "action":this.name,"value":v,"token":token}); 
     176                                         action_box.hide(); 
     177                                         action_box.empty(); 
     178                                         return false; 
     179                                 } 
     180 
     181} 
     182 
    20183$(document).ready(function() { 
    21184        //$("form#connect_form").hide(); 
    22         //$("div#status").hide(); 
     185                // 
     186                baseplayer = $("td#baseplayer"); 
     187                baseplayer.parent().parent().remove(); 
    23188        gstatus = $("div#status"); 
    24         gstatus.text("must connect") 
     189        gstatus.text("must connect"); 
     190                player_status = $("#player_status"); 
     191                action_box = $("#action_box"); 
     192                action_box.hide(); 
    25193        $("form#connect_form").submit( function(form) {  
    26             table_name = this.table_name.value 
    27             user_id = this.user_id.value 
    28             host = this.host.value + "?jsoncallback=?" 
    29             client_id = this.client_id.value 
    30             gstatus.text("connecting..."); 
    31             $.getJSON(host, 
    32                 {"table_name":table_name, 
    33                 "client_id":client_id, 
    34                 "user_id":user_id, 
    35                 "method":"connect"}, 
    36                 function(json) { updateStatus( json ) } ); 
    37             return false; }); 
     194            table_name = this.table_name.value; 
     195            user_id = this.user_id.value; 
     196            host = this.host.value + "?jsoncallback=?"; 
     197            client_id = this.client_id.value; 
     198                        state = "connecting"; 
     199            gstatus.text(state); 
     200                        makeRequest({"table_name":table_name, 
     201                                                "client_id":client_id, 
     202                                                "user_id":user_id, 
     203                                                "method":"connect"}); 
     204                        return false; }); 
    38205        }); 
    39206