@jjlmoya/utils-home 1.16.0 → 1.23.0

package/src/tool/wifiRangeSimulator/logic.ts

@@ -0,0 +1,220 @@
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Segment {
+  a: Point;
+  b: Point;
+  material: string;
+  attenuation: number;
+}
+
+export interface PlacedObject {
+  id: string;
+  x: number;
+  y: number;
+  material: string;
+  attenuation: number;
+  width: number;
+  height: number;
+}
+
+export interface PlacedDevice {
+  id: string;
+  x: number;
+  y: number;
+  name: string;
+}
+
+export interface SignalResult {
+  strengthPercent: number;
+  effectiveRange: number;
+  verdict: 'perfect' | 'good' | 'fair' | 'poor' | 'dead';
+  streamingVerdict: Record<string, string>;
+  rayCount: number;
+}
+
+export const MATERIALS: Record<string, { attenuation: number; color: string }> = {
+  drywall: { attenuation: 3, color: '#e7e5e4' },
+  brick: { attenuation: 8, color: '#a16207' },
+  concrete: { attenuation: 15, color: '#57534e' },
+  stoneWall: { attenuation: 22, color: '#44403c' },
+  woodDoor: { attenuation: 4, color: '#92400e' },
+  metalDoor: { attenuation: 18, color: '#334155' },
+  window: { attenuation: 2, color: '#bfdbfe' },
+  fridge: { attenuation: 10, color: '#94a3b8' },
+  aquarium: { attenuation: 12, color: '#0ea5e9' },
+  microwave: { attenuation: 5, color: '#475569' },
+  mirror: { attenuation: 6, color: '#c0c0c0' },
+  furniture: { attenuation: 5, color: '#78350f' },
+};
+
+function dist(a: Point, b: Point): number {
+  const dx = b.x - a.x;
+  const dy = b.y - a.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+function sub(a: Point, b: Point): Point {
+  return { x: a.x - b.x, y: a.y - b.y };
+}
+
+function normalize(v: Point): Point {
+  const len = Math.sqrt(v.x * v.x + v.y * v.y);
+  if (len < 1e-9) return { x: 0, y: 0 };
+  return { x: v.x / len, y: v.y / len };
+}
+
+function intersectRayWithSegment(origin: Point, dir: Point, seg: Segment): { point: Point; d: number } | null {
+  const segDir = sub(seg.b, seg.a);
+  const rxs = dir.x * segDir.y - dir.y * segDir.x;
+  if (Math.abs(rxs) < 1e-9) return null;
+  const qp = sub(seg.a, origin);
+  const t = (qp.x * segDir.y - qp.y * segDir.x) / rxs;
+  const u = (qp.x * dir.y - qp.y * dir.x) / rxs;
+  if (t > 0 && u >= 0 && u <= 1) {
+    return { point: { x: origin.x + t * dir.x, y: origin.y + t * dir.y }, d: t };
+  }
+  return null;
+}
+
+function getObjectSegments(obj: PlacedObject): Segment[] {
+  const hw = obj.width / 2;
+  const hh = obj.height / 2;
+  const tl = { x: obj.x - hw, y: obj.y - hh };
+  const tr = { x: obj.x + hw, y: obj.y - hh };
+  const br = { x: obj.x + hw, y: obj.y + hh };
+  const bl = { x: obj.x - hw, y: obj.y + hh };
+  return [
+    { a: tl, b: tr, material: obj.material, attenuation: obj.attenuation },
+    { a: tr, b: br, material: obj.material, attenuation: obj.attenuation },
+    { a: br, b: bl, material: obj.material, attenuation: obj.attenuation },
+    { a: bl, b: tl, material: obj.material, attenuation: obj.attenuation },
+  ];
+}
+
+function findAllHits(origin: Point, dir: Point, segments: Segment[], maxDist: number) {
+  const hits: { point: Point; seg: Segment; d: number }[] = [];
+  for (const seg of segments) {
+    const hit = intersectRayWithSegment(origin, dir, seg);
+    if (hit && hit.d > 1 && hit.d < maxDist) {
+      hits.push({ point: hit.point, seg, d: hit.d });
+    }
+  }
+  hits.sort((a, b) => a.d - b.d);
+  return hits;
+}
+
+function castDirectRay(router: Point, device: Point, segments: Segment[]): number {
+  const directDist = dist(router, device);
+  const dir = normalize(sub(device, router));
+  const hits = findAllHits(router, dir, segments, directDist);
+  return hits.reduce((sum, h) => sum + h.seg.attenuation, 0);
+}
+
+export function buildSegments(walls: Segment[], objects: PlacedObject[]): Segment[] {
+  const segs: Segment[] = [...walls];
+  for (const obj of objects) {
+    segs.push(...getObjectSegments(obj));
+  }
+  return segs;
+}
+
+function computeVerdict(percent: number): SignalResult['verdict'] {
+  if (percent >= 80) return 'perfect';
+  if (percent >= 60) return 'good';
+  if (percent >= 40) return 'fair';
+  if (percent >= 20) return 'poor';
+  return 'dead';
+}
+
+function streamStatus(pct: number, thresholds: number[], labels: string[]): string {
+  for (let i = 0; i < thresholds.length; i++) {
+    if (pct >= thresholds[i]) return labels[i];
+  }
+  return labels[labels.length - 1];
+}
+
+function streaming4K(pct: number, labels: string[]): string {
+  return streamStatus(pct, [70, 40], labels);
+}
+
+function streamingGaming(pct: number, labels: string[]): string {
+  return streamStatus(pct, [60, 30], labels);
+}
+
+function streamingCalls(pct: number, labels: string[]): string {
+  return streamStatus(pct, [50, 25], labels);
+}
+
+function streamingBrowsing(pct: number, labels: string[]): string {
+  return streamStatus(pct, [20], labels);
+}
+
+const DEFAULT_STATUS_LABELS = {
+  statusPerfect: 'Perfect',
+  statusGood: 'Good',
+  statusFair: 'Fair',
+  statusPoor: 'Poor',
+  statusImpossible: 'Impossible',
+  statusLowLatency: 'Low Latency',
+  statusLagWarning: 'Lag Warning',
+  statusDisconnect: 'Disconnect',
+  statusStable: 'Stable',
+  statusPixelated: 'Pixelated',
+  statusDropped: 'Dropped',
+  statusPass: 'Pass',
+  statusUnusable: 'Unusable',
+};
+
+export function computeStreamingVerdict(pct: number, labels?: typeof DEFAULT_STATUS_LABELS): Record<string, string> {
+  const l = labels || DEFAULT_STATUS_LABELS;
+  return {
+    '4kStreaming': streaming4K(pct, [l.statusPerfect, l.statusGood, l.statusImpossible]),
+    onlineGaming: streamingGaming(pct, [l.statusLowLatency, l.statusLagWarning, l.statusDisconnect]),
+    videoCalls: streamingCalls(pct, [l.statusStable, l.statusPixelated, l.statusDropped]),
+    basicBrowsing: streamingBrowsing(pct, [l.statusPass, l.statusUnusable]),
+  };
+}
+
+export function calculateSignalFromSketch(
+  router: Point,
+  device: Point,
+  walls: Segment[],
+  objects: PlacedObject[]
+): SignalResult {
+  const segments = buildSegments(walls, objects);
+  const directDist = dist(router, device);
+
+  const distanceLoss = Math.min(70, directDist / 8);
+  const obstacleLoss = castDirectRay(router, device, segments);
+  const totalLoss = Math.min(100, distanceLoss + obstacleLoss);
+  const strengthPercent = Math.max(0, Math.round(100 - totalLoss));
+
+  const effectiveRange = Math.max(0, Math.round(directDist / 10));
+  const verdict = computeVerdict(strengthPercent);
+
+  return {
+    strengthPercent,
+    effectiveRange,
+    verdict,
+    streamingVerdict: computeStreamingVerdict(strengthPercent),
+    rayCount: 1,
+  };
+}
+
+export function getVerdictColor(verdict: SignalResult['verdict']): string {
+  switch (verdict) {
+    case 'perfect':
+      return '#22c55e';
+    case 'good':
+      return '#84cc16';
+    case 'fair':
+      return '#f59e0b';
+    case 'poor':
+      return '#f97316';
+    case 'dead':
+      return '#ef4444';
+  }
+}

package/src/tool/wifiRangeSimulator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { wifiRangeSimulator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await wifiRangeSimulator.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/wifiRangeSimulator/sketch-actions.ts

@@ -0,0 +1,168 @@
+import type { PlacedDevice } from './logic';
+import type { State, Snapshot, History } from './sketch-state';
+import { saveState, renderDeviceSelection } from './sketch-state';
+import { renderObjects, renderWalls, renderRouter, renderDevices, spawnParticle } from './sketch-render';
+import { updateDashboard } from './sketch-render-dash';
+import { getUI } from './i18n-utils';
+export { saveState };
+
+export function addToHistory(h: History, s: State) {
+  if (h.pos < h.stack.length - 1) {
+    h.stack = h.stack.slice(0, h.pos + 1);
+  }
+  const snap: Snapshot = {
+    router: { ...s.router },
+    devices: s.devices.map((d) => ({ ...d })),
+    walls: s.walls.map((w) => ({ ...w, a: { ...w.a }, b: { ...w.b } })),
+    objects: s.objects.map((o) => ({ ...o })),
+    nextId: s.nextId,
+    zoom: s.zoom,
+    panX: s.panX,
+    panY: s.panY,
+  };
+  h.stack.push(snap);
+  if (h.stack.length > 50) h.stack.shift();
+  h.pos = h.stack.length - 1;
+}
+
+export function applySnapshot(s: State, snap: Snapshot) {
+  s.router = { ...snap.router };
+  s.devices = snap.devices.map((d) => ({ ...d }));
+  s.walls = snap.walls.map((w) => ({ ...w, a: { ...w.a }, b: { ...w.b } }));
+  s.objects = snap.objects.map((o) => ({ ...o }));
+  s.nextId = snap.nextId;
+  s.zoom = typeof snap.zoom === 'number' ? snap.zoom : 1;
+  s.panX = typeof snap.panX === 'number' ? snap.panX : 0;
+  s.panY = typeof snap.panY === 'number' ? snap.panY : 0;
+}
+
+export function renderZoom(s: State) {
+  const world = document.getElementById('sketch-world');
+  if (world) {
+    world.style.transform = `translate(${s.panX}px, ${s.panY}px) scale(${s.zoom})`;
+  }
+  const track = document.getElementById('sketch-scale-track');
+  if (track) {
+    const segPx = Math.max(6, 10 * s.zoom);
+    track.style.width = (segPx * 5) + 'px';
+    track.querySelectorAll('.sketch-scale-segment').forEach((el) => {
+      (el as HTMLElement).style.width = segPx + 'px';
+    });
+  }
+}
+
+export function getNextDeviceId(s: State): number {
+  const used = new Set(s.devices.map((d) => d.id));
+  let n = 1;
+  while (used.has(`dev-${n}`)) n++;
+  return n;
+}
+
+export function addDevice(s: State, h: History) {
+  const ui = getUI();
+  if (s.devices.length >= 4) {
+    spawnParticle(400, 250, ui.labelMaxDevices);
+    return;
+  }
+  const id = getNextDeviceId(s);
+  s.nextId = id + 1;
+  const dev: PlacedDevice = {
+    id: `dev-${id}`,
+    x: 680,
+    y: 160 + (s.devices.length * 80),
+    name: `${ui.labelDevicePrefix} ${s.devices.length + 1}`,
+  };
+  s.devices.push(dev);
+  saveState(s);
+  addToHistory(h, s);
+  renderDevices(s.devices, s.router, s.walls, s.objects);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+  renderDeviceSelection(s);
+}
+
+function doUndo(s: State, h: History) {
+  if (h.pos <= 0) return;
+  h.pos--;
+  applySnapshot(s, h.stack[h.pos]);
+  renderWalls(s.walls);
+  renderObjects(s.objects);
+  renderRouter(s.router);
+  renderDevices(s.devices, s.router, s.walls, s.objects);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+  renderDeviceSelection(s);
+  renderZoom(s);
+  saveState(s);
+}
+
+function doClear(s: State, h: History) {
+  const ui = getUI();
+  s.walls = [];
+  s.objects = [];
+  s.devices = [{ id: 'dev-1', x: 680, y: 250, name: `${ui.labelDevicePrefix} 1` }];
+  s.nextId = 2;
+  s.selectedDeviceId = null;
+  saveState(s);
+  addToHistory(h, s);
+  renderWalls(s.walls);
+  renderObjects(s.objects);
+  renderDevices(s.devices, s.router, s.walls, s.objects);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+  renderDeviceSelection(s);
+}
+
+function doClearWalls(s: State, h: History) {
+  s.walls = [];
+  saveState(s);
+  addToHistory(h, s);
+  renderWalls(s.walls);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+}
+
+function doClearObjects(s: State, h: History) {
+  s.objects = [];
+  saveState(s);
+  addToHistory(h, s);
+  renderObjects(s.objects);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+}
+
+function setTool(s: State, tool: string) {
+  s.tool = tool;
+  document.querySelectorAll('[data-tool]').forEach((b) => b.classList.remove('active'));
+  const active = document.querySelector(`[data-tool="${tool}"]`);
+  if (active) active.classList.add('active');
+  const wrap = document.getElementById('sketch-canvas-wrap');
+  if (wrap) wrap.style.cursor = tool === 'select' ? 'default' : 'crosshair';
+}
+
+const toolMap: Record<string, (s: State, h: History) => void> = {
+  zoomIn: (s) => {
+    s.zoom = Math.min(3, Math.round((s.zoom + 0.25) * 100) / 100);
+    renderZoom(s);
+    saveState(s);
+  },
+  zoomOut: (s) => {
+    s.zoom = Math.max(0.5, Math.round((s.zoom - 0.25) * 100) / 100);
+    renderZoom(s);
+    saveState(s);
+  },
+  undo: doUndo,
+  addDevice,
+  clearWalls: doClearWalls,
+  clearObjects: doClearObjects,
+  clear: doClear,
+};
+
+export function initToolButtons(s: State, h: History) {
+  document.querySelectorAll('[data-tool]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const tool = (btn as HTMLElement).dataset.tool;
+      if (!tool) return;
+      if (toolMap[tool]) {
+        toolMap[tool](s, h);
+      } else {
+        setTool(s, tool);
+      }
+    });
+  });
+}

package/src/tool/wifiRangeSimulator/sketch-events.ts

@@ -0,0 +1,138 @@
+import type { Point } from './logic';
+import { MATERIALS } from './logic';
+import type { State, History } from './sketch-state';
+import {
+  ptToSvg,
+  isWallTool,
+  hitRouter,
+  nearestDevice,
+  renderDeviceSelection,
+  removePreviewWall,
+  updatePreviewWall,
+} from './sketch-state';
+import { renderObjects, renderWalls, renderRouter, renderDevices } from './sketch-render';
+import { updateDashboard } from './sketch-render-dash';
+import { addToHistory, saveState, renderZoom } from './sketch-actions';
+import { spawnParticle } from './sketch-render';
+
+function startSelect(s: State, p: Point, e: MouseEvent) {
+  if (hitRouter(s, p)) {
+    s.dragging = 'router';
+    s.selectedDeviceId = null;
+    renderDeviceSelection(s);
+    s.dragOffset = { x: p.x - s.router.x, y: p.y - s.router.y };
+    return;
+  }
+  const dev = nearestDevice(s.devices, p);
+  if (dev) {
+    s.selectedDeviceId = dev.id;
+    s.dragging = `device:${dev.id}`;
+    s.dragOffset = { x: p.x - dev.x, y: p.y - dev.y };
+    renderDeviceSelection(s);
+    return;
+  }
+  s.selectedDeviceId = null;
+  renderDeviceSelection(s);
+  s.dragging = 'pan';
+  s.dragOffset = { x: e.clientX, y: e.clientY };
+}
+
+function placeObject(s: State, p: Point) {
+  const m = MATERIALS[s.tool];
+  if (!m) return;
+  const id = `obj-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+  s.objects.push({
+    id,
+    x: p.x,
+    y: p.y,
+    material: s.tool,
+    attenuation: m.attenuation,
+    width: 32,
+    height: 32,
+  });
+  saveState(s);
+  renderObjects(s.objects);
+  updateDashboard(s.router, s.devices, s.walls, s.objects);
+  spawnParticle(p.x, p.y, `+${s.tool}`);
+}
+
+export function handleMouseDown(s: State, svg: SVGSVGElement, e: MouseEvent) {
+  const p = ptToSvg(svg, e.clientX, e.clientY, s.zoom);
+  if (s.tool === 'select') {
+    startSelect(s, p, e);
+    return;
+  }
+  if (isWallTool(s.tool)) {
+    s.drawing = true;
+    s.drawStart = p;
+    return;
+  }
+  placeObject(s, p);
+}
+
+export function handleMouseMove(s: State, svg: SVGSVGElement, e: MouseEvent) {
+  if (!s.dragging && !s.drawing) return;
+  if (s.dragging === 'pan') {
+    const dx = e.clientX - s.dragOffset.x;
+    const dy = e.clientY - s.dragOffset.y;
+    s.panX += dx;
+    s.panY += dy;
+    s.dragOffset = { x: e.clientX, y: e.clientY };
+    renderZoom(s);
+    return;
+  }
+  const p = ptToSvg(svg, e.clientX, e.clientY, s.zoom);
+  updateDrag(s, p);
+}
+
+export function handleMouseUp(s: State, svg: SVGSVGElement, h: History, e: MouseEvent) {
+  if (s.drawing && isWallTool(s.tool)) {
+    const p = ptToSvg(svg, e.clientX, e.clientY, s.zoom);
+    const dx = p.x - s.drawStart.x;
+    const dy = p.y - s.drawStart.y;
+    if (Math.sqrt(dx * dx + dy * dy) > 5) {
+      const m = MATERIALS[s.tool];
+      s.walls.push({
+        a: { ...s.drawStart },
+        b: { ...p },
+        material: s.tool,
+        attenuation: m.attenuation,
+      });
+      saveState(s);
+      addToHistory(h, s);
+      renderWalls(s.walls);
+      updateDashboard(s.router, s.devices, s.walls, s.objects);
+    }
+    removePreviewWall();
+  }
+  if (s.dragging) {
+    s.dragging = null;
+    saveState(s);
+    addToHistory(h, s);
+  }
+  s.drawing = false;
+}
+
+export function updateDrag(s: State, p: Point) {
+  if (s.dragging === 'router') {
+    s.router.x = p.x - s.dragOffset.x;
+    s.router.y = p.y - s.dragOffset.y;
+    renderRouter(s.router);
+    updateDashboard(s.router, s.devices, s.walls, s.objects);
+    return;
+  }
+  if (s.dragging?.startsWith('device:')) {
+    const id = s.dragging.slice(7);
+    const dev = s.devices.find((d) => d.id === id);
+    if (!dev) return;
+    dev.x = p.x - s.dragOffset.x;
+    dev.y = p.y - s.dragOffset.y;
+    renderDevices(s.devices, s.router, s.walls, s.objects);
+    updateDashboard(s.router, s.devices, s.walls, s.objects);
+    renderDeviceSelection(s);
+    return;
+  }
+  if (s.drawing && isWallTool(s.tool)) {
+    updatePreviewWall(s.drawStart, p, MATERIALS[s.tool].color);
+  }
+}