fix add player

src/components/Attack.vue

@@ -62,13 +62,15 @@ const setup = () => {
 }
 
 const decrement = (player:{value:number}) => {
+  const activePlayer = playersStore.getActivePlayer();
   if(!activePlayer) return console.log('no active player');
   if(combat.value == 0) return console.log('no more points');
   if(player.value == 0) return console.log('not enough points');
    player.value -= 1;
    combat.value -= 1;
 }
 const increment = (player:{value:number,start:number}) => {
+  const activePlayer = playersStore.getActivePlayer();
   if(!activePlayer) return console.log('no active player');
   if(combat.value+1 > activePlayer.combat) return console.log('not enough points');
   if(player.value+1 > player.start) return console.log('not enough points');
@@ -77,6 +79,8 @@ const increment = (player:{value:number,start:number}) => {
 }
 
 const makeAttack = () => {
+  const activePlayer = playersStore.getActivePlayer();
+
   if(!activePlayer) return console.log('no active player');
   Object.keys(attack.value).forEach(player => {
     playersStore.updatePlayer(player, 'authority', attack.value[player].value)

src/components/GameSettings.vue

@@ -4,7 +4,7 @@
   <div class="modal-box">
     <div class="p-2 flex flex-col justify-center items-center">
       <p>Scan the QR code to join the game</p>
-      <qrcode-vue :value="value" size="200" level="H" class="m-4 p-2 bg-white" />
+      <qrcode-vue :value="value" :size="200" level="H" class="m-4 p-2 bg-white" />
       <p class="text-xs">{{value}}</p>
     </div>
     <div class="modal-action">

src/components/Selector.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex gap-2 justify-center items-center" >
     <button @click="decrement()" class="btn" :class="btnClass">-</button>
-    <h2 class="w-7">{{ props.value }}</h2>
+    <h2 class="w-7 text-center">{{ props.value }}</h2>
     <button @click="increment()" class="btn" :class="btnClass">+</button>
   </div>
 </template>
@@ -13,6 +13,7 @@
   const props = defineProps<{
     value: number;
     color: string;
+    size?: string;
     increment: () => void;
     decrement: () => void;
   }>();
@@ -22,4 +23,9 @@
   btnClass['btn-primary'] = props.color === 'primary';
   btnClass['btn-error'] = props.color === 'error';
   btnClass['btn-warning'] = props.color === 'warning';
+
+  btnClass['btn-xs'] = props.size === 'xs';
+  btnClass['btn-sm'] = props.size === 'sm';
+  btnClass['btn-lg'] = props.size === 'lg';
+
 </script>

src/components/addPlayer.vue

@@ -6,40 +6,21 @@
     <div class="modal-box">
       <h3 class="font-bold text-lg">Manage Players</h3>
       <table class="table table-compact table-zebra">
-        <thead>
-          <tr>
-            <th>Name</th>
-            <th>Authority</th>
-            <th>Combat</th>
-            <th>Trade</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
         <tbody>
-          <tr v-for="player in playersStore.players" :key="player.id">
-            <td>{{ player.name }}</td>
-            <td>
-              <input
-                type="number"
-                class="input input-bordered input-sm w-16"
-                v-model="player.authority"
-            </td>
-            <td>
-              <input
-                type="number"
-                class="input input-bordered input-sm w-16"
-                v-model="player.combat"
+          <tr class="" v-for="player in playersStore.players" :key="player.id">
+            <td class="p-0" >{{ player.name }}</td>
+            <td class="p-2">
+              <Selector
+                :value="player.authority"
+                color="primary"
+                size="sm"
+                :increment="() => playersStore.increment(player.id,'authority')"
+                :decrement="() => playersStore.decrement(player.id,'authority')"
               />
             </td>
-            <td>
-              <input
-                type="number"
-                class="input input-bordered input-sm w-16"
-                v-model="player.trade"
-            </td>
-            <td>
-              <button class="btn btn-error btn-outline" @click="playersStore.removePlayer(player.id)">
-                Remove
+            <td class="p-1">
+              <button class="btn btn-sm btn-error" @click="playersStore.removePlayer(player.id)">
+                X 
               </button>
             </td>
           </tr>
@@ -52,7 +33,7 @@
           v-model="name"
           type="text"
           placeholder="Name"
-          class="input input-bordered"
+          class="input input-bordered w-40"
           @keyup.enter="addPlayer"
         />
         <input v-model="authority" type="number" placeholder="Authority" class="input input-bordered w-20" />