edit rules, style spiritofcurlingitems, add two pictures

This commit is contained in:
Tobias Hilfiker
2022-12-21 22:40:18 +01:00
parent c06b9df691
commit 6979fcba4e
5 changed files with 172 additions and 25 deletions

View File

@@ -1,5 +1,5 @@
<div class="flex items-center flex-col">
<img src="{{image}}" alt="Free Guard Zone" class="w-72"/>
<h3>{{title}}</h3>
<div class="flex items-center flex-col bg-banner p-5">
<img src="{{image}}" alt="{{imageAlt}}" class="w-72"/>
<p class="font-bold">{{title}}</p>
<p>{{description}}</p>
</div>

View File

@@ -2,6 +2,6 @@
<img src="{{image}}" alt="{{imageAlt}}" class="w-12 h-12 justify-center mr-5 ml-5"/>
<div>
<p class="font-bold">{{title}}</p>
<p>{{description}}</p>
<p class="mr-3 mb-3">{{description}}</p>
</div>
</div>

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 66 KiB

View File

@@ -0,0 +1,88 @@
<svg xmlns="http://www.w3.org/2000/svg" width="411" height="283" viewBox="0 0 411 283">
<g id="Gruppe_27" data-name="Gruppe 27" transform="translate(-534.75 -92)">
<g id="Pfad_7" data-name="Pfad 7" transform="translate(945.75 92) rotate(90)" fill="#fff">
<path d="M 282.5 410.5 L 0.5 410.5 L 0.5 0.5 L 282.5 0.5 L 282.5 410.5 Z" stroke="none"/>
<path d="M 1 1 L 1 410 L 282 410 L 282 1 L 1 1 M 0 0 L 283 0 L 283 411 L 0 411 L 0 0 Z" stroke="none" fill="#707070"/>
</g>
<g id="Ellipse_7" data-name="Ellipse 7" transform="translate(623 196)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_8" data-name="Ellipse 8" transform="translate(583 196)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_9" data-name="Ellipse 9" transform="translate(703 196)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_10" data-name="Ellipse 10" transform="translate(663 196)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_11" data-name="Ellipse 11" transform="translate(783 196)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_12" data-name="Ellipse 12" transform="translate(743 196)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_13" data-name="Ellipse 13" transform="translate(623 236)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_14" data-name="Ellipse 14" transform="translate(583 236)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_15" data-name="Ellipse 15" transform="translate(703 236)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_16" data-name="Ellipse 16" transform="translate(663 236)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_17" data-name="Ellipse 17" transform="translate(783 236)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_18" data-name="Ellipse 18" transform="translate(743 236)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_19" data-name="Ellipse 19" transform="translate(863 196)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_20" data-name="Ellipse 20" transform="translate(823 196)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_21" data-name="Ellipse 21" transform="translate(863 236)" fill="#ffff03" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<g id="Ellipse_22" data-name="Ellipse 22" transform="translate(823 236)" fill="#ff0303" stroke="#7d7272" stroke-width="4">
<circle cx="17.5" cy="17.5" r="17.5" stroke="none"/>
<circle cx="17.5" cy="17.5" r="15.5" fill="none"/>
</g>
<text id="_1" data-name="1" transform="translate(595 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">1</tspan></text>
<text id="_2" data-name="2" transform="translate(635 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">2</tspan></text>
<text id="_3" data-name="3" transform="translate(675 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">3</tspan></text>
<text id="_4" data-name="4" transform="translate(715 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">4</tspan></text>
<text id="_5" data-name="5" transform="translate(755 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">5</tspan></text>
<text id="_6" data-name="6" transform="translate(795 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">6</tspan></text>
<text id="_7" data-name="7" transform="translate(835 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">7</tspan></text>
<text id="_8" data-name="8" transform="translate(875 186)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">8</tspan></text>
<text id="_9" data-name="9" transform="translate(595 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">9</tspan></text>
<text id="_10" data-name="10" transform="translate(630 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">10</tspan></text>
<text id="_11" data-name="11" transform="translate(670 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">11</tspan></text>
<text id="_12" data-name="12" transform="translate(710 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">12</tspan></text>
<text id="_13" data-name="13" transform="translate(749 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">13</tspan></text>
<text id="_14" data-name="14" transform="translate(789 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">14</tspan></text>
<text id="_15" data-name="15" transform="translate(830 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">15</tspan></text>
<text id="_16" data-name="16" transform="translate(870 298)" fill="#707070" font-size="20" font-family="SegoeUI, Segoe UI"><tspan x="0" y="0">16</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 7.0 KiB

View File

@@ -10,30 +10,47 @@
<h1 class="flex justify-center">Regeln</h1>
<div class="max-h-96 flex justify-between items-center px-20 mb-14 mt-auto"
style="background: #9AD1D4;
background: linear-gradient(180deg, #9AD1D4 50%, #007EA7 50%);">
<div class="h-full grid grid-cols-3 gap-0.5 content-start p-16">
{{> ruleitem
image="/rules/fgz.svg"
imageAlt="Free Guard Zone"
title="Free Guard Zone (FGZ)"
description="Die Free Guard Zone (im Bild grün) definiert, dass bis zum 6. gespielten Stein keine Guard
aus dem Spiel genommen werden darf."
}}
<div class="flex items-center flex-col">
<img src="/rules/fgz.svg" alt="Free Guard Zone" class="w-72"/>
<h3>Free Guard Zone (FGZ)</h3>
<p>Die Free Guard Zone (im Bild grün) definiert, dass bis zum 6. gespielten Stein keine Guard aus dem Spiel genommen werden
darf.</p>
</div>
{{> ruleitem
image="/rules/validStone.svg"
imageAlt="Gültigkeitsbereich Steine"
title="Gültigkeit der Steine"
description="Die Steine sind nicht überall gültig. So müssen sie zwischen Hog-Line und Back-Line liegen, um gültig zu sein.
(im Bild grün markiert)"
}}
<div class="flex items-center flex-col">
<img src="/rules/validStone.svg" alt="" class="w-72"/>
<h3 class="text-center">Gültigkeit der Steine</h3>
<p>Die Steine sind nicht überall gültig. So müssen sie zwischen Hog-Line und Back-Line liegen, um gültig zu sein.
(im Bild grün markiert)</p>
</div>
{{> ruleitem
image="/rules/broomVsStone.svg"
imageAlt="Wischbereich gegnerischer Stein"
title="Wischen des gegnerischen Steins"
description="Hinter der Tee-Line (grün eingezeichneter Bereich) darf ein gegnerischer Stein durch jemanden gewischt werden.
So kann dieser aus dem Spiel genommen werden."
}}
<div class="flex items-center flex-col">
<img src="/rules/broomVsStone.svg" alt="" class="w-72"/>
<h3>Wischen des gegnerischen Steins</h3>
<p>Hinter der Tee-Line (grün eingezeichneter Bereich) darf ein gegnerischer Stein durch jemanden gewischt werden.
So kann dieser aus dem Spiel genommen werden.</p>
</div>
{{> ruleitem
image="/rules/stoneOrder.svg"
imageAlt="Steinreihenfolge"
title="Steinreihenfolge"
description="Die je acht Steine pro Team werden alternierend gespielt. Zu beginn des Spiels wird jeweils ausgelost, welches
Team das Recht des letzten Stein bekommt. Das andere Team beginnt dann logischerweise das Spiel."
}}
{{> ruleitem
image="/rules/countOrder.svg"
imageAlt="Zählung des Spielstands"
title="Zählen des Spielstandes"
description="Um am Ende eines Spiels den Spielstand herauszufinden, werden die Steine vom Zentrum her weg gezählt. Sobald
ein gegnerischer Stein näher ist, zählen nur alle bis dahin gezählten Steine. Im obigen Spielstand wären das zwei Steine für
gelb, obwohl noch zwei rote Steine im Haus liegen."
}}
</div>
{{> footer }}