added menu bar

src/components/AllDecks.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react"
 import RetakesConfig from "../types/RetakesConfig"
 import Side from "../types/Side"
+import CardComp from "./Card"
 import DeckComp from "./Deck"
 
 const AllDecks: React.FC = () => {
@@ -28,6 +29,19 @@ const AllDecks: React.FC = () => {
             <DeckComp title="T Full" side={Side.T} deck={retakesConfig.tFull} 
                 onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} />
 
+            <div className="flex">
+                <CardComp card={retakesConfig.ctEnemy} side={Side.T} 
+                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} />
+                <CardComp card={retakesConfig.tEnemy} side={Side.CT} 
+                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} />
+            </div>
+
+            <div className="flex">
+                <CardComp card={retakesConfig.ctBonus} side={Side.CT} 
+                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} />
+                <CardComp card={retakesConfig.tBonus} side={Side.T} 
+                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} />
+            </div>
         </div>
     )
 }

src/components/App.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import AllDecks from './AllDecks';
+import MenuBar from './MenuBar';
 
 function App() {
   // const [CTDeck,setCTDeck] = useState<Deck>(new Deck(
@@ -14,6 +15,7 @@ function App() {
 
   return (
     <div className="text-white">
+      <MenuBar />
       <AllDecks />
     </div>
   );

src/components/Card.tsx

@@ -15,7 +15,7 @@ interface Props {
 
 const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => {
     return (
-        <div className="bg-gray-600 m-1 p-1 w-72 min-h-12">
+        <div className="bg-gray-600 m-1 p-1 w-72 min-h-card">
             <span className="float-right cursor-pointer" onClick={()=>{onRemove?.()}}>X</span>
             <span className="font-bold"><TextEdit 
                 text={card.title}

src/components/CardGroup.tsx

@@ -38,7 +38,7 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
 					/>
 				)}
 				<div
-					className="bg-gray-600 m-1 p-1 cursor-pointer my-auto"
+					className="bg-gray-600 my-auto button"
 					onClick={()=>onChange?.(
 						new CardGroup(
 							cardGroup.numInDeck,

src/components/Deck.tsx

@@ -15,10 +15,10 @@ interface Props {
 
 const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
     return (
-        <div className="bg-gray-800 m-1 p-1">
+        <div className="bg-gray-800 m-1 p-1 overflow-x-scroll">
             <span className="font-bold">{title}</span> 
-            { side === Side.CT && <span> 
-                D: <NumEdit 
+            { side === Side.CT && <span className="px-2"> 
+                Defuser: <NumEdit 
                     value={deck.numDefusers}
                     onChange={newNum => onChange?.(new Deck(Math.max(newNum,0),...deck.cardGroups))} 
                 /> </span> }
@@ -42,7 +42,7 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
                         }}
                     />
                 )}
-                <div className="bg-gray-700 m-1 p-1 cursor-pointer my-auto" 
+                <div className="bg-gray-700 button my-auto" 
                     onClick={()=>onChange?.(
                         new Deck(
                             deck.numDefusers,

src/components/MenuBar.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+interface Props {
+    onExport?: ()=>void
+}
+
+const MenuBar: React.FC<Props> = ({onExport}) => {
+    return (
+        <div className="bg-gray-800 h-10 m-1 p-1 flex">
+            <div className="bg-gray-700 button" onClick={onExport}>
+                Export
+            </div>
+            <a href="https://developer.valvesoftware.com/wiki/CS:GO_Game_Mode_-_Retakes" target="_blank" rel='noreferrer'>
+                <div className="bg-gray-700 button">
+                    Help
+                </div>
+            </a>
+        </div>
+    )
+}
+
+export default MenuBar

src/index.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
-.min-h-12 {
-    min-height: 12rem;
+.min-h-card {
+    min-height: 10rem;
+}
+
+.button {
+    @apply py-1 px-2 mx-2 hover:bg-gray-900 cursor-pointer
 }

src/types/RetakesConfig.ts

@@ -2,26 +2,27 @@ import Card from "./Card"
 import Deck from "./Deck"
 
 class RetakesConfig {
-    readonly ctPistol: Deck
-    readonly tPistol: Deck
+    readonly ctPistol: Deck = new Deck(0)
+    readonly tPistol: Deck = new Deck(0)
 
-    readonly ctUpgradedPistol: Deck
-    readonly tUpgradedPistol: Deck
+    readonly ctUpgradedPistol: Deck = new Deck(0)
+    readonly tUpgradedPistol: Deck = new Deck(0)
     
-    readonly ctLight: Deck
-    readonly tLight: Deck
+    readonly ctLight: Deck = new Deck(0)
+    readonly tLight: Deck = new Deck(0)
 
-    readonly ctFull: Deck
-    readonly tFull: Deck
+    readonly ctFull: Deck = new Deck(0)
+    readonly tFull: Deck = new Deck(0)
 
-    readonly ctEnemy: Card
-    readonly tEnemy: Card
+    readonly ctEnemy: Card = new Card("CT Enemy card",false,false)
+    readonly tEnemy: Card = new Card("T Enemy card",false,false)
 
-    readonly ctBonus: Card
-    readonly tBonus: Card
+    readonly ctBonus: Card = new Card("CT Bonus card",false,false)
+    readonly tBonus: Card = new Card("T Bonus card",false,false)
 
-    readonly ctBonusAvailability: number[]
-    readonly tBonusAvailability: number[]
+    // If not set to [1] or a valid value the game will crash
+    readonly ctBonusAvailability: number[] = [1]
+    readonly tBonusAvailability: number[] = [1]
 
     // TODO: there must be some smarter way to do this
     constructor(args? :{
@@ -40,26 +41,22 @@ class RetakesConfig {
         ctBonusAvailability?: number[],
         tBonusAvailability?: number[],
     }){
-        this.ctPistol = args?.ctPistol ?? new Deck(0)
-        this.tPistol = args?.tPistol ?? new Deck(0)
-
-        this.ctUpgradedPistol = args?.ctUpgradedPistol ?? new Deck(0)
-        this.tUpgradedPistol = args?.tUpgradedPistol ?? new Deck(0)
-
-        this.ctLight = args?.ctLight ?? new Deck(0)
-        this.tLight = args?.tLight ?? new Deck(0)
-
-        this.ctFull = args?.ctFull ?? new Deck(0)
-        this.tFull = args?.tFull ?? new Deck(0)
-
-        this.ctEnemy = args?.ctEnemy ?? new Card("CT Enemy card",false,false)
-        this.tEnemy = args?.tEnemy ?? new Card("T Enemy Card",false,false)
-
-        this.ctBonus = args?.ctBonus ?? new Card("CT Bonus card",false,false)
-        this.tBonus = args?.tBonus ?? new Card("T Bonus card",false,false)
-
-        this.ctBonusAvailability = args?.ctBonusAvailability ?? [1] // Has to be 1 or the game will crash
-        this.tBonusAvailability = args?.tBonusAvailability ?? [1]
+        if (args){
+            args.ctPistol && (this.ctPistol = args.ctPistol)
+            args.tPistol && (this.tPistol = args.tPistol)
+            args.ctUpgradedPistol && (this.ctUpgradedPistol = args.ctUpgradedPistol)
+            args.tUpgradedPistol && (this.tUpgradedPistol = args.tUpgradedPistol)
+            args.ctLight && (this.ctLight = args.ctLight)
+            args.tLight && (this.tLight = args.tLight)
+            args.ctFull && (this.ctFull = args.ctFull)
+            args.tFull && (this.tFull = args.tFull)
+            args.ctEnemy && (this.ctEnemy = args.ctEnemy)
+            args.tEnemy && (this.tEnemy = args.tEnemy)
+            args.ctBonus && (this.ctBonus = args.ctBonus)
+            args.tBonus && (this.tBonus = args.tBonus)
+            args.ctBonusAvailability && (this.ctBonusAvailability = args.ctBonusAvailability)
+            args.tBonusAvailability && (this.tBonusAvailability = args.tBonusAvailability)
+        }
     }
 
     public toCvar(){