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.
This commit is contained in:
Daniel Scalzi
parent
8ea4ae8ec2
commit
04d869794f
@ -1,8 +1,8 @@
|
|||||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Westeroscraft Launcher</title>
|
<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>
|
<script src="./assets/js/actionbinder.js"></script>
|
||||||
<link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
|
<link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
|
||||||
<style>
|
<style>
|
||||||
@ -13,12 +13,19 @@
|
|||||||
#main {
|
#main {
|
||||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
|
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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<% include frame.ejs %>
|
<div id="app">
|
||||||
<div id="main">
|
|
||||||
<% include login.ejs %>
|
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
15
app/app.jsx
Normal file
15
app/app.jsx
Normal file
@ -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
app/frame.css
Normal file
67
app/frame.css
Normal file
@ -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;
|
||||||
|
}
|
||||||
@ -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
app/frame.jsx
Normal file
18
app/frame.jsx
Normal file
@ -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
app/start.jsx
Normal file
7
app/start.jsx
Normal file
@ -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'))
|
||||||
|
}
|
||||||
5
index.js
5
index.js
@ -2,7 +2,6 @@ const {app, BrowserWindow} = require('electron')
|
|||||||
const path = require('path')
|
const path = require('path')
|
||||||
const url = require('url')
|
const url = require('url')
|
||||||
const fs = require('fs')
|
const fs = require('fs')
|
||||||
const ejse = require('ejs-electron')
|
|
||||||
|
|
||||||
// Keep a global reference of the window object, if you don't, the window will
|
// 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.
|
// 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({
|
win.loadURL(url.format({
|
||||||
pathname: path.join(__dirname, 'app', 'app.ejs'),
|
pathname: path.join(__dirname, 'app', 'app.html'),
|
||||||
protocol: 'file:',
|
protocol: 'file:',
|
||||||
slashes: true
|
slashes: true
|
||||||
}))
|
}))
|
||||||
|
|||||||
1120
package-lock.json
generated
1120
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -29,14 +29,17 @@
|
|||||||
"adm-zip": "^0.4.7",
|
"adm-zip": "^0.4.7",
|
||||||
"async": "^2.6.0",
|
"async": "^2.6.0",
|
||||||
"discord-rpc": "^3.0.0-beta.8",
|
"discord-rpc": "^3.0.0-beta.8",
|
||||||
"ejs": "^2.5.7",
|
|
||||||
"ejs-electron": "^2.0.1",
|
|
||||||
"find-java-home": "^0.2.0",
|
"find-java-home": "^0.2.0",
|
||||||
"jquery": "^3.2.1",
|
"jquery": "^3.2.1",
|
||||||
|
"react": "^16.2.0",
|
||||||
|
"react-dom": "^16.2.0",
|
||||||
"request-promise-native": "^1.0.5",
|
"request-promise-native": "^1.0.5",
|
||||||
"uuid": "^3.2.1"
|
"uuid": "^3.2.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"babel-preset-env": "^1.6.1",
|
||||||
|
"babel-preset-react": "^6.24.1",
|
||||||
|
"babel-register": "^6.26.0",
|
||||||
"electron": "^1.7.11",
|
"electron": "^1.7.11",
|
||||||
"electron-builder": "^19.54.0"
|
"electron-builder": "^19.54.0"
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user