+
+
+
+
+ );
+}
diff --git a/frontend/cluesheet-web/src/components/NavBar.tsx b/frontend/cluesheet-web/src/components/NavBar.tsx
new file mode 100644
index 0000000..d2014a0
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/NavBar.tsx
@@ -0,0 +1,113 @@
+"use client";
+import React from "react";
+import {
+ Collapse,
+ Container,
+ Nav,
+ Navbar,
+ NavbarToggler,
+ NavItem,
+} from "reactstrap";
+import { NavLink } from "react-router-dom";
+import Profile from "./Profile";
+
+import UserInfo from "@/lib/UserInfo";
+import { SSOEnabled } from "@/lib/Configuration";
+import {
+ getUseOidcAccessToken,
+ NoSSOUserInfo,
+} from "@/lib/SSODisabledDefaults";
+
+const NavBar: React.FunctionComponent = () => {
+ const [isOpen, setIsOpen] = React.useStateWelcome to willard's world
+
+
+ {cluesheet.title}
+ {/* TODO: Make this display the total _possible_ points when viewing */} + { edit && ( +
+
+ )}
+ Points
+
+ {cluesheet.clues.length > 0 && (
+
+
+ );
+}
diff --git a/frontend/cluesheet-web/src/components/form/CluesheetForm/page.module.scss b/frontend/cluesheet-web/src/components/form/CluesheetForm/page.module.scss
new file mode 100644
index 0000000..7590007
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/form/CluesheetForm/page.module.scss
@@ -0,0 +1,14 @@
+.header {
+ display: flex;
+ justify-content: space-between;
+ padding: 2em;
+}
+
+.clueList {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ flex-grow: 1;
+
+ border-radius: 20px;
+}
diff --git a/frontend/cluesheet-web/src/components/viewer/ClueList/ClueList.tsx b/frontend/cluesheet-web/src/components/viewer/ClueList/ClueList.tsx
new file mode 100644
index 0000000..934edca
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/viewer/ClueList/ClueList.tsx
@@ -0,0 +1,46 @@
+"use client";
+import { Clue } from "@/lib/types";
+import styles from "./page.module.scss";
+import InputField from "../InputField/InputField";
+import { LineItem } from "../LineItem/LineItem";
+
+export function ClueItem() {}
+
+interface ClueListProps {
+ ancestors: Array-
+ {clues.map((clue: Clue, index) => (
+
-
+
+ {clue.children.length > 0 && ( + + )} +
+ ))}
+
+ {isStackable && edit && (
+ handleCheckboxChange(clue.id, e.target.value)}
+ />
+ )}
+ {!isStackable && edit && (
+ handleCheckboxChange(clue.id)}
+ />
+ )}
+
+ );
+}
diff --git a/frontend/cluesheet-web/src/components/viewer/LineItem/page.module.scss b/frontend/cluesheet-web/src/components/viewer/LineItem/page.module.scss
new file mode 100644
index 0000000..9cd4f86
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/viewer/LineItem/page.module.scss
@@ -0,0 +1,40 @@
+.clueBody {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ margin: 10px;
+
+ border: 1px solid #ccc; /* Optional border */
+ padding: 10px; /* Optional padding */
+ border-radius: 8px; /* Optional rounded corners */
+}
+
+.lineItem {
+ display: flex;
+ flex-direction: row;
+}
+
+.points {
+ padding: 0 5px;
+ font-size: 1.5em;
+ font-weight: 700;
+}
+
+.description {
+ font-size: 1.5em;
+ font-weight: 400;
+}
+
+.tags {
+ display: flex;
+ flex: 1;
+ flex-direction: row;
+ justify-content: right;
+}
+
+.tag {
+ border: 1px solid #ccc; /* Border color */
+ border-radius: 5px;
+ padding: 0 2px;
+ margin: 0 5px;
+}
diff --git a/frontend/cluesheet-web/src/components/viewer/counter/PointCounter.tsx b/frontend/cluesheet-web/src/components/viewer/counter/PointCounter.tsx
new file mode 100644
index 0000000..364a66d
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/viewer/counter/PointCounter.tsx
@@ -0,0 +1,24 @@
+"use client";
+import FlipNumbers from "react-flip-numbers";
+import styles from "./page.module.scss";
+
+interface PointCounterProps {
+ points: number;
+}
+
+export default function PointCounter({ points }: PointCounterProps) {
+ return (
+
+ {clue.points} {clue.rule && `(${clue.rule.key})`}
+
+ {clue.description}
+
+ {clue.tags
+ .filter((tag) => !ancestorTags.includes(tag))
+ .map((tag: string, index) => (
+
+ + {tag} +
+ ))} +
+
+ );
+}
diff --git a/frontend/cluesheet-web/src/components/viewer/counter/page.module.scss b/frontend/cluesheet-web/src/components/viewer/counter/page.module.scss
new file mode 100644
index 0000000..3d4116a
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/viewer/counter/page.module.scss
@@ -0,0 +1,16 @@
+@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+.flipNumbers {
+ background-color: black;
+ border-width: 1px;
+ border-style: solid;
+ border-radius: 5px;
+}
+
+.number {
+ background-color: white;
+ margin: 1px;
+ border-radius: 5px;
+ font-family: "Courier Prime", monospace;
+ font-weight: 400;
+ font-style: normal;
+}
diff --git a/frontend/cluesheet-web/src/lib/Configuration.ts b/frontend/cluesheet-web/src/lib/Configuration.ts
new file mode 100644
index 0000000..8944939
--- /dev/null
+++ b/frontend/cluesheet-web/src/lib/Configuration.ts
@@ -0,0 +1,27 @@
+import { OidcConfiguration } from "@axa-fr/react-oidc";
+
+// FIXME: React is bitching about this
+/*
+const oidcConfig: OidcConfiguration = {
+ client_id: process.env.NEXT_PUBLIC_SSO_CLIENT_ID ?? "test",
+ redirect_uri: `${window.location.protocol}//${window.location.hostname}${
+ window.location.port ? `:${window.location.port}` : ""
+ }/authentication/callback`,
+ scope: "openid profile email offline_access",
+ authority: process.env.NEXT_PUBLIC_SSO_AUTHORITY ?? "",
+ silent_redirect_uri: `${window.location.protocol}//${
+ window.location.hostname
+ }${
+ window.location.port ? `:${window.location.port}` : ""
+ }/authentication/silent_callback`,
+ service_worker_only: false,
+ refresh_time_before_tokens_expiration_in_second: 10,
+};
+*/
+
+export const apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX;
+
+export const SSOEnabled = false;
+// (import.meta.env.VITE_SSO_ENABLED ?? "true") === "true";
+
+//export default oidcConfig;
diff --git a/frontend/cluesheet-web/src/lib/SSODisabledDefaults.ts b/frontend/cluesheet-web/src/lib/SSODisabledDefaults.ts
new file mode 100644
index 0000000..81d9c55
--- /dev/null
+++ b/frontend/cluesheet-web/src/lib/SSODisabledDefaults.ts
@@ -0,0 +1,57 @@
+// if your app requires SSO you can delete this page
+import UserInfo from "./UserInfo";
+import { useOidc, useOidcAccessToken } from "@axa-fr/react-oidc";
+import { SSOEnabled } from "./Configuration";
+
+export const useOidcNoSSO = () => {
+ return {
+ login: () => alert("SSO Disabled, you can change this in configuration.ts"),
+ logout: () =>
+ alert("SSO Disabled, you can change this in configuration.ts"),
+ isAuthenticated: false,
+ };
+};
+
+export const useOidcAccessTokenNoSSO = () => {
+ return { accessTokenPayload: "" };
+};
+
+export const NoSSOUserInfo: UserInfo = {
+ exp: 0,
+ auth_time: 0,
+ jti: "",
+ iss: "",
+ aud: "",
+ sub: "",
+ typ: "",
+ azp: "",
+ nonce: "",
+ session_state: "",
+ acr: "",
+ allowed_origins: [],
+ realm_access: {
+ roles: [],
+ },
+ resource_access: {},
+ scope: "",
+ sid: "",
+ email_verified: false,
+ name: "Foo Bar",
+ groups: [],
+ preferred_username: "foolish",
+ given_name: "Foo",
+ family_name: "Bar",
+ email: "baz@csh.rit.edu",
+ uuid: "",
+};
+
+export const NoSSOProfilePicture =
+ "https://cdn.discordapp.com/attachments/719366780606480384/1035722437049982986/csh.png";
+
+export const getUseOidcHook = () => {
+ return SSOEnabled ? useOidc : useOidcNoSSO;
+};
+
+export const getUseOidcAccessToken = () => {
+ return SSOEnabled ? useOidcAccessToken : useOidcAccessTokenNoSSO;
+};
diff --git a/frontend/cluesheet-web/src/lib/UserInfo.ts b/frontend/cluesheet-web/src/lib/UserInfo.ts
new file mode 100644
index 0000000..f228ebf
--- /dev/null
+++ b/frontend/cluesheet-web/src/lib/UserInfo.ts
@@ -0,0 +1,28 @@
+interface UserInfo {
+ exp: number;
+ auth_time: number;
+ jti: string;
+ iss: string;
+ aud: string;
+ sub: string;
+ typ: string;
+ azp: string;
+ nonce: string;
+ session_state: string;
+ acr: string;
+ allowed_origins: string[];
+ realm_access: { roles: string[] };
+ resource_access: { [key: string]: { roles: string[] } };
+ scope: string;
+ sid: string;
+ email_verified: boolean;
+ name: string;
+ groups: string[];
+ preferred_username: string;
+ given_name: string;
+ family_name: string;
+ email: string;
+ uuid: string;
+}
+
+export default UserInfo;
diff --git a/frontend/cluesheet-web/src/lib/endpoint.ts b/frontend/cluesheet-web/src/lib/endpoint.ts
new file mode 100644
index 0000000..74633e3
--- /dev/null
+++ b/frontend/cluesheet-web/src/lib/endpoint.ts
@@ -0,0 +1,2 @@
+export const cluesheetBackendEndpoint =
+ process.env.NEXT_PUBLIC_CLUESHEET_BACKEND_ENDPOINT ?? "";
diff --git a/frontend/cluesheet-web/src/lib/types.ts b/frontend/cluesheet-web/src/lib/types.ts
new file mode 100644
index 0000000..1fc4ef4
--- /dev/null
+++ b/frontend/cluesheet-web/src/lib/types.ts
@@ -0,0 +1,14 @@
+export interface Clue {
+ id: string;
+ completions: number; // Number of times this has been completed
+ description: string;
+ points: string;
+ rule: Rule | null;
+ tags: Array