<?php
// Generate random values for two six-sided dice.
$die1 = mt_rand(1, 6);
$die2 = mt_rand(1, 6);
$sum = $die1 + $die2;

// Map dice values to matching SVG filenames.
$diceImages = [
	1 => 'dice-six-faces-one.svg',
	2 => 'dice-six-faces-two.svg',
	3 => 'dice-six-faces-three.svg',
	4 => 'dice-six-faces-four.svg',
	5 => 'dice-six-faces-five.svg',
	6 => 'dice-six-faces-six.svg',
];
?>
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>tp1 - ex4</title>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css"
		>
		<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
		<main>
			<h5><a href="./">Tirage aléatoire</a></h5>
				<article class="is-center">
					<img src="./img/<?= $diceImages[$die1] ?>" alt="Dé 1 : <?= $die1 ?>">
					<img src="./img/<?= $diceImages[$die2] ?>" alt="Dé 2 : <?= $die2 ?>">
				</article>
			<h5>Somme = <?= $sum ?></h5>
		</main>
	</body>
</html>
