1v1.lol Clone - v0 by Vercel

Here's all the code in a format that's easy to copy:

app/page.tsx

import GameCanvas from '@/components/game-canvas'
import LoadingScreen from '@/components/loading-screen'
'use client'

import { useState, useEffect } from 'react'

export default function Page() {
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    // Simulate loading time
    const timer = setTimeout(() => {
      setIsLoading(false)
    }, 2000)

    return () => clearTimeout(timer)
  }, [])

  return (
    <main className="h-screen w-screen bg-black">
      {isLoading ? (
        <LoadingScreen />
      ) : (
        <GameCanvas />
      )}
    </main>
  )
}

components/loading-screen.tsx

import Image from 'next/image'

export default function LoadingScreen() {
  return (
    <div className="flex h-full w-full flex-col items-center justify-center space-y-4">
      <div className="relative h-20 w-64">
        <Image
          src="https://sjc.microlink.io/_mqFkseXJpP45grkSumL3QNdXERBMC5dJazRk3EqHqjhqQaxqIeNfmPSH2rEhaiOem_k-cD0v0dYEPbbPTNyxQ.jpeg"
          alt="1v1.lol Logo"
          fill
          className="object-contain"
          priority
        />
      </div>
      <div className="h-8 w-8 animate-spin rounded-full border-4 border-white border-t-transparent" />
    </div>
  )
}

components/game-canvas.tsx

'use client'

import { useEffect, useRef } from 'react'
import Controls from './controls'

export default function GameCanvas() {
  const canvasRef = useRef<HTMLCanvasElement>(null)

  useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

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

    // Set canvas size to match window size
    const resizeCanvas = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

    resizeCanvas()
    window.addEventListener('resize', resizeCanvas)

    // Basic game loop
    const gameLoop = () => {
      // Clear canvas
      ctx.fillStyle = '#87CEEB' // Sky blue background
      ctx.fillRect(0, 0, canvas.width, canvas.height)

      // Draw ground
      ctx.fillStyle = '#228B22' // Forest green
      ctx.fillRect(0, canvas.height - 50, canvas.width, 50)

      requestAnimationFrame(gameLoop)
    }

    gameLoop()

    return () => {
      window.removeEventListener('resize', resizeCanvas)
    }
  }, [])

  return (
    <div className="relative h-full w-full">
      <canvas
        ref={canvasRef}
        className="absolute inset-0 h-full w-full"
      />
      <Controls />
    </div>
  )
}

components/controls.tsx

'use client'

import { useState, useEffect } from 'react'

export default function Controls() {
  const [isMobile, setIsMobile] = useState(false)

  useEffect(() => {
    setIsMobile('ontouchstart' in window)

    const handleKeyPress = (e: KeyboardEvent) => {
      switch (e.key.toLowerCase()) {
        case 'w':
          console.log('Move forward')
          break
        case 'a':
          console.log('Move left')
          break
        case 's':
          console.log('Move backward')
          break
        case 'd':
          console.log('Move right')
          break
        case ' ':
          console.log('Jump')
          break
      }
    }

    window.addEventListener('keydown', handleKeyPress)
    return () => window.removeEventListener('keydown', handleKeyPress)
  }, [])

  if (!isMobile) return null

  return (
    <div className="absolute bottom-4 left-4 right-4 flex justify-between">
      {/* Mobile controls */}
      <div className="flex gap-2">
        <button className="h-12 w-12 rounded-full bg-white/20 text-white backdrop-blur-sm">
          ←
        </button>
        <button className="h-12 w-12 rounded-full bg-white/20 text-white backdrop-blur-sm">
          →
        </button>
      </div>
      <button className="h-12 w-12 rounded-full bg-white/20 text-white backdrop-blur-sm">
        ↑
      </button>
    </div>
  )
}

app/layout.tsx

import './globals.css'
import type { Metadata } from 'next'
import React from 'react';

export const metadata: Metadata = {
  title: '1v1.lol Clone',
  description: 'A browser-based building and shooting game',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

To set up this project:

Create a new Next.js project:

npx create-next-app@latest my-1v1-game --typescript --tailwind --app

Create the necessary folders and files:

Create a components folder in the root directory
Create all the component files shown above
Replace the contents of app/page.tsx, app/layout.tsx, and app/globals.css

Install dependencies:

npm install

Run the development server:

npm run dev

The game will run on http://localhost:3000. Remember this is a basic implementation that you can build upon to add more features like building mechanics, multiplayer, and 3D graphics.