From fea8358dc924b8ace3331cea61594015ff57acc8 Mon Sep 17 00:00:00 2001 From: styled Date: Wed, 9 Nov 2022 21:58:44 -0500 Subject: [PATCH 01/23] created environment variables for prod and dev --- .env.development | 1 + .env.production | 1 + 2 files changed, 2 insertions(+) create mode 100644 .env.development create mode 100644 .env.production diff --git a/.env.development b/.env.development new file mode 100644 index 0000000..1d73a7c --- /dev/null +++ b/.env.development @@ -0,0 +1 @@ +ENDPOINT=http://localhost:8000 \ No newline at end of file diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..1874252 --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +ENDPOINT="Please Fix Me" \ No newline at end of file From 952c5adceb060a826a8ff82256ae32f75a0198b1 Mon Sep 17 00:00:00 2001 From: styled Date: Wed, 9 Nov 2022 21:58:59 -0500 Subject: [PATCH 02/23] search all files in src folder --- tailwind.config.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/tailwind.config.js b/tailwind.config.js index 6a56723..e273bf5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,9 +1,6 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: [ - "./src/pages/**/*.{js,ts,jsx,tsx}", - "./src/components/**/*.{js,ts,jsx,tsx}" - ], + content: ["./src/**/*.tsx"], darkMode: "class", theme: { extend: { From 44db1ccf4007541a4812a0b59991be6adf119f53 Mon Sep 17 00:00:00 2001 From: styled Date: Wed, 9 Nov 2022 21:59:38 -0500 Subject: [PATCH 03/23] gradient background effect --- src/components/Container.tsx | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/Container.tsx diff --git a/src/components/Container.tsx b/src/components/Container.tsx new file mode 100644 index 0000000..5de7bbd --- /dev/null +++ b/src/components/Container.tsx @@ -0,0 +1,20 @@ +import { ReactNode } from "react"; + +type Container = { + children: ReactNode; + extraTailwindStyles?: string; +}; + +const Container = ({ children, extraTailwindStyles = "" }: Container) => { + return ( +
+
+ {children} +
+
+ ); +}; + +export default Container; From 494a1ee09903d5f86e0145cf47148e2dd0298ba6 Mon Sep 17 00:00:00 2001 From: styled Date: Wed, 9 Nov 2022 22:01:42 -0500 Subject: [PATCH 04/23] redesign the tabs to use the new gradient --- src/components/Tabs.tsx | 36 +++ src/pages/playground.tsx | 253 +++++----------------- src/templates/Playground/Instructions.tsx | 58 +++++ 3 files changed, 143 insertions(+), 204 deletions(-) create mode 100644 src/components/Tabs.tsx create mode 100644 src/templates/Playground/Instructions.tsx diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx new file mode 100644 index 0000000..31727e8 --- /dev/null +++ b/src/components/Tabs.tsx @@ -0,0 +1,36 @@ +import { ReactNode, useState } from "react"; +import Container from "@/components/Container"; + +type Tabs = { + tabs: { + name: string; + element: ReactNode; + }[]; +}; + +const Tabs = ({ tabs }: Tabs) => { + const [activeTab, setActiveTab] = useState(0); + + return ( +
+
+ {tabs.map(({ name }, index) => ( +

setActiveTab(index)} + className={`px-6 py-3 capitalize cursor-pointer font-gilroy-bold rounded-xl active:scale-95 hover:text-secondary ${ + activeTab === index && "outline" + }`} + > + {name} +

+ ))} +
+ + {tabs[activeTab].element} + +
+ ); +}; + +export default Tabs; diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index ea2220c..c0f063a 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -1,229 +1,74 @@ -import useStore from "@/helpers/store"; -import dynamic from "next/dynamic"; -import { useRouter } from "next/router"; -import PromptPanel from "../components/PromptPanel"; -import { useState, useEffect } from "react"; -import Editor, { useMonaco } from "@monaco-editor/react"; -// import Shader from '@/components/canvas/ShaderExample/ShaderExample' +import Tabs from "@/components/Tabs"; +import Instruction from "@/templates/Playground/Instructions"; +import { GetServerSideProps } from "next"; -// Prefer dynamic import for production builds -// But if you have issues and need to debug in local development -// comment these out and import above instead -// https://github.com/pmndrs/react-three-next/issues/49 -const Shader = dynamic( - () => import("@/components/canvas/ShaderExample/ShaderExample"), - { - ssr: false - } -); - -const URL = "http://localhost:8000"; - -const editorConfig = { - theme: "vs-dark", - height: "calc(100vh - 10rem)", - defaultLanguage: "python", - options: { - minimap: { - enabled: false - }, - fontFamily: "JetBrains Mono", - fontSize: 14, - readOnly: false, - smoothScrolling: true - } -}; - -type PlaygroundProps = { - problemData: { +type Playground = { + problem: { id: number; title: string; difficulty: "Easy" | "Medium" | "Hard"; - objectives: [string]; - examples: [ - { - input: string; - output: string; - explanation?: string; - } - ]; + objectives: string[]; + examples: { + output: string; + input: string; + explanation?: string; + }[]; starterCode: string; timeLimit: number; }; }; -// DOM elements here -const DOM = ({ problemData }: PlaygroundProps) => { - const monaco = useMonaco(); - - const [language, setLanguage] = useState("python"); - - const [minutesLeft, setMinutesLeft] = useState(problemData.timeLimit); // minutes - const [code, setCode] = useState(problemData.starterCode); - - useEffect(() => { - if (!monaco) { - return; - } - - enum COLORS { - black = "#191919", - white = "#D6D6DD", - grey = "#6D6D6D", - yellow = "#E5C07B", - pink = "#CC8ECD", - orange = "#EFB080", - cyan = "#83D6C5", - blue = "#7ABAEE", - purple = "#AAA0FA" - } - - monaco.editor.defineTheme("code-clash", { - base: "vs-dark", - inherit: true, - rules: [ - // global styling - { - token: "", - foreground: COLORS.white, - background: COLORS.black, - fontStyle: "" - }, - - // white - { token: "variable", foreground: COLORS.white }, - { token: "variable", foreground: COLORS.white }, - { token: "variable.predefined", foreground: COLORS.white }, - { token: "variable.predefined", foreground: COLORS.white }, - { token: "variable.parameter", foreground: COLORS.white }, - { token: "delimiter", foreground: COLORS.white }, - { token: "attribute.value", foreground: COLORS.white }, - { token: "delimiter", foreground: COLORS.white }, - - // colorful - { token: "string", foreground: COLORS.pink }, - { token: "keyword", foreground: COLORS.cyan }, - { token: "type", foreground: COLORS.cyan }, - { token: "number", foreground: COLORS.yellow }, - { token: "comment", foreground: COLORS.grey }, - { token: "constant", foreground: COLORS.orange }, - { token: "attribute.name", foreground: COLORS.purple }, - { token: "key", foreground: COLORS.purple } - ], - colors: { - "editor.background": COLORS.black, - "editor.foreground": COLORS.white - } - }); - - monaco.editor.setTheme("code-clash"); - }, [monaco]); - - useEffect(() => { - let timer = null; - - if (minutesLeft > 0) { - timer = setInterval(() => { - setMinutesLeft(prevMinutesLeft => prevMinutesLeft - 1); - }, 60000); // 60000ms / 1 min - } - - return () => clearInterval(timer); - }, [minutesLeft]); - - const displayTimeLeft = () => { - if (minutesLeft >= 2) { - return `${minutesLeft} minutes`; - } else if (minutesLeft === 1) { - return `1 minute... Hurry!`; - } else { - return "Times up!"; - } - }; - - const handleEditorChange = value => { - setCode(value); - }; - - const handleSubmit = async () => { - const body = { - language: language, - script: code - }; - - alert(`POST Body: ${JSON.stringify(body)}`); - - const res = await fetch(`${URL}/execute`, { - method: "POST", - headers: { - Accept: "application/json", - "Content-Type": "application/json" - }, - body: JSON.stringify(body) - }); - }; - +const Dom = ({ problem }: Playground) => { return ( - <> -
- - -
-
-

- Sebastian vs. Emily -

-

{displayTimeLeft()}

-
- - - -
- -
-
+
+
+ + }, + { + name: "output", + element:

This will one day be the output tab

+ } + ]} + />
- +
+
); }; -// Canvas/R3F components here -const R3F = () => { - return <>; -}; - -export default function playground(props) { +export default function Playground(props: Playground) { return ( <> - - {/* */} + ); } -export async function getStaticProps() { - const res = await fetch(`${URL}/problems/1`); - const data = await res.json(); - console.log(data); +export const getServerSideProps: GetServerSideProps = async ({ query }) => { + const { problem } = query; + + const response = await fetch(`${process.env.ENDPOINT}/problems/${problem}`, { + method: "GET", + headers: { + "Content-Type": "application/json" + } + }); + + const data = await response.json(); + + if (!data.id) { + return { + notFound: true + }; + } return { props: { - title: "Playground", - problemData: data + problem: data } }; -} +}; diff --git a/src/templates/Playground/Instructions.tsx b/src/templates/Playground/Instructions.tsx new file mode 100644 index 0000000..6de1acb --- /dev/null +++ b/src/templates/Playground/Instructions.tsx @@ -0,0 +1,58 @@ +type Problem = { + id: number; + title: string; + difficulty: "Easy" | "Medium" | "Hard"; + objectives: string[]; + examples: { + output: string; + input: string; + explanation?: string; + }[]; +}; + +const Instruction = (problem: Problem) => { + const difficultyColors = { + Easy: "text-green-600", + Medium: "text-yellow-600", + Hard: "text-red-600" + }; + + return ( +
+

+ {problem.id}. + {problem.title} + + ({problem.difficulty}) + +

+ +
+ {problem.objectives.map((obj, index) => ( +

{obj}

+ ))} +
+ +
+ {problem.examples.map((example, index) => ( +
+

Example {index + 1}

+ +
+ {Object.entries(example).map(([key, value], index) => ( +

+ + {key}:{" "} + + {value} +

+ ))} +
+
+ ))} +
+
+ ); +}; + +export default Instruction; From 9979776e9336e0a55d8841afab1754f7d4183d9f Mon Sep 17 00:00:00 2001 From: styled Date: Wed, 9 Nov 2022 22:29:01 -0500 Subject: [PATCH 05/23] tab buttons hover animation --- src/components/Container.tsx | 13 +++++++++---- src/components/Tabs.tsx | 37 ++++++++++++++++++++++-------------- 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/components/Container.tsx b/src/components/Container.tsx index 5de7bbd..34cbbf8 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -2,14 +2,19 @@ import { ReactNode } from "react"; type Container = { children: ReactNode; - extraTailwindStyles?: string; + backgroundStyles?: string; + borderStyles?: string; }; -const Container = ({ children, extraTailwindStyles = "" }: Container) => { +const Container = (props: Container) => { + const { children, backgroundStyles = "", borderStyles = "" } = props; + return ( -
+
{children}
diff --git a/src/components/Tabs.tsx b/src/components/Tabs.tsx index 31727e8..5b90366 100644 --- a/src/components/Tabs.tsx +++ b/src/components/Tabs.tsx @@ -13,20 +13,29 @@ const Tabs = ({ tabs }: Tabs) => { return (
-
- {tabs.map(({ name }, index) => ( -

setActiveTab(index)} - className={`px-6 py-3 capitalize cursor-pointer font-gilroy-bold rounded-xl active:scale-95 hover:text-secondary ${ - activeTab === index && "outline" - }`} - > - {name} -

- ))} -
- + +
+ {tabs.map(({ name }, index) => ( +

setActiveTab(index)} + className={`${ + activeTab === index ? "border-b-2" : "active:translate-y-1" + } px-6 py-3 capitalize cursor-pointer font-gilroy-bold rounded-t-2xl hover:bg-primary`} + > + {name} +

+ ))} +
+ + + {tabs[activeTab].element}
From ab9bf98dc4ecb28d9492d6452499ef62a572a281 Mon Sep 17 00:00:00 2001 From: styled Date: Thu, 10 Nov 2022 07:22:26 -0500 Subject: [PATCH 06/23] added editor --- src/pages/playground.tsx | 19 +++++++- src/templates/Playground/CustomEditor.tsx | 56 +++++++++++++++++++++++ 2 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 src/templates/Playground/CustomEditor.tsx diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index c0f063a..0387ae3 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -1,6 +1,8 @@ import Tabs from "@/components/Tabs"; +import CustomEditor from "@/templates/Playground/CustomEditor"; import Instruction from "@/templates/Playground/Instructions"; import { GetServerSideProps } from "next"; +import { useRef } from "react"; type Playground = { problem: { @@ -19,6 +21,8 @@ type Playground = { }; const Dom = ({ problem }: Playground) => { + const editorRef = useRef(null); + return (
@@ -35,7 +39,20 @@ const Dom = ({ problem }: Playground) => { ]} />
-
+ +
+
PlayerStats
+ +
+ +
+
); }; diff --git a/src/templates/Playground/CustomEditor.tsx b/src/templates/Playground/CustomEditor.tsx new file mode 100644 index 0000000..572161a --- /dev/null +++ b/src/templates/Playground/CustomEditor.tsx @@ -0,0 +1,56 @@ +import Editor, { useMonaco } from "@monaco-editor/react"; +import { MutableRefObject, useEffect, useRef } from "react"; +import resolveConfig from "tailwindcss/resolveConfig"; +import tailwindConfig from "../../../tailwind.config"; + +const { theme: tailwindVariables } = resolveConfig(tailwindConfig); + +type CustomEditor = { + editorRef: MutableRefObject; + editorConfig: { + defaultValue: string; + language: string; + }; +}; + +const CustomEditor = ({ editorConfig, editorRef }: CustomEditor) => { + const monaco = useMonaco(); + + useEffect(() => { + if (!monaco) { + return; + } + + monaco.editor.defineTheme("code-clash", { + base: "vs-dark", + inherit: true, + rules: [{}], + colors: { + "editor.foreground": "#ffffff", + "editor.background": tailwindVariables.colors["primary"], + "editor.lineHighlightBackground": tailwindVariables.colors["quaternary"] + } + }); + + monaco.editor.setTheme("code-clash"); + }, [monaco]); + + return ( +
+ (editorRef.current = editor)} + /> +
+ ); +}; + +export default CustomEditor; From a9b8c288433d851beb812c5508b450930d1e2c60 Mon Sep 17 00:00:00 2001 From: styled Date: Thu, 10 Nov 2022 07:22:39 -0500 Subject: [PATCH 07/23] change font and color --- src/templates/Playground/Instructions.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/templates/Playground/Instructions.tsx b/src/templates/Playground/Instructions.tsx index 6de1acb..e9bb358 100644 --- a/src/templates/Playground/Instructions.tsx +++ b/src/templates/Playground/Instructions.tsx @@ -41,9 +41,7 @@ const Instruction = (problem: Problem) => {
{Object.entries(example).map(([key, value], index) => (

- - {key}:{" "} - + {key}: {value}

))} From bff2e5dc58edc829b6d595aa3b49d3f57507acd4 Mon Sep 17 00:00:00 2001 From: styled Date: Thu, 10 Nov 2022 08:43:32 -0500 Subject: [PATCH 08/23] bar on top of coding editor that displays timer... --- src/pages/playground.tsx | 21 +++++- .../Playground/GameInfo/PlayerStats.tsx | 69 +++++++++++++++++++ src/templates/Playground/GameInfo/index.tsx | 47 +++++++++++++ 3 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 src/templates/Playground/GameInfo/PlayerStats.tsx create mode 100644 src/templates/Playground/GameInfo/index.tsx diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index 0387ae3..4f9c45b 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -1,6 +1,7 @@ import Tabs from "@/components/Tabs"; import CustomEditor from "@/templates/Playground/CustomEditor"; import Instruction from "@/templates/Playground/Instructions"; +import GameInfo from "@/templates/Playground/GameInfo"; import { GetServerSideProps } from "next"; import { useRef } from "react"; @@ -41,7 +42,23 @@ const Dom = ({ problem }: Playground) => {
-
PlayerStats
+
+ {/** + * TODO: Get Opponent from backend + */} + +
{ editorRef={editorRef} />
+ +
Controls
); diff --git a/src/templates/Playground/GameInfo/PlayerStats.tsx b/src/templates/Playground/GameInfo/PlayerStats.tsx new file mode 100644 index 0000000..3a818ef --- /dev/null +++ b/src/templates/Playground/GameInfo/PlayerStats.tsx @@ -0,0 +1,69 @@ +import Crystal from "@/components/Crystal"; +import Image from "next/image"; + +type PlayerStats = { + username: string; + profilePicture: string; + achievements: number; + totalTestCases: number; + completedTestCases: number; + inverted?: true; +}; + +const PlayerStats = (params: PlayerStats) => { + const { + username, + profilePicture, + achievements, + totalTestCases, + completedTestCases, + inverted + } = params; + + return ( +
+
+
+ Profile Picture +
+ +

+ {completedTestCases}/{totalTestCases} +

+ +
+
+
+
+ +
+

{username}

+ +

{achievements}

+ + +
+
+ ); +}; + +export default PlayerStats; diff --git a/src/templates/Playground/GameInfo/index.tsx b/src/templates/Playground/GameInfo/index.tsx new file mode 100644 index 0000000..63d6dbb --- /dev/null +++ b/src/templates/Playground/GameInfo/index.tsx @@ -0,0 +1,47 @@ +import { useState } from "react"; +import PlayerStats from "./PlayerStats"; + +type Player = { + username: string; + profilePicture: string; + achievements: number; +}; + +type GameInfo = { + opponent: Player; + testCases: { + total: number; + userCompletion: number; + opponentCompletion: number; + }; +}; + +const GameInfo = ({ opponent, testCases }: GameInfo) => { + /** + * TODO: Get user from next/auth + */ + const [user] = useState({ + username: "SEBAS0228", + profilePicture: "/static/placeholder.jpeg", + achievements: 12 + }); + + return ( +
+ +

timer

+ +
+ ); +}; + +export default GameInfo; From 98a34a90f0abdb4846c6e1e318070a4affa9a304 Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 07:56:46 -0500 Subject: [PATCH 09/23] move tabs to templates folder --- src/pages/playground.tsx | 7 ++----- src/{components => templates/Playground}/Tabs.tsx | 2 +- 2 files changed, 3 insertions(+), 6 deletions(-) rename src/{components => templates/Playground}/Tabs.tsx (98%) diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index 4f9c45b..89e4672 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -1,9 +1,9 @@ -import Tabs from "@/components/Tabs"; +import Tabs from "@/templates/Playground/Tabs"; import CustomEditor from "@/templates/Playground/CustomEditor"; import Instruction from "@/templates/Playground/Instructions"; import GameInfo from "@/templates/Playground/GameInfo"; import { GetServerSideProps } from "next"; -import { useRef } from "react"; +import { useEffect, useRef } from "react"; type Playground = { problem: { @@ -43,9 +43,6 @@ const Dom = ({ problem }: Playground) => {
- {/** - * TODO: Get Opponent from backend - */} { {tabs[activeTab].element} From 37bdf682fa3e377add715e9f54159c49132bf5bd Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 07:57:05 -0500 Subject: [PATCH 10/23] created timer component --- src/templates/Playground/GameInfo/Timer.tsx | 77 +++++++++++++++++++++ src/templates/Playground/GameInfo/index.tsx | 5 +- 2 files changed, 80 insertions(+), 2 deletions(-) create mode 100644 src/templates/Playground/GameInfo/Timer.tsx diff --git a/src/templates/Playground/GameInfo/Timer.tsx b/src/templates/Playground/GameInfo/Timer.tsx new file mode 100644 index 0000000..5ae1bae --- /dev/null +++ b/src/templates/Playground/GameInfo/Timer.tsx @@ -0,0 +1,77 @@ +import { MutableRefObject, useEffect, useRef, useState } from "react"; + +type Timer = { + timeRemaining: number; + timeLimit: number; +}; + +const Timer = ({ timeLimit, timeRemaining }: Timer) => { + const timerRef: MutableRefObject = useRef(null); + + useEffect(() => { + const interval = window.setInterval(() => { + timerRef.current.setAttribute("stroke-dasharray", getCircleDashArray()); + }, 1000); + + return () => { + window.clearInterval(interval); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const formatTime = (time: number) => { + let minutes: number | string = Math.floor(time / 60); + let seconds: number | string = time % 60; + + if (minutes < 10) { + minutes = `0${minutes}`; + } + + if (seconds < 10) { + seconds = `0${seconds}`; + } + + return `${minutes}:${seconds}`; + }; + + const getCircleDashArray = () => { + const equation = timeRemaining / timeLimit; + const timeFraction = equation - (1 / timeLimit) * (1 - equation); + + return `${(timeFraction * 283).toFixed(0)} 283`; + }; + + return ( +
+ + + + (timerRef.current = element)} + /> + + + + {formatTime(timeRemaining)} + +
+ ); +}; + +export default Timer; diff --git a/src/templates/Playground/GameInfo/index.tsx b/src/templates/Playground/GameInfo/index.tsx index 63d6dbb..5d09f90 100644 --- a/src/templates/Playground/GameInfo/index.tsx +++ b/src/templates/Playground/GameInfo/index.tsx @@ -1,5 +1,6 @@ -import { useState } from "react"; +import { ElementRef, useRef, useState } from "react"; import PlayerStats from "./PlayerStats"; +import Timer from "./Timer"; type Player = { username: string; @@ -33,7 +34,7 @@ const GameInfo = ({ opponent, testCases }: GameInfo) => { totalTestCases={testCases.total} completedTestCases={testCases.userCompletion} /> -

timer

+ Date: Fri, 11 Nov 2022 07:57:33 -0500 Subject: [PATCH 11/23] comments --- src/templates/Playground/GameInfo/PlayerStats.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/templates/Playground/GameInfo/PlayerStats.tsx b/src/templates/Playground/GameInfo/PlayerStats.tsx index 3a818ef..968041a 100644 --- a/src/templates/Playground/GameInfo/PlayerStats.tsx +++ b/src/templates/Playground/GameInfo/PlayerStats.tsx @@ -27,34 +27,38 @@ const PlayerStats = (params: PlayerStats) => { inverted && "justify-end flex-row-reverse" } flex justify-center gap-5 relative`} > -
+ {/* profile picture */} +
Profile Picture
+ {/* number of test completed out of total test cases */}

{completedTestCases}/{totalTestCases}

+ {/* Test cases progress bar */}
+ {/* user name and total cystals */}

{username}

From 1da0f38bd516739db8c41935e55e3c984072c08e Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 09:08:20 -0500 Subject: [PATCH 12/23] test and submit button --- src/pages/playground.tsx | 35 +++++++++++++++++++++++++++++++++-- src/styles/global.css | 18 ++++++++++++++++++ 2 files changed, 51 insertions(+), 2 deletions(-) diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index 89e4672..05d656b 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -3,7 +3,7 @@ import CustomEditor from "@/templates/Playground/CustomEditor"; import Instruction from "@/templates/Playground/Instructions"; import GameInfo from "@/templates/Playground/GameInfo"; import { GetServerSideProps } from "next"; -import { useEffect, useRef } from "react"; +import { useRef, useState } from "react"; type Playground = { problem: { @@ -23,6 +23,22 @@ type Playground = { const Dom = ({ problem }: Playground) => { const editorRef = useRef(null); + const [promptPanelTab, setPromptPanelTab] = useState(0); + + const handleSubmit = () => { + /** + * TODO: send code to sockets for validation + */ + alert("Submit: \n\n\n" + editorRef.current.getValue()); + }; + + const handleTest = () => { + /** + * TODO: Send code to sockets for test cases + */ + setPromptPanelTab(1); + alert("Testing: \n\n\n" + editorRef.current.getValue()); + }; return (
@@ -38,6 +54,8 @@ const Dom = ({ problem }: Playground) => { element:

This will one day be the output tab

} ]} + activeTab={promptPanelTab} + switchTab={tab => setPromptPanelTab(tab)} />
@@ -67,7 +85,20 @@ const Dom = ({ problem }: Playground) => { />
-
Controls
+
+ + +
); diff --git a/src/styles/global.css b/src/styles/global.css index 9410ef4..e66155e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -24,6 +24,24 @@ } } +/* +@layer components { + .polymorphism: { + background-color: theme("colors.white"); + } +} +*/ + +@layer components { + .polymorphism { + box-shadow: 0px 4px 4px #0f1021, inset 0px 1px 2px #ffffff, + inset 0px 20px 80px #0f1021, inset 0px -4px 4px #ffffff, + inset 0px -40px 40px rgba(15, 16, 33, 0.2), inset 0px 4px 12px #ffffff; + backdrop-filter: blur(20px); + } + /* ... */ +} + /* ! Do NOT add @layer these three button classes /* /* https://tailwindcss.com/docs/adding-custom-styles#removing-unused-custom-css */ /* https://v2.tailwindcss.com/docs/just-in-time-mode#arbitrary-value-support */ From 7ee7d3d16f665412ebe1b7ecc989937df2a4c1ee Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 09:08:34 -0500 Subject: [PATCH 13/23] ability to change tabs from outside component --- src/templates/Playground/Tabs.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/templates/Playground/Tabs.tsx b/src/templates/Playground/Tabs.tsx index 5c638ed..430e467 100644 --- a/src/templates/Playground/Tabs.tsx +++ b/src/templates/Playground/Tabs.tsx @@ -1,4 +1,4 @@ -import { ReactNode, useState } from "react"; +import { ReactNode, useEffect, useState } from "react"; import Container from "@/components/Container"; type Tabs = { @@ -6,11 +6,11 @@ type Tabs = { name: string; element: ReactNode; }[]; + activeTab?: number; + switchTab: (tab: number) => void; }; -const Tabs = ({ tabs }: Tabs) => { - const [activeTab, setActiveTab] = useState(0); - +const Tabs = ({ tabs, switchTab, activeTab = 0 }: Tabs) => { return (
{ {tabs.map(({ name }, index) => (

setActiveTab(index)} + onClick={() => switchTab(index)} className={`${ activeTab === index ? "border-b-2" : "active:translate-y-1" } px-6 py-3 capitalize cursor-pointer font-gilroy-bold rounded-t-2xl hover:bg-primary`} From bc9468a253b5568af8a0e09cb90df845a0620b50 Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 09:19:38 -0500 Subject: [PATCH 14/23] remove old components from v1 --- src/components/PromptPanel.tsx | 69 ---------------------------------- 1 file changed, 69 deletions(-) delete mode 100644 src/components/PromptPanel.tsx diff --git a/src/components/PromptPanel.tsx b/src/components/PromptPanel.tsx deleted file mode 100644 index 0255b20..0000000 --- a/src/components/PromptPanel.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from "react"; - -type PrompPanelProps = { - id: number; - title: string; - difficulty: "Easy" | "Medium" | "Hard"; - objectives: [string]; - examples: [{ output: string; input: string; explanation?: string }]; -}; - -function promptPanel(props: PrompPanelProps) { - const getDifficultyColor = (): string => { - switch (props.difficulty) { - case "Easy": - return "text-green-600"; - case "Medium": - return "text-yellow-600"; - case "Hard": - return "text-red-600"; - default: - return "text-grey-600"; - } - }; - - return ( -
-

- {props.id}. {props.title}{" "} -

-

- ({props.difficulty}) -

- -
-

Objective:

- {props.objectives.map((objective, index) => ( -
-
{objective}
-
-
- ))} - - {props.examples.map((example, index) => ( -
-

Example {index + 1}

-

- Input: - {example.input} -

- -

- Output: - {example.output} -

- - {Object.hasOwn(example, "explanation") && ( -

- Explanation: - {example.explanation} -

- )} -
-
- ))} -
- ); -} - -export default promptPanel; From 9565abfa81dd9b5312b394baf33cdb2c9fc1fe2b Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 11:52:05 -0500 Subject: [PATCH 15/23] removed unused code and fix type errors --- src/styles/global.css | 13 ++----------- src/templates/Playground/CustomEditor.tsx | 8 +++++++- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index e66155e..bfc4019 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -24,22 +24,13 @@ } } -/* -@layer components { - .polymorphism: { - background-color: theme("colors.white"); - } -} -*/ - @layer components { .polymorphism { - box-shadow: 0px 4px 4px #0f1021, inset 0px 1px 2px #ffffff, - inset 0px 20px 80px #0f1021, inset 0px -4px 4px #ffffff, + box-shadow: 0px 4px 4px theme(colors.primary), inset 0px 1px 2px #ffffff, + inset 0px 20px 80px theme(colors.primary), inset 0px -4px 4px #ffffff, inset 0px -40px 40px rgba(15, 16, 33, 0.2), inset 0px 4px 12px #ffffff; backdrop-filter: blur(20px); } - /* ... */ } /* ! Do NOT add @layer these three button classes /* diff --git a/src/templates/Playground/CustomEditor.tsx b/src/templates/Playground/CustomEditor.tsx index 572161a..5800fdc 100644 --- a/src/templates/Playground/CustomEditor.tsx +++ b/src/templates/Playground/CustomEditor.tsx @@ -24,7 +24,13 @@ const CustomEditor = ({ editorConfig, editorRef }: CustomEditor) => { monaco.editor.defineTheme("code-clash", { base: "vs-dark", inherit: true, - rules: [{}], + rules: [ + { + token: "", + foreground: "#ffffff", + background: tailwindVariables.colors["primary"] + } + ], colors: { "editor.foreground": "#ffffff", "editor.background": tailwindVariables.colors["primary"], From c1f4e2f07d9ed56947125c4c2b578059126d1bab Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 16:34:19 -0500 Subject: [PATCH 16/23] added timer functionality --- db.json | 6 ++-- src/pages/playground.tsx | 32 +++++++++++++++++---- src/templates/Playground/GameInfo/index.tsx | 8 ++++-- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/db.json b/db.json index 68ea3ad..6324504 100644 --- a/db.json +++ b/db.json @@ -25,7 +25,7 @@ } ], "starterCode": "def solve(nums: list, target: int) -> list:\n\t# Code here...", - "timeLimit": 5 + "timeLimit": 60 }, { "id": 3, @@ -52,7 +52,7 @@ } ], "starterCode": "def solve(s: str) -> int:\n\t# Code here...", - "timeLimit": 15 + "timeLimit": 900 }, { "id": 4, @@ -75,7 +75,7 @@ } ], "starterCode": "def solve(nums1: list, nums2: list) -> float:\n\t# Code here...", - "timeLimit": 30 + "timeLimit": 1800 } ] } diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index 05d656b..259368d 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -3,7 +3,7 @@ import CustomEditor from "@/templates/Playground/CustomEditor"; import Instruction from "@/templates/Playground/Instructions"; import GameInfo from "@/templates/Playground/GameInfo"; import { GetServerSideProps } from "next"; -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; type Playground = { problem: { @@ -23,7 +23,25 @@ type Playground = { const Dom = ({ problem }: Playground) => { const editorRef = useRef(null); - const [promptPanelTab, setPromptPanelTab] = useState(0); + const [promptTabManager, setPromptTabManager] = useState(0); // instructions - results - (past submissions)? + + /** + * to start the countdown, set timer to problems.timeLimit + * To stop the countdown, set timer to null or 0, + */ + const [timer, setTimer] = useState(problem.timeLimit); + + useEffect(() => { + if (timer > 0) { + setTimeout(() => setTimer(timer - 1), 1000); + } else if (timer === 0) { + setTimer(null); + } + + if (timer === null) { + alert("Time limit exceeded!"); + } + }, [timer]); const handleSubmit = () => { /** @@ -36,7 +54,7 @@ const Dom = ({ problem }: Playground) => { /** * TODO: Send code to sockets for test cases */ - setPromptPanelTab(1); + setPromptTabManager(1); alert("Testing: \n\n\n" + editorRef.current.getValue()); }; @@ -54,8 +72,8 @@ const Dom = ({ problem }: Playground) => { element:

This will one day be the output tab

} ]} - activeTab={promptPanelTab} - switchTab={tab => setPromptPanelTab(tab)} + activeTab={promptTabManager} + switchTab={tab => setPromptTabManager(tab)} />

@@ -72,6 +90,10 @@ const Dom = ({ problem }: Playground) => { opponentCompletion: 8, userCompletion: 6 }} + timer={{ + timeRemaining: timer || problem.timeLimit, + timeLimit: problem.timeLimit + }} />
diff --git a/src/templates/Playground/GameInfo/index.tsx b/src/templates/Playground/GameInfo/index.tsx index 5d09f90..28ccbb3 100644 --- a/src/templates/Playground/GameInfo/index.tsx +++ b/src/templates/Playground/GameInfo/index.tsx @@ -15,9 +15,13 @@ type GameInfo = { userCompletion: number; opponentCompletion: number; }; + timer: { + timeLimit: number; + timeRemaining: number; + }; }; -const GameInfo = ({ opponent, testCases }: GameInfo) => { +const GameInfo = ({ opponent, testCases, timer }: GameInfo) => { /** * TODO: Get user from next/auth */ @@ -34,7 +38,7 @@ const GameInfo = ({ opponent, testCases }: GameInfo) => { totalTestCases={testCases.total} completedTestCases={testCases.userCompletion} /> - + Date: Fri, 11 Nov 2022 17:16:52 -0500 Subject: [PATCH 17/23] created tabs folder --- .../{Instructions.tsx => Tabs/Description.tsx} | 4 ++-- .../Playground/{Tabs.tsx => Tabs/index.tsx} | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) rename src/templates/Playground/{Instructions.tsx => Tabs/Description.tsx} (95%) rename src/templates/Playground/{Tabs.tsx => Tabs/index.tsx} (79%) diff --git a/src/templates/Playground/Instructions.tsx b/src/templates/Playground/Tabs/Description.tsx similarity index 95% rename from src/templates/Playground/Instructions.tsx rename to src/templates/Playground/Tabs/Description.tsx index e9bb358..08dcdb4 100644 --- a/src/templates/Playground/Instructions.tsx +++ b/src/templates/Playground/Tabs/Description.tsx @@ -10,7 +10,7 @@ type Problem = { }[]; }; -const Instruction = (problem: Problem) => { +const Description = (problem: Problem) => { const difficultyColors = { Easy: "text-green-600", Medium: "text-yellow-600", @@ -53,4 +53,4 @@ const Instruction = (problem: Problem) => { ); }; -export default Instruction; +export default Description; diff --git a/src/templates/Playground/Tabs.tsx b/src/templates/Playground/Tabs/index.tsx similarity index 79% rename from src/templates/Playground/Tabs.tsx rename to src/templates/Playground/Tabs/index.tsx index 430e467..53ea6af 100644 --- a/src/templates/Playground/Tabs.tsx +++ b/src/templates/Playground/Tabs/index.tsx @@ -17,17 +17,17 @@ const Tabs = ({ tabs, switchTab, activeTab = 0 }: Tabs) => { borderStyles="mb-3 rounded-b-none" backgroundStyles="rounded-b-none" > -
+
{tabs.map(({ name }, index) => ( -

switchTab(index)} className={`${ - activeTab === index ? "border-b-2" : "active:translate-y-1" - } px-6 py-3 capitalize cursor-pointer font-gilroy-bold rounded-t-2xl hover:bg-primary`} + activeTab === index && "border-b-2" + } px-6 py-3 capitalize cursor-pointer font-gilroy-bold rounded-t-2xl hover:bg-primary active:[&>*]:translate-y-1`} > - {name} -

+

{name}

+
))}
From 744589dbae6eb7552a3e84c816212d0974198b05 Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 18:17:57 -0500 Subject: [PATCH 18/23] rename --- .env.development | 2 +- .env.production | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.env.development b/.env.development index 1d73a7c..21e17fa 100644 --- a/.env.development +++ b/.env.development @@ -1 +1 @@ -ENDPOINT=http://localhost:8000 \ No newline at end of file +API_ENDPOINT=http://localhost:8000 \ No newline at end of file diff --git a/.env.production b/.env.production index 1874252..06103ac 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -ENDPOINT="Please Fix Me" \ No newline at end of file +API_ENDPOINT="Please Fix Me" \ No newline at end of file From 881236a26d0a0d22f27277df23635469f8c6a3eb Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 18:18:09 -0500 Subject: [PATCH 19/23] created results --- src/pages/playground.tsx | 58 ++++++++++++++++----- src/templates/Playground/Tabs/Result.tsx | 65 ++++++++++++++++++++++++ 2 files changed, 111 insertions(+), 12 deletions(-) create mode 100644 src/templates/Playground/Tabs/Result.tsx diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index 259368d..b84f127 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -1,9 +1,10 @@ import Tabs from "@/templates/Playground/Tabs"; import CustomEditor from "@/templates/Playground/CustomEditor"; -import Instruction from "@/templates/Playground/Instructions"; +import Description from "@/templates/Playground/Tabs/Description"; import GameInfo from "@/templates/Playground/GameInfo"; import { GetServerSideProps } from "next"; import { useEffect, useRef, useState } from "react"; +import Result from "@/templates/Playground/Tabs/Result"; type Playground = { problem: { @@ -43,6 +44,9 @@ const Dom = ({ problem }: Playground) => { } }, [timer]); + const [testCases, setTestCases] = useState(null); + const [completedAllTestCases, setCompletedAllTestCases] = useState(false); // from the sockets if the user was able to do all the test cases + const handleSubmit = () => { /** * TODO: send code to sockets for validation @@ -53,9 +57,34 @@ const Dom = ({ problem }: Playground) => { const handleTest = () => { /** * TODO: Send code to sockets for test cases + * * editorRef.current.getValue() */ - setPromptTabManager(1); - alert("Testing: \n\n\n" + editorRef.current.getValue()); + setPromptTabManager(1); // show the results tab + setTestCases([ + { + input: "nums = [2,7,11,15], target = 9", + output: "[0]", + expected: "[0,1]", + Stdout: "{}" + }, + { + input: "nums = [2,7,11,15], target = 9", + output: "[]", + expected: "[0,1]" + }, + { + input: "nums = [2,7,11,15], target = 9", + output: "[0,1]", + expected: "[0,1]" + }, + { + input: "nums = [2,7,11,15], target = 9", + output: "[0,1]", + expected: "[0,1]", + Stdout: "[2,7,11,15]" + } + ]); + setCompletedAllTestCases(false); }; return ( @@ -64,12 +93,14 @@ const Dom = ({ problem }: Playground) => { + name: "Description", + element: }, { - name: "output", - element:

This will one day be the output tab

+ name: "Result", + element: ( + + ) } ]} activeTab={promptTabManager} @@ -137,12 +168,15 @@ export default function Playground(props: Playground) { export const getServerSideProps: GetServerSideProps = async ({ query }) => { const { problem } = query; - const response = await fetch(`${process.env.ENDPOINT}/problems/${problem}`, { - method: "GET", - headers: { - "Content-Type": "application/json" + const response = await fetch( + `${process.env.API_ENDPOINT}/problems/${problem}`, + { + method: "GET", + headers: { + "Content-Type": "application/json" + } } - }); + ); const data = await response.json(); diff --git a/src/templates/Playground/Tabs/Result.tsx b/src/templates/Playground/Tabs/Result.tsx new file mode 100644 index 0000000..24d8f9c --- /dev/null +++ b/src/templates/Playground/Tabs/Result.tsx @@ -0,0 +1,65 @@ +type Result = { + testCases: + | { + input: string; + output: string; + expected: string; + Stdout?: string; + }[] + | null; + passed: boolean; +}; + +const Result = ({ testCases, passed }: Result) => { + if (testCases === null) { + return ( +
+

+ You must test your code first +

+
+ ); + } + + return ( +
+

+ {passed ? "Congratulations!!!" : "At least one test case Failed!"} +

+ +
+ {testCases.map((testC, index) => ( +
+
+
+

Case: {index + 1}

+
+ +
+ {Object.entries(testC).map(([key, value], index) => ( +

+ + {key}:{" "} + + {value} +

+ ))} +
+
+ ))} +
+
+ ); +}; + +export default Result; From d6dc5d86b95444e32af960c38df2051e1456b3c9 Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 22:21:53 -0500 Subject: [PATCH 20/23] minor reformatting --- src/pages/playground.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/playground.tsx b/src/pages/playground.tsx index b84f127..3c6e972 100644 --- a/src/pages/playground.tsx +++ b/src/pages/playground.tsx @@ -23,8 +23,8 @@ type Playground = { }; const Dom = ({ problem }: Playground) => { - const editorRef = useRef(null); - const [promptTabManager, setPromptTabManager] = useState(0); // instructions - results - (past submissions)? + const editorRef = useRef(null); // monaco editor + const [tabManager, setTabManager] = useState(0); // instructions - results - (past submissions)? /** * to start the countdown, set timer to problems.timeLimit @@ -59,7 +59,7 @@ const Dom = ({ problem }: Playground) => { * TODO: Send code to sockets for test cases * * editorRef.current.getValue() */ - setPromptTabManager(1); // show the results tab + setTabManager(1); // show the results tab setTestCases([ { input: "nums = [2,7,11,15], target = 9", @@ -103,8 +103,8 @@ const Dom = ({ problem }: Playground) => { ) } ]} - activeTab={promptTabManager} - switchTab={tab => setPromptTabManager(tab)} + activeTab={tabManager} + switchTab={tab => setTabManager(tab)} />
From 879f34b95f74727d636a4961aa0b8733708a4755 Mon Sep 17 00:00:00 2001 From: styled Date: Fri, 11 Nov 2022 23:28:30 -0500 Subject: [PATCH 21/23] fix error in prod --- .env.production | 2 +- src/pages/problems/[problemId].tsx | 265 ----------------------------- 2 files changed, 1 insertion(+), 266 deletions(-) delete mode 100644 src/pages/problems/[problemId].tsx diff --git a/.env.production b/.env.production index 06103ac..21e17fa 100644 --- a/.env.production +++ b/.env.production @@ -1 +1 @@ -API_ENDPOINT="Please Fix Me" \ No newline at end of file +API_ENDPOINT=http://localhost:8000 \ No newline at end of file diff --git a/src/pages/problems/[problemId].tsx b/src/pages/problems/[problemId].tsx deleted file mode 100644 index ba9a89b..0000000 --- a/src/pages/problems/[problemId].tsx +++ /dev/null @@ -1,265 +0,0 @@ -import useStore from "@/helpers/store"; -import dynamic from "next/dynamic"; -import { useRouter } from "next/router"; -import PromptPanel from "../../components/PromptPanel"; -import { useState, useEffect } from "react"; -import Editor, { useMonaco } from "@monaco-editor/react"; -import Link from "next/link"; -// import Shader from '@/components/canvas/ShaderExample/ShaderExample' - -// Prefer dynamic import for production builds -// But if you have issues and need to debug in local development -// comment these out and import above instead -// https://github.com/pmndrs/react-three-next/issues/49 -const Shader = dynamic( - () => import("@/components/canvas/ShaderExample/ShaderExample"), - { - ssr: false - } -); -const URL = "http://localhost:8000"; - -const editorConfig = { - theme: "vs-dark", - height: "calc(100vh - 10rem)", - defaultLanguage: "python", - options: { - minimap: { - enabled: false - }, - fontFamily: "JetBrains Mono", - fontSize: 14, - readOnly: false, - smoothScrolling: true - } -}; - -type ProblemProps = { - problemData: { - id: number; - title: string; - difficulty: "Easy" | "Medium" | "Hard"; - objectives: [string]; - examples: [ - { - input: string; - output: string; - explanation?: string; - } - ]; - starterCode: string; - timeLimit: number; - }; -}; - -// DOM elements here -const DOM = ({ problemData }: ProblemProps) => { - const monaco = useMonaco(); - const [language, setLanguage] = useState("python"); - - const [minutesLeft, setMinutesLeft] = useState(problemData.timeLimit); // minutes - const [code, setCode] = useState(problemData.starterCode); - - // updates the countdown timer - useEffect(() => { - let timer = null; - - if (minutesLeft > 0) { - timer = setInterval(() => { - setMinutesLeft(prevMinutesLeft => prevMinutesLeft - 1); - }, 60000); // 60000ms / 1 min - } - - return () => clearInterval(timer); - }, [minutesLeft]); - - // handles monaco custom theme creation: create theme -> apply the theme - useEffect(() => { - // ensures monaco instance has been created before updating the theme - if (!monaco) { - return; - } - - enum COLORS { - black = "#191919", - white = "#D6D6DD", - grey = "#6D6D6D", - yellow = "#E5C07B", - pink = "#CC8ECD", - orange = "#EFB080", - cyan = "#83D6C5", - blue = "#7ABAEE", - purple = "#AAA0FA" - } - - // 1. create custom theme - monaco.editor.defineTheme("code-clash", { - base: "vs-dark", - inherit: true, - rules: [ - // global styling - { - token: "", - foreground: COLORS.white, - background: COLORS.black, - fontStyle: "" - }, - - // white - { token: "variable", foreground: COLORS.white }, - { token: "variable", foreground: COLORS.white }, - { token: "variable.predefined", foreground: COLORS.white }, - { token: "variable.predefined", foreground: COLORS.white }, - { token: "variable.parameter", foreground: COLORS.white }, - { token: "delimiter", foreground: COLORS.white }, - { token: "attribute.value", foreground: COLORS.white }, - { token: "delimiter", foreground: COLORS.white }, - - // colorful - { token: "string", foreground: COLORS.pink }, - { token: "keyword", foreground: COLORS.cyan }, - { token: "type", foreground: COLORS.cyan }, - { token: "number", foreground: COLORS.yellow }, - { token: "comment", foreground: COLORS.grey }, - { token: "constant", foreground: COLORS.orange }, - { token: "attribute.name", foreground: COLORS.purple }, - { token: "key", foreground: COLORS.purple } - ], - colors: { - "editor.background": COLORS.black, - "editor.foreground": COLORS.white - } - }); - - // 2. set the Monaco instance to the custom theme - monaco.editor.setTheme("code-clash"); - }, [monaco]); - - const displayTimeLeft = () => { - if (minutesLeft >= 2) { - return `${minutesLeft} minutes`; - } else if (minutesLeft === 1) { - return `1 minute... Hurry!`; - } else { - return "Times up!"; - } - }; - - // store the user's input into the current state - const handleEditorChange = value => { - setCode(value); - }; - - const handleSubmit = async () => { - const body = { - language: language, - script: code - }; - - alert(`POST Body: ${JSON.stringify(body)}`); - - const res = await fetch(`${URL}/execute`, { - method: "POST", - headers: { - Accept: "application/json", - "Content-Type": "application/json" - }, - body: JSON.stringify(body) - }); - }; - - return ( - <> -
- - -
-
-

- Player 1 vs. Player 2 -

-

{displayTimeLeft()}

-
- - - -
- -
-
-
- - ); -}; - -// Canvas/R3F components here -const R3F = () => { - return <>; -}; - -export default function problem(props) { - return ( - <> - - {/* */} - - ); -} - -// export const getServerSideProps = async ({ params }) => { -// const res = await fetch(`${URL}/problems/${params.problemId}`); -// const problemData = await res.json(); - -// if (!problemData) { -// return { -// redirect: { -// destination: "/problems", -// permanent: false -// } -// }; -// } - -// return { -// props: { -// title: `Problem ${params.problemId}`, -// problemData -// } -// }; -// }; - -export const getStaticProps = async ({ params }) => { - const res = await fetch(`${URL}/problems/${params.problemId}`); - const problemData = await res.json(); - - return { - props: { - title: `Problem ${params.problemId}`, - problemData - } - }; -}; - -export const getStaticPaths = async () => { - const res = await fetch(`${URL}/problems`); - const problems = await res.json(); - - const paths = problems.map(problem => ({ - params: { problemId: "" + problem.id } - })); - - return { paths, fallback: false }; -}; From b6bbb181ddca8cb037f18c99c1ed3f9d9a30ff31 Mon Sep 17 00:00:00 2001 From: 02danieljonas <02danieljonas@gmail.com> Date: Sat, 12 Nov 2022 21:21:19 -0500 Subject: [PATCH 22/23] fixed tab heading scrollbar --- src/templates/Playground/Tabs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/templates/Playground/Tabs/index.tsx b/src/templates/Playground/Tabs/index.tsx index 53ea6af..763b78e 100644 --- a/src/templates/Playground/Tabs/index.tsx +++ b/src/templates/Playground/Tabs/index.tsx @@ -17,7 +17,7 @@ const Tabs = ({ tabs, switchTab, activeTab = 0 }: Tabs) => { borderStyles="mb-3 rounded-b-none" backgroundStyles="rounded-b-none" > -
+
{tabs.map(({ name }, index) => (
Date: Sun, 13 Nov 2022 16:23:55 -0500 Subject: [PATCH 23/23] removed unaesthetic scroll bar --- src/styles/global.css | 15 ++++++++++++++- src/templates/Playground/Tabs/index.tsx | 2 +- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/styles/global.css b/src/styles/global.css index bfc4019..ecfc70b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -17,7 +17,12 @@ @apply scroll-smooth font-jetBrains; } body { - @apply bg-[#0F1021] text-white; + @apply bg-[#0F1021] text-white overflow-x-hidden; + -ms-overflow-style: none; + scrollbar-width: none; + } + body::-webkit-scrollbar { + @apply hidden; } p { @apply text-xl font-light font-gilroy; @@ -31,6 +36,14 @@ inset 0px -40px 40px rgba(15, 16, 33, 0.2), inset 0px 4px 12px #ffffff; backdrop-filter: blur(20px); } + + .hide-scroll-bar { + -ms-overflow-style: none; + scrollbar-width: none; + } + .hide-scroll-bar::-webkit-scrollbar { + display: none; + } } /* ! Do NOT add @layer these three button classes /* diff --git a/src/templates/Playground/Tabs/index.tsx b/src/templates/Playground/Tabs/index.tsx index 763b78e..ac386b3 100644 --- a/src/templates/Playground/Tabs/index.tsx +++ b/src/templates/Playground/Tabs/index.tsx @@ -33,7 +33,7 @@ const Tabs = ({ tabs, switchTab, activeTab = 0 }: Tabs) => { {tabs[activeTab].element}