jimmy/FolderGameChallenge
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

challenge brief update

Browse Source
This commit is contained in:
YIIP9
2026-04-11 16:32:05 +12:00
parent d230757cf6
commit 7930dd62b6
5 changed files with 71 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.env.example
View File

@@ -15,9 +15,6 @@
# https://next-auth.js.org/configuration/options#secret # https://next-auth.js.org/configuration/options#secret
AUTH_SECRET="" AUTH_SECRET=""
# Next Auth Discord Provider
AUTH_DISCORD_ID=""
AUTH_DISCORD_SECRET=""
# Prisma # Prisma
# https://www.prisma.io/docs/reference/database-reference/connection-urls#env # https://www.prisma.io/docs/reference/database-reference/connection-urls#env

22
Brief.md Normal file
View File

@@ -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.

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

2
src/app/layout.tsx
View File

@@ -29,7 +29,7 @@ export default function RootLayout({
}: Readonly<{ children: React.ReactNode }>) { }: Readonly<{ children: React.ReactNode }>) {
return ( return (
<html lang="en" className={`${teko.variable} ${bakbakOne.variable}`}> <html lang="en" className={`${teko.variable} ${bakbakOne.variable}`}>
<body className="bg-zinc-950 text-zinc-100 antialiased"> <body className="min-h-screen bg-gradient-to-b from-purple-900 via-purple-950 to-[#0f0518] text-zinc-100 antialiased">
<TRPCReactProvider>{children}</TRPCReactProvider> <TRPCReactProvider>{children}</TRPCReactProvider>
</body> </body>
</html> </html>

62
src/app/page.tsx
View File

@@ -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 ( return (
<main className="flex min-h-screen flex-col items-center justify-center px-6 py-16"> <main className="min-h-screen px-6 py-16">
<div className="max-w-2xl space-y-8 text-center"> <div className="mx-auto max-w-3xl space-y-10">
<h1 className="font-heading text-5xl tracking-tight text-white sm:text-6xl"> <header className="space-y-6 text-center">
Folder Game Challenge <Image
</h1> src="/logo.png"
alt=""
width={611}
height={689}
className="mx-auto h-auto max-h-36 w-auto sm:max-h-44"
priority
/>
<h1 className="font-heading text-5xl tracking-tight text-white sm:text-6xl">
{title}
</h1>
</header>
<div className="space-y-6 text-lg leading-relaxed text-zinc-300 sm:text-xl"> <div className="space-y-6 text-lg leading-relaxed text-zinc-300 sm:text-xl">
<p> {paragraphs.map((text, i) => (
You have 2 hours to create an interactive game that uses some <p
education around file management, using / navigating software etc. key={i}
</p> className={
<p> i === paragraphs.length - 1 && text.toLowerCase().includes("npm install")
The goal is the user will progress through levels completing ? "rounded-lg border border-purple-400/20 bg-black/25 px-4 py-3 text-base text-zinc-300 sm:text-lg"
challenges based in real knowledge learning. : undefined
</p> }
>
{text}
</p>
))}
</div> </div>
</div> </div>
</main> </main>