Add: CodeEditor & FileManager docs

docs/CodeEditor.md

@@ -0,0 +1,55 @@
+# CodeEditor
+
+## Competitive Analysis
+
+Based on research, I have gathered information about three mainstream code editors: CodeMirror, Monaco Editor, and Ace Editor. After thorough investigation, the findings are summarized in the following table.
+
+| Aspect                         | CodeMirror                                           | Monaco Editor                                    | Ace Editor                                      |
+| ------------------------------ | ---------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| **Development Sponsor**        | Community-driven                                     | Microsoft                                        | Cloud9                                          |
+| **Features and Extensibility** | Extensible with plugins, but fewer built-in features | Rich set of built-in features and extensions     | Comprehensive feature set with many extensions  |
+| **Performance**                | Lightweight and efficient                            | Highly performant, optimized for large codebases | Efficient, but may lag behind in some scenarios |
+| **Ease of Integration**        | Easy to integrate and customize                      | Seamless integration with Visual Studio Code     | Easy integration, well-documented API           |
+| **Community Support**          | Active community support                             | Strong community and backed by Microsoft         | Established community support                   |
+| **Docs**                       | https://github.com/codemirror/dev                    | https://github.com/microsoft/monaco-editor       | https://github.com/ajaxorg/ace                  |
+
+## Final Choice: Monaco Editor
+
+Monaco Editor stands out due to its rich feature set, excellent performance, and seamless integration with Visual Studio Code. It provides a powerful and extensible environment for code editing, making it suitable for various development scenarios. The backing of Microsoft adds credibility and ensures ongoing support and updates. For these reasons, Monaco Editor is the recommended choice, especially when working on projects that demand a feature-rich, high-performance code editing experience.
+
+## Demo
+
+The following is a simple demo using Monaco Editor in the Vue 3 framework.
+
+```vue
+<template>
+  <!-- The container for the Monaco Editor with a reference "code_editor" -->
+  <div ref="code_editor" id="code-editor"></div>
+</template>
+
+<script setup>
+import * as monaco from 'monaco-editor'
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+// Define the language for the editor (spx for SPX code in this case)
+const LANGUAGE = 'spx';
+// Reference to the code editor container
+const code_editor = ref(null);
+
+// Hook called after the component is mounted
+onMounted(() => {
+  // Create a new Monaco Editor instance in the specified container with the specified language
+  monaco.editor.create(code_editor.value, {
+    language: LANGUAGE,
+  });
+});
+</script>
+
+<style scoped>
+/* Scoped style to set the height of the code editor to 100% of the viewport height */
+#code-editor {
+  height: 100vh;
+}
+</style>
+```
+

docs/FileManager.md

@@ -0,0 +1,68 @@
+# FileManager
+
+|                       | File System API                                              | JavaScript Tree                                              |
+| :-------------------- | :----------------------------------------------------------- | ------------------------------------------------------------ |
+| **Local Disk Access** | Provides a standard API for interacting with the local file system, supporting reading and writing local files and directories, as well as accessing the disk, but requires user authorization. | Requires uploading directories through file compression, unable to read and write to the disk in real-time, and necessitates abstracting the directory structure. |
+| **Performance**       | High                                                         | Depends on the implementation                                |
+| **Compatibility**     | Good                                                         | Depends on the browser environment, may vary significantly across different browsers |
+| **Security**          | File system operations are subject to browser permission controls and provide built-in security measures. | Has good security in the browser environment; manual implementation of security may require additional work. |
+| **Flexibility**       | Can flexibly operate on files in the browser environment, avoiding direct handling of underlying operating system differences. | Has high customization capabilities, but may vary in different environments. |
+| **docs**              | [File System API - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) | -                                                            |
+
+Considering specific use cases, using the local file read/write disk method is not advisable. Therefore, we choose to manage files using an abstract JavaScript tree. We will save this directory structure and pass it to the backend in JSON format.
+
+In this structure, the `filename` will serve as the file name, `code` will generate a corresponding code file with the `.spx` extension for the sprite, and `config` represents the configuration file for that item, generating the corresponding `index.json` file.
+
+Below is a possible demo. 
+
+```js
+const sprites = [
+    {
+        filename: "Monkey",
+        code: `onStart => {\n\tsay "hello monkey"\n}`,
+        config: {
+            x: 10,
+            y: 20
+        }
+    },
+    {
+        filename: "Banana",
+        code: `onStart => {\n\tsay "hello banana"\n}`,
+        config: {
+            x: 10,
+            y: 20
+        }
+    }
+]
+
+const sounds = [
+    {
+        filename: "audioName",
+        config: {
+            path: "xx.wav",
+            rate: 11025,
+            sampleCount: 2912
+        }
+    }
+]
+
+const backdrop = {
+    scenes: [
+        {
+            "name": "backdropName",
+            "path": "xx.png"
+        }
+    ],
+    zorder: [
+        "Monkey",
+        "Banana"
+    ]
+}
+
+const project = {
+    sprites,
+    sounds,
+    backdrop
+}
+```
+