itsscb/wordl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): adds animations

Browse Source 
feat(frontend): adds animations
This commit is contained in:
itsscb 2024-08-30 15:54:50 +02:00 committed by GitHub
commit 2a15222d12
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 329 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -9,6 +10,15 @@
<link data-trunk rel="copy-dir" href="public"> <link data-trunk rel="copy-dir" href="public">
<link rel="manifest" href="public/manifest.json" /> <link rel="manifest" href="public/manifest.json" />
</head> </head>
<body class="bg-black text-white"> <body class="bg-black text-white">
<div class="h-screen flex justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 rotate-ease" viewBox="0 -960 960 960" fill="white">
<path
d="M320-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Zm320-80Zm0-640Z" />
</svg>
<p>Loading...</p>
</div>
</body> </body>
</html> </html>

79
frontend/input.css
View File

@ -2,6 +2,46 @@
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.rotate-box {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.rotate-ease {
animation: rotate-ease 2s ease-in-out infinite;
/* Total duration of 4 seconds */
}
@keyframes rotate-ease {
0% {
transform: rotate(0deg);
}
45% {
transform: rotate(180deg);
/* Rotate to 180 degrees */
}
55% {
transform: rotate(180deg);
/* Hold at 180 degrees */
}
100% {
transform: rotate(360deg);
/* Rotate to 360 degrees */
}
}
.logo { .logo {
@apply absolute; @apply absolute;
} }
@ -20,16 +60,20 @@
transform: translateX(-200%); transform: translateX(-200%);
opacity: 0; opacity: 0;
} }
70% { 70% {
transform: translateX(0); transform: translateX(0);
opacity: 0.7; opacity: 0.7;
} }
80% { 80% {
opacity: 1; opacity: 1;
} }
90% { 90% {
opacity: 0.8; opacity: 0.8;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
@ -46,25 +90,31 @@
transform: translateX(500%); transform: translateX(500%);
opacity: 0; opacity: 0;
} }
70% { 70% {
opacity: 0.7; opacity: 0.7;
} }
80% { 80% {
transform: translateX(0); transform: translateX(0);
opacity: 1; opacity: 1;
} }
90% { 90% {
opacity: 0.8; opacity: 0.8;
} }
100% { 100% {
opacity: 1; opacity: 1;
} }
} }
@keyframes logo-fadein-left { @keyframes logo-fadein-left {
from { from {
left: -200%; left: -200%;
opacity: 0.5; opacity: 0.5;
} }
to { to {
left: 0; left: 0;
opacity: 1; opacity: 1;
@ -74,46 +124,61 @@
.fade-in { .fade-in {
position: relative; position: relative;
animation:fadein 0.4s} animation: fadein 0.4s
}
@keyframes fadein { @keyframes fadein {
from { from {
left: 200%; left: 200%;
opacity: 0; opacity: 0;
} to{ }
to {
left: 0; left: 0;
opacity:1} opacity: 1
}
} }
.fade-out { .fade-out {
position: relative; position: relative;
animation:fadeout 0.4s} animation: fadeout 0.4s
}
@keyframes fadeout { @keyframes fadeout {
from { from {
left: 0; left: 0;
opacity: 0 opacity: 0
} to{ }
to {
left: -200%; left: -200%;
opacity:1} opacity: 1
}
} }
.mail-animation { .mail-animation {
position: relative; position: relative;
animation: mail-animation 2s infinite; animation: mail-animation 2s infinite;
} }
@keyframes mail-animation { @keyframes mail-animation {
0% { 0% {
left: -20%; left: -20%;
opacity: 0.5; opacity: 0.5;
} }
20% { 20% {
opacity: 1; opacity: 1;
} }
70% { 70% {
left: 20%; left: 20%;
} }
80% { 80% {
opacity: 1; opacity: 1;
} }
100% { 100% {
left: 100%; left: 100%;
opacity: 0; opacity: 0;
@ -164,6 +229,7 @@ opacity:1}
.border-error { .border-error {
border-color: rgba(255, 82, 82, 1.0) !important; border-color: rgba(255, 82, 82, 1.0) !important;
} }
.accent-primary { .accent-primary {
accent-color: rgba(51, 217, 178, 1.0); accent-color: rgba(51, 217, 178, 1.0);
} }
@ -199,4 +265,3 @@ opacity:1}
.bg-secondary { .bg-secondary {
background-color: rgba(52, 172, 224, 1.0); background-color: rgba(52, 172, 224, 1.0);
} }

17
frontend/src/pages/home.rs
View File

@ -363,6 +363,13 @@ pub fn Home() -> Html {
) )
} }
> >
if *loading {
<svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16 rotate-ease" viewBox="0 -960 960 960" fill="white">
<path d="M320-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Zm320-80Zm0-640Z"/>
</svg>
<p>{"Loading..."}</p>
} else {
<div <div
class={ class={
classes!( classes!(
@ -396,10 +403,7 @@ pub fn Home() -> Html {
} }
> >
{ {
if *loading { if *game_over {
html!(<p>{"Loading..."}</p>)
}
else if *game_over {
let (text, color) = match *result { let (text, color) = match *result {
GameResult::Win => { GameResult::Win => {
@ -533,8 +537,8 @@ pub fn Home() -> Html {
{ {
if *game_over { if *game_over {
html!{ html!{
<svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12" viewBox="0 -960 960 960" fill="white"> <svg xmlns="http://www.w3.org/2000/svg" class="w-12 h-12 rotate-box" viewBox="0 -960 960 960" fill="white">
<path d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z"/> <path d="M440-122q-121-15-200.5-105.5T160-440q0-66 26-126.5T260-672l57 57q-38 34-57.5 79T240-440q0 88 56 155.5T440-202v80Zm80 0v-80q87-16 143.5-83T720-440q0-100-70-170t-170-70h-3l44 44-56 56-140-140 140-140 56 56-44 44h3q134 0 227 93t93 227q0 121-79.5 211.5T520-122Z"/>
</svg> </svg>
} }
} }
@ -559,6 +563,7 @@ pub fn Home() -> Html {
} }
</div> </div>
}
</div> </div>
} }
} }