[#78] Added undo rule description

src/app/src/layouts/content.css

@@ -69,7 +69,7 @@ a.link-button {
     justify-content: flex-start;
     align-items: center;
 }
-a.link-button .die{ 
+a.link-button .die{
     margin-right: 1ex;
     font-size: 2.5ex;
 }
@@ -85,7 +85,7 @@ a.link-button:focus-visible:focus-within {
     color: var(--theme-foreground-hover);
 }
 
-figure.add-score-button {
+figure.button-illustration {
     background-color: var(--theme-background-secondary);
     border-width: 1px;
     border-style: solid;
@@ -99,10 +99,16 @@ figure.add-score-button {
     flex-direction: column;
     align-items: center;
 }
-figure.add-score-button .die {
+figure.button-illustration .die {
     font-size: 4ex;
 }
-figure.add-score-button figcaption {
+figure.button-illustration.undo-button .die svg {
+    width: 60%;
+    height: 60%;
+	left: 18%;
+	top: 27%;
+}
+figure.button-illustration figcaption {
     font-size: .8ex;
     margin-bottom: 2ex;
     color: var(--theme-foreground-hint);

src/app/src/pages/index.astro

@@ -3,62 +3,75 @@ import { SvgDie } from '../components/die/svg-die'
 import { rowDisplayLabels } from '../components/scoreCard/scoreCard.labelDisplay.labels'
 
 import NewIcon from '../icons/iconmonstr-plus-lined.svg?raw'
+import UndoIcon from '../icons/iconmonstr-refresh-5.svg?raw'
 import ContentLayout from '../layouts/content.astro';
 ---
 
 <ContentLayout title="Home Page">
 	<h2>About the game</h2>
 	<p>
 		<span class="pre">Five dice</span> is a turn-based dice game that can be played anywhere.<br />
-    The objective is to score the highest number of points possible by rolling certain combinations of numbers with the five dice.<br />
-    It's typically played by multiple players but you <em>can</em> play it by yourself.
+		The objective is to score the highest number of points possible by rolling certain combinations of numbers with the five dice.<br />
+		It's typically played by multiple players but you <em>can</em> play it by yourself.
 	</p>
 	<p>
 		<a class="link-button" href="./score-card">
 			<SvgDie value={NewIcon} />
-      start a new game
+			start a new game
 		</a>
 	</p>
 	<h2>Preparation</h2>
 	<p>
-    The game is typically played with a cup, five dice, and a score pad.<br/>
-    This app functions as a score card and the cup is completely optional but part of the fun.
+		The game is typically played with a cup, five dice, and a score pad.<br/>
+		This app functions as a score card and the cup is completely optional but part of the fun.
 	</p>
 	<h2>How to play</h2>
 	<p>
-    The game consists out of 13 rounds, each round allows for a total of 3 rolls.<br />
-    On the first roll you have to roll all the dice, on roll 2 and 3 you may choose which dice to re-roll.<br />
-    Re-rolling is optional though, if you throw a nice score on your first or second roll you may omit the next rolls.
+		The game consists out of 13 rounds, each round allows for a total of 3 rolls.<br />
+		On the first roll you have to roll all the dice, on roll 2 and 3 you may choose which dice to re-roll.<br />
+		Re-rolling is optional though, if you throw a nice score on your first or second roll you may omit the next rolls.
 	</p>
 	<p>
-    Once you select a score you may choose a row to apply it to.<br />
-    You can do that by pressing the <span class="pre">"Add new score button":</span><br />
-		<figure class="add-score-button">
+		Once you select a score you may choose a row to apply it to.<br />
+		You can do that by pressing the <span class="pre">"Add new score button":</span><br />
+		<figure class="button-illustration">
 			<figcaption>Illustration of the new button</figcaption>
 			<SvgDie value={NewIcon} description="Illustration of the new button" />
 		</figure>
 	</p>
 	<p>
-    You can choose one of the following rows:
+		You can choose one of the following rows:
 	</p>
 	<ul class="flat-list score-options">
 		{Object.entries(rowDisplayLabels).map(([, label]) => <li>
 			<span>{label.title}</span> <span class="pre">{label.scoreDescription.long}</span>
 		</li>)}
 	</ul>
 	<p>
-    If you don't end up with a roll you can place anywhere you can always choose to discard one of the rows (marked in gray with a dash where the score would be).
+		If you don't end up with a roll you can place anywhere you can always choose to discard one of the rows (marked in gray with a dash where the score would be).
 	</p>
 	<h3>Rolling a flush</h3>
 	<p>
-    When ever you roll five of the same dice, you can apply for a flush. <br />
-    After rolling the first flush, you can apply for another one. However, <br />
-    every consecutive flush requires you to discard an unused row. It will be worth 100 points though.
+		When ever you roll five of the same dice, you can apply for a flush. <br />
+		After rolling the first flush, you can apply for another one. However, <br />
+		every consecutive flush requires you to discard an unused row. It will be worth 100 points though.
+	</p>
+	<h3>Undoing your last turn</h3>
+	<p>
+		In case of a mistake, you get the chance to undo your last commited round. <br />
+		You can do that by pressing the <span class="pre">"Undo button":</span><br />
+		<figure class="button-illustration undo-button">
+			<figcaption>Illustration of the undo button</figcaption>
+			<SvgDie value={UndoIcon} description="Illustration of the undo" />
+		</figure>
+	</p>
+	<p>
+		Since you need to commit your rounds, you can only undo your last round.
 	</p>
 	<h3>Ending the game</h3>
 	<p>
-    Once you've played the thirteenth turn, the game ends. <br />
-    Now it's time to calculate the total score, the score pad calculates this for you. <br />
-    The winner is who ever has the hightest <span class="pre uppercase">Final score</span>.
+		Once you've played the thirteenth turn, the game ends. <br />
+		Now it's time to calculate the total score, the score pad calculates this for you. <br />
+		The winner is who ever has the hightest <span class="pre uppercase">Final score</span>.
 	</p>
 </ContentLayout>