홈 탐색 도움말
로그인
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"
 
   },

이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.