首頁 探索 說明
登入
gregory
/
ElectronMCLauncher
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

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

部分文件因文件數量過多而無法顯示