Начало Каталог Помощ
Вход
gregory
/
ElectronMCLauncher
1
0
Разклонения 0
Файлове Задачи 0 Заявки за сливане 0 Уики
Преглед на файлове

Theoretical tests for integration with React.js.

This branch will likely never be merged into master, however it is intended to experiment with using React.js to power the backend. Due to complications, this will likely not be implemented in the initial release due to the complexity of the task.
Daniel Scalzi преди 7 години
родител
8ea4ae8ec2
ревизия
04d869794f
променени са 10 файла, в които са добавени 1034 реда и са изтрити 33 реда
Разделен изглед Покажи статистика за разликите
  1. 1 0
      .babelrc
  2. 13 6
      app/app.html
  3. 15 0
      app/app.jsx
  4. 67 0
      app/frame.css
  5. 0 7
      app/frame.ejs
  6. 18 0
      app/frame.jsx
  7. 7 0
      app/start.jsx
  8. 2 3
      index.js
  9. 906 15
      package-lock.json
  10. 5 2
      package.json

+ 1 - 0
.babelrc
Целия файл 

@@ -0,0 +1 @@
 
+{ "presets": ["env", "react"] }

+ 13 - 6
app/app.ejs → app/app.html
Целия файл 

@@ -1,8 +1,8 @@
 
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 
+<html lang="en">
 
 <head>
 
     <meta charset="utf-8" />
 
     <title>Westeroscraft Launcher</title>
 
-    <script src="./assets/js/uicore.js"></script>
 
+    <!--<script src="./assets/js/uicore.js"></script>
 
     <script src="./assets/js/actionbinder.js"></script>
 
     <link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
 
     <style>
 
@@ -13,12 +13,19 @@
 
         #main {
 
             background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
 
         }
 
-    </style>
 
+    </style>-->
 
+    <script>
 
+        require('babel-register')({
 
+            ignore: /^.*\.(css)$/i
 
+        })
 
+        console.log('here')
 
+        require('./start.jsx')
 
+        console.log('here')
 
+        require('./assets/js/uicore.js')
 
+    </script>
 
 </head>
 
 <body>
 
-    <% include frame.ejs %>
 
-    <div id="main">
 
-        <% include login.ejs %>
 
+    <div id="app">
 
     </div>
 
 </body>
 
 </html>

+ 15 - 0
app/app.jsx
Целия файл 

@@ -0,0 +1,15 @@
 
+import React, { Component } from 'react'
 
+import Frame from './frame.jsx'
 
+
 
+export default class App extends Component {
 
+
 
+    render(){
 
+        return (
 
+            <div className="appMount">
 
+                <Frame />
 
+                My App
 
+            </div>
 
+        )
 
+    }
 
+
 
+}

+ 67 - 0
app/frame.css
Целия файл 

@@ -0,0 +1,67 @@
 
+/*******************************************************************************
 
+ *                                                                             *
 
+ * Frame Styles (frame.ejs)                                                    *
 
+ *                                                                             *
 
+ ******************************************************************************/
 
+
 
+.frame_bar {
 
+    -webkit-app-region: drag;
 
+    -webkit-user-select: none;
 
+    background: rgba(1, 2, 1, 0.5);
 
+    min-height: 22px;
 
+    display: flex;
 
+    align-items: center;
 
+    position: relative;
 
+    z-index: 10000;
 
+}
 
+
 
+.frame_btn_dock {
 
+    margin-left: 2px;
 
+}
 
+
 
+.frame_btn {
 
+    height: 12px;
 
+    width: 12px;
 
+    border-radius: 50%;
 
+    border: 0px;
 
+    margin-left: 5px;
 
+    -webkit-app-region: no-drag !important;
 
+    cursor: pointer;
 
+}
 
+
 
+.frame_btn:focus {
 
+    outline: 0px;
 
+}
 
+
 
+#frame_btn_close {
 
+    background-color: #e74c32;
 
+}
 
+#frame_btn_close:hover,
 
+#frame_btn_close:focus {
 
+    background-color: #FF9A8A;
 
+}
 
+#frame_btn_close:active {
 
+    background-color: #ff8d7b;
 
+}
 
+
 
+#frame_btn_restoredown {
 
+    background-color: #fed045;
 
+}
 
+#frame_btn_restoredown:hover,
 
+#frame_btn_restoredown:focus {
 
+    background-color: #FFE9A9;
 
+}
 
+#frame_btn_restoredown:active {
 
+    background-color: #ffde7b;
 
+}
 
+
 
+#frame_btn_minimize {
 
+    background-color: #96e734;
 
+}
 
+#frame_btn_minimize:hover,
 
+#frame_btn_minimize:focus {
 
+    background-color: #D6FFA6;
 
+}
 
+#frame_btn_minimize:active {
 
+    background-color: #bfff76;
 
+}

+ 0 - 7
app/frame.ejs
Целия файл 

@@ -1,7 +0,0 @@
 
-<div id="frame_bar">
 
-    <div id="frame_btn_dock">
 
-        <button class="frame_btn" id="frame_btn_close" tabIndex="-1"></button>
 
-        <button class="frame_btn" id="frame_btn_restoredown" tabIndex="-1"></button>
 
-        <button class="frame_btn" id="frame_btn_minimize" tabIndex="-1"></button>
 
-    </div>
 
-</div>

+ 18 - 0
app/frame.jsx
Целия файл 

@@ -0,0 +1,18 @@
 
+import React, { Component } from 'react'
 
+import styles from './frame.css'
 
+
 
+export default class FrameBar extends Component {
 
+
 
+    render(){
 
+        return(
 
+            <div className="frame_bar">
 
+                <div className="frame_btn_dock">
 
+                    <button className="frame_btn" id="frame_btn_close" tabIndex="-1"></button>
 
+                    <button className="frame_btn" id="frame_btn_restoredown" tabIndex="-1"></button>
 
+                    <button className="frame_btn" id="frame_btn_minimize" tabIndex="-1"></button>
 
+                </div>
 
+            </div>
 
+        )
 
+    }
 
+
 
+}

+ 7 - 0
app/start.jsx
Целия файл 

@@ -0,0 +1,7 @@
 
+import React from 'react'
 
+import ReactDOM from 'react-dom'
 
+import App from './app.jsx'
 
+
 
+window.onload = function(){
 
+    ReactDOM.render(<App />, document.getElementById('app'))
 
+}

+ 2 - 3
index.js
Целия файл 

@@ -2,7 +2,6 @@ const {app, BrowserWindow} = require('electron')
 
 const path = require('path')
 
 const url = require('url')
 
 const fs = require('fs')
 
-const ejse = require('ejs-electron')
 
 
 // Keep a global reference of the window object, if you don't, the window will
 
 // be closed automatically when the JavaScript object is garbage collected.
 
@@ -19,10 +18,10 @@ function createWindow() {
 
         }
 
     })
 
 
-    ejse.data('bkid', Math.floor((Math.random() * fs.readdirSync(path.join(__dirname, 'app', 'assets', 'images', 'backgrounds')).length)))
 
+    //ejse.data('bkid', Math.floor((Math.random() * fs.readdirSync(path.join(__dirname, 'app', 'assets', 'images', 'backgrounds')).length)))
 
 
     win.loadURL(url.format({
 
-        pathname: path.join(__dirname, 'app', 'app.ejs'),
 
+        pathname: path.join(__dirname, 'app', 'app.html'),
 
         protocol: 'file:',
 
         slashes: true
 
     }))

Файловите разлики са ограничени, защото са твърде много
+ 906 - 15
package-lock.json


+ 5 - 2
package.json
Целия файл 

@@ -29,14 +29,17 @@
 
     "adm-zip": "^0.4.7",
 
     "async": "^2.6.0",
 
     "discord-rpc": "^3.0.0-beta.8",
 
-    "ejs": "^2.5.7",
 
-    "ejs-electron": "^2.0.1",
 
     "find-java-home": "^0.2.0",
 
     "jquery": "^3.2.1",
 
+    "react": "^16.2.0",
 
+    "react-dom": "^16.2.0",
 
     "request-promise-native": "^1.0.5",
 
     "uuid": "^3.2.1"
 
   },
 
   "devDependencies": {
 
+    "babel-preset-env": "^1.6.1",
 
+    "babel-preset-react": "^6.24.1",
 
+    "babel-register": "^6.26.0",
 
     "electron": "^1.7.11",
 
     "electron-builder": "^19.54.0"
 
   },

Някои файлове не бяха показани, защото твърде много файлове са промени