v1.2.1 updates

Perform and spectate mode added
css fixes and improvements

Author: Omodaka9375

README.md

@@ -24,18 +24,19 @@ https://github.com/user-attachments/assets/d01a258c-34f4-4e3b-8bd5-1b9b1aaee542
 - Video effects <i>(Antialiasing, Bloom, Blur, Brightness, Contrast, Edges, Focus, Godrays, Motion Blur, Hue, Invert)</i>
 - Camera control <i>(WASD, arrows)</i>
 - MouseX and MouseY tracking
+- Works offline!
 - Saving and loading your dilber files from computer
 - MIDI out for your external or hardware synths
 - Share your code with others instantly
 - Custom toast messages when there is an error in the code
 - Soundfont support (Asprin, Chaos, GeneralUserGS, and JCLive)
-- Custom dilber-server support
+- Custom server support, check out [server script](resources/dilber-server.js)
 - Custom background via `bg(<url>)` command - check `backgrounds` tutorial in app
 - Sequence gifs via `bg.seq([image_array], [duration_array], random=true)`
 - Record your audio (system+mic) and video performance to .mp4 via `startSession()` and `stopSession()`
-- Autosave - in case of a crash it stores your code accross sessions. Default interval is set to 5 minutes. It can be turned off or customized.
-- Works offline
-- [Soon] Live performing with friends: P2P realtime collaboration with shared editor and chat over secure sockets
+- Autosave - in case of a crash it stores your code accross sessions. Default interval is set to 30 minutes. It can be turned off or customized.
+- Spectate mode - after creating a session in perform mode, a spectator link is copied to your clipboard. Paste it anyhere to invite people to spectate your performance live. 
+- [Soon] P2P realtime collaboration with shared editor and chat over secure sockets
 
 
 ## Where to start

index.html

@@ -4,11 +4,8 @@
   <meta charset='utf-8'>
   <span class="camera">📹</span>
   <title>Dilber | Live audio-visual coding in Javascript for the browser</title>
-  <link rel="stylesheet" crossOrigin="anonymous" href="./resources/external/codemirror.css">
-  <link rel="stylesheet" crossOrigin="anonymous" href="./resources/external/show-hint.css">
-  <link rel="stylesheet" crossOrigin="anonymous" href="./resources/external/dialog.css">
-  <link rel="stylesheet" crossOrigin="anonymous" href="./resources/external/tern.css">
-  <link rel="stylesheet" crossOrigin="anonymous" href="./resources/dilber.css">
+  <link rel="stylesheet" crossOrigin="anonymous" type="text/css" href="./resources/externals.css">
+  <link rel="stylesheet" crossOrigin="anonymous" type="text/css" href="./resources/dilber.css">
   <meta property="og:title" content="Dilber | Live audio-visual coding in the browser" />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://dilber.io" />
@@ -21,8 +18,8 @@
   <header>
     <h1 id="logo" onclick="location.reload()">dilber</h1>
     <select id='examples'></select>
-    <img id='themer' src='./resources/themes/noir.png'></img>
-    <div id='thememenu'>
+    <img id='theme' src='./resources/themes/noir.png'></img>
+    <div id='themes'>
       <ul>
         <li><img src='./resources/themes/apollo.png' /></li>
         <li><img src='./resources/themes/battlestation.png' /></li>
@@ -45,7 +42,7 @@ <h1 id="logo" onclick="location.reload()">dilber</h1>
     <button id='restart'>restart</button>
     <button id='fullscreenbtn'>fullscreen</button>
     <button id='sharebtn'>share code</button>
-    <button id='connectbtn'>collaborate</button>
+    <button id='connectbtn'>perform</button>
     <button id='middibtn'>midi out</button>
     <select id='midiOutputSelect'>Device list:</select>
     <span id='reference'>
@@ -57,9 +54,7 @@ <h1 id="logo" onclick="location.reload()">dilber</h1>
       </ul>
     </span>
   </header>
-
   <div id='editor' data-after=""></div></div>
-  
   <button id='hidebtn'>&#9650;</button>
   <canvas id='graphics'></canvas>
   <script src='./resources/dilber.js'></script>

resources/dilber.css

@@ -9,6 +9,14 @@
   --after-content: '';
 }
 
+#spectatorCounter{
+
+}
+
+#specCount{
+  
+}
+
 .markdown h1 {
   display:block; 
   color:var(--f_high);
@@ -151,7 +159,7 @@ code {
   #sharebtn, #connect, #restart, #midiOutputSelect, #version { display:none } 
 }
 @media only screen and (max-width: 400px) {
-  #themer { display:none } 
+  #theme { display:none } 
   header { padding-top:.55em }
 }
 @media only screen and (max-width: 335px) {
@@ -162,7 +170,7 @@ code {
   color: rgb(59, 59, 59) !important
 }
 
-#themer {
+#theme {
 
   height:1.5em;
 
@@ -196,20 +204,20 @@ body {
 }
 
 
-#thememenu ul { 
+#themes ul { 
   list-style:none;
   padding:0; 
   margin:0;
 }
-#thememenu {
+#themes {
   display:none; 
 }
-#thememenu ul li {
+#themes ul li {
   margin-bottom: -4px
 }
 
 .connect {
-  margin:.5em; 
+  margin:.6em; 
   font-family:monospace;
   width:14em;
   margin-right:1em;
@@ -262,7 +270,7 @@ label {
 #showChat, #useSharedEditorBox { 
   display: 'inline-block';
   width:1em; 
-  margin-left:.5em; 
+  margin-left:.8em; 
 
 }