Merge pull request #2807 from codecrafters-io/arpan/cc-1698-add-rive-animation-for-gleam-icon

Arpan-206 · web-flow · commit f4f592f7dc25 · 2025-05-27T20:43:42.000+01:00
Animation on hover w/ Gleam Logo
diff --git a/app/components/rive-animation.hbs b/app/components/rive-animation.hbs
@@ -0,0 +1 @@
+<canvas {{did-insert this.handleDidInsert}} {{will-destroy this.handleWillDestroy}} class="w-full h-full block max-w-full" ...attributes></canvas>
diff --git a/app/components/rive-animation.ts b/app/components/rive-animation.ts
@@ -0,0 +1,71 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { Fit, Layout, Rive } from '@rive-app/canvas';
+import * as Sentry from '@sentry/ember';
+
+interface Signature {
+  Element: HTMLCanvasElement;
+  Args: {
+    src: string;
+  };
+}
+
+export default class RiveAnimationComponent extends Component<Signature> {
+  resizeObserver: ResizeObserver | null = null;
+  @tracked riveInstance: Rive | null = null;
+
+  @action
+  handleDidInsert(element: HTMLCanvasElement) {
+    // Set up ResizeObserver to handle canvas resizing
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.riveInstance) {
+        this.riveInstance.resizeDrawingSurfaceToCanvas();
+      }
+    });
+
+    // Observe the canvas element itself
+    this.resizeObserver.observe(element);
+
+    try {
+      this.riveInstance = new Rive({
+        src: this.args.src,
+        canvas: element,
+        stateMachines: 'Default',
+        autoplay: true,
+        automaticallyHandleEvents: true,
+        layout: new Layout({
+          fit: Fit.Contain,
+        }),
+        onLoad: async () => {
+          if (this.riveInstance) {
+            // Initial resize
+            this.riveInstance.resizeDrawingSurfaceToCanvas();
+          }
+        },
+      });
+    } catch (error: unknown) {
+      console.error('Error setting up Rive:', error);
+      Sentry.captureException(error);
+    }
+  }
+
+  @action
+  handleWillDestroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    if (this.riveInstance) {
+      this.riveInstance.stop();
+      this.riveInstance = null;
+    }
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    RiveAnimation: typeof RiveAnimationComponent;
+  }
+}
diff --git a/app/components/track-page/header/index.hbs b/app/components/track-page/header/index.hbs
@@ -6,7 +6,11 @@
         {{@language.name}}.
       </h1>
       <div class="flex md:hidden h-12 w-12 flex-shrink-0">
-        <LanguageLogo @language={{@language}} @variant="color" class="dark:opacity-90" />
+        {{#if (eq @language.name "Gleam")}}
+          <RiveAnimation @src="/assets/animations/gleam_logo_animation.riv" />
+        {{else}}
+          <LanguageLogo @language={{@language}} @variant="color" class="dark:opacity-90" />
+        {{/if}}
       </div>
     </div>
 
@@ -54,6 +58,10 @@
     {{/if}}
   </div>
   <div class="ml-4 hidden md:flex h-36 w-36 flex-shrink-0">
-    <LanguageLogo @language={{@language}} @variant="color" class="dark:opacity-90" />
+    {{#if (eq @language.name "Gleam")}}
+      <RiveAnimation @src="/assets/animations/gleam_logo_animation.riv" />
+    {{else}}
+      <LanguageLogo @language={{@language}} @variant="color" class="dark:opacity-90" />
+    {{/if}}
   </div>
 </div>
diff --git a/app/router.ts b/app/router.ts
@@ -111,5 +111,6 @@ Router.map(function () {
     this.route('dark-mode-toggle');
     this.route('file-contents-card');
     this.route('file-diff-card');
+    this.route('rive-animation');
   });
 });
diff --git a/app/routes/demo/rive-animation.ts b/app/routes/demo/rive-animation.ts
@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+import RouteInfoMetadata, { RouteColorScheme } from 'codecrafters-frontend/utils/route-info-metadata';
+
+export default class DemoRiveAnimationRoute extends Route {
+  buildRouteInfoMetadata() {
+    return new RouteInfoMetadata({ colorScheme: RouteColorScheme.Both });
+  }
+}
diff --git a/app/templates/demo.hbs b/app/templates/demo.hbs
@@ -49,6 +49,16 @@
           class={{if (eq this.router.currentRouteName "demo.dark-mode-toggle") "font-medium text-teal-500" "text-gray-600 dark:text-gray-200"}}
         >DarkModeToggle</span>
       </LinkTo>
+      <LinkTo
+        @route="demo.rive-animation"
+        role="button"
+        class="flex flex-shrink-0 items-center px-3 py-2 mr-2 border-b-2 text-sm
+          {{if (eq this.router.currentRouteName 'demo.rive-animation') 'border-teal-500' 'border-gray-100 dark:border-gray-700'}}"
+      >
+        <span
+          class={{if (eq this.router.currentRouteName "demo.rive-animation") "font-medium text-teal-500" "text-gray-600 dark:text-gray-200"}}
+        >RiveAnimation</span>
+      </LinkTo>
     </div>
 
     {{outlet}}
diff --git a/app/templates/demo/rive-animation.hbs b/app/templates/demo/rive-animation.hbs
@@ -0,0 +1,40 @@
+{{page-title "Rive Animation Demo"}}
+
+<div class="space-y-8">
+  <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+    <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Default Size</h2>
+    <div class="flex justify-center h-[400px]">
+      <RiveAnimation @src="/assets/animations/gleam_logo_animation.riv" />
+    </div>
+  </div>
+
+  <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+    <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Custom Size (200px)</h2>
+    <div class="flex justify-center h-[200px]">
+      <RiveAnimation @src="/assets/animations/gleam_logo_animation.riv" />
+    </div>
+  </div>
+
+  <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+    <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Small Size (100px)</h2>
+    <div class="flex justify-center h-[100px]">
+      <RiveAnimation @src="/assets/animations/gleam_logo_animation.riv" />
+    </div>
+  </div>
+
+  {{! Test pig_cuddly.riv }}
+  <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+    <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Test pig_cuddly.riv</h2>
+    <div class="flex justify-center h-[400px]">
+      <RiveAnimation @src="/assets/animations/pig_cuddly.riv" />
+    </div>
+  </div>
+
+  {{! Test capy_walking.riv }}
+  <div class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm">
+    <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-200 mb-4">Test capy_walking.riv</h2>
+    <div class="flex justify-center h-[400px]">
+      <RiveAnimation @src="/assets/animations/capy_walking.riv" />
+    </div>
+  </div>
+</div>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -202,6 +202,7 @@
   },
   "dependencies": {
     "@rails/actioncable": "^8.0.200",
+    "@rive-app/canvas": "^2.27.0",
     "@stripe/stripe-js": "^5.5.0",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.16",
diff --git a/public/assets/animations/capy_walking.riv b/public/assets/animations/capy_walking.riv
diff --git a/public/assets/animations/gleam_logo_animation.riv b/public/assets/animations/gleam_logo_animation.riv
diff --git a/public/assets/animations/pig_cuddly.riv b/public/assets/animations/pig_cuddly.riv
diff --git a/tests/integration/components/rive-animation-test.js b/tests/integration/components/rive-animation-test.js
@@ -0,0 +1,111 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'codecrafters-frontend/tests/helpers';
+import { render, settled, waitUntil } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rive-animation', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders and initializes correctly', async function (assert) {
+    await render(hbs`
+      <div class="w-[200px] h-[200px]">
+        <RiveAnimation @src="/assets/animations/gleam_logo_animation.riv" />
+      </div>
+    `);
+
+    // Check that canvas is rendered with correct classes
+    const canvas = this.element.querySelector('canvas');
+    assert.ok(canvas, 'Canvas element exists');
+    assert.strictEqual(canvas?.className, 'w-full h-full block max-w-full', 'Canvas has correct classes');
+
+    // Wait for the animation to load and render
+    await settled();
+
+    // Wait until the canvas has non-transparent pixels
+    await waitUntil(() => {
+      const context = canvas.getContext('2d');
+      if (!context) return false;
+
+      const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
+
+      for (let i = 0; i < imageData.length; i += 4) {
+        if (imageData[i + 3] !== 0) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
+    // Check that canvas has been initialized
+    assert.ok(canvas.width > 0, 'Canvas has width');
+    assert.ok(canvas.height > 0, 'Canvas has height');
+    const context = canvas.getContext('2d');
+    assert.ok(context, 'Canvas has 2D context');
+
+    // Check for non-transparent pixels
+    const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
+    let hasNonTransparentPixels = false;
+
+    for (let i = 0; i < imageData.length; i += 4) {
+      if (imageData[i + 3] !== 0) {
+        // Check alpha channel
+        hasNonTransparentPixels = true;
+        break;
+      }
+    }
+
+    assert.ok(hasNonTransparentPixels, 'Canvas has non-transparent pixels');
+  });
+
+  test('it works with different animation files', async function (assert) {
+    await render(hbs`
+      <div class="w-[200px] h-[200px]">
+        <RiveAnimation @src="/assets/animations/pig_cuddly.riv" />
+      </div>
+    `);
+
+    const canvas = this.element.querySelector('canvas');
+    assert.ok(canvas, 'Canvas element exists');
+    assert.strictEqual(canvas?.className, 'w-full h-full block max-w-full', 'Canvas has correct classes');
+
+    // Wait for the animation to load and render
+    await settled();
+
+    // Wait until the canvas has non-transparent pixels
+    await waitUntil(() => {
+      const context = canvas.getContext('2d');
+      if (!context) return false;
+
+      const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
+
+      for (let i = 0; i < imageData.length; i += 4) {
+        if (imageData[i + 3] !== 0) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
+    // Check that canvas has been initialized
+    assert.ok(canvas.width > 0, 'Canvas has width');
+    assert.ok(canvas.height > 0, 'Canvas has height');
+    const context = canvas.getContext('2d');
+    assert.ok(context, 'Canvas has 2D context');
+
+    // Check for non-transparent pixels
+    const imageData = context.getImageData(0, 0, canvas.width, canvas.height).data;
+    let hasNonTransparentPixels = false;
+
+    for (let i = 0; i < imageData.length; i += 4) {
+      if (imageData[i + 3] !== 0) {
+        // Check alpha channel
+        hasNonTransparentPixels = true;
+        break;
+      }
+    }
+
+    assert.ok(hasNonTransparentPixels, 'Canvas has non-transparent pixels');
+  });
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<canvas {{did-insert this.handleDidInsert}} {{will-destroy this.handleWillDestroy}} class="w-full h-full block max-w-full" ...attributes></canvas>`