+
+ {cluesheet.title}
+
+ {cluesheet.clues.length > 0 &&
+ cluesheet.clues.map((clue: Clue, index) => (
+
+
+
+
+
+ );
+}
diff --git a/frontend/cluesheet-web/src/components/viewer/cluegroup/page.module.scss b/frontend/cluesheet-web/src/components/viewer/cluegroup/page.module.scss
new file mode 100644
index 0000000..f90f1e5
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/viewer/cluegroup/page.module.scss
@@ -0,0 +1,18 @@
+.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 */
+}
+
+.locked {
+ background-color: #ff5555;
+}
+
+.children {
+ margin-left: 20px;
+}
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.children.length > 0 &&
+ clue.children.map((child: Clue, index) => (
+
+ ))}
+
+
+
+ );
+}
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/components/viewer/lineitem/LineItem.tsx b/frontend/cluesheet-web/src/components/viewer/lineitem/LineItem.tsx
new file mode 100644
index 0000000..81e5cb9
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/viewer/lineitem/LineItem.tsx
@@ -0,0 +1,59 @@
+import { Clue, UserClue } from "@/lib/types";
+
+import styles from "./page.module.scss";
+import { useState } from "react";
+interface LineItemProps {
+ parent: Clue | UserClue | null;
+ clue: Clue | UserClue;
+}
+
+export default function LineItem({ parent, clue }: LineItemProps) {
+ // Initialize state to track if the checkbox is checked
+ const [isChecked, setIsChecked] = useState(
+ (clue as UserClue).completions !== undefined &&
+ Number((clue as UserClue).completions) > 0,
+ );
+
+ // Handle checkbox change
+ const handleClueChecked = () => {
+ setIsChecked((prevChecked) => !prevChecked);
+ (clue as UserClue).completions = 1;
+ // You can also perform any additional logic here, like updating the clue state
+ };
+
+ const shouldLock = (parent !== null && (parent as UserClue).completions <= 0);
+
+ let tags = [];
+ if (parent != null) {
+ tags = clue.tags.filter(item => !parent.tags.includes(item));
+ } else {
+ tags = clue.tags;
+ }
+
+ return (
+ <>
+
+ {(clue as UserClue).completions !== undefined && (
+
+ )}
+
+
+ );
+}
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..0caa775
--- /dev/null
+++ b/frontend/cluesheet-web/src/components/viewer/lineitem/page.module.scss
@@ -0,0 +1,69 @@
+.lineItem {
+ display: flex;
+ flex-direction: row;
+}
+
+.lineItem h5 {
+ margin: 0px;
+}
+
+.locked {
+ background-color: #ff6666;
+}
+
+.points {
+ padding: 0 5px;
+}
+
+/* Hide the default checkbox */
+.customCheckboxInput {
+ display: none;
+}
+
+/* Create a custom checkbox */
+.customCheckboxInput {
+ width: 24px; /* Size of the checkbox */
+ height: 24px; /* Size of the checkbox */
+ border: 2px solid #ccc; /* Border color */
+ display: inline-block;
+ position: relative;
+ cursor: pointer;
+ margin: 0 10px 0 0;
+}
+
+/* Add a checkmark */
+.customCheckboxInput::after {
+ content: "";
+ position: absolute;
+ left: 6px; /* Position of the checkmark */
+ top: 2px; /* Position of the checkmark */
+ width: 6px; /* Width of the checkmark */
+ height: 12px; /* Height of the checkmark */
+ border: solid white; /* Checkmark color */
+ border-width: 0 2px 2px 0; /* Checkmark shape */
+ transform: rotate(45deg);
+ opacity: 0; /* Initially hidden */
+}
+
+/* Show the checkmark when checked */
+.customCheckboxInput:checked + .customCheckbox::after {
+ opacity: 1; /* Show checkmark */
+}
+
+.description {
+ 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/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..3152650
--- /dev/null
+++ b/frontend/cluesheet-web/src/lib/types.ts
@@ -0,0 +1,17 @@
+export interface Clue {
+ id: string;
+ description: string;
+ points: string;
+ rule: Rule | null;
+ tags: Array+ {clue.points}: +
++ {clue.description} +
+
+ {tags.length > 0 &&
+ tags.map((tag: string, index) => (
+
+ {tag}
+ ))} +