Merge pull request #5 from LucasSonego/electron

Electron

webapp/.gitignore → .gitignore

@@ -10,6 +10,7 @@ node_modules/
 
 # production
 /build
+/dist/win-unpacked
 
 # misc
 .DS_Store

.rescriptsrc.js

@@ -0,0 +1 @@
+module.exports = [require.resolve("./.webpack.config.js")];

.webpack.config.js

@@ -0,0 +1,4 @@
+module.exports = config => {
+  config.target = "electron-renderer";
+  return config;
+};

dist/builder-effective-config.yaml

@@ -0,0 +1,16 @@
+directories:
+  output: dist
+  buildResources: build
+appId: f1-better-telemetry-by-lucassonego
+productName: F1 Better Telemetry
+copyright: 'Copyright © 2021 ${author}'
+mac:
+  category: public.app-category.utilities
+extends: null
+extraMetadata:
+  main: main.js
+files:
+  - filter:
+      - '**/*'
+      - build
+electronVersion: 11.2.0

dist/latest.yml

@@ -0,0 +1,8 @@
+version: 1.0.0
+files:
+  - url: F1-Better-Telemetry-Setup-1.0.0.exe
+    sha512: 81+bPquRFfHXWDytOzbDBS48YY8IozcP8HXyZzaErZ9v0V2rH62WPqYqMSat3Yb5aO3kbYmDMf+hBQBc8nMAxg==
+    size: 81809167
+path: F1-Better-Telemetry-Setup-1.0.0.exe
+sha512: 81+bPquRFfHXWDytOzbDBS48YY8IozcP8HXyZzaErZ9v0V2rH62WPqYqMSat3Yb5aO3kbYmDMf+hBQBc8nMAxg==
+releaseDate: '2021-01-21T18:58:39.090Z'

main.js

@@ -0,0 +1,45 @@
+require("./telemetryClient")();
+
+const electron = require("electron");
+const app = electron.app;
+const BrowserWindow = electron.BrowserWindow;
+const path = require("path");
+const isDev = require("electron-is-dev");
+
+let mainWindow;
+
+function createWindow() {
+  mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 650,
+    minHeight: 650,
+    minWidth: 1200,
+    frame: false,
+    webPreferences: {
+      nodeIntegration: true,
+      enableRemoteModule: true,
+    },
+    icon: __dirname + "/icon.png",
+  });
+  mainWindow.loadURL(
+    isDev
+      ? "http://localhost:3000"
+      : `file://${path.join(__dirname, "./build/index.html")}`
+  );
+  // mainWindow.webContents.openDevTools();
+  mainWindow.on("closed", () => (mainWindow = null));
+}
+
+app.on("ready", createWindow);
+
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", () => {
+  if (mainWindow === null) {
+    createWindow();
+  }
+});

package.json

@@ -0,0 +1,83 @@
+{
+  "name": "f1-better-telemetry",
+  "version": "1.0.0",
+  "description": "Live telemetry from Codemasters F1 game",
+  "author": {
+    "name": "Lucas Sônego",
+    "email": "sonego_lucas@outlook.com",
+    "url": "https://github.com/LucasSonego"
+  },
+  "private": false,
+  "license": "MIT",
+  "homepage": "./",
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "cross-env": "^7.0.3",
+    "express": "^4.17.1",
+    "f1-telemetry-client": "^0.1.18",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-icons": "^3.11.0",
+    "react-scripts": "4.0.0",
+    "socket.io": "^2.3.0",
+    "socket.io-client": "^2.3.1",
+    "styled-components": "^5.2.1",
+    "web-vitals": "^0.2.4",
+    "electron-is-dev": "^1.2.0"
+  },
+  "devDependencies": {
+    "electron": "^11.2.0",
+    "@rescripts/cli": "^0.0.15",
+    "@rescripts/rescript-env": "^0.0.12",
+    "concurrently": "^5.3.0",
+    "electron-builder": "^22.9.1",
+    "wait-on": "^5.2.1"
+  },
+  "main": "main.js",
+  "build": {
+    "appId": "f1-better-telemetry-by-lucassonego",
+    "productName": "F1 Better Telemetry",
+    "copyright": "Copyright © 2021 ${author}",
+    "mac": {
+      "category": "public.app-category.utilities"
+    },
+    "extends": null,
+    "extraMetadata": {
+      "main": "main.js"
+    },
+    "files": [
+      "**/*",
+      "build"
+    ]
+  },
+  "scripts": {
+    "react-start": "rescripts start",
+    "react-build": "rescripts build",
+    "react-test": "rescripts test --env=jsdom",
+    "react-eject": "react-scripts eject",
+    "electron-build": "electron-builder",
+    "release": "yarn react-build && electron-builder --publish=always",
+    "build": "yarn react-build && yarn electron-build",
+    "start": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

webapp/src/App.js → src/App.js

@@ -2,10 +2,11 @@ import React, { useEffect, useState } from "react";
 import io from "socket.io-client";
 
 import Fonts from "./fonts";
-import { Container } from "./styles";
+import { Container, Content } from "./styles";
 import LapData from "./Components/LapData";
 import CarData from "./Components/CarData";
 import SessionData from "./Components/SessionData";
+import TitleBar from "./Components/TitleBar";
 
 const telemetry = io.connect("http://localhost:4000");
 
@@ -29,12 +30,15 @@ function App() {
   return (
     <Container>
       <Fonts />
-      <LapData
-        telemetry={telemetry}
-        tyreCompound={carStatus?.m_tyreVisualCompound}
-      />
-      <CarData carStatus={carStatus} carTelemetry={carTelemetry} />
-      <SessionData session={session} />
+      <TitleBar />
+      <Content>
+        <LapData
+          telemetry={telemetry}
+          tyreCompound={carStatus?.m_tyreVisualCompound}
+        />
+        <CarData carStatus={carStatus} carTelemetry={carTelemetry} />
+        <SessionData session={session} />
+      </Content>
     </Container>
   );
 }

webapp/src/Components/CarData/styles.js → src/Components/CarData/styles.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const Container = styled.div`
   .car {
     padding: 0 20px;
-    height: 100vh;
+    height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;

webapp/src/Components/LapData/styles.js → src/Components/LapData/styles.js

@@ -9,8 +9,8 @@ export const Container = styled.div`
   grid-gap: 10px;
   grid-auto-rows: min-content;
   color: #fff;
-  height: 100vh;
-  max-height: 100vh;
+  height: 100%;
+  max-height: 100%;
   overflow-y: scroll;
 
   /* width */

src/Components/TitleBar/index.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { remote } from "electron";
+
+import {
+  VscClose,
+  VscChromeMaximize,
+  VscChromeMinimize,
+} from "react-icons/vsc";
+import { Container } from "./styles";
+
+function TitleBar() {
+  return (
+    <Container>
+      <span>F1 Better Telemetry</span>
+      <div className="controls">
+        <button onClick={() => remote.getCurrentWindow().minimize()}>
+          <div className="button-content">
+            <VscChromeMinimize className="minimize" />
+          </div>
+        </button>
+        <button
+          onClick={() =>
+            remote.getCurrentWindow().isMaximized()
+              ? remote.getCurrentWindow().unmaximize()
+              : remote.getCurrentWindow().maximize()
+          }
+        >
+          <div className="button-content">
+            <VscChromeMaximize className="maximize" />
+          </div>
+        </button>
+        <button onClick={() => remote.getCurrentWindow().close()}>
+          <div className="button-content">
+            <VscClose className="close" />
+          </div>
+        </button>
+      </div>
+    </Container>
+  );
+}
+
+export default TitleBar;