Add BaseCard and Header

consistency

responsive header

update header

remove chatgpt comments

finish up header and fix up other components

lint and delete basecard (will be merged in future pr)

Add BaseCard and Header

Base Card/text components and veiws

make header/sidebar fixed, create documentationpage for quickstart/resources

frontend2/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.45.1",
     "react-router-dom": "^6.13.0",
+    "react-markdown": "^8.0.7",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend2/src/App.tsx

@@ -20,6 +20,7 @@ import NotFound from "./views/NotFound";
 import Rankings from "./views/Rankings";
 import { CurrentUserProvider } from "./components/CurrentUserProvider";
 import PrivateRoute from "./components/PrivateRoute";
+import Resources from "./views/Resources";
 
 const App: React.FC = () => {
   const [episodeId, setEpisodeId] = useState(DEFAULT_EPISODE);
@@ -57,7 +58,9 @@ const router = createBrowserRouter([
     element: <EpisodeLayout />,
     children: [
       // Pages that should always be visible
-      // TODO: /:episodeId/resources, /:episodeId/tournaments, /:episodeId/queue
+      // TODO: /:episodeId/tournaments, /:episodeId/queue
+      { path: "/:episodeId/resources", element: <Resources /> },
+      { path: "/:episodeId/quickstart", element: <QuickStart /> },
       { path: "/:episodeId/home", element: <Home /> },
       {
         path: "/:episodeId/",

frontend2/src/components/BaseCard.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface BaseCardProps {
+  GameImage: string;
+  GameName: string;
+  GameDescr: string;
+  GameYear: number;
+}
+
+const YearCard: React.FC<BaseCardProps> = ({ GameImage, GameName, GameDescr, GameYear }) => {
+  const redirect = (): void => {
+    console.log(GameYear.toString()); // Redirect to year page
+  };
+
+  return (
+    <div className="max-w-sm rounded overflow-hidden shadow-md transition duration-300 ease-in-out transform hover:shadow-lg hover:cursor-pointer" onClick={redirect}>
+      <div className="aspect-w-4 aspect-h-3">
+        <img className="object-cover" src={require(`../${GameImage}`)} alt={GameName} />
+      </div>
+      <div className="px-6 py-4">
+        <div className="font-bold text-xl mb-2">{GameName}</div>
+        <p className="text-gray-700 text-base">{GameDescr}</p>
+      </div>
+    </div>
+  );
+};
+
+export default YearCard;

frontend2/src/components/DocumentationPage.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import { Link } from "react-router-dom";
+
+const isInternalLink = (to: string): boolean => {
+  const url = new URL(to, window.location.origin);
+  console.log(url, window.location.hostname);
+  return url.hostname === window.location.hostname;
+};
+
+interface DocumentationPageProps {
+  text: string;
+}
+
+const DocumentationPage: React.FC<DocumentationPageProps> = ({ text }) => {
+  return (
+    <div className="h-full w-full overflow-auto bg-white p-6">
+      <ReactMarkdown
+        components={{
+          a: ({ href, ...props }) => {
+            const target = href ?? "";
+            if (isInternalLink(target)) {
+              return (
+                <Link
+                  className="text-cyan-600 hover:underline"
+                  to={target}
+                  {...props}
+                />
+              );
+            } else {
+              return (
+                <a
+                  className="text-cyan-600 hover:underline"
+                  href={target}
+                  {...props}
+                />
+              );
+            }
+          },
+        }}
+      >
+        {text}
+      </ReactMarkdown>
+    </div>
+  );
+};
+
+export default DocumentationPage;

frontend2/src/components/EpisodeLayout.tsx

@@ -13,10 +13,10 @@ const EpisodeLayout: React.FC = () => {
     episodeContext.setEpisodeId(episodeId);
   }
   return (
-    <div className="h-screen">
+    <div className="h-screen overflow-auto">
       <Header />
-      <div className="flex h-full flex-row">
-        <Sidebar />
+      <Sidebar />
+      <div className="fixed right-0 h-full pt-16 sm:left-52">
         <Outlet />
       </div>
     </div>

frontend2/src/components/Header.tsx

@@ -11,7 +11,7 @@ const Header: React.FC = () => {
   const { episodeId } = useContext(EpisodeContext);
 
   return (
-    <nav className="bg-gray-700">
+    <nav className="fixed top-0 h-16 w-full bg-gray-700">
       <div className="w-full px-2 sm:px-6 lg:px-8">
         <div className="relative flex h-16 items-center justify-between">
           {/* mobile menu */}

frontend2/src/components/sidebar/SidebarSection.tsx

@@ -9,9 +9,9 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({ children, title }) => {
   return (
     <div className="px-4">
       {title !== undefined && (
-        <h2 className="mx-auto mb-2 font-light uppercase text-gray-500">
+        <div className="mx-auto mb-2 font-light uppercase text-gray-500">
           {title}
-        </h2>
+        </div>
       )}
       <div className="flex flex-col gap-1">{children}</div>
     </div>

frontend2/src/components/sidebar/index.tsx

@@ -92,7 +92,7 @@ const Sidebar: React.FC<SidebarProps> = ({ collapsed }) => {
   const { episodeId } = useContext(EpisodeContext);
 
   return collapsed ? null : (
-    <nav className="hidden h-full flex-col gap-8 bg-gray-50 py-4 shadow-sm shadow-gray-200 sm:flex">
+    <nav className="z-10 hidden fixed w-52 top-16 h-full flex-col gap-8 bg-gray-50 py-4 drop-shadow-[2px_0_2px_rgba(0,0,0,0.25)] sm:flex">
       <SidebarSection title="">
         {generateSidebarItems(0, 2, episodeId)}
       </SidebarSection>

frontend2/src/content/bc23.ts

@@ -0,0 +1,96 @@
+
+export const BC23_QUICKSTART =
+`This is the Battlecode 2023 contest website, which will be your main hub for all Battlecode-related things for the duration of the contest. For a general overview of what Battlecode is, visit [our landing page](https://battlecode.org/).
+
+## Create an account and team
+
+To participate in Battlecode, you need an account and a team. Each team can consist of 1 to 4 people.
+
+[Create an account](/register) on this website, and then go to the [team section](/bc23/team) to either create or join a team.
+
+## Installation
+
+### Step 1: Install Java
+
+You'll need a Java Development Kit (JDK) version 8. Unfortunately, higher versions will not work. [Download it here](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html). You may need to create an Oracle account.
+
+- Alternatively, you can install a JDK yourself using your favorite package manager. Make sure it's an Oracle JDK — we don't support anything else — and is compatible with Java 8.
+
+If you're unsure how to install the JDK, you can find instructions for all operating systems [here](https://docs.oracle.com/javase/8/docs/technotes/guides/install/install_overview.html) (pay attention to \`PATH\` and \`CLASSPATH\`).
+
+### Step 2: Download Battlecode
+
+Next, you should download the [Battlecode 2023 scaffold](https://github.com/battlecode/battlecode23-scaffold). To get up and running quickly, you can click "Clone or download" and then "Download ZIP," and move on to the next step.
+
+# Troubleshooting
+`;
+
+export const BC23_RESOURCES =
+`# Markdown syntax guide
+
+## Headers
+
+# This is a Heading h1
+## This is a Heading h2
+###### This is a Heading h6
+
+## Emphasis
+
+*This text will be italic*
+_This will also be italic_
+
+**This text will be bold**
+__This will also be bold__
+
+_You **can** combine them_
+
+## Lists
+
+### Unordered
+
+* Item 1
+* Item 2
+* Item 2a
+* Item 2b
+
+### Ordered
+
+1. Item 1
+1. Item 2
+1. Item 3
+  1. Item 3a
+  1. Item 3b
+
+## Images
+
+![This is an alt text.](/image/sample.png "This is a sample image.")
+
+## Links
+
+You may be using [Markdown Live Preview](https://markdownlivepreview.com/).
+
+## Blockquotes
+
+> Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.
+>
+>> Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
+
+## Tables
+
+| Left columns  | Right columns |
+| ------------- |:-------------:|
+| left foo      | right foo     |
+| left bar      | right bar     |
+| left baz      | right baz     |
+
+## Blocks of code
+
+\`\`\`
+let message = 'Hello world';
+alert(message);
+\`\`\`
+
+## Inline code
+
+This web site is using \`markedjs/marked\`.
+`;

frontend2/src/index.css

@@ -1,4 +1,37 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Josefin+Sans:wght@100;300;400;500;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Josefin+Sans:wght@100;300;400;500;700&display=swap");
+
+@layer base {
+  h1 {
+    @apply pb-4 text-2xl font-medium text-gray-900;
+  }
+  h2 {
+    @apply pb-4 pt-6 text-2xl font-medium text-gray-900;
+  }
+  h3 {
+    @apply pb-4 text-xl font-medium text-gray-900;
+  }
+  h4 {
+    @apply pb-4 text-lg font-medium text-gray-700;
+  }
+  p {
+    @apply pb-4 text-gray-900;
+  }
+  code {
+    @apply rounded bg-gray-100 px-1 py-0.5 text-sm text-cyan-900;
+  }
+  pre code {
+    @apply p-0;
+  }
+  pre {
+    @apply bg-gray-100 px-4 py-3 rounded;
+  }
+  ul {
+    @apply ml-6 list-outside list-disc pb-4;
+  }
+  ol {
+    @apply ml-6 list-outside list-decimal pb-4;
+  }
+}

frontend2/src/views/Login.tsx

@@ -53,13 +53,13 @@ const Login: React.FC = () => {
         onSubmit={handleSubmit(onSubmit)}
         className="flex w-11/12 flex-col gap-5 rounded-lg bg-gray-100 p-6 shadow-md sm:w-[350px]"
       >
-        <h3 className="text-center text-xl font-light text-gray-700">
+        <div className="text-center text-xl font-light text-gray-700">
           Log in to Battlecode
-        </h3>
+        </div>
         {
           // TODO: replace this with our custom notification component
           loginError !== undefined && (
-            <p className="text-center text-sm text-red-600">{loginError}</p>
+            <div className="text-center text-sm text-red-600">{loginError}</div>
           )
         }
         <Input
@@ -91,7 +91,7 @@ const Login: React.FC = () => {
         </div>
       </form>
       <div className="w-11/12 flex-1">
-        <div className="text-light mt-4 w-full rounded-lg bg-white p-6  text-center text-sm shadow-md sm:w-[350px]">
+        <div className="text-light mx-auto mt-4 w-full rounded-lg bg-white p-6 text-center text-sm shadow-md sm:w-[350px]">
           Need an account?{" "}
           <Link className="text-cyan-600" to="/register">
             Register for one!

frontend2/src/views/QuickStart.tsx

@@ -1,7 +1,10 @@
 import React from "react";
+import DocumentationPage from "../components/DocumentationPage";
+import { BC23_QUICKSTART } from "../content/bc23";
 
 const QuickStart: React.FC = () => {
-  return <p>quickstart page</p>;
+  return <DocumentationPage text={BC23_QUICKSTART} />;
 };
 
 export default QuickStart;
+// todo this file

frontend2/src/views/Rankings.tsx

@@ -64,7 +64,7 @@ const Rankings: React.FC = () => {
   }, [searchQuery, page]);
 
   return (
-    <div className="mb-20 ml-10 flex w-full flex-col">
+    <div className="flex h-full w-full flex-col overflow-auto p-6">
       <h1 className="mb-5 text-3xl font-bold leading-7 text-gray-900">
         Rankings
       </h1>

frontend2/src/views/Register.tsx

@@ -54,9 +54,9 @@ const Register: React.FC = () => {
   };
   return (
     <div className="flex h-screen flex-col items-center justify-center bg-gradient-to-tr from-cyan-200 to-cyan-700 p-2">
-      <h2 className="flex flex-1 items-end text-center font-display text-5xl tracking-wide text-white sm:text-6xl">
+      <div className="flex flex-1 items-end text-center font-display text-5xl tracking-wide text-white sm:text-6xl">
         BATTLECODE
-      </h2>
+      </div>
       {/* https://github.com/orgs/react-hook-form/discussions/8622 */}
       <form
         /* eslint-disable-next-line @typescript-eslint/no-misused-promises */
@@ -75,7 +75,7 @@ const Register: React.FC = () => {
         {
           // TODO: replace this with our custom notification component
           formError !== undefined && (
-            <p className="text-center text-sm text-red-600">{formError}</p>
+            <div className="text-center text-sm text-red-600">{formError}</div>
           )
         }
         <Input

frontend2/src/views/Resources.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { BC23_RESOURCES } from "../content/bc23";
+import DocumentationPage from "../components/DocumentationPage";
+
+const Resources = (): JSX.Element => {
+  return <DocumentationPage text={BC23_RESOURCES} />;
+};
+
+export default Resources;