added ";" for convar

.eslintrc.yml

@@ -0,0 +1,30 @@
+env:
+  browser: true
+  es2021: true
+extends:
+  - 'eslint:recommended'
+  - 'plugin:react/recommended'
+  - 'plugin:@typescript-eslint/recommended'
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+  ecmaVersion: 12
+  sourceType: module
+plugins:
+  - react
+  - '@typescript-eslint'
+rules:
+  indent:
+    - error
+    - tab
+  linebreak-style:
+    - error
+    - unix
+  quotes:
+    - error
+    - double
+  semi:
+    - error
+    - never
+  react/prop-types: 0

package.json

@@ -9,6 +9,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "autoprefixer": "^9",
+    "copy-to-clipboard": "^3.3.1",
     "postcss": "^7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -39,5 +40,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "eslint-plugin-react": "^7.27.0"
   }
 }

src/ItemToDisplay.ts

@@ -6,7 +6,7 @@ import Side from "./types/Side"
  * @param item what item
  * @param side CT or T
  */
- function ItemToDisplay(item:Item, side: Side ):string {
+function ItemToDisplay(item:Item, side: Side ):string {
 	switch (item) {
 	case Item.DEFAULT_PISTOL:
 		return side === Side.CT ? "USP-S / P2000":"Glock-18"

src/components/AllDecks.tsx

@@ -1,46 +1,49 @@
-import React, { useState } from "react"
+import React from "react"
 import RetakesConfig from "../types/RetakesConfig"
 import Side from "../types/Side"
 import CardComp from "./Card"
 import DeckComp from "./Deck"
 
-const AllDecks: React.FC = () => {
-    const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig())
+interface Props {
+    retakesConfig: RetakesConfig
+    onChange?: (newConfig: RetakesConfig)=>void
+}
 
+const AllDecks: React.FC<Props> = ({retakesConfig,onChange}) => {
 	return (
 		<div>
 			<DeckComp title="CT Pistol" side={Side.CT} deck={retakesConfig.ctPistol} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctPistol:newDeck}}))} />
+				onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctPistol:newDeck}}))} />
 			<DeckComp title="T Pistol" side={Side.T} deck={retakesConfig.tPistol} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tPistol:newDeck}}))} />
+				onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tPistol:newDeck}}))} />
             
 			<DeckComp title="CT Upgraded Pistol" side={Side.CT} deck={retakesConfig.ctUpgradedPistol} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctUpgradedPistol:newDeck}}))} />
+				onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctUpgradedPistol:newDeck}}))} />
 			<DeckComp title="T Upgraded Pistol" side={Side.T} deck={retakesConfig.tUpgradedPistol} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tUpgradedPistol:newDeck}}))} />
+				onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tUpgradedPistol:newDeck}}))} />
             
 			<DeckComp title="CT Light" side={Side.CT} deck={retakesConfig.ctLight} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctLight:newDeck}}))} />
+				onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctLight:newDeck}}))} />
 			<DeckComp title="T Light" side={Side.T} deck={retakesConfig.tLight} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tLight:newDeck}}))} />
+				onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tLight:newDeck}}))} />
             
 			<DeckComp title="CT Full" side={Side.CT} deck={retakesConfig.ctFull} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctFull:newDeck}}))} />
+				onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{ctFull:newDeck}}))} />
 			<DeckComp title="T Full" side={Side.T} deck={retakesConfig.tFull} 
-                onChange={(newDeck)=> setRetakesConfig(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} />
+				onChange={(newDeck)=> onChange?.(new RetakesConfig({...retakesConfig,...{tFull:newDeck}}))} />
 
 			<div className="flex">
 				<CardComp card={retakesConfig.ctEnemy} side={Side.T} 
-                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} />
+					onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{ctEnemy:newCard}}))} />
 				<CardComp card={retakesConfig.tEnemy} side={Side.CT} 
-                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} />
+					onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{tEnemy:newCard}}))} />
 			</div>
 
 			<div className="flex">
 				<CardComp card={retakesConfig.ctBonus} side={Side.CT} 
-                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} />
+					onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{ctBonus:newCard}}))} />
 				<CardComp card={retakesConfig.tBonus} side={Side.T} 
-                    onChange={(newCard)=>setRetakesConfig(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} />
+					onChange={(newCard)=>onChange?.(new RetakesConfig({...retakesConfig,...{tBonus:newCard}}))} />
 			</div>
 		</div>
 	)

src/components/App.tsx

@@ -1,24 +1,63 @@
-import React from 'react';
-import AllDecks from './AllDecks';
-import MenuBar from './MenuBar';
+import React, { useEffect, useState } from "react"
+import copy from "copy-to-clipboard"
+import RetakesConfig from "../types/RetakesConfig"
+import AllDecks from "./AllDecks"
+import MenuBar from "./MenuBar"
+import Modal from "./Modal"
 
-function App() {
-  // const [CTDeck,setCTDeck] = useState<Deck>(new Deck(
-  //   2,new CardGroup(
-  //     2,new Card("AWE fake",false,false,Item.AWP,Item.DECOY),
-  //     new Card("M4 Flash",true,true,Item.AK_47_M4,Item.FLASHBANG)
-  //   ),
-  //   new CardGroup(
-  //     3,new Card("One deag",true,false,Item.DESERT_EAGLE)
-  //   )
-  // ))
+const App: React.FC = () => {
+	const [retakesConfig,setRetakesConfig] = useState(new RetakesConfig())
+	const [showExport,setShowExport] = useState(false)
+	const [exportText,setExportText] = useState("")
+
+	useEffect(()=>{
+		// Load saved config
+		const retakesJSON = window.localStorage.getItem("retakesJSON")
+		if (retakesJSON){
+			try{
+				const parsedConfig: Record<string,unknown> = JSON.parse(retakesJSON)
+				setRetakesConfig(RetakesConfig.fromObject(parsedConfig))
+			}catch(err){
+				window.localStorage.removeItem("retakesJSON")
+			}
+		}
+	},[])
 
 	return (
 		<div className="text-white">
-      <MenuBar />
-      <AllDecks />
+			<MenuBar 
+				onExport={()=>{
+					setExportText(retakesConfig.toCvar())
+					setShowExport(true)
+				}}
+				onExportJson={()=>{
+					setExportText(JSON.stringify(retakesConfig))
+					setShowExport(true)
+				}}
+				onSave={()=>{
+					const jsonString = JSON.stringify(retakesConfig)
+					window.localStorage.setItem("retakesJSON",jsonString)
+					// TODO: user feedback that config was saved
+				}}
+			/>
+			<AllDecks retakesConfig={retakesConfig} onChange={(newConfig)=>setRetakesConfig(newConfig)} />
+
+			<Modal show={showExport} onCloseClick={()=>setShowExport(false)}>
+				<div className="flex justify-center mb-2">
+					<textarea
+						cols={50} rows={10}
+						value={exportText}
+						readOnly
+						className="bg-transparent border-2 border-gray-900"
+					/>
 				</div>
-  );
+				<div 
+					className="bg-gray-700 button flex justify-center"
+					onClick={()=>copy(exportText)}
+				>Copy to clipboard</div>
+			</Modal>
+		</div>
+	)
 }
 
-export default App;
+export default App

src/components/MenuBar.tsx

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

src/components/Modal.tsx

@@ -0,0 +1,26 @@
+import React from "react"
+
+interface Props {
+	show: boolean
+	onCloseClick?: ()=>void
+}
+
+const Modal: React.FC<Props> = ({children,show,onCloseClick}) => {
+	return (
+		<div 
+			className={`${!show?"hidden":"" } 
+			fixed z-10 left-0 top-0 w-full h-full 
+			flex justify-center items-center bg-gray-900 bg-opacity-80`}
+			onClick={()=>{
+				onCloseClick?.()
+			}}>
+			<div className="bg-gray-800 mx-auto p-5 border-2 border-gray-800 w-10/12 overflow-hidden max-h-full" onClick={(e)=>{
+				e.stopPropagation()
+			}}>
+				{children}
+			</div>
+		</div>
+	)
+}
+
+export default Modal

src/components/TextEdit.tsx

@@ -25,10 +25,12 @@ const TextEdit: React.FC<Props> = ({text,onChange}) => {
 		<>
 			{!edit && <span className="cursor-pointer" onClick={()=>setEdit(true)} >{inputValue}</span>}
 			{edit &&
-                <form className="inline" onSubmit={(e)=>{
+				<form className="inline" 
+					onSubmit={(e)=>{
 						e.preventDefault()
 						setEdit(false)
-                }} >
+					}} 
+				>
 					<input
 						type="text"
 						className="bg-transparent outline-none font-bold"

src/index.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './components/App';
-import './index.css';
+import React from "react"
+import ReactDOM from "react-dom"
+import App from "./components/App"
+import "./index.css"
 
 ReactDOM.render(
 	<React.StrictMode>
 		<App />
 	</React.StrictMode>,
-  document.getElementById('root')
-);
+	document.getElementById("root")
+)

src/types/Card.ts

@@ -13,15 +13,24 @@ class Card {
 		this.items = items
 	}
 
-    public toString(): string {
+	public toCvar(): string {
 		return `${this.title},${bToS(this.armor)},${bToS(this.helmet)},${this.items.join(",")}`
 	}
+
+	static fromObject(input: Record<string, unknown>): Card {
+		return new Card(
+			input.title as string,
+			input.armor as boolean,
+			input.helmet as boolean,
+			...input.items as Item[]
+		)
+	}
 }
 
 /**
  * Converts a boolean to 1 for true and 0 for false
  */
- function bToS(bool: boolean): string{
+function bToS(bool: boolean): string{
 	return bool?"1":"0"
 }
 

src/types/CardGroup.ts

@@ -9,8 +9,15 @@ class CardGroup {
 		this.cards = cards
 	}
 
-    public toString(): string {
-        return `${this.numInDeck};${this.cards.map(e => e.toString()).join(";")}`
+	public toCvar(): string {
+		return `${this.numInDeck};${this.cards.map(e => e.toCvar()).join(";")}`
+	}
+
+	static fromObject(input:  Record<string, unknown>): CardGroup{
+		return new CardGroup(
+			input.numInDeck as number,
+			...(input.cards as Record<string, unknown>[]).map((e)=>Card.fromObject(e))
+		)
 	}
 }
 

src/types/Deck.ts

@@ -9,8 +9,15 @@ class Deck {
 		this.cardGroups = cardGroups
 	}
 
-    public toString(): string {
-        return `${this.numDefusers}|${this.cardGroups.map(e => e.toString()).join("|")}`
+	public toCvar(): string {
+		return `${this.numDefusers}|${this.cardGroups.map(e => e.toCvar()).join("|")}`
+	}
+
+	static fromObject(input: Record<string, unknown>): Deck{
+		return new Deck(
+			input.numDefusers as number,
+			...(input.cardGroups as Record<string, unknown>[]).map((e)=>CardGroup.fromObject(e))
+		)
 	}
 }
 

src/types/RetakesConfig.ts

@@ -59,8 +59,40 @@ class RetakesConfig {
 		}
 	}
 
-    public toCvar(){
+	public toCvar(): string{
+		console.debug("THIS:")
+		return `mp_retake_ct_loadout_default_pistol_round "${this.ctPistol.toCvar()}";
+mp_retake_t_loadout_default_pistol_round "${this.tPistol.toCvar()}";
+mp_retake_ct_loadout_upgraded_pistol_round "${this.ctUpgradedPistol.toCvar()}";
+mp_retake_t_loadout_upgraded_pistol_round "${this.tUpgradedPistol.toCvar()}";
+mp_retake_ct_loadout_light_buy_round "${this.ctLight.toCvar()}";
+mp_retake_t_loadout_light_buy_round "${this.tLight.toCvar()}";
+mp_retake_ct_loadout_full_buy_round "${this.ctFull.toCvar()}";
+mp_retake_t_loadout_full_buy_round "${this.tFull.toCvar()}";
+mp_retake_ct_loadout_bonus_card "${this.ctBonus.toCvar()}";
+mp_retake_t_loadout_bonus_card "${this.tBonus.toCvar()}";
+mp_retake_ct_loadout_bonus_card_availability "${this.ctBonusAvailability.join(",")}";
+mp_retake_t_loadout_bonus_card_availability "${this.tBonusAvailability.join(",")}";
+`
+	}
 
+	static fromObject(input: Record<string, unknown>): RetakesConfig {
+		return new RetakesConfig({
+			ctPistol: Deck.fromObject(input.ctPistol as Record<string, unknown>),
+			tPistol: Deck.fromObject(input.tPistol as Record<string,unknown>),
+			ctUpgradedPistol: Deck.fromObject(input.ctUpgradedPistol as Record<string,unknown>),
+			tUpgradedPistol: Deck.fromObject(input.tUpgradedPistol as Record<string,unknown>),
+			ctLight: Deck.fromObject(input.ctLight as Record<string,unknown>),
+			tLight: Deck.fromObject(input.tLight as Record<string,unknown>),
+			ctFull: Deck.fromObject(input.ctFull as Record<string,unknown>),
+			tFull: Deck.fromObject(input.tFull as Record<string,unknown>),
+			ctEnemy: Card.fromObject(input.ctEnemy as Record<string,unknown>),
+			tEnemy: Card.fromObject(input.tEnemy as Record<string,unknown>),
+			ctBonus: Card.fromObject(input.ctBonus as Record<string,unknown>),
+			tBonus: Card.fromObject(input.tBonus as Record<string,unknown>),
+			ctBonusAvailability: input.ctBonusAvailability as number[],
+			tBonusAvailability: input.tBonusAvailability as number[],
+		})
 	}
 
 }