Warped monsters, Zombie pirates, CL items, wiki improvements (oldscho…

…olgg#6248)
nwjgit · Dec 5, 2024 · 92b3b66 · 92b3b66
1 parent d75e3fd
commit 92b3b66
Show file tree

Hide file tree

Showing 43 changed files with 5,995 additions and 210 deletions.
diff --git a/biome.json b/biome.json
@@ -25,7 +25,8 @@
 			"**/*.md",
 			"**/*.mjs",
 			"**/*.cjs",
-			"**/*.tsx"
+			"**/*.tsx",
+			"**/*.astro"
 		]
 	},
 	"vcs": {

diff --git a/data/authors.json b/data/authors.json
@@ -0,0 +1,28 @@
+{
+	"bso/Monsters/Raids/chambers-of-xeric.md": ["wontonstrips", "Magnaboy"],
+	"bso/Monsters/Raids/README.md": ["wontonstrips", "Magnaboy"],
+	"bso/Monsters/Raids/theatre-of-blood-tob.md": ["wontonstrips", "Magnaboy"],
+	"bso/Monsters/Raids/tombs-of-amascut-toa.md": ["wontonstrips", "Magnaboy"],
+	"getting-started/wiki.md": ["Magnaboy", "dark", "Jonesey"],
+	"index.mdx": ["luna", "Magnaboy"],
+	"osb/Activities/aerial-fishing.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/brimhaven-agility-arena.md": ["Magnaboy", "Justas"],
+	"osb/Activities/fountain-of-rune.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/guardians-of-the-rift.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/hallowed-sepulchre.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/mage-training-arena.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/mahogany-homes.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/motherlode-mine.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/shooting-stars.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/volcanic-mine.md": ["wontonstrips", "Magnaboy"],
+	"osb/Activities/wintertodt.md": ["wontonstrips", "Magnaboy"],
+	"osb/Bosses/the-nightmare.md": ["DayV"],
+	"osb/combat-achievements.mdx": ["Magnaboy", "DayV", "Jonesey", "Keres"],
+	"osb/Miscelleanous/charging-items.md": ["wontonstrips", "Magnaboy"],
+	"osb/Miscelleanous/minion-icons.md": ["wontonstrips"],
+	"osb/monsters.mdx": ["Magnaboy", "Keres"],
+	"osb/quests.mdx": ["Magnaboy", "Keres"],
+	"osb/Raids/toa.mdx": ["wontonstrips", "gamrbing", "Magnaboy"],
+	"osb/Raids/tob.mdx": ["wontonstrips", "Magnaboy"],
+	"osb/Skills/mining.md": ["Magnaboy", "dark", "lajnux"]
+}
diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
@@ -27,7 +27,8 @@ export default defineConfig({
 	integrations: [
 		starlight({
 			components: {
-				Footer: './src/components/Footer.astro'
+				Footer: './src/components/Footer.astro',
+				Header: './src/components/Header.astro'
 			},
 			title: 'Oldschool.gg Wiki',
 			favicon: 'favicon.ico',

diff --git a/docs/package.json b/docs/package.json
@@ -16,7 +16,6 @@
 		"@astrojs/tailwind": "^5.1.2",
 		"astro": "^4.16.1",
 		"collapse-white-space": "^2.1.0",
-		"docs": "link:",
 		"markdown-it": "^14.1.0",
 		"oldschooljs": "workspace:*",
 		"preact": "^10.25.0",

diff --git a/docs/src/components/Footer.astro b/docs/src/components/Footer.astro
@@ -1,31 +1,24 @@
 ---
-import { getAuthors } from "../plugins/authors";
-const authors = (await getAuthors(`src/content/docs/${Astro.props.id}`));
+import authorsJson from '@data/authors.json';
+import { Fragment } from 'preact';
+const authors = authorsJson[Astro.props.id] || [];
 const editURL = Astro.props.editUrl?.toString();
 ---
 
 <footer class="sl-flex">
-	{authors.length > 0 && <div class="credits-list">Editors: {authors.map(name => <div class="credit">{name}</div>)}</div>}
 	{editURL && <a href={editURL} target="_blank" rel="noopener noreferrer" class="edit_this_page">Edit this page</a>}
+	{editURL && authors.length > 0 && " / "}
+	{authors.length > 0 && <div class="credits-list">Page edited by {authors.join(", ")}</div>}
 </footer>
 
 <style>
 	footer {
-		flex-direction: column;
-		gap: 1.5rem;
+		gap: .5rem;
+		font-size: 12px;
 	}
 	.credits-list {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0.5rem;
 	}
-	.credit {
-		background-color: rgb(243, 156, 105);
-		width: max-content;
-		border-radius: 8px;
-		color: rgb(61, 40, 16);
-		font-weight: bold;
-		padding: 1px 9px;
-		font-size: 12px;
-	}
 </style>
diff --git a/docs/src/components/Header.astro b/docs/src/components/Header.astro
@@ -0,0 +1,85 @@
+---
+import LanguageSelect from 'virtual:starlight/components/LanguageSelect';
+import Search from 'virtual:starlight/components/Search';
+import SiteTitle from 'virtual:starlight/components/SiteTitle';
+import SocialIcons from 'virtual:starlight/components/SocialIcons';
+import config from 'virtual:starlight/user-config';
+import { PreactThemeSelect } from './PreactThemeSelect';
+
+/**
+ * Render the `Search` component if Pagefind is enabled or the default search component has been overridden.
+ */
+const shouldRenderSearch = config.pagefind || config.components.Search !== '@astrojs/starlight/components/Search.astro';
+---
+
+<div class="header sl-flex">
+	<div class="title-wrapper sl-flex">
+		<SiteTitle {...Astro.props} />
+	</div>
+	<div class="sl-flex">
+		{shouldRenderSearch && <Search {...Astro.props} />}
+	</div>
+	<div class="sl-hidden md:sl-flex right-group">
+		<div class="sl-flex social-icons">
+			<SocialIcons {...Astro.props} />
+		</div>
+        <PreactThemeSelect client:load  />
+		<LanguageSelect {...Astro.props} />
+	</div>
+</div>
+
+<style>
+	.header {
+		gap: var(--sl-nav-gap);
+		justify-content: space-between;
+		align-items: center;
+		height: 100%;
+	}
+
+	.title-wrapper {
+		/* Prevent long titles overflowing and covering the search and menu buttons on narrow viewports. */
+		overflow: hidden;
+	}
+
+	.right-group,
+	.social-icons {
+		gap: 1rem;
+		align-items: center;
+	}
+	.social-icons::after {
+		content: '';
+		height: 2rem;
+		border-inline-end: 1px solid var(--sl-color-gray-5);
+	}
+
+	@media (min-width: 50rem) {
+		:global(:root[data-has-sidebar]) {
+			--__sidebar-pad: calc(2 * var(--sl-nav-pad-x));
+		}
+		:global(:root:not([data-has-toc])) {
+			--__toc-width: 0rem;
+		}
+		.header {
+			--__sidebar-width: max(0rem, var(--sl-content-inline-start, 0rem) - var(--sl-nav-pad-x));
+			--__main-column-fr: calc(
+				(
+						100% + var(--__sidebar-pad, 0rem) - var(--__toc-width, var(--sl-sidebar-width)) -
+							(2 * var(--__toc-width, var(--sl-nav-pad-x))) - var(--sl-content-inline-start, 0rem) -
+							var(--sl-content-width)
+					) / 2
+			);
+			display: grid;
+			grid-template-columns:
+        /* 1 (site title): runs up until the main content column’s left edge or the width of the title, whichever is the largest  */
+				minmax(
+					calc(var(--__sidebar-width) + max(0rem, var(--__main-column-fr) - var(--sl-nav-gap))),
+					auto
+				)
+				/* 2 (search box): all free space that is available. */
+				1fr
+				/* 3 (right items): use the space that these need. */
+				auto;
+			align-content: center;
+		}
+	}
+</style>
diff --git a/docs/src/components/Leagues.tsx b/docs/src/components/Leagues.tsx
@@ -11,66 +11,121 @@ function toTitleCase(str: string) {
 
 const tiers = Object.keys(combatAchievements).map(t => t.toLowerCase());
 const allTasksFlat = Object.values(combatAchievements).flatMap((tier: any) =>
-	tier.tasks.map(t => ({ ...t, tier: tier.name.toLowerCase() }))
+	tier.tasks.map((t: any) => ({ ...t, tier: tier.name.toLowerCase() }))
 );
+
+export type APIUser = {
+	id: string;
+	completed_ca_task_ids: number[];
+	is_ironman: boolean;
+	leagues_completed_tasks_ids: number[];
+};
+
 export function Leagues() {
 	const [tiersBeingShown, setTiersBeingShown] = useState(tiers);
 	const [tasksBeingShown, setTasksBeingShown] = useState(allTasksFlat);
+	const [hideCompleted, setHideCompleted] = useState(false);
 	const [userID, setUserID] = useState<string | null>(null);
-	// const [data, setData] = useState();
+	const [data, setData] = useState<APIUser | null>(null);
+	const [isLoading, setIsLoading] = useState(false);
 
-	// console.log({data});
-	// useEffect(() => {
-	// 	fetch('https://api.oldschool.gg/')
-	// 		.then(response => response.json())
-	// 		.then(data => setData(data));
-	// }, []);
+	useEffect(() => {
+		setTasksBeingShown(
+			allTasksFlat.filter(task => {
+				if (hideCompleted && data?.completed_ca_task_ids.includes(task.id)) return false;
+				return tiersBeingShown.includes(task.tier);
+			})
+		);
+	}, [tiersBeingShown, data, hideCompleted]);
 
 	useEffect(() => {
-		setTasksBeingShown(allTasksFlat.filter(task => tiersBeingShown.includes(task.tier)));
-	}, [tiersBeingShown]);
+		if (localStorage) {
+			const storedUserID = localStorage.getItem('userID');
+			if (storedUserID) setUserID(storedUserID);
+
+			const storedData = localStorage.getItem(`minion.${storedUserID}`);
+			if (storedData) setData(JSON.parse(storedData));
+		}
+	}, []);
 
 	return (
 		<>
 			<div className="mt-3">
-				{/* <div className="flex flex-col">
-					<label for="user" className="text-lg font-bold">
-						User ID
+				<div className="flex flex-col">
+					<label for="user" className="font-bold">
+						Discord User ID
 					</label>
-					<div>
+					<div className="no_margin">
 						<input
 							id="user"
 							name="user"
 							value={userID ?? ''}
 							onInput={e => setUserID(e.currentTarget.value)}
-							className="w-52"
+							className="w-52 input"
 						/>
-						<button type="submit" disabled={!userID}>
+						<button
+							className="button"
+							type="submit"
+							disabled={isLoading || !userID}
+							onClick={() => {
+								setIsLoading(true);
+								localStorage.setItem('userID', userID!);
+								fetch(`https://api.oldschool.gg/minion/${userID}`)
+									.then(response => response.json())
+									.then(data => {
+										setData(data);
+										if (localStorage) {
+											localStorage.setItem(`minion.${userID}`, JSON.stringify(data));
+										}
+									})
+									.finally(() => setIsLoading(false));
+							}}
+						>
 							Look Up
 						</button>
 					</div>
-				</div> */}
+				</div>
 				<fieldset>
 					<legend className="text-2xl font-bold"> Filters</legend>
-					{tiers.map(t => (
-						<div key={t} class="p-1 no_margin w-max">
-							<input
-								type="checkbox"
-								id={t}
-								name={t}
-								checked={tiersBeingShown.includes(t)}
-								onChange={() => {
-									tiersBeingShown.includes(t)
-										? setTiersBeingShown(tiersBeingShown.filter(i => i !== t))
-										: setTiersBeingShown([...tiersBeingShown, t]);
-								}}
-							/>
-							<label className="ml-2" for={t}>
-								{toTitleCase(t)}
-							</label>
-						</div>
-					))}
+					<div className="flex flex-row flex-wrap gap-4">
+						{tiers.map(t => (
+							<div key={t} class="p-1 no_margin w-max">
+								<input
+									type="checkbox"
+									id={t}
+									name={t}
+									checked={tiersBeingShown.includes(t)}
+									onChange={() => {
+										tiersBeingShown.includes(t)
+											? setTiersBeingShown(tiersBeingShown.filter(i => i !== t))
+											: setTiersBeingShown([...tiersBeingShown, t]);
+									}}
+								/>
+								<label className="ml-2" for={t}>
+									{toTitleCase(t)}
+								</label>
+							</div>
+						))}
+					</div>
+					<div class="p-1 no_margin w-max">
+						<input
+							id="hide_completed"
+							type="checkbox"
+							name="Hide Completed"
+							checked={hideCompleted}
+							onChange={() => setHideCompleted(!hideCompleted)}
+						/>
+						<label className="ml-2" for="hide_completed	">
+							Hide Completed Tasks
+						</label>
+					</div>
 				</fieldset>
+				{data ? (
+					<p>
+						Showing {tasksBeingShown.length}/{allTasksFlat.length} tasks{' / '}
+						Completed {data.completed_ca_task_ids.length}/{allTasksFlat.length} tasks
+					</p>
+				) : null}
 				<table>
 					<thead>
 						<tr>
@@ -81,7 +136,14 @@ export function Leagues() {
 					</thead>
 					<tbody>
 						{tasksBeingShown.map(task => (
-							<tr key={task.id}>
+							<tr
+								key={task.id}
+								className={
+									data?.completed_ca_task_ids.includes(task.id)
+										? 'bg-green-500 bg-opacity-20'
+										: undefined
+								}
+							>
 								<td>{task.name}</td>
 								<td>{task.desc}</td>
 								<td>{toTitleCase(task.tier)}</td>