wip ui

src/components/editor.js

@@ -123,9 +123,12 @@ class AppEditor extends Tonic {
     const parent = this.props.parent
     const ext = path.extname(projectNode.id)
     const type = await lookup(ext.slice(1))
+    const elImagePreview = document.querySelector('.image-preview')
+    elImagePreview.style.display = 'none'
 
     if (type.length) {
       if (/image/.test(type[0].mime)) {
+        elImagePreview.style.display = 'block'
         // Display a preview for this type.
         return
       }

src/components/project.js

@@ -569,6 +569,8 @@ class AppProject extends Tonic {
         const fullPath = path.join(dirPath, entry.name)
         const oldChild = this.getNodeByProperty('id', fullPath, oldState)
 
+        if (entry.name === '.git') continue
+
         const child = {
           id: fullPath,
           parent,

src/components/share.js

@@ -0,0 +1,32 @@
+import Tonic from '@socketsupply/tonic'
+import { TonicDialog } from '@socketsupply/components/dialog'
+
+export class DialogShare extends TonicDialog {
+  async click (e) {
+    super.click(e)
+
+    const el = Tonic.match(e.target, '[data-event]')
+    if (!el) return
+
+    const { event } = el.dataset
+
+    if (event === 'share') {
+      const app = this.props.parent
+    }
+  }
+
+  render () {
+    return this.html`
+      <header>
+        Share Code
+      </header>
+      <main>
+        asdfsdf
+      </main>
+      <footer>
+        <div></div>
+        <tonic-button data-event="share">Share</tonic-button>
+      </footer>
+    `
+  }
+}

src/components/sprite.js

@@ -44,6 +44,26 @@ class AppSprite extends Tonic {
               l37.2-22.3v44.6L51.1,94.7z"/>
         </symbol>
 
+        <symbol id="git" viewBox="0 0 100 100">
+          <path d="M48.82,1.77c0.73,0,1.46,0,2.19,0c0.05,0.03,0.1,0.09,0.15,0.1c1.12,0.2,2.12,0.65,2.92,1.45
+            c14.2,14.2,28.38,28.4,42.57,42.61c0.13,0.13,0.23,0.27,0.35,0.41c0.64,0.78,0.91,1.73,1.19,2.67c0,0.73,0,1.46,0,2.19
+            c-0.03,0.05-0.09,0.1-0.1,0.15c-0.2,1.12-0.65,2.12-1.45,2.93C82.53,68.41,68.41,82.55,54.28,96.69
+            c-0.13,0.13-0.27,0.23-0.41,0.35c-0.78,0.64-1.73,0.91-2.66,1.19c-0.73,0-1.46,0-2.19,0c-0.04-0.03-0.07-0.09-0.11-0.09
+            c-1.17-0.2-2.2-0.69-3.04-1.53C31.71,82.44,17.56,68.27,3.4,54.1c-0.14-0.14-0.27-0.29-0.38-0.45c-0.93-1.27-1.32-2.68-1.2-4.25
+            c0.11-1.42,0.57-2.69,1.57-3.69c9.58-9.61,19.17-19.2,28.76-28.8c0.11-0.11,0.24-0.22,0.35-0.33c0.06,0.02,0.09,0.02,0.11,0.05
+            c3.56,3.56,7.12,7.12,10.67,10.69c0.11,0.11,0.12,0.39,0.07,0.55c-0.41,1.17-0.6,2.38-0.38,3.6c0.45,2.51,1.79,4.4,4.09,5.55
+            c0.35,0.17,0.47,0.36,0.46,0.74c-0.01,5.25-0.01,10.51-0.01,15.76c0,3.28,0,6.56,0,9.84c0,0.23,0.01,0.43-0.28,0.55
+            c-1.24,0.5-2.21,1.36-2.97,2.42c-1.15,1.6-1.61,3.41-1.29,5.36c0.29,1.73,1.08,3.22,2.43,4.38c1.66,1.42,3.54,2.05,5.73,1.77
+            c2.03-0.26,3.66-1.2,4.9-2.82c1.33-1.74,1.83-3.73,1.39-5.86c-0.44-2.11-1.58-3.8-3.5-4.89c-0.3-0.17-0.45-0.38-0.45-0.77
+            c0.02-8.44,0.01-16.87,0.01-25.31c0-0.16,0-0.31,0-0.52c0.11,0.07,0.15,0.09,0.18,0.12c3.22,3.22,6.44,6.44,9.65,9.68
+            c0.1,0.1,0.14,0.35,0.09,0.49c-0.49,1.35-0.59,2.73-0.28,4.13c0.33,1.47,1.04,2.77,2.15,3.76c1.7,1.52,3.7,2.25,6.03,1.9
+            c1.52-0.22,2.85-0.83,3.94-1.87c1.81-1.74,2.65-3.87,2.28-6.41c-0.32-2.22-1.44-3.93-3.29-5.14c-1.84-1.2-3.86-1.47-5.98-0.88
+            c-0.32,0.09-0.48,0.03-0.68-0.18c-0.77-0.78-1.54-1.55-2.31-2.32c-2.61-2.61-5.22-5.23-7.83-7.84c-0.15-0.15-0.32-0.26-0.22-0.57
+            c0.39-1.23,0.45-2.49,0.14-3.76c-0.54-2.23-1.84-3.88-3.85-4.91c-1.66-0.85-3.44-1.03-5.25-0.51c-0.37,0.11-0.56,0.02-0.81-0.23
+            C44,19.66,40.54,16.2,37.07,12.73c-0.12-0.12-0.26-0.21-0.39-0.31c0.11-0.12,0.16-0.19,0.22-0.25c2.98-2.99,5.97-5.98,8.96-8.96
+            c0.09-0.09,0.21-0.16,0.31-0.24C46.94,2.33,47.88,2.06,48.82,1.77z"/>
+        </symbol>
+
         <symbol id="search" viewBox="0 0 100 100">
           <path d="M55.4,18c-13.8,0-25.1,11.2-25.1,25.1c0,5.6,1.9,10.7,5,14.9L17.1,76.2l5.2,5.2l18.2-18.2c4.2,3.1,9.3,5,14.9,5
             c13.8,0,25.1-11.2,25.1-25.1S69.3,18,55.4,18z M55.4,60.8c-9.8,0-17.8-8-17.8-17.8s8-17.8,17.8-17.8s17.8,8,17.8,17.8

src/css/index.css

@@ -251,7 +251,7 @@ main-component {
   bottom: 0;
 }
 
-header {
+app-view > header {
   display: grid;
   grid-template-columns: 68px 1fr 34px 250px 34px 1fr 34px 34px;
   gap: 12px;
@@ -268,7 +268,7 @@ header {
   --app-region: drag; /* mac & linux */
 }
 
-header [platform="darwin"] {
+app-view > header [platform="darwin"] {
   padding-left: 35%;
   padding-right: 35%;
 }

src/css/share.css

@@ -0,0 +1,47 @@
+dialog-share {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  max-width: 500px;
+  min-height: 280px;
+  display: grid;
+  font-family: var(--tonic-monospace);
+}
+
+body.mobile dialog-share {
+  width: 90vw !important;
+  height: 50vh !important;
+}
+
+dialog-share header {
+  height: 46px;
+  text-align: center;
+  padding: 14px;
+  font-size: 12px;
+  color: var(--tonic-secondary);
+}
+
+dialog-share footer {
+  height: 50px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  padding: 0 16px;
+}
+
+dialog-share .centered {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  display: grid;
+  justtify-content: center;
+  align-content: center;
+}
+
+dialog-share .centered .message {
+  display: inline-block;
+  width: 80%;
+  margin: auto;
+}
+
+dialog-share main {
+  padding: 16px;
+}

src/index.html

@@ -15,9 +15,10 @@
          object-src 'none';
       "
     >
+    <link rel="stylesheet" href="css/editor.main.css">
     <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/share.css">
     <link rel="stylesheet" href="css/theme.css">
-    <link rel="stylesheet" href="css/editor.main.css">
     <link rel="stylesheet" href="css/tonic-overrides.css">
     <link rel="stylesheet" href="css/xterm.css">
     <link rel="stylesheet" href="css/preview.css">

src/index.js

@@ -17,6 +17,7 @@ import { AppProject } from './components/project.js'
 import { AppProperties } from './components/properties.js'
 import { AppSprite } from './components/sprite.js'
 import { AppEditor } from './components/editor.js'
+import { DialogShare } from './components/share.js'
 
 components(Tonic)
 
@@ -255,7 +256,64 @@ class AppView extends Tonic {
   }
 
   async initNetwork () {
+    const { data: dataPeer } = await this.db.state.get('peer')
+    const { data: dataUser } = await this.db.state.get('user')
 
+    //
+    // once awaited, we know that we have discovered our nat type and advertised
+    // to the network that we can accept inbound connections from other peers
+    // the socket is now ready to be read from and written to.
+    //
+    const pk = Buffer.from(dataUser.publicKey).toString('base64')
+
+    const signingKeys = {
+      publicKey: dataUser.publicKey,
+      privateKey: dataUser.privateKey
+    }
+
+    let socket = this.socket
+
+    if (!this.state.isInitialized) {
+      socket = this.socket = await network({ ...dataPeer, signingKeys })
+      const info = await socket.getInfo()
+      console.log(info)
+    }
+
+    const { data: dataSubscriptions } = await this.db.subscriptions.readAll()
+
+    for (const [subscriptionId, subscription] of dataSubscriptions.entries()) {
+      if (!subscription.sharedKey) continue
+      if (socket.subclusters.get(subscriptionId)) continue
+
+      const subcluster = await socket.subcluster({ sharedKey: subscription.sharedKey })
+
+      const onMessage = async (value, packet) => {
+        const pid = Buffer.from(packet.packetId).toString('hex')
+        const scid = Buffer.from(packet.subclusterId).toString('base64')
+        const key = [channelId, pid].join('\xFF')
+
+        const { data: hasPacket } = await this.db.messages.has(key)
+        if (hasPacket) return
+
+
+      }
+
+      subcluster.on('message', (value, packet) => {
+        if (!packet.verified) return // gtfoa
+        if (packet.index !== -1) return // not interested
+
+        // messages must be parsable
+        try { value = JSON.parse(value) } catch { return }
+
+        // messages must have content
+        if (!value || !value.content) return
+
+        // messages must have a type
+        if (typeof value.type !== 'string') return
+
+        onMessage(value, packet)
+      })
+    }
   }
 
   async initData () {
@@ -265,7 +323,7 @@ class AppView extends Tonic {
     }
 
     this.db = {
-      channels: await Database.open('shares'),
+      subscriptions: await Database.open('subscriptions'),
       state: await Database.open('state')
     }
 
@@ -288,14 +346,24 @@ class AppView extends Tonic {
     const { data: dataPeer } = await this.db.state.has('peer')
 
     if (!dataPeer) {
-      const signingKeys = await Encryption.createKeyPair()
       await this.db.state.put('peer', {
         config: {
           peerId: await Encryption.createId(),
           clusterId
         }
       })
     }
+
+    const { data: dataUser } = await this.db.state.has('user')
+
+    if (!dataUser) {
+      const signingKeys = await Encryption.createKeyPair()
+
+      await this.db.state.put('user', {
+        ...signingKeys
+      })
+    }
+
   }
 
   async initApplication () {
@@ -563,6 +631,11 @@ class AppView extends Tonic {
     if (event === 'run') {
       this.exportProject()
     }
+
+    if (event === 'open-dialog-share') {
+      const coDialogShare = document.querySelector('dialog-share')
+      if (coDialogShare) coDialogShare.show()
+    }
   }
 
   async connected () {
@@ -604,12 +677,13 @@ class AppView extends Tonic {
           data-event="get-share"
         >
         </tonic-button>
+
         <tonic-button
           type="icon"
           size="18px"
           symbol-id="link"
           title="Share this project"
-          data-event="put-share"
+          data-event="open-dialog-share"
         >
         </tonic-button>
       </header>
@@ -638,6 +712,15 @@ class AppView extends Tonic {
           <app-properties id="app-properties" parent=${this}></app-properties>
         </tonic-split-right>
       </tonic-split>
+
+      <dialog-share
+        id="dialog-share"
+        width="50%"
+        height="30%"
+        parent=${this}
+      >
+      </dialog-share>
+
       <app-sprite></app-sprite>
     `
   }
@@ -652,4 +735,5 @@ window.onload = () => {
   Tonic.add(AppSprite)
   Tonic.add(AppTerminal)
   Tonic.add(AppView)
+  Tonic.add(DialogShare)
 }

src/template/demo-project/socket.ini

@@ -30,7 +30,7 @@ flags = "-O3"
 headless = false
 
 ; The name of the program and executable to be output. Can't contain spaces or special characters. Required field.
-name = "templates"
+name = "demo-project"
 
 ; The binary output path. It's recommended to add this path to .gitignore.
 ; default value: "build"
@@ -142,11 +142,11 @@ flags = "-g"
 ; A unique ID that identifies the bundle (used by all app stores).
 ; It's required when `[meta] type` is not `"extension"`.
 ; It should be in a reverse DNS notation https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundleidentifier#discussion
-bundle_identifier = "com.templates"
+bundle_identifier = "com.demo-project"
 
 ; A unique application protocol scheme to support deep linking
 ; If this value is not defined, then it is derived from the `[meta] bundle_identifier` value
-application_protocol = "templates"
+application_protocol = "demo-project"
 
 ; A string that gets used in the about dialog and package meta info.
 ; copyright = "(c) Beep Boop Corp. 1985"
@@ -164,7 +164,7 @@ lang = "en-us"
 ; maintainer = "Beep Boop Corp."
 
 ; The title of the app used in metadata files. This is NOT a window title. Can contain spaces and special characters. Defaults to name in a [build] section.
-title = "templates"
+title = "demo-project"
 
 ; Builds an extension when set to "extension".
 ; default value: ""