Feat: Add creating decks
This commit is contained in:
globuzma
parent
7145906862
commit
aaa0bee853
26 changed files with 1279 additions and 180 deletions
265
app/app/account/profile/decks/page.tsx
Normal file
265
app/app/account/profile/decks/page.tsx
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
'use client'
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { getCookie } from "@/lib/utils"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command"
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover"
|
||||
|
||||
import type { deck, bset } from "@prisma/client";
|
||||
|
||||
interface bsetJson extends bset {
|
||||
set_codes: string[],
|
||||
icons: string[]
|
||||
}
|
||||
|
||||
interface cardEntryAPIProps {
|
||||
amount: number,
|
||||
sanitized_name: string,
|
||||
set: string
|
||||
}
|
||||
|
||||
interface deckAPIProps {
|
||||
name: string,
|
||||
selected_bset: string,
|
||||
commander_name: string,
|
||||
cards: cardEntryAPIProps[]
|
||||
}
|
||||
|
||||
export default function Signin() {
|
||||
const [deckName, setDeckName] = useState("")
|
||||
const [deckCommanderName, setDeckCommanderName] = useState("")
|
||||
const [deckImporter, setDeckImporter] = useState("")
|
||||
const [selectedBset, setSelectedBset] = useState("")
|
||||
const [decks, setDecks] = useState<deck[]>([])
|
||||
const [bsets, setBsets] = useState<bsetJson[]>([])
|
||||
const [openSelectBset, setOpenSelectBset] = useState(false)
|
||||
const router = useRouter()
|
||||
const token = getCookie('JWT')
|
||||
|
||||
useEffect(() => {
|
||||
if(getCookie('JWT') == "") {
|
||||
router.refresh()
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
fetch('http://localhost:3000/api/account/decks/', {
|
||||
method: "GET",
|
||||
headers: {Authorization: 'Bearer ' + token},
|
||||
}).then((res) => {
|
||||
if(res.status == 200) {
|
||||
res.json().then((apiData) => {
|
||||
setDecks(apiData.data)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
fetch('http://localhost:8072/misc/bsets.json').then((res) => {
|
||||
if(res.status == 200) {
|
||||
res.json().then((data) => {
|
||||
setBsets(data)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
},[])
|
||||
|
||||
function getDataFromLine(line: string){
|
||||
if(line != "") {
|
||||
const values = line.split(" ")
|
||||
if (values.length >= 4) {
|
||||
const amount: number = parseInt(values.at(0)!.toString())
|
||||
|
||||
let set_index = 0
|
||||
for(let i = 1; i < values.length; i++){
|
||||
if(values.at(-i)!.toString().match(/\([A-Z]{3}\)/gm)){
|
||||
set_index = -i
|
||||
}
|
||||
}
|
||||
|
||||
const set = values.at(set_index)!.toString().replace(/[()]/gm,"").toLowerCase()
|
||||
const card_name = values.slice(1,set_index).join(" ").replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase()
|
||||
const card_data : cardEntryAPIProps = {amount, sanitized_name: card_name, set}
|
||||
return card_data
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function deleteDeck(id:string){
|
||||
fetch('http://localhost:3000/api/account/decks/delete', {
|
||||
method: "DELETE",
|
||||
headers: {Authorization: 'Bearer ' + token},
|
||||
body: JSON.stringify({ id })
|
||||
}).then((res) => {
|
||||
if(res.status == 200) {
|
||||
setDecks(old => old.filter((deck: deck) => deck.id != id))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function updateDeckInput(txt:string){
|
||||
setDeckImporter(txt)
|
||||
const lines = txt.split("\n")
|
||||
setDeckCommanderName(lines[0])
|
||||
}
|
||||
|
||||
function importDeck(){
|
||||
const deckText = deckImporter
|
||||
const lines = deckText.split("\n")
|
||||
const dataToSend : deckAPIProps = { name: deckName, selected_bset: selectedBset.replace(/[^a-zA-Z0-9]/gim,"-").toLowerCase() ,commander_name: getDataFromLine(deckCommanderName)!.sanitized_name, cards: [] }
|
||||
lines.slice(1).forEach((line: string) => {
|
||||
const data = getDataFromLine(line)
|
||||
if(data != null) {
|
||||
dataToSend.cards.push(data)
|
||||
}
|
||||
});
|
||||
console.log(dataToSend)
|
||||
|
||||
|
||||
fetch('http://localhost:3000/api/account/decks/create', {
|
||||
method: "POST",
|
||||
headers: {Authorization: 'Bearer ' + token},
|
||||
body: JSON.stringify(dataToSend)
|
||||
}).then((res) => {
|
||||
if(res.status == 200) {
|
||||
res.json().then((apiData) => {
|
||||
const new_deck: deck = apiData.data
|
||||
setDecks(oldDecks => [...oldDecks, new_deck])
|
||||
setDeckName("")
|
||||
setDeckImporter("")
|
||||
setSelectedBset("")
|
||||
setDeckCommanderName("")
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-center mt-24" >
|
||||
<Card className="max-w-xl w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>Importer un deck</CardTitle>
|
||||
<CardDescription>Depuis moxfield</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="font-bold">Nom du deck</Label>
|
||||
<Input value={deckName} onChange={(e) => setDeckName(e.target.value)} placeholder="Nom du deck" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="font-bold">BSet selectionné</Label>
|
||||
<Popover open={openSelectBset} onOpenChange={setOpenSelectBset}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={openSelectBset}
|
||||
className="w-full justify-between"
|
||||
>
|
||||
{selectedBset
|
||||
? bsets.find((bset: bset) => bset.sanitized_name === selectedBset)?.name
|
||||
: "Selectionnez un Bset..."}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-full p-0">
|
||||
<Command className="w-full">
|
||||
<CommandInput placeholder="Search framework..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>Pas de BSet trouvé.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{bsets.map((bset) => (
|
||||
<CommandItem
|
||||
key={bset.sanitized_name}
|
||||
value={bset.sanitized_name}
|
||||
onSelect={(currentValue) => {
|
||||
setSelectedBset(currentValue === selectedBset ? "" : currentValue)
|
||||
setOpenSelectBset(false)
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-row gap-2">
|
||||
{bset.icons.map((icon) => (
|
||||
<img key={icon} src={icon} className="h-3" loading="lazy" />
|
||||
))}
|
||||
</div>
|
||||
{bset.name}
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="font-bold">Commandant</Label>
|
||||
<Label className="text-xs">Correspond à la première ligne de l'import Moxfield</Label>
|
||||
<Input value={deckCommanderName} placeholder="Commandant du Deck" disabled />
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="font-bold">Liste des cartes</Label>
|
||||
<Textarea value={deckImporter} onChange={(e) => updateDeckInput(e.target.value)} placeholder="Collez votre deck ici." className="h-60" />
|
||||
</div>
|
||||
<div className="flex flex-row w-full">
|
||||
<Button onClick={importDeck}>Importer</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="max-w-3xl w-full mt-12">
|
||||
<Table className="w-full">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{ decks.map((deck) => (
|
||||
<TableRow key={deck.id}>
|
||||
<TableCell>{deck.name}</TableCell>
|
||||
<TableCell className="flex flex-row gap-4 items-center"><a href={"/deck/" + deck.id}>Voir la page</a><Button disabled>Editer</Button><Button onClick={() => {deleteDeck(deck.id)}} variant="destructive">Supprimer</Button></TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue