Show active artifacts on place screen (#1)

www/js/home.js

@@ -142,6 +142,11 @@ function updatePlaceStats(id, successCallback, errorCallback) {
             } else {
                 $("#magic-action-label").text("Attack");
             }
+
+            $("#place-artifact-list").html("");
+            place.artifacts.forEach(function (artifact) {
+                $("#place-artifact-list").append("<span id=\"artifact-icon-" + artifact.id + "\" data-artifact=\"" + artifact.id + "\" data-energy=\"" + artifact.energy + "\" data-maxenergy=\"" + artifact.maxenergy + "\" class=\"place-artifact-icon " + artifact.icon + " fa-2x margin-right text-color-" + artifact.color + "\"></span>");
+            });
         } else {
             $("#place-info").addClass("color-white");
             $("#place-image").attr("src", "img/place/white.png");
@@ -170,6 +175,7 @@ $("#magic-action-button").click(function () {
         password: localStorage.getItem("password"),
         id: $("#place-popup").data("placeid")
     }, function (resp) {
+        updatePlaceStats($("#place-popup").data("placeid"));
         app.toast.show({
             text: '<i class="fas fa-check"></i> ' + resp.msg,
             position: "bottom",

www/pages/home.html

@@ -101,6 +101,10 @@
                         <i class="game-icon game-icon-magic-swirl fa-2x"></i>
                         <span id="magic-action-label">Magic</span>
                     </div>
+                    <h3>Artifacts</h3>
+                    <div id="place-artifact-list">
+
+                    </div>
                 </div>
             </div>
         </div>