added github issues to the home page instead of fixing them

5 files changed, 101 insertions, 29 deletions

diff --git a/components/issues.tsx b/components/issues.tsx
new file mode 100644
index 0000000..a9eaa8f
--- /dev/null
+++ b/components/issues.tsx
@@ -0,0 +1,42 @@
+import axios from 'axios';
+import { CSSProperties, useEffect, useState } from 'react';
+
+function IssueTag(props: { data: any; }) {
+	return <div
+		className='tag dispinbl'
+		style={{
+			'--color': '#' + props.data.color,
+		} as CSSProperties}
+	>
+		<span className='label'>{props.data.name}</span>
+	</div>;
+}
+
+function Issue(props: { data: any; }) {
+	return <a href={props.data.html_url} className='github-issue dispbl round-t pad-m bg-700'>
+		<h3 className='title dispinbl'>
+			<span className='number subtile'>#{props.data.number}</span>
+			{props.data.title}
+		</h3>
+		<div className='tags'>
+			{props.data.labels.map((label: any) => <IssueTag data={label} />)}
+		</div>
+	</a>;
+}
+
+export function IssueList() {
+	var [githubIssues, setGithubIssues] = useState<any[]>();
+
+	useEffect(() => {
+		(async () => {
+			var githubIssuesRequest = await axios.request({
+				url: 'https://api.github.com/repos/lonkaars/connect-4/issues?state=open',
+			});
+			setGithubIssues(githubIssuesRequest.data.filter((issue: any) => issue.milestone?.id == 6663987));
+		})();
+	}, []);
+
+	return <div className='github-issue-list'>
+		{githubIssues?.map(issue => <Issue data={issue} />)}
+	</div>;
+}
diff --git a/news/beta.md b/news/beta.md
index 2925fe8..9ee2e4b 100644
--- a/news/beta.md
+++ b/news/beta.md
@@ -2,37 +2,17 @@
 
 This project will from now on be hosted here as a beta until the website has
 enough features to 'go live'. There are a lot of known bugs that need fixing.
-If you encounter any bugs that aren't listed here, please open a <a
-href="https://github.com/lonkaars/connect-4/issues/new" target="_blank">new
-GitHub issue</a>.
+If you encounter any bugs that aren't listed in this list or on GitHub issues,
+please open a <a href="https://github.com/lonkaars/connect-4/issues/new"
+target="_blank">new issue</a>.
 
 - Voerbak's (connect 4 engine) win checking algorithm is broken, this causes
   some games to finish when no one has won. If this happens to you, please open
   a new issue on GitHub and link the game id (the `?id=...` part in your adress
   bar).
-- The settings page is empty. Non working settings are hidden, these include
-  settings for custom themes, changing your username, email and password, and
-  deleting your account.
 - The buttons and timer aren't implemented (except for the resign/leave game
   button) in the bottom bar when playing a game.
 - Editing the game rules isn't implemented.
-- There aren't any mobile stylesheets. I (Loek) am still working on the mobile
-  layouts in <a
-  href="https://www.figma.com/file/rTciVQApAe6cwrH1Prl5Wn/4-op-een-rij?node-id=7%3A452"
-  target="_blank">Figma</a>, when they're finished I'll start writing mobile
-  stylesheets.
-- The website's only in Dutch. I have no idea how to handle translations so the
-  website will remain mostly in Dutch while I worry about implementing missing
-  functionality.
-- Games don't work when not logged in. This is because the game is bound to two
-  user-id's instead of socket id's. This also means one user can't play two
-  games at the same time.
-- User presence and country don't fetch any data from the api on the `/user*`
-  pages.
-- The search feature is very janky. I'm currently still adding/removing columns
-  from the database pretty often, but there are plans to move the sqlite3
-  database to postgres, which has built in search functionality that doesn't
-  suck (I hope).
 
 I'm working as hard as I can on this website, but I have school exams coming up
 so I don't think development will be very active the coming month.
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 45e00ab..7c2e39a 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -6,6 +6,7 @@ import { ToastContextWrapper } from '../components/toast';
 import '../styles/disk.css';
 import '../styles/footer.css';
 import '../styles/global.css';
+import '../styles/issues.css';
 import '../styles/navbar.css';
 import '../styles/notifications.css';
 import '../styles/recentGames.css';
diff --git a/pages/index.tsx b/pages/index.tsx
index 87a7bc1..d6cc829 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,6 +5,7 @@ import { Footer } from '../components/footer';
 import { SocketContext } from '../components/socketContext';
 
 import { AccountAvatar } from '../components/account';
+import { IssueList } from '../components/issues';
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import RecentGames from '../components/recentGames';
@@ -125,17 +126,21 @@ export default function HomePage(props: {
 						: <LoginOrRegisterBox />}
 				</Vierkant>
 			</div>
-			<>
-				{loggedIn
-					&& <Vierkant className='w100m2m pad-l bg-800'>
-						<RecentGames games={gameInfo?.games} />
-					</Vierkant>}
-			</>
+			{loggedIn
+				&& <Vierkant className='w100m2m pad-l bg-800'>
+					<RecentGames games={gameInfo?.games} />
+				</Vierkant>}
+
 			<div>
 				{props.posts.map(post => {
 					return <RenderedArticle content={post.props.content} meta={post.props.meta} />;
 				})}
 			</div>
+
+			<Vierkant className='w100m2m pad-l bg-800'>
+				<h2>Github Issues</h2>
+				<IssueList />
+			</Vierkant>
 		</CenteredPage>
 		<Footer />
 	</div>;
diff --git a/styles/issues.css b/styles/issues.css
new file mode 100644
index 0000000..822dc16
--- /dev/null
+++ b/styles/issues.css
@@ -0,0 +1,44 @@
+.github-issue-list .github-issue {
+	margin-top: var(--spacing-medium);
+}
+
+.github-issue-list .github-issue .number {
+	margin-right: var(--spacing-small);
+}
+
+.github-issue-list .github-issue .tags .tag {
+	color: var(--color);
+
+	border-radius: 999999px;
+	box-shadow: inset 0 0 0 2px var(--color);
+
+	position: relative;
+	z-index: 1;
+
+	margin-right: var(--spacing-medium);
+	margin-top: var(--spacing-small);
+
+	padding: var(--spacing-small) var(--spacing-medium);
+}
+
+.github-issue-list .github-issue .tags .tag .label {
+	filter: brightness(0.2) saturate(.8);
+}
+
+body.dark .github-issue-list .github-issue .tags .tag .label {
+	filter: brightness(7) saturate(.5);
+}
+
+.tags .tag::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: -1;
+
+	border-radius: 999px;
+	background-color: var(--color);
+	opacity: .25;
+}