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

Compare commits

base: efim:9ddd9d39439732edb0fa07a45cb5fe97e40c22c1
Branches Tags
efim:master
..
compare: efim:b67b3cdc89b5c0282f31bab69acc7b80c0ee6beb
Branches Tags
efim:master

No commits in common. "9ddd9d39439732edb0fa07a45cb5fe97e40c22c1" and "b67b3cdc89b5c0282f31bab69acc7b80c0ee6beb" have entirely different histories.
9ddd9d3943 ... b67b3cdc89

4 changed files with 28 additions and 136 deletions
Show Stats Expand all files Collapse all files

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

@ -1032,90 +1032,3 @@ video {
animation: quickly-appear 2s;
transform-origin: center;
}
@media (min-width: 768px) {
.md\:absolute {
position: absolute;
}
.md\:end-5 {
inset-inline-end: 1.25rem;
}
.md\:top-5 {
top: 1.25rem;
}
.md\:mr-5 {
margin-right: 1.25rem;
}
.md\:h-12 {
height: 3rem;
}
.md\:h-36 {
height: 9rem;
}
.md\:h-4\/5 {
height: 80%;
}
.md\:h-\[400px\] {
height: 400px;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:w-12 {
width: 3rem;
}
.md\:w-40 {
width: 10rem;
}
.md\:w-\[400px\] {
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;
}
.md\:rounded-xl {
border-radius: 0.75rem;
}
.md\:text-5xl {
font-size: 3rem;
line-height: 1;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.md\:text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.md\:leading-\[2\.2rem\] {
line-height: 2.2rem;
}
.md\:leading-none {
line-height: 1;
}
}

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

@ -41,19 +41,19 @@
>
<section
id="heading"
class="flex flex-row items-center w-10/12 rounded-md md:w-1/2 md:h-36 md:rounded-xl border-[3px] border-header-outline h-[100px]"
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 md:text-5xl grow md:leading-[2.2rem]"
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 md:mr-5 md:w-40 md:h-4/5 md:rounded-lg w-[80px] h-[70px] text-score-text rouned-md"
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 md:text-xl md:leading-none">Score</span>
<span id="the-score-number" class="text-4xl font-extrabold md:text-6xl">12</span>
<span class="text-xs uppercase">Score</span>
<span id="the-score-number" class="text-4xl font-extrabold">12</span>
<script type="text/javascript">
document.body.addEventListener("updateScore", function (evt) {
let scoreElement = document.querySelector("#the-score-number");
@ -83,7 +83,7 @@
<section
id="controls"
class="bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative md:scale-150"
class="bg-center bg-no-repeat bg-60% bg-triangle-pattern w-[375px] h-[375px] relative"
>
<!-- This control will be repeated 3 times, with different htmx requests -->
<div
@ -178,28 +178,22 @@
<!-- This is rules overlay modal window -->
<dialog
id="rules-dialog"
class="w-screen h-screen md:rounded-lg md:w-[400px] md:h-[400px]"
class="w-screen h-screen"
>
<div class="flex flex-col justify-between w-full h-full">
<div
class="flex flex-col justify-between w-full h-full"
>
<h1
class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase md:h-12"
>
Rules
</h1>
class="grid place-content-center h-1/4 text-3xl font-bold tracking-wide uppercase"
>Rules</h1>
<div class="grid place-content-center grow">
<img
src="../public/images/image-rules.svg"
alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock."
/>
<img src="../public/images/image-rules.svg" alt="Rules of the game: rock beats scissors, scissors beat paper, paper beats rock." />
</div>
<button
id="close-dialog-button"
class="grid place-content-center h-32 md:absolute md:top-5 md:w-12 md:h-12 md:end-5"
class="grid place-content-center h-32"
>
<img
src="../public/images/icon-close.svg"
alt="Close rules display"
/>
<img src="../public/images/icon-close.svg" alt="Close rules display" />
</button>
</div>
</dialog>
@ -212,15 +206,15 @@
Rules
</button>
<script type="text/javascript">
const dialog = document.getElementById("rules-dialog");
const openButton = document.getElementById("rules-button");
const closeButton = document.getElementById("close-dialog-button");
openButton.addEventListener("click", function () {
dialog.showModal();
});
closeButton.addEventListener("click", function () {
dialog.close();
});
const dialog = document.getElementById("rules-dialog");
const openButton = document.getElementById("rules-button");
const closeButton = document.getElementById("close-dialog-button");
openButton.addEventListener("click", function() {
dialog.showModal();
});
closeButton.addEventListener("click", function() {
dialog.close();
});
</script>
</div>
</main>

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)" class="md:scale-150">
<div id="showdown-table" th:fragment="showdown-table (showdownState)">
<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.isPlayerWin} ? 'quickly-appear' : 'invisible' "
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.isPlayerWin} ? 'quickly-appear' : 'invisible' "
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.isPlayerWin} ? 'quickly-appear' : 'invisible' "
th:classappend="${showdownState.gameResult.isEmpty} ? 'invisible' : 'quickly-appear'"
></div>
<div
th:remove="all"
@ -123,19 +123,6 @@
>
...
</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,8 +124,6 @@ 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