de3d4781f0
hodgepodge of 2 fragments which are put into house choice depending on the state. the alignment is done in a very not nice way.
165 lines
5.9 KiB
HTML
165 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- displays site properly based on user's device -->
|
|
|
|
<link
|
|
href="../public/output.css"
|
|
th:href="'public/output.css'"
|
|
rel="stylesheet"
|
|
/>
|
|
<link
|
|
rel="icon"
|
|
type="image/png"
|
|
sizes="32x32"
|
|
href="../public/images/favicon-32x32.png"
|
|
th:href="'public/images/favicon-32x32.png'"
|
|
/>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<title>Frontend Mentor | Rock, Paper, Scissors</title>
|
|
|
|
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
|
|
<style>
|
|
.attribution {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
}
|
|
.attribution a {
|
|
color: hsl(228, 45%, 44%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main
|
|
class="flex flex-col justify-between items-center pt-8 w-screen h-screen bg-gradient-to-b from-radial-gradient-top to-radial-gradient-bottom"
|
|
>
|
|
<section
|
|
id="heading"
|
|
class="flex flex-row items-center w-10/12 rounded-md border-[3px] border-header-outline h-[100px]"
|
|
>
|
|
<h1
|
|
class="pl-4 text-xl font-bold leading-none text-white uppercase grow"
|
|
>
|
|
<span class="block">rock</span> <span class="block">paper</span>
|
|
<span class="block">scissors</span>
|
|
</h1>
|
|
<h2
|
|
class="flex flex-col justify-around items-center py-2 mr-3 bg-white rounded-md w-[80px] h-[70px] text-score-text rouned-md"
|
|
>
|
|
<span class="text-xs uppercase">Score</span
|
|
><span class="text-4xl font-extrabold">12</span>
|
|
</h2>
|
|
</section>
|
|
|
|
<div id="showdown-table" th:fragment="showdown-table (showdownState)">
|
|
<section class="grid grid-cols-2 w-[375px] h-[300px]">
|
|
<div
|
|
id="players-choice"
|
|
class="flex relative flex-col items-center pt-14"
|
|
>
|
|
<!-- This will be imported fragment -->
|
|
<!-- <p th:text="${showdownState}">Hello</p> -->
|
|
<div
|
|
th:replace="index::choiceBadge (${showdownState.playersChoice})"
|
|
></div>
|
|
<div
|
|
th:remove="all"
|
|
id="rock"
|
|
class="top-[var(--top-offset)] left-[var(--left-offset)] w-[var(--diameter)] h-[var(--diameter)] bg-gradient-to-b rounded-full -translate-x-[var(--translation)] -translate-y-[var(--translation)] from-[var(--bg-bright)] to-[var(--bg-dark)]"
|
|
style="
|
|
--diameter: 8rem;
|
|
--bg-dark: hsl(349, 71%, 52%);
|
|
--bg-bright: hsl(349, 70%, 56%);
|
|
--top-offset: 0rem;
|
|
--left-offset: 0rem;
|
|
--translation: 0%;
|
|
position: relative;
|
|
"
|
|
>
|
|
<div
|
|
class="absolute top-1/2 left-1/2 w-3/4 h-3/4 bg-gradient-to-b from-gray-300 to-gray-100 rounded-full -translate-x-1/2 -translate-y-1/2"
|
|
></div>
|
|
<img
|
|
src="../public/images/icon-rock.svg"
|
|
class="absolute top-1/2 left-1/2 w-1/3 -translate-x-1/2 -translate-y-1/2"
|
|
/>
|
|
</div>
|
|
<p
|
|
class="absolute top-2/3 tracking-widest text-center text-white uppercase text-md"
|
|
>
|
|
You picked
|
|
</p>
|
|
</div>
|
|
|
|
<div id="house-choice"
|
|
class="flex relative flex-col items-center pt-14"
|
|
>
|
|
<!-- Here will be imported fragment -->
|
|
<!-- conditionally either house choice or request for house choice -->
|
|
<!-- <div th:text="${showdownState.houseChoice.nonEmpty} ? 'nonEmpty' : 'empty'">...</div> -->
|
|
<div
|
|
th:replace="${showdownState.houseChoice.nonEmpty} ? ~{index::choiceBadge (${showdownState.houseChoice.get})} : ~{::house-choice-placeholder}"
|
|
class="w-0 h-0"
|
|
th:class=""
|
|
>
|
|
...
|
|
</div>
|
|
<!-- This will be shown before the house made the choice, this will trigger timed request for house choice -->
|
|
<div class="w-full h-full" th:remove="all">
|
|
<div
|
|
class="flex relative flex-col items-center h-full"
|
|
th:fragment="house-choice-placeholder"
|
|
th:hx-get="'/house-choice/' + ${showdownState.playersChoice.c.name}"
|
|
hx-get="/house-choice/paper"
|
|
hx-target="#showdown-table"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<div
|
|
class="rounded-full mt-[1rem] bg-radial-gradient-top h-[100px] w-[100px]"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<p
|
|
class="absolute top-2/3 tracking-widest text-center text-white uppercase text-md"
|
|
>
|
|
The house picked
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
id="message"
|
|
class="flex flex-col items-center text-white"
|
|
th:classappend="${gameFinished} ? '' : 'invisible'"
|
|
>
|
|
<p class="text-6xl tracking-wide text-center uppercase">You lose</p>
|
|
<button
|
|
class="mt-6 w-9/12 h-12 tracking-widest uppercase bg-white rounded-xl text-radial-gradient-bottom"
|
|
>
|
|
Play again
|
|
</button>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="py-12">
|
|
<button
|
|
class="w-32 h-10 text-base text-2xl tracking-widest text-white uppercase rounded-lg border border-white"
|
|
>
|
|
Rules
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<footer class="fixed inset-x-0 bottom-0 attribution">
|
|
Challenge by
|
|
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
|
|
>Frontend Mentor</a
|
|
>. Coded by <a href="#">Your Name Here</a>.
|
|
</footer>
|
|
</body>
|
|
</html>
|