animated welcome icons

oatear · Jan 15, 2025 · 8b9dafa · 8b9dafa
1 parent e01cb46
commit 8b9dafa
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 5 deletions.
diff --git a/cider-app/src/app/welcome/welcome.component.html b/cider-app/src/app/welcome/welcome.component.html
@@ -8,14 +8,17 @@
     <p-button label="Sample Card Game"
         (click)="newProject(false)"></p-button>
     <ng-container *ngFor="let projectUrl of recentProjectUrls">
-        <p-button [label]="projectUrl.name" 
+        <p-button styleClass="project-button"
+        [label]="projectUrl.name" 
         (mouseover)="projectUrl.hover = true"
         (mouseout)="projectUrl.hover = false"
         (click)="openProject(projectUrl.url)"
         [style]="{
             'background': projectUrl.hover 
-            ? 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 19% 50%) 0%, hsl(' + projectUrl.hue2 + ' 19% 50%) 100%)'
-            : 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 19% 45%) 0%, hsl(' + projectUrl.hue2 + ' 19% 45%) 100%)'
+            ? 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 50% 50%), 
+                hsl(' + projectUrl.hue2 + ' 50% 50%)) 0% 0% / 250% 250%'
+            : 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 50% 45%), 
+                hsl(' + projectUrl.hue2 + ' 50% 45%)) 0% 0% / 250% 250%'
         }"></p-button>
     </ng-container>
 </p-card>

diff --git a/cider-app/src/app/welcome/welcome.component.scss b/cider-app/src/app/welcome/welcome.component.scss
@@ -12,12 +12,31 @@
         &:hover {
             background: #404d61;
         }
+        &.project-button {
+            animation: gradient 10s ease infinite;
+        }
     }
 }
 
+@keyframes gradient {
+	0% {
+		background-position: 0% 50%;
+	}
+	50% {
+		background-position: 100% 50%;
+	}
+	100% {
+		background-position: 0% 50%;
+	}
+}
+
 :host ::ng-deep .artwork-card {
     margin: 25px;
     height: 300px;
     background: url(^assets/crystal-cave.png);
     background-size: auto 300px;
+}
+
+:host ::ng-deep p-card > div.p-card {
+    margin-right: 10px;
 }
diff --git a/cider-app/src/app/welcome/welcome.component.ts b/cider-app/src/app/welcome/welcome.component.ts
@@ -50,12 +50,12 @@ export class WelcomeComponent implements OnInit {
       this.recentProjectUrls = urls.map(url => {
         let name = StringUtils.lastDirectoryFromUrl(url);
         let hue = this.calculateHue(name);
-        let hue2diff = 60;
+        let hue2diff = 120;
         return {
           url: url,
           name: name,
           hue: hue,
-          hue2: hue + hue2diff > 255 ? hue - hue2diff : hue + hue2diff,
+          hue2: (hue + hue2diff) % 360,
           hover: false
         }
       });