mirror of
https://github.com/open-goal/launcher.git
synced 2024-10-19 14:47:36 -04:00
trying to link chakra ui into the app
This commit is contained in:
trippjoe
parent
ccd0e4685d
commit
4d242b1d8e
|
|
@ -61,9 +61,9 @@ async function createWindow() {
|
|||
title: "OpenGOAL Launcher",
|
||||
webPreferences: {
|
||||
devTools: isDev,
|
||||
nodeIntegration: false,
|
||||
nodeIntegrationInWorker: false,
|
||||
nodeIntegrationInSubFrames: false,
|
||||
nodeIntegration: true,
|
||||
// nodeIntegrationInWorker: false,
|
||||
// nodeIntegrationInSubFrames: false,
|
||||
contextIsolation: true,
|
||||
enableRemoteModule: false,
|
||||
additionalArguments: [`storePath:${app.getPath("userData")}`],
|
||||
|
|
|
|||
35
app/src/components/GettingStarted.js
Normal file
35
app/src/components/GettingStarted.js
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { Button, Text, Progress, VStack, Divider } from "@chakra-ui/react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
const { receive, send } = window.api;
|
||||
|
||||
function GettingStarted() {
|
||||
const [status, setStatus] = useState('Awaiting Jak ISO File');
|
||||
|
||||
function handleClick() {
|
||||
send('getISO');
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
receive('status', newStatus => {
|
||||
console.log(newStatus);
|
||||
setStatus(newStatus);
|
||||
});
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
<VStack alignSelf="center" minH="inherit" p='6' spacing="4" justifyContent="center">
|
||||
{status === 'Awaiting Jak ISO File' ?
|
||||
<>
|
||||
<Text fontWeight="bold">Please select your Jak and Daxter ISO below</Text>
|
||||
<Button colorScheme="telegram" onClick={handleClick} w="50%" shadow='base'>Open your ISO File</Button>
|
||||
<Divider w="50%" />
|
||||
</> : null
|
||||
}
|
||||
<Progress size='lg' w="50%" colorScheme="green" rounded="md" isIndeterminate />
|
||||
{status ? <Text fontWeight="extrabold">Status: {status}</Text> : null}
|
||||
</VStack>
|
||||
);
|
||||
}
|
||||
|
||||
export default GettingStarted;
|
||||
13
app/src/components/Header.js
Normal file
13
app/src/components/Header.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import React from "react";
|
||||
import { Heading, Img } from "@chakra-ui/react";
|
||||
const logo = require('../assets/images/header-logo.png');
|
||||
|
||||
function Header() {
|
||||
return (
|
||||
<Heading py={4}>
|
||||
<Img src={logo} width="30vw" m="0 auto" draggable="false" />
|
||||
</Heading>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
17
app/src/components/Home.js
Normal file
17
app/src/components/Home.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
import { VStack, Button } from '@chakra-ui/react';
|
||||
const { send } = window.api;
|
||||
|
||||
function handleLaunch() {
|
||||
send('launch');
|
||||
}
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<VStack alignSelf="center" minH="inherit" p='6' spacing="4" justifyContent="center">
|
||||
<Button colorScheme="telegram" onClick={handleLaunch} w="50%" shadow='base'>Launch Game</Button>
|
||||
</VStack>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
29
app/src/components/ImportantLinks.js
Normal file
29
app/src/components/ImportantLinks.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { Button, VStack } from "@chakra-ui/react";
|
||||
import React from "react";
|
||||
const data = require('../assets/data/links.json');
|
||||
|
||||
function Feature({ title, link }) {
|
||||
return (
|
||||
<Button w="50%" shadow='base' colorScheme="telegram">
|
||||
<a href={link} rel="noreferrer" target="_blank">
|
||||
{title}
|
||||
</a>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function ImportantLinks() {
|
||||
return (
|
||||
<VStack alignSelf="center" minH="inherit" p='6' spacing="4" justifyContent="center">
|
||||
{data.map((item, index) => (
|
||||
<Feature
|
||||
key={index}
|
||||
title={item.name}
|
||||
link={item.link}
|
||||
/>
|
||||
))}
|
||||
</VStack>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImportantLinks;
|
||||
37
app/src/components/Landing.js
Normal file
37
app/src/components/Landing.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import React from "react";
|
||||
import { Flex, Tabs, TabList, TabPanels, TabPanel, Tab } from "@chakra-ui/react";
|
||||
import Home from "./Home";
|
||||
import GettingStarted from "./GettingStarted";
|
||||
// import ImportantLinks from "./ImportantLinks";
|
||||
// import Settings from "./Settings";
|
||||
|
||||
function Landing() {
|
||||
return (
|
||||
<Flex direction="column" mx={4}>
|
||||
<Tabs isFitted isLazy>
|
||||
<TabList>
|
||||
<Tab>Home</Tab>
|
||||
<Tab>Getting Started</Tab>
|
||||
<Tab>Links</Tab>
|
||||
<Tab>Settings</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel minH="70vh">
|
||||
<Home />
|
||||
</TabPanel>
|
||||
<TabPanel minH="70vh">
|
||||
<GettingStarted />
|
||||
</TabPanel>
|
||||
{/* <TabPanel minH="70vh">
|
||||
<ImportantLinks />
|
||||
</TabPanel>
|
||||
<TabPanel minH="70vh">
|
||||
<Settings />
|
||||
</TabPanel> */}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
||||
export default Landing;
|
||||
26
app/src/components/Settings.js
Normal file
26
app/src/components/Settings.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import React from "react";
|
||||
import { Button, VStack } from '@chakra-ui/react';
|
||||
import { ColorModeSwitcher } from '../ColorModeSwitcher';
|
||||
const { invoke } = window.api;
|
||||
|
||||
async function handleCheckUpdates() {
|
||||
try {
|
||||
let response = await invoke('checkUpdates');
|
||||
console.log(response);
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
function Settings() {
|
||||
return (
|
||||
<VStack alignSelf="center" minH="inherit" p='6' spacing="4" justifyContent="center">
|
||||
<ColorModeSwitcher as={Button} w="50%" shadow='base' />
|
||||
<Button onClick={handleCheckUpdates} w="50%" shadow='base' colorScheme="telegram">Check for Updates</Button>
|
||||
{/* <Button onClick={decompile} w="50%" shadow='base' colorScheme="telegram">Decompile Game</Button> */}
|
||||
{/* <Button onClick={handleBuildGame} w="50%" shadow='base' colorScheme="telegram">Build Game</Button> */}
|
||||
</VStack >
|
||||
);
|
||||
}
|
||||
|
||||
export default Settings;
|
||||
|
|
@ -12,7 +12,7 @@ class SubItem extends React.Component {
|
|||
componentDidMount() {
|
||||
// Set up binding in code whenever the context menu item
|
||||
// of id "alert" is selected
|
||||
window.api.contextMenu.onReceive("softAlert", function(args) {
|
||||
window.api.contextMenu.onReceive("softAlert", function (args) {
|
||||
console.log(`This alert was brought to you by secure-electron-context-menu by ${args.attributes.name}`);
|
||||
|
||||
// Note - we have access to the "params" object as defined here: https://www.electronjs.org/docs/api/web-contents#event-context-menu
|
||||
|
|
@ -22,14 +22,14 @@ class SubItem extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div id="subitem">
|
||||
<div
|
||||
cm-template="softAlertTemplate"
|
||||
cm-id={this.props.id}
|
||||
cm-payload-name={`Child (${this.props.id})`}>
|
||||
ID ({this.props.id}): Try right-clicking me for a custom context menu
|
||||
<div id="subitem">
|
||||
<div
|
||||
cm-template="softAlertTemplate"
|
||||
cm-id={this.props.id}
|
||||
cm-payload-name={`Child (${this.props.id})`}>
|
||||
ID ({this.props.id}): Try right-clicking me for a custom context menu
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,252 +1,250 @@
|
|||
import React from "react";
|
||||
import ROUTES from "Constants/routes";
|
||||
import {
|
||||
validateLicenseRequest,
|
||||
validateLicenseResponse,
|
||||
} from "secure-electron-license-keys";
|
||||
// import React from "react";
|
||||
// import ROUTES from "Constants/routes";
|
||||
// import {
|
||||
// validateLicenseRequest,
|
||||
// validateLicenseResponse,
|
||||
// } from "secure-electron-license-keys";
|
||||
|
||||
class Nav extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// class Nav extends React.Component {
|
||||
// constructor(props) {
|
||||
// super(props);
|
||||
|
||||
this.history = props.history;
|
||||
this.state = {
|
||||
mobileMenuActive: false,
|
||||
licenseModalActive: false,
|
||||
// this.history = props.history;
|
||||
// this.state = {
|
||||
// mobileMenuActive: false,
|
||||
// licenseModalActive: false,
|
||||
|
||||
// license-specific
|
||||
licenseValid: false,
|
||||
allowedMajorVersions: "",
|
||||
allowedMinorVersions: "",
|
||||
appVersion: "",
|
||||
licenseExpiry: "",
|
||||
};
|
||||
// // license-specific
|
||||
// licenseValid: false,
|
||||
// allowedMajorVersions: "",
|
||||
// allowedMinorVersions: "",
|
||||
// appVersion: "",
|
||||
// licenseExpiry: "",
|
||||
// };
|
||||
|
||||
this.toggleMenu = this.toggleMenu.bind(this);
|
||||
this.toggleLicenseModal = this.toggleLicenseModal.bind(this);
|
||||
this.navigate = this.navigate.bind(this);
|
||||
}
|
||||
// this.toggleMenu = this.toggleMenu.bind(this);
|
||||
// this.toggleLicenseModal = this.toggleLicenseModal.bind(this);
|
||||
// this.navigate = this.navigate.bind(this);
|
||||
// }
|
||||
|
||||
componentWillUnmount() {
|
||||
window.api.licenseKeys.clearRendererBindings();
|
||||
}
|
||||
// componentWillUnmount() {
|
||||
// window.api.licenseKeys.clearRendererBindings();
|
||||
// }
|
||||
|
||||
componentDidMount() {
|
||||
// Set up binding to listen when the license key is
|
||||
// validated by the main process
|
||||
const _ = this;
|
||||
// componentDidMount() {
|
||||
// // Set up binding to listen when the license key is
|
||||
// // validated by the main process
|
||||
// const _ = this;
|
||||
|
||||
window.api.licenseKeys.onReceive(validateLicenseResponse, function (data) {
|
||||
// If the license key/data is valid
|
||||
if (data.success) {
|
||||
// Here you would compare data.appVersion to
|
||||
// data.major, data.minor and data.patch to
|
||||
// ensure that the user's version of the app
|
||||
// matches their license
|
||||
_.setState({
|
||||
licenseValid: true,
|
||||
allowedMajorVersions: data.major,
|
||||
allowedMinorVersions: data.minor,
|
||||
allowedPatchVersions: data.patch,
|
||||
appVersion: data.appVersion,
|
||||
licenseExpiry: data.expire,
|
||||
});
|
||||
} else {
|
||||
_.setState({
|
||||
licenseValid: false,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
// window.api.licenseKeys.onReceive(validateLicenseResponse, function (data) {
|
||||
// // If the license key/data is valid
|
||||
// if (data.success) {
|
||||
// // Here you would compare data.appVersion to
|
||||
// // data.major, data.minor and data.patch to
|
||||
// // ensure that the user's version of the app
|
||||
// // matches their license
|
||||
// _.setState({
|
||||
// licenseValid: true,
|
||||
// allowedMajorVersions: data.major,
|
||||
// allowedMinorVersions: data.minor,
|
||||
// allowedPatchVersions: data.patch,
|
||||
// appVersion: data.appVersion,
|
||||
// licenseExpiry: data.expire,
|
||||
// });
|
||||
// } else {
|
||||
// _.setState({
|
||||
// licenseValid: false,
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
toggleMenu(event) {
|
||||
this.setState({
|
||||
mobileMenuActive: !this.state.mobileMenuActive,
|
||||
});
|
||||
}
|
||||
// toggleMenu(event) {
|
||||
// this.setState({
|
||||
// mobileMenuActive: !this.state.mobileMenuActive,
|
||||
// });
|
||||
// }
|
||||
|
||||
toggleLicenseModal(event) {
|
||||
const previous = this.state.licenseModalActive;
|
||||
// toggleLicenseModal(event) {
|
||||
// const previous = this.state.licenseModalActive;
|
||||
|
||||
// Only send license request if the modal
|
||||
// is not already open
|
||||
if (!previous) {
|
||||
window.api.licenseKeys.send(validateLicenseRequest);
|
||||
}
|
||||
// // Only send license request if the modal
|
||||
// // is not already open
|
||||
// if (!previous) {
|
||||
// window.api.licenseKeys.send(validateLicenseRequest);
|
||||
// }
|
||||
|
||||
this.setState({
|
||||
licenseModalActive: !this.state.licenseModalActive,
|
||||
});
|
||||
}
|
||||
// this.setState({
|
||||
// licenseModalActive: !this.state.licenseModalActive,
|
||||
// });
|
||||
// }
|
||||
|
||||
// Using a custom method to navigate because we
|
||||
// need to close the mobile menu if we navigate to
|
||||
// another page
|
||||
navigate(url) {
|
||||
this.setState(
|
||||
{
|
||||
mobileMenuActive: false,
|
||||
},
|
||||
function () {
|
||||
this.history.push(url);
|
||||
}
|
||||
);
|
||||
}
|
||||
// // Using a custom method to navigate because we
|
||||
// // need to close the mobile menu if we navigate to
|
||||
// // another page
|
||||
// navigate(url) {
|
||||
// this.setState(
|
||||
// {
|
||||
// mobileMenuActive: false,
|
||||
// },
|
||||
// function () {
|
||||
// this.history.push(url);
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
|
||||
renderLicenseModal() {
|
||||
return (
|
||||
<div
|
||||
className={`modal ${this.state.licenseModalActive ? "is-active" : ""}`}>
|
||||
<div className="modal-background"></div>
|
||||
<div className="modal-content">
|
||||
{this.state.licenseValid ? (
|
||||
<div className="box">
|
||||
The license key for this product has been validated and the
|
||||
following versions of this app are allowed for your use:
|
||||
<div>
|
||||
<strong>Major versions:</strong>{" "}
|
||||
{this.state.allowedMajorVersions} <br />
|
||||
<strong>Minor versions:</strong>{" "}
|
||||
{this.state.allowedMinorVersions} <br />
|
||||
<strong>Patch versions:</strong>{" "}
|
||||
{this.state.allowedPatchVersions} <br />
|
||||
<strong>Expires on:</strong>{" "}
|
||||
{!this.state.licenseExpiry
|
||||
? "never!"
|
||||
: this.state.licenseExpiry}{" "}
|
||||
<br />(
|
||||
<em>
|
||||
App version:
|
||||
{` v${this.state.appVersion.major}.${this.state.appVersion.minor}.${this.state.appVersion.patch}`}
|
||||
</em>
|
||||
)
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="box">
|
||||
<div>The license key is not valid.</div>
|
||||
<div>
|
||||
If you'd like to create a license key, follow these steps:
|
||||
<ol style={{ marginLeft: "30px" }}>
|
||||
<li>
|
||||
Install this package globally (
|
||||
<strong>npm i secure-electron-license-keys-cli -g</strong>).
|
||||
</li>
|
||||
<li>
|
||||
Run <strong>secure-electron-license-keys-cli</strong>.
|
||||
</li>
|
||||
<li>
|
||||
Copy <strong>public.key</strong> and{" "}
|
||||
<strong>license.data</strong> into the <em>root</em> folder
|
||||
of this app.
|
||||
</li>
|
||||
<li>
|
||||
Re-run this app (ie. <strong>npm run dev</strong>).
|
||||
</li>
|
||||
<li>
|
||||
If you'd like to further customize your license keys, copy
|
||||
this link into your browser:{" "}
|
||||
<a href="https://github.com/reZach/secure-electron-license-keys-cli">
|
||||
https://github.com/reZach/secure-electron-license-keys-cli
|
||||
</a>
|
||||
.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
className="modal-close is-large"
|
||||
aria-label="close"
|
||||
onClick={this.toggleLicenseModal}></button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
// renderLicenseModal() {
|
||||
// return (
|
||||
// <div
|
||||
// className={`modal ${this.state.licenseModalActive ? "is-active" : ""}`}>
|
||||
// <div className="modal-background"></div>
|
||||
// <div className="modal-content">
|
||||
// {this.state.licenseValid ? (
|
||||
// <div className="box">
|
||||
// The license key for this product has been validated and the
|
||||
// following versions of this app are allowed for your use:
|
||||
// <div>
|
||||
// <strong>Major versions:</strong>{" "}
|
||||
// {this.state.allowedMajorVersions} <br />
|
||||
// <strong>Minor versions:</strong>{" "}
|
||||
// {this.state.allowedMinorVersions} <br />
|
||||
// <strong>Patch versions:</strong>{" "}
|
||||
// {this.state.allowedPatchVersions} <br />
|
||||
// <strong>Expires on:</strong>{" "}
|
||||
// {!this.state.licenseExpiry
|
||||
// ? "never!"
|
||||
// : this.state.licenseExpiry}{" "}
|
||||
// <br />(
|
||||
// <em>
|
||||
// App version:
|
||||
// {` v${this.state.appVersion.major}.${this.state.appVersion.minor}.${this.state.appVersion.patch}`}
|
||||
// </em>
|
||||
// )
|
||||
// <br />
|
||||
// </div>
|
||||
// </div>
|
||||
// ) : (
|
||||
// <div className="box">
|
||||
// <div>The license key is not valid.</div>
|
||||
// <div>
|
||||
// If you'd like to create a license key, follow these steps:
|
||||
// <ol style={{ marginLeft: "30px" }}>
|
||||
// <li>
|
||||
// Install this package globally (
|
||||
// <strong>npm i secure-electron-license-keys-cli -g</strong>).
|
||||
// </li>
|
||||
// <li>
|
||||
// Run <strong>secure-electron-license-keys-cli</strong>.
|
||||
// </li>
|
||||
// <li>
|
||||
// Copy <strong>public.key</strong> and{" "}
|
||||
// <strong>license.data</strong> into the <em>root</em> folder
|
||||
// of this app.
|
||||
// </li>
|
||||
// <li>
|
||||
// Re-run this app (ie. <strong>npm run dev</strong>).
|
||||
// </li>
|
||||
// <li>
|
||||
// If you'd like to further customize your license keys, copy
|
||||
// this link into your browser:{" "}
|
||||
// <a href="https://github.com/reZach/secure-electron-license-keys-cli">
|
||||
// https://github.com/reZach/secure-electron-license-keys-cli
|
||||
// </a>
|
||||
// .
|
||||
// </li>
|
||||
// </ol>
|
||||
// </div>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// <button
|
||||
// className="modal-close is-large"
|
||||
// aria-label="close"
|
||||
// onClick={this.toggleLicenseModal}></button>
|
||||
// </div>
|
||||
// );
|
||||
// }
|
||||
|
||||
render() {
|
||||
return (
|
||||
<nav
|
||||
className="navbar is-dark"
|
||||
role="navigation"
|
||||
aria-label="main navigation">
|
||||
<div className="navbar-brand">
|
||||
<a
|
||||
role="button"
|
||||
className={`navbar-burger ${
|
||||
this.state.mobileMenuActive ? "is-active" : ""
|
||||
}`}
|
||||
data-target="navbarBasicExample"
|
||||
aria-label="menu"
|
||||
aria-expanded="false"
|
||||
onClick={this.toggleMenu}>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
<span aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
id="navbarBasicExample"
|
||||
className={`navbar-menu ${
|
||||
this.state.mobileMenuActive ? "is-active" : ""
|
||||
}`}>
|
||||
<div className="navbar-start">
|
||||
<a
|
||||
className="navbar-item"
|
||||
onClick={() => this.navigate(ROUTES.WELCOME)}>
|
||||
Home
|
||||
</a>
|
||||
// render() {
|
||||
// return (
|
||||
// <nav
|
||||
// className="navbar is-dark"
|
||||
// role="navigation"
|
||||
// aria-label="main navigation">
|
||||
// <div className="navbar-brand">
|
||||
// <a
|
||||
// role="button"
|
||||
// className={`navbar-burger ${this.state.mobileMenuActive ? "is-active" : ""
|
||||
// }`}
|
||||
// data-target="navbarBasicExample"
|
||||
// aria-label="menu"
|
||||
// aria-expanded="false"
|
||||
// onClick={this.toggleMenu}>
|
||||
// <span aria-hidden="true"></span>
|
||||
// <span aria-hidden="true"></span>
|
||||
// <span aria-hidden="true"></span>
|
||||
// </a>
|
||||
// </div>
|
||||
// <div
|
||||
// id="navbarBasicExample"
|
||||
// className={`navbar-menu ${this.state.mobileMenuActive ? "is-active" : ""
|
||||
// }`}>
|
||||
// <div className="navbar-start">
|
||||
// <a
|
||||
// className="navbar-item"
|
||||
// onClick={() => this.navigate(ROUTES.WELCOME)}>
|
||||
// Home
|
||||
// </a>
|
||||
|
||||
<a
|
||||
className="navbar-item"
|
||||
onClick={() => this.navigate(ROUTES.ABOUT)}>
|
||||
About
|
||||
</a>
|
||||
// <a
|
||||
// className="navbar-item"
|
||||
// onClick={() => this.navigate(ROUTES.ABOUT)}>
|
||||
// About
|
||||
// </a>
|
||||
|
||||
<div className="navbar-item has-dropdown is-hoverable">
|
||||
<a className="navbar-link">Sample pages</a>
|
||||
// <div className="navbar-item has-dropdown is-hoverable">
|
||||
// <a className="navbar-link">Sample pages</a>
|
||||
|
||||
<div className="navbar-dropdown">
|
||||
<a
|
||||
className="navbar-item"
|
||||
onClick={() => this.navigate(ROUTES.MOTD)}>
|
||||
Using the Electron store
|
||||
</a>
|
||||
<a
|
||||
className="navbar-item"
|
||||
onClick={() => this.navigate(ROUTES.LOCALIZATION)}>
|
||||
Changing locales
|
||||
</a>
|
||||
<a
|
||||
className="navbar-item"
|
||||
onClick={() => this.navigate(ROUTES.UNDOREDO)}>
|
||||
Undo/redoing actions
|
||||
</a>
|
||||
<a
|
||||
className="navbar-item"
|
||||
onClick={() => this.navigate(ROUTES.CONTEXTMENU)}>
|
||||
Custom context menu
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{this.renderLicenseModal()}
|
||||
<div className="navbar-end">
|
||||
<div className="navbar-item">
|
||||
<div className="buttons">
|
||||
<a
|
||||
className="button is-light"
|
||||
onClick={this.toggleLicenseModal}>
|
||||
Check license
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
}
|
||||
// <div className="navbar-dropdown">
|
||||
// <a
|
||||
// className="navbar-item"
|
||||
// onClick={() => this.navigate(ROUTES.MOTD)}>
|
||||
// Using the Electron store
|
||||
// </a>
|
||||
// <a
|
||||
// className="navbar-item"
|
||||
// onClick={() => this.navigate(ROUTES.LOCALIZATION)}>
|
||||
// Changing locales
|
||||
// </a>
|
||||
// <a
|
||||
// className="navbar-item"
|
||||
// onClick={() => this.navigate(ROUTES.UNDOREDO)}>
|
||||
// Undo/redoing actions
|
||||
// </a>
|
||||
// <a
|
||||
// className="navbar-item"
|
||||
// onClick={() => this.navigate(ROUTES.CONTEXTMENU)}>
|
||||
// Custom context menu
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// {this.renderLicenseModal()}
|
||||
// <div className="navbar-end">
|
||||
// <div className="navbar-item">
|
||||
// <div className="buttons">
|
||||
// <a
|
||||
// className="button is-light"
|
||||
// onClick={this.toggleLicenseModal}>
|
||||
// Check license
|
||||
// </a>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </nav>
|
||||
// );
|
||||
// }
|
||||
// }
|
||||
|
||||
export default Nav;
|
||||
// export default Nav;
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0px;
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
#target {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
|
|
@ -3,7 +3,6 @@ import { ConnectedRouter } from "connected-react-router";
|
|||
import { Provider } from "react-redux";
|
||||
import Routes from "Core/routes";
|
||||
import Nav from "./nav";
|
||||
import "./root.css";
|
||||
|
||||
class Root extends React.Component {
|
||||
render() {
|
||||
|
|
@ -13,8 +12,8 @@ class Root extends React.Component {
|
|||
<React.Fragment>
|
||||
<Provider store={store}>
|
||||
<ConnectedRouter history={history}>
|
||||
<Nav history={history}></Nav>
|
||||
<Routes></Routes>
|
||||
{/* <Nav history={history}></Nav> */}
|
||||
<Routes></Routes>
|
||||
</ConnectedRouter>
|
||||
</Provider>
|
||||
</React.Fragment>
|
||||
|
|
@ -25,19 +25,17 @@ const ContextMenu = loadable(() =>
|
|||
import(/* webpackChunkName: "ContextMenuChunk" */ "Pages/contextmenu/contextmenu")
|
||||
);
|
||||
|
||||
class Routes extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<Switch>
|
||||
<Route exact path={ROUTES.WELCOME} component={Welcome}></Route>
|
||||
<Route path={ROUTES.ABOUT} component={About}></Route>
|
||||
<Route path={ROUTES.MOTD} component={Motd}></Route>
|
||||
<Route path={ROUTES.LOCALIZATION} component={Localization}></Route>
|
||||
<Route path={ROUTES.UNDOREDO} component={UndoRedo}></Route>
|
||||
<Route path={ROUTES.CONTEXTMENU} component={ContextMenu}></Route>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
function Routes() {
|
||||
return (
|
||||
<Switch>
|
||||
<Route exact path={ROUTES.WELCOME} component={Welcome}></Route>
|
||||
<Route path={ROUTES.ABOUT} component={About}></Route>
|
||||
<Route path={ROUTES.MOTD} component={Motd}></Route>
|
||||
<Route path={ROUTES.LOCALIZATION} component={Localization}></Route>
|
||||
<Route path={ROUTES.UNDOREDO} component={UndoRedo}></Route>
|
||||
<Route path={ROUTES.CONTEXTMENU} component={ContextMenu}></Route>
|
||||
</Switch>
|
||||
);
|
||||
}
|
||||
|
||||
export default Routes;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>OpenGOAL Launcher</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -4,15 +4,11 @@ import i18n from "I18n/i18n.config";
|
|||
import { I18nextProvider } from "react-i18next";
|
||||
import Root from "Core/root";
|
||||
import store, { history } from "Redux/store/store";
|
||||
import "bulma/css/bulma.css";
|
||||
import { ChakraProvider } from '@chakra-ui/react';
|
||||
|
||||
ReactDOM.render(
|
||||
<I18nextProvider i18n={i18n}>
|
||||
<Suspense fallback="loading">
|
||||
<ChakraProvider>
|
||||
<Root store={store} history={history}></Root>
|
||||
</ChakraProvider>
|
||||
<Root store={store} history={history}></Root>
|
||||
</Suspense>
|
||||
</I18nextProvider>,
|
||||
document.getElementById("target")
|
||||
|
|
|
|||
37
app/src/pages/welcome/welcome.js
Normal file
37
app/src/pages/welcome/welcome.js
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
import React from "react";
|
||||
// import ROUTES from "Constants/routes";
|
||||
// import { Link } from "react-router-dom";
|
||||
import { Flex, Tabs, TabList, TabPanels, TabPanel, Tab } from "@chakra-ui/react";
|
||||
import Home from "../../components/Home";
|
||||
import GettingStarted from "../../components/GettingStarted";
|
||||
|
||||
function Welcome() {
|
||||
return (
|
||||
<Flex direction="column" mx={4}>
|
||||
<Tabs isFitted isLazy>
|
||||
<TabList>
|
||||
<Tab>Home</Tab>
|
||||
<Tab>Getting Started</Tab>
|
||||
<Tab>Links</Tab>
|
||||
<Tab>Settings</Tab>
|
||||
</TabList>
|
||||
<TabPanels>
|
||||
<TabPanel minH="70vh">
|
||||
<Home />
|
||||
</TabPanel>
|
||||
<TabPanel minH="70vh">
|
||||
<GettingStarted />
|
||||
</TabPanel>
|
||||
{/* <TabPanel minH="70vh">
|
||||
<ImportantLinks />
|
||||
</TabPanel>
|
||||
<TabPanel minH="70vh">
|
||||
<Settings />
|
||||
</TabPanel> */}
|
||||
</TabPanels>
|
||||
</Tabs>
|
||||
</Flex>
|
||||
)
|
||||
}
|
||||
|
||||
export default Welcome;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import React from "react";
|
||||
import ROUTES from "Constants/routes";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
class Welcome extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<section className="hero is-info">
|
||||
<div className="hero-body">
|
||||
<p className="title">
|
||||
Thank you for trying out the secure-electron-template!
|
||||
</p>
|
||||
<p className="subtitle">
|
||||
Please navigate to view the features of this template.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h2 className="title is-2">Samples</h2>
|
||||
<div>
|
||||
<Link to={ROUTES.MOTD}>Using the Electron store.</Link> <br />
|
||||
<Link to={ROUTES.LOCALIZATION}>Changing locales.</Link> <br />
|
||||
<Link to={ROUTES.UNDOREDO}>Undo/redoing actions.</Link> <br />
|
||||
<Link to={ROUTES.CONTEXTMENU}>Custom context menu.</Link> <br />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Welcome;
|
||||
5
package-lock.json
generated
5
package-lock.json
generated
|
|
@ -5121,11 +5121,6 @@
|
|||
"sax": "^1.2.4"
|
||||
}
|
||||
},
|
||||
"bulma": {
|
||||
"version": "0.9.3",
|
||||
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.9.3.tgz",
|
||||
"integrity": "sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g=="
|
||||
},
|
||||
"bytes": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -116,7 +116,6 @@
|
|||
"@emotion/styled": "^11.6.0",
|
||||
"@loadable/component": "^5.15.2",
|
||||
"@reduxjs/toolkit": "^1.7.1",
|
||||
"bulma": "^0.9.3",
|
||||
"connected-react-router": "^6.9.2",
|
||||
"easy-redux-undo": "^1.0.5",
|
||||
"electron-devtools-installer": "^3.2.0",
|
||||
|
|
|
|||
Loading…
Reference in a new issue