372fb5a6ad
couldn't make circles grow from the center, they still had shared top point. the templates are certainly not quite plesant to look at, with 2 states being showed into same big template. i suppose that animations for both hands in the showdow, and for single hand in showdown would be better stored in separate files. and maybe appended by the htmx replacements, but i'm feeling rushed
190 lines
7.2 KiB
HTML
190 lines
7.2 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>
|
|
<!-- This is end of the game animated halo -->
|
|
<div
|
|
class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[150px] h-[150px]"
|
|
th:classappend="${showdownState.gameResult.isEmpty} ? 'invisible' : 'quickly-appear'"
|
|
></div>
|
|
<div
|
|
class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[200px] h-[200px]"
|
|
th:classappend="${showdownState.gameResult.isEmpty} ? 'invisible' : 'quickly-appear'"
|
|
></div>
|
|
<div
|
|
class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[260px] h-[260px]"
|
|
th:classappend="${showdownState.gameResult.isEmpty} ? 'invisible' : 'quickly-appear'"
|
|
></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-trigger="load delay:3s"
|
|
hx-swap="outerHTML"
|
|
>
|
|
<div
|
|
class="rounded-full mt-[1rem] bg-radial-gradient-top h-[100px] w-[100px]"
|
|
></div>
|
|
<div
|
|
class="absolute bg-white rounded-full opacity-20 w-[100px] h-[100px] mt-[1rem] pulsing-animation"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<p
|
|
class="absolute top-2/3 tracking-widest text-center text-white uppercase text-md"
|
|
>
|
|
The house picked
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FRAGMENT : showdown result -->
|
|
<section
|
|
id="message"
|
|
class="flex flex-col items-center text-white slowly-appear"
|
|
th:classappend="${showdownState.gameResult.nonEmpty} ? '' : 'invisible'"
|
|
>
|
|
<p
|
|
class="text-6xl font-bold text-center uppercase"
|
|
th:text="${showdownState.gameResult.nonEmpty} ? 'You ' + ${showdownState.gameResult.get} : 'awesome'"
|
|
>
|
|
You lose
|
|
</p>
|
|
<a
|
|
class="grid place-content-center mt-6 w-9/12 h-12 tracking-widest uppercase bg-white rounded-xl text-radial-gradient-bottom"
|
|
href="/"
|
|
>
|
|
Play again
|
|
</a>
|
|
</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>
|