[V0_FILE]typescriptreact:file="types.ts" isMerged="true" export interface Factor { id: string name: string probability: number // 0 to 1 impact: number // -1 to 1 value: number // probability * impact } export interface Option { id: string name: string factors: Factor[] expectedValue: number } [V0_FILE]typescriptreact:file="components/coordinate-system.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { motion } from "framer-motion" interface CoordinateSystemProps { probability: number impact: number onChange: (probability: number, impact: number) => void } export function CoordinateSystem({ probability, impact, onChange }: CoordinateSystemProps) { const containerRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const handlePointerMove = (event: React.PointerEvent) => { if (!isDragging || !containerRef.current) return const rect = containerRef.current.getBoundingClientRect() const x = (event.clientX - rect.left) / rect.width const y = 1 - (event.clientY - rect.top) / rect.height const clampedX = Math.max(-1, Math.min(1, (x * 2) - 1)) const clampedY = Math.max(0, Math.min(1, y)) onChange(clampedY, clampedX) } return (

setIsDragging(true)} onPointerUp={() => setIsDragging(false)} onPointerLeave={() => setIsDragging(false)} > {/* Grid lines */}

{/* Axes labels */}

PROBABILITY

IMPACT

{/* Point */} {/* Value indicator */}

{(probability * impact).toFixed(3)}

{/* Scale indicators */}

1.0

0.0

-1.0

1.0

) } [V0_FILE]typescriptreact:file="components/factor-card.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Factor } from "../types" import { CoordinateSystem } from "./coordinate-system" interface FactorCardProps { factor: Factor onChange: (factor: Factor) => void onDelete: () => void } export function FactorCard({ factor, onChange, onDelete }: FactorCardProps) { return (

onChange({ ...factor, name: e.target.value })} className="h-7 border-primary/20 bg-background/50 font-mono text-xs tracking-wider text-primary placeholder:text-primary/40" placeholder="FACTOR NAME..." />

{ const value = probability * impact onChange({ ...factor, probability, impact, value }) }} /> ) } [V0_FILE]typescriptreact:file="components/option-card.tsx" isEdit="true" isMerged="true" "use client" import { Plus } from 'lucide-react' import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Factor, Option } from "../types" import { FactorCard } from "./factor-card" interface OptionCardProps { option: Option onChange: (option: Option) => void onDelete: () => void } export function OptionCard({ option, onChange, onDelete }: OptionCardProps) { const addFactor = () => { const newFactor: Factor = { id: Math.random().toString(), name: "", probability: 0.5, impact: 0, value: 0, } onChange({ ...option, factors: [...option.factors, newFactor], }) } const updateFactor = (index: number, factor: Factor) => { const newFactors = [...option.factors] newFactors[index] = factor const expectedValue = newFactors.reduce((sum, f) => sum + f.value, 0) onChange({ ...option, factors: newFactors, expectedValue, }) } const deleteFactor = (index: number) => { const newFactors = option.factors.filter((_, i) => i !== index) const expectedValue = newFactors.reduce((sum, f) => sum + f.value, 0) onChange({ ...option, factors: newFactors, expectedValue, }) } return (

onChange({ ...option, name: e.target.value })} className="h-8 border-primary/20 bg-background/50 font-mono text-sm tracking-wider text-primary placeholder:text-primary/40" placeholder="OPTION NAME..." />

{option.factors.map((factor, index) => ( updateFactor(index, f)} onDelete={() => deleteFactor(index)} /> ))}

EXPECTED VALUE: {option.expectedValue.toFixed(3)}

) } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return ( ) } ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useCallback } from "react" import { Plus, HelpCircle } from 'lucide-react' import { Option } from "../types" import { OptionCard } from "../components/option-card" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" export default function DecisionatorPage() { const [options, setOptions] = useState([]); const [isHelpOpen, setIsHelpOpen] = useState(false); const addOption = useCallback(() => { console.log("Adding new option"); const newOption: Option = { id: Math.random().toString(), name: "", factors: [], expectedValue: 0, }; setOptions((prevOptions) => [...prevOptions, newOption]); }, []); const updateOption = useCallback((index: number, option: Option) => { setOptions((prevOptions) => { const newOptions = [...prevOptions] newOptions[index] = option return newOptions }) }, []); const deleteOption = useCallback((index: number) => { setOptions((prevOptions) => prevOptions.filter((_, i) => i !== index)) }, []); const getBestOption = useCallback(() => { if (options.length === 0) return null return options.reduce((best, current) => current.expectedValue > best.expectedValue ? current : best ) }, [options]); const bestOption = getBestOption() return (

DECISIONATOR

{bestOption && (

OPTIMAL SOLUTION: {bestOption.name || 'UNNAMED'}{" "} [EV: {bestOption.expectedValue.toFixed(3)}]

)}

{options.map((option, index) => ( updateOption(index, o)} onDelete={() => deleteOption(index)} /> ))}

{options.length === 0 && (

SYSTEM IDLE

Initialize decision matrix by adding an option

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" import { Orbitron, Space_Mono } from 'next/font/google' import type { Metadata } from 'next' import './globals.css' const orbitron = Orbitron({ subsets: ['latin'], weight: ['400', '700'], variable: '--font-orbitron' }) const spaceMono = Space_Mono({ subsets: ['latin'], weight: ['400', '700'], variable: '--font-space-mono' }) export const metadata: Metadata = { title: 'Decisionator', description: 'A decision-making tool', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isQuickEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 160 15% 5%; --foreground: 160 100% 90%; --card: 160 15% 3%; --card-foreground: 160 100% 90%; --popover: 160 15% 3%; --popover-foreground: 160 100% 90%; --primary: 160 100% 50%; --primary-foreground: 160 15% 5%; --secondary: 160 15% 8%; --secondary-foreground: 160 100% 50%; --muted: 160 15% 8%; --muted-foreground: 160 100% 70%; --accent: 160 15% 8%; --accent-foreground: 160 100% 50%; --destructive: 0 100% 50%; --destructive-foreground: 160 100% 90%; --border: 160 50% 20%; --input: 160 50% 20%; --ring: 160 100% 50%; --radius: 0.25rem; --font-orbitron: 'Orbitron', sans-serif; /* Added font variable */ } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; font-feature-settings: "rlig" 1, "calt" 1; } } @layer utilities { .oscilloscope-glow { filter: drop-shadow(0 0 2px theme('colors.primary')) drop-shadow(0 0 4px theme('colors.primary.DEFAULT/50%')); } .scanline { background: repeating-linear-gradient( to bottom, transparent 0%, rgba(0, 255, 255, 0.02) 0.5%, transparent 1% ); animation: scanline 10s linear infinite; } @keyframes scanline { from { background-position: 0 0; } to { background-position: 0 100%; } } .grid-bg { background-size: 20px 20px; background-image: linear-gradient(to right, theme('colors.primary.DEFAULT/3%') 1px, transparent 1px), linear-gradient(to bottom, theme('colors.primary.DEFAULT/3%') 1px, transparent 1px); } .font-orbitron { font-family: var(--font-orbitron), sans-serif; } } button { -webkit-tap-highlight-color: transparent; } button:focus { outline: none; } button:active { transform: scale(0.98); }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This