Frontend passes target to backend

backend/src/api/base.clj

@@ -13,13 +13,16 @@
   (player-view/get-game-as-player (persistence/fetch-game game-id) player-id))
 
 (defn play-card-as-player
-  [game-id player index row-id & target]
-  (let [game-state (persistence/fetch-game game-id)]
+ ([game-id player index row-id]
+  (play-card-as-player game-id player index row-id "nil"))
+ ([game-id player index row-id target]
+  (let [game-state (persistence/fetch-game game-id)
+        target (load-string target)]
       (if (= (:status (get-game game-id player)) messages/play)
           (do
-            (persistence/save-game (play-card/play-card game-state (conversions/player-num game-state player) index row-id (first target)))
+            (persistence/save-game (play-card/play-card game-state (conversions/player-num game-state player) index row-id target))
             (get-game game-id player))
-          {:error messages/out-of-turn})))
+          {:error messages/out-of-turn}))))
 
 (defn ^:private create-empty-game
   "Creates a new instance of a game"

backend/src/api/handler.clj

@@ -18,7 +18,8 @@
     game-id
     player-id
     (parse-int (:index action))
-    (parse-int (:row action))))
+    (parse-int (:row action))
+    (:target action)))
 
 (defroutes ^:private app-routes
   (context "/games" [] (defroutes game-list-routes

backend/test/api/effects_test.clj

@@ -18,6 +18,6 @@
       (api/play-card-as-player game-id player-id   0 0)
       (api/play-card-as-player game-id opponent-id 0 1)
       (api/play-card-as-player game-id player-id   0 1)
-      (api/play-card-as-player game-id opponent-id 0 1 [:rows 0 :cards 0])
+      (api/play-card-as-player game-id opponent-id 0 1 "[:rows 0 :cards 0]")
       (get-in (api/get-game game-id player-id)
               [:rows 0 :cards 0 :power]))))

frontend/src/game/board/board.js

@@ -19,16 +19,18 @@ module.exports = {
         })
 
         boardState.forEach(function (row, rownum) {
-            row["cards"].forEach(function (cardInRow) {
+            row["cards"].forEach(function (cardInRow, index) {
                 var newCard = builder.buildCard(templates.baseCard, cardInRow);
                 newCard.setAttribute("rownum", rownum);
+                newCard.setAttribute("index", index);
 
                 if (cardInRow["owner"] === "me") {
                     fetchRow("#my-rows .game-row", rownum).appendChild(newCard);
                 } else {
                     fetchRow("#opp-rows .game-row", rownum).appendChild(newCard);
                 }
             });
+
             document.querySelectorAll("#limits .scores-row")[rownum].innerText = "(lim: " + row["limit"] + ")"
         });
     },

frontend/src/game/board/builder.js

@@ -46,7 +46,8 @@ module.exports = {
             if (status.clickedCard &&
                 status.clickedCard.hasAttribute("row-played") &&
                 !status.clickedCard.hasAttribute("target")) {
-                status.clickedCard.setAttribute("target", 1);
+                status.clickedCard.setAttribute("target", 
+                    "[:rows " + this.getAttribute("rownum") + " :cards " + this.getAttribute("index") + "]");
                 play.playCard(status.clickedCard);
             }
         });

frontend/src/game/play/hand.js

@@ -21,6 +21,8 @@ module.exports = {
                     status.clickedCard = card;
                     card.style.background = "red";
                 }
+
+                document.getElementById("game-status").innerHTML = config.messages["play"];
             }
         })
     }  

frontend/src/game/play/play.js

@@ -14,9 +14,13 @@ module.exports = {
             status.clickedCard = card;
             document.getElementById("game-status").innerHTML = "Select a target";
         } else {
+            if (!card.hasAttribute("target")) {
+                card.setAttribute("target", "nil");
+            }
             const playData = {
                 index: card.getAttribute("index"),
                 row: card.getAttribute("row-played"),
+                target: card.getAttribute("target"),
             };
             card.style.background = "green";
 

frontend/tests/game/play.test.js

@@ -12,11 +12,12 @@ test('Playing cards changes background as intended', () => {
     play.playCard(card);
     expect(card.style.background).toBe("green");
 
+    card = document.createElement("div");
     card.setAttribute("add-power", 1);
     play.playCard(card);
     expect(card.style.background).toBe("yellow");
 
-    card.setAttribute("target", 1);
+    card.setAttribute("target", "[:rows 0 :cards 0]");
     play.playCard(card);
     expect(card.style.background).toBe("green");
 });