diff --git a/.env.example b/.env.example index 6dc5614..fd522e7 100644 --- a/.env.example +++ b/.env.example @@ -15,9 +15,6 @@ # https://next-auth.js.org/configuration/options#secret AUTH_SECRET="" -# Next Auth Discord Provider -AUTH_DISCORD_ID="" -AUTH_DISCORD_SECRET="" # Prisma # https://www.prisma.io/docs/reference/database-reference/connection-urls#env diff --git a/Brief.md b/Brief.md new file mode 100644 index 0000000..e81e521 --- /dev/null +++ b/Brief.md @@ -0,0 +1,22 @@ +Folder Game Challenge +You have 90 minutes to create an interactive tool/game that aims to have the user go from little to no computer knowledge to being able to navigate their files/folder system, digital software and the internet via their browser. + +The target here is to build something engaging that is a good first steps in foundation knowledge so the players of this game can go be confident in growing as a digital creator. + +Requirements: + +- Be as creative as you can. + +- Utilize the web libraries in this project. + +- Use the same fonts in this project +(Teko, BakBakOne & IBM Plex Mono). + +- Put the logo.png image onto the final result. + +- Worked with at least 1 A.I agent during the process of building. + +- You must be able to save your progress. + +When you clone the project down run npm install first. + diff --git a/public/logo.png b/public/logo.png new file mode 100644 index 0000000..91d932a Binary files /dev/null and b/public/logo.png differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d9c8c14..42eaca0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -29,7 +29,7 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode }>) { return ( - + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index b633104..68cf024 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,19 +1,53 @@ -export default function Home() { +import { readFile } from "fs/promises"; +import Image from "next/image"; +import path from "path"; + +function parseBrief(raw: string): { title: string; paragraphs: string[] } { + const lines = raw.trimEnd().split("\n"); + const title = (lines[0] ?? "").trim(); + const body = lines.slice(1).join("\n").trim(); + const paragraphs = body + .split(/\n\s*\n/) + .map((p) => p.replace(/\n/g, " ").trim()) + .filter(Boolean); + return { title, paragraphs }; +} + +export default async function Home() { + const briefPath = path.join(process.cwd(), "Brief.md"); + const raw = await readFile(briefPath, "utf-8"); + const { title, paragraphs } = parseBrief(raw); + return ( -
-
-

- Folder Game Challenge -

+
+
+
+ +

+ {title} +

+
+
-

- You have 2 hours to create an interactive game that uses some - education around file management, using / navigating software etc. -

-

- The goal is the user will progress through levels completing - challenges based in real knowledge learning. -

+ {paragraphs.map((text, i) => ( +

+ {text} +

+ ))}