Make a card component

web-svelte/src/components/Card.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+import SciFiButton from "./SciFi-Button.svelte";
+import type { FuelCard } from "common";
+
+export let hidden: boolean = false;
+export let button: boolean = true;
+export let buttonText: string = "Use Fuel Card";
+export let card: FuelCard;
+
+let colour: string;
+let magnitudeShape = "";
+if (card.type == "stationary") {
+	colour = `#008A71`;
+	magnitudeShape = `hexagon`;
+} else {
+	if (card.magnitude < 0) {
+		colour = `#600068`;
+		magnitudeShape = `circle`;
+	} else {
+		colour = `#536800`;
+	};
+};
+</script>
+
+
+<div
+	class="card {hidden ? 'hidden' : ''}"
+	style="--colour: {colour};"
+>
+	{#if !hidden}
+	<div class="magnitude {magnitudeShape}">
+		{Math.abs(card.magnitude)}
+	</div>
+	<div class="main-content">
+		<h1>{card.symbol}</h1>
+		{card.name}
+	</div>
+	{#if button}
+	<div class="button-container">
+		<SciFiButton
+			classes="use-fuel-card-button"
+			textColour="#FFFFFF"
+			hoverTextColour="#FFFFFF"
+			background="rgba(0,0,0,0.6)"
+		>
+			{buttonText}
+		</SciFiButton>
+	</div>
+	{/if}
+	{/if}
+</div>
+
+
+<style lang="scss">
+
+$border-radius: 10px;
+
+.card {
+	align-items: center;
+	background: var(--colour);
+	border-radius: $border-radius;
+	color: white;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin: 10px;
+	min-width: 150px;
+	position: relative;
+	user-select: none;
+	width: calc(100% / 9);
+
+	&.hidden {
+		background: #3D3D3D;
+	}
+
+	> .button-container {
+		position: absolute;
+		bottom: 5px;
+	}
+
+	> .magnitude {
+		$size: 40px;
+
+		background: rgba(255, 255, 255, 0.3);
+		border-radius: 10px 0 10px 0;
+		color: black;
+		display: flex;
+		left: 0;
+		position: absolute;
+		top: 0;
+		justify-content: center;
+		align-items: center;
+		width: $size;
+		height: $size;
+
+		&.hexagon {
+			background-image: url(/public/assets/hexagon.svg);
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: 85%;
+			color: white;
+		}
+
+		&.circle {
+			background-image: url(/public/assets/circle.svg);
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: 85%;
+			color: white;
+		}
+	}
+
+	> .main-content {
+		margin-bottom: 30px;
+		text-align: center;
+
+		h1 {
+			text-align: center;
+			margin: 0;
+		}
+	}
+
+}
+</style>