display the cards played and allow to select one

Signed-off-by: Olivier Gayot <duskcoder@gmail.com>

3 files changed, 56 insertions, 21 deletions

diff --git a/cao-common.js b/cao-common.js
index 6d24de8..909468f 100644
--- a/cao-common.js
+++ b/cao-common.js
@@ -10,12 +10,14 @@ var CAO = function() {
     this.on_play_white_card_ok = function(idx) { /* to override */ };
     this.on_collect_cards_ok = function() { /* to override */ };
     this.on_show_played_card = function(idx, desc) { /* to override */ };
+    this.on_designate_card_ok = function(idx) { /* to override */ };
 
     var request_queue = [];
 
     var self = this;
     var ws;
 
+    var played_cards = [];
     var white_cards = {};
     var black_card;
 
@@ -42,7 +44,7 @@ var CAO = function() {
         };
 
         ws.onerror = function(evt) {
-            alert(evt);
+            console.log(evt);
             this.on_socket_error(evt);
         };
 
@@ -117,11 +119,18 @@ var CAO = function() {
                     for (i in response['result']) {
                         desc = response['result'][i];
 
-                        console.log(desc);
+                        played_cards.push(desc);
                         self.on_show_played_card(i, desc);
                     }
                 }
                 break;
+            case 'designate_card':
+                if (response['status'] == 0) {
+                    self.on_designate_card_ok(idx);
+
+                    played_cards = [];
+                }
+                break;
             default:
                 console.log(evt);
         }
@@ -139,6 +148,18 @@ var CAO = function() {
         };
     };
 
+    this.gen_callback_played_card = function(index) {
+        return function() {
+            request = {
+                'op': 'designate_card',
+                'card_id': index,
+            };
+
+            request_queue.push('designate_card');
+            ws.send(JSON.stringify(request));
+        };
+    };
+
     $('#btn_join').click(function() {
         game_name = prompt('Name of the game');
 
diff --git a/cao-desktop.html b/cao-desktop.html
index 521294a..32a6f17 100644
--- a/cao-desktop.html
+++ b/cao-desktop.html
@@ -15,17 +15,7 @@
 
       <div id="black_card">
       </div>
-      <table id="white_cards">
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-          <tr><td class="card_desc"></td></tr>
-      </table>
+      <ul id="white_cards"></ul>
+      <ul id="played_cards"></ul>
   </body>
 </html>
diff --git a/cao-desktop.js b/cao-desktop.js
index 29fc91c..bb6f4e1 100644
--- a/cao-desktop.js
+++ b/cao-desktop.js
@@ -8,13 +8,27 @@ $(document).ready(function() {
         $('#btn_pick_black').show();
     };
 
+
     cao.on_show_white_card = function(idx, desc) {
-        /* to change */
-        element = $('.card_desc').eq(idx);
-        element.html(desc);
-        element.dblclick(this.gen_callback_white_card(i));
+        identifier = 'white_card_' + idx;
+        content = '<li id="' + identifier + '">' + desc + '</li>';
+
+        $('#white_cards').append(content);
+
+        $('#' + identifier).dblclick(this.gen_callback_white_card(idx));
+    };
+
+    cao.on_show_played_card = function(idx, desc) {
+        identifier = 'played_card_' + idx;
+
+        content = '<li id="' + identifier + '">' + desc + '</li>';
+
+        $('#played_cards').append(content);
+
+        $('#' + identifier).dblclick(this.gen_callback_played_card(idx));
     };
 
+
     cao.on_pick_black_card_ok = function() {
         $('#btn_collect').show();
         $('#btn_pick_black').hide();
@@ -25,14 +39,24 @@ $(document).ready(function() {
         $('#black_card').html(desc);
     };
 
+
     cao.on_played_white_card_ok = function(idx) {
-        element = $('.card_desc').eq(idx);
-        element.empty();
-        element.dblclick(null);
+        identifier = 'white_card_' + idx;
+        $('#' + identifier).remove();
     };
 
+    cao.on_designate_card_ok = function(idx) {
+        $('#played_cards').empty();
+        $('#played_cards').hide();
+        $('#black_card').hide();
+        $('#btn_collect').hide();
+        $('#btn_pick_black').show();
+    };
+
+
     cao.on_collect_cards_ok = function() {
         $('#btn_collect').hide();
+        $('#played_cards').show();
     };
 
     cao.run();