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

Compare commits

base: niklas:0303bd395434065fa407bb8ddc90af1c2313c50b
Branches Tags
niklas:master
...
compare: niklas:a18ac47c72ba7faba1c5f0de02746389ec5c33ae
Branches Tags
niklas:master

2 Commits
0303bd3954 ... a18ac47c72

Author SHA1 Message Date
Djeeberjr
a18ac47c72 css improvments 2021-11-15 01:22:46 +01:00
Djeeberjr
e8bf2a7947 "fixed" some keys in loops 2021-11-14 17:40:54 +01:00
7 changed files with 32 additions and 15 deletions
Expand all files Collapse all files

2
public/index.html
View File

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

3
src/components/AddItem.tsx
View File

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

2
src/components/App.tsx
View File

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

16
src/components/Card.tsx
View File

@@ -15,19 +15,25 @@ interface Props {
const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => {
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="font-bold"><TextEdit
text={card.title}
onChange={(newTitle)=>onChange?.(new Card(newTitle,card.armor,card.helmet,...card.items))}
/></span>
<div>
Helmet: <SwitchButton active={card.helmet} onChange={(to)=>onChange?.(new Card(card.title,card.armor,to,...card.items))} />
Armor: <SwitchButton active={card.armor} onChange={(to)=>onChange?.(new Card(card.title,to,card.helmet,...card.items))} />
<span>
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))} />
</span>
</div>
<div className="border border-red-500">
<div className="border-2 border-gray-700 p-0.5">
{card.items.map((item,i)=>
<div key={i}>
<div
key={item + i} // FIXME: this is just a "temporary" solution. Implement propper key
>
{ItemToDisplay(item,side)} <span onClick={()=>{
onChange?.(new Card(card.title,card.armor,card.helmet,...card.items.filter((_,fi)=>i!==fi)))
}} className="float-right cursor-pointer" >X</span>

9
src/components/CardGroup.tsx
View File

@@ -14,14 +14,17 @@ interface Props {
const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
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>
Num: <NumEdit value={cardGroup.numInDeck}
onChange={newNum => onChange?.(new CardGroup(Math.max(newNum,0),...cardGroup.cards))}
/>
<div className="flex">
{cardGroup.cards.map((card,index) =>
<CardComp key={index} card={card} side={side}
<CardComp
key={card.toString() + index} // FIXME: this is just a "temporary" solution. Implement propper key
card={card}
side={side}
onChange={(newCard)=>{
onChange?.(new CardGroup(
cardGroup.numInDeck,
@@ -35,7 +38,7 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
/>
)}
<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?.(
new CardGroup(
cardGroup.numInDeck,

9
src/components/Deck.tsx
View File

@@ -15,7 +15,7 @@ interface Props {
const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
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>
{ side === Side.CT && <span>
D: <NumEdit
@@ -24,7 +24,10 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
/> </span> }
<div className="flex">
{deck.cardGroups.map((group,index) =>
<CardGroupComp key={index} cardGroup={group} side={side}
<CardGroupComp
key={group.toString() + index} // FIXME: this is just a "temporary" solution. Implement propper key
cardGroup={group}
side={side}
onChange={(newGroup)=>{
onChange?.(new Deck(
deck.numDefusers,
@@ -39,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?.(
new Deck(
deck.numDefusers,

6
src/index.css
View File

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