[V0_FILE]typescriptreact:file="app/controller/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Trophy, ArrowLeft } from "lucide-react" import Link from "next/link" export default function ControllerPage() { const [leftTeam, setLeftTeam] = useState({ name: "Team A", score: 0, }) const [rightTeam, setRightTeam] = useState({ name: "Team B", score: 0, }) // Load data from localStorage on component mount useEffect(() => { const savedData = localStorage.getItem("kabaddiScoreboard") if (savedData) { const { leftTeam: savedLeftTeam, rightTeam: savedRightTeam } = JSON.parse(savedData) setLeftTeam(savedLeftTeam) setRightTeam(savedRightTeam) } }, []) // Save data to localStorage whenever state changes useEffect(() => { localStorage.setItem("kabaddiScoreboard", JSON.stringify({ leftTeam, rightTeam })) }, [leftTeam, rightTeam]) const addPoints = (team, points) => { if (team === "left") { setLeftTeam({ ...leftTeam, score: leftTeam.score + points, }) } else { setRightTeam({ ...rightTeam, score: rightTeam.score + points, }) } } const resetScores = () => { setLeftTeam({ ...leftTeam, score: 0, }) setRightTeam({ ...rightTeam, score: 0, }) } return (

Kabaddi Controller

{/* Left Team Controls */} Left Team

Team Name setLeftTeam({ ...leftTeam, name: e.target.value })} className="border-red-300 focus:border-red-500" />

Current Score

{leftTeam.score.toFixed(1)}

{/* Right Team Controls */} Right Team

Team Name setRightTeam({ ...rightTeam, name: e.target.value })} className="border-red-300 focus:border-red-500" />

Current Score

{rightTeam.score.toFixed(1)}

{/* Additional Controls */}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import "@/app/globals.css" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Kabaddi Scoreboard", description: "A professional scoreboard system for Kabaddi matches", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/streaming-guide/page.tsx" isMerged="true" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowLeft } from "lucide-react" export default function StreamingGuidePage() { return (

Streaming Guide

Setting Up in OBS Studio

Add a Browser Source

In OBS Studio, click the + button in the Sources panel and select "Browser Source".
Configure the Browser Source
- Give it a name like "Kabaddi Scoreboard"
- Check "Local file" if you're running the overlay locally
- Otherwise, enter the URL of your deployed overlay page
- Set Width to 1280 and Height to 200
- Click "OK" to add the source
Position the Overlay

Click and drag the overlay in the preview window to position it where you want it to appear.
For Chroma Key (Green Screen) Mode
- Right-click on the Browser Source and select "Filters"
- Click the + button and add a "Color Key" filter
- Set the Key Color Type to "Green"
- Adjust Similarity, Smoothness, and Key Color Spill Reduction as needed
- Click "Close" when done

Setting Up in Streamlabs

Add a Browser Source

In Streamlabs, click the + button in the Sources panel and select "Browser Source".
Configure the Browser Source
- Give it a name like "Kabaddi Scoreboard"
- Enter the URL of your deployed overlay page
- Set Width to 1280 and Height to 200
- Click "Add Source" to add it to your scene
Position the Overlay

Click and drag the overlay in the preview window to position it.
For Chroma Key (Green Screen) Mode
- Right-click on the Browser Source and select "Filters"
- Click the + button and add a "Color Key" filter
- Set the Key Color to green (#00FF00)
- Adjust the settings as needed for clean removal of the green background

Tips for Best Results

Use the "Transparent" mode for overlays with built-in transparency
Use "Chroma Key" mode when you need more control over transparency in your streaming software
Use "Solid" mode when you want a consistent background
Keep the overlay browser source open while streaming to ensure it receives updates
Test your setup before going live to ensure everything works correctly

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

Kabaddi Scoreboard System

How to use:

1. Open the Controller Panel to manage scores and team names
2. Open the Live Display Overlay in a separate window
3. Use the controller to update scores and team information
4. The overlay will automatically update to reflect changes
5. For streaming: capture the overlay window with your streaming software

) } [V0_FILE]typescriptreact:file="app/overlay/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Settings, X } from "lucide-react" export default function OverlayPage() { const [leftTeam, setLeftTeam] = useState({ name: "Team A", score: 0, }) const [rightTeam, setRightTeam] = useState({ name: "Team B", score: 0, }) const [showSettings, setShowSettings] = useState(false) const [overlayMode, setOverlayMode] = useState("transparent") // transparent, chroma, solid const [animateLeft, setAnimateLeft] = useState(false) const [animateRight, setAnimateRight] = useState(false) // Load and update data from localStorage useEffect(() => { // Initial load const loadData = () => { const savedData = localStorage.getItem("kabaddiScoreboard") if (savedData) { const { leftTeam: savedLeftTeam, rightTeam: savedRightTeam } = JSON.parse(savedData) // Check if scores have changed to trigger animations if (savedLeftTeam.score !== leftTeam.score) { setAnimateLeft(true) setTimeout(() => setAnimateLeft(false), 1000) } if (savedRightTeam.score !== rightTeam.score) { setAnimateRight(true) setTimeout(() => setAnimateRight(false), 1000) } setLeftTeam(savedLeftTeam) setRightTeam(savedRightTeam) } } // Load immediately loadData() // Set up interval to check for updates const intervalId = setInterval(loadData, 500) // Clean up interval return () => clearInterval(intervalId) }, []) // Empty dependency array to run only on mount // Get background style based on selected mode const getBackgroundStyle = () => { switch (overlayMode) { case "transparent": return "bg-transparent" case "chroma": return "bg-[#00FF00]" // Chroma key green case "solid": return "bg-black" default: return "bg-transparent" } } return (

{/* Settings Toggle Button */} {/* Settings Panel */} {showSettings && (

Overlay Settings

Background Mode:

Streaming Tips:

In OBS: Add as "Browser Source"
Width: 1280, Height: 200
For chroma key: Add filter "Color Key"
Position at top or bottom of stream

)} {/* Scoreboard Overlay */}

{/* Left Team */}

{leftTeam.name}

{leftTeam.score.toFixed(1)}

{/* Center - Match Info */}

KABADDI

{/* Right Team */}

{rightTeam.name}

{rightTeam.score.toFixed(1)}

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This