From 1fec8f37e6365cfe4e7c2019f582a3655a53052d Mon Sep 17 00:00:00 2001
From: synan798 <s.j.kavuncu@gmail.com>
Date: Wed, 4 Dec 2024 14:19:40 +0100
Subject: [PATCH] added play button to user turn and changed text color to
 white

---
 components/home/Turns/Opponent.vue | 12 ++++++------
 components/home/Turns/User.vue     |  6 +++---
 components/home/Users/UserBox.vue  |  9 +++++----
 pages/index.vue                    |  6 +++---
 public/icons/playButton.svg        |  7 +++++++
 5 files changed, 24 insertions(+), 16 deletions(-)
 create mode 100644 public/icons/playButton.svg

diff --git a/components/home/Turns/Opponent.vue b/components/home/Turns/Opponent.vue
index 611abb5..c8b5acb 100644
--- a/components/home/Turns/Opponent.vue
+++ b/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>
\ No newline at end of file
diff --git a/components/home/Turns/User.vue b/components/home/Turns/User.vue
index 326112b..824cbb5 100644
--- a/components/home/Turns/User.vue
+++ b/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>
diff --git a/components/home/Users/UserBox.vue b/components/home/Users/UserBox.vue
index 60e7176..1355cf6 100644
--- a/components/home/Users/UserBox.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index e7f44be..65289b0 100644
--- a/pages/index.vue
+++ b/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>
diff --git a/public/icons/playButton.svg b/public/icons/playButton.svg
new file mode 100644
index 0000000..2763488
--- /dev/null
+++ b/public/icons/playButton.svg
@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-19.24 -19.24 519.48 519.48" xml:space="preserve" stroke="#000000" stroke-width="12.025">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
+
<g id="SVGRepo_iconCarrier"> <g> <g> <path d="M410.6,70.4C365.1,25,304.7,0,240.5,0S115.9,25,70.4,70.4C25,115.9,0,176.3,0,240.5s25,124.6,70.4,170.1 C115.8,456,176.2,481,240.5,481s124.6-25,170.1-70.4C456,365.2,481,304.8,481,240.5S456,115.9,410.6,70.4z M240.5,454 C122.8,454,27,358.2,27,240.5S122.8,27,240.5,27S454,122.8,454,240.5S358.2,454,240.5,454z"/> <path d="M349.2,229.1l-152.6-97.9c-4.2-2.7-9.4-2.9-13.8-0.5c-4.3,2.4-7,6.9-7,11.8v195.7c0,4.9,2.7,9.5,7,11.8 c2,1.1,4.3,1.7,6.5,1.7c2.5,0,5.1-0.7,7.3-2.1l152.6-97.9c3.9-2.5,6.2-6.8,6.2-11.4S353,231.6,349.2,229.1z M202.8,313.7V167.3 l114.1,73.2L202.8,313.7z"/> </g> </g> </g>
+
</svg>
\ No newline at end of file