10 | {tabManager.tabs.map((tab, index) => tabManager.setTabIndex(index)}
13 | onClose={() => closeTab(tabManager, tab.uri)}
14 | title={tab.uri}
15 | active={index === tabManager.currentTabIndex} />)}
16 |
17 | );
18 | }
--------------------------------------------------------------------------------
/src/components/sidebars/FileBrowserSideBar.tsx:
--------------------------------------------------------------------------------
1 | import { useProject } from "src/components/ProjectContext";
2 | import { FileBrowser } from "src/components/sidebars/FileBrowser";
3 | import { useFileSystem } from "src/components/FileSystemContext";
4 | import { SideBar } from "./SideBar";
5 | import { useEffect, useState } from "preact/hooks";
6 |
7 | export function FileBrowserSideBar() {
8 | const projectContext = useProject();
9 |
10 | return (
11 |
14 | {props.title}
15 |
19 |
20 | );
21 | }
--------------------------------------------------------------------------------
/src/components/editors/EditorManager.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentChildren, createContext } from "preact";
2 | import { MutableRef, useContext, useRef } from "preact/hooks";
3 |
4 | interface IEditorManager {
5 | saveFile: MutableRef<() => void>;
6 | }
7 |
8 | const EditorManagerContext = createContext
30 | {
31 | tab !== null
32 | ? createElement(tab.editor, { context: tab.context, uri: tab.uri, key: tab.uri })
33 | :
36 | );
37 | }
--------------------------------------------------------------------------------
/src/components/sidebars/SideBar.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentChildren } from "preact";
2 | import { useState } from "preact/hooks";
3 | import collapseIcon from "src/assets/angle-double-line.svg";
4 |
5 | export function SideBar(props: {
6 | title: string,
7 | visibleByDefault?: boolean,
8 | isLeftSide: boolean,
9 | children: ComponentChildren
10 | }) {
11 | const [visible, setVisible] = useStateОткройте любой файл, чтобы начать работу.
34 | }
35 |
19 |
34 | );
35 | }
--------------------------------------------------------------------------------
/src/backend/Emulator/Masters/ZeroToZero.ts:
--------------------------------------------------------------------------------
1 | import { Master, MasterBusMasterRegistry } from "src/backend/Emulator/Bus";
2 | import { v4 } from "uuid";
3 |
4 | const ZERO2ZERO_NAME: string = "z2z";
5 |
6 | export class ZeroToZero extends Master
20 | {visible && {props.title}}
21 |
29 |
30 |
31 | {visible && (<>{props.children})}
32 |
33 |
17 |
28 |
29 |
37 |
40 |
41 | );
42 | }
--------------------------------------------------------------------------------
/src/components/simulator/TabbedSideBar.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentChildren, createElement, FunctionComponent } from "preact";
2 | import { useState } from "preact/hooks";
3 | import collapseIcon from "src/assets/angle-double-line.svg";
4 | import style from "./TabbedSideBar.module.css";
5 |
6 | export function TabbedSideBar(props: {
7 | tabs: { title: string, component: FunctionComponent
20 |
43 | );
44 | }
--------------------------------------------------------------------------------
/src/components/simulator/MachineContext.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentChildren, createContext } from 'preact';
2 | import { useContext, useEffect, useRef, useState } from 'preact/hooks';
3 | import { IMachineWorkerMessage, IMachineWorkerMessageLoad, MachineWorkerMessageTypes } from 'src/backend/Emulator/Machine';
4 |
5 | import MachineWorker from 'src/workers/machineWorker?worker';
6 | import { ProjectContextType, useProject } from '../ProjectContext';
7 |
8 | interface IMachineManager {
9 | sendMessage: (message: IMachineWorkerMessage) => void;
10 | lastMessage: IMachineWorkerMessage | null;
11 | }
12 |
13 | const MachineManagerContext = createContext
21 |
29 | {visible &&
39 |
30 | {props.tabs.map((tab, index) =>
31 | setTabIndex(index)}>
34 | {tab.title}
35 |
36 | )}
37 |
}
38 |
40 | {visible && (<>{createElement(props.tabs[tabIndex].component, {})})}
41 |
42 | Loading, please wait...
; 55 | } 56 | 57 | render(
74 | {depth === 0 && (
75 |
101 | );
102 |
103 | }
--------------------------------------------------------------------------------
/src/backend/ProjectManager.ts:
--------------------------------------------------------------------------------
1 | import {Exists, FSFile, FSFolder, Open, SaveAll} from "src/backend/FileSystem";
2 | import {rootFolder} from "src/backend/FileSystem";
3 | import {Machine} from "src/backend/Emulator/Machine";
4 | import type {ISystemConfiguration} from "src/backend/Emulator/Machine";
5 | import {type IProjectBuilder, ProjectBuilder} from "src/backend/BuildSystem/ProjectBuilder";
6 | import {signal} from '@preact/signals';
7 |
8 | export class Project {
9 | public machineTick: number;
10 | protected _machine: Machine;
11 | protected _projectBuilder: ProjectBuilder;
12 | protected _initialSystemConfiguration: ISystemConfiguration;
13 |
14 | public constructor(systemConfiguration: ISystemConfiguration, projectBuilder: ProjectBuilder) {
15 | this._initialSystemConfiguration = systemConfiguration;
16 | this._machine = Machine.FromSystemConfiguration(systemConfiguration);
17 | this._projectBuilder = projectBuilder;
18 | }
19 |
20 | public static FromJSON(json: IProjectJson): Project {
21 | const project = new Project(
22 | json.systemConfiguration ?? {master: null, devices: []},
23 | ProjectBuilder.FromJSON(json.projectBuilder)
24 | );
25 | return project;
26 | }
27 |
28 | public get machine(): Machine {
29 | return this._machine;
30 | }
31 |
32 | public get builder(): ProjectBuilder {
33 | return this._projectBuilder;
34 | }
35 |
36 | public resetMachine(): void {
37 | this._machine = Machine.FromSystemConfiguration(this._initialSystemConfiguration);
38 | }
39 |
40 | public MachineTick(): void {
41 | this._machine.doTick();
42 | this.machineTick = this._machine.tick;
43 | }
44 |
45 | public ToJSON(): IProjectJson {
46 | return {
47 | systemConfiguration: this._machine.toSystemConfiguration(),
48 | projectBuilder: this._projectBuilder.toJSON()
49 | };
50 | }
51 | }
52 |
53 | export interface IProjectJson {
54 | systemConfiguration: ISystemConfiguration,
55 | projectBuilder: IProjectBuilder
56 | }
57 |
58 | export const PROJECT_EXTENSION: string = ".rvedu";
59 |
60 | export function makeProject(folderName: string): void {
61 | SaveAll();
62 |
63 | const exists = Exists(`/${folderName}/${PROJECT_EXTENSION}`);
64 | if (exists)
65 | throw `Project ${folderName} already exists`;
66 |
67 | let mainSFile = Open(`/${folderName}/main.s`, true, true);
68 | mainSFile?.write("start:\n\tnop\n\taddi x1, x0, $40\n\taddi x2, x0, $2\n\tadd x3, x1, x2\n\tsw x3, $128(x0)\n\tj $0");
69 |
70 | updateAvailableProjects();
71 | }
72 |
73 | function getJsonFromString(jsonString: string): IProjectJson | null {
74 | // TODO: exceptions
75 | const jsonProject: IProjectJson = JSON.parse(jsonString);
76 |
77 | return jsonProject;
78 | }
79 |
80 | export const allProjects = signal
76 |
77 |
78 |
79 | )}
80 | -
81 | {entries.map(ent => (
82 |
-
83 | {ent.isFile ? (
84 | {
85 | openTab(tabManager, combinePath([...ancestors, ent.name]));
86 | }}>📄 {ent.name}
87 | ) : (
88 | 89 | toggleDir(ent.name)}> 90 | {expandedDirs[ent.name] ? '📂' : '📁'} {ent.name} 91 | 92 | {expandedDirs[ent.name] && ( 93 |96 | )} 97 |
94 | )} 95 |
98 | ))}
99 |
31 | 
32 |
44 |
87 |
119 |
120 | );
121 | }
--------------------------------------------------------------------------------
/src/components/editors/EditorMonaco.tsx:
--------------------------------------------------------------------------------
1 | import * as monaco from 'monaco-editor';
2 | import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
3 | import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
4 | import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
5 | import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
6 | import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
7 | import { useEffect, useRef, useState } from 'preact/hooks';
8 | import { useProject } from '../ProjectContext';
9 | import { getFile } from 'src/backend/FileSystem';
10 | import { useEditorManager } from './EditorManager';
11 | import { PROJECT_EXTENSION } from 'src/backend/ProjectManager';
12 |
13 | self.MonacoEnvironment = {
14 | getWorker(_, label) {
15 | if (label === 'json') {
16 | return new jsonWorker()
17 | }
18 | if (label === 'css' || label === 'scss' || label === 'less') {
19 | return new cssWorker()
20 | }
21 | if (label === 'html' || label === 'handlebars' || label === 'razor') {
22 | return new htmlWorker()
23 | }
24 | if (label === 'typescript' || label === 'javascript') {
25 | return new tsWorker()
26 | }
27 | return new editorWorker()
28 | }
29 | }
30 |
31 | monaco.editor.defineTheme('riscv-edu-ide-theme', {
32 | base: 'vs',
33 | inherit: true,
34 | rules: [
35 | // { token: '', foreground: '#313131' },
36 | // { token: 'register', foreground: '#313131' },
37 | // { token: 'instruction', foreground: '#313131', fontStyle: 'bold' },
38 | { token: 'instruction', foreground: '#448000' },
39 | { token: 'comment', foreground: '#00000054' },
40 | { token: 'directive', foreground: '#806300' },
41 | { token: 'number', foreground: '#28766e' },
42 | { token: 'label', foreground: '#7D0080' }
43 | ],
44 | colors: {
45 | // 'editor.background': '#FAFEF6',
46 | // 'editor.foreground': '#313131'
47 | }
48 | });
49 |
50 | monaco.languages.register({ id: 'asm' });
51 | monaco.languages.setMonarchTokensProvider('asm', {
52 | defaultToken: '',
53 | tokenPostfix: '.asm',
54 |
55 | instructions: [
56 | 'add', 'addi', 'sub', 'and', 'andi', 'or', 'ori', 'xor', 'xori', 'slt', 'slti', 'sltu', 'sltiu', 'sra', 'srai', 'srl', 'srli', 'sll', 'slli',
57 | 'lw', 'sw', 'lb', 'sb', 'lui', 'auipc', 'jal', 'jalr', 'beq', 'bne', 'blt', 'bge', 'bltu', 'bgeu'
58 | ],
59 | directives: ['.section', '.global', '.define', '.offset'],
60 |
61 | tokenizer: {
62 | root: [
63 | [/#.*$/, "comment"],
64 | [/[a-zA-Zа-яёА-ЯЁ_\d]+:/, "label"],
65 | // [/%[a-zA-Z0-9]+/, "register"],
66 | [/\.[a-zA-Z_][a-zA-Z_\d]*/, {
67 | cases: {
68 | '@directives': 'directive',
69 | '@default': ''
70 | }
71 | }],
72 | [/[a-zA-Z_][a-zA-Z_\d]*/, {
73 | cases: {
74 | '@instructions': 'instruction',
75 | '@default': ''
76 | }
77 | }],
78 | [/-?((0[xX])?[0-9A-Fa-f]+)/, "number"],
79 | // [/[ \t]+/, "whitespace"]
80 | ]
81 | }
82 | });
83 |
84 | interface IEditorMonacoContext {
85 | model: monaco.editor.ITextModel;
86 | cursorPosition?: monaco.Position;
87 | }
88 |
89 | export function EditorMonaco(props: { uri: string, context: IEditorMonacoContext }) {
90 | const projectManager = useProject();
91 | const editorManager = useEditorManager();
92 | const editorRef = useRefLoading...
);
18 |
19 | const [registers, setRegisters] = useState
57 |
90 | );
91 | }
92 |
93 | function Memory() {
94 | const project = useProject();
95 |
96 | if (!project?.project?.machine) return (Machine
58 |
59 | 
60 | Clock speed
61 | 8kHz
62 | 
63 | Machine ID/Version
64 | 243 v1
65 |
66 | Registers
67 |
68 |
75 |
69 | {[...Array(16).keys()].map((r) => <>r{r}{registers[r]})}
70 |
71 |
72 | {[...Array(16).keys()].map((r) => <>r{r + 16}{registers[r + 16]})}
73 |
74 | Bus
76 |
77 | 
78 | Address
79 | {bus.address}
80 |
81 | 
82 | Value
83 | {bus.value}
84 |
85 | 
86 | Direction
87 | {bus.direction}
88 |
89 | Loading...
);
97 |
98 | const [memoryDevices, setMemoryDevices] = useState<{ name: string, address: string, contents: Uint32Array }[]>([]);
99 |
100 | function formatHex(n: number): string {
101 | return '0x' + Number(n).toString(16).padStart(8, '0');
102 | }
103 |
104 | useEffect(() => {
105 | let animationFrameId: number;
106 |
107 | const check = () => {
108 | const memdev: { name: string, address: string, contents: Uint32Array }[] = [];
109 | project.project.machine._masterBus.devices.forEach((device) => {
110 | if (device instanceof RAM32) {
111 | const ram = device as RAM32;
112 | memdev.push({ name: "RAM32", address: formatHex(ram.position), contents: ram.getState() });
113 | } else if (device instanceof ROM32) {
114 | const rom = device as ROM32;
115 | memdev.push({ name: "ROM32", address: formatHex(rom.position), contents: rom.getState() });
116 | }
117 | });
118 | setMemoryDevices(memdev);
119 |
120 | animationFrameId = requestAnimationFrame(check);
121 | };
122 |
123 | animationFrameId = requestAnimationFrame(check);
124 |
125 | return () => cancelAnimationFrame(animationFrameId);
126 | }, []);
127 |
128 | if (!project?.project?.machine) return (Loading...
);
129 |
130 | return (
131 |
132 | {memoryDevices.map((memdev) => <>
133 |
147 | );
148 | }
149 |
150 | export function SimulatorSideBar() {
151 | return ({memdev.name} @ {memdev.address}
134 |
135 | {
136 | (() => {
137 | let arr = [];
138 | for (const value of memdev.contents) {
139 | arr.push({formatHex(value)});
140 | }
141 | return arr;
142 | })()
143 | }
144 |
145 | )}
146 |