feature: Create Card and Player components

svelte/package.json

@@ -30,5 +30,8 @@
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.0.3"
 	},
-	"type": "module"
-}
+	"type": "module",
+	"dependencies": {
+		"@fontsource/roboto": "^5.1.0"
+	}
+}

svelte/src/lib/components/Card.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	const CARD_REVERSE = '2B';
+
+	export let value: string = CARD_REVERSE;
+
+	export let width: number = 70;
+	const height: number = width * 1.4;
+
+	let isSelected: boolean = false;
+</script>
+
+<button
+	aria-label={value}
+	style="width:{width}px; height:{height}px;"
+	class:isSelected
+	on:click={() => (isSelected = !isSelected)}
+>
+	<img alt="" src={`/images/cards/${value.toUpperCase()}.svg`} />
+</button>
+
+<style>
+	button {
+		display: inline-block;
+		padding: 0;
+		margin: 2px;
+		cursor: pointer;
+		border: solid;
+		border-width: 0px;
+		border-radius: 4px;
+	}
+
+	button:hover {
+		outline: 3px solid #9ecaed;
+		box-shadow: 0 0 10px 1px #9ecaed;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+</style>

svelte/src/lib/components/CardIcon.svelte

@@ -11,10 +11,7 @@
 	aria-label={value}
 	style="width:{width}px; height:{height}px;"
 	class:isSelected
-	on:click={() => {
-		isSelected = !isSelected;
-		console.log(isSelected);
-	}}
+	on:click={() => (isSelected = !isSelected)}
 >
 	<img alt="" src={`/images/cards/${value.toUpperCase()}.svg`} />
 </button>

svelte/src/lib/components/Player.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import Card from './Card.svelte';
+
+	export let playerName: string = 'Player 1';
+
+	export let firstCard: string | undefined;
+	export let secondCard: string | undefined;
+</script>
+
+<section>
+	<div>
+		<Card value={firstCard} />
+		<Card value={secondCard} />
+	</div>
+	<h4>{playerName}</h4>
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+		width: 200px;
+	}
+
+	h4 {
+		margin: 0;
+	}
+</style>

svelte/src/routes/+layout.svelte

@@ -0,0 +1,8 @@
+<script>
+	import '@fontsource/roboto';
+	import './../styles.css';
+</script>
+
+<main>
+	<slot />
+</main>

svelte/src/routes/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import CardIcon from '$lib/components/CardIcon.svelte';
+	import Card from '../lib/components/Card.svelte';
+	import Player from '../lib/components/Player.svelte';
 
 	export const CARD_SUITS: string[] = ['s', 'd', 'h', 'c'];
 	export const CARD_RANKS: string[] = [
@@ -25,5 +27,9 @@
 	{/each}
 {/each}
 
+<br />
+
+<Player />
+
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

svelte/src/styles.css

@@ -0,0 +1,12 @@
+html {
+  font-size: 62.5%;
+}
+
+body {
+  font-family: 'Roboto', sans-serif;
+  font-size: 1.6rem;
+}
+
+h4 {
+  font-size: 2.1rem;
+}