Extract PlayerInfo component

Author: Zomis

src/components/GameBoard.vue

@@ -13,29 +13,11 @@
               :class="{'player-user': info == playerInfos.user, 'player-opponent': info != playerInfos.user}">
 
               <!-- Player information boxes -->
-              <div class="properties player-info-box">
-                  <h4 style="text-decoration: underline; font-weight: bold;" @click="selectEntity(info)"
-                      :class="{'selected': info.selected, 'targetable': doingAction && targets.indexOf(info.id) !== -1}">{{info.name}}</h4>
-                  <ul style="list-style: none outside none; margin: 0; padding: 0;">
-                      <li v-for="(value, name) in info.properties" :key="name">
-                          <b>{{name | formatResourceName}}</b>: {{value}}
-                      </li>
-                      <li><b>Cards: </b>{{ info.zones.Hand ? info.zones.Hand.length() : "?" }}</li>
-                  </ul>
-                  <!-- Action buttons -->
-                  <div class="player-actions">
-                      <div v-for="action in actions" v-if="action.isPlayer && action.id == info.id" :key="action.action">
-                          <input @click="startAction(action)" v-show="!doingAction" type="button" :value="action.action"
-                                 class="btn btn-navbar csh-button"/>
-                      </div>
-                      <div v-show="doingAction && info == playerInfos.user">
-                          <input @click="cancelAction()" type="button" value="Cancel"
-                                 class="btn btn-navbar csh-button"/>
-                          <input @click="performAction()" type="button" :value="currentAction ? currentAction.action : '(None)'"
-                                 class="btn btn-navbar csh-button"/>
-                      </div>
-                  </div>
-              </div>
+              <PlayerInfo :info="info" :currentAction="currentAction"
+                :actions="actions" :selectEntity="selectEntity" :startAction="startAction" :cancelAction="cancelAction" :performAction="performAction"
+                :showActions="doingAction && info == playerInfos.user">
+
+              </PlayerInfo>
 
               <!-- Player cards -->
               <div v-for="(zoneInfo, zoneName) in info.zones" class="zone" :class="'zone-' + zoneName" :key="zoneName">
@@ -59,6 +41,7 @@
 <script>
 import CardshifterServerAPI from "../server_interface";
 import CardModel from "./CardModel"
+import PlayerInfo from "./PlayerInfo"
 
 export default {
   name: "GameBoard",
@@ -95,6 +78,7 @@ export default {
     }
   },
   components: {
+    PlayerInfo,
     CardModel
   },
   methods: {
@@ -511,12 +495,6 @@ export default {
   },
   computed: {
 
-  },
-  filters: {
-    formatResourceName: function(input) {
-        input = input.replace(/_/g, ' ');
-        return input.substring(0, 1).toUpperCase() + input.substring(1).toLowerCase();
-    }
   },
   beforeDestroy() {
     CardshifterServerAPI.$off("type:resetActions", this.resetActions);

src/components/PlayerInfo.vue

@@ -0,0 +1,37 @@
+<template>
+<div class="properties player-info-box">
+    <h4 style="text-decoration: underline; font-weight: bold;" @click="selectEntity(info)"
+        :class="{'selected': info.selected, 'targetable': currentAction !== null && targets.indexOf(info.id) !== -1}">{{info.name}}</h4>
+    <ul style="list-style: none outside none; margin: 0; padding: 0;">
+        <li v-for="(value, name) in info.properties" :key="name">
+            <b>{{name | formatResourceName}}</b>: {{value}}
+        </li>
+        <li><b>Cards: </b>{{ info.zones.Hand ? info.zones.Hand.length() : "?" }}</li>
+    </ul>
+    <!-- Action buttons -->
+    <div class="player-actions">
+        <div v-for="action in actions" v-if="action.isPlayer && action.id == info.id" :key="action.action">
+            <input @click="startAction(action)" v-show="currentAction === null" type="button" :value="action.action"
+                   class="btn btn-navbar csh-button"/>
+        </div>
+        <div v-show="showActions">
+            <input @click="cancelAction()" type="button" value="Cancel"
+                   class="btn btn-navbar csh-button"/>
+            <input @click="performAction()" type="button" :value="currentAction ? currentAction.action : '(None)'"
+                   class="btn btn-navbar csh-button"/>
+        </div>
+    </div>
+</div>
+</template>
+<script>
+export default {
+  name: "PlayerInfo",
+  props: ["info", "actions", "showActions", "currentAction", "selectEntity", "startAction", "cancelAction", "performAction"],
+  filters: {
+    formatResourceName: function(input) {
+        input = input.replace(/_/g, ' ');
+        return input.substring(0, 1).toUpperCase() + input.substring(1).toLowerCase();
+    }
+  }
+}
+</script>