diff --git a/package-lock.json b/package-lock.json index cd606935..4a36cfa9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.11.2" }, "devDependencies": { "@types/react": "^18.0.28", @@ -766,6 +767,14 @@ "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, + "node_modules/@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -1226,6 +1235,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "dependencies": { + "@remix-run/router": "1.6.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "dependencies": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -1853,6 +1892,11 @@ } } }, + "@remix-run/router": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.6.2.tgz", + "integrity": "sha512-LzqpSrMK/3JBAVBI9u3NWtOhWNw5AMQfrUFYB0+bDHTSw17z++WJLsPsxAuK+oSddsxk4d7F/JcdDPM1M5YAhA==" + }, "@types/prop-types": { "version": "15.7.5", "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz", @@ -2176,6 +2220,23 @@ "integrity": "sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==", "dev": true }, + "react-router": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.11.2.tgz", + "integrity": "sha512-74z9xUSaSX07t3LM+pS6Un0T55ibUE/79CzfZpy5wsPDZaea1F8QkrsiyRnA2YQ7LwE/umaydzXZV80iDCPkMg==", + "requires": { + "@remix-run/router": "1.6.2" + } + }, + "react-router-dom": { + "version": "6.11.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.11.2.tgz", + "integrity": "sha512-JNbKtAeh1VSJQnH6RvBDNhxNwemRj7KxCzc5jb7zvDSKRnPWIFj9pO+eXqjM69gQJ0r46hSz1x4l9y0651DKWw==", + "requires": { + "@remix-run/router": "1.6.2", + "react-router": "6.11.2" + } + }, "resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", diff --git a/package.json b/package.json index 154dd4dd..208323e3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.11.2" }, "devDependencies": { "@types/react": "^18.0.28", diff --git a/src/App.css b/src/App.css index b9d355df..e2a79019 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,222 @@ #root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + font-family: "Courier 10 Pitch", sans-serif; + font-size: small; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; +@media (prefers-reduced-motion: no-preference) { + a:nth-of-type(2) .logo { + animation: logo-spin infinite 20s linear; + } } -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); + +#f-leetcode-header { + float: left; + font-size: x-large; } -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); + +header { + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + top: 0; + left: 0; + width: 100%; + background-color: black; + color: white; + /*border: 1px solid red;*/ } -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +header ul { + list-style: none; + margin: 0; + float: right; } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +header ul li { + display: inline-block; + color: white; + margin: 0; + padding: 0 1em; +} + +header a { + color: inherit; + text-decoration: none; +} + +.login-screen { + display: flex; + position: relative; + inset: 0; + justify-content: center; +} + +.login { + border: 1px solid black; + border-radius: 5px; + width: 50%; + display: flex; + flex-direction: column; + justify-items: center; + align-items: center; + padding: 1em; +} + +.input-div { + width: 60%; + margin: 0; +} + +.input-div input { + width: 100%; + height: 1.75em; +} + +.input-mini-div { + padding: 1em 0; +} + +.input-validation-msg { + text-align: initial; + color: red; + font-size: xx-small; + height: 1em; +} + +.actions { + width: 100%; + display: flex; + justify-content: space-between; +} + +.login button { + padding: .75em 1.5em; + background-color: teal; + border: none; + border-radius: 5px; + color: white; + margin: 1em 0; +} + +.signup-btn { + margin: 1em; +} + +/*Problem Set*/ + +.problem-set-screen table { + /*border: 1px solid grey;*/ + border-radius: 5px; + background-color: dimgrey; + padding: 1em; +} + +.problem-set-screen td { + outline: 1px solid floralwhite; + color: whitesmoke; + margin: 0; + padding: 1em; +} + +.problem-set-screen tr:hover { + background-color: grey; +} + +.problem-set-screen .medium { + color: yellow; +} + +.problem-set-screen .hard { + color: red; +} + +.problem-set-screen .easy { + color: green; +} + +.problem { + display: flex; + width: 100%; + /*border: 1px solid blue;*/ + justify-content: space-between; +} + +.problem-details { + /*border: 1px solid black;*/ + width: 49%; + padding: 0.2em; +} + +.problem-details .problem-level.hard { + padding: 0.1em .6em; + border-radius: 10em; + background-color: rgba(255, 0, 0, 0.5); +} + +.problem-details .problem-level.easy { + padding: 0.1em .6em; + border-radius: 10em; + background-color: rgba(0, 255, 0, 0.5); +} + +.problem-details .problem-level.medium { + padding: 0.1em .6em; + border-radius: 10em; + background-color: rgba(255, 234, 0, 0.31); +} + +.question-stats { + margin: 0 0.5em; + padding: 0.5em; + display: inline-block; +} + +.question-example { + padding: 0.1em 0.5em; + margin: 1em 0; + background: rgba(0, 0, 0, 0.1); +} + +.question-example h5 { + margin: 0.5em 0; +} + +.constraints { + margin: 0.5em 0; +} + +.constraints h5 { + margin: 0; +} + +.constraints ul { + margin: 0; +} + +.playground { + /*border: 1px solid red;*/ + width: 49%; + padding: 0.5em; +} + +.languages { + margin: 0.5em 0; } -.card { - padding: 2em; +.code-space { + width: 100%; + height: 90%; + resize: none; } -.read-the-docs { - color: #888; +a { + text-decoration: none; } + +.table-row { + display: table-row; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 7743965b..a541883b 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,26 +1,10 @@ -/* - * Temporary problems array schema - */ -const problems = [{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "42%" -},{ - title: "201. Bitwise AND of Numbers Range", - difficulty: "Medium", - acceptance: "412%" -}, - { - title: "202. Happy Number", - difficulty: "Easy", - acceptance: "54.9%" - }, - { - title: "203. Remove Linked List Elements", - difficulty: "Hard", - acceptance: "42%" - }]; - +import {Route, Routes, Link, BrowserRouter} from "react-router-dom"; +import Login from "./components/login.jsx"; +import Signup from "./components/signup.jsx"; +import Problem from "./components/problem.jsx"; +import ProblemSet from "./components/problemSet.jsx"; +import "./App.css" +import Home from "./components/home.jsx"; function App() { @@ -32,28 +16,26 @@ function App() { */ return ( -
- Finish the assignment! Look at the comments in App.jsx as a starting point -
- ) -} + + {/*Finish the assignment! Look at the comments in App.jsx as a starting point*/} +
+ F-leetcode + +
+ + }/> + }/> + }/> + }/> + }/> -// A demo component -function ProblemStatement(props) { - const title = props.title; - const acceptance = props.acceptance; - const difficulty = props.difficulty; - - return - - {title} - - - {acceptance} - - - {difficulty} - - + + + ) } + export default App diff --git a/src/components/home.jsx b/src/components/home.jsx new file mode 100644 index 00000000..b8dee5ef --- /dev/null +++ b/src/components/home.jsx @@ -0,0 +1,7 @@ +function Home() { + return ( +
Home
+ ) +} + +export default Home \ No newline at end of file diff --git a/src/components/login.jsx b/src/components/login.jsx new file mode 100644 index 00000000..20a4c768 --- /dev/null +++ b/src/components/login.jsx @@ -0,0 +1,25 @@ +function Login() { + return ( +
+
+

F-leetcode

+
+
+ +
+
+
+ +
+
+
+ + +
+
+
+
+ ) +} + +export default Login \ No newline at end of file diff --git a/src/components/problem.jsx b/src/components/problem.jsx new file mode 100644 index 00000000..16c13c31 --- /dev/null +++ b/src/components/problem.jsx @@ -0,0 +1,96 @@ +import languages from "../languages.js"; +import problems from "../problemList.js"; +import {useParams} from "react-router-dom"; + +function Problem() { + const {problemId} = useParams() + const problem = problems.find(problem => problemId == problem.id) + + function renderExamples() { + return ( +
+ { + problem.examples.map((example, idx) => { + return ( +
+
{`Example${idx + 1}:`}
+ {/*
*/} +
+ {`Input: ${example.input}`} +
+ {`Output: ${example.output}`} +
+ {example.explanation !== undefined ? `Explanation: ${example.explanation}` : null} +
+
+ ) + }) + } +
+ ) + } + + function renderConstraints() { + return ( +
+
Constraints:
+ +
+ ) + } + + function renderLanguageSelection() { + return ( +
+ +
+ ) + } + + return ( +
+
+

{`${problem.id}. ${problem.title}`}

+ {problem.difficulty} + {`Accepted: ${problem.accepted}`} + {`Submitted: ${problem.submitted}`} + {`Acceptance Rate: ${Math.round(problem.accepted / problem.submitted * 100)}`}% +

+ {problem.description} +

+ {renderExamples()} + {renderConstraints()} +
+
+ {renderLanguageSelection()} +