Inicio Explorar Ayuda
Iniciar sesión
gregory
/
ElectronMCLauncher
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

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 hace 7 años
padre
8ea4ae8ec2
commit
04d869794f
Se han modificado 10 ficheros con 1034 adiciones y 33 borrados
Dividir vista Mostrar estadísticas de diff
  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
Ver fichero 

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

+ 13 - 6
app/app.ejs → app/app.html
Ver fichero 

@@ -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
Ver fichero 

@@ -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
Ver fichero 

@@ -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
Ver fichero 

@@ -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
Ver fichero 

@@ -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
Ver fichero 

@@ -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
Ver fichero 

@@ -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
 
     }))

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 906 - 15
package-lock.json


+ 5 - 2
package.json
Ver fichero 

@@ -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"
 
   },

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio