this repo has no description
layout: placeholder right bar
+119
-15
+23
app/src/lib/components/Editor.tsx
+23
app/src/lib/components/Editor.tsx
···
1
+
import { javascript } from '@codemirror/lang-javascript';
2
+
import { EditorView, basicSetup } from 'codemirror';
3
+
import { onCleanup, onMount } from 'solid-js';
4
+
import type { JSX } from 'solid-js';
5
+
6
+
type Props = { initialValue?: string } & JSX.HTMLAttributes<HTMLDivElement>;
7
+
8
+
export function Editor(props: Props) {
9
+
let ref: HTMLDivElement;
10
+
let view: EditorView | null;
11
+
12
+
onMount(() => {
13
+
view = new EditorView({
14
+
doc: props.initialValue,
15
+
extensions: [basicSetup, javascript()],
16
+
parent: ref!,
17
+
});
18
+
});
19
+
20
+
onCleanup(() => view?.destroy());
21
+
22
+
return <div ref={ref!} {...props} />;
23
+
}
+69
app/src/lib/components/RealtimeScoreboard.tsx
+69
app/src/lib/components/RealtimeScoreboard.tsx
···
1
+
import type { JSX } from 'solid-js';
2
+
3
+
interface TestItem {
4
+
id: string;
5
+
name?: string;
6
+
description?: string;
7
+
passing: boolean;
8
+
}
9
+
10
+
function RealtimeScoreboardTestItem(props: TestItem) {
11
+
return (
12
+
<li
13
+
data-passing={props.passing}
14
+
class="flex flex-col gap-1 border border-border rounded-xl px-3 py-2 group"
15
+
>
16
+
<div class="flex items-center justify-between">
17
+
<span>
18
+
Test #{props.id}
19
+
{props.name ? ` - ${props.name}` : ''}
20
+
</span>
21
+
<span class="text-sm font-medium text-error group-data-[passing=true]:text-success">
22
+
{props.passing ? 'Passing' : 'Failing'}
23
+
</span>
24
+
</div>
25
+
{!props.passing && props.description && (
26
+
<p class="text-xs text-error font-mono">{props.description}</p>
27
+
)}
28
+
</li>
29
+
);
30
+
}
31
+
32
+
const EXAMPLE_TESTS: Array<TestItem> = [
33
+
{ id: '1', name: 'Reverses a single node tree', passing: true },
34
+
{ id: '2', name: 'Reverses a complete binary tree', passing: true },
35
+
{ id: '3', name: 'Handles null root', passing: true },
36
+
{
37
+
id: '4',
38
+
name: 'Reverses an unbalanced tree',
39
+
description: 'Expected right subtree depth 3, but got 1',
40
+
passing: false,
41
+
},
42
+
{ id: '5', name: 'Preserves node values after reversal', passing: true },
43
+
{
44
+
id: '6',
45
+
name: 'Double reversal returns original',
46
+
description: 'Trees are not structurally equal after double reversal',
47
+
passing: false,
48
+
},
49
+
{ id: '7', name: 'Reverses tree with only left children', passing: true },
50
+
];
51
+
52
+
type Props = JSX.HTMLAttributes<HTMLDivElement>;
53
+
54
+
export function RealtimeScoreboard(props: Props) {
55
+
return (
56
+
<div {...props}>
57
+
<h2 class="text-lg font-semibold">Reverse Binary Tree</h2>
58
+
<p class="text-sm text-muted-foreground mt-1">
59
+
Realtime test results for reversing a binary tree.
60
+
</p>
61
+
<div class="h-px bg-text mt-2" />
62
+
<ul class="flex flex-col gap-2 mt-2">
63
+
{EXAMPLE_TESTS.map((test) => (
64
+
<RealtimeScoreboardTestItem {...test} />
65
+
))}
66
+
</ul>
67
+
</div>
68
+
);
69
+
}
+21
-15
app/src/routes/index.tsx
+21
-15
app/src/routes/index.tsx
···
1
-
import { javascript } from '@codemirror/lang-javascript';
2
1
import { createFileRoute } from '@tanstack/solid-router';
3
-
import { EditorView, basicSetup } from 'codemirror';
4
-
import { onCleanup, onMount } from 'solid-js';
2
+
3
+
import { Editor } from '@/Editor';
4
+
import { RealtimeScoreboard } from '@/RealtimeScoreboard';
5
5
6
6
export const Route = createFileRoute('/')({
7
7
component: RouteComponent,
8
8
});
9
9
10
-
function RouteComponent() {
11
-
let ref: HTMLDivElement;
12
-
let view: EditorView;
13
-
14
-
onMount(() => {
15
-
view = new EditorView({
16
-
extensions: [basicSetup, javascript()],
17
-
parent: ref!,
18
-
});
19
-
});
10
+
const BASE_CODE = `class TreeNode {
11
+
constructor(val, left = null, right = null) {
12
+
this.val = val;
13
+
this.left = left;
14
+
this.right = right;
15
+
}
16
+
}
20
17
21
-
onCleanup(() => view?.destroy());
18
+
function invertTree(root) {
19
+
// TODO: implement
20
+
}
21
+
`;
22
22
23
-
return <div ref={ref!} />;
23
+
function RouteComponent() {
24
+
return (
25
+
<div class="flex flex-row">
26
+
<Editor class="flex-1" initialValue={BASE_CODE} />
27
+
<RealtimeScoreboard class="w-1/2 p-2" />
28
+
</div>
29
+
);
24
30
}
+6
app/src/styles.css
+6
app/src/styles.css
···
20
20
--border: var(--color-zinc-400);
21
21
--border-input: var(--color-zinc-300);
22
22
--bg-input: var(--color-white);
23
+
--success: hsl(142 71% 30%);
24
+
--error: var(--color-red-600);
23
25
24
26
@variant dark {
25
27
--background: hsl(0 0% 5%);
···
29
31
--border: var(--color-zinc-700);
30
32
--border-input: var(--color-zinc-800);
31
33
--bg-input: var(--color-zinc-900);
34
+
--success: hsl(142 71% 55%);
35
+
--error: var(--color-red-400);
32
36
}
33
37
}
34
38
···
42
46
--color-border: var(--border);
43
47
--color-bg-input: var(--bg-input);
44
48
--color-border-input: var(--border-input);
49
+
--color-success: var(--success);
50
+
--color-error: var(--error);
45
51
46
52
--radius-input: 9px;
47
53
--spacing-input: 3rem;