feat: update ui (#5)

Folody-Team · Aug 5, 2023 · aba6b97 · aba6b97
1 parent 61e5ce0
commit aba6b97
Show file tree

Hide file tree

Showing 10 changed files with 205 additions and 93 deletions.
diff --git a/app/main.ts b/app/main.ts
@@ -2,6 +2,7 @@ import {fork} from 'child_process';
 import {Electron} from './module/app'
 import path from 'path';
 
-const app = new Electron(() => process.env.NODE_ENV == 'development' ? '' : fork(path.join(__dirname, './server.js')));
+console.log(process.env.NODE_ENV)
+const app = new Electron(() => process.env.NODE_ENV == 'development' ? null : fork(path.join(__dirname, './server.js')));
 
 app.init({ preload: path.join(__dirname, './preload.js') });
diff --git a/app/module/app.ts b/app/module/app.ts
@@ -23,6 +23,20 @@ export class Electron {
 
             Menu.setApplicationMenu(null);
 
+            main.webContents.on('did-finish-load', ()=>{
+                let code = `const card = document.getElementById('input')
+                if (card) {
+                  card.onmousemove = e => {
+                    const rect = card.getBoundingClientRect(),
+                      x = e.clientX - rect.left,
+                      y = e.clientY - rect.top;
+              
+                    card.style.setProperty("--mouse-x", \`\${x}px\`);
+                    card.style.setProperty("--mouse-y", \`\${y}px\`);
+                  }
+                }`;
+                main.webContents.executeJavaScript(code);
+            });
             main.webContents.openDevTools()
             main.loadURL('http://localhost:3000/');
             this.setTitleBar(main);

diff --git a/app/preload.ts b/app/preload.ts
@@ -8,8 +8,8 @@ const icon = {
 }
 
 
-
 window.addEventListener('DOMContentLoaded', () => {
+
   init('titlebar', [
     {
       tag: 'div',
@@ -20,7 +20,7 @@ window.addEventListener('DOMContentLoaded', () => {
         },
         {
           name: 'style',
-          value: 'padding: 10px; color: #DCDCDC; font-weight: 600;'
+          value: 'padding: 10px; color: #DCDCDC; font-weight: 600; z-index: 100'
         }
       ],
       child: []
@@ -30,7 +30,7 @@ window.addEventListener('DOMContentLoaded', () => {
       atr: [
         {
           name: 'style',
-          value: 'display: flex; align-items: center; -webkit-app-region: no-drag;'
+          value: 'display: flex; align-items: center; -webkit-app-region: no-drag; ; z-index: 100'
         }
       ],
       child: [
@@ -76,7 +76,7 @@ window.addEventListener('DOMContentLoaded', () => {
             {
               name: 'onClick',
               value: () => {
-                
+
                 ipcRenderer.send('close');
               }
             }
@@ -86,4 +86,7 @@ window.addEventListener('DOMContentLoaded', () => {
       ]
     }
   ])
+
+
+
 });
diff --git a/app/server/config.rb b/app/server/config.rb
@@ -0,0 +1,8 @@
+require 'fileutils'
+
+module ServerConfig
+  Path = {
+    'productPath' => File.join(__dir__, 'packs'),
+    'devPath' => File.join('app', 'build', 'packs')
+  }
+end
diff --git a/app/server/main.rb b/app/server/main.rb
@@ -2,4 +2,8 @@
 This is transmisser react webserver
 Using sinatra webserver
 =end
-require './server'
+exit if Object.const_defined?(:Ocra)
+
+require_relative 'server'
+
+run App
diff --git a/app/server/server.rb b/app/server/server.rb
@@ -1,21 +1,20 @@
 require 'sinatra'
 require 'fileutils'
+require_relative 'config'
 
-
-exit if Object.const_defined?(:Ocra)
-
-
-
-class App < Sinatra::Base
+class App < Sinatra::Application
   @env = 'dev'
   set :port, ENV['PORT'] || 3000
 
   if @env == 'dev'
-    set :static, File.join('..', 'build', 'packs')
+    set :static, ServerConfig::Path['devPath']
   else
-    set :static, File.join(__dir__, 'packs')
-  end
+    set :static, ServerConfig::Path['productPath']
+  end  
+  run!
+end
 
+class Routes < App
   get '/' do
     file = File.join(settings.static, 'index.html')
     File.read(file)
@@ -24,6 +23,8 @@ class App < Sinatra::Base
   get '/*.js' do
     send_file File.join(settings.static, "#{params[:splat].first}.js")
   end
-
-  run!
+
+  get '/*.png' do
+    send_file File.join(settings.static, "#{params[:splat].first}.png")
+  end
 end
diff --git a/development.bat b/development.bat
diff --git a/package.json b/package.json
@@ -5,14 +5,13 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "start": "webpack serve --open",
-    "dev": "npm run build-babel && npm start",
+    "start": "webpack serve",
     "build-babel": "babel src -d dist",
     "build-webpack": "webpack --config webpack.config.js",
     "build": "npm run build-webpack",
     "product-dev": "ts-node ./app/main.ts",
     "electron-build": "tsc --build",
-    "electron": "npm run electron-build && electron app/build/main.js",
+    "electron": "set NODE_ENV=development && npm run electron-build && electron app/build/main.js",
     "server": "node ./app/server.js"
   },
   "keywords": [],

diff --git a/public/index.html b/public/index.html
@@ -1,58 +1,113 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <title>Transmisser</title>
-    <style>
-      @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Manrope:wght@300;400;500;600;700;800&display=swap');
-
-
-      * {
-        box-sizing: border-box;
-        font-family: 'Manrope', sans-serif;
-        transition: 0.2s ease-in-out;
-      }
-      body {
-        margin: 0;
-        background-color: #020320;
-        min-height: 100vh;
-      }
-
-      input {
-        border: none;
-      }
-      .input:focus-within  {
-        border: #1926d6 solid 2px;
-        box-shadow: 0px 0px 50px #1e2dff80;
-      }
-      .titleBtn {
-        background: #020320;
-      }
-      .titleBtn:hover {
-        background-color: #191b4d;
-      }
-
-
-      .addBtn:hover {
-        background: rgb(42, 43, 69, 0.8);
-      }
-      #titlebar {
-        background: #010220;
-        display: flex;
-        align-items: center;
-        -webkit-app-region: drag;
-        justify-content: space-between;
-      }
-
-      #main {
-        padding: 20px;
-        color: #fff;
-      }
-    </style>
-  </head>
-  <body>
-    <transmisser>
-      <div id="titlebar"></div>
-      <div id="main"></div>
-    </transmisser>
-  </body>
+
+<head>
+  <title>Transmisser</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Manrope:wght@300;400;500;600;700;800&display=swap');
+
+
+    * {
+      box-sizing: border-box;
+      font-family: 'Manrope', sans-serif;
+      transition: 0.2s ease-in-out;
+    }
+
+    body {
+      margin: 0;
+      background: #020216;
+      min-height: 100vh;
+    }
+
+    input {
+      border: none;
+    }
+
+    #input {
+      background: rgb(42, 43, 69, 0.3);
+      position: relative;
+      border: 1px solid rgb(42, 43, 69, 0.6);
+      z-index: 20;
+    }
+
+
+    #input:has(#inputin:hover) >  #input::before {
+      opacity: 1;
+
+    }
+
+    #input::before {
+      background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y),
+          rgba(255, 255, 255, 0.06),
+          transparent 40%);
+      z-index: 3;
+    }
+
+    #input::after {
+      background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
+          rgba(255, 255, 255, 0.4),
+          transparent 40%);
+      z-index: 1;
+    }
+
+    #input::before,
+    #input::after {
+      border-radius: inherit;
+      transition: 0.4s;
+      animation-duration: 0.4s;
+      content: "";
+      height: 100%;
+      left: 0px;
+      opacity: 0;
+      position: absolute;
+      top: 0px;
+      transition: opacity 500ms;
+      width: 100%;
+    }
+
+
+    #input:hover::before {
+      opacity: 1;
+    }
+
+    #input:focus-within {
+      border: #1926d6 solid 2px;
+      box-shadow: 0px 0px 50px #1e2dff80;
+    }
+
+    .titleBtn {
+      background: #020320;
+    }
+
+
+    .titleBtn:hover {
+      background-color: #191b4d;
+    }
+
+
+    .addBtn:hover {
+      background: rgb(42, 43, 69, 0.8);
+    }
+
+    #titlebar {
+      display: flex;
+      align-items: center;
+      -webkit-app-region: drag;
+      justify-content: space-between;
+    }
+
+    #main {
+      padding: 20px;
+      color: #fff;
+    }
+  </style>
+</head>
+
+<body>
+  <transmisser>
+    <div id="titlebar"></div>
+    <div id="main"></div>
+  </transmisser>
+</body>
+
 </html>