added play button to user turn and changed text color to white

components/home/Turns/Opponent.vue

@@ -3,12 +3,12 @@
 </script>
 
 <template>
-    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3 h">
-        <p class="my-1">Opponentes Turn</p>
+    <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3">
+        <p class="my-1 ">Opponentes Turn</p>
         <div class="flex space-x-3">
-            <HomeUsersUserBox name="test1" :userTurn=false></HomeUsersUserBox>
-            <HomeUsersUserBox name="test2" :userTurn=false></HomeUsersUserBox>
-            <HomeUsersUserBox name="test3" :userTurn=false></HomeUsersUserBox>
+            <HomeUsersUserBox name="test1" :user-turn="false"/>
+            <HomeUsersUserBox name="test2" :user-turn="false"/>
+            <HomeUsersUserBox name="test3" :user-turn="false"/>
         </div>
     </div>
-</template>
+</template>

components/home/Turns/User.vue

@@ -6,9 +6,9 @@
     <div class="w-full bg-gray-200 p-3 mt-auto rounded-3xl my-3 h-full">
         <p class="my-1">Your Turn</p>
         <div class="flex-col space-y-3">
-            <HomeUsersUserBox name="test1" :userTurn=true></HomeUsersUserBox>
-            <HomeUsersUserBox name="test2" :userTurn=true></HomeUsersUserBox>
-            <HomeUsersUserBox name="test3" :userTurn=true></HomeUsersUserBox>
+            <HomeUsersUserBox name="test1" :user-turn="true"/>
+            <HomeUsersUserBox name="test2" :user-turn="true"/>
+            <HomeUsersUserBox name="test3" :user-turn="true"/>
         </div>
     </div>
 </template>

components/home/Users/UserBox.vue

@@ -17,9 +17,10 @@
 
 <template>
     <div :class="['bg-blue-600', props.userTurn ? 'flex items-center h-30 w-full rounded-3xl p-3' : 'flex flex-col items-center justify-center h-30 w-full rounded-3xl p-3']">
-        <img v-if="!props.userTurn" :src="props.profilePicture" :alt="name" class="rounded-full w-16 h-16 mb-2" >
-        <img v-else :src="props.profilePicture" :alt="name" class="rounded-full w-16 h-16 mr-3" >
-        <p>{{ props.name }}</p>
-        <button v-if="props.userTurn"></button>
+        <img :class="['rounded-full w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20 lg:w-24 lg:h-24', props.userTurn ? 'mr-3' : 'mb-2']" :src="props.profilePicture" :alt="name">
+        <p class="text-white">{{ props.name }}</p>
+        <button v-if="props.userTurn" class="ml-auto p-2 sm:p-3 md:p-4 lg:p-5" @click="console.log(props.name)">
+            <NuxtImg src="icons/playButton.svg" alt="Play" class="w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 lg:w-14 lg:h-14"/>
+        </button>
     </div>
 </template>

pages/index.vue

@@ -26,9 +26,9 @@ useSeoMeta({
       </template>
       <template #content>
         <div class="flex flex-col h-full p-3">
-          <HomeTurnsUser></HomeTurnsUser>
-          <HomeTurnsOpponent></HomeTurnsOpponent>
-          <HomeControlsGameButtons></HomeControlsGameButtons>
+          <HomeTurnsUser/>
+          <HomeTurnsOpponent/>
+          <HomeControlsGameButtons/>
         </div>
       </template>
       <template #footer>