Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 776bc32

Browse files
committed
Add basic UI structure
1 parent e60b7aa commit 776bc32

File tree

9 files changed

+1475
-1048
lines changed

9 files changed

+1475
-1048
lines changed

‎src/ui/.gitignore

Lines changed: 2 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,3 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
yarn-debug.log*
6-
yarn-error.log*
7-
lerna-debug.log*
8-
.pnpm-debug.log*
9-
10-
# Diagnostic reports (https://nodejs.org/api/report.html)
11-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12-
13-
# Runtime data
14-
pids
15-
*.pid
16-
*.seed
17-
*.pid.lock
18-
19-
# Directory for instrumented libs generated by jscoverage/JSCover
20-
lib-cov
21-
22-
# Coverage directory used by tools like istanbul
23-
coverage
24-
*.lcov
25-
26-
# nyc test coverage
27-
.nyc_output
28-
29-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30-
.grunt
31-
32-
# Bower dependency directory (https://bower.io/)
33-
bower_components
34-
35-
# node-waf configuration
36-
.lock-wscript
37-
38-
# Compiled binary addons (https://nodejs.org/api/addons.html)
39-
build/Release
40-
41-
# Dependency directories
42-
node_modules/
43-
jspm_packages/
44-
45-
# Snowpack dependency directory (https://snowpack.dev/)
46-
web_modules/
47-
48-
# TypeScript cache
49-
*.tsbuildinfo
50-
51-
# Optional npm cache directory
52-
.npm
53-
54-
# Optional eslint cache
55-
.eslintcache
56-
57-
# Optional stylelint cache
58-
.stylelintcache
59-
60-
# Microbundle cache
61-
.rpt2_cache/
62-
.rts2_cache_cjs/
63-
.rts2_cache_es/
64-
.rts2_cache_umd/
65-
66-
# Optional REPL history
67-
.node_repl_history
68-
69-
# Output of 'npm pack'
70-
*.tgz
71-
72-
# Yarn Integrity file
73-
.yarn-integrity
74-
75-
# dotenv environment variable files
76-
.env
77-
.env.development.local
78-
.env.test.local
79-
.env.production.local
80-
.env.local
81-
82-
# parcel-bundler cache (https://parceljs.org/)
83-
.cache
84-
.parcel-cache
85-
86-
# Next.js build output
87-
.next
1+
node_modules
882
out
89-
90-
# Nuxt.js build / generate output
91-
.nuxt
92-
dist
93-
94-
# Gatsby files
95-
.cache/
96-
# Comment in the public line in if your project uses Gatsby and not Next.js
97-
# https://nextjs.org/blog/next-9-1#public-directory-support
98-
# public
99-
100-
# vuepress build output
101-
.vuepress/dist
102-
103-
# vuepress v2.x temp and cache directory
104-
.temp
105-
.cache
106-
107-
# Docusaurus cache and generated files
108-
.docusaurus
109-
110-
# Serverless directories
111-
.serverless/
112-
113-
# FuseBox cache
114-
.fusebox/
115-
116-
# DynamoDB Local files
117-
.dynamodb/
118-
119-
# TernJS port file
120-
.tern-port
121-
122-
# Stores VSCode versions used for testing VSCode extensions
123-
.vscode-test
124-
125-
# yarn v2
126-
.yarn/cache
127-
.yarn/unplugged
128-
.yarn/build-state.yml
129-
.yarn/install-state.gz
130-
.pnp.*
3+
ProblemBuildsDir.tmp

‎src/ui/directory-manager.js

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
const path = require('path');
2+
const fs = require('fs');
3+
4+
global.dirDict = null;
5+
global.languages = null;
6+
global.problemNames = null;
7+
8+
LANGUAGES_DIR_NAME = "languages";
9+
PROBLEMS_DIR_NAME = "problems";
10+
11+
function getProblemBuildsDirTmpFile() {
12+
return path.resolve("ProblemBuildsDir.tmp")
13+
}
14+
15+
function readMdFile(filePath) {
16+
const marked = require('marked');
17+
marked.setOptions({
18+
breaks: false,
19+
});
20+
const data = fs.readFileSync(filePath, 'utf8');
21+
if (!data) {
22+
throw new Error(`File does not exist: ${filePath}`);
23+
}
24+
return marked.marked(data);
25+
}
26+
27+
function populateLanguages(languagesDir) {
28+
var languages = [];
29+
fs.readdirSync(languagesDir).forEach(language => {
30+
languages.push(language);
31+
});
32+
return languages;
33+
}
34+
35+
function populateProblems(problemsDir) {
36+
var problems = [];
37+
fs.readdirSync(problemsDir).forEach(problemName => {
38+
problems.push(problemName);
39+
});
40+
return problems;
41+
}
42+
43+
function calculateDirectories() {
44+
if (global.dirDict) {
45+
return;
46+
}
47+
48+
const problemBuildsDir =
49+
fs.readFileSync(getProblemBuildsDirTmpFile(), 'utf8');
50+
51+
if (!problemBuildsDir) {
52+
throw new Error("Problem builds directory does not exist: " +
53+
"${problemBuildsDir}");
54+
}
55+
56+
localDirDict = {};
57+
58+
const problemsDir = path.join(problemBuildsDir, PROBLEMS_DIR_NAME);
59+
if (!fs.existsSync(problemsDir)) {
60+
throw new Error(`Problems directory does not exist: ${problemsDir}`);
61+
}
62+
63+
const languagesDir = path.join(problemBuildsDir, LANGUAGES_DIR_NAME);
64+
if (!fs.existsSync(languagesDir)) {
65+
throw new Error(`Languages directory does not exist: ${languagesDir}`);
66+
}
67+
68+
const languages = populateLanguages(languagesDir);
69+
const problemNames = populateProblems(problemsDir);
70+
71+
fs.readdirSync(problemsDir).forEach(problemName => {
72+
// For now assume cpp, later expand to all languages
73+
const language = "cpp";
74+
const problemDir = path.join(problemsDir, problemName);
75+
const descriptionFile = path.join(problemDir, 'description.md');
76+
const solutionFile = path.join(problemDir, language, 'solution.md');
77+
const userSolutionFilename = path.join(problemDir, language, 'solution.cpp');
78+
79+
// check if userSolutionFilename exissts
80+
if (!fs.existsSync(userSolutionFilename)) {
81+
throw new Error(`User solution file does not exist: ${userSolutionFilename}`);
82+
}
83+
84+
global.localDirDict[problemName] =
85+
global.localDirDict[problemName] || {};
86+
global.localDirDict[problemName]["description"] =
87+
readMdFile(descriptionFile);
88+
global.localDirDict[problemName][language] =
89+
global.localDirDict[problemName][language] || {};
90+
global.localDirDict[problemName][language]["solution"] =
91+
readMdFile(solutionFile);
92+
global.localDirDict[problemName][language]
93+
["user-solution-filename"] = userSolutionFilename;
94+
});
95+
96+
global.dirDict = localDirDict;
97+
global.languages = languages;
98+
global.problemNames = problemNames;
99+
}
100+
101+
class DirectoryManager {
102+
constructor() {
103+
console.log("Initializing DirectoryManager");
104+
calculateDirectories();
105+
}
106+
107+
getDescription(problemName) {
108+
return global.dirDict[problemName]["description"];
109+
}
110+
111+
getSolution(problemName) {
112+
return global.dirDict[problemName]["cpp"]["solution"];
113+
}
114+
115+
getUserSolutionFilename(problemName) {
116+
return global.dirDict[problemName]["cpp"]["user-solution-filename"];
117+
}
118+
119+
getLanguages() {
120+
return [...global.languages];
121+
}
122+
123+
getProblemNames() {
124+
return [...global.problemNames];
125+
}
126+
}
127+
128+
module.exports = {
129+
DirectoryManager,
130+
getProblemBuildsDirTmpFile
131+
};

‎src/ui/index.html

Lines changed: 60 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,67 @@
11
<!DOCTYPE html>
2-
<htmllang="en">
2+
<html>
33
<head>
4-
<meta charset="UTF-8"/>
5-
<metaname="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
4+
<meta charset="UTF-8">
5+
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
6+
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline';">
77
<title>OpenLeetCode</title>
8+
<link rel="stylesheet" type="text/css" href="styles.css">
9+
<script src="index.js"></script>
810
</head>
911
<body>
10-
<div id="root"></div>
12+
<div class="panel root-panel"></div>
13+
<div class="control-panel">
14+
<label class="label problem-label" for="problem-select">Problem:</label>
15+
<select id="problem-select">
16+
</select>
17+
<button id="run-button">▶ Run</button>
18+
</div>
19+
<div class="panel">
20+
<!-- Left Panel -->
21+
<div id="left-panel" class="panel panel-col">
22+
<div class="tab-panel panel-item-fixed-height">
23+
<div class="tab">Description</div>
24+
<div class="tab-separator"></div>
25+
<div class="tab">Solution</div>
26+
</div>
27+
<div id="tab-description" class="tab-content tab-content-left active">
28+
<div class="markdown-content content" id="description-content"></div>
29+
</div>
30+
<div id="tab-solution" class="tab-content tab-content-left">
31+
<div class="markdown-content content" id="solution-content"></div>
32+
</div>
33+
<!-- Add more tab content panes as needed -->
34+
</div>
35+
<!-- Right Panel -->
36+
<div id="right-panel" class="panel panel-col panel-item">
37+
<!-- Right Panel TOP -->
38+
<div id="top-right-panel" class="panel-item panel-left panel panel-col">
39+
<div class="tab-panel">Code</div>
40+
<div id="user-solution-content" class="panel panel-item">
41+
</div>
42+
</div>
43+
<!-- Right Panel BOTTOM -->
44+
<div id="bottom-right-panel" class="panel-item">
45+
<div class="tab-panel">
46+
<div class="tab">Testcase</div>
47+
<div class="tab-separator"></div>
48+
<div class="tab">Test Results</div>
49+
<div class="tab-separator"></div>
50+
<div class="tab">Compilation</div>
51+
</div>
52+
<div id="tab-testcase" class="tab-content content active">
53+
<div class="testcase-content" id="testcase-content content">
54+
</div>
55+
</div>
56+
<div id="tab-test-results" class="tab-test-results content">
57+
<div class="test-results-content" id="test-results-content"></div>
58+
</div>
59+
<div id="tab-compilation" class="tab-compilation content">
60+
<div class="compilation-content" id="compilation-content"></div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
1166
</body>
1267
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /