render selected quest rewards

elysiumplain · Jan 31, 2024 · 13ffd6c · 13ffd6c
1 parent 010ca16
commit 13ffd6c
Show file tree

Hide file tree

Showing 2 changed files with 100 additions and 75 deletions.
diff --git a/src/Quest.js b/src/Quest.js
@@ -401,19 +401,19 @@ export const quarks = {
 			'You have proved your worth for the Master of Arms, and he gives you one of his rare weapons.',
 		/* prettier-ignore */
 		choicerewards: [
-		5109, 5124,
-		5210, 5222,
-		5308, 5324,
-		5407, 5423,
-		5509, 5523,
-		5607, 5621,
-		5708, 5723,
-		5809, 5822,
-		5909, 5924,
-		6008, 6025,
-		6107, 6126,
-		6206, 6223,
-	],
+			5109, 5124,
+			5210, 5222,
+			5308, 5324,
+			5407, 5423,
+			5509, 5523,
+			5607, 5621,
+			5708, 5723,
+			5809, 5822,
+			5909, 5924,
+			6008, 6025,
+			6107, 6126,
+			6206, 6223,
+		],
 		info: 'Fight the Master of Arms at the Proving Grounds!',
 	},
 	pgshard: {
@@ -638,7 +638,7 @@ export const quarks = {
 		hp: 400,
 		markpower: 3,
 		drawpower: 2,
-		cardreward: '0171r01785017bf017ea017hj017nm017qv01813018pi',
+		cardreward: '0171r01785017bf017ea017hj017nm017qv01813',
 		info: 'The AI has taken control of Serprex’s account and gone berserk. It has a power beyond a demigod!',
 		wintext:
 			'You defeat the AI menace and restore Serprex’s account to their rightful place. Phew!',
@@ -728,21 +728,6 @@ export const root = {
 	],
 };
 
-export function extractRewards(obj) {
-	for (const key in obj) {
-		console.log(typeof obj[key])
-		if (typeof obj[key] === 'object' && obj[key] !== null) {
-			extractRewards(obj[key]);
-		} else if (key === 'cardreward' || key === 'choicerewards') {
-			return '+Card'
-				//TODO: break down card reward options into onHover
-				// obj[key].cardreward ? '+Cards' : '+'+obj[key].goldreward+'$';
-		} else if (key === 'goldreward') {
-			return '+'+obj[key];
-		}
-	}
-}
-
 export function mkQuestAi(quest, datafn) {
 	const markpower = quest.markpower ?? 1;
 	const drawpower = quest.drawpower ?? 1;

diff --git a/src/views/Quest.jsx b/src/views/Quest.jsx
@@ -1,46 +1,83 @@
 import { createMemo } from 'solid-js';
+
+import Cards from '../Cards.js';
 import * as Quest from '../Quest.js';
+import CardImage from '../Components/CardImage.jsx';
 import ExitBtn from '../Components/ExitBtn.jsx';
 import Text from '../Components/Text.jsx';
 import * as store from '../store.jsx';
+import { decodedeck } from '../etgutil.js';
 
-function QuestButton(props) {
+export function QuestRewards(props) {
+	const quest = createMemo(() => {
+		let quest = props.quest;
+		if (!quest) return null;
+		while (quest.autonext) quest = quest.autonext;
+		return quest;
+	});
 	return (
 		<>
-			<span
-				style={{
-					position: 'absolute',
-					left: `${props.x}px`,
-					top: `${props.y}px`,
-					color: `#${
-						typeof props.area === 'string' && !props.user.quests[props.area] ?
-							'f'
-							: 'a'
-					}${props.sel ? 'ff' : 'aa'}`,
-				}}
-				onClick={props.onClick}>
-				{typeof props.area === 'string' ?
-					Quest.quarks[props.area].name
-					: props.area.name}
-			</span>
-			{Quest.extractRewards(Quest.quarks[props.area]) && !props.user.quests[props.area] && (
-				<span
-					style={{
-						position: 'absolute',
-						left: `${props.x + 200}px`,
-						top: `${props.y}px`,
-					}}>
-					{Quest.extractRewards(Quest.quarks[props.area])}
-					{Quest.extractRewards(Quest.quarks[props.area]) !== '+Card' && (
-						<span className="ico gold" />
+			{quest()?.choicerewards && (
+				<div style="position:absolute;left:750px;top:156px;display:flex;height:200px;flex-direction:column">
+					<div>Choice</div>
+					{Array.isArray(quest()?.choicerewards) && (
+						<Index each={quest()?.choicerewards}>
+							{(reward, i) => (
+								<CardImage
+									style={{ position: 'absolute', top: i * 20 + 'px' }}
+									card={Cards.Codes[reward()]}
+								/>
+							)}
+						</Index>
 					)}
-				</span>
+					{!Array.isArray(quest()?.choicerewards) && quest()?.choicerewards}
+				</div>
+			)}
+			{quest()?.cardreward && (
+				<div style="position:absolute;left:750px;top:156px;display:flex;height:200px;flex-direction:column">
+					<div>Cards</div>
+					<Index each={decodedeck(quest()?.cardreward)}>
+						{(code, i) => (
+							<CardImage
+								style={{ position: 'absolute', top: i * 20 + 'px' }}
+								card={Cards.Codes[code()]}
+							/>
+						)}
+					</Index>
+				</div>
+			)}
+			{quest()?.goldreward && (
+				<div style="position:absolute;left:750px;top:156px">
+					{quest()?.goldreward}
+					<span class="ico gold" />
+				</div>
 			)}
 		</>
 	);
 }
 
-export default function QuestView(props) {
+function QuestButton(props) {
+	return (
+		<span
+			style={{
+				position: 'absolute',
+				left: `${props.x}px`,
+				top: `${props.y}px`,
+				color: `#${
+					typeof props.area === 'string' && !props.quests[props.area] ?
+						'f'
+					:	'a'
+				}${props.sel ? 'ff' : 'aa'}`,
+			}}
+			onClick={props.onClick}>
+			{typeof props.area === 'string' ?
+				Quest.quarks[props.area].name
+			:	props.area.name}
+		</span>
+	);
+}
+
+export default function QuestView() {
 	const rx = store.useRx();
 	const questInfo = createMemo(() => {
 		const questAreas = [],
@@ -50,16 +87,18 @@ export default function QuestView(props) {
 			let y = 162;
 			for (let i = 0; i < qbag.children.length; i++) {
 				const area = qbag.children[i];
-				if (typeof area === 'string') {
-					const quark = Quest.quarks[area];
-					if (!Quest.requireQuest(quark, rx.user)) continue;
+				if (
+					typeof area === 'string' &&
+					!Quest.requireQuest(Quest.quarks[area], rx.user)
+				) {
+					continue;
 				}
 				questAreas.push(
 					<QuestButton
-						x={8 + qi * 177}
+						x={8 + qi * 180}
 						y={y}
 						area={area}
-						user={rx.user}
+						quests={rx.user.quests}
 						onClick={() => {
 							const newquest = quest.slice(0, qi);
 							newquest[qi] = i;
@@ -82,26 +121,27 @@ export default function QuestView(props) {
 		<>
 			<div
 				class="bgbox"
-				style="position:absolute;left:8px;top:8px;width:880px;height:108px"
-			/>
-			<ExitBtn x={750} y={120} />
-			<div style="position:absolute;left:26px;top:26px;max-width:850px">
+				style="position:absolute;left:8px;top:8px;width:880px;height:108px;padding-left:15px;padding-top:15px">
 				<Text
 					text={
 						questInfo().selectedQuest?.info ??
 						"Click list items to see quest lines, & FIGHT button to challenge them!\nNames in red are quests you haven't completed."
 					}
 				/>
 			</div>
+			<ExitBtn x={750} y={120} />
 			{questInfo().selectedQuest?.key && (
-				<input
-					type="button"
-					value="Fight!"
-					style="position:absolute;left:8px;top:120px"
-					onClick={() =>
-						store.navGame(Quest.mkQuestAi(questInfo().selectedQuest))
-					}
-				/>
+				<>
+					<input
+						type="button"
+						value="Fight!"
+						style="position:absolute;left:8px;top:120px"
+						onClick={() =>
+							store.navGame(Quest.mkQuestAi(questInfo().selectedQuest))
+						}
+					/>
+					<QuestRewards quest={Quest.quarks[questInfo().selectedQuest.key]} />
+				</>
 			)}
 			{questInfo().questAreas}
 		</>