[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import Navbar from "@/components/navbar" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Simulation.io", description: "Platform for visual simulations of various concepts", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="components/navbar.tsx" isMerged="true" "use client" import Link from "next/link" import { useState } from "react" import { Menu, X } from "lucide-react" import { Button } from "@/components/ui/button" export default function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

Simulation.io {/* Mobile menu button */}

{/* Desktop navigation */} {/* Auth buttons */}

{/* Mobile menu */} {isMenuOpen && (

setIsMenuOpen(false)}> Home
setIsMenuOpen(false)}> Simulations
setIsMenuOpen(false)}> Login
setIsMenuOpen(false)}> Sign Up

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import Image from "next/image" export default function Home() { return (

{/* Hero Section */}

Visual Simulations for Complex Concepts

Explore interactive simulations that make learning technical concepts fun and engaging. From networking to algorithms, see how things work in a comic-style visualization.

{/* Featured Simulations */}

Featured Simulations

View All

{[ { title: "Client-Server Model", description: "Visualize how clients and servers communicate in a network.", image: "/placeholder.svg?height=200&width=300", link: "/simulations/networking", }, { title: "Fibonacci Sequence", description: "Watch the Fibonacci sequence unfold visually.", image: "/placeholder.svg?height=200&width=300", link: "/simulations/fibonacci", }, { title: "Git Workflow", description: "See how Git works with visual avatars and branches.", image: "/placeholder.svg?height=200&width=300", link: "/simulations/git", }, ].map((sim, index) => (

{sim.title}

{sim.description}

))}

{/* How It Works */}

How It Works

{[ { title: "Explore", description: "Browse our collection of visual simulations across various technical domains.", icon: "🔍", }, { title: "Learn", description: "Interact with the simulations to understand complex concepts in a simple way.", icon: "📚", }, { title: "Contribute", description: "Create and share your own simulations with our community after signing up.", icon: "🚀", }, ].map((step, index) => (

{step.icon}

{step.title}

{step.description}

))}

{/* CTA Section */}

Ready to Dive In?

Join our community of learners and contributors. Create an account to upload your own simulations or explore our existing collection.

) } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import Link from "next/link" import { useState } from "react" export default function LoginPage() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle login logic here console.log("Login attempt with:", { email, password }) } return (

Welcome Back

Don't have an account?{" "} Sign up

) } [V0_FILE]typescriptreact:file="app/auth/signup/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import Link from "next/link" import { useState } from "react" export default function SignupPage() { const [formData, setFormData] = useState({ name: "", email: "", password: "", confirmPassword: "", agreeTerms: false, }) const handleChange = (e: React.ChangeEvent) => { const { name, value, type, checked } = e.target setFormData({ ...formData, [name]: type === "checkbox" ? checked : value, }) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle signup logic here console.log("Signup attempt with:", formData) } return (

Create an Account

Join Simulation.io to explore and share simulations

Full Name

Password

Confirm Password

setFormData({ ...formData, agreeTerms: checked as boolean })} className="border-2 border-black data-[state=checked]:bg-black data-[state=checked]:border-black" />

I agree to the{" "} Terms of Service {" "} and{" "} Privacy Policy

Already have an account?{" "} Sign in

) } [V0_FILE]typescriptreact:file="app/auth/upload/page.tsx" isMerged="true" "use client" import type React from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { useState } from "react" import { Upload, X } from "lucide-react" import Link from "next/link" export default function UploadPage() { const [formData, setFormData] = useState({ title: "", category: "", description: "", longDescription: "", file: null as File | null, thumbnail: null as File | null, }) const [filePreview, setFilePreview] = useState("") const [thumbnailPreview, setThumbnailPreview] = useState("") const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData({ ...formData, [name]: value, }) } const handleSelectChange = (value: string) => { setFormData({ ...formData, category: value, }) } const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0] const name = e.target.name setFormData({ ...formData, [name]: file, }) // Create preview URL const reader = new FileReader() reader.onload = (event) => { if (name === "file") { setFilePreview(event.target?.result as string) } else if (name === "thumbnail") { setThumbnailPreview(event.target?.result as string) } } reader.readAsDataURL(file) } } const clearFile = (type: "file" | "thumbnail") => { if (type === "file") { setFormData({ ...formData, file: null, }) setFilePreview("") } else { setFormData({ ...formData, thumbnail: null, }) setThumbnailPreview("") } } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle upload logic here console.log("Upload attempt with:", formData) } return (

Upload Your Simulation

Share your simulation with the community. Our team will review your submission.

Simulation Title

Category

Short Description

</div>

<div className="space-y-2">
              <Label htmlFor="longDescription" className="text-black">
                Detailed Description
              </Label>
              <Textarea
                id="longDescription"
                name="longDescription"
                placeholder="Provide a detailed explanation of your simulation, what it demonstrates, and how users can interact with it"
                value={formData.longDescription}
                onChange={handleChange}
                required
                className="border-2 border-black rounded-md focus:ring-black focus:border-black resize-none h-32"
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label className="text-black">Simulation File</Label>
                <div className="border-2 border-black rounded-md p-4">
                  {!formData.file ? (
                    <div className="flex flex-col items-center justify-center py-6">
                      <Upload className="h-10 w-10 text-gray-400 mb-2" />
                      <p className="text-sm text-gray-600 mb-2">Upload your simulation video</p>
                      <p className="text-xs text-gray-500 mb-4">MP4, WebM or MOV (max. 100MB)</p>
                      <Input
                        id="file"
                        name="file"
                        type="file"
                        accept="video/mp4,video/webm,video/quicktime"
                        onChange={handleFileChange}
                        className="hidden"
                      />
                      <label htmlFor="file">
                        <Button
                          type="button"
                          variant="outline"
                          className="border-black text-black hover:bg-gray-100 rounded-md"
                        >
                          Select File
                        </Button>
                      </label>
                    </div>
                  ) : (
                    <div className="relative">
                      <div className="flex items-center">
                        <div className="w-12 h-12 bg-gray-100 rounded-md flex items-center justify-center mr-4">
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            width="24"
                            height="24"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            className="text-gray-600"
                          >
                            <polygon points="23 7 16 12 23 17 23 7"></polygon>
                            <rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
                          </svg>
                        </div>
                        <div className="flex-1 truncate">
                          <p className="text-sm font-medium text-black truncate">{formData.file.name}</p>
                          <p className="text-xs text-gray-500">{Math.round(formData.file.size / 1024)} KB</p>
                        </div>
                      </div>
                      <button
                        type="button"
                        onClick={() => clearFile("file")}
                        className="absolute top-0 right-0 p-1 rounded-full bg-gray-100 hover:bg-gray-200"
                      >
                        <X className="h-4 w-4 text-gray-600" />
                      </button>
                    </div>
                  )}
                </div>
              </div>

<div className="space-y-2">
                <Label className="text-black">Thumbnail Image</Label>
                <div className="border-2 border-black rounded-md p-4">
                  {!formData.thumbnail ? (
                    <div className="flex flex-col items-center justify-center py-6">
                      <Upload className="h-10 w-10 text-gray-400 mb-2" />
                      <p className="text-sm text-gray-600 mb-2">Upload a thumbnail image</p>
                      <p className="text-xs text-gray-500 mb-4">PNG, JPG or GIF (max. 5MB)</p>
                      <Input
                        id="thumbnail"
                        name="thumbnail"
                        type="file"
                        accept="image/png,image/jpeg,image/gif"
                        onChange={handleFileChange}
                        className="hidden"
                      />
                      <label htmlFor="thumbnail">
                        <Button
                          type="button"
                          variant="outline"
                          className="border-black text-black hover:bg-gray-100 rounded-md"
                        >
                          Select Image
                        </Button>
                      </label>
                    </div>
                  ) : (
                    <div className="relative">
                      <div className="flex items-center">
                        <div className="w-12 h-12 bg-gray-100 rounded-md overflow-hidden mr-4">
                          {thumbnailPreview && (
                            <img
                              src={thumbnailPreview || "/placeholder.svg"}
                              alt="Thumbnail preview"
                              className="w-full h-full object-cover"
                            />
                          )}
                        </div>
                        <div className="flex-1 truncate">
                          <p className="text-sm font-medium text-black truncate">{formData.thumbnail.name}</p>
                          <p className="text-xs text-gray-500">{Math.round(formData.thumbnail.size / 1024)} KB</p>
                        </div>
                      </div>
                      <button
                        type="button"
                        onClick={() => clearFile("thumbnail")}
                        className="absolute top-0 right-0 p-1 rounded-full bg-gray-100 hover:bg-gray-200"
                      >
                        <X className="h-4 w-4 text-gray-600" />
                      </button>
                    </div>
                  )}
                </div>
              </div>
            </div>

<div className="pt-6 border-t border-gray-200">
              <p className="text-sm text-gray-600 mb-6">
                By uploading, you confirm that your content complies with our{" "}
                <Link href="/terms" className="text-black underline">
                  Terms of Service
                </Link>{" "}
                and does not violate any copyright laws.
              </p>

<div className="flex flex-wrap gap-4">
                <Button type="submit" className="bg-black text-white hover:bg-gray-800 rounded-md">
                  Submit for Review
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  className="border-black text-black hover:bg-gray-100 rounded-md"
                >
                  Save as Draft
                </Button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "0",
        md: "0",
        sm: "0",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]typescriptreact:file="components/simulations/fibonacci-simulation.tsx" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Play, Pause, RefreshCw, ChevronRight } from "lucide-react"

export default function FibonacciSimulation() {
  const [isRunning, setIsRunning] = useState(false)
  const [steps, setSteps] = useState(10)
  const [speed, setSpeed] = useState(1)
  const [currentStep, setCurrentStep] = useState(0)
  const [fibSequence, setFibSequence] = useState<number[]>([])
  const [highlightedIndices, setHighlightedIndices] = useState<number[]>([])
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>(0)
  const lastStepTimeRef = useRef<number>(0)

// Calculate Fibonacci sequence
  useEffect(() => {
    const sequence = calculateFibonacciSequence(steps)
    setFibSequence(sequence)
    resetSimulation()
  }, [steps])

const calculateFibonacciSequence = (n: number): number[] => {
    const sequence: number[] = [0, 1]
    for (let i = 2; i <= n; i++) {
      sequence.push(sequence[i - 1] + sequence[i - 2])
    }
    return sequence
  }

const resetSimulation = () => {
    setIsRunning(false)
    setCurrentStep(0)
    setHighlightedIndices([])
    lastStepTimeRef.current = 0
    drawCanvas()
  }

// Animation loop
  useEffect(() => {
    if (!isRunning) return

const animate = (timestamp: number) => {
      if (!lastStepTimeRef.current) {
        lastStepTimeRef.current = timestamp
      }

const elapsed = timestamp - lastStepTimeRef.current
      const stepDuration = 2000 / speed // milliseconds per step

if (elapsed > stepDuration) {
        lastStepTimeRef.current = timestamp

if (currentStep < steps) {
          setCurrentStep((prev) => prev + 1)

if (currentStep >= 2) {
            setHighlightedIndices([currentStep - 2, currentStep - 1, currentStep])
          }
        } else {
          setIsRunning(false)
        }
      }

drawCanvas()
      animationRef.current = requestAnimationFrame(animate)
    }

animationRef.current = requestAnimationFrame(animate)

return () => {
      cancelAnimationFrame(animationRef.current)
    }
  }, [isRunning, currentStep, steps, speed])

// Draw visualization
  const drawCanvas = () => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Calculate max value for scaling
    const maxValue = Math.max(...fibSequence.slice(0, currentStep + 1), 1)
    const boxSize = 40
    const boxSpacing = 60
    const startX = 50
    const startY = 100

// Draw sequence boxes
    for (let i = 0; i <= currentStep; i++) {
      const x = startX + i * boxSpacing
      const y = startY

// Draw connecting lines for calculation
      if (i >= 2 && highlightedIndices.includes(i)) {
        ctx.strokeStyle = "#000000"
        ctx.lineWidth = 2
        ctx.beginPath()
        ctx.moveTo(x - boxSpacing, y + boxSize / 2)
        ctx.lineTo(x - boxSpacing / 2, y + boxSize + 20)
        ctx.stroke()

ctx.beginPath()
        ctx.moveTo(x - 2 * boxSpacing, y + boxSize / 2)
        ctx.lineTo(x - boxSpacing / 2, y + boxSize + 20)
        ctx.stroke()

ctx.beginPath()
        ctx.moveTo(x - boxSpacing / 2, y + boxSize + 20)
        ctx.lineTo(x, y + boxSize / 2)
        ctx.stroke()

// Draw plus sign
        ctx.font = "16px Arial"
        ctx.fillStyle = "#000000"
        ctx.textAlign = "center"
        ctx.fillText("+", x - boxSpacing * 1.5, y + boxSize + 10)

// Draw equals sign
        ctx.fillText("=", x - boxSpacing / 2, y + boxSize + 40)
      }

// Draw box
      ctx.fillStyle = highlightedIndices.includes(i) ? "#FFD700" : "#FFFFFF"
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 2
      ctx.beginPath()
      ctx.rect(x - boxSize / 2, y - boxSize / 2, boxSize, boxSize)
      ctx.fill()
      ctx.stroke()

// Draw index
      ctx.font = "12px Arial"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "center"
      ctx.fillText(`n=${i}`, x, y - boxSize / 2 - 10)

// Draw value
      ctx.font = "16px Arial"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "center"
      ctx.fillText(fibSequence[i].toString(), x, y + 5)
    }

// Draw visualization bars
    const barWidth = 30
    const barSpacing = 40
    const barStartX = 50
    const barStartY = 250
    const maxBarHeight = 150

for (let i = 0; i <= currentStep; i++) {
      const x = barStartX + i * barSpacing
      const value = fibSequence[i]
      const barHeight = (value / maxValue) * maxBarHeight

// Draw bar
      ctx.fillStyle = highlightedIndices.includes(i) ? "#FFD700" : "#4834d4"
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 2
      ctx.beginPath()
      ctx.rect(x - barWidth / 2, barStartY - barHeight, barWidth, barHeight)
      ctx.fill()
      ctx.stroke()

// Draw value
      ctx.font = "12px Arial"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "center"
      ctx.fillText(value.toString(), x, barStartY + 15)
    }

// Draw golden ratio approximation if we have enough steps
    if (currentStep >= 5) {
      const lastRatio = fibSequence[currentStep] / fibSequence[currentStep - 1]
      const goldenRatio = (1 + Math.sqrt(5)) / 2

ctx.font = "14px Arial"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "left"
      ctx.fillText(`Current ratio: ${lastRatio.toFixed(6)}`, 50, 450)
      ctx.fillText(`Golden ratio: ${goldenRatio.toFixed(6)}`, 50, 470)
      ctx.fillText(`Difference: ${Math.abs(lastRatio - goldenRatio).toFixed(6)}`, 50, 490)
    }
  }

const toggleSimulation = () => {
    setIsRunning(!isRunning)
    if (!isRunning && currentStep >= steps) {
      resetSimulation()
    }
  }

const stepForward = () => {
    if (currentStep < steps) {
      setCurrentStep((prev) => prev + 1)

if (currentStep >= 2) {
        setHighlightedIndices([currentStep - 2, currentStep - 1, currentStep])
      }

drawCanvas()
    }
  }

return (
    <div className="border-2 border-black p-6 bg-white">
      <Tabs defaultValue="simulation" className="w-full">
        <TabsList className="grid w-full grid-cols-2 mb-4">
          <TabsTrigger value="simulation">Simulation</TabsTrigger>
          <TabsTrigger value="code">Code</TabsTrigger>
        </TabsList>

<TabsContent value="simulation" className="space-y-4">
          <div className="flex flex-col space-y-4">
            <div className="flex flex-wrap gap-4 mb-4">
              <Button onClick={toggleSimulation} className="bg-black text-white hover:bg-gray-800">
                {isRunning ? <Pause className="mr-2 h-4 w-4" /> : <Play className="mr-2 h-4 w-4" />}
                {isRunning ? "Pause" : "Start"}
              </Button>

<Button
                onClick={stepForward}
                variant="outline"
                className="border-black text-black hover:bg-gray-100"
                disabled={isRunning || currentStep >= steps}
              >
                <ChevronRight className="mr-2 h-4 w-4" />
                Step
              </Button>

<Button onClick={resetSimulation} variant="outline" className="border-black text-black hover:bg-gray-100">
                <RefreshCw className="mr-2 h-4 w-4" />
                Reset
              </Button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div className="space-y-2">
                <Label htmlFor="steps">Number of Steps: {steps}</Label>
                <div className="flex items-center space-x-2">
                  <Button
                    onClick={() => setSteps(Math.max(5, steps - 1))}
                    variant="outline"
                    className="h-8 w-8 p-0 border-black"
                  >
                    -
                  </Button>
                  <Input
                    id="steps"
                    type="number"
                    value={steps}
                    onChange={(e) => setSteps(Math.max(5, Math.min(20, Number.parseInt(e.target.value) || 5)))}
                    className="border-black"
                    min={5}
                    max={20}
                  />
                  <Button
                    onClick={() => setSteps(Math.min(20, steps + 1))}
                    variant="outline"
                    className="h-8 w-8 p-0 border-black"
                  >
                    +
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label>Animation Speed: {speed}x</Label>
                <Slider
                  value={[speed]}
                  min={0.5}
                  max={3}
                  step={0.5}
                  onValueChange={(value) => setSpeed(value[0])}
                  className="border-black"
                />
              </div>
            </div>

<div className="border-2 border-black p-4 bg-gray-50">
              <h3 className="font-bold mb-2">Fibonacci Sequence</h3>
              <p className="mb-2">The Fibonacci sequence is defined by the recurrence relation:</p>
              <p className="font-mono text-center mb-2">F(n) = F(n-1) + F(n-2)</p>
              <p className="mb-2">Starting with F(0) = 0 and F(1) = 1</p>
              <p>
                As the sequence progresses, the ratio between consecutive Fibonacci numbers approaches the Golden Ratio
                (approximately 1.618033988749895).
              </p>
            </div>
          </div>
        </TabsContent>

<TabsContent value="code">
          <div className="border-2 border-black p-4 bg-gray-50 overflow-auto max-h-[600px]">
            <pre className="text-sm font-mono whitespace-pre-wrap">
              {`// Fibonacci Sequence Simulation Code

// Calculate the Fibonacci sequence up to n terms
function calculateFibonacciSequence(n) {
  const sequence = [0, 1];
  
  for (let i = 2; i <= n; i++) {
    // Each number is the sum of the two preceding ones
    sequence.push(sequence[i - 1] + sequence[i - 2]);
  }
  
  return sequence;
}

// Animation loop for stepping through the sequence
function animate(timestamp) {
  if (!lastStepTimeRef.current) {
    lastStepTimeRef.current = timestamp;
  }
  
  const elapsed = timestamp - lastStepTimeRef.current;
  const stepDuration = 2000 / speed; // milliseconds per step
  
  if (elapsed > stepDuration) {
    lastStepTimeRef.current = timestamp;
    
    if (currentStep < steps) {
      setCurrentStep(prev => prev + 1);
      
      // Highlight the numbers involved in the current calculation
      if (currentStep >= 2) {
        setHighlightedIndices([currentStep - 2, currentStep - 1, currentStep]);
      }
    } else {
      setIsRunning(false);
    }
  }
  
  drawCanvas();
  requestAnimationFrame(animate);
}

// Draw the visualization to the canvas
function drawCanvas() {
  const canvas = canvasRef.current;
  const ctx = canvas.getContext("2d");
  
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Calculate max value for scaling the visualization
  const maxValue = Math.max(...fibSequence.slice(0, currentStep + 1), 1);
  const boxSize = 40;
  const boxSpacing = 60;
  const startX = 50;
  const startY = 100;
  
  // Draw sequence boxes
  for (let i = 0; i <= currentStep; i++) {
    const x = startX + i * boxSpacing;
    const y = startY;
    
    // Draw connecting lines for calculation
    if (i >= 2 && highlightedIndices.includes(i)) {
      // Draw lines connecting the previous two numbers to the current
      ctx.strokeStyle = "#000000";
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(x - boxSpacing, y + boxSize / 2);
      ctx.lineTo(x - boxSpacing / 2, y + boxSize + 20);
      ctx.stroke();
      
      ctx.beginPath();
      ctx.moveTo(x - 2 * boxSpacing, y + boxSize / 2);
      ctx.lineTo(x - boxSpacing / 2, y + boxSize + 20);
      ctx.stroke();
      
      ctx.beginPath();
      ctx.moveTo(x - boxSpacing / 2, y + boxSize + 20);
      ctx.lineTo(x, y + boxSize / 2);
      ctx.stroke();
      
      // Draw plus sign
      ctx.font = "16px Arial";
      ctx.fillStyle = "#000000";
      ctx.textAlign = "center";
      ctx.fillText("+", x - boxSpacing * 1.5, y + boxSize + 10);
      
      // Draw equals sign
      ctx.fillText("=", x - boxSpacing / 2, y + boxSize + 40);
    }
    
    // Draw box
    ctx.fillStyle = highlightedIndices.includes(i) ? "#FFD700" : "#FFFFFF";
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.rect(x - boxSize / 2, y - boxSize / 2, boxSize, boxSize);
    ctx.fill();
    ctx.stroke();
    
    // Draw index
    ctx.font = "12px Arial";
    ctx.fillStyle = "#000000";
    ctx.textAlign = "center";
    ctx.fillText(\`n=\${i}\`, x, y - boxSize / 2 - 10);
    
    // Draw value
    ctx.font = "16px Arial";
    ctx.fillStyle = "#000000";
    ctx.textAlign = "center";
    ctx.fillText(fibSequence[i].toString(), x, y + 5);
  }
  
  // Draw visualization bars
  const barWidth = 30;
  const barSpacing = 40;
  const barStartX = 50;
  const barStartY = 250;
  const maxBarHeight = 150;
  
  for (let i = 0; i <= currentStep; i++) {
    const x = barStartX + i * barSpacing;
    const value = fibSequence[i];
    const barHeight = (value / maxValue) * maxBarHeight;
    
    // Draw bar
    ctx.fillStyle = highlightedIndices.includes(i) ? "#FFD700" : "#4834d4";
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.rect(x - barWidth / 2, barStartY - barHeight, barWidth, barHeight);
    ctx.fill();
    ctx.stroke();
    
    // Draw value
    ctx.font = "12px Arial";
    ctx.fillStyle = "#000000";
    ctx.textAlign = "center";
    ctx.fillText(value.toString(), x, barStartY + 15);
  }
  
  // Draw golden ratio approximation
  if (currentStep >= 5) {
    const lastRatio = fibSequence[currentStep] / fibSequence[currentStep - 1];
    const goldenRatio = (1 + Math.sqrt(5)) / 2;
    
    ctx.font = "14px Arial";
    ctx.fillStyle = "#000000";
    ctx.textAlign = "left";
    ctx.fillText(\`Current ratio: \${lastRatio.toFixed(6)}\`, 50, 450);
    ctx.fillText(\`Golden ratio: \${goldenRatio.toFixed(6)}\`, 50, 470);
    ctx.fillText(\`Difference: \${Math.abs(lastRatio - goldenRatio).toFixed(6)}\`, 50, 490);
  }
}`}
            </pre>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/simulations/page.tsx" isEdit="true" isMerged="true"
import Link from "next/link"
import Image from "next/image"
import { Button } from "@/components/ui/button"

const simulations = [
  {
    id: "networking",
    title: "Client-Server Model",
    description:
      "Visualize how clients and servers communicate in a network architecture. This simulation shows the request-response cycle and data transfer between multiple clients and a server.",
    image: "/placeholder.svg?height=300&width=500",
    category: "Networking",
  },
  {
    id: "fibonacci",
    title: "Fibonacci Sequence",
    description:
      "Watch the Fibonacci sequence unfold visually with an interactive animation that demonstrates how each number is the sum of the two preceding ones.",
    image: "/placeholder.svg?height=300&width=500",
    category: "Algorithms",
  },
  {
    id: "ai-addition",
    title: "AI Model for Addition",
    description:
      "See how a simple neural network learns to add two numbers. This simulation breaks down the training process and shows how weights and biases are adjusted.",
    image: "/placeholder.svg?height=300&width=500",
    category: "Artificial Intelligence",
  },
  {
    id: "git",
    title: "Git Workflow with Avatars",
    description:
      "Understand Git version control with visual avatars representing different contributors. Watch as branches are created, merged, and code is committed.",
    image: "/placeholder.svg?height=300&width=500",
    category: "Development Tools",
  },
  {
    id: "coding",
    title: "How Coding Works",
    description:
      "A visual journey from writing code to execution. See how code is compiled or interpreted and how it interacts with computer hardware.",
    image: "/placeholder.svg?height=300&width=500",
    category: "Programming Fundamentals",
  },
]

export default function SimulationsPage() {
  return (
    <div className="container mx-auto px-4 py-12">
      <div className="mb-12 text-center">
        <h1 className="text-4xl font-bold mb-4 text-black">Interactive Simulations</h1>
        <p className="text-lg text-gray-800 max-w-3xl mx-auto">
          Explore our collection of interactive visual simulations that make complex technical concepts easy to
          understand. Each simulation includes the actual code behind it.
        </p>
      </div>

{/* Categories */}
      <div className="mb-12 flex flex-wrap justify-center gap-4">
        <Button variant="outline" className="border-black text-black hover:bg-gray-100 rounded-md">
          All Categories
        </Button>
        {["Networking", "Algorithms", "Artificial Intelligence", "Development Tools", "Programming Fundamentals"].map(
          (category) => (
            <Button key={category} variant="outline" className="border-black text-black hover:bg-gray-100 rounded-md">
              {category}
            </Button>
          ),
        )}
      </div>

{/* Simulations Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {simulations.map((sim) => (
          <Link href={`/simulations/${sim.id}`} key={sim.id}>
            <div className="border-2 border-black rounded-lg overflow-hidden hover:shadow-lg transition-shadow h-full flex flex-col">
              <div className="relative">
                <Image
                  src={sim.image || "/placeholder.svg"}
                  alt={sim.title}
                  width={500}
                  height={300}
                  className="w-full h-56 object-cover"
                />
                <div className="absolute top-4 right-4 bg-black text-white px-3 py-1 rounded-md text-sm">
                  {sim.category}
                </div>
              </div>
              <div className="p-6 flex-1 flex flex-col">
                <h2 className="text-2xl font-bold mb-3 text-black">{sim.title}</h2>
                <p className="text-gray-800 mb-4 flex-1">{sim.description}</p>
                <Button className="bg-black text-white hover:bg-gray-800 w-full rounded-md">Try Simulation</Button>
              </div>
            </div>
          </Link>
        ))}
      </div>

{/* Features Section */}
      <div className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
        <div className="border-2 border-black p-6 rounded-lg">
          <h2 className="text-xl font-bold mb-4 text-black">Interactive Learning</h2>
          <p className="text-gray-800">
            All simulations are fully interactive, allowing you to adjust parameters and see how they affect the outcome
            in real-time.
          </p>
        </div>

<div className="border-2 border-black p-6 rounded-lg">
          <h2 className="text-xl font-bold mb-4 text-black">View the Code</h2>
          <p className="text-gray-800">
            Each simulation includes the actual code that powers it, helping you understand both the concept and its
            implementation.
          </p>
        </div>

<div className="border-2 border-black p-6 rounded-lg">
          <h2 className="text-xl font-bold mb-4 text-black">Simple Explanations</h2>
          <p className="text-gray-800">
            Complex concepts are broken down into simple, visual explanations that make learning intuitive and engaging.
          </p>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;

--card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;

--popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;

--primary: 0 0% 0%;
    --primary-foreground: 0 0% 98%;

--secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;

--muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;

--accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;

--radius: 0.5rem;
  }

.dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;

--card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;

--popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;

--primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;

--secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;

--muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;

--accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: "Times New Roman", Times, serif;
  }
  p,
  span,
  div {
    font-family: "Georgia", serif;
  }
  pre,
  code,
  .font-mono {
    font-family: "Courier New", monospace;
  }
}

/* Comic/Manga Style Customizations */
.rounded-lg {
  border-radius: 0 !important;
}

.rounded-md {
  border-radius: 0 !important;
}

.rounded-full {
  border-radius: 0 !important;
}

button,
a,
input,
textarea,
select {
  transition: all 0.2s ease;
}

/* Sharp corners for all UI elements */
* {
  border-radius: 0 !important;
}

/* Comic book style elements */
.comic-border {
  border: 3px solid black;
  box-shadow: 5px 5px 0px #000;
}

.comic-panel {
  border: 3px solid black;
  box-shadow: 5px 5px 0px #000;
  position: relative;
  overflow: hidden;
}

.comic-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23f0f0f0' fill-opacity='.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  pointer-events: none;
}

.comic-title {
  font-family: "Bangers", "Impact", fantasy;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 2px 2px 0px #000;
}

.comic-speech-bubble {
  position: relative;
  background: white;
  border: 3px solid black;
  padding: 10px 15px;
  margin: 15px;
  max-width: 300px;
}

.comic-speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 20px;
  border-width: 20px 0 0 20px;
  border-style: solid;
  border-color: black transparent;
}

.comic-speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 23px;
  border-width: 15px 0 0 15px;
  border-style: solid;
  border-color: white transparent;
}

.comic-action {
  position: absolute;
  font-family: "Bangers", "Impact", fantasy;
  font-size: 2rem;
  color: #ff3d00;
  text-shadow: 2px 2px 0px #000;
  transform: rotate(-15deg);
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  from {
    transform: rotate(-15deg) scale(1);
  }
  to {
    transform: rotate(-15deg) scale(1.1);
  }
}

.comic-zoom {
  transition: transform 0.3s;
}

.comic-zoom:hover {
  transform: scale(1.05);
}

.comic-dots {
  background-image: radial-gradient(#000 10%, transparent 11%), radial-gradient(#000 10%, transparent 11%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  background-repeat: repeat;
  opacity: 0.1;
}

.action-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(45deg, transparent 49.5%, #000 49.5%, #000 50.5%, transparent 50.5%),
    linear-gradient(-45deg, transparent 49.5%, #000 49.5%, #000 50.5%, transparent 50.5%);
  background-size: 30px 30px;
  opacity: 0.05;
  pointer-events: none;
}
[V0_FILE]typescriptreact:file="components/simulations/networking-simulation.tsx" isEdit="true"
"use client"

type Packet = {
  id: number
  fromClient: boolean
  x: number
  y: number
  targetX: number
  targetY: number
  content: string
  speed: number
}

export default function NetworkingSimulation() {
  const [isRunning, setIsRunning] = useState(false)
  const [numClients, setNumClients] = useState(3)
  const [packets, setPackets] = useState<Packet[]>([])
  const [serverLoad, setServerLoad] = useState(0)
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>(0)
  const lastPacketTimeRef = useRef<number>(0)

const clientColors = ["#FF6B6B", "#48DBFB", "#1DD1A1", "#F368E0", "#FF9F43"]
  const requestMessages = ["GET /data", "POST /update", "GET /user"]
  const responseMessages = ["200 OK", "201 Created", "404 Not Found"]

// Initialize simulation
  useEffect(() => {
    resetSimulation()
    return () => {
      cancelAnimationFrame(animationRef.current)
    }
  }, [numClients])

const resetSimulation = () => {
    setIsRunning(false)
    setPackets([])
    setServerLoad(0)
    lastPacketTimeRef.current = 0
    cancelAnimationFrame(animationRef.current)
    drawCanvas()
  }

// Create a new packet
  const createPacket = (fromClient: boolean, clientIndex: number) => {
    const serverX = 250
    const serverY = 250

// Calculate client position in a semi-circle
    const angle = (Math.PI * clientIndex) / (numClients - 1)
    const clientX = 250 + Math.cos(angle) * 200
    const clientY = 250 + Math.sin(angle) * 200

const startX = fromClient ? clientX : serverX
    const startY = fromClient ? clientY : serverY
    const targetX = fromClient ? serverX : clientX
    const targetY = fromClient ? serverY : clientY

const messageIndex = Math.floor(Math.random() * (fromClient ? requestMessages.length : responseMessages.length))
    const content = fromClient ? requestMessages[messageIndex] : responseMessages[messageIndex]

const newPacket: Packet = {
      id: Date.now() + Math.random(),
      fromClient,
      x: startX,
      y: startY,
      targetX,
      targetY,
      content,
      speed: 2 + Math.random() * 2,
    }

setPackets((prev) => [...prev, newPacket])

if (fromClient) {
      // Increase server load when receiving a request
      setServerLoad((prev) => Math.min(prev + 0.2, 1))

// Schedule a response after a delay
      setTimeout(
        () => {
          if (isRunning) {
            createPacket(false, clientIndex)
            setServerLoad((prev) => Math.max(prev - 0.2, 0))
          }
        },
        1000 + Math.random() * 1000,
      )
    }
  }

// Animation loop
  useEffect(() => {
    if (!isRunning) return

const animate = (timestamp: number) => {
      if (!lastPacketTimeRef.current) {
        lastPacketTimeRef.current = timestamp
      }

// Create new packets periodically
      if (timestamp - lastPacketTimeRef.current > 2000) {
        lastPacketTimeRef.current = timestamp
        const randomClientIndex = Math.floor(Math.random() * numClients)
        createPacket(true, randomClientIndex)
      }

// Update packet positions
      setPackets((prevPackets) => {
        return prevPackets.filter((packet) => {
          // Calculate direction vector
          const dx = packet.targetX - packet.x
          const dy = packet.targetY - packet.y
          const distance = Math.sqrt(dx * dx + dy * dy)

// If packet reached destination, remove it
          if (distance < 5) {
            return false
          }

// Move packet along the path
          const vx = (dx / distance) * packet.speed
          const vy = (dy / distance) * packet.speed

packet.x += vx
          packet.y += vy

return true
        })
      })

drawCanvas()
      animationRef.current = requestAnimationFrame(animate)
    }

animationRef.current = requestAnimationFrame(animate)

return () => {
      cancelAnimationFrame(animationRef.current)
    }
  }, [isRunning, numClients])

// Draw visualization
  const drawCanvas = () => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Draw comic-style background
    ctx.fillStyle = "#FFFDF7"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

// Draw action lines in the background
    ctx.strokeStyle = "#00000015"
    ctx.lineWidth = 1

// Radial lines from center
    for (let i = 0; i < 20; i++) {
      const angle = (Math.PI * 2 * i) / 20
      ctx.beginPath()
      ctx.moveTo(250, 250)
      ctx.lineTo(250 + Math.cos(angle) * 300, 250 + Math.sin(angle) * 300)
      ctx.stroke()
    }

// Draw dotted background
    ctx.fillStyle = "#00000010"
    for (let x = 0; x < canvas.width; x += 20) {
      for (let y = 0; y < canvas.height; y += 20) {
        ctx.beginPath()
        ctx.arc(x, y, 1, 0, Math.PI * 2)
        ctx.fill()
      }
    }

// Draw server
    ctx.fillStyle = serverLoad > 0.7 ? "#FF4757" : serverLoad > 0.4 ? "#FFA502" : "#2ED573"
    ctx.strokeStyle = "#000000"
    ctx.lineWidth = 3
    ctx.beginPath()
    ctx.rect(225, 225, 50, 50)
    ctx.fill()
    ctx.stroke()

// Draw server load bar
    ctx.fillStyle = "#FFFFFF"
    ctx.fillRect(215, 285, 70, 10)
    ctx.fillStyle = serverLoad > 0.7 ? "#FF4757" : serverLoad > 0.4 ? "#FFA502" : "#2ED573"
    ctx.fillRect(215, 285, 70 * serverLoad, 10)
    ctx.strokeStyle = "#000000"
    ctx.strokeRect(215, 285, 70, 10)

// Draw server label
    ctx.fillStyle = "#000000"
    ctx.font = "bold 14px 'Times New Roman', serif"
    ctx.textAlign = "center"
    ctx.fillText("SERVER", 250, 215)
    ctx.font = "12px 'Courier New', monospace"
    ctx.fillText(`Load: ${Math.round(serverLoad * 100)}%`, 250, 305)

// Draw clients
    for (let i = 0; i < numClients; i++) {
      const angle = (Math.PI * i) / (numClients - 1)
      const x = 250 + Math.cos(angle) * 200
      const y = 250 + Math.sin(angle) * 200

ctx.fillStyle = clientColors[i % clientColors.length]
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 3
      ctx.beginPath()
      ctx.rect(x - 25, y - 15, 50, 30)
      ctx.fill()
      ctx.stroke()

// Draw client label
      ctx.fillStyle = "#000000"
      ctx.font = "bold 12px 'Times New Roman', serif"
      ctx.textAlign = "center"
      ctx.fillText(`CLIENT ${i + 1}`, x, y - 25)
    }

// Draw packets
    packets.forEach((packet) => {
      // Draw packet
      ctx.fillStyle = packet.fromClient ? "#FF4757" : "#2ED573"
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 2
      ctx.beginPath()
      ctx.rect(packet.x - 15, packet.y - 10, 30, 20)
      ctx.fill()
      ctx.stroke()

// Draw packet content
      ctx.fillStyle = "#FFFFFF"
      ctx.font = "bold 8px 'Courier New', monospace"
      ctx.textAlign = "center"
      ctx.fillText(packet.content, packet.x, packet.y + 3)

// Draw motion lines behind the packet
      ctx.strokeStyle = "#00000050"
      ctx.lineWidth = 1
      const dx = packet.x - packet.targetX
      const dy = packet.y - packet.targetY
      const distance = Math.sqrt(dx * dx + dy * dy)
      const normalizedDx = dx / distance
      const normalizedDy = dy / distance

for (let i = 1; i <= 3; i++) {
        const lineLength = 5 + i * 3
        ctx.beginPath()
        ctx.moveTo(packet.x, packet.y)
        ctx.lineTo(packet.x + normalizedDx * lineLength, packet.y + normalizedDy * lineLength)
        ctx.stroke()
      }
    })

// Draw comic-style effects
    if (isRunning && packets.length > 0 && Math.random() > 0.95) {
      const effects = ["POW!", "ZOOM!", "PING!", "DATA!", "SEND!"]
      const randomEffect = effects[Math.floor(Math.random() * effects.length)]
      const randomX = 100 + Math.random() * 300
      const randomY = 100 + Math.random() * 300

ctx.font = "bold 24px 'Bangers', 'Impact', fantasy"
      ctx.fillStyle = "#FF3D00"
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 3
      ctx.textAlign = "center"

// Draw starburst
      ctx.beginPath()
      for (let i = 0; i < 8; i++) {
        const angle = (Math.PI * 2 * i) / 8
        const innerRadius = 15
        const outerRadius = 30

ctx.lineTo(randomX + Math.cos(angle) * outerRadius, randomY + Math.sin(angle) * outerRadius)

ctx.lineTo(
          randomX + Math.cos(angle + Math.PI / 8) * innerRadius,
          randomY + Math.sin(angle + Math.PI / 8) * innerRadius,
        )
      }
      ctx.closePath()
      ctx.fillStyle = "#FFEB3B"
      ctx.fill()
      ctx.stroke()

// Draw text
      ctx.fillStyle = "#FF3D00"
      ctx.strokeText(randomEffect, randomX, randomY + 8)
      ctx.fillText(randomEffect, randomX, randomY + 8)
    }
  }

const toggleSimulation = () => {
    setIsRunning(!isRunning)
    if (!isRunning) {
      // Create initial packets when starting
      for (let i = 0; i < numClients; i++) {
        if (Math.random() > 0.5) {
          createPacket(true, i)
        }
      }
    }
  }

return (
    <div className="comic-panel p-6 bg-white">
      <Tabs defaultValue="simulation" className="w-full">
        <TabsList className="grid w-full grid-cols-2 mb-4 comic-border">
          <TabsTrigger value="simulation" className="font-serif">
            Simulation
          </TabsTrigger>
          <TabsTrigger value="code" className="font-mono">
            Code
          </TabsTrigger>
        </TabsList>

<TabsContent value="simulation" className="space-y-4">
          <div className="flex flex-col space-y-4">
            <div className="flex flex-wrap gap-4 mb-4">
              <Button onClick={toggleSimulation} className="bg-black text-white hover:bg-gray-800 comic-border">
                {isRunning ? <Pause className="mr-2 h-4 w-4" /> : <Play className="mr-2 h-4 w-4" />}
                <span className="font-serif">{isRunning ? "Pause" : "Start"}</span>
              </Button>

<Button
                onClick={resetSimulation}
                variant="outline"
                className="border-black text-black hover:bg-gray-100 comic-border"
              >
                <RefreshCw className="mr-2 h-4 w-4" />
                <span className="font-serif">Reset</span>
              </Button>
            </div>

<div className="space-y-2 mb-4">
              <Label htmlFor="numClients" className="font-serif">
                Number of Clients: {numClients}
              </Label>
              <Slider
                id="numClients"
                value={[numClients]}
                min={1}
                max={5}
                step={1}
                onValueChange={(value) => setNumClients(value[0])}
                className="border-black"
              />
            </div>

{/* Comic speech bubble */}
              <div className="comic-speech-bubble absolute top-10 right-10">
                <p className="font-serif m-0 text-sm">Watch how clients send requests and the server responds!</p>
              </div>

{/* Comic action text */}
              {isRunning && <div className="comic-action absolute bottom-10 left-10">ZOOM!</div>}
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
              <div className="comic-panel p-4">
                <h3 className="font-serif font-bold mb-2">Request Types</h3>
                <ul className="list-disc pl-5 space-y-1">
                  {requestMessages.map((msg, i) => (
                    <li key={i} className="font-mono text-sm">
                      <span className="bg-red-100 px-1">{msg}</span>
                    </li>
                  ))}
                </ul>
              </div>

<div className="comic-panel p-4">
                <h3 className="font-serif font-bold mb-2">Response Types</h3>
                <ul className="list-disc pl-5 space-y-1">
                  {responseMessages.map((msg, i) => (
                    <li key={i} className="font-mono text-sm">
                      <span className="bg-green-100 px-1">{msg}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="code">
          <div className="comic-panel p-4 bg-gray-50 overflow-auto max-h-[600px]">
            <pre className="text-sm font-mono whitespace-pre-wrap">
              {`// Client-Server Network Simulation Code

// Types for our simulation entities
type Packet = {
  id: number
  fromClient: boolean  // Direction of packet
  x: number            // Current x position
  y: number            // Current y position
  targetX: number      // Destination x position
  targetY: number      // Destination y position
  content: string      // Message content
  speed: number        // Movement speed
}

// Create a new packet
function createPacket(fromClient, clientIndex) {
  const serverX = 250
  const serverY = 250
  
  // Calculate client position in a semi-circle
  const angle = (Math.PI * clientIndex) / (numClients - 1)
  const clientX = 250 + Math.cos(angle) * 200
  const clientY = 250 + Math.sin(angle) * 200
  
  const startX = fromClient ? clientX : serverX
  const startY = fromClient ? clientY : serverY
  const targetX = fromClient ? serverX : clientX
  const targetY = fromClient ? serverY : clientY
  
  const messageIndex = Math.floor(Math.random() * 
    (fromClient ? requestMessages.length : responseMessages.length))
  const content = fromClient ? 
    requestMessages[messageIndex] : 
    responseMessages[messageIndex]
  
  const newPacket = {
    id: Date.now() + Math.random(),
    fromClient,
    x: startX,
    y: startY,
    targetX,
    targetY,
    content,
    speed: 2 + Math.random() * 2
  }
  
  setPackets(prev => [...prev, newPacket])
  
  if (fromClient) {
    // Increase server load when receiving a request
    setServerLoad(prev => Math.min(prev + 0.2, 1))
    
    // Schedule a response after a delay
    setTimeout(() => {
      if (isRunning) {
        createPacket(false, clientIndex)
        setServerLoad(prev => Math.max(prev - 0.2, 0))
      }
    }, 1000 + Math.random() * 1000)
  }
}

// Animation loop for updating packet positions
function animate(timestamp) {
  // Create new packets periodically
  if (timestamp - lastPacketTimeRef.current > 2000) {
    lastPacketTimeRef.current = timestamp
    const randomClientIndex = Math.floor(Math.random() * numClients)
    createPacket(true, randomClientIndex)
  }

// Update packet positions
  setPackets(prevPackets => {
    return prevPackets.filter(packet => {
      // Calculate direction vector
      const dx = packet.targetX - packet.x
      const dy = packet.targetY - packet.y
      const distance = Math.sqrt(dx * dx + dy * dy)
      
      // If packet reached destination, remove it
      if (distance < 5) {
        return false
      }
      
      // Move packet along the path
      const vx = (dx / distance) * packet.speed
      const vy = (dy / distance) * packet.speed
      
      packet.x += vx
      packet.y += vy
      
      return true
    })
  })

drawCanvas()
  requestAnimationFrame(animate)
}`}
            </pre>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/simulations/ai-addition-simulation.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

type Neuron = {
  x: number
  y: number
  value: number
  bias: number
  weights: number[]
}

type Layer = {
  neurons: Neuron[]
}

type Network = {
  layers: Layer[]
}

export default function AIAdditionSimulation() {
  const [isRunning, setIsRunning] = useState(false)
  const [isTraining, setIsTraining] = useState(false)
  const [learningRate, setLearningRate] = useState(0.1)
  const [epochs, setEpochs] = useState(100)
  const [currentEpoch, setCurrentEpoch] = useState(0)
  const [input1, setInput1] = useState(3)
  const [input2, setInput2] = useState(5)
  const [prediction, setPrediction] = useState(0)
  const [error, setError] = useState(0)
  const [network, setNetwork] = useState<Network>({ layers: [] })
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>(0)
  const lastUpdateTimeRef = useRef<number>(0)

// Initialize neural network
  useEffect(() => {
    resetNetwork()
  }, [])

const resetNetwork = () => {
    setIsRunning(false)
    setIsTraining(false)
    setCurrentEpoch(0)
    setPrediction(0)
    setError(0)

// Create a simple neural network with 2 inputs, 3 hidden neurons, and 1 output
    const newNetwork: Network = {
      layers: [
        // Input layer (2 neurons)
        {
          neurons: [
            { x: 100, y: 150, value: input1, bias: 0, weights: [] },
            { x: 100, y: 250, value: input2, bias: 0, weights: [] },
          ],
        },
        // Hidden layer (3 neurons)
        {
          neurons: [
            {
              x: 250,
              y: 100,
              value: 0,
              bias: Math.random() * 2 - 1,
              weights: [Math.random() * 2 - 1, Math.random() * 2 - 1],
            },
            {
              x: 250,
              y: 200,
              value: 0,
              bias: Math.random() * 2 - 1,
              weights: [Math.random() * 2 - 1, Math.random() * 2 - 1],
            },
            {
              x: 250,
              y: 300,
              value: 0,
              bias: Math.random() * 2 - 1,
              weights: [Math.random() * 2 - 1, Math.random() * 2 - 1],
            },
          ],
        },
        // Output layer (1 neuron)
        {
          neurons: [
            {
              x: 400,
              y: 200,
              value: 0,
              bias: Math.random() * 2 - 1,
              weights: [Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1],
            },
          ],
        },
      ],
    }

setNetwork(newNetwork)
    forwardPass(newNetwork, input1, input2)
  }

// Sigmoid activation function
  const sigmoid = (x: number): number => {
    return 1 / (1 + Math.exp(-x))
  }

// Forward pass through the network
  const forwardPass = (net: Network, in1: number, in2: number): number => {
    // Set input values
    net.layers[0].neurons[0].value = in1
    net.layers[0].neurons[1].value = in2

// Process hidden layer
    for (let i = 0; i < net.layers[1].neurons.length; i++) {
      const neuron = net.layers[1].neurons[i]
      let sum = neuron.bias

for (let j = 0; j < net.layers[0].neurons.length; j++) {
        sum += net.layers[0].neurons[j].value * neuron.weights[j]
      }

neuron.value = sigmoid(sum)
    }

// Process output layer
    const outputNeuron = net.layers[2].neurons[0]
    let sum = outputNeuron.bias

for (let i = 0; i < net.layers[1].neurons.length; i++) {
      sum += net.layers[1].neurons[i].value * outputNeuron.weights[i]
    }

// Scale the output to match the expected range (0-20)
    outputNeuron.value = sigmoid(sum) * 20

// Update prediction
    const predictedValue = outputNeuron.value
    setPrediction(predictedValue)

// Calculate error
    const expectedSum = in1 + in2
    const currentError = Math.abs(expectedSum - predictedValue)
    setError(currentError)

return predictedValue
  }

// Backpropagation
  const backpropagate = (net: Network, in1: number, in2: number, learningRate: number): void => {
    const expectedSum = in1 + in2
    const outputNeuron = net.layers[2].neurons[0]
    const outputError = expectedSum - outputNeuron.value

// Update output layer weights
    for (let i = 0; i < net.layers[1].neurons.length; i++) {
      const hiddenNeuron = net.layers[1].neurons[i]
      outputNeuron.weights[i] += learningRate * outputError * hiddenNeuron.value
    }

// Update output layer bias
    outputNeuron.bias += learningRate * outputError

// Update hidden layer weights
    for (let i = 0; i < net.layers[1].neurons.length; i++) {
      const hiddenNeuron = net.layers[1].neurons[i]
      const hiddenError = outputError * outputNeuron.weights[i]

for (let j = 0; j < net.layers[0].neurons.length; j++) {
        const inputNeuron = net.layers[0].neurons[j]
        hiddenNeuron.weights[j] += learningRate * hiddenError * inputNeuron.value
      }

// Update hidden layer bias
      hiddenNeuron.bias += learningRate * hiddenError
    }
  }

// Train the network
  const trainNetwork = () => {
    setIsTraining(true)
    setCurrentEpoch(0)
  }

// Animation loop
  useEffect(() => {
    if (!isRunning) return

const animate = (timestamp: number) => {
      if (!lastUpdateTimeRef.current) {
        lastUpdateTimeRef.current = timestamp
      }

const elapsed = timestamp - lastUpdateTimeRef.current

if (isTraining && elapsed > 50) {
        lastUpdateTimeRef.current = timestamp

if (currentEpoch < epochs) {
          // Generate random training examples
          const a = Math.floor(Math.random() * 10)
          const b = Math.floor(Math.random() * 10)

// Update network with current inputs
          const updatedNetwork = { ...network }

// Forward pass
          forwardPass(updatedNetwork, a, b)

// Backward pass
          backpropagate(updatedNetwork, a, b, learningRate)

setNetwork(updatedNetwork)
          setCurrentEpoch((prev) => prev + 1)
        } else {
          setIsTraining(false)
          // Test with user inputs after training
          forwardPass(network, input1, input2)
        }
      }

drawCanvas()
      animationRef.current = requestAnimationFrame(animate)
    }

animationRef.current = requestAnimationFrame(animate)

return () => {
      cancelAnimationFrame(animationRef.current)
    }
  }, [isRunning, isTraining, currentEpoch, epochs, learningRate, network, input1, input2])

// Draw visualization
  const drawCanvas = () => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Draw comic-style background
    ctx.fillStyle = "#FFFDF7"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

// Draw network layers
    for (let l = 0; l < network.layers.length; l++) {
      const layer = network.layers[l]

// Draw connections to next layer
      if (l < network.layers.length - 1) {
        const nextLayer = network.layers[l + 1]

for (let i = 0; i < layer.neurons.length; i++) {
          const neuron = layer.neurons[i]

for (let j = 0; j < nextLayer.neurons.length; j++) {
            const nextNeuron = nextLayer.neurons[j]
            const weight = nextNeuron.weights[i] || 0

// Calculate line width based on weight
            const lineWidth = Math.abs(weight) * 3

// Calculate color based on weight sign
            const colorIntensity = Math.min(Math.abs(weight) * 200, 255)
            const color = weight > 0 ? `rgb(0, ${colorIntensity}, 0)` : `rgb(${colorIntensity}, 0, 0)`

ctx.strokeStyle = color
            ctx.lineWidth = lineWidth
            ctx.beginPath()
            ctx.moveTo(neuron.x, neuron.y)
            ctx.lineTo(nextNeuron.x, nextNeuron.y)
            ctx.stroke()

// Draw comic-style "zap" effect on active connections
            if (Math.abs(weight) > 0.5 && isTraining && Math.random() > 0.9) {
              const midX = (neuron.x + nextNeuron.x) / 2
              const midY = (neuron.y + nextNeuron.y) / 2

ctx.font = "bold 14px 'Bangers', 'Impact', fantasy"
              ctx.fillStyle = "#FF3D00"
              ctx.strokeStyle = "#000000"
              ctx.lineWidth = 2
              ctx.textAlign = "center"
              ctx.fillText("ZAP!", midX, midY)
              ctx.strokeText("ZAP!", midX, midY)
            }
          }
        }
      }

// Draw neurons
      for (let i = 0; i < layer.neurons.length; i++) {
        const neuron = layer.neurons[i]

// Calculate color based on activation
        const activation = neuron.value / (l === 2 ? 20 : 10) // Scale for output layer
        const colorIntensity = Math.min(Math.round(activation * 255), 255)
        const color = `rgb(${colorIntensity}, ${colorIntensity}, 255)`

// Draw neuron circle
        ctx.fillStyle = color
        ctx.strokeStyle = "#000000"
        ctx.lineWidth = 3
        ctx.beginPath()
        ctx.arc(neuron.x, neuron.y, 20, 0, Math.PI * 2)
        ctx.fill()
        ctx.stroke()

// Draw neuron value
        ctx.font = "bold 12px 'Courier New', monospace"
        ctx.fillStyle = "#000000"
        ctx.textAlign = "center"
        ctx.fillText(neuron.value.toFixed(2), neuron.x, neuron.y + 5)

// Draw labels
        if (l === 0) {
          ctx.font = "bold 14px 'Times New Roman', serif"
          ctx.fillStyle = "#000000"
          ctx.textAlign = "right"
          ctx.fillText(`Input ${i + 1}: ${neuron.value}`, neuron.x - 30, neuron.y + 5)
        } else if (l === 2) {
          ctx.font = "bold 14px 'Times New Roman', serif"
          ctx.fillStyle = "#000000"
          ctx.textAlign = "left"
          ctx.fillText(`Output: ${neuron.value.toFixed(2)}`, neuron.x + 30, neuron.y + 5)

// Draw expected output
          ctx.font = "14px 'Times New Roman', serif"
          ctx.fillStyle = "#000000"
          ctx.textAlign = "left"
          ctx.fillText(`Expected: ${input1 + input2}`, neuron.x + 30, neuron.y + 25)

// Draw error
          ctx.font = "14px 'Times New Roman', serif"
          ctx.fillStyle = error > 1 ? "#FF0000" : "#00AA00"
          ctx.textAlign = "left"
          ctx.fillText(`Error: ${error.toFixed(2)}`, neuron.x + 30, neuron.y + 45)
        }
      }
    }

// Draw layer labels
    ctx.font = "bold 16px 'Times New Roman', serif"
    ctx.fillStyle = "#000000"
    ctx.textAlign = "center"
    ctx.fillText("Input Layer", 100, 50)
    ctx.fillText("Hidden Layer", 250, 50)
    ctx.fillText("Output Layer", 400, 50)

// Draw training progress
    if (isTraining) {
      ctx.font = "bold 16px 'Times New Roman', serif"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "center"
      ctx.fillText(`Training: ${currentEpoch}/${epochs} epochs`, 250, 400)

// Add comic-style "thinking" effect
      if (currentEpoch % 10 === 0) {
        ctx.font = "bold 20px 'Bangers', 'Impact', fantasy"
        ctx.fillStyle = "#FF3D00"
        ctx.strokeStyle = "#000000"
        ctx.lineWidth = 2
        ctx.textAlign = "center"
        ctx.fillText("THINKING...", 250, 430)
        ctx.strokeText("THINKING...", 250, 430)
      }
    }

// Draw comic-style speech bubble for the output
    if (prediction > 0 && !isTraining) {
      ctx.fillStyle = "#FFFFFF"
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 3

// Speech bubble
      ctx.beginPath()
      ctx.moveTo(400, 150)
      ctx.lineTo(450, 120)
      ctx.lineTo(500, 150)
      ctx.lineTo(500, 200)
      ctx.lineTo(400, 200)
      ctx.closePath()
      ctx.fill()
      ctx.stroke()

// Text
      ctx.font = "bold 16px 'Times New Roman', serif"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "center"
      ctx.fillText(`I think it's`, 450, 165)
      ctx.fillText(`${prediction.toFixed(1)}!`, 450, 185)
    }
  }

const toggleSimulation = () => {
    setIsRunning(!isRunning)
  }

const handleInputChange = () => {
    // Update network with current inputs
    forwardPass(network, input1, input2)
  }

<TabsContent value="simulation" className="space-y-4">
          <div className="flex flex-col space-y-4">
            <div className="flex flex-wrap gap-4 mb-4">
              <Button onClick={toggleSimulation} className="bg-black text-white hover:bg-gray-800 comic-border">
                {isRunning ? <Pause className="mr-2 h-4 w-4" /> : <Play className="mr-2 h-4 w-4" />}
                <span className="font-serif">{isRunning ? "Pause" : "Start"}</span>
              </Button>

<Button
                onClick={trainNetwork}
                variant="outline"
                className="border-black text-black hover:bg-gray-100 comic-border"
                disabled={isTraining || !isRunning}
              >
                <Brain className="mr-2 h-4 w-4" />
                <span className="font-serif">Train Network</span>
              </Button>

<Button
                onClick={resetNetwork}
                variant="outline"
                className="border-black text-black hover:bg-gray-100 comic-border"
              >
                <RefreshCw className="mr-2 h-4 w-4" />
                <span className="font-serif">Reset</span>
              </Button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
              <div className="space-y-2">
                <Label htmlFor="input1" className="font-serif">
                  Input 1:
                </Label>
                <div className="flex items-center space-x-2">
                  <Button
                    onClick={() => setInput1(Math.max(0, input1 - 1))}
                    variant="outline"
                    className="h-8 w-8 p-0 border-black comic-border"
                  >
                    -
                  </Button>
                  <Input
                    id="input1"
                    type="number"
                    value={input1}
                    onChange={(e) => setInput1(Math.max(0, Math.min(10, Number.parseInt(e.target.value) || 0)))}
                    onBlur={handleInputChange}
                    className="border-black font-mono"
                    min={0}
                    max={10}
                  />
                  <Button
                    onClick={() => setInput1(Math.min(10, input1 + 1))}
                    variant="outline"
                    className="h-8 w-8 p-0 border-black comic-border"
                  >
                    +
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label htmlFor="input2" className="font-serif">
                  Input 2:
                </Label>
                <div className="flex items-center space-x-2">
                  <Button
                    onClick={() => setInput2(Math.max(0, input2 - 1))}
                    variant="outline"
                    className="h-8 w-8 p-0 border-black comic-border"
                  >
                    -
                  </Button>
                  <Input
                    id="input2"
                    type="number"
                    value={input2}
                    onChange={(e) => setInput2(Math.max(0, Math.min(10, Number.parseInt(e.target.value) || 0)))}
                    onBlur={handleInputChange}
                    className="border-black font-mono"
                    min={0}
                    max={10}
                  />
                  <Button
                    onClick={() => setInput2(Math.min(10, input2 + 1))}
                    variant="outline"
                    className="h-8 w-8 p-0 border-black comic-border"
                  >
                    +
                  </Button>
                </div>
              </div>

<div className="space-y-2">
                <Label className="font-serif">Learning Rate: {learningRate}</Label>
                <Slider
                  value={[learningRate]}
                  min={0.01}
                  max={0.5}
                  step={0.01}
                  onValueChange={(value) => setLearningRate(value[0])}
                  className="border-black"
                />
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div className="space-y-2">
                <Label className="font-serif">Training Epochs: {epochs}</Label>
                <Slider
                  value={[epochs]}
                  min={10}
                  max={500}
                  step={10}
                  onValueChange={(value) => setEpochs(value[0])}
                  className="border-black"
                />
              </div>

<div className="flex items-center justify-center comic-panel p-4">
                <div className="text-center">
                  <div className="text-lg font-bold font-serif">Prediction</div>
                  <div className="text-3xl font-mono">{prediction.toFixed(2)}</div>
                  <div className="text-sm text-gray-500 font-serif">Expected: {input1 + input2}</div>
                  <div className={`text-sm ${error > 1 ? "text-red-500" : "text-green-500"} font-mono`}>
                    Error: {error.toFixed(2)}
                  </div>
                </div>
              </div>
            </div>

{/* Comic speech bubble */}
              <div className="comic-speech-bubble absolute top-10 right-10">
                <p className="font-serif m-0 text-sm">Watch the neural network learn to add numbers!</p>
              </div>

{/* Comic action text */}
              {isTraining && <div className="comic-action absolute bottom-10 left-10">LEARN!</div>}
            </div>

<div className="comic-panel p-4 bg-gray-50">
              <h3 className="font-bold mb-2 font-serif">How This Neural Network Works</h3>
              <p className="mb-2 font-serif">This is a simple feedforward neural network with:</p>
              <ul className="list-disc pl-5 mb-2 space-y-1 font-serif">
                <li>2 input neurons (for the two numbers to add)</li>
                <li>3 hidden neurons with sigmoid activation</li>
                <li>1 output neuron (the predicted sum)</li>
              </ul>
              <p className="mb-2 font-serif">
                The network learns to add numbers through training with backpropagation.
              </p>
              <p className="font-serif">
                The thickness and color of the connections represent the weight values (green for positive, red for
                negative).
              </p>
            </div>
          </div>
        </TabsContent>

<TabsContent value="code">
          <div className="comic-panel p-4 bg-gray-50 overflow-auto max-h-[600px]">
            <pre className="text-sm font-mono whitespace-pre-wrap">
              {`// Neural Network for Addition Simulation Code

// Types for our neural network
type Neuron = {
  x: number          // Position for visualization
  y: number
  value: number      // Activation value
  bias: number       // Bias term
  weights: number[]  // Connection weights to previous layer
}

type Layer = {
  neurons: Neuron[]
}

type Network = {
  layers: Layer[]
}

// Sigmoid activation function
function sigmoid(x) {
  return 1 / (1 + Math.exp(-x));
}

// Forward pass through the network
function forwardPass(net, in1, in2) {
  // Set input values
  net.layers[0].neurons[0].value = in1;
  net.layers[0].neurons[1].value = in2;
  
  // Process hidden layer
  for (let i = 0; i < net.layers[1].neurons.length; i++) {
    const neuron = net.layers[1].neurons[i];
    let sum = neuron.bias;
    
    for (let j = 0; j < net.layers[0].neurons.length; j++) {
      sum += net.layers[0].neurons[j].value * neuron.weights[j];
    }
    
    neuron.value = sigmoid(sum);
  }
  
  // Process output layer
  const outputNeuron = net.layers[2].neurons[0];
  let sum = outputNeuron.bias;
  
  for (let i = 0; i < net.layers[1].neurons.length; i++) {
    sum += net.layers[1].neurons[i].value * outputNeuron.weights[i];
  }
  
  // Scale the output to match the expected range (0-20)
  outputNeuron.value = sigmoid(sum) * 20;
  
  return outputNeuron.value;
}

// Backpropagation
function backpropagate(net, in1, in2, learningRate) {
  const expectedSum = in1 + in2;
  const outputNeuron = net.layers[2].neurons[0];
  const outputError = expectedSum - outputNeuron.value;
  
  // Update output layer weights
  for (let i = 0; i < net.layers[1].neurons.length; i++) {
    const hiddenNeuron = net.layers[1].neurons[i];
    outputNeuron.weights[i] += learningRate * outputError * hiddenNeuron.value;
  }
  
  // Update output layer bias
  outputNeuron.bias += learningRate * outputError;
  
  // Update hidden layer weights
  for (let i = 0; i < net.layers[1].neurons.length; i++) {
    const hiddenNeuron = net.layers[1].neurons[i];
    const hiddenError = outputError * outputNeuron.weights[i];
    
    for (let j = 0; j < net.layers[0].neurons.length; j++) {
      const inputNeuron = net.layers[0].neurons[j];
      hiddenNeuron.weights[j] += learningRate * hiddenError * inputNeuron.value;
    }
    
    // Update hidden layer bias
    hiddenNeuron.bias += learningRate * hiddenError;
  }
}`}
            </pre>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/simulations/git-simulation.tsx" isEdit="true"
"use client"

type Commit = {
  id: string
  message: string
  author: Developer
  x: number
  y: number
  parent?: string
  branch: string
  merged?: boolean
}

type Branch = {
  name: string
  head: string
  color: string
  y: number
}

type Developer = {
  name: string
  color: string
  avatar: string
}

export default function GitSimulation() {
  const [isRunning, setIsRunning] = useState(false)
  const [speed, setSpeed] = useState(1)
  const [commits, setCommits] = useState<Commit[]>([])
  const [branches, setBranches] = useState<Branch[]>([])
  const [developers, setDevelopers] = useState<Developer[]>([])
  const [activeDeveloper, setActiveDeveloper] = useState<string>("")
  const [activeBranch, setActiveBranch] = useState<string>("")
  const [commitMessage, setCommitMessage] = useState<string>("")
  const [nextAction, setNextAction] = useState<string>("")
  const [actionQueue, setActionQueue] = useState<string[]>([])
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>(0)
  const lastActionTimeRef = useRef<number>(0)

// Initialize simulation
  useEffect(() => {
    resetSimulation()
  }, [])

const resetSimulation = () => {
    setIsRunning(false)

// Create developers
    const newDevelopers: Developer[] = [
      { name: "Alice", color: "#FF6B6B", avatar: "A" },
      { name: "Bob", color: "#48DBFB", avatar: "B" },
      { name: "Charlie", color: "#1DD1A1", avatar: "C" },
    ]
    setDevelopers(newDevelopers)
    setActiveDeveloper(newDevelopers[0].name)

// Create main branch
    const mainBranch: Branch = { name: "main", head: "", color: "#000000", y: 100 }
    setBranches([mainBranch])
    setActiveBranch("main")

// Create initial commit
    const initialCommit: Commit = {
      id: "initial",
      message: "Initial commit",
      author: newDevelopers[0],
      x: 100,
      y: mainBranch.y,
      branch: "main",
    }
    setCommits([initialCommit])

// Update branch head
    mainBranch.head = initialCommit.id
    setBranches([mainBranch])

// Set up demo action queue
    setActionQueue([
      "commit:Alice:main:Add README file",
      "commit:Alice:main:Create basic structure",
      "branch:Bob:feature-login:main",
      "commit:Bob:feature-login:Add login form",
      "commit:Alice:main:Update documentation",
      "commit:Bob:feature-login:Implement authentication",
      "branch:Charlie:feature-ui:main",
      "commit:Charlie:feature-ui:Add UI components",
      "commit:Bob:feature-login:Fix login bugs",
      "merge:feature-login:main",
      "commit:Charlie:feature-ui:Improve styling",
      "commit:Alice:main:Integrate login feature",
      "merge:feature-ui:main",
      "commit:Alice:main:Prepare for release",
    ])

setCommitMessage("")
    setNextAction("")
  }

// Process next action from queue
  const processNextAction = () => {
    if (actionQueue.length === 0) {
      setNextAction("")
      return
    }

const action = actionQueue[0]
    setNextAction(action)

const parts = action.split(":")
    const actionType = parts[0]

if (actionType === "commit") {
      const developerName = parts[1]
      const branchName = parts[2]
      const message = parts[3]

setActiveDeveloper(developerName)
      setActiveBranch(branchName)
      setCommitMessage(message)

createCommit(developerName, branchName, message)
    } else if (actionType === "branch") {
      const developerName = parts[1]
      const newBranchName = parts[2]
      const fromBranchName = parts[3]

setActiveDeveloper(developerName)
      createBranch(newBranchName, fromBranchName)
    } else if (actionType === "merge") {
      const sourceBranchName = parts[1]
      const targetBranchName = parts[2]

mergeBranch(sourceBranchName, targetBranchName)
    }

// Remove processed action from queue
    setActionQueue((prev) => prev.slice(1))
  }

// Create a new commit
  const createCommit = (developerName: string, branchName: string, message: string) => {
    const developer = developers.find((d) => d.name === developerName)
    const branch = branches.find((b) => b.name === branchName)

if (!developer || !branch) return

// Find parent commit
    const parentCommit = commits.find((c) => c.id === branch.head)

if (!parentCommit && branch.name !== "main") return

// Calculate position
    const x = parentCommit ? parentCommit.x + 100 : 100
    const y = branch.y

// Create new commit
    const newCommit: Commit = {
      id: `${branchName}-${commits.length}`,
      message,
      author: developer,
      x,
      y,
      parent: parentCommit?.id,
      branch: branchName,
    }

// Update commits
    setCommits((prev) => [...prev, newCommit])

// Update branch head
    const updatedBranches = branches.map((b) => (b.name === branchName ? { ...b, head: newCommit.id } : b))
    setBranches(updatedBranches)
  }

// Create a new branch
  const createBranch = (newBranchName: string, fromBranchName: string) => {
    const fromBranch = branches.find((b) => b.name === fromBranchName)
    if (!fromBranch) return

// Calculate vertical position for the new branch
    const y = Math.max(...branches.map((b) => b.y)) + 80

// Create branch colors
    const branchColors = ["#FF6B6B", "#48DBFB", "#1DD1A1", "#F368E0", "#FF9F43"]
    const colorIndex = branches.length % branchColors.length

// Create new branch
    const newBranch: Branch = {
      name: newBranchName,
      head: fromBranch.head,
      color: branchColors[colorIndex],
      y,
    }

// Update branches
    setBranches((prev) => [...prev, newBranch])
    setActiveBranch(newBranchName)
  }

// Merge a branch into another
  const mergeBranch = (sourceBranchName: string, targetBranchName: string) => {
    const sourceBranch = branches.find((b) => b.name === sourceBranchName)
    const targetBranch = branches.find((b) => b.name === targetBranchName)

if (!sourceBranch || !targetBranch) return

// Find head commits
    const sourceCommit = commits.find((c) => c.id === sourceBranch.head)
    const targetCommit = commits.find((c) => c.id === targetBranch.head)

if (!sourceCommit || !targetCommit) return

// Mark source commit as merged
    const updatedCommits = commits.map((c) => (c.id === sourceCommit.id ? { ...c, merged: true } : c))
    setCommits(updatedCommits)

// Update target branch head to include source changes
    const updatedBranches = branches.map((b) => (b.name === targetBranchName ? { ...b, head: sourceCommit.id } : b))
    setBranches(updatedBranches)
  }

// Animation loop
  useEffect(() => {
    if (!isRunning) return

const animate = (timestamp: number) => {
      if (!lastActionTimeRef.current) {
        lastActionTimeRef.current = timestamp
      }

const elapsed = timestamp - lastActionTimeRef.current
      const actionDuration = 3000 / speed // milliseconds per action

if (elapsed > actionDuration && actionQueue.length > 0) {
        lastActionTimeRef.current = timestamp
        processNextAction()
      }

drawCanvas()
      animationRef.current = requestAnimationFrame(animate)
    }

animationRef.current = requestAnimationFrame(animate)

return () => {
      cancelAnimationFrame(animationRef.current)
    }
  }, [isRunning, actionQueue, speed, branches, commits, developers])

// Draw visualization
  const drawCanvas = () => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Draw comic-style background
    ctx.fillStyle = "#FFFDF7"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

// Draw branch lines
    branches.forEach((branch) => {
      const branchCommits = commits.filter((c) => c.branch === branch.name)

if (branchCommits.length > 0) {
        ctx.strokeStyle = branch.color
        ctx.lineWidth = 3
        ctx.beginPath()

// Sort commits by x position
        const sortedCommits = [...branchCommits].sort((a, b) => a.x - b.x)

// Start from the first commit
        ctx.moveTo(sortedCommits[0].x, branch.y)

// Draw line through all commits in this branch
        for (let i = 1; i < sortedCommits.length; i++) {
          ctx.lineTo(sortedCommits[i].x, branch.y)
        }

ctx.stroke()
      }

// Draw branch label
      ctx.font = "bold 14px 'Times New Roman', serif"
      ctx.fillStyle = branch.color
      ctx.textAlign = "right"
      ctx.fillText(branch.name, 80, branch.y + 5)
    })

// Draw connections between branches (for merges)
    commits.forEach((commit) => {
      if (commit.merged) {
        const parentCommit = commits.find((c) => c.id === commit.parent)
        if (parentCommit) {
          const parentBranch = branches.find((b) => b.name === parentCommit.branch)
          const commitBranch = branches.find((b) => b.name === commit.branch)

if (parentBranch && commitBranch) {
            ctx.strokeStyle = "#888888"
            ctx.lineWidth = 2
            ctx.setLineDash([5, 5])
            ctx.beginPath()
            ctx.moveTo(commit.x, commit.y)
            ctx.lineTo(commit.x, parentBranch.y)
            ctx.stroke()
            ctx.setLineDash([])
          }
        }
      }
    })

// Draw commits
    commits.forEach((commit) => {
      // Draw commit circle
      ctx.fillStyle = commit.author.color
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 3
      ctx.beginPath()
      ctx.arc(commit.x, commit.y, 15, 0, Math.PI * 2)
      ctx.fill()
      ctx.stroke()

// Draw author avatar
      ctx.font = "bold 12px 'Courier New', monospace"
      ctx.fillStyle = "#FFFFFF"
      ctx.textAlign = "center"
      ctx.fillText(commit.author.avatar, commit.x, commit.y + 4)

// Draw commit message
      ctx.font = "12px 'Times New Roman', serif"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "center"
      ctx.fillText(commit.message, commit.x, commit.y + 30)

// Draw commit ID
      ctx.font = "10px 'Courier New', monospace"
      ctx.fillStyle = "#666666"
      ctx.textAlign = "center"
      ctx.fillText(commit.id.substring(0, 8), commit.x, commit.y - 20)

// Occasionally add comic-style effects
      if (Math.random() > 0.95 && isRunning) {
        ctx.font = "bold 14px 'Bangers', 'Impact', fantasy"
        ctx.fillStyle = "#FF3D00"
        ctx.strokeStyle = "#000000"
        ctx.lineWidth = 2
        ctx.textAlign = "center"
        ctx.fillText("COMMIT!", commit.x + 30, commit.y - 10)
        ctx.strokeText("COMMIT!", commit.x + 30, commit.y - 10)
      }
    })

// Draw legend
    const legendX = 50
    const legendY = 400

ctx.font = "bold 16px 'Times New Roman', serif"
    ctx.fillStyle = "#000000"
    ctx.textAlign = "left"
    ctx.fillText("Developers:", legendX, legendY)

developers.forEach((dev, index) => {
      const y = legendY + 25 + index * 25

// Draw avatar circle
      ctx.fillStyle = dev.color
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 2
      ctx.beginPath()
      ctx.arc(legendX + 15, y - 5, 10, 0, Math.PI * 2)
      ctx.fill()
      ctx.stroke()

// Draw avatar text
      ctx.font = "bold 10px 'Courier New', monospace"
      ctx.fillStyle = "#FFFFFF"
      ctx.textAlign = "center"
      ctx.fillText(dev.avatar, legendX + 15, y - 2)

// Draw name
      ctx.font = "14px 'Times New Roman', serif"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "left"
      ctx.fillText(dev.name, legendX + 35, y)
    })

// Draw current action
    if (nextAction) {
      ctx.font = "14px 'Times New Roman', serif"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "left"
      ctx.fillText(`Current Action: ${nextAction}`, 300, legendY)
    }

// Draw comic-style speech bubble
    if (commits.length > 2 && !isRunning) {
      const lastCommit = commits[commits.length - 1]

ctx.fillStyle = "#FFFFFF"
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 3

// Speech bubble
      ctx.beginPath()
      ctx.moveTo(lastCommit.x, lastCommit.y - 40)
      ctx.lineTo(lastCommit.x + 20, lastCommit.y - 70)
      ctx.lineTo(lastCommit.x + 120, lastCommit.y - 70)
      ctx.lineTo(lastCommit.x + 120, lastCommit.y - 110)
      ctx.lineTo(lastCommit.x - 20, lastCommit.y - 110)
      ctx.lineTo(lastCommit.x - 20, lastCommit.y - 70)
      ctx.lineTo(lastCommit.x - 10, lastCommit.y - 70)
      ctx.closePath()
      ctx.fill()
      ctx.stroke()

// Text
      ctx.font = "bold 12px 'Times New Roman', serif"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "center"
      ctx.fillText("Latest commit:", lastCommit.x + 50, lastCommit.y - 95)
      ctx.fillText(lastCommit.message, lastCommit.x + 50, lastCommit.y - 80)
    }
  }

const toggleSimulation = () => {
    setIsRunning(!isRunning)
    lastActionTimeRef.current = 0
  }

const handleManualCommit = () => {
    if (activeDeveloper && activeBranch && commitMessage) {
      createCommit(activeDeveloper, activeBranch, commitMessage)
      setCommitMessage("")
    }
  }

<TabsContent value="simulation" className="space-y-4">
          <div className="flex flex-col space-y-4">
            <div className="flex flex-wrap gap-4 mb-4">
              <Button onClick={toggleSimulation} className="bg-black text-white hover:bg-gray-800 comic-border">
                {isRunning ? <Pause className="mr-2 h-4 w-4" /> : <Play className="mr-2 h-4 w-4" />}
                <span className="font-serif">{isRunning ? "Pause" : "Start"}</span>
              </Button>

<Button
                onClick={processNextAction}
                variant="outline"
                className="border-black text-black hover:bg-gray-100 comic-border"
                disabled={isRunning || actionQueue.length === 0}
              >
                <GitCommit className="mr-2 h-4 w-4" />
                <span className="font-serif">Next Action</span>
              </Button>

<div className="space-y-2 mb-4">
              <Label className="font-serif">Animation Speed: {speed}x</Label>
              <Slider
                value={[speed]}
                min={0.5}
                max={3}
                step={0.5}
                onValueChange={(value) => setSpeed(value[0])}
                className="border-black"
              />
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
              <div className="space-y-2">
                <Label htmlFor="developer" className="font-serif">
                  Developer
                </Label>
                <Select value={activeDeveloper} onValueChange={setActiveDeveloper}>
                  <SelectTrigger className="border-black font-serif">
                    <SelectValue placeholder="Select developer" />
                  </SelectTrigger>
                  <SelectContent>
                    {developers.map((dev) => (
                      <SelectItem key={dev.name} value={dev.name} className="font-serif">
                        {dev.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="branch" className="font-serif">
                  Branch
                </Label>
                <Select value={activeBranch} onValueChange={setActiveBranch}>
                  <SelectTrigger className="border-black font-serif">
                    <SelectValue placeholder="Select branch" />
                  </SelectTrigger>
                  <SelectContent>
                    {branches.map((branch) => (
                      <SelectItem key={branch.name} value={branch.name} className="font-serif">
                        {branch.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="commitMessage" className="font-serif">
                  Commit Message
                </Label>
                <div className="flex space-x-2">
                  <Input
                    id="commitMessage"
                    value={commitMessage}
                    onChange={(e) => setCommitMessage(e.target.value)}
                    className="border-black font-serif"
                    placeholder="Enter commit message"
                  />
                  <Button
                    onClick={handleManualCommit}
                    variant="outline"
                    className="border-black text-black hover:bg-gray-100 comic-border"
                    disabled={!commitMessage || !activeDeveloper || !activeBranch}
                  >
                    <GitCommit className="h-4 w-4" />
                  </Button>
                </div>
              </div>
            </div>

{/* Comic speech bubble */}
              <div className="comic-speech-bubble absolute top-10 right-10">
                <p className="font-serif m-0 text-sm">Watch how Git branches and commits work!</p>
              </div>

{/* Comic action text */}
              {isRunning && <div className="comic-action absolute bottom-10 left-10">BRANCH!</div>}
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
              <div className="comic-panel p-4">
                <h3 className="font-bold mb-2 flex items-center font-serif">
                  <GitCommit className="mr-2 h-4 w-4" />
                  Commit
                </h3>
                <p className="text-sm font-serif">
                  A commit represents a snapshot of your code at a specific point in time. Each commit has an author,
                  message, and unique ID.
                </p>
              </div>

<div className="comic-panel p-4">
                <h3 className="font-bold mb-2 flex items-center font-serif">
                  <GitBranch className="mr-2 h-4 w-4" />
                  Branch
                </h3>
                <p className="text-sm font-serif">
                  A branch is a separate line of development. Branches allow developers to work on features
                  independently without affecting the main codebase.
                </p>
              </div>

<div className="comic-panel p-4">
                <h3 className="font-bold mb-2 flex items-center font-serif">
                  <GitMerge className="mr-2 h-4 w-4" />
                  Merge
                </h3>
                <p className="text-sm font-serif">
                  Merging combines changes from one branch into another. This is how completed features are integrated
                  back into the main codebase.
                </p>
              </div>
            </div>
          </div>
        </TabsContent>

<TabsContent value="code">
          <div className="comic-panel p-4 bg-gray-50 overflow-auto max-h-[600px]">
            <pre className="text-sm font-mono whitespace-pre-wrap">
              {`// Git Workflow Simulation Code

// Types for our Git entities
type Commit = {
  id: string
  message: string
  author: Developer
  x: number
  y: number
  parent?: string
  branch: string
  merged?: boolean
}

type Branch = {
  name: string
  head: string  // ID of the latest commit
  color: string
  y: number     // Vertical position for visualization
}

type Developer = {
  name: string
  color: string
  avatar: string
}

// Create a new commit
function createCommit(developerName, branchName, message) {
  const developer = developers.find(d => d.name === developerName);
  const branch = branches.find(b => b.name === branchName);
  
  if (!developer || !branch) return;
  
  // Find parent commit
  const parentCommit = commits.find(c => c.id === branch.head);
  
  if (!parentCommit && branch.name !== "main") return;
  
  // Calculate position
  const x = parentCommit ? parentCommit.x + 100 : 100;
  const y = branch.y;
  
  // Create new commit
  const newCommit = {
    id: \`\${branchName}-\${commits.length}\`,
    message,
    author: developer,
    x,
    y,
    parent: parentCommit?.id,
    branch: branchName
  };
  
  // Update commits
  setCommits(prev => [...prev, newCommit]);
  
  // Update branch head
  const updatedBranches = branches.map(b => 
    b.name === branchName ? { ...b, head: newCommit.id } : b
  );
  setBranches(updatedBranches);
}

// Create a new branch
function createBranch(newBranchName, fromBranchName) {
  const fromBranch = branches.find(b => b.name === fromBranchName);
  if (!fromBranch) return;
  
  // Calculate vertical position for the new branch
  const y = Math.max(...branches.map(b => b.y)) + 80;
  
  // Create branch colors
  const branchColors = ["#FF6B6B", "#48DBFB", "#1DD1A1", "#F368E0", "#FF9F43"];
  const colorIndex = branches.length % branchColors.length;
  
  // Create new branch
  const newBranch = {
    name: newBranchName,
    head: fromBranch.head,
    color: branchColors[colorIndex],
    y
  };
  
  // Update branches
  setBranches(prev => [...prev, newBranch]);
  setActiveBranch(newBranchName);
}`}
            </pre>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/simulations/coding-simulation.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Slider } from "@/components/ui/slider"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Play, Pause, RefreshCw, ChevronRight, Code } from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

type MemoryCell = {
  address: string
  name: string
  value: any
  type: string
  highlighted: boolean
}

type CodeLine = {
  line: string
  isExecuting: boolean
  isExecuted: boolean
  explanation: string
}

type CodeExample = {
  name: string
  code: string[]
  explanation: string[]
}

export default function CodingSimulation() {
  const [isRunning, setIsRunning] = useState(false)
  const [speed, setSpeed] = useState(1)
  const [currentStep, setCurrentStep] = useState(0)
  const [memory, setMemory] = useState<MemoryCell[]>([])
  const [codeLines, setCodeLines] = useState<CodeLine[]>([])
  const [output, setOutput] = useState<string[]>([])
  const [selectedExample, setSelectedExample] = useState<string>("variables")
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const animationRef = useRef<number>(0)
  const lastStepTimeRef = useRef<number>(0)

// Code examples
  const codeExamples: Record<string, CodeExample> = {
    variables: {
      name: "Variables and Data Types",
      code: [
        "// Variables and Data Types",
        "let name = 'Alice';",
        "let age = 30;",
        "let isActive = true;",
        "",
        "// String concatenation",
        "let message = 'Hello, ' + name + '!';",
        "",
        "// Numeric operation",
        "let nextYear = age + 1;",
        "",
        "console.log(message);",
        "console.log('Next year you will be ' + nextYear);",
      ],
      explanation: [
        "// This is a comment explaining variables and data types",
        "// Declare a string variable 'name' and assign it the value 'Alice'",
        "// Declare a number variable 'age' and assign it the value 30",
        "// Declare a boolean variable 'isActive' and assign it the value true",
        "",
        "// This comment explains string concatenation",
        "// Create a new string by joining 'Hello, ' with the value of 'name' and '!'",
        "",
        "// This comment explains numeric operations",
        "// Create a new number by adding 1 to the value of 'age'",
        "",
        "// Output the value of 'message' to the console",
        "// Output a string with the value of 'nextYear' to the console",
      ],
    },
    conditionals: {
      name: "Conditional Logic",
      code: [
        "// Conditional Logic",
        "let temperature = 22;",
        "let weather;",
        "",
        "if (temperature > 30) {",
        "  weather = 'hot';",
        "} else if (temperature > 20) {",
        "  weather = 'warm';",
        "} else if (temperature > 10) {",
        "  weather = 'cool';",
        "} else {",
        "  weather = 'cold';",
        "}",
        "",
        "console.log('The weather is ' + weather);",
      ],
      explanation: [
        "// This is a comment explaining conditional logic",
        "// Declare a number variable 'temperature' and assign it the value 22",
        "// Declare a variable 'weather' without assigning a value yet",
        "",
        "// Start an if statement that checks if temperature is greater than 30",
        "// If the condition is true, assign 'hot' to the weather variable",
        "// If the previous condition was false, check if temperature is greater than 20",
        "// If this condition is true, assign 'warm' to the weather variable",
        "// If the previous condition was false, check if temperature is greater than 10",
        "// If this condition is true, assign 'cool' to the weather variable",
        "// If all previous conditions were false, execute this code block",
        "// Assign 'cold' to the weather variable",
        "",
        "// Output a string with the value of 'weather' to the console",
      ],
    },
    loops: {
      name: "Loops",
      code: [
        "// Loops",
        "let sum = 0;",
        "",
        "// For loop to calculate sum of numbers 1-5",
        "for (let i = 1; i <= 5; i++) {",
        "  sum += i;",
        "  console.log('Adding ' + i + ', sum is now ' + sum);",
        "}",
        "",
        "console.log('Final sum: ' + sum);",
      ],
      explanation: [
        "// This is a comment explaining loops",
        "// Declare a number variable 'sum' and initialize it to 0",
        "",
        "// This comment explains what the for loop will do",
        "// Start a for loop with i=1, continue while i<=5, increment i after each iteration",
        "// Add the current value of i to the sum variable",
        "// Output the current values of i and sum to the console",
        "",
        "// Output the final value of sum to the console",
      ],
    },
    functions: {
      name: "Functions",
      code: [
        "// Functions",
        "function greet(name) {",
        "  return 'Hello, ' + name + '!';",
        "}",
        "",
        "function calculateArea(width, height) {",
        "  return width * height;",
        "}",
        "",
        "let message = greet('Bob');",
        "console.log(message);",
        "",
        "let area = calculateArea(5, 3);",
        "console.log('The area is ' + area);",
      ],
      explanation: [
        "// This is a comment explaining functions",
        "// Define a function named 'greet' that takes one parameter 'name'",
        "// Return a string that includes the provided name",
        "// End of the function definition",
        "",
        "// Define a function named 'calculateArea' that takes two parameters",
        "// Return the product of width and height",
        "// End of the function definition",
        "",
        "// Call the greet function with 'Bob' and store the result in 'message'",
        "// Output the value of 'message' to the console",
        "",
        "// Call the calculateArea function with 5 and 3, and store the result in 'area'",
        "// Output a string with the value of 'area' to the console",
      ],
    },
  }

// Initialize simulation
  useEffect(() => {
    loadCodeExample(selectedExample)
  }, [selectedExample])

const loadCodeExample = (exampleKey: string) => {
    setIsRunning(false)
    setCurrentStep(0)
    setOutput([])
    lastStepTimeRef.current = 0

const example = codeExamples[exampleKey]

// Initialize code lines
    const initialCodeLines: CodeLine[] = example.code.map((line, index) => ({
      line,
      isExecuting: false,
      isExecuted: false,
      explanation: example.explanation[index] || "",
    }))

setCodeLines(initialCodeLines)

// Initialize memory based on the example
    const initialMemory: MemoryCell[] = []
    setMemory(initialMemory)

drawCanvas()
  }

// Execute code step by step
  const executeStep = () => {
    if (currentStep >= codeLines.length) return

// Mark current line as executing
    const updatedCodeLines = [...codeLines]

// Reset previous executing line
    updatedCodeLines.forEach((line) => {
      line.isExecuting = false
    })

// Set current line as executing
    updatedCodeLines[currentStep].isExecuting = true

// Execute the current line
    const line = codeLines[currentStep].line.trim()

// Skip comments and empty lines
    if (line.startsWith("//") || line === "") {
      updatedCodeLines[currentStep].isExecuted = true
      setCodeLines(updatedCodeLines)
      setCurrentStep((prev) => prev + 1)
      return
    }

// Process the line based on the code example
    const updatedMemory = [...memory]

// Variable declaration
    if (line.startsWith("let ")) {
      const declaration = line.replace("let ", "").replace(";", "")

if (declaration.includes("=")) {
        const [name, valueStr] = declaration.split("=").map((s) => s.trim())
        let value: any
        let type: string

// Determine the type and value
        if (valueStr.startsWith("'") || valueStr.startsWith('"')) {
          // String
          value = valueStr.slice(1, -1)
          type = "string"
        } else if (valueStr === "true" || valueStr === "false") {
          // Boolean
          value = valueStr === "true"
          type = "boolean"
        } else if (
          valueStr.includes("+") ||
          valueStr.includes("-") ||
          valueStr.includes("*") ||
          valueStr.includes("/")
        ) {
          // Expression
          try {
            // Handle variable references in expressions
            let evalStr = valueStr
            updatedMemory.forEach((cell) => {
              evalStr = evalStr.replace(new RegExp("\\b" + cell.name + "\\b", "g"), cell.value)
            })

value = eval(evalStr)
            type = typeof value
          } catch (e) {
            value = "Error"
            type = "error"
          }
        } else if (!isNaN(Number(valueStr))) {
          // Number
          value = Number(valueStr)
          type = "number"
        } else {
          // Variable reference
          const referencedVar = updatedMemory.find((cell) => cell.name === valueStr)
          if (referencedVar) {
            value = referencedVar.value
            type = referencedVar.type
          } else {
            value = undefined
            type = "undefined"
          }
        }

// Add to memory
        updatedMemory.push({
          address: "0x" + (Math.floor(Math.random() * 1000) + 1000).toString(16).toUpperCase(),
          name,
          value,
          type,
          highlighted: true,
        })
      } else {
        // Declaration without initialization
        updatedMemory.push({
          address: "0x" + (Math.floor(Math.random() * 1000) + 1000).toString(16).toUpperCase(),
          name: declaration,
          value: undefined,
          type: "undefined",
          highlighted: true,
        })
      }
    }
    // Assignment
    else if (line.includes("=") && !line.startsWith("if") && !line.startsWith("for")) {
      const [name, valueStr] = line.split("=").map((s) => s.trim())
      const varIndex = updatedMemory.findIndex((cell) => cell.name === name.replace(";", ""))

if (varIndex !== -1) {
        let value: any
        let type: string

// Determine the type and value
        if (valueStr.startsWith("'") || valueStr.startsWith('"')) {
          // String
          value = valueStr.slice(1, -1).replace(";", "")
          type = "string"
        } else if (valueStr === "true" || valueStr === "false") {
          // Boolean
          value = valueStr === "true"
          type = "boolean"
        } else if (
          valueStr.includes("+") ||
          valueStr.includes("-") ||
          valueStr.includes("*") ||
          valueStr.includes("/")
        ) {
          // Expression
          try {
            // Handle variable references in expressions
            let evalStr = valueStr.replace(";", "")
            updatedMemory.forEach((cell) => {
              evalStr = evalStr.replace(
                new RegExp("\\b" + cell.name + "\\b", "g"),
                typeof cell.value === "string" ? `"${cell.value}"` : cell.value,
              )
            })

value = eval(evalStr)
            type = typeof value
          } catch (e) {
            value = "Error"
            type = "error"
          }
        } else if (!isNaN(Number(valueStr.replace(";", "")))) {
          // Number
          value = Number(valueStr.replace(";", ""))
          type = "number"
        } else {
          // Variable reference
          const referencedVar = updatedMemory.find((cell) => cell.name === valueStr.replace(";", ""))
          if (referencedVar) {
            value = referencedVar.value
            type = referencedVar.type
          } else {
            value = undefined
            type = "undefined"
          }
        }

// Update memory
        updatedMemory[varIndex] = {
          ...updatedMemory[varIndex],
          value,
          type,
          highlighted: true,
        }
      }
    }
    // Console.log
    else if (line.startsWith("console.log")) {
      const logContent = line.substring(line.indexOf("(") + 1, line.lastIndexOf(")"))

try {
        // Handle variable references and string concatenation
        let evalStr = logContent
        updatedMemory.forEach((cell) => {
          evalStr = evalStr.replace(
            new RegExp("\\b" + cell.name + "\\b", "g"),
            typeof cell.value === "string" ? `"${cell.value}"` : cell.value,
          )
        })

const result = eval(evalStr)
        setOutput((prev) => [...prev, result.toString()])
      } catch (e) {
        setOutput((prev) => [...prev, "Error: " + e])
      }
    }
    // If statement (simplified)
    else if (line.startsWith("if")) {
      // Just mark as executed for this simulation
      // In a real simulation, we would evaluate the condition
    }
    // For loop initialization
    else if (line.startsWith("for")) {
      const initPart = line.substring(line.indexOf("(") + 1, line.indexOf(";"))
      if (initPart.startsWith("let ")) {
        const declaration = initPart.replace("let ", "")
        const [name, valueStr] = declaration.split("=").map((s) => s.trim())

// Add loop variable to memory
        updatedMemory.push({
          address: "0x" + (Math.floor(Math.random() * 1000) + 1000).toString(16).toUpperCase(),
          name,
          value: Number(valueStr),
          type: "number",
          highlighted: true,
        })
      }
    }

// Reset highlights on previous memory cells
    updatedMemory.forEach((cell) => {
      if (cell.highlighted) {
        cell.highlighted = false
      }
    })

// Update state
    setMemory(updatedMemory)
    updatedCodeLines[currentStep].isExecuted = true
    setCodeLines(updatedCodeLines)
    setCurrentStep((prev) => prev + 1)
  }

// Animation loop
  useEffect(() => {
    if (!isRunning) return

const animate = (timestamp: number) => {
      if (!lastStepTimeRef.current) {
        lastStepTimeRef.current = timestamp
      }

const elapsed = timestamp - lastStepTimeRef.current
      const stepDuration = 2000 / speed // milliseconds per step

if (elapsed > stepDuration && currentStep < codeLines.length) {
        lastStepTimeRef.current = timestamp
        executeStep()
      }

drawCanvas()
      animationRef.current = requestAnimationFrame(animate)
    }

animationRef.current = requestAnimationFrame(animate)

return () => {
      cancelAnimationFrame(animationRef.current)
    }
  }, [isRunning, currentStep, codeLines, memory, speed])

// Draw visualization
  const drawCanvas = () => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

// Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height)

// Draw comic-style background
    ctx.fillStyle = "#FFFDF7"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

// Draw memory model
    const memoryStartX = 50
    const memoryStartY = 50
    const cellWidth = 200
    const cellHeight = 40
    const cellSpacing = 10

// Draw memory header
    ctx.fillStyle = "#000000"
    ctx.font = "bold 16px 'Times New Roman', serif"
    ctx.textAlign = "center"
    ctx.fillText("Memory", memoryStartX + cellWidth / 2, memoryStartY - 20)

// Draw column headers
    ctx.font = "bold 14px 'Times New Roman', serif"
    ctx.textAlign = "center"
    ctx.fillText("Address", memoryStartX + 50, memoryStartY + 15)
    ctx.fillText("Name", memoryStartX + 100, memoryStartY + 15)
    ctx.fillText("Value", memoryStartX + 150, memoryStartY + 15)

// Draw memory cells
    memory.forEach((cell, index) => {
      const y = memoryStartY + cellHeight + index * (cellHeight + cellSpacing)

// Draw cell background
      ctx.fillStyle = cell.highlighted ? "#FFD700" : "#FFFFFF"
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 3
      ctx.beginPath()
      ctx.rect(memoryStartX, y, cellWidth, cellHeight)
      ctx.fill()
      ctx.stroke()

// Draw cell content
      ctx.fillStyle = "#000000"
      ctx.font = "12px 'Courier New', monospace"
      ctx.textAlign = "center"

// Address
      ctx.fillText(cell.address, memoryStartX + 50, y + cellHeight / 2 + 5)

// Name
      ctx.fillText(cell.name, memoryStartX + 100, y + cellHeight / 2 + 5)

// Value
      let displayValue = cell.value
      if (typeof displayValue === "string") {
        displayValue = `"${displayValue}"`
      } else if (displayValue === undefined) {
        displayValue = "undefined"
      }
      ctx.fillText(String(displayValue), memoryStartX + 150, y + cellHeight / 2 + 5)

// Type indicator
      ctx.fillStyle = getTypeColor(cell.type)
      ctx.beginPath()
      ctx.rect(memoryStartX + cellWidth - 10, y + 5, 5, cellHeight - 10)
      ctx.fill()

// Add comic-style effect for highlighted cells
      if (cell.highlighted) {
        ctx.font = "bold 14px 'Bangers', 'Impact', fantasy"
        ctx.fillStyle = "#FF3D00"
        ctx.strokeStyle = "#000000"
        ctx.lineWidth = 2
        ctx.textAlign = "center"
        ctx.fillText("NEW!", memoryStartX + cellWidth + 30, y + cellHeight / 2)
        ctx.strokeText("NEW!", memoryStartX + cellWidth + 30, y + cellHeight / 2)

// Draw starburst
        ctx.beginPath()
        for (let i = 0; i < 8; i++) {
          const angle = (Math.PI * 2 * i) / 8
          const innerRadius = 15
          const outerRadius = 25

ctx.lineTo(
            memoryStartX + cellWidth + 30 + Math.cos(angle) * outerRadius,
            y + cellHeight / 2 + Math.sin(angle) * outerRadius,
          )

ctx.lineTo(
            memoryStartX + cellWidth + 30 + Math.cos(angle + Math.PI / 8) * innerRadius,
            y + cellHeight / 2 + Math.sin(angle + Math.PI / 8) * innerRadius,
          )
        }
        ctx.closePath()
        ctx.strokeStyle = "#000000"
        ctx.lineWidth = 2
        ctx.stroke()
      }
    })

// Draw CPU/Execution model
    const cpuStartX = 300
    const cpuStartY = 50
    const cpuWidth = 200
    const cpuHeight = 150

// Draw CPU box
    ctx.fillStyle = "#F0F0F0"
    ctx.strokeStyle = "#000000"
    ctx.lineWidth = 3
    ctx.beginPath()
    ctx.rect(cpuStartX, cpuStartY, cpuWidth, cpuHeight)
    ctx.fill()
    ctx.stroke()

// Draw CPU label
    ctx.fillStyle = "#000000"
    ctx.font = "bold 16px 'Times New Roman', serif"
    ctx.textAlign = "center"
    ctx.fillText("CPU", cpuStartX + cpuWidth / 2, cpuStartY - 20)

// Draw current instruction
    ctx.font = "bold 14px 'Times New Roman', serif"
    ctx.textAlign = "center"
    ctx.fillText("Current Instruction:", cpuStartX + cpuWidth / 2, cpuStartY + 30)

const currentLine = currentStep < codeLines.length ? codeLines[currentStep].line : "Program completed"
    ctx.font = "12px 'Courier New', monospace"
    ctx.fillText(currentLine, cpuStartX + cpuWidth / 2, cpuStartY + 60)

// Draw explanation
    ctx.font = "12px 'Times New Roman', serif"
    ctx.textAlign = "left"
    ctx.fillText("Explanation:", cpuStartX + 10, cpuStartY + 90)

const explanation = currentStep < codeLines.length ? codeLines[currentStep].explanation : ""
    const words = explanation.split(" ")
    let line = ""
    let y = cpuStartY + 110

for (let i = 0; i < words.length; i++) {
      const testLine = line + words[i] + " "
      const metrics = ctx.measureText(testLine)

if (metrics.width > cpuWidth - 20 && i > 0) {
        ctx.fillText(line, cpuStartX + 10, y)
        line = words[i] + " "
        y += 20
      } else {
        line = testLine
      }
    }
    ctx.fillText(line, cpuStartX + 10, y)

// Draw comic-style speech bubble
    if (currentStep > 0 && currentStep < codeLines.length) {
      ctx.fillStyle = "#FFFFFF"
      ctx.strokeStyle = "#000000"
      ctx.lineWidth = 3

// Speech bubble
      ctx.beginPath()
      ctx.moveTo(cpuStartX + cpuWidth + 20, cpuStartY + 50)
      ctx.lineTo(cpuStartX + cpuWidth + 40, cpuStartY + 70)
      ctx.lineTo(cpuStartX + cpuWidth + 140, cpuStartY + 70)
      ctx.lineTo(cpuStartX + cpuWidth + 140, cpuStartY + 110)
      ctx.lineTo(cpuStartX + cpuWidth + 40, cpuStartY + 110)
      ctx.lineTo(cpuStartX + cpuWidth + 40, cpuStartY + 70)
      ctx.closePath()
      ctx.fill()
      ctx.stroke()

// Text
      ctx.font = "bold 12px 'Times New Roman', serif"
      ctx.fillStyle = "#000000"
      ctx.textAlign = "center"
      ctx.fillText("Executing code...", cpuStartX + cpuWidth + 90, cpuStartY + 95)
    }

// Draw comic-style action text
    if (isRunning && currentStep < codeLines.length) {
      const effects = ["COMPUTE!", "PROCESS!", "EXECUTE!"]
      const randomEffect = effects[Math.floor(Math.random() * effects.length)]

if (Math.random() > 0.9) {
        ctx.font = "bold 24px 'Bangers', 'Impact', fantasy"
        ctx.fillStyle = "#FF3D00"
        ctx.strokeStyle = "#000000"
        ctx.lineWidth = 3
        ctx.textAlign = "center"
        ctx.fillText(randomEffect, cpuStartX + cpuWidth / 2, cpuStartY + cpuHeight + 40)
        ctx.strokeText(randomEffect, cpuStartX + cpuWidth / 2, cpuStartY + cpuHeight + 40)
      }
    }
  }

const getTypeColor = (type: string): string => {
    switch (type) {
      case "string":
        return "#FF6B6B"
      case "number":
        return "#48DBFB"
      case "boolean":
        return "#1DD1A1"
      case "undefined":
        return "#A4B0BE"
      case "error":
        return "#FF4757"
      default:
        return "#A4B0BE"
    }
  }

const toggleSimulation = () => {
    setIsRunning(!isRunning)
    if (!isRunning && currentStep >= codeLines.length) {
      loadCodeExample(selectedExample)
    }
  }

const stepForward = () => {
    if (currentStep < codeLines.length) {
      executeStep()
      drawCanvas()
    }
  }

<TabsContent value="simulation" className="space-y-4">
          <div className="flex flex-col space-y-4">
            <div className="flex flex-wrap gap-4 mb-4">
              <Button onClick={toggleSimulation} className="bg-black text-white hover:bg-gray-800 comic-border">
                {isRunning ? <Pause className="mr-2 h-4 w-4" /> : <Play className="mr-2 h-4 w-4" />}
                <span className="font-serif">{isRunning ? "Pause" : "Start"}</span>
              </Button>

<Button
                onClick={stepForward}
                variant="outline"
                className="border-black text-black hover:bg-gray-100 comic-border"
                disabled={isRunning || currentStep >= codeLines.length}
              >
                <ChevronRight className="mr-2 h-4 w-4" />
                <span className="font-serif">Step</span>
              </Button>

<Button
                onClick={() => loadCodeExample(selectedExample)}
                variant="outline"
                className="border-black text-black hover:bg-gray-100 comic-border"
              >
                <RefreshCw className="mr-2 h-4 w-4" />
                <span className="font-serif">Reset</span>
              </Button>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              <div className="space-y-2">
                <Label htmlFor="codeExample" className="font-serif">
                  Code Example
                </Label>
                <Select value={selectedExample} onValueChange={setSelectedExample}>
                  <SelectTrigger className="border-black font-serif">
                    <SelectValue placeholder="Select code example" />
                  </SelectTrigger>
                  <SelectContent>
                    {Object.entries(codeExamples).map(([key, example]) => (
                      <SelectItem key={key} value={key} className="font-serif">
                        {example.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label className="font-serif">Execution Speed: {speed}x</Label>
                <Slider
                  value={[speed]}
                  min={0.5}
                  max={3}
                  step={0.5}
                  onValueChange={(value) => setSpeed(value[0])}
                  className="border-black"
                />
              </div>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="comic-panel p-4 bg-gray-50 h-[300px] overflow-auto">
                <h3 className="font-bold mb-2 flex items-center font-serif">
                  <Code className="mr-2 h-4 w-4" />
                  Code
                </h3>
                <pre className="text-sm font-mono">
                  {codeLines.map((line, index) => (
                    <div
                      key={index}
                      className={`py-1 ${line.isExecuting ? "bg-yellow-200" : line.isExecuted ? "bg-green-100" : ""}`}
                    >
                      {index + 1}. {line.line}
                    </div>
                  ))}
                </pre>
              </div>

<div className="comic-panel p-4 bg-black text-green-400 h-[300px] overflow-auto font-mono">
                <h3 className="font-bold mb-2 font-serif text-white">Console Output</h3>
                {output.length === 0 ? (
                  <div className="text-gray-500">// Output will appear here</div>
                ) : (
                  output.map((line, index) => (
                    <div key={index} className="py-1">
                      > {line}
                    </div>
                  ))
                )}
              </div>
            </div>

{/* Comic speech bubble */}
              <div className="comic-speech-bubble absolute top-10 right-10">
                <p className="font-serif m-0 text-sm">Watch how code executes step by step!</p>
              </div>

{/* Comic action text */}
              {isRunning && <div className="comic-action absolute bottom-10 left-10">CODE!</div>}
            </div>

<div className="comic-panel p-4 bg-gray-50">
              <h3 className="font-bold mb-2 font-serif">How Code Execution Works</h3>
              <p className="mb-2 font-serif">This simulation demonstrates how code is executed by a computer:</p>
              <ul className="list-disc pl-5 mb-2 space-y-1 font-serif">
                <li>The CPU executes code line by line</li>
                <li>Variables are stored in memory with specific addresses</li>
                <li>Different data types (strings, numbers, booleans) are represented differently in memory</li>
                <li>Output is displayed in the console</li>
              </ul>
              <p className="font-serif">The colored indicators next to each memory cell represent the data type.</p>
            </div>
          </div>
        </TabsContent>

<TabsContent value="code">
          <div className="comic-panel p-4 bg-gray-50 overflow-auto max-h-[600px]">
            <pre className="text-sm font-mono whitespace-pre-wrap">
              {`// Code Execution Simulation

// Types for our simulation
type MemoryCell = {
  address: string
  name: string
  value: any
  type: string
  highlighted: boolean
}

type CodeLine = {
  line: string
  isExecuting: boolean
  isExecuted: boolean
  explanation: string
}

// Execute a single step of code
function executeStep() {
  if (currentStep >= codeLines.length) return;
  
  // Mark current line as executing
  const updatedCodeLines = [...codeLines];
  
  // Reset previous executing line
  updatedCodeLines.forEach(line => {
    line.isExecuting = false;
  });
  
  // Set current line as executing
  updatedCodeLines[currentStep].isExecuting = true;
  
  // Execute the current line
  const line = codeLines[currentStep].line.trim();
  
  // Skip comments and empty lines
  if (line.startsWith("//") || line === "") {
    updatedCodeLines[currentStep].isExecuted = true;
    setCodeLines(updatedCodeLines);
    setCurrentStep(prev => prev + 1);
    return;
  }
  
  // Process the line based on the code example
  const updatedMemory = [...memory];
  
  // Variable declaration
  if (line.startsWith("let ")) {
    const declaration = line.replace("let ", "").replace(";", "");
    
    if (declaration.includes("=")) {
      const [name, valueStr] = declaration.split("=").map(s => s.trim());
      let value: any;
      let type: string;
      
      // Determine the type and value
      if (valueStr.startsWith("'") || valueStr.startsWith('"')) {
        // String
        value = valueStr.slice(1, -1);
        type = "string";
      } else if (valueStr === "true" || valueStr === "false") {
        // Boolean
        value = valueStr === "true";
        type = "boolean";
      } else if (valueStr.includes("+") || valueStr.includes("-")) {
        // Expression
        try {
          // Handle variable references in expressions
          let evalStr = valueStr;
          updatedMemory.forEach(cell => {
            evalStr = evalStr.replace(
              new RegExp("\\b" + cell.name + "\\b", "g"), 
              cell.value
            );
          });
          
          value = eval(evalStr);
          type = typeof value;
        } catch (e) {
          value = "Error";
          type = "error";
        }
      } else if (!isNaN(Number(valueStr))) {
        // Number
        value = Number(valueStr);
        type = "number";
      } else {
        // Variable reference
        const referencedVar = updatedMemory.find(
          cell => cell.name === valueStr
        );
        if (referencedVar) {
          value = referencedVar.value;
          type = referencedVar.type;
        } else {
          value = undefined;
          type = "undefined";
        }
      }
      
      // Add to memory
      updatedMemory.push({
        address: "0x" + (Math.floor(Math.random() * 1000) + 1000)
          .toString(16).toUpperCase(),
        name,
        value,
        type,
        highlighted: true
      });
    }
  }
  // Console.log
  else if (line.startsWith("console.log")) {
    const logContent = line.substring(
      line.indexOf("(") + 1, 
      line.lastIndexOf(")")
    );
    
    try {
      // Handle variable references and string concatenation
      let evalStr = logContent;
      updatedMemory.forEach(cell => {
        evalStr = evalStr.replace(
          new RegExp("\\b" + cell.name + "\\b", "g"), 
          typeof cell.value === "string" ? 
            \`"\${cell.value}"\` : cell.value
        );
      });
      
      const result = eval(evalStr);
      setOutput(prev => [...prev, result.toString()]);
    } catch (e) {
      setOutput(prev => [...prev, "Error: " + e]);
    }
  }
  
  // Update state
  setMemory(updatedMemory);
  updatedCodeLines[currentStep].isExecuted = true;
  setCodeLines(updatedCodeLines);
  setCurrentStep(prev => prev + 1);
}`}
            </pre>
          </div>
        </TabsContent>
      </Tabs>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/simulations/[id]/page.tsx" isEdit="true" isTerminated="true"
import { Button } from "@/components/ui/button"
import { ArrowLeft } from "lucide-react"
import Link from "next/link"
import NetworkingSimulation from "@/components/simulations/networking-simulation"
import AIAdditionSimulation from "@/components/simulations/ai-addition-simulation"
import GitSimulation from "@/components/simulations/git-simulation"
import CodingSimulation from "@/components/simulations/coding-simulation"

// This would typically come from a database
const simulationsData = {
  networking: {
    title: "Client-Server Model",
    description:
      "This simulation visualizes how clients and servers communicate in a network architecture. You can see the request-response cycle and data transfer between multiple clients and a server.",
    longDescription:
      "The client-server model is a distributed application structure that partitions tasks between the providers of a resource or service, called servers, and service requesters, called clients. In this simulation, you can observe how data packets travel between clients and servers, how requests are processed, and how responses are sent back. The simulation includes scenarios like multiple client requests, server overload, and different types of network protocols.",
    image: "/placeholder.svg?height=500&width=800",
    category: "Networking",
    creator: "NetworkingPro",
    createdAt: "2024-04-15",
    component: NetworkingSimulation,
  },
  "ai-addition": {
    title: "AI Model for Addition",
    description:
      "See how a simple neural network learns to add two numbers. This simulation breaks down the training process and shows how weights and biases are adjusted.",
    longDescription:
      "This simulation demonstrates how a basic neural network can be trained to perform addition. You'll see the network architecture with input nodes for the two numbers, hidden layers, and an output layer for the sum. The visualization shows how data flows through the network, how errors are calculated, and how the network adjusts its weights through backpropagation. You can experiment with different learning rates and see how quickly the network learns to accurately add numbers.",
    image: "/placeholder.svg?height=500&width=800",
    category: "Artificial Intelligence",
    creator: "AIExplorer",
    createdAt: "2024-02-10",
    component: AIAdditionSimulation,
  },
  git: {
    title: "Git Workflow with Avatars",
    description:
      "Understand Git version control with visual avatars representing different contributors. Watch as branches are created, merged, and code is committed.",
    longDescription:
      "This simulation uses character avatars to represent different developers working on a project using Git. You can see how branches are created for new features, how commits are made, and how pull requests and merges work. The simulation covers common Git workflows like feature branching, rebasing, and resolving merge conflicts. It's designed to help beginners understand Git's distributed version control system in an intuitive, visual way.",
    image: "/placeholder.svg?height=500&width=800",
    category: "Development Tools",
    creator: "GitMaster",
    createdAt: "2024-01-30",
    component: GitSimulation,
  },
  coding: {
    title: "How Coding Works",
    description:
      "A visual journey from writing code to execution. See how code is compiled or interpreted and how it interacts with computer hardware.",
    longDescription:
      "This simulation takes you on a journey from writing code to seeing it execute on a computer. It visualizes the process of compilation or interpretation, showing how high-level code is transformed into machine instructions. You'll see how variables are stored in memory, how control structures direct program flow, and how the CPU executes instructions. The simulation covers different programming paradigms and helps demystify what happens 'under the hood' when code runs.",
    image: "/placeholder.svg?height=500&width=800",
    category: "Programming Fundamentals",
    creator: "CodeVisualizer",
    createdAt: "2024-04-05",
    component: CodingSimulation,
  },
}

export default function SimulationPage({ params }: { params: { id: string } }) {
  const simulation = simulationsData[params.id as keyof typeof simulationsData]

if (!simulation) {
    return (
      <div className="container mx-auto px-4 py-12 text-center">
        <h1 className="text-3xl font-bold mb-4 text-black font-serif">Simulation Not Found</h1>
        <p className="mb-8 text-gray-800 font-serif">The simulation you're looking for doesn't exist or has been removed.</p>
        <Link href="/simulations">
          <Button className="bg-black text-white hover:bg-gray-800 comic-border">
            <span className="font-serif">Back to Simulations</span>
          </Button>
        </Link>
      </div>
    )
  }

const SimulationComponent = simulation.component

return (
    <div className="container mx-auto px-4 py-12">
      <div className="mb-6">
        <Link href="/simulations">
          <Button variant="ghost" className="text-black hover:bg-gray-100 pl-0">
            <ArrowLeft className="mr-2 h-4 w-4" /> 
            <span className="font-serif">Back to Simulations</span>
          </Button>
        </Link>
      </div>

<div className="mb-8">
        <h1 className="text-4xl font-bold mb-4 text-black font-serif comic-title">{simulation.title}</h1>
        <div className="flex flex-wrap gap-4 items-center mb-6">
          <span className="bg-black text-white px-3 py-1 font-serif">{simulation.category}</span>
          <span className="text-gray-600 font-serif">
            Created by {simulation.creator} on {simulation.createdAt}
          </span>
        </div>
        <p className="text-lg text-gray-800 mb-8 font-serif">{simulation.description}</p>
      </div>\</article></body></html>