@jjlmoya/utils-drones 1.23.0 → 1.25.0

package/src/tool/fpv-drone-thrust-to-weight-ratio/controller.ts

@@ -0,0 +1,240 @@
+import type { DroneTwrInputs } from './logic';
+import { calculateTwrMetrics } from './logic';
+import { evaluateAgilityPresentation } from './evaluator';
+import { updateDOMMetrics, updateDOMSafety, renderTwrSVG, type DOMResultElements } from './dom-views';
+import { loadSavedInputs, saveInputs } from './storage';
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+
+export interface PresetConfig {
+  auwGrams: number;
+  motorCount: number;
+  thrustPerMotorGrams: number;
+  propellerSizeInches: number;
+  propellerPitchInches: number;
+  bladeCount: number;
+  throttleStickPercent: number;
+}
+
+export const PRESETS: Record<string, PresetConfig> = {
+  whoop1s: { auwGrams: 32, motorCount: 4, thrustPerMotorGrams: 38, propellerSizeInches: 1.6, propellerPitchInches: 1.5, bladeCount: 4, throttleStickPercent: 50 },
+  freestyle35: { auwGrams: 250, motorCount: 4, thrustPerMotorGrams: 750, propellerSizeInches: 3.5, propellerPitchInches: 2.8, bladeCount: 3, throttleStickPercent: 65 },
+  freestyle5: { auwGrams: 680, motorCount: 4, thrustPerMotorGrams: 1950, propellerSizeInches: 5.1, propellerPitchInches: 4.3, bladeCount: 3, throttleStickPercent: 70 },
+  longrange7: { auwGrams: 1150, motorCount: 4, thrustPerMotorGrams: 2400, propellerSizeInches: 7.0, propellerPitchInches: 4.0, bladeCount: 2, throttleStickPercent: 45 },
+  cinelifter8: { auwGrams: 4200, motorCount: 8, thrustPerMotorGrams: 3200, propellerSizeInches: 9.0, propellerPitchInches: 5.0, bladeCount: 3, throttleStickPercent: 55 },
+};
+
+export class FpvDroneThrustToWeightRatioController {
+  private container: HTMLElement;
+  private ui: FpvDroneThrustToWeightRatioUI;
+  private elements!: DOMResultElements;
+  private inputs!: DroneTwrInputs;
+  private activePreset: string | null = 'freestyle5';
+
+  constructor(container: HTMLElement, ui: FpvDroneThrustToWeightRatioUI) {
+    this.container = container;
+    this.ui = ui;
+    this.initElements();
+    this.initInputs();
+    this.bindEvents();
+    this.recalculate();
+  }
+
+  private initElements(): void {
+    this.elements = {
+      twrRatio: this.container.querySelector('[data-metric="twrRatio"]')!,
+      hoverThrottle: this.container.querySelector('[data-metric="hoverThrottle"]')!,
+      currentThrust: this.container.querySelector('[data-metric="currentThrust"]')!,
+      instantGForce: this.container.querySelector('[data-metric="instantGForce"]')!,
+      zeroToHundred: this.container.querySelector('[data-metric="zeroToHundred"]')!,
+      recommendedCamAngle: this.container.querySelector('[data-metric="recommendedCamAngle"]')!,
+      windResistance: this.container.querySelector('[data-metric="windResistance"]')!,
+      totalMaxThrust: this.container.querySelector('[data-metric="totalMaxThrust"]')!,
+      maxPitchAngle: this.container.querySelector('[data-metric="maxPitchAngle"]')!,
+      tpaSetting: this.container.querySelector('[data-metric="tpaSetting"]') || undefined,
+      dynamicIdleSetting: this.container.querySelector('[data-metric="dynamicIdleSetting"]') || undefined,
+      propwashRisk: this.container.querySelector('[data-metric="propwashRisk"]') || undefined,
+      agilityBadge: this.container.querySelector('[data-metric="agilityBadge"]')!,
+      statusTitle: this.container.querySelector('[data-metric="statusTitle"]')!,
+      statusDesc: this.container.querySelector('[data-metric="statusDesc"]')!,
+      svgContainer: this.container.querySelector('[data-element="svgContainer"]')!,
+      stickPercentBadge: this.container.querySelector('[data-metric="stickPercentBadge"]') || undefined,
+    };
+  }
+
+  private initInputs(): void {
+    const saved = loadSavedInputs();
+    this.inputs = Object.assign({}, PRESETS.freestyle5, saved);
+    this.syncInputElements();
+  }
+
+  private parseVal(selector: string): number {
+    const el = this.container.querySelector(selector) as HTMLInputElement;
+    if (!el || !el.value) return 0;
+    const cleanStr = el.value.replace(',', '.');
+    const val = parseFloat(cleanStr);
+    return Number.isFinite(val) ? val : 0;
+  }
+
+  private syncInputElements(): void {
+    this.setInputValue('#input-auw', String(this.inputs.auwGrams));
+    this.setInputValue('#range-auw', String(this.inputs.auwGrams));
+    this.setInputValue('#input-thrust-motor', String(this.inputs.thrustPerMotorGrams));
+    this.setInputValue('#range-thrust-motor', String(this.inputs.thrustPerMotorGrams));
+    this.setInputValue('#input-prop-size', String(this.inputs.propellerSizeInches));
+    this.setInputValue('#range-prop-size', String(this.inputs.propellerSizeInches));
+    this.setInputValue('#input-prop-pitch', String(this.inputs.propellerPitchInches));
+    this.setInputValue('#range-prop-pitch', String(this.inputs.propellerPitchInches));
+    this.setInputValue('#range-throttle-stick', String(this.inputs.throttleStickPercent));
+
+    this.updateCustomSelect('motor-count', String(this.inputs.motorCount));
+    this.updateCustomSelect('blade-count', String(this.inputs.bladeCount));
+    this.updatePresetChips();
+  }
+
+  private setInputValue(selector: string, val: string): void {
+    const el = this.container.querySelector(selector) as HTMLInputElement;
+    if (el) el.value = val;
+  }
+
+  private updatePresetChips(): void {
+    this.container.querySelectorAll('[data-preset]').forEach((btn) => {
+      const key = btn.getAttribute('data-preset');
+      btn.classList.toggle('active', key === this.activePreset);
+    });
+  }
+
+  private updateCustomSelect(name: string, value: string): void {
+    const wrapper = this.container.querySelector(`[data-custom-select="${name}"]`);
+    if (!wrapper) return;
+    const triggerText = wrapper.querySelector('.sc-select-trigger span');
+    const options = wrapper.querySelectorAll('.sc-select-option');
+    options.forEach((opt) => {
+      const isSelected = opt.getAttribute('data-value') === value;
+      opt.classList.toggle('active', isSelected);
+      if (isSelected && triggerText) triggerText.textContent = opt.textContent;
+    });
+  }
+
+  private bindEvents(): void {
+    this.bindNumberAndRangeInputs();
+    this.bindCustomSelects();
+    this.bindPresets();
+    this.bindThrottleStick();
+    this.bindQuickSnapButtons();
+    document.addEventListener('click', () => this.closeAllSelects());
+  }
+
+  private bindNumberAndRangeInputs(): void {
+    this.bindRangeSync('#input-auw', '#range-auw', (v) => { this.inputs.auwGrams = v; });
+    this.bindRangeSync('#input-thrust-motor', '#range-thrust-motor', (v) => { this.inputs.thrustPerMotorGrams = v; });
+    this.bindRangeSync('#input-prop-size', '#range-prop-size', (v) => { this.inputs.propellerSizeInches = v; });
+    this.bindRangeSync('#input-prop-pitch', '#range-prop-pitch', (v) => { this.inputs.propellerPitchInches = v; });
+  }
+
+  private bindThrottleStick(): void {
+    const stick = this.container.querySelector('#range-throttle-stick') as HTMLInputElement;
+    stick?.addEventListener('input', () => {
+      this.inputs.throttleStickPercent = parseFloat(stick.value) || 0;
+      this.recalculate();
+    });
+  }
+
+  private bindQuickSnapButtons(): void {
+    this.container.querySelectorAll('[data-snap]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const snapType = btn.getAttribute('data-snap');
+        const results = calculateTwrMetrics(this.inputs);
+        if (snapType === 'idle') this.inputs.throttleStickPercent = 0;
+        if (snapType === 'hover') this.inputs.throttleStickPercent = results.hoverThrottlePercent;
+        if (snapType === 'cruise') this.inputs.throttleStickPercent = 50;
+        if (snapType === 'punch') this.inputs.throttleStickPercent = 100;
+        this.setInputValue('#range-throttle-stick', String(this.inputs.throttleStickPercent));
+        this.recalculate();
+      });
+    });
+  }
+
+  private bindCustomSelects(): void {
+    this.container.querySelectorAll('.sc-custom-select').forEach((wrapper) => {
+      const trigger = wrapper.querySelector('.sc-select-trigger');
+      trigger?.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.closeAllSelects(wrapper);
+        wrapper.classList.toggle('open');
+      });
+
+      wrapper.querySelectorAll('.sc-select-option').forEach((opt) => {
+        opt.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.handleSelectOptionClick(wrapper, opt);
+        });
+      });
+    });
+  }
+
+  private handleSelectOptionClick(wrapper: Element, opt: Element): void {
+    const val = opt.getAttribute('data-value')!;
+    const name = wrapper.getAttribute('data-custom-select')!;
+    if (name === 'motor-count') this.inputs.motorCount = parseInt(val, 10);
+    if (name === 'blade-count') this.inputs.bladeCount = parseInt(val, 10);
+    this.updateCustomSelect(name, val);
+    wrapper.classList.remove('open');
+    this.onInputChanged();
+  }
+
+  private bindPresets(): void {
+    this.container.querySelectorAll('[data-preset]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const key = btn.getAttribute('data-preset')!;
+        if (PRESETS[key]) {
+          this.activePreset = key;
+          this.inputs = { ...PRESETS[key] };
+          this.syncInputElements();
+          this.recalculate();
+        }
+      });
+    });
+  }
+
+  private onInputChanged(): void {
+    this.activePreset = null;
+    this.updatePresetChips();
+    this.recalculate();
+  }
+
+  private bindRangeSync(textSel: string, rangeSel: string, setter: (val: number) => void): void {
+    const textEl = this.container.querySelector(textSel) as HTMLInputElement;
+    const rangeEl = this.container.querySelector(rangeSel) as HTMLInputElement;
+
+    textEl?.addEventListener('input', () => {
+      const val = this.parseVal(textSel);
+      if (rangeEl) rangeEl.value = String(val);
+      setter(val);
+      this.onInputChanged();
+    });
+
+    rangeEl?.addEventListener('input', () => {
+      const val = parseFloat(rangeEl.value);
+      if (textEl) textEl.value = String(val);
+      setter(val);
+      this.onInputChanged();
+    });
+  }
+
+  private closeAllSelects(except?: Element): void {
+    this.container.querySelectorAll('.sc-custom-select').forEach((w) => {
+      if (w !== except) w.classList.remove('open');
+    });
+  }
+
+  private recalculate(): void {
+    const results = calculateTwrMetrics(this.inputs);
+    const agilityEval = evaluateAgilityPresentation(results.agilityTier, this.ui);
+    updateDOMMetrics(this.elements, results);
+    updateDOMSafety(this.elements, agilityEval);
+    if (this.elements.svgContainer) {
+      this.elements.svgContainer.innerHTML = renderTwrSVG(this.inputs, results, this.ui);
+    }
+    saveInputs(this.inputs);
+  }
+}

package/src/tool/fpv-drone-thrust-to-weight-ratio/dom-views.ts

@@ -0,0 +1,148 @@
+import type { DroneTwrInputs, DroneTwrResults, AgilityTier } from './logic';
+import type { AgilityEvaluation } from './evaluator';
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+
+export interface DOMResultElements {
+  twrRatio: HTMLElement;
+  hoverThrottle: HTMLElement;
+  currentThrust: HTMLElement;
+  instantGForce: HTMLElement;
+  zeroToHundred: HTMLElement;
+  recommendedCamAngle: HTMLElement;
+  windResistance: HTMLElement;
+  totalMaxThrust: HTMLElement;
+  maxPitchAngle: HTMLElement;
+  tpaSetting?: HTMLElement;
+  dynamicIdleSetting?: HTMLElement;
+  propwashRisk?: HTMLElement;
+  agilityBadge: HTMLElement;
+  statusTitle: HTMLElement;
+  statusDesc: HTMLElement;
+  svgContainer: HTMLElement;
+  stickPercentBadge?: HTMLElement;
+}
+
+export function getTierColor(tier: AgilityTier): string {
+  if (tier === 'underpowered') return '#ef4444';
+  if (tier === 'cinematic') return '#0284c7';
+  if (tier === 'freestyle') return '#10b981';
+  if (tier === 'acro_pro') return '#8b5cf6';
+  return '#f59e0b';
+}
+
+function renderDroneVectors(stickPercent: number, tierColor: string, camAngle: number): string {
+  const vHeight = Math.max(10, (stickPercent / 100) * 60);
+  const opacity = Math.min(1, Math.max(0.25, stickPercent / 100));
+  const tiltAngle = (camAngle - 20) * 0.4;
+  return `<g transform="translate(130, 115) rotate(${tiltAngle})">
+    <polygon points="0,-18 55,${-18 - camAngle * 0.6} 55,${-18 + camAngle * 0.6}" fill="var(--n-primary, #38bdf8)" fill-opacity="0.08" stroke="var(--n-primary, #38bdf8)" stroke-dasharray="2,2" stroke-width="1"/>
+    <line x1="-80" y1="0" x2="80" y2="0" stroke="var(--n-svg-stroke, #334155)" stroke-width="4.5" stroke-linecap="round"/>
+    <line x1="-35" y1="0" x2="0" y2="-18" stroke="var(--n-primary, #38bdf8)" stroke-width="3"/>
+    <circle cx="0" cy="-18" r="8" fill="var(--n-primary, #38bdf8)" fill-opacity="0.35" stroke="var(--n-primary, #38bdf8)" stroke-width="2"/>
+    <rect x="-24" y="-8" width="48" height="16" rx="4" fill="var(--n-svg-card, #0f172a)" stroke="var(--n-svg-stroke, #334155)" stroke-width="2"/>
+    <circle cx="0" cy="0" r="4" fill="${tierColor}"/>
+    
+    <g transform="translate(-80, 0)">
+      <ellipse cx="0" cy="-3" rx="20" ry="4" fill="${tierColor}" fill-opacity="0.2" stroke="${tierColor}" stroke-width="1"/>
+      <rect x="-10" y="-4" width="20" height="8" rx="2" fill="var(--n-svg-inner, #1e293b)" stroke="${tierColor}" stroke-width="1.5"/>
+      <line x1="0" y1="-4" x2="0" y2="${-4 - vHeight}" stroke="${tierColor}" stroke-width="3.5" stroke-linecap="round" opacity="${opacity}"/>
+      <polygon points="-5,${-4 - vHeight + 5} 5,${-4 - vHeight + 5} 0,${-4 - vHeight}" fill="${tierColor}" opacity="${opacity}"/>
+    </g>
+    
+    <g transform="translate(80, 0)">
+      <ellipse cx="0" cy="-3" rx="20" ry="4" fill="${tierColor}" fill-opacity="0.2" stroke="${tierColor}" stroke-width="1"/>
+      <rect x="-10" y="-4" width="20" height="8" rx="2" fill="var(--n-svg-inner, #1e293b)" stroke="${tierColor}" stroke-width="1.5"/>
+      <line x1="0" y1="-4" x2="0" y2="${-4 - vHeight}" stroke="${tierColor}" stroke-width="3.5" stroke-linecap="round" opacity="${opacity}"/>
+      <polygon points="-5,${-4 - vHeight + 5} 5,${-4 - vHeight + 5} 0,${-4 - vHeight}" fill="${tierColor}" opacity="${opacity}"/>
+    </g>
+  </g>`;
+}
+
+function renderDroneStage(inputs: DroneTwrInputs, results: DroneTwrResults, ui: FpvDroneThrustToWeightRatioUI): string {
+  const tierColor = getTierColor(results.agilityTier);
+  const vectorsHtml = renderDroneVectors(inputs.throttleStickPercent, tierColor, results.recommendedCamAngleDeg);
+  return `<g transform="translate(15, 15)">
+    <rect x="0" y="0" width="250" height="180" rx="14" fill="var(--n-svg-card, #0f172a)" stroke="var(--n-svg-stroke, #334155)" stroke-width="2" />
+    <text x="15" y="24" fill="var(--n-text-muted, #94a3b8)" font-size="10" font-weight="700" letter-spacing="0.5">${ui.hudVectorPowerLabel.toUpperCase()}</text>
+    <text x="235" y="24" fill="${tierColor}" font-size="11" font-weight="800" text-anchor="end">${results.instantGForce.toFixed(2)}G</text>
+    ${vectorsHtml}
+    <text x="125" y="152" fill="var(--n-text, #f8fafc)" font-size="15" font-weight="900" text-anchor="middle">${results.currentThrustGrams.toLocaleString()} g</text>
+    <text x="125" y="168" fill="var(--n-text-muted, #94a3b8)" font-size="9" font-weight="600" text-anchor="middle">STICK @ ${inputs.throttleStickPercent}% | CAM ${results.recommendedCamAngleDeg}°</text>
+  </g>`;
+}
+
+function renderCurvePoints(results: DroneTwrResults, inputs: DroneTwrInputs): string {
+  const hoverX = 25 + (results.hoverThrottlePercent / 100) * 190;
+  const hoverY = 145 - Math.pow(results.hoverThrottlePercent / 100, 1.8) * 105;
+  const stickX = 25 + (inputs.throttleStickPercent / 100) * 190;
+  const stickY = 145 - Math.pow(inputs.throttleStickPercent / 100, 1.8) * 105;
+  return `<g>
+    <rect x="${25 + 0.25 * 190}" y="40" width="${0.35 * 190}" height="105" fill="var(--n-primary, #38bdf8)" fill-opacity="0.06"/>
+    <rect x="${25 + 0.70 * 190}" y="40" width="${0.30 * 190}" height="105" fill="#f59e0b" fill-opacity="0.08"/>
+    <line x1="${hoverX}" y1="40" x2="${hoverX}" y2="145" stroke="#38bdf8" stroke-width="1.5" stroke-dasharray="3,3" opacity="0.7"/>
+    <circle cx="${hoverX}" cy="${hoverY}" r="4.5" fill="#38bdf8" stroke="#fff" stroke-width="1.5"/>
+    <circle cx="${stickX}" cy="${stickY}" r="6" fill="#f59e0b" stroke="#fff" stroke-width="2"/>
+    <circle cx="${stickX}" cy="${stickY}" r="11" fill="none" stroke="#f59e0b" stroke-width="1.5" opacity="0.4"/>
+  </g>`;
+}
+
+function renderCurveStage(inputs: DroneTwrInputs, results: DroneTwrResults, ui: FpvDroneThrustToWeightRatioUI): string {
+  const pointsHtml = renderCurvePoints(results, inputs);
+  return `<g transform="translate(280, 15)">
+    <rect x="0" y="0" width="265" height="180" rx="14" fill="var(--n-svg-card, #0f172a)" stroke="var(--n-svg-stroke, #334155)" stroke-width="2" />
+    <text x="15" y="24" fill="var(--n-text-muted, #94a3b8)" font-size="10" font-weight="700" letter-spacing="0.5">${ui.hudThrustCurveTitle.toUpperCase()}</text>
+    <path d="M 25 145 L 215 145" stroke="var(--n-svg-stroke, #334155)" stroke-width="1.5" />
+    <path d="M 25 40 L 25 145" stroke="var(--n-svg-stroke, #334155)" stroke-width="1.5" />
+    <path d="M 25 145 Q 120 135 215 40" fill="none" stroke="var(--n-primary, #38bdf8)" stroke-width="3.5" stroke-linecap="round" />
+    ${pointsHtml}
+    <text x="25" y="165" fill="var(--n-text-muted, #94a3b8)" font-size="8" font-weight="700">0% IDLE</text>
+    <text x="120" y="165" fill="#38bdf8" font-size="8" font-weight="700" text-anchor="middle">HOVER ${results.hoverThrottlePercent}%</text>
+    <text x="215" y="165" fill="#f59e0b" font-size="8" font-weight="700" text-anchor="end">PUNCH ${results.twrRatio.toFixed(1)}:1</text>
+  </g>`;
+}
+
+export function renderTwrSVG(inputs: DroneTwrInputs, results: DroneTwrResults, ui: FpvDroneThrustToWeightRatioUI): string {
+  const droneSvg = renderDroneStage(inputs, results, ui);
+  const curveSvg = renderCurveStage(inputs, results, ui);
+  return `<svg viewBox="0 0 560 210" width="100%" height="210" xmlns="http://www.w3.org/2000/svg">
+    ${droneSvg}
+    ${curveSvg}
+  </svg>`;
+}
+
+function updateCoreTelemetry(elements: DOMResultElements, results: DroneTwrResults): void {
+  if (elements.twrRatio) elements.twrRatio.textContent = `${results.twrRatio.toFixed(2)} : 1`;
+  if (elements.hoverThrottle) elements.hoverThrottle.textContent = `${results.hoverThrottlePercent.toFixed(1)} %`;
+  if (elements.currentThrust) elements.currentThrust.textContent = `${results.currentThrustGrams.toLocaleString()} g`;
+  if (elements.instantGForce) elements.instantGForce.textContent = `${results.instantGForce.toFixed(2)} G`;
+}
+
+function updateFlightDynamics(elements: DOMResultElements, results: DroneTwrResults): void {
+  if (elements.zeroToHundred) elements.zeroToHundred.textContent = `${results.zeroToHundredTimeSec.toFixed(2)} s`;
+  if (elements.recommendedCamAngle) elements.recommendedCamAngle.textContent = `${results.recommendedCamAngleDeg}°`;
+  if (elements.windResistance) elements.windResistance.textContent = `${results.windResistanceKmh} km/h`;
+  if (elements.totalMaxThrust) elements.totalMaxThrust.textContent = `${results.totalMaxThrustGrams.toLocaleString()} g`;
+  if (elements.maxPitchAngle) elements.maxPitchAngle.textContent = `${results.maxPitchAngleDeg}°`;
+  if (elements.stickPercentBadge) elements.stickPercentBadge.textContent = `${results.currentThrottlePercent}%`;
+}
+
+function updateTuningMetrics(elements: DOMResultElements, results: DroneTwrResults): void {
+  if (elements.tpaSetting) elements.tpaSetting.textContent = results.tuneAdvice.tpaSetting;
+  if (elements.dynamicIdleSetting) elements.dynamicIdleSetting.textContent = results.tuneAdvice.dynamicIdleSetting;
+  if (elements.propwashRisk) elements.propwashRisk.textContent = results.tuneAdvice.propwashRisk;
+}
+
+export function updateDOMMetrics(elements: DOMResultElements, results: DroneTwrResults): void {
+  updateCoreTelemetry(elements, results);
+  updateFlightDynamics(elements, results);
+  updateTuningMetrics(elements, results);
+}
+
+export function updateDOMSafety(elements: DOMResultElements, evalData: AgilityEvaluation): void {
+  if (elements.agilityBadge) {
+    elements.agilityBadge.className = `sc-safety-badge ${evalData.badgeClass}`;
+    elements.agilityBadge.textContent = evalData.title;
+  }
+  if (elements.statusTitle) elements.statusTitle.textContent = evalData.title;
+  if (elements.statusDesc) elements.statusDesc.textContent = evalData.description;
+}

package/src/tool/fpv-drone-thrust-to-weight-ratio/entry.ts

@@ -0,0 +1,27 @@
+import type { DronesToolEntry, ToolLocaleContent } from '../../types';
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+
+export type { FpvDroneThrustToWeightRatioUI };
+export type FpvDroneThrustToWeightRatioLocaleContent = ToolLocaleContent<FpvDroneThrustToWeightRatioUI>;
+
+export const fpvDroneThrustToWeightRatio: DronesToolEntry<FpvDroneThrustToWeightRatioUI> = {
+  id: 'fpv-drone-thrust-to-weight-ratio',
+  icons: { bg: 'mdi:quadcopter', fg: 'mdi:gauge' },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+  },
+};

package/src/tool/fpv-drone-thrust-to-weight-ratio/evaluator.ts

@@ -0,0 +1,30 @@
+import type { AgilityTier } from './logic';
+import type { FpvDroneThrustToWeightRatioUI } from './ui';
+
+export interface AgilityEvaluation {
+  tier: AgilityTier;
+  badgeClass: string;
+  title: string;
+  description: string;
+}
+
+const TIER_CONFIG: Record<AgilityTier, { badgeClass: string; titleKey: keyof FpvDroneThrustToWeightRatioUI; descKey: keyof FpvDroneThrustToWeightRatioUI }> = {
+  underpowered: { badgeClass: 'status-danger', titleKey: 'tierUnderpoweredTitle', descKey: 'tierUnderpoweredDesc' },
+  cinematic: { badgeClass: 'status-info', titleKey: 'tierCinematicTitle', descKey: 'tierCinematicDesc' },
+  freestyle: { badgeClass: 'status-optimal', titleKey: 'tierFreestyleTitle', descKey: 'tierFreestyleDesc' },
+  acro_pro: { badgeClass: 'status-accent', titleKey: 'tierAcroProTitle', descKey: 'tierAcroProDesc' },
+  racing_extreme: { badgeClass: 'status-warning', titleKey: 'tierRacingExtremeTitle', descKey: 'tierRacingExtremeDesc' },
+};
+
+export function evaluateAgilityPresentation(
+  tier: AgilityTier,
+  ui: FpvDroneThrustToWeightRatioUI
+): AgilityEvaluation {
+  const cfg = TIER_CONFIG[tier] || TIER_CONFIG.freestyle;
+  return {
+    tier,
+    badgeClass: cfg.badgeClass,
+    title: ui[cfg.titleKey],
+    description: ui[cfg.descKey],
+  };
+}