Opener learner

src/App.js

@@ -3,13 +3,17 @@ import listenToACT from "./ACTListener"
 import "./css/App.css"
 import Action from "./Action"
 import RotationContainer from "./Rotation"
+import OpenerContainer from "./Opener"
 import ReactDOM from "react-dom"
 
 const handleCodes = new Set(["00", "01", "02", "21", "22", "33"])
 
 export default function App() {
 	const [actionList, setActionList] = React.useState([])
 	const [encounterList, setEncounterList] = React.useState([])
+	const [openerActionList, setOpenerActionList] = React.useState(
+		JSON.parse(localStorage.getItem("openerActionList")) || []
+	)
 
 	React.useEffect(() => {
 		let selfId
@@ -123,6 +127,24 @@ export default function App() {
 		}
 	}, [])
 
+
+	let saveOpenerFn = (actionList) => {
+		setOpenerActionList([...actionList]);
+		localStorage.setItem("openerActionList", JSON.stringify(actionList))
+	}
+
+	let opener
+	if (encounterList[0])
+	{
+		opener = 
+			(
+				<OpenerContainer
+				openerActionList={openerActionList}
+				actionList={encounterList[0].rotation}
+				/>
+			)
+	}
+
 	return (
 		<>
 			<div className="container">
@@ -135,12 +157,14 @@ export default function App() {
 						/>
 					))}
 				</div>
+				{opener}
 				{encounterList.map((encounter, i) => (
 					<RotationContainer
 						key={i}
 						encounterId={i}
 						name={encounter.name}
 						actionList={encounter.rotation}
+						saveOpenerFn={saveOpenerFn}
 					/>
 				))}
 			</div>

src/Opener.js

@@ -0,0 +1,68 @@
+import React from "react"
+import "./css/Rotation.css"
+import "./css/Opener.css"
+import Action from "./Action"
+
+export default function OpenerContainer({ openerActionList, actionList }) {
+	const [open, setOpen] = React.useState(true)
+
+	if (openerActionList.length === 0) return null
+	let header = (
+		<button
+			className={open ? "rotation-button expanded" : "rotation-button"}
+			onClick={() => {
+				setOpen(open => !open)
+			}}
+		>
+			Opener
+		</button>
+	)
+
+	if (!open)
+	{
+		return (<> {header} </>)
+	}
+
+	return (
+		<>
+		{header}
+		<h1 class="opener-header">Reference</h1>
+		<OpenerReference openerActionList={openerActionList} />
+		<h1 class="opener-header">Execution</h1>
+		<OpenerExecution openerActionList={openerActionList} actionList={actionList} />
+		</>
+	)
+}
+
+function OpenerReference({ openerActionList }) {
+	return (
+		<div className="rotation-list">
+		{openerActionList.map((action, i) => {
+			return (<Action key={i} actionId={action} additionalClasses="action-rotation" />)
+		})}
+		</div>
+	)
+}
+
+function OpenerExecution({ openerActionList, actionList }) {
+	return (
+		<div className="rotation-list">
+		{openerActionList.map((openerAction, i) => {
+			let executedAction = actionList[i]
+			let classes = ["action-rotation"]
+			let action = openerAction
+			if (executedAction)
+			{
+				classes.push(openerAction === executedAction ? "opener-correct" : "opener-incorrect")
+				action = executedAction
+			}
+			else
+			{
+				classes.push("opener-unexecuted")
+				action = openerAction
+			}
+			return (<Action key={i} actionId={action} additionalClasses={classes.join(" ")} />)
+		})}
+		</div>
+	)
+}

src/Rotation.js

@@ -2,7 +2,7 @@ import React from "react"
 import "./css/Rotation.css"
 import Action from "./Action"
 
-export default function RotationContainer({ encounterId, name, actionList }) {
+export default function RotationContainer({ encounterId, name, actionList, saveOpenerFn }) {
 	const [open, setOpen] = React.useState(false)
 
 	return (
@@ -16,6 +16,7 @@ export default function RotationContainer({ encounterId, name, actionList }) {
 				{encounterId === 0 ? "Current Rotation" : name}
 			</button>
 			<RotationContents expanded={open} actionList={actionList} />
+			<SaveAsOpener expanded={open} actionList={actionList} saveOpenerFn={saveOpenerFn} />
 		</>
 	)
 }
@@ -31,3 +32,18 @@ function RotationContents({ expanded, actionList }) {
 		</div>
 	)
 }
+
+function SaveAsOpener({ expanded, actionList, saveOpenerFn }) {
+	if (!expanded) return null
+
+	return (
+		<button
+			className="save-opener-button"
+			onClick={() => {
+				saveOpenerFn(actionList);
+			}}
+		>
+			Save as Opener
+		</button>
+	)
+}

src/css/Opener.css

@@ -0,0 +1,26 @@
+.opener-header {
+	padding: 0.2em;
+	margin: 0;
+	background-color: rgba(100, 100, 100, 0.3);
+	color: rgba(255, 255, 255, 0.5);
+	font-size: 13px;
+	border: 1px solid gray;
+	border-left: 0;
+	border-right: 0;
+	text-align: center;
+	font-weight: normal;
+}
+
+.opener-correct {
+	box-sizing: border-box;
+	border: 3px solid lime;
+}
+
+.opener-incorrect {
+	box-sizing: border-box;
+	border: 3px solid red;
+}
+
+.opener-unexecuted {
+	opacity: 0.4;
+}

src/css/Rotation.css

@@ -29,4 +29,9 @@
 
 .rotation-button.expanded:after {
 	content: "\25B2";
-}
+}
+
+.save-opener-button {
+	width: 200px;
+	margin: 0 auto;
+}