ArenaEditor: flexbox, also -20hp to arena decks

serprex · Feb 21, 2024 · 2180c3b · 2180c3b
1 parent 2667480
commit 2180c3b
Showing 1 changed file with 73 additions and 74 deletions.
diff --git a/src/views/ArenaEditor.jsx b/src/views/ArenaEditor.jsx
@@ -7,48 +7,48 @@ import * as store from '../store.jsx';
 import { chain } from '../util.js';
 import Editor from '../Components/Editor.jsx';
 
-const arpts = 400;
+const arpts = 380;
 const artable = {
 	hp: { min: 60, incr: 20, cost: 1 },
 	mark: { cost: 20 },
 	draw: { cost: 100 },
 };
 function AttrUi(p) {
 	return (
-		<>
-			{['hp', 'mark', 'draw'].map((name, y) => {
-				const top = 128 + y * 20;
+		<div style="display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;text-align:right;width:98px">
+			{['hp', 'mark', 'draw'].map(name => {
 				const { min = 0, incr = 1 } = artable[name];
 				return (
 					<>
-						<div style={`position:absolute;left:4px;top:${top}px`}>{name}</div>
-						{p.attr[name] - incr >= min && (
-							<input
-								type="button"
-								value="-"
-								onClick={() =>
-									p.setAttr(attr => ({ ...attr, [name]: attr[name] - incr }))
-								}
-								style={`position:absolute;left:38px;width:14px;top:${top}px`}
-							/>
-						)}
-						{p.sumscore + incr * artable[name].cost <= p.arpts && (
-							<input
-								type="button"
-								value="+"
-								onClick={() =>
-									p.setAttr(attr => ({ ...attr, [name]: attr[name] + incr }))
-								}
-								style={`position:absolute;left:82px;width:14px;top:${top}px`}
-							/>
-						)}
-						<div style={`position:absolute;left:56px;top:${top}px`}>
-							{p.attr[name]}
-						</div>
+						{name}
+						<input
+							type="button"
+							value="-"
+							style={`width:12px;${
+								p.attr[name] - incr >= min ? '' : 'visibility:hidden'
+							}`}
+							onClick={() =>
+								p.setAttr(attr => ({ ...attr, [name]: attr[name] - incr }))
+							}
+						/>
+						{p.attr[name]}
+						<input
+							type="button"
+							value="+"
+							style={`width:12px;${
+								p.sumscore + incr * artable[name].cost <= p.arpts ?
+									''
+								:	'visibility:hidden'
+							}`}
+							onClick={() =>
+								p.setAttr(attr => ({ ...attr, [name]: attr[name] + incr }))
+							}
+						/>
 					</>
 				);
 			})}
-		</>
+			<div>{(p.arpts - p.sumscore) / 20}</div>
+		</div>
 	);
 }
 
@@ -94,7 +94,7 @@ export default function ArenaEditor(props) {
 	});
 
 	const [attr, setAttr] = createSignal({
-		hp: props.ainfo.hp ?? 160,
+		hp: props.ainfo.hp ?? 140,
 		mark: props.ainfo.mark ?? 2,
 		draw: props.ainfo.draw ?? 2,
 	});
@@ -122,51 +122,50 @@ export default function ArenaEditor(props) {
 				setMark={setMark}
 				noupped={!props.acard.upped}
 			/>
-			<AttrUi
-				attr={attr()}
-				sumscore={sumscore()}
-				arpts={arpts}
-				setAttr={setAttr}
-			/>
-			<div style="position:absolute;left:4px;top:188px">
-				{(arpts - sumscore()) / 20}
+			<div style="position:absolute;top:58px;height:160px;display:flex;flex-direction:column;justify-content:space-between">
+				<input
+					type="button"
+					value="Save & Exit"
+					style="margin-left:8px"
+					onClick={() => {
+						if (!Cards.isDeckLegal(deck(), rx.user) || sumscore() > arpts) {
+							store.chatMsg(
+								'Invalid deck, 35 cards required before submission',
+								'System',
+							);
+							return;
+						}
+						const data = {
+							d: etgutil.encodedeck(deck()) + etgutil.toTrueMarkSuffix(mark()),
+							lv: +props.acard.upped,
+							...attr(),
+						};
+						if (!props.acreate) {
+							data.mod = true;
+						}
+						sock.userEmit('setarena', data);
+						if (props.acreate && props.ainfo.day > 0) {
+							store.updateUser({
+								gold: rx.user.gold + Math.min(props.ainfo.day * 25, 350),
+							});
+						}
+						store.chatMsg('Arena deck submitted', 'System');
+						store.doNav(import('../views/MainMenu.jsx'));
+					}}
+				/>
+				<input
+					type="button"
+					value="Exit"
+					style="margin-left:8px"
+					onClick={() => store.doNav(import('../views/ArenaInfo.jsx'))}
+				/>
+				<AttrUi
+					attr={attr()}
+					sumscore={sumscore()}
+					arpts={arpts}
+					setAttr={setAttr}
+				/>
 			</div>
-			<input
-				type="button"
-				value="Save & Exit"
-				onClick={() => {
-					if (!Cards.isDeckLegal(deck(), rx.user) || sumscore() > arpts) {
-						store.chatMsg(
-							'Invalid deck, 35 cards required before submission',
-							'System',
-						);
-						return;
-					}
-					const data = {
-						d: etgutil.encodedeck(deck()) + etgutil.toTrueMarkSuffix(mark()),
-						lv: +props.acard.upped,
-						...attr(),
-					};
-					if (!props.acreate) {
-						data.mod = true;
-					}
-					sock.userEmit('setarena', data);
-					if (props.acreate && props.ainfo.day > 0) {
-						store.updateUser({
-							gold: rx.user.gold + Math.min(props.ainfo.day * 25, 350),
-						});
-					}
-					store.chatMsg('Arena deck submitted', 'System');
-					store.doNav(import('../views/MainMenu.jsx'));
-				}}
-				style="position:absolute;left:8px;top:58px"
-			/>
-			<input
-				type="button"
-				value="Exit"
-				onClick={() => store.doNav(import('../views/ArenaInfo.jsx'))}
-				style="position:absolute;left:8px;top:84px"
-			/>
 		</>
 	);
 }