feat: implement Moving Motivators feature with session management, real-time event handling, and UI components for enhanced user experience

2025-11-28 08:40:39 +01:00
parent a5c17e23f6
commit 448cf61e66
26 changed files with 3191 additions and 183 deletions
--- a/src/components/moving-motivators/MotivatorCard.tsx
+++ b/src/components/moving-motivators/MotivatorCard.tsx
@@ -0,0 +1,172 @@
+'use client';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { MotivatorCard as MotivatorCardType } from '@/lib/types';
+import { MOTIVATOR_BY_TYPE } from '@/lib/types';
+
+interface MotivatorCardProps {
+  card: MotivatorCardType;
+  onInfluenceChange?: (influence: number) => void;
+  disabled?: boolean;
+  showInfluence?: boolean;
+}
+
+export function MotivatorCard({
+  card,
+  disabled = false,
+  showInfluence = false,
+}: MotivatorCardProps) {
+  const config = MOTIVATOR_BY_TYPE[card.type];
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: card.id,
+    disabled,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`
+        relative flex flex-col items-center justify-center
+        w-28 h-36 rounded-xl border-2 shrink-0
+        bg-card shadow-md
+        cursor-grab active:cursor-grabbing
+        transition-all duration-200
+        ${isDragging ? 'opacity-50 scale-105 shadow-xl z-50' : 'hover:shadow-lg hover:-translate-y-1'}
+        ${disabled ? 'cursor-default opacity-60' : ''}
+      `}
+      {...attributes}
+      {...listeners}
+    >
+      {/* Color accent bar */}
+      <div
+        className="absolute top-0 left-0 right-0 h-2 rounded-t-lg"
+        style={{ backgroundColor: config.color }}
+      />
+
+      {/* Icon */}
+      <div className="text-3xl mb-1 mt-2">{config.icon}</div>
+
+      {/* Name */}
+      <div
+        className="font-semibold text-sm text-center px-2"
+        style={{ color: config.color }}
+      >
+        {config.name}
+      </div>
+
+      {/* Description */}
+      <p className="text-[10px] text-muted text-center px-2 mt-1 line-clamp-2">
+        {config.description}
+      </p>
+
+      {/* Influence indicator */}
+      {showInfluence && card.influence !== 0 && (
+        <div
+          className={`
+            absolute -top-2 -right-2 w-6 h-6 rounded-full
+            flex items-center justify-center text-xs font-bold text-white
+            ${card.influence > 0 ? 'bg-green-500' : 'bg-red-500'}
+          `}
+        >
+          {card.influence > 0 ? `+${card.influence}` : card.influence}
+        </div>
+      )}
+
+      {/* Rank badge */}
+      <div
+        className="absolute -bottom-2 left-1/2 -translate-x-1/2 
+          bg-foreground text-background text-xs font-bold 
+          w-5 h-5 rounded-full flex items-center justify-center"
+      >
+        {card.orderIndex}
+      </div>
+    </div>
+  );
+}
+
+// Non-draggable version for summary
+export function MotivatorCardStatic({
+  card,
+  size = 'normal',
+}: {
+  card: MotivatorCardType;
+  size?: 'small' | 'normal';
+}) {
+  const config = MOTIVATOR_BY_TYPE[card.type];
+
+  const sizeClasses = {
+    small: 'w-20 h-24 text-2xl',
+    normal: 'w-28 h-36 text-3xl',
+  };
+
+  return (
+    <div
+      className={`
+        relative flex flex-col items-center justify-center
+        rounded-xl border-2 bg-card shadow-md
+        ${sizeClasses[size]}
+      `}
+    >
+      {/* Color accent bar */}
+      <div
+        className="absolute top-0 left-0 right-0 h-2 rounded-t-lg"
+        style={{ backgroundColor: config.color }}
+      />
+
+      {/* Icon */}
+      <div className={`mb-1 mt-2 ${size === 'small' ? 'text-xl' : 'text-3xl'}`}>
+        {config.icon}
+      </div>
+
+      {/* Name */}
+      <div
+        className={`font-semibold text-center px-2 ${size === 'small' ? 'text-xs' : 'text-sm'}`}
+        style={{ color: config.color }}
+      >
+        {config.name}
+      </div>
+
+      {/* Influence indicator */}
+      {card.influence !== 0 && (
+        <div
+          className={`
+            absolute -top-2 -right-2 rounded-full
+            flex items-center justify-center font-bold text-white
+            ${card.influence > 0 ? 'bg-green-500' : 'bg-red-500'}
+            ${size === 'small' ? 'w-5 h-5 text-[10px]' : 'w-6 h-6 text-xs'}
+          `}
+        >
+          {card.influence > 0 ? `+${card.influence}` : card.influence}
+        </div>
+      )}
+
+      {/* Rank badge */}
+      <div
+        className={`
+          absolute -bottom-2 left-1/2 -translate-x-1/2 
+          bg-foreground text-background font-bold 
+          rounded-full flex items-center justify-center
+          ${size === 'small' ? 'w-4 h-4 text-[10px]' : 'w-5 h-5 text-xs'}
+        `}
+      >
+        {card.orderIndex}
+      </div>
+    </div>
+  );
+}
+