Add workshop and remodel effects

static/game.html

@@ -86,6 +86,10 @@ img.card:hover {
     box-shadow: 0 0 10px lime;
 }
 
+.supply-pile.selected {
+    box-shadow: 0 0 10px lime;
+}
+
 .chat-window {
     border: 1px solid black;
     width: 300px;
@@ -431,6 +435,15 @@ img.card:hover {
     color: white;
     visibility: hidden;
     grid-template-rows: 5fr auto;
+    transition: top 0.1s ease-in;
+}
+
+.dialog.supply {
+    top: 80%;
+}
+
+.dialog.hand {
+    top: 50%;
 }
 
 .dialog img {
@@ -462,23 +475,47 @@ img.card:hover {
 
         var resolve_request;
         var enable_hand_selection = false;
+        var enable_supply_selection = false;
 
         var toggle_hand_selection = function(index) {
             document.querySelectorAll(".player-hand img.card")[index].classList.toggle("selected");
         }
 
+        var toggle_supply_selection = function(index) {
+            document.querySelectorAll(".supply-area .supply-pile")[index].classList.toggle("selected");
+        }
+
         function dialog_confirm(ev) {
-            var selected = [];
-            
-            document.querySelectorAll(".player-hand img.card.selected").forEach((c) => {
-                selected.push(parseInt(c.dataset.index));
-                c.classList.remove("selected");
-            });
-            
-            var msg = { type: "HandCardsChosen", choice: selected };
-            webSocket.send(JSON.stringify(msg));
-            enable_hand_selection = false;
+            if (resolve_request.request.type == "GainCard") {
+                var selected = document.querySelector(".supply-pile.selected");
+                if (selected) {
+                    selected = parseInt(selected.dataset.index);
+                }
+
+                document.querySelectorAll(".supply-pile.selected").forEach((c) => {
+                    c.classList.remove("selected");
+                });
+
+                var reply = { type: "SupplyCardChosen", choice: selected };
+                var msg = { type: "ResolveReply", reply: reply };
+                webSocket.send(JSON.stringify(msg));
+                enable_supply_selection = false;
+             } else {
+                var selected = [];
+                
+                document.querySelectorAll(".player-hand img.card.selected").forEach((c) => {
+                    selected.push(parseInt(c.dataset.index));
+                    c.classList.remove("selected");
+                });
+                
+                var reply = { type: "HandCardsChosen", choice: selected };
+                var msg = { type: "ResolveReply", reply: reply };
+                webSocket.send(JSON.stringify(msg));
+                enable_hand_selection = false;
+            }
             document.querySelector("#dialog").style.visibility = "hidden";
+            dialog.classList.remove("hand");
+            dialog.classList.remove("supply");
         }
 
          var mouseenter = function(ev) {
@@ -552,6 +589,13 @@ img.card:hover {
                 ev.dataTransfer.setData("text", JSON.stringify(data));
             }
 
+            var click = function(e) {
+                e.preventDefault();
+                if (enable_supply_selection) {
+                    toggle_supply_selection(parseInt(e.srcElement.parentElement.dataset.index));
+                }
+            }
+ 
             var doubleclick = function(ev) {
                 let msg = {
                     type: "BuyCard",
@@ -570,6 +614,7 @@ img.card:hover {
                             "data-index": vnode.attrs.index,
                             ondragstart: dragStart,
                             draggable: true,
+                            onclick: click,
                             ondblclick: doubleclick,
                         },
                         m("img", {
@@ -722,7 +767,6 @@ img.card:hover {
                 }
             }
 
-
             return {
                 view: function(vnode) {
                     return m(".player-hand",
@@ -1024,9 +1068,26 @@ img.card:hover {
 
             var handle_resolve_request = function(request) {
                 var dlg = document.querySelector("#dialog");
-                dlg.style.visibility = "visible";
+                resolve_request = request;
 
-                enable_hand_selection = true;
+                document.querySelector("#dialog img").src = "/static/images/cards/" + request.card.toLowerCase() + ".jpg";
+
+                if (request.request.type == "GainCard") {
+                    let cost = request.request?.filter?.MaxCost;
+                    if (cost) {
+                        document.querySelector("#dialog p").innerHTML = "Choose a card to gain with max cost of " + cost + ".";
+                    } else {
+                        document.querySelector("#dialog p").innerHTML = "Choose a card to gain.";
+                    }
+                    enable_supply_selection = true;
+                    dialog.classList.add("supply");
+                } else if (request.request.type == "ChooseHandCardsToDiscard") {
+                    document.querySelector("#dialog p").innerHTML = "Choose any number of cards to discard.";
+                    enable_hand_selection = true;
+                    dialog.classList.add("hand");
+                }
+
+                dlg.style.visibility = "visible";
             }
 
             var handle_gameover = function(msg) {
@@ -1077,7 +1138,7 @@ img.card:hover {
                 } else if (msg.type == "PlayerId") {
                     my_player_id = msg.id;
                 } else if (msg.type == "ResolveRequest") {
-                    handle_resolve_request(msg.request);
+                    handle_resolve_request(msg);
                 } else {
                     console.log("event?");
                     console.log(event.data);