holy shit fantasy picking works

Signed-off-by: anderssonw <wandersson.98@gmail.com>

src/lib/components/fantasy/CardSmall.svelte

@@ -1,34 +1,31 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import type { FantasyForm, FullPlayer } from '$lib/types/newTypes';
 	import CardSmallInfo from './CardSmallInfo.svelte';
 
 	export let player: FullPlayer;
 	export let fantasyForm: FantasyForm;
 	export let position: number;
 
-	let card_type: string = 'bronze';
-
-	function handleCardClick() {
-		fantasyForm.selectedCardPosition = position;
-	}
-
-	function handleCaptainClick(pid: number) {
-		fantasyForm.captainId = pid;
+	function handleCaptainClick(playerId: number) {
+		fantasyForm.captainId = playerId;
 	}
 
-	function sellPlayer(player: number) {
+	function sellPlayer() {
 		fantasyForm.players[position] = null;
-		//fantasyForm.cash += player.price;
+		if (fantasyForm.captainId == player.id) {
+			fantasyForm.captainId = -1;
+		}
 	}
+
+	$: isCaptain = fantasyForm.captainId == player.id;
 </script>
 
 <div class="small-card group">
-	<CardSmallInfo {player} />
+	<CardSmallInfo {isCaptain} {player} />
 
 	<div class="w-40 absolute left-[100%] hidden group-hover:block group-hover:animate-fadeIn z-100">
-		<button class="btn w-full mb-1" on:click={() => sellPlayer(player.id)}>Selg spiller</button>
-		<button class="btn w-full mb-1" on:click={() => handleCaptainClick(player.id || 0)}>Velg kaptein</button>
+		<button class="btn w-full mb-1" on:click={() => sellPlayer()}>Selg spiller</button>
+		<button class="btn w-full mb-1" on:click={() => handleCaptainClick(player.id)}>Velg kaptein</button>
 		<a href="/players/{player.id}" target="_blank" rel="noreferrer" class="p-0">
 			<button class="btn w-full mb-1">Statistikk</button>
 		</a>

src/lib/components/fantasy/CardSmallInfo.svelte

@@ -4,6 +4,7 @@
 	import { afterUpdate } from 'svelte';
 
 	export let player: FullPlayer;
+	export let isCaptain: boolean;
 
 	let cardType: string = 'bronze';
 
@@ -22,13 +23,20 @@
 {#if player}
 	<img src="/cards/{cardType}.png" alt="card" />
 
+	{#if isCaptain}
+		<div class="w-full absolute top-[6%] left-[25%]">
+			<p class="text-center text-red-700 text-xl">(C)</p>
+		</div>
+	{/if}
+
 	<div class="w-16 absolute top-[19%] right-[10%]">
 		<img src="/profile/placeholder.png" alt="head" />
 		<div class="absolute top-[86%] bg-gradient-to-t from-slate-950/25 to-transparent w-[100%] h-2" />
 	</div>
 	<div class="w-full absolute top-[5%] right-[25%]">
 		<p class="text-center text-primary-color text-3xl">50</p>
 	</div>
+
 	<div class="w-full absolute top-[51%]">
 		<p class="text-center text-primary-color text-xl">{player.name.split(' ')[1]}</p>
 	</div>

src/lib/components/fantasy/SelectCardModal.svelte

@@ -5,7 +5,16 @@
 	export let players: FullPlayer[];
 	export let fantasyForm: FantasyForm;
 
-	$: hasCardSelected = fantasyForm.selectedCardPosition > 0 ? true : false;
+	const calculatePlayersToShow = (allPlayers: FullPlayer[], playersInForm: (FullPlayer | null)[]) => {
+		let playersInFormIds = playersInForm.map((player) => player?.id || -1);
+		return allPlayers.filter((player) => {
+			return !playersInFormIds.includes(player.id);
+		});
+	};
+
+	$: playersNotInForm = calculatePlayersToShow(players, fantasyForm.players);
+
+	$: hasCardSelected = fantasyForm.selectedCardPosition >= 0 ? true : false;
 
 	// Apply animation
 	$: selectionVisible = `transition-all duration-300 ${hasCardSelected ? 'block opacity-100' : 'invisible opacity-0'}`;
@@ -26,7 +35,7 @@
 		</div>
 		<div class="max-w-screen-laptop h-3/4 p-8 rounded-lg fixed m-auto inset-x-0 inset-y-0 overflow-y-scroll">
 			<div class="w-full flex flex-row flex-wrap gap-8 justify-center {playerSlide}">
-				{#each players as player}
+				{#each playersNotInForm as player}
 					<SelectCard {player} bind:fantasyForm />
 				{/each}
 			</div>

src/routes/fantasy/+page.svelte

@@ -25,7 +25,7 @@
 		teamName: fantasyTeam?.name || 'placeholder'
 	} satisfies FantasyForm;
 
-	$: currentCash = calculateCurrentCash();
+	$: currentCash = calculateCurrentCash(fantasyForm.players);
 
 	const fillFantasyFormPlayers = (currentPlayers: FullPlayer[] | undefined): (FullPlayer | null)[] => {
 		const maxPlayerCount = 4;
@@ -51,11 +51,11 @@
 		return formPlayers;
 	};
 
-	const calculateCurrentCash = () => {
+	const calculateCurrentCash = (players: (FullPlayer | null)[]) => {
 		if (season) {
 			return (
 				season?.starting_currency -
-				fantasyForm.players.reduce((accumulator, player) => {
+				players.reduce((accumulator, player) => {
 					if (!player) return accumulator;
 
 					return accumulator + player?.price;
@@ -68,7 +68,7 @@
 </script>
 
 {#if session && allPlayers && season}
-	<SelectCardModal {fantasyForm} players={allPlayers} />
+	<SelectCardModal bind:fantasyForm players={allPlayers} />
 
 	<div class="structure">
 		{#if season}
@@ -86,7 +86,7 @@
 								<img src="/cards/empty.png" alt="card" />
 							</div>
 						{:else}
-							<CardSmall {fantasyForm} {player} position={id} />
+							<CardSmall bind:fantasyForm {player} position={id} />
 						{/if}
 					</div>
 				{/each}