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,108 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { Rive, Layout, Fit } from '@rive-app/canvas';
+
+interface GleamLogoSignature {
+  Element: HTMLDivElement;
+
+  Args: {
+    height: number;
+  };
+
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class GleamLogoComponent extends Component<GleamLogoSignature> {
+  @tracked riveInstance: Rive | null = null;
+  container: HTMLElement | null = null;
+  animationInterval: number | null = null;
+
+  get containerStyle(): string {
+    return `height: ${this.args.height}px; width: auto;`;
+  }
+
+  @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
+      canvas.width = 400; // Base size for quality
+      canvas.height = 400; // Will adjust based on container
+
+      // Let the canvas scale naturally within its container
+      canvas.style.width = '100%';
+      canvas.style.height = '100%';
+      canvas.style.display = 'block';
+
+      element.appendChild(canvas);
+
+      this.riveInstance = new Rive({
+        src: '/assets/animations/gleam_logo_animation.riv',
+        canvas: canvas,
+        layout: new Layout({
+          fit: Fit.Contain,
+        }),
+        autoplay: false,
+        onLoad: () => {
+          console.log('onLoad');
+
+          if (this.riveInstance) {
+            const stateMachines = this.riveInstance.stateMachineNames;
+
+            if (stateMachines?.includes('State Machine 2')) {
+              // Play first time immediately
+              this.riveInstance.play('State Machine 2');
+            }
+
+            // Play State Machine 3 after 1 second to reset
+            setTimeout(() => {
+              if (this.riveInstance) {
+                this.riveInstance.play('State Machine 3');
+              }
+            }, 1000);
+
+            // Set up hover state machine
+            canvas.addEventListener('mouseenter', () => {
+              if (this.riveInstance) {
+                this.riveInstance.play('State Machine 1');
+              }
+            });
+
+            canvas.addEventListener('mouseleave', () => {
+              if (this.riveInstance) {
+                this.riveInstance.play('State Machine 1');
+              }
+            });
+          }
+        },
+      });
+    } catch (error: unknown) {
+      console.error('Error setting up Rive:', error);
+    }
+  }
+}
+
+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,180 @@
+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';
+import { tracked } from '@glimmer/tracking';
+
+// Mock Rive class for testing
+class MockRive {
+  // Private properties
+  _interval = null;
+  _listeners = new Map();
+
+  // Public properties
+  @tracked canvas;
+  @tracked isLoaded = false;
+  @tracked stateMachineNames = ['State Machine 1', 'State Machine 2'];
+  @tracked lastPlayedStateMachine = null;
+  @tracked lastInputsStateMachine = null;
+  @tracked playCalls = 0;
+  @tracked resetCalls = 0;
+
+  // Constructor
+  constructor(options) {
+    this.canvas = options.canvas;
+  }
+
+  // Getter
+  get interval() {
+    return this._interval;
+  }
+
+  // Public methods
+  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);
+  }
+
+  play(stateMachineName) {
+    this.playCalls++;
+    this.lastPlayedStateMachine = stateMachineName;
+
+    return stateMachineName;
+  }
+
+  reset() {
+    this.resetCalls++;
+  }
+
+  simulateLoad() {
+    this.isLoaded = true;
+    this.triggerEvent('load');
+  }
+
+  stateMachineInputs(stateMachineName) {
+    this.lastInputsStateMachine = stateMachineName;
+
+    return [];
+  }
+
+  stop() {
+    // No-op for test
+  }
+
+  // Helper methods
+  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 () {
+    // Store original Rive constructor
+    this.originalRive = window.Rive;
+    // Replace with mock
+    window.Rive = MockRive;
+  });
+
+  hooks.afterEach(function () {
+    // Restore original Rive constructor
+    window.Rive = this.originalRive;
+  });
+
+  module('Rendering', function () {
+    test('it renders a canvas element', async function (assert) {
+      await render(hbs`<GleamLogo />`);
+      assert.dom('canvas').exists('Canvas element is rendered');
+    });
+
+    test('it initializes Rive with the canvas', async function (assert) {
+      await render(hbs`<GleamLogo />`);
+
+      const container = document.querySelector('.gleam-logo-container');
+      const canvas = container?.querySelector('canvas');
+      assert.ok(canvas, 'Canvas element exists');
+
+      const mockRive = new MockRive({ canvas });
+      container.__riveInstance = mockRive;
+
+      mockRive.simulateLoad();
+      await settled();
+
+      assert.deepEqual(mockRive.stateMachineNames, ['State Machine 1', 'State Machine 2'], 'State machines are available after initialization');
+    });
+  });
+
+  module('Hover Behavior', function () {
+    test('it triggers animation on hover', async function (assert) {
+      await render(hbs`<GleamLogo />`);
+
+      const container = document.querySelector('.gleam-logo-container');
+      const canvas = container?.querySelector('canvas');
+      assert.ok(canvas, 'Canvas element exists');
+
+      const mockRive = new MockRive({ canvas });
+      container.__riveInstance = mockRive;
+
+      // Simulate the component's handleMouseEnter logic
+      if (mockRive) {
+        const stateMachines = mockRive.stateMachineNames;
+
+        if (stateMachines && stateMachines.length > 0) {
+          const stateMachineName = 'State Machine 1';
+
+          if (stateMachines.includes(stateMachineName)) {
+            mockRive.reset();
+            mockRive.play(stateMachineName);
+          }
+        }
+      }
+
+      await settled();
+
+      assert.strictEqual(mockRive.playCalls, 1, 'Play was called once on hover');
+      assert.strictEqual(mockRive.resetCalls, 1, 'Reset was called once on hover');
+    });
+  });
+
+  module('Cleanup', function () {
+    test('it cleans up resources on destroy', async function (assert) {
+      await render(hbs`<GleamLogo />`);
+
+      const container = document.querySelector('.gleam-logo-container');
+      const canvas = container?.querySelector('canvas');
+      assert.ok(canvas, 'Canvas element exists');
+
+      const mockRive = new MockRive({ canvas });
+      container.__riveInstance = mockRive;
+
+      mockRive.stop = () => {
+        assert.step('stop called');
+      };
+
+      // Trigger cleanup
+      await render(hbs``);
+
+      assert.verifySteps(['stop called'], 'Stop was called during cleanup');
+    });
+  });
+});