StreetWise
Test your knowledge of city streets. Create a game or join an existing one.
<Card className="w-full shadow-lg">
<CardHeader>
<CardTitle className="font-headline text-2xl">Create New Game</CardTitle>
<CardDescription>Set up a new game for you and your friends.</CardDescription>
</CardHeader>
<CardContent>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
<FormField
control={form.control}
name="city"
render={({ field }) => (
<FormItem>
<FormLabel>City Name</FormLabel>
<FormControl>
<Input placeholder="e.g. San Francisco" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="rounds"
render={({ field }) => (
<FormItem>
<FormLabel>Rounds: {field.value}</FormLabel>
<FormControl>
<Slider
min={3}
max={20}
step={1}
defaultValue={[field.value]}
onValueChange={(value) => field.onChange(value[0])}
/>
</FormControl>
</FormItem>
)}
/>
<div className="grid grid-cols-2 gap-4">
<FormField
control={form.control}
name="maxPlayers"
render={({ field }) => (
<FormItem>
<FormLabel>Max Players</FormLabel>
<Select onValueChange={(value) => field.onChange(Number(value))} defaultValue={String(field.value)}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select players" />
</SelectTrigger>
</FormControl>
<SelectContent>
{[1, 2, 3, 4, 5, 6, 7, 8].map(p => <SelectItem key={p} value={String(p)}>{p} player{p > 1 ? 's' : ''}</SelectItem>)}
</SelectContent>
</Select>
</FormItem>
)}
/>
<FormField
control={form.control}
name="joinWindow"
render={({ field }) => (
<FormItem>
<FormLabel>Join Window</FormLabel>
<Select onValueChange={(value) => field.onChange(Number(value))} defaultValue={String(field.value)}>
<FormControl>
<SelectTrigger>
<SelectValue placeholder="Select minutes" />
</Trigger>
</FormControl>
<SelectContent>
{[1, 2, 5, 10, 15, 30].map(t => <SelectItem key={t} value={String(t)}>{t} min</SelectItem>)}
</SelectContent>
</Select>
</FormItem>
)}
/>
</div>
<Button type="submit" className="w-full bg-accent hover:bg-accent/90 text-accent-foreground" size="lg">
<PlusCircle className="mr-2 h-5 w-5" />
Create Game
</Button>
</form>
</Form>
</CardContent>
</Card>