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 2018-02-19 19:13:10 -05:00
parent 8ea4ae8ec2
commit 04d869794f
10 changed files with 1223 additions and 43 deletions

1
.babelrc Normal file
View File

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

View File

@ -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
app/app.jsx Normal file
View 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
View 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;
}

View File

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

View File

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

1120
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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