Update Design and About Page's layout

doc/design.md

@@ -21,8 +21,53 @@ This document also contains other topics, including
 
 ## Audio Components
 
+The GUI alone is not responsible for producing sound. To accomplish this, navigate to the projectEditor/audio folder and create sc-yourModule.js. Refer to the documentation in doc/modules from the root folder for guidance during the implementation process.
+
+
+
 ## GUI Components
 
+
+The GUI represents the module. How to build modules and handle sound files is an important design decision. The breif overview is here: 
+
+
+####  Connection Spec:
+   - Connect and disconnect actions are dispatched with values documenting the input and output connections.
+   - The connection information includes the module's name, port, ID, and web audio object.
+   - Each module has input and output ports, identified by string values starting from 0 index.
+   - Modules have unique IDs, and the name alone is not sufficient for identification.
+   - Audio objects based on the web audio API are used.
+
+#### Module GUI Building:
+   - Developers create a module GUI by implementing a module class with HTML code embedded in the `render()` function.
+   - The module class is added to the projectEditor's directory and exported.
+   - Module properties, such as delayTime and feedback amount, are added as fields in the `blockSpecs.jsx` file.
+
+#### Event Handling:
+   - Events reflecting user changes are dispatched using `store.dispatch()` or `changeBlock()` functions.
+   - The events of type `"CHANGE_BLOCK"` are processed by the `reducers/blocks.js` file.
+
+#### Audio Object Implementation:
+   - The GUI represents the module, but the actual sound functionality is implemented using audio objects.
+   - Audio object files, such as `sc-yourModule.js`, are created in the `projectEditor/audio` folder.
+   - Documentation in `doc/modules` provides guidance for implementing audio objects.
+
+####  Module Setup:
+   - The `addBlock` setup involves importing the module in `reducers/block.js` and calling it in the `newSoundModule()` function.
+   - A new `<div/>` is added in `AddBlock.jsx` to include the new module in the dropdown list.
+
+####  Module Creation:
+   - Functions in `projectEditor/index.js` handle project saving, loading, and downloading by storing the Redux state in a JSON object.
+   - When loading a project, the Redux state is copied, ensuring recreation of module GUIs and their parameters.
+   - However, the audio objects (`sc-module`) are not reinitialized, and efforts are being made to implement a buffer time for their reinitialization.
+
+####  Sound Management:
+   - Users can upload sounds, which are stored in the file system and accessed through a RESTful API.
+   - The `AddSound` GUI class allows users to choose sounds from a list.
+   - The `serveAudio` function fetches the sound's URL from the API based on its ID.
+   - Developers can use HTTP requests inside their audio objects to fetch sounds.
+
+These design choices revolve around building module GUIs, handling events, implementing audio objects, managing module creation, and incorporating sound functionality into the system.
 ## Front End
 The basic front end design consists of a left-hand column serving as a menu of components that can be instantiated, and two more columns that contain active component instances. All components must have a fixed width so they can be organized or stacked into columns. Components may have a way to "open" them into larger separate windows, e.g. to display data.
 

src/frontend/public/custom.css

@@ -0,0 +1,63 @@
+
+@mixin make-container($gutter: $grid-gutter-width) {
+    width: 100%;
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  @mixin make-row($gutter: $grid-gutter-width, $max-elements: $max-elements-per-column) {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -$gutter / 2;
+    margin-left: -$gutter / 2;
+
+    @include row-cols($max-elements);
+  }
+
+  @mixin row-cols($count) {
+    $width: 100% / $count;
+
+    & > * {
+      flex: 0 0 $width;
+      max-width: $width;
+    }
+  }
+
+  @mixin make-col-ready($gutter: $grid-gutter-width) {
+    position: relative;
+    width: 100%;
+    padding-right: $gutter / 2;
+    padding-left: $gutter / 2;
+  }
+
+  @mixin make-col($size, $columns: $grid-columns) {
+    flex: 0 0 percentage($size / $columns);
+    max-width: percentage($size / $columns);
+  }
+
+  @mixin make-col-auto() {
+    flex: 0 0 auto;
+    width: auto;
+    max-width: 100%;
+  }
+
+  @mixin make-col-offset($size, $columns: $grid-columns) {
+    $num: $size / $columns;
+    margin-left: if($num == 0, 0, percentage($num));
+  }
+
+  /* // Example usage with $max-elements set to 5 */
+  .container {
+    @include make-container;
+  }
+
+  .row {
+    @include make-row($max-elements: 5);
+  }
+
+  .column {
+    @include make-col(1);
+  }
+

src/frontend/public/index.html

@@ -7,6 +7,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
     <link href="/assets/fontawesome/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="/build/bundle.css" />
+    <link href="custom.css" rel="stylesheet">
     <title>Soundcool: System for musical, sound and audiovisual creation</title>
     <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';">
   </head>

src/frontend/src/components/about/index.jsx

@@ -66,8 +66,7 @@ function About(props) {
             implementation in MaxMSP to Web technologies to enable greater
             portability and eventually a free cloud-based system where
             Soundcool users can learn, create, and share.
-            See &nbsp;<a href="http://soundcool.org">http://soundcool.org</a>
-            for the computer and playstore/iOS applications and other
+            See &nbsp;<a href="http://soundcool.org">http://soundcool.org</a>&nbsp;for the computer and playstore/iOS applications and other
             running projects.
           </p>
         </div>