niklas/csgo-retakes-editor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css improvments

Browse Source
This commit is contained in:
Djeeberjr 2021-11-15 01:22:46 +01:00
parent e8bf2a7947
commit a18ac47c72
7 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -10,7 +10,7 @@
/> />
<title>CS:GO Retakes card editor</title> <title>CS:GO Retakes card editor</title>
</head> </head>
<body> <body class="bg-black">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
</body> </body>

3
src/components/AddItem.tsx
View File

@ -14,6 +14,7 @@ const AddItem: React.FC<Props> = ({side,onChange}) => {
return ( return (
<div> <div>
<select <select
className="bg-gray-600 border-2 border-gray-700"
onChange={(e)=>setSelected(Item[e.target.value as keyof typeof Item])} onChange={(e)=>setSelected(Item[e.target.value as keyof typeof Item])}
> >
{ {
@ -22,7 +23,7 @@ const AddItem: React.FC<Props> = ({side,onChange}) => {
</select> </select>
<span <span
onClick={()=>onChange?.(selected)} onClick={()=>onChange?.(selected)}
className="cursor-pointer" className="cursor-pointer float-right"
> >
Add Add
</span> </span>

2
src/components/App.tsx
View File

@ -18,7 +18,7 @@ function App() {
)) ))
return ( return (
<div> <div className="text-white">
<DeckComp title="CT Normal" side={Side.CT} deck={CTDeck} onChange={(newDeck)=> setCTDeck(newDeck)} /> <DeckComp title="CT Normal" side={Side.CT} deck={CTDeck} onChange={(newDeck)=> setCTDeck(newDeck)} />
</div> </div>
); );

8
src/components/Card.tsx
View File

@ -15,17 +15,21 @@ interface Props {
const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => { const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => {
return ( return (
<div className="bg-blue-500 m-1 p-1"> <div className="bg-gray-600 m-1 p-1 w-72 min-h-12">
<span className="float-right cursor-pointer" onClick={()=>{onRemove?.()}}>X</span> <span className="float-right cursor-pointer" onClick={()=>{onRemove?.()}}>X</span>
<span className="font-bold"><TextEdit <span className="font-bold"><TextEdit
text={card.title} text={card.title}
onChange={(newTitle)=>onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))} onChange={(newTitle)=>onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))}
/></span> /></span>
<div> <div>
<span>
Helmet: <SwitchButton active={card.helmet} onChange={(to)=>onChange?.(new Card(card.title,card.armor,to,...card.items))} /> Helmet: <SwitchButton active={card.helmet} onChange={(to)=>onChange?.(new Card(card.title,card.armor,to,...card.items))} />
</span>
<span className="float-right">
Armor: <SwitchButton active={card.armor} onChange={(to)=>onChange?.(new Card(card.title,to,card.helmet,...card.items))} /> Armor: <SwitchButton active={card.armor} onChange={(to)=>onChange?.(new Card(card.title,to,card.helmet,...card.items))} />
</span>
</div> </div>
<div className="border border-red-500"> <div className="border-2 border-gray-700 p-0.5">
{card.items.map((item,i)=> {card.items.map((item,i)=>
<div <div
key={item + i} // FIXME: this is just a "temporary" solution. Implement propper key key={item + i} // FIXME: this is just a "temporary" solution. Implement propper key

4
src/components/CardGroup.tsx
View File

@ -14,7 +14,7 @@ interface Props {
const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => { const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
return ( return (
<div className="bg-red-500 m-1 p-1"> <div className="bg-gray-700 m-1 p-1">
<span className="float-right cursor-pointer" onClick={()=>onRemove?.()} >X</span> <span className="float-right cursor-pointer" onClick={()=>onRemove?.()} >X</span>
Num: <NumEdit value={cardGroup.numInDeck} Num: <NumEdit value={cardGroup.numInDeck}
onChange={newNum => onChange?.(new CardGroup(Math.max(newNum,0),...cardGroup.cards))} onChange={newNum => onChange?.(new CardGroup(Math.max(newNum,0),...cardGroup.cards))}
@ -38,7 +38,7 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
/> />
)} )}
<div <div
className="bg-blue-500 m-1 p-1 cursor-pointer" className="bg-gray-600 m-1 p-1 cursor-pointer my-auto"
onClick={()=>onChange?.( onClick={()=>onChange?.(
new CardGroup( new CardGroup(
cardGroup.numInDeck, cardGroup.numInDeck,

4
src/components/Deck.tsx
View File

@ -15,7 +15,7 @@ interface Props {
const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => { const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
return ( return (
<div className="bg-green-400 m-1 p-1"> <div className="bg-gray-800 m-1 p-1">
<span className="font-bold">{title}</span> <span className="font-bold">{title}</span>
{ side === Side.CT && <span> { side === Side.CT && <span>
D: <NumEdit D: <NumEdit
@ -42,7 +42,7 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
}} }}
/> />
)} )}
<div className="bg-red-500 m-1 p-1 cursor-pointer" <div className="bg-gray-700 m-1 p-1 cursor-pointer my-auto"
onClick={()=>onChange?.( onClick={()=>onChange?.(
new Deck( new Deck(
deck.numDefusers, deck.numDefusers,

4
src/index.css
View File

@ -1,3 +1,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
.min-h-12 {
min-height: 12rem;
}