Refactoring

frontend/src/app/draw/draw.component.html

@@ -9,7 +9,7 @@
 	@if (result(); as result) {
 		<div class="absolute inset-x-0 top-full mt-8 flex justify-center">
 			<pn-toast
-				class="max-w-full"
+				class="block w-full max-w-83.75"
 				[appearance]="result.appearance"
 				[text]="result.message"
 				closable

frontend/src/app/draw/draw.component.ts

@@ -6,9 +6,7 @@ import { ConfettiService } from '../confetti/confetti.service';
 import { ShipmentService } from '../shipment/shipment.service';
 
 type DrawResult =
-	| { appearance: 'success'; message: string }
-	| { appearance: 'warning'; message: string }
-	| { appearance: 'error'; message: string };
+	{ appearance: 'success'; message: string } | { appearance: 'warning'; message: string } | { appearance: 'error'; message: string };
 
 @Component({
 	selector: 'app-draw',
@@ -43,11 +41,13 @@ export class DrawComponent {
 			.subscribe({
 				next: (response) => {
 					this.result.set({
-						appearance: 'success',
+						appearance: response.won ? 'success' : 'warning',
 						message: response.message
 					});
 
-					this.confettiService.celebrate();
+					if (response.won) {
+						this.confettiService.celebrate();
+					}
 				},
 				error: (error: HttpErrorResponse) => {
 					this.handleError(error);
@@ -61,7 +61,6 @@ export class DrawComponent {
 
 	private handleError(error: HttpErrorResponse): void {
 		switch (error.status) {
-			case 400:
 			case 429:
 			case 503:
 				this.result.set({

frontend/src/app/shipment/shipment.service.ts

@@ -4,6 +4,7 @@ import { Observable } from 'rxjs';
 
 export interface ShipmentResponse {
 	message: string;
+	won: boolean
 }
 
 @Injectable({

frontend/src/index.html

@@ -7,7 +7,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="icon" type="image/x-icon" href="favicon.ico" />
 	</head>
-	<body class="bg-linear-to-b/srgb from-white from-0% via-[#f2fcff] via-40% to-pn-blue-25 to-100%">
+	<body class="bg-linear-to-b/srgb from-white from-0% via-[#f2fcff] via-50% to-pn-blue-25 to-100%">
 		<app-root></app-root>
 	</body>
 </html>