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