Animation on hover w/ Gleam Logo

app/components/gleam-logo.hbs

@@ -0,0 +1,3 @@
+<div {{did-insert this.handleDidInsert}} {{will-destroy this.cleanupRive}} style={{this.containerStyle}} ...attributes>
+  {{! The canvas will be inserted here by Rive }}
+</div>

app/components/gleam-logo.ts

@@ -0,0 +1,114 @@
+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 GleamLogoSignature {
+  Element: HTMLDivElement;
+
+  Args: {
+    height: number;
+  };
+
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class GleamLogoComponent extends Component<GleamLogoSignature> {
+  animationInterval: number | null = null;
+  container: HTMLElement | null = null;
+  @tracked riveInstance: Rive | null = null;
+
+  get containerStyle(): string {
+    // Ensure minimum size on mobile while maintaining aspect ratio
+    const minSize = Math.min(this.args.height, 200);
+
+    return `height: ${minSize}px; width: ${minSize}px; max-width: 100%;`;
+  }
+
+  @action
+  cleanupRive() {
+    if (this.animationInterval) {
+      clearInterval(this.animationInterval);
+      this.animationInterval = null;
+    }
+
+    if (this.riveInstance) {
+      this.riveInstance.stop();
+      this.riveInstance = null;
+    }
+  }
+
+  @action
+  handleDidInsert(element: HTMLDivElement) {
+    this.container = element;
+
+    try {
+      const canvas = document.createElement('canvas');
+
+      // Set initial canvas size for high quality
+      const baseSize = 400; // Base size for quality
+      canvas.width = baseSize;
+      canvas.height = baseSize;
+
+      // Let the canvas scale naturally within its container
+      canvas.style.width = '100%';
+      canvas.style.height = '100%';
+      canvas.style.display = 'block';
+      canvas.style.maxWidth = '100%'; // Ensure it doesn't overflow on mobile
+
+      element.appendChild(canvas);
+
+      this.riveInstance = new Rive({
+        src: '/assets/animations/gleam_logo_animation.riv',
+        canvas: canvas,
+        stateMachines: 'State Machine 1',
+        autoplay: true,
+        automaticallyHandleEvents: true,
+        layout: new Layout({
+          fit: Fit.Contain,
+        }),
+        onLoad: () => {
+          if (this.riveInstance) {
+            // Initial resize
+            this.riveInstance.resizeDrawingSurfaceToCanvas();
+
+            const inputs = this.riveInstance.stateMachineInputs('State Machine 1');
+
+            // Try to trigger hover state
+            if (inputs) {
+              inputs.forEach((input) => {
+                if (input.name.toLowerCase().includes('hover')) {
+                  input.value = true;
+
+                  // Set timeout to trigger hover out after 1 second
+                  setTimeout(() => {
+                    if (this.riveInstance) {
+                      input.value = false;
+                    }
+                  }, 1000);
+                }
+              });
+            }
+          }
+        },
+      });
+    } catch (error: unknown) {
+      console.error('Error setting up Rive:', error);
+      Sentry.captureException(error, {
+        tags: {
+          component: 'GleamLogo',
+          action: 'handleDidInsert',
+        },
+      });
+    }
+  }
+}
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    GleamLogo: typeof GleamLogoComponent;
+  }
+}

app/components/language-logo.hbs

@@ -1,4 +1,6 @@
-{{#if (eq @variant "color")}}
+{{#if (and (eq @language.slug "gleam") (eq @variant "color"))}}
+  <GleamLogo @height={{144}} ...attributes />
+{{else if (eq @variant "color")}}
   <img alt={{@language.name}} src="{{@language.colorLogoUrl}}" ...attributes />
 {{else if (eq @variant "gray")}}
   <img alt={{@language.name}} src="{{@language.grayLogoUrl}}" ...attributes />

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",

tests/integration/components/gleam-logo-test.js

@@ -0,0 +1,134 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'codecrafters-frontend/tests/helpers';
+import { render, settled } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+// Mock Rive class for testing
+class MockRive {
+  constructor(options) {
+    this.canvas = options.canvas;
+    this._listeners = new Map();
+    this._onLoadCallback = null;
+  }
+
+  off(event, callback) {
+    const listeners = this._listeners.get(event);
+
+    if (listeners) {
+      const index = listeners.indexOf(callback);
+
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    }
+  }
+
+  on(event, callback) {
+    if (!this._listeners.has(event)) {
+      this._listeners.set(event, []);
+    }
+
+    this._listeners.get(event)?.push(callback);
+  }
+
+  resizeDrawingSurfaceToCanvas() {
+    // No-op for test
+  }
+
+  simulateLoad() {
+    if (this._onLoadCallback) {
+      this._onLoadCallback();
+    }
+  }
+
+  stateMachineInputs() {
+    return [
+      {
+        name: 'Hover',
+        value: false,
+        type: 'boolean',
+      },
+    ];
+  }
+
+  stop() {
+    // No-op for test
+  }
+
+  triggerEvent(event, ...args) {
+    const listeners = this._listeners.get(event);
+
+    if (listeners) {
+      listeners.forEach((callback) => callback(event, ...args));
+    }
+  }
+}
+
+module('Integration | Component | gleam-logo', function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.originalRive = window.Rive;
+    window.Rive = class MockRiveConstructor {
+      constructor(options) {
+        const instance = new MockRive(options);
+        this._onLoadCallback = options.onLoad;
+
+        return instance;
+      }
+    };
+  });
+
+  hooks.afterEach(function () {
+    window.Rive = this.originalRive;
+  });
+
+  test('it renders and initializes correctly', async function (assert) {
+    await render(hbs`<GleamLogo @height={{200}} />`);
+
+    // Check container dimensions
+    const container = this.element.querySelector('div');
+    assert.ok(container, 'Container element exists');
+    assert.strictEqual(container?.style.height, '200px', 'Height is set correctly');
+    assert.strictEqual(container?.style.width, '200px', 'Width is set correctly');
+
+    // Check canvas dimensions and styles
+    const canvas = this.element.querySelector('canvas');
+    assert.ok(canvas, 'Canvas element exists');
+    assert.strictEqual(canvas?.width, 400, 'Canvas width is set to base size for quality');
+    assert.strictEqual(canvas?.height, 400, 'Canvas height is set to base size for quality');
+    assert.strictEqual(canvas?.style.width, '100%', 'Canvas width style is set correctly');
+    assert.strictEqual(canvas?.style.height, '100%', 'Canvas height style is set correctly');
+    assert.strictEqual(canvas?.style.display, 'block', 'Canvas display style is set correctly');
+    assert.strictEqual(canvas?.style.maxWidth, '100%', 'Canvas max-width style is set correctly');
+  });
+
+  test('it handles hover state correctly', async function (assert) {
+    await render(hbs`<GleamLogo />`);
+
+    const container = this.element.querySelector('div');
+    assert.ok(container, 'Container exists');
+
+    // Create and attach mock Rive instance
+    const mockRive = new MockRive({ canvas: container.querySelector('canvas') });
+    container.__riveInstance = mockRive;
+    assert.ok(mockRive, 'Rive instance exists');
+
+    // Simulate Rive load event
+    mockRive.simulateLoad();
+    await settled();
+
+    const inputs = mockRive.stateMachineInputs();
+    assert.ok(inputs, 'State machine inputs exist');
+
+    const hoverInput = inputs.find((input) => input.name.toLowerCase().includes('hover'));
+    assert.ok(hoverInput, 'Hover input exists');
+
+    // Verify initial hover state
+    assert.false(hoverInput.value, 'Hover input is initially false');
+
+    // Wait for hover out timeout
+    await settled();
+    assert.false(hoverInput.value, 'Hover input is set to false after timeout');
+  });
+});