diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..e0fedbd
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,6 @@
+{
+ "extends": ["next/core-web-vitals", "next/typescript"],
+ "rules": {
+ "@typescript-eslint/no-empty-object-type": "off"
+ }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fd3dbb5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..4bf1534
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,28 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Next.js: debug server-side",
+ "type": "node-terminal",
+ "request": "launch",
+ "command": "pnpm run dev"
+ },
+ {
+ "name": "Next.js: debug client-side",
+ "type": "chrome",
+ "request": "launch",
+ "url": "http://localhost:3000"
+ },
+ {
+ "name": "Next.js: debug full stack",
+ "type": "node-terminal",
+ "request": "launch",
+ "command": "pnpm run dev",
+ "serverReadyAction": {
+ "pattern": "- Local:.+(https?://.+)",
+ "uriFormat": "%s",
+ "action": "debugWithChrome"
+ }
+ }
+ ]
+ }
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index 887f097..0000000
--- a/LICENSE
+++ /dev/null
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Marlan Perumal
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/README.md b/README.md
index 26a398d..e215bc4 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,36 @@
-# eighty20-split
\ No newline at end of file
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/app/auth/confirm/route.ts b/app/auth/confirm/route.ts
new file mode 100644
index 0000000..c5eed01
--- /dev/null
+++ b/app/auth/confirm/route.ts
@@ -0,0 +1,23 @@
+import { type EmailOtpType } from "@supabase/supabase-js";
+import { type NextRequest } from "next/server";
+
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+
+export async function GET(request: NextRequest) {
+ const { searchParams } = new URL(request.url);
+ const token_hash = searchParams.get("token_hash");
+ const type = searchParams.get("type") as EmailOtpType | null;
+ const next = searchParams.get("next") ?? "/";
+
+ if (token_hash && type) {
+ const supabase = createClient();
+
+ const { error } = await supabase.auth.verifyOtp({ type, token_hash });
+
+ if (!error) {
+ redirect(next);
+ }
+ }
+ redirect("/error");
+}
diff --git a/app/error/page.tsx b/app/error/page.tsx
new file mode 100644
index 0000000..f984f84
--- /dev/null
+++ b/app/error/page.tsx
@@ -0,0 +1,3 @@
+export default function ErrorPage() {
+ return Sorry, something went wrong
;
+}
diff --git a/app/game.tsx b/app/game.tsx
new file mode 100644
index 0000000..37b04eb
--- /dev/null
+++ b/app/game.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import { useRef, useEffect, useState, useCallback } from "react";
+import { Card, CardHeader } from "@/components/ui/card";
+
+interface Dot {
+ x: number;
+ y: number;
+}
+
+export default function Game() {
+ const canvasRef = useRef(null);
+ const canvasWidth = canvasRef.current?.width ?? 0;
+ const canvasHeight = canvasRef.current?.height ?? 0;
+
+ const totalDots = 1000;
+ const [dots, setDots] = useState([]);
+ const [lineStart, setLineStart] = useState(null);
+ const [lineEnd, setLineEnd] = useState(null);
+ const [isDrawing, setIsDrawing] = useState(false);
+ const [percentageAbove, setPercentageAbove] = useState(0);
+ const [percentageBelow, setPercentageBelow] = useState(0);
+ const [score, setScore] = useState(0);
+
+ useEffect(() => {
+ // Function to generate random dots
+ function generateDots() {
+ const newDots: Dot[] = [];
+ for (let i = 0; i < totalDots; i++) {
+ const dot: Dot = {
+ x: Math.random() * canvasWidth,
+ y: Math.random() * canvasHeight,
+ };
+ newDots.push(dot);
+ }
+ setDots(newDots);
+ }
+ generateDots();
+ }, [canvasWidth, canvasHeight]);
+
+ // Function to draw the dots on the canvas
+ const drawDots = useCallback(
+ (ctx: CanvasRenderingContext2D) => {
+ ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+ ctx.fillStyle = "black";
+ dots.forEach((dot) => {
+ ctx.beginPath();
+ ctx.arc(dot.x, dot.y, 3, 0, Math.PI * 2);
+ ctx.fill();
+ });
+ },
+ [canvasWidth, canvasHeight, dots]
+ );
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ drawDots(ctx);
+ }, [drawDots]);
+
+ // Function to extend the line beyond the canvas edges
+ const extendLine = useCallback(
+ (start: Dot, end: Dot) => {
+ const slope = (end.y - start.y) / (end.x - start.x);
+
+ const extendedStart = { x: 0, y: start.y - slope * start.x };
+ const extendedEnd = {
+ x: canvasWidth,
+ y: start.y + slope * (canvasWidth - start.x),
+ };
+
+ return { extendedStart, extendedEnd };
+ },
+ [canvasWidth]
+ );
+
+ // Function to draw a line on the canvas
+ const drawLine = useCallback(
+ (ctx: CanvasRenderingContext2D, start: Dot, end: Dot) => {
+ const { extendedStart, extendedEnd } = extendLine(start, end);
+ // Fill the area above the line
+
+ ctx.fillStyle = "rgba(0, 0, 255, 0.4)"; // Semi-transparent blue
+ ctx.beginPath();
+ ctx.moveTo(extendedStart.x, extendedStart.y);
+ ctx.lineTo(extendedEnd.x, extendedEnd.y);
+ ctx.lineTo(canvasWidth, extendedEnd.y);
+ ctx.lineTo(canvasWidth, 0);
+ ctx.lineTo(0, 0);
+ ctx.lineTo(0, extendedStart.y);
+ ctx.closePath();
+ ctx.fill();
+
+ // Fill the area below the line
+ ctx.fillStyle = "rgba(255, 0, 0, 0.4)"; // Semi-transparent red
+ ctx.beginPath();
+ ctx.moveTo(extendedStart.x, extendedStart.y);
+ ctx.lineTo(extendedEnd.x, extendedEnd.y);
+ ctx.lineTo(canvasWidth, extendedEnd.y);
+ ctx.lineTo(canvasWidth, canvasHeight);
+ ctx.lineTo(0, canvasHeight);
+ ctx.lineTo(0, extendedStart.y);
+ ctx.closePath();
+ ctx.fill();
+
+ // Draw the line
+ ctx.strokeStyle = "black";
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+ ctx.moveTo(extendedStart.x, extendedStart.y);
+ ctx.lineTo(extendedEnd.x, extendedEnd.y);
+ ctx.stroke();
+ },
+ [canvasWidth, canvasHeight, extendLine]
+ );
+
+ // Function to calculate the split (dummy implementation)
+ const calculateSplit = useCallback(
+ (start: Dot, end: Dot) => {
+ // Implement the logic for calculating the split
+ const { extendedStart, extendedEnd } = extendLine(start, end);
+
+ let dotsAbove = 0;
+ let dotsBelow = 0;
+
+ const A = extendedEnd.y - extendedStart.y;
+ const B = extendedStart.x - extendedEnd.x;
+ const C = A * extendedStart.x + B * extendedStart.y;
+
+ dots.forEach((dot) => {
+ const position = A * dot.x + B * dot.y - C;
+ if (position > 0) {
+ dotsAbove++;
+ } else {
+ dotsBelow++;
+ }
+ });
+
+ const total = dotsAbove + dotsBelow;
+ const percentageAboveCalc = (dotsAbove / total) * 100;
+ const percentageBelowCalc = (dotsBelow / total) * 100;
+ setPercentageAbove(percentageAboveCalc);
+ setPercentageBelow(percentageBelowCalc);
+
+ // Calculate the score
+ const targetAbove = 80;
+ const diffAbove = Math.abs(percentageAboveCalc - targetAbove);
+ const baseScore = 100 - diffAbove;
+ // Scale the score such that an undersplit is penalized as much as an oversplit
+ const scoreCalc = (baseScore / 100) ** 16 * 1000;
+ setScore(scoreCalc);
+ },
+ [dots, extendLine]
+ );
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ if (!canvas) return;
+ const ctx = canvas.getContext("2d");
+ if (!ctx) return;
+
+ // drawDots(ctx);
+
+ // Function to handle mouse down (start drawing the line)
+ const handleMouseDown = (e: MouseEvent) => {
+ setLineStart({ x: e.offsetX, y: e.offsetY });
+ setIsDrawing(true);
+ };
+
+ // Function to handle mouse move (draw the line as the mouse moves)
+ const handleMouseMove = (e: MouseEvent) => {
+ if (!isDrawing || !lineStart) return;
+ const newLineEnd: Dot = { x: e.offsetX, y: e.offsetY };
+ setLineEnd(newLineEnd);
+ drawDots(ctx);
+ drawLine(ctx, lineStart, newLineEnd);
+ };
+
+ // Function to handle mouse up (stop drawing the line)
+ const handleMouseUp = (e: MouseEvent) => {
+ setIsDrawing(false);
+ if (lineStart && lineEnd) {
+ const newLineEnd: Dot = { x: e.offsetX, y: e.offsetY };
+ setLineEnd(newLineEnd);
+ drawLine(ctx, lineStart, newLineEnd);
+ calculateSplit(lineStart, newLineEnd);
+ }
+ };
+
+ canvas.addEventListener("mousedown", handleMouseDown);
+ canvas.addEventListener("mousemove", handleMouseMove);
+ canvas.addEventListener("mouseup", handleMouseUp);
+
+ return () => {
+ canvas.removeEventListener("mousedown", handleMouseDown);
+ canvas.removeEventListener("mousemove", handleMouseMove);
+ canvas.removeEventListener("mouseup", handleMouseUp);
+ };
+ }, [dots, lineStart, lineEnd, isDrawing, calculateSplit, drawDots, drawLine]);
+
+ return (
+ <>
+
+
+
+ {`Dots Above: ${percentageAbove.toFixed(
+ 2
+ )}%, Dots Below: ${percentageBelow.toFixed(
+ 2
+ )}%, Score: ${score.toFixed(0)}`}
+
+
+
+
+ );
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..000e9a8
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,66 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 0 0% 3.9%;
+ --card: 0 0% 100%;
+ --card-foreground: 0 0% 3.9%;
+ --popover: 0 0% 100%;
+ --popover-foreground: 0 0% 3.9%;
+ --primary: 0 0% 9%;
+ --primary-foreground: 0 0% 98%;
+ --secondary: 0 0% 96.1%;
+ --secondary-foreground: 0 0% 9%;
+ --muted: 0 0% 96.1%;
+ --muted-foreground: 0 0% 45.1%;
+ --accent: 0 0% 96.1%;
+ --accent-foreground: 0 0% 9%;
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 89.8%;
+ --input: 0 0% 89.8%;
+ --ring: 0 0% 3.9%;
+ --chart-1: 12 76% 61%;
+ --chart-2: 173 58% 39%;
+ --chart-3: 197 37% 24%;
+ --chart-4: 43 74% 66%;
+ --chart-5: 27 87% 67%;
+ --radius: 0.5rem
+ }
+ .dark {
+ --background: 0 0% 3.9%;
+ --foreground: 0 0% 98%;
+ --card: 0 0% 3.9%;
+ --card-foreground: 0 0% 98%;
+ --popover: 0 0% 3.9%;
+ --popover-foreground: 0 0% 98%;
+ --primary: 0 0% 98%;
+ --primary-foreground: 0 0% 9%;
+ --secondary: 0 0% 14.9%;
+ --secondary-foreground: 0 0% 98%;
+ --muted: 0 0% 14.9%;
+ --muted-foreground: 0 0% 63.9%;
+ --accent: 0 0% 14.9%;
+ --accent-foreground: 0 0% 98%;
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 0 0% 98%;
+ --border: 0 0% 14.9%;
+ --input: 0 0% 14.9%;
+ --ring: 0 0% 83.1%;
+ --chart-1: 220 70% 50%;
+ --chart-2: 160 60% 45%;
+ --chart-3: 30 80% 55%;
+ --chart-4: 280 65% 60%;
+ --chart-5: 340 75% 55%
+ }
+}
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..961ae3a
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+ title: "80/20: The Game",
+ description: "80/20 Split Game",
+ icons:
+ 'data:image/svg+xml,🐔
+
+ 80/20: The Game
+
+
+ Instructions
+
+
+ Draw a line on the canvas to split the dots
+
+ The game will show the percentage of dots above and below the line
+
+ Get close to a perfect 80/20 split for a high score
+ Practice your skills for now. The real game starts soon...
+
+
+
+
,
+ VariantProps {
+ asChild?: boolean
+}
+
+const Button = React.forwardRef(
+ ({ className, variant, size, asChild = false, ...props }, ref) => {
+ const Comp = asChild ? Slot : "button"
+ return (
+
+>(({ className, ...props }, ref) => (
+
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..5af26b2
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+ extends React.InputHTMLAttributes {}
+
+const Input = React.forwardRef(
+ ({ className, type, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef &
+ VariantProps
+>(({ className, ...props }, ref) => (
+