From f55bd2a5f8764feb890d8eb9fe051589e6b9f6d0 Mon Sep 17 00:00:00 2001
From: KwikKill <gabriel@blaisot.org>
Date: Tue, 24 Oct 2023 09:04:07 +0200
Subject: [PATCH] Lint Tournaments views

---
 src/views/TournamentDetail.vue   |  54 ++++---
 src/views/TournamentRegister.vue | 270 ++++++++++++++++---------------
 2 files changed, 167 insertions(+), 157 deletions(-)

diff --git a/src/views/TournamentDetail.vue b/src/views/TournamentDetail.vue
index ef2b640..68cf8bd 100755
--- a/src/views/TournamentDetail.vue
+++ b/src/views/TournamentDetail.vue
@@ -1,31 +1,37 @@
 <script setup lang="ts">
-import { useTournamentStore } from '../stores/tournament.store'
-import {storeToRefs } from 'pinia'
-import TeamCard  from '../components/TeamCard.vue'
-const tournamentStore = useTournamentStore()
-const { fetchTournament } = tournamentStore
-const { tournament } =storeToRefs(tournamentStore)
-const props = defineProps(['id']) 
+import { storeToRefs } from 'pinia';
+import { onMounted } from 'vue';
+import TeamCard from '@/components/TeamCard.vue';
+import { useTournamentStore } from '@/stores/tournament.store';
 
-const res = fetchTournament(props.id)
-console.log(res)
+const tournamentStore = useTournamentStore();
+const { fetchTournament } = tournamentStore;
+const { tournament } = storeToRefs(tournamentStore);
+const props = defineProps<{
+  id: string;
+}>();
+
+onMounted(async () => {
+  const res = await fetchTournament(props.id);
+  console.log(res);
+});
 </script>
 
 <template>
-<div>
-	<div class="text-4xl text-center text-white">{{tournament.name}}</div>
-	<section id="infos">
-	</section>
-	<div class="grid md:grid-cols-2 grid-cols-1 p-5 gap-4">
-		<TeamCard v-for="team in tournament.teams" :team="team" />
-		<a href="#" class="flex flex-row justify-center items-center bg-red-500 rounded">
-			<div class="text-center rounded bg-red-500">
+  <div>
+    <div class="text-center text-4xl text-white">
+      {{ tournament.name }}
+    </div>
+    <section id="infos"/>
+    <div class="grid grid-cols-1 gap-4 p-5 md:grid-cols-2">
+      <TeamCard v-for="team in tournament.teams" :key="team.id" :team="team"/>
+      <a href="#" class="flex flex-row items-center justify-center rounded bg-red-500">
+        <div class="rounded bg-red-500 text-center">
 
-				<fa-awesome-icon size="5x" icon="fa-solid fa-circle-plus" />
-				<p class="text-center text-4xl">inscrire son équipe</p>
-			</div>
-		</a>
-	</div>
-</div>
+          <fa-awesome-icon size="5x" icon="fa-solid fa-circle-plus"/>
+          <p class="text-center text-4xl">inscrire son équipe</p>
+        </div>
+      </a>
+    </div>
+  </div>
 </template>
-
diff --git a/src/views/TournamentRegister.vue b/src/views/TournamentRegister.vue
index 6d1ab32..a683e25 100755
--- a/src/views/TournamentRegister.vue
+++ b/src/views/TournamentRegister.vue
@@ -1,152 +1,156 @@
 <script setup lang="ts">
-	import { useTournamentStore } from '../stores/tournament.store';
-	import FormField from '../components/FormField.vue';
-	import { storeToRefs } from 'pinia';
-	import { computed, reactive } from 'vue';
-	import { required } from '@vuelidate/validators';
-	import useVuelidate from '@vuelidate/core';
+import useVuelidate from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { storeToRefs } from 'pinia';
+import { computed, reactive } from 'vue';
+import FormField from '@/components/FormField.vue';
+import { useTournamentStore } from '@/stores/tournament.store';
 
-	const props = defineProps(['id']);
-	const tournamentStore = useTournamentStore()
-	
-	const { tournaments } = storeToRefs(tournamentStore)
-	const logo_url = "url(" + tournaments.value[props.id].logo + ")"
-	const logo = tournaments.value[props.id].logo
+const props = defineProps<{
+  id: string;
+}>();
+const tournamentStore = useTournamentStore();
 
+const { tournaments } = storeToRefs(tournamentStore);
+const logo_url = `url(${tournaments.value[props.id].logo})`;
+const { logo } = tournaments.value[props.id];
 
-	const register_form = reactive({
-		team: "",
-		pseudo: ""
-	})
+const register_form = reactive({
+  team: '',
+  pseudo: '',
+});
 
-	const rules = computed(() => {
-		return {
-			team: {required},
-			pseudo: {required}
-		}
-	})
+const rules = computed(() => ({
+  team: { required },
+  pseudo: { required },
+}));
 
-	const v$ = useVuelidate(rules, register_form, {autoDirty: true})
+const v$ = useVuelidate(rules, register_form, { autoDirty: true });
 
-	let team_form = true
-	const switch_form = (e :Event) => {
-		if ((e.target?.id === "player-btn" && team_form) || (e.target?.id === "team-btn" && !team_form)) {
-			team_form = !team_form
-			const team_btn = document.getElementById("team-btn")
-			const player_btn = document.getElementById("player-btn")
-			const forms = document.getElementById("forms")
-			
-			if (team_form) {
-				if (team_btn?.classList.contains("bg-gray-500")) {
-					team_btn.classList.replace("bg-gray-500","bg-blue-400")
-				}
-				if (player_btn?.classList.contains("bg-blue-400")) {
-					player_btn.classList.replace("bg-blue-400","bg-gray-500")
-				}
-				if (forms?.classList.contains("translatePlayer")) {
-					forms.classList.remove("translatePlayer")
-				}
-			} else {
-				if (team_btn?.classList.contains("bg-blue-400")) {
-					team_btn.classList.replace("bg-blue-400","bg-gray-500")
-				}
-				if (player_btn?.classList.contains("bg-gray-500")) {
-					player_btn.classList.replace("bg-gray-500","bg-blue-400")
-				}
-				forms?.classList.add('translatePlayer')
-			}
-		}
-	}
+let team_form = true;
+const switch_form = (e :Event) => {
+  if ((e.target?.id === 'player-btn' && team_form) || (e.target?.id === 'team-btn' && !team_form)) {
+    team_form = !team_form;
+    const team_btn = document.getElementById('team-btn');
+    const player_btn = document.getElementById('player-btn');
+    const forms = document.getElementById('forms');
 
-	const register_team = () => {
-		console.log("test")
-	}
+    if (team_form) {
+      if (team_btn?.classList.contains('bg-gray-500')) {
+        team_btn.classList.replace('bg-gray-500', 'bg-blue-400');
+      }
+      if (player_btn?.classList.contains('bg-blue-400')) {
+        player_btn.classList.replace('bg-blue-400', 'bg-gray-500');
+      }
+      if (forms?.classList.contains('translatePlayer')) {
+        forms.classList.remove('translatePlayer');
+      }
+    } else {
+      if (team_btn?.classList.contains('bg-blue-400')) {
+        team_btn.classList.replace('bg-blue-400', 'bg-gray-500');
+      }
+      if (player_btn?.classList.contains('bg-gray-500')) {
+        player_btn.classList.replace('bg-gray-500', 'bg-blue-400');
+      }
+      forms?.classList.add('translatePlayer');
+    }
+  }
+};
+
+const register_team = () => {
+  console.log('test');
+};
 </script>
 
 <template>
-	<div class="main flex flex-col items-center min-h-screen">
-		<img src="https://cdn.discordapp.com/attachments/1054010660939370509/1162797131837472879/lol_logo.jpg?ex=653d3e37&is=652ac937&hm=3890c6680e5d5d3d5ba6ead9debc9d264080440ed5069fe6635a576f8dfaec5f&" class="h-20 w-auto"/>
-		<div class="md:grid md:grid-cols-2 h-full w-full">
-			<div class="flex flex-col items-center justify-center h-full">
-				<form>
-					<FormField required label="Nom de l'équipe" v-slot="context" :validations="v$.team">
-						<input :class="{error: context.invalid}" placeholder="Équipe 1" type="text" class="flex flex-col"/>
-					</FormField>
-					<FormField required label="Pseudo in game" v-slot="context" :validations="v$.team">
-						<input :class="{error: context.invalid}" placeholder="xxxx" type="text" class="flex flex-col"/>
-					</FormField>
-					<FormField required label="Rôle dans l'équipe" v-slot="context" :validations="v$.team" class="flex flex-col">
-						<select :class="{error: context.invalid}" class="text-black">
-							<option value="joueur" selected>Joueur</option>
-							<option value="manager">Manager</option>
-						</select>
-					</FormField>
-				</form>
-			</div>
-			<div class="flex items-center justify-center h-full flex-col">
-				<span class="text-lg">Rappel du Règlement</span>
-				<ul class="my-5">
-					<li>Pas d'insulte</li>
-					<li>Apporter son propre matériel <b>filaire </b> </li>
-				</ul>
-				<div>
-					<input type="checkbox"/>
-					<label> J'accepte les regles du tournoi</label>
-				</div>
-			</div>
-		</div>
-		<button @click="register_team" class="mb-10 border-solid bg-green-600 text-xl p-3 rounded">Créer l'équipe</button>
-		<!--
-			<div class="grid grid-cols-2 h-12">
-				<div id="team-btn" class="bg-blue-400 flex items-center justify-center cursor-pointer hover:border-solid hover:border-2 hover:border-pink-500" @click="switch_form($event)">
-					<button  class="text-xl">Créer une équipe</button>
-				</div>
-			<div id="player-btn" class="bg-gray-500 flex items-center justify-center cursor-pointer hover:border-solid hover:border-2 hover:border-pink-500" @click="switch_form($event)">
-				<button class="text-xl">Rejoindre une équipe</button>
-			</div>
-		</div>
-		<div class="overflow-hidden h-full">
-			<div id="forms" class="grid transition" style="height: calc(100% - 2.5rem);grid-template-columns: repeat(2, 100vw);">
-				<div class="flex items-center justify-center flex-col">
-					<form>
-						<FormField required label="Nom de l'équipe" v-slot="context" :validations="v$.team">
-							<input :class="{error: context.invalid}" placeholder="Équipe 1" type="text" class="flex flex-col"/>
-						</FormField>
-						<FormField required label="Pseudo in game" v-slot="context" :validations="v$.team">
-							<input :class="{error: context.invalid}" placeholder="xxxx" type="text" class="flex flex-col"/>
-						</FormField>
-					</form>
-					<button @click="register_team" class="mt-10">Créer l'équipe</button>
-				</div>
-				<div class="flex items-center justify-center flex-col">
-					<form>
-						<FormField required label="Nom de l'équipe" v-slot="context" :validations="v$.team">
-							<input :class="{error: context.invalid}" placeholder="Équipe 1" type="text" class="flex flex-col"/>
-						</FormField>
-						<FormField required label="Mot de passe de l'équipe" v-slot="context" :validations="v$.team">
-							<input :class="{error: context.invalid}"  type="password" class="flex flex-col"/>
-						</FormField>
-						<FormField required label="Pseudo in game" v-slot="context" :validations="v$.team">
-							<input :class="{error: context.invalid}" placeholder="xxxx" type="text" class="flex flex-col"/>
-						</FormField>
-					</form>
-					<button @click="register_team" class="mt-10">Rejoindre l'équipe</button>
-				</div>
-			</div>
-		</div>
-		-->
-	</div>
+  <div class="main flex min-h-screen flex-col items-center">
+    <img alt="Logo du tournois" src="https://cdn.discordapp.com/attachments/1054010660939370509/1162797131837472879/lol_logo.jpg?ex=653d3e37&is=652ac937&hm=3890c6680e5d5d3d5ba6ead9debc9d264080440ed5069fe6635a576f8dfaec5f&" class="h-20 w-auto"/>
+    <div class="h-full w-full md:grid md:grid-cols-2">
+      <div class="flex h-full flex-col items-center justify-center">
+        <form>
+          <FormField v-slot="context" required label="Nom de l'équipe" :validations="v$.team">
+            <input aria-label="Nom de l'équipe" :class="{ error: context.invalid }" placeholder="Équipe 1" type="text" class="flex flex-col"/>
+          </FormField>
+          <FormField v-slot="context" required label="Pseudo in game" :validations="v$.team">
+            <input aria-label="Pseudo en jeu" :class="{ error: context.invalid }" placeholder="xxxx" type="text" class="flex flex-col"/>
+          </FormField>
+          <FormField v-slot="context" required label="Rôle dans l'équipe" :validations="v$.team" class="flex flex-col">
+            <select aria-label="Rôle dans l'équipe" :class="{ error: context.invalid }" class="text-black">
+              <option value="joueur" selected>
+                Joueur
+              </option>
+              <option value="manager">
+                Manager
+              </option>
+            </select>
+          </FormField>
+        </form>
+      </div>
+      <div class="flex h-full flex-col items-center justify-center">
+        <span class="text-lg">Rappel du Règlement</span>
+        <ul class="my-5">
+          <li>Pas d'insulte</li>
+          <li>Apporter son propre matériel <b>filaire </b> </li>
+        </ul>
+        <div>
+          <label><input type="checkbox"/> J'accepte les regles du tournoi</label>
+        </div>
+      </div>
+    </div>
+    <button type="submit" class="mb-10 rounded border-solid bg-green-600 p-3 text-xl" @click="register_team">
+      Créer l'équipe
+    </button>
+    <!--
+      <div class="grid grid-cols-2 h-12">
+        <div id="team-btn" class="bg-blue-400 flex items-center justify-center cursor-pointer hover:border-solid hover:border-2 hover:border-pink-500" @click="switch_form($event)">
+          <button  class="text-xl">Créer une équipe</button>
+        </div>
+      <div id="player-btn" class="bg-gray-500 flex items-center justify-center cursor-pointer hover:border-solid hover:border-2 hover:border-pink-500" @click="switch_form($event)">
+        <button class="text-xl">Rejoindre une équipe</button>
+      </div>
+    </div>
+    <div class="overflow-hidden h-full">
+      <div id="forms" class="grid transition" style="height: calc(100% - 2.5rem);grid-template-columns: repeat(2, 100vw);">
+        <div class="flex items-center justify-center flex-col">
+          <form>
+            <FormField required label="Nom de l'équipe" v-slot="context" :validations="v$.team">
+              <input :class="{error: context.invalid}" placeholder="Équipe 1" type="text" class="flex flex-col"/>
+            </FormField>
+            <FormField required label="Pseudo in game" v-slot="context" :validations="v$.team">
+              <input :class="{error: context.invalid}" placeholder="xxxx" type="text" class="flex flex-col"/>
+            </FormField>
+          </form>
+          <button @click="register_team" class="mt-10">Créer l'équipe</button>
+        </div>
+        <div class="flex items-center justify-center flex-col">
+          <form>
+            <FormField required label="Nom de l'équipe" v-slot="context" :validations="v$.team">
+              <input :class="{error: context.invalid}" placeholder="Équipe 1" type="text" class="flex flex-col"/>
+            </FormField>
+            <FormField required label="Mot de passe de l'équipe" v-slot="context" :validations="v$.team">
+              <input :class="{error: context.invalid}"  type="password" class="flex flex-col"/>
+            </FormField>
+            <FormField required label="Pseudo in game" v-slot="context" :validations="v$.team">
+              <input :class="{error: context.invalid}" placeholder="xxxx" type="text" class="flex flex-col"/>
+            </FormField>
+          </form>
+          <button @click="register_team" class="mt-10">Rejoindre l'équipe</button>
+        </div>
+      </div>
+    </div>
+    -->
+  </div>
 </template>
 
 <style scoped>
 .main {
-	background-image: v-bind(logo_url);
-	background-size: cover;
-	background-color: gray;
-	background-blend-mode: multiply;
+  background-image: v-bind(logo_url);
+  background-size: cover;
+  background-color: gray;
+  background-blend-mode: multiply;
 }
 
 .translatePlayer {
-	transform: translateX(-100vw);
+  transform: translateX(-100vw);
 }
-</style>
\ No newline at end of file
+</style>