feat(14): manual request of house choice
hodgepodge of 2 fragments which are put into house choice depending on the state. the alignment is done in a very not nice way.
This commit is contained in:
efim
@@ -522,6 +522,10 @@ video {
|
||||
--tw-backdrop-sepia: ;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
@@ -559,6 +563,10 @@ video {
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.top-2\/3 {
|
||||
top: 66.666667%;
|
||||
}
|
||||
|
||||
.top-\[var\(--top-offset\)\] {
|
||||
top: var(--top-offset);
|
||||
}
|
||||
@@ -567,14 +575,22 @@ video {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-14 {
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.mt-\[4\.5rem\] {
|
||||
margin-top: 4.5rem;
|
||||
}
|
||||
|
||||
.mt-\[0\.5rem\] {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-\[1rem\] {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
@@ -587,6 +603,10 @@ video {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.h-10 {
|
||||
height: 2.5rem;
|
||||
}
|
||||
@@ -603,6 +623,10 @@ video {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.h-\[300px\] {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.h-\[375px\] {
|
||||
height: 375px;
|
||||
}
|
||||
@@ -619,6 +643,14 @@ video {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.h-full {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.h-0 {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
.w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
@@ -635,6 +667,10 @@ video {
|
||||
width: 8rem;
|
||||
}
|
||||
|
||||
.w-9\/12 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.w-\[100px\] {
|
||||
width: 100px;
|
||||
}
|
||||
@@ -651,12 +687,16 @@ video {
|
||||
width: var(--diameter);
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-screen {
|
||||
width: 100vw;
|
||||
.w-0 {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
.grow {
|
||||
@@ -815,8 +855,8 @@ video {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.pt-10 {
|
||||
padding-top: 2.5rem;
|
||||
.pt-14 {
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
@@ -896,8 +936,6 @@ video {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
/* div, section, span, p { */
|
||||
|
||||
/* outline: 1px solid red; */
|
||||
|
||||
/* } */
|
||||
div, section, span, p {
|
||||
outline: 1px solid red;
|
||||
}
|
||||
|
||||
@@ -56,64 +56,95 @@
|
||||
</h2>
|
||||
</section>
|
||||
|
||||
<section id="showdown-table" class="grid grid-cols-2 w-[375px] h-[375px]"
|
||||
th:fragment="showdown-table"
|
||||
>
|
||||
<div id="players-choice"
|
||||
class="flex relative flex-col items-center pt-10"
|
||||
>
|
||||
<!-- This will be imported fragment -->
|
||||
<!-- <p th:text="${playersChoiceData.c.toString}">Hello</p> -->
|
||||
<div th:replace="index::choiceBadge (${playersChoiceData})"> </div>
|
||||
<div id="showdown-table" th:fragment="showdown-table (showdownState)">
|
||||
<section class="grid grid-cols-2 w-[375px] h-[300px]">
|
||||
<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;
|
||||
"
|
||||
id="players-choice"
|
||||
class="flex relative flex-col items-center pt-14"
|
||||
>
|
||||
<!-- This will be imported fragment -->
|
||||
<!-- <p th:text="${showdownState}">Hello</p> -->
|
||||
<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"
|
||||
th:replace="index::choiceBadge (${showdownState.playersChoice})"
|
||||
></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
|
||||
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>
|
||||
<p class="absolute top-1/2 tracking-widest text-center text-white uppercase text-md">You picked</p>
|
||||
</div>
|
||||
|
||||
<div id="house-choice"
|
||||
class="flex relative flex-col items-center"
|
||||
>
|
||||
<!-- This will be imported fragment -->
|
||||
<div
|
||||
class="mt-14 rounded-full bg-radial-gradient-top h-[100px] w-[100px]"
|
||||
<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>
|
||||
<p class="absolute top-1/2 tracking-widest text-center text-white uppercase text-md">The house picked</p>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="message"
|
||||
class="text-white"
|
||||
>
|
||||
<p
|
||||
class="text-6xl tracking-wide uppercase"
|
||||
>You lose</p>
|
||||
<button
|
||||
class="mt-6 w-full h-12 tracking-widest uppercase bg-white rounded-xl text-radial-gradient-bottom"
|
||||
>Play again</button>
|
||||
|
||||
</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
|
||||
|
||||
Reference in New Issue
Block a user