Initial commit

src/components/game/CalendarDisplay.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { MAX_DAY, INCURSION_START_DAY } from '@/lib/game/constants';
+
+interface CalendarDisplayProps {
+  day: number;
+  hour: number;
+  incursionStrength?: number;
+}
+
+export function CalendarDisplay({ day }: CalendarDisplayProps) {
+  const days: React.ReactElement[] = [];
+  
+  for (let d = 1; d <= MAX_DAY; d++) {
+    let dayClass = 'w-6 h-6 sm:w-7 sm:h-7 rounded text-xs flex items-center justify-center font-mono border transition-all ';
+    
+    if (d < day) {
+      dayClass += 'bg-blue-900/30 border-blue-800/50 text-blue-400';
+    } else if (d === day) {
+      dayClass += 'bg-blue-600/40 border-blue-500 text-blue-300 shadow-lg shadow-blue-500/30';
+    } else {
+      dayClass += 'bg-gray-800/30 border-gray-700/50 text-gray-500';
+    }
+    
+    if (d >= INCURSION_START_DAY) {
+      dayClass += ' border-red-600/50';
+    }
+    
+    days.push(
+      <Tooltip key={d}>
+        <TooltipTrigger asChild>
+          <div className={dayClass}>
+            {d}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Day {d}</p>
+          {d >= INCURSION_START_DAY && <p className="text-red-400">Incursion Active</p>}
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+  
+  return (
+    <div className="grid grid-cols-7 sm:grid-cols-7 md:grid-cols-14 gap-1">
+      {days}
+    </div>
+  );
+}