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/components/App.tsx

@@ -1,21 +1,63 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from "react"
-import RetakesConfig from '../types/RetakesConfig';
+import copy from "copy-to-clipboard"
-import AllDecks from './AllDecks';
+import RetakesConfig from "../types/RetakesConfig"
-import MenuBar from './MenuBar';
+import AllDecks from "./AllDecks"
-
+import MenuBar from "./MenuBar"
-function App() {
+import Modal from "./Modal"
 
+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 onExport={()=>{
+			<MenuBar 
-        const exportString = retakesConfig.toCvar()
+				onExport={()=>{
-        console.log(exportString)
+					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 React from "react"
-import ReactDOM from 'react-dom';
+import ReactDOM from "react-dom"
-import App from './components/App';
+import App from "./components/App"
-import './index.css';
+import "./index.css"
 
 ReactDOM.render(
 	<React.StrictMode>
 		<App />
 	</React.StrictMode>,
-  document.getElementById('root')
+	document.getElementById("root")
-);
+)

src/types/Card.ts

@@ -16,6 +16,15 @@ class Card {
 	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[]
+		)
+	}
 }
 
 /**

src/types/CardGroup.ts

@@ -12,6 +12,13 @@ class CardGroup {
 	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))
+		)
+	}
 }
 
 export default CardGroup

src/types/Deck.ts

@@ -12,6 +12,13 @@ class Deck {
 	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))
+		)
+	}
 }
 
 export default Deck

src/types/RetakesConfig.ts

@@ -60,21 +60,41 @@ class RetakesConfig {
 	}
 
 	public toCvar(): string{
-        return `mp_retake_ct_loadout_default_pistol_round "${this.ctPistol.toCvar()}"
+		console.debug("THIS:")
-mp_retake_t_loadout_default_pistol_round "${this.tPistol.toCvar()}"
+		return `mp_retake_ct_loadout_default_pistol_round "${this.ctPistol.toCvar()}";
-mp_retake_ct_loadout_upgraded_pistol_round "${this.ctUpgradedPistol.toCvar()}"
+mp_retake_t_loadout_default_pistol_round "${this.tPistol.toCvar()}";
-mp_retake_t_loadout_upgraded_pistol_round "${this.tUpgradedPistol.toCvar()}"
+mp_retake_ct_loadout_upgraded_pistol_round "${this.ctUpgradedPistol.toCvar()}";
-mp_retake_ct_loadout_light_buy_round "${this.ctLight.toCvar()}"
+mp_retake_t_loadout_upgraded_pistol_round "${this.tUpgradedPistol.toCvar()}";
-mp_retake_t_loadout_light_buy_round "${this.tLight.toCvar()}"
+mp_retake_ct_loadout_light_buy_round "${this.ctLight.toCvar()}";
-mp_retake_ct_loadout_full_buy_round "${this.ctFull.toCvar()}"
+mp_retake_t_loadout_light_buy_round "${this.tLight.toCvar()}";
-mp_retake_t_loadout_full_buy_round "${this.tFull.toCvar()}"
+mp_retake_ct_loadout_full_buy_round "${this.ctFull.toCvar()}";
-mp_retake_ct_loadout_bonus_card "${this.ctBonus.toCvar()}"
+mp_retake_t_loadout_full_buy_round "${this.tFull.toCvar()}";
-mp_retake_t_loadout_bonus_card "${this.tBonus.toCvar()}"
+mp_retake_ct_loadout_bonus_card "${this.ctBonus.toCvar()}";
-mp_retake_ct_loadout_bonus_card_availability "${this.ctBonusAvailability.join(",")}"
+mp_retake_t_loadout_bonus_card "${this.tBonus.toCvar()}";
-mp_retake_t_loadout_bonus_card_availability "${this.tBonusAvailability.join(",")}"
+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[],
+		})
+	}
+
 }
 
 export default RetakesConfig