efim
/
Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(14): halo should be around winning hand

This commit is contained in:
efim 2023-07-02 12:31:18 +00:00
parent 59cab44920
commit 9ddd9d3943
4 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
14-rock-paper-scissors/src/main/resources/public/output.css
View File

@ -1082,6 +1082,12 @@ video {
width: 400px;
}
.md\:scale-150 {
--tw-scale-x: 1.5;
--tw-scale-y: 1.5;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.md\:rounded-lg {
border-radius: 0.5rem;
}

2
14-rock-paper-scissors/src/main/resources/templates/index.html
View File

@ -83,7 +83,7 @@
<section
id="controls"
class="bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative"
class="bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative md:scale-150"
>
<!-- This control will be repeated 3 times, with different htmx requests -->
<div

21
14-rock-paper-scissors/src/main/resources/templates/showdown.html
View File

@ -56,7 +56,7 @@
</h2>
</section>
<div id="showdown-table" th:fragment="showdown-table (showdownState)">
<div id="showdown-table" th:fragment="showdown-table (showdownState)" class="md:scale-150">
<section class="grid grid-cols-2 w-[375px] h-[300px]">
<div
id="players-choice"
@ -70,15 +70,15 @@
<!-- 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'"
th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
></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'"
th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
></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'"
th:classappend="${showdownState.isPlayerWin} ? 'quickly-appear' : 'invisible' "
></div>
<div
th:remove="all"
@ -123,6 +123,19 @@
>
...
</div>
<!-- This is end of the game animated halo for house choice -->
<div
class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[150px] h-[150px]"
th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
></div>
<div
class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[200px] h-[200px]"
th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
></div>
<div
class="absolute mt-16 bg-white rounded-full opacity-5 -translate-y-1/2 w-[260px] h-[260px]"
th:classappend="${showdownState.isHouseWin} ? 'quickly-appear' : 'invisible' "
></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

2
14-rock-paper-scissors/src/main/scala/rockpaperscissors/Models.scala
View File

@ -124,6 +124,8 @@ position: absolute;
} else "lose"
})
}
def isHouseWin: Boolean = gameResult.contains("lose")
def isPlayerWin: Boolean = gameResult.contains("win")
def scoreChange: Int = {
houseChoice.map(houseSelectedChoice => {
val player = playersChoice.c