Skip to content

Commit 4485a76

Browse files
Angelo WuAngelo Wu
Angelo Wu
authored and
Angelo Wu
committed
Merge branch 'dev' of github.com:devsoc-unsw/structs.sh into dev
2 parents e5557e3 + d29fc76 commit 4485a76

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1213
-517
lines changed

‎README.md‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<a href=""><img src="./images/StructsBanner.png" /></a>
55
</p>
66
<p align="center">
7-
<img src="https://img.shields.io/badge/-CSESoc-blue" />
7+
<img src="https://img.shields.io/badge/DevSoc-blue" />
88
<img src="https://img.shields.io/github/issues/csesoc/structs.sh" />
99
<img src="https://img.shields.io/github/license/csesoc/structs.sh" />
1010
<img src="https://img.shields.io/github/last-commit/csesoc/structs.sh" />
@@ -28,13 +28,19 @@ Structs.sh is an interactive data structure and algorithm visualiser and educati
2828

2929
## Features:
3030

31-
- Algorithm visualisation
32-
- Interactive animation player for visualising fundamental operations on classic data structures such as linked lists, binary search trees, graphs, etc.
33-
- Control the visualiser through an integrated terminal
34-
- Hub for educational computer science content and teaching resources
35-
- Lessons, videos, reference implementations in specific programming languages, all in one place
36-
- Content management system
37-
- Create new topics, source code snippets, lessons and quizzes
31+
- **Algorithm Visualiser**
32+
- Interactive animated visualisations of classic data structures and algorithms \- including but not limited to linked lists, binary search trees, AVL trees and more!
33+
<p align="center">
34+
<img src="images/landing-page.png" alt="Landing page" width="600px">
35+
<img src="images/tree-visualiser.png" alt="Tree Visualiser" width="600px">
36+
</p>
37+
38+
- **Visual Debugger**
39+
- Interactive debugger that allows users to debug and visualise data structures in their own C code.
40+
- Currently supports linked lists.
41+
<p align="center">
42+
<img src="images/debugger-linked-list.png" alt="Landing page" width="600px">
43+
</p>
3844

3945
---
4046

‎client/src/components/Navbars/DevelopmentModeNavbar.tsx‎

Lines changed: 46 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import classNames from 'classnames';
99
import { Tooltip } from '@mui/material';
1010
import { useEffect, useState } from 'react';
1111
import { useNavigate } from 'react-router-dom';
12+
import DarkModeIcon from '@mui/icons-material/DarkMode';
13+
import LightModeIcon from '@mui/icons-material/LightMode';
14+
import { useTheme } from '../../visualiser-debugger/Contexts/ThemeContexts';
1215

1316
const DevelopmentModeNavbar = ({
1417
onButtonClick,
@@ -24,6 +27,12 @@ const DevelopmentModeNavbar = ({
2427
}
2528
}, [navigateHomePage]);
2629

30+
const { darkMode, toggleDarkMode } = useTheme();
31+
const handleDarkModeToggle = (e: React.MouseEvent<HTMLElement>) => {
32+
e.stopPropagation();
33+
toggleDarkMode();
34+
};
35+
2736
return (
2837
<div className={styles.navBar}>
2938
<div
@@ -36,30 +45,44 @@ const DevelopmentModeNavbar = ({
3645
<h4>Structs.sh</h4>
3746
</span>
3847
</div>
39-
<div style={{ marginLeft: '82vw' }} />
40-
<Tooltip title="Start Onboarding">
41-
<button
42-
className={classNames(dialogStyles.OnboardingButton, 'onboardingButton')}
43-
onClick={onButtonClick}
44-
type="button"
45-
aria-label="Start Onboardings"
46-
>
47-
<BookIcon />
48-
</button>
49-
</Tooltip>
50-
<div className={styles.navItem}>
51-
<Dialog
52-
trigger={
53-
<button className={dialogStyles.IconButton} aria-label="Info" type="button">
54-
<InfoCircledIcon />
48+
<div className={styles.navItemsContainer}>
49+
<div className={styles.navItem}>
50+
<Tooltip title={darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}>
51+
<button
52+
className={classNames(dialogStyles.IconButton, 'darkmodeButton')}
53+
onClick={handleDarkModeToggle}
54+
type="button"
55+
aria-label={darkMode ? 'Turn off Dark Mode' : 'Turn On Dark Mode'}
56+
>
57+
{darkMode ? <LightModeIcon /> : <DarkModeIcon />}
5558
</button>
56-
}
57-
>
58-
<DialogTitle>Development Mode</DialogTitle>
59-
<DialogDescription>
60-
<AboutText />
61-
</DialogDescription>
62-
</Dialog>
59+
</Tooltip>
60+
</div>
61+
{/* <div style={{ marginLeft: '82vw' }} /> */}
62+
<Tooltip title="Start Onboarding">
63+
<button
64+
className={classNames(dialogStyles.IconButton, 'onboardingButton')}
65+
onClick={onButtonClick}
66+
type="button"
67+
aria-label="Start Onboardings"
68+
>
69+
<BookIcon />
70+
</button>
71+
</Tooltip>
72+
<div className={styles.navItem}>
73+
<Dialog
74+
trigger={
75+
<button className={dialogStyles.IconButton} aria-label="Info" type="button">
76+
<InfoCircledIcon />
77+
</button>
78+
}
79+
>
80+
<DialogTitle>Development Mode</DialogTitle>
81+
<DialogDescription>
82+
<AboutText />
83+
</DialogDescription>
84+
</Dialog>
85+
</div>
6386
</div>
6487
</div>
6588
);

‎client/src/styles/Configuration.module.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,3 +83,4 @@
8383
.indentedAnnotationArea {
8484
margin-left: 1.4rem;
8585
}
86+

‎client/src/styles/DevelopmentMode.module.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,55 @@
11
@import '@radix-ui/colors/slate.css';
22
@import '@radix-ui/colors/slate-dark.css';
3+
@import '@radix-ui/colors/violet.css';
34
@import './global.module.css';
45

6+
/* Light theme scrollbar (default) */
7+
.light ::-webkit-scrollbar-track {
8+
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
9+
background-color: #f5f5f5;
10+
}
11+
12+
.light ::-webkit-scrollbar {
13+
width: 6px;
14+
background-color: #f5f5f5;
15+
}
16+
17+
.light ::-webkit-scrollbar-thumb {
18+
background-color: #141414;
19+
}
20+
21+
/* Dark theme scrollbar */
22+
.dark ::-webkit-scrollbar-track {
23+
box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.1);
24+
background-color: #333;
25+
}
26+
27+
.dark ::-webkit-scrollbar {
28+
width: 6px;
29+
background-color: #333;
30+
}
31+
32+
.dark ::-webkit-scrollbar-thumb {
33+
background-color: #666;
34+
}
35+
36+
.light {
37+
--text-primary: black;
38+
--text-secondary: grey;
39+
--bg-primary: #f7f7f7;
40+
--bg-secondary: #e0e0e0;
41+
--border-color: #e0e0e0;
42+
--icon-primary: var(--violet-11);
43+
}
44+
45+
.dark {
46+
--text-primary: white;
47+
--text-secondary: #aaaaaa;
48+
--bg-primary: #333333;
49+
--bg-secondary: #444444;
50+
--border-color: #555555;
51+
--icon-primary: white;
52+
}
553

654
.layout {
755
display: grid;

‎client/src/styles/DevelopmentModeNavBar.module.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,13 @@
1313
cursor: pointer;
1414
}
1515

16+
.navItemsContainer{
17+
display: flex;
18+
align-items: center; /* Center items vertically */
19+
gap: 15px; /* Space between items */
20+
padding-right: 15px; /* Add some padding from the right edge */
21+
}
22+
1623
.test {
1724
background-color: red;
1825
}

‎client/src/styles/Dialog.module.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ input {
6262
align-items: center;
6363
justify-content: center;
6464
color: var(--violet-11);
65-
position: absolute;
66-
top: 10px;
67-
right: 10px;
65+
/* position: absolute; */
66+
/* top: 10px;
67+
right: 10px; */
6868
}
6969
.IconButton:hover {
7070
background-color: var(--violet-4);
@@ -126,4 +126,4 @@ input {
126126
opacity: 1;
127127
transform: translate(-50%, -50%) scale(1);
128128
}
129-
}
129+
}

‎client/src/styles/Select.module.css‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
@import '@radix-ui/colors/black-alpha.css';
22
@import '@radix-ui/colors/mauve.css';
33
@import '@radix-ui/colors/violet.css';
4+
@import '@radix-ui/colors/slate.css';
5+
@import '@radix-ui/colors/slate-dark.css';
46

57
/* reset */
68
button {
@@ -17,27 +19,27 @@ button {
1719
line-height: 1;
1820
height: 20px;
1921
gap: 5px;
20-
background-color: white;
21-
color: var(--violet-11);
22-
box-shadow: 0 2px 10px var(--black-a7);
22+
background-color: var(--slate-2);
23+
color: var(--violet-9);
24+
box-shadow: 0 2px 10px var(--slate-5);
2325
}
2426
.SelectTrigger:hover {
2527
background-color: var(--mauve-3);
2628
}
2729
.SelectTrigger:focus {
28-
box-shadow: 0 0 0 2px black;
30+
box-shadow: 0 0 0 2px var(--slate-10);
2931
}
3032
.SelectTrigger[data-placeholder] {
3133
color: var(--violet-9);
3234
}
3335

3436
.SelectIcon {
35-
color: Var(--violet-11);
37+
color: var(--violet-11);
3638
}
3739

3840
.SelectContent {
3941
overflow: hidden;
40-
background-color: white;
42+
background-color: var(--slate-2);
4143
border-radius: 6px;
4244
box-shadow:
4345
0px 10px 38px -10px rgba(22, 23, 24, 0.35),
@@ -97,7 +99,7 @@ button {
9799
align-items: center;
98100
justify-content: center;
99101
height: 25px;
100-
background-color: white;
102+
background-color: var(--slate-2);
101103
color: var(--violet-11);
102104
cursor: default;
103105
}

‎client/src/visualiser-debugger/Component/CodeEditor/CodeEditor.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,13 @@ import 'ace-builds/src-noconflict/mode-c_cpp';
44
import 'ace-builds/src-noconflict/snippets/c_cpp';
55
import 'ace-builds/src-noconflict/ext-language_tools';
66
import 'ace-builds/src-noconflict/theme-tomorrow';
7+
import 'ace-builds/src-noconflict/theme-tomorrow_night';
78
import { useState, useEffect } from 'react';
89
import { onboardingStore } from 'visualiser-debugger/Store/onboardingStore';
910
import { useUserFsStateStore } from '../../Store/userFsStateStore';
1011
import { IFileFileNode } from '../FileTree/FS/IFileSystem';
1112
import { useFrontendStateStore } from '../../Store/frontendStateStore';
13+
import { useTheme } from '../../Contexts/ThemeContexts';
1214

1315
const CodeEditor: React.FC = () => {
1416
const currBackendState = useFrontendStateStore((store) => {
@@ -18,6 +20,7 @@ const CodeEditor: React.FC = () => {
1820
const { setOnboardingCurrFile } = onboardingStore();
1921
const [currFile, setCurrFile] = useState<IFileFileNode | undefined>(undefined);
2022
const [code, setCode] = useState('');
23+
const { darkMode } = useTheme();
2124

2225
useEffect(() => {
2326
// Update currFile based on currFocusFilePath
@@ -52,7 +55,7 @@ const CodeEditor: React.FC = () => {
5255
value={code}
5356
onChange={handleSetCode}
5457
mode="c_cpp"
55-
theme="tomorrow"
58+
theme={darkMode ? 'tomorrow_night' : 'tomorrow'}
5659
height="100%"
5760
width="100%"
5861
markers={markers}

‎client/src/visualiser-debugger/Component/Configuration/StackVarDeclaration.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import React, { useEffect, useState } from 'react';
33
import styles from 'styles/Configuration.module.css';
44
import { ChevronDownIcon } from '@radix-ui/react-icons';
55
import SyntaxHighlighter from 'react-syntax-highlighter';
6-
import { github } from 'react-syntax-highlighter/dist/esm/styles/hljs';
6+
import { github, dark } from 'react-syntax-highlighter/dist/esm/styles/hljs';
77
import { MotionCollapse } from './MotionCollapse';
88
import './typeAnnotation.css';
99
import { StackVariableRole } from '../../Types/annotationType';
1010
import { MemoryValue, isPointerType } from '../../Types/backendType';
1111
import { useGlobalStore } from '../../Store/globalStateStore';
12+
import { useTheme } from '../../Contexts/ThemeContexts';
1213

1314
export type StackVariableAnnotationProp = {
1415
name: string;
@@ -30,6 +31,7 @@ export const StackVarAnnotation: React.FC<StackVariableAnnotationProp> = ({
3031
(state) => state.visualizer.userAnnotation.stackAnnotation
3132
);
3233
const updateStackAnnotation = useGlobalStore((state) => state.updateStackAnnotation);
34+
const { darkMode } = useTheme();
3335

3436
// Annotate by default if the variable contains a pointer
3537
useEffect(() => {
@@ -51,7 +53,11 @@ export const StackVarAnnotation: React.FC<StackVariableAnnotationProp> = ({
5153
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
5254
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'start' }}>
5355
<span>
54-
<SyntaxHighlighter language="c" style={github} className="syntax-highlighter-custom">
56+
<SyntaxHighlighter
57+
language="c"
58+
style={darkMode ? dark : github}
59+
className="syntax-highlighter-custom"
60+
>
5561
{`${memoryValue.typeName} ${name}`}
5662
</SyntaxHighlighter>
5763
</span>
@@ -60,7 +66,12 @@ export const StackVarAnnotation: React.FC<StackVariableAnnotationProp> = ({
6066
<div style={{ fontSize: '0.8rem' }}>
6167
<button
6268
type="button"
63-
style={{ color: selectedRole === StackVariableRole.Empty ? 'grey' : 'black' }}
69+
style={{
70+
color:
71+
selectedRole === StackVariableRole.Empty
72+
? 'var(--text-secondary)'
73+
: 'var(--text-primary)',
74+
}}
6475
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
6576
>
6677
{selectedRole}
@@ -92,8 +103,8 @@ export const StackVarAnnotation: React.FC<StackVariableAnnotationProp> = ({
92103
setIsDropdownOpen(false);
93104
}}
94105
style={{
95-
background: '#f7f7f7',
96-
border: '1px solid #e0e0e0',
106+
background: 'var(--bg-primary)',
107+
border: '1px solid var(--border-color)',
97108
paddingTop: '3px',
98109
paddingBottom: '3px',
99110
paddingRight: '5px',
@@ -104,10 +115,10 @@ export const StackVarAnnotation: React.FC<StackVariableAnnotationProp> = ({
104115
transition: 'background 0.2s',
105116
}}
106117
onMouseEnter={(e) => {
107-
e.currentTarget.style.background = '#e0e0e0';
118+
e.currentTarget.style.background = 'var(--bg-secondary)';
108119
}}
109120
onMouseLeave={(e) => {
110-
e.currentTarget.style.background = '#f7f7f7';
121+
e.currentTarget.style.background = 'var(--bg-primary)';
111122
}}
112123
>
113124
{role[1]}

0 commit comments

Comments
 (0)