From bf6c3a37478d0146949cd835decb78c38ff0606e Mon Sep 17 00:00:00 2001 From: extremeheat Date: Sun, 8 Sep 2024 16:03:44 -0400 Subject: [PATCH] Update for latest React (#79) * update react * Fix styles * remove package-lock.json --- .gitignore | 1 + package.json | 18 ++-- public/manifest.json | 15 ---- src/App.css | 80 +++++++++++------ src/App.js | 209 +++++++++++++++++++++---------------------- src/App.test.js | 16 ++-- src/index.js | 23 ++--- 7 files changed, 181 insertions(+), 181 deletions(-) delete mode 100644 public/manifest.json diff --git a/.gitignore b/.gitignore index d30f40e..50c3c37 100644 --- a/.gitignore +++ b/.gitignore @@ -19,3 +19,4 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +package-lock.json \ No newline at end of file diff --git a/package.json b/package.json index 8f02ccb..fb284e9 100644 --- a/package.json +++ b/package.json @@ -5,21 +5,25 @@ "homepage": "https://prismarinejs.github.io/", "dependencies": { "bootstrap": "^5.0.1", - "react": "^17.0.1", - "react-dom": "^17.0.1", - "react-router-dom": "^5.2.0", - "react-scripts": "^3.4.1" + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-router-dom": "^6.23.1", + "react-scripts": "^5.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", - "test": "react-scripts test --env=jsdom", + "test:react": "react-scripts test --env=jsdom --watchAll=false", + "test": "npm run lint && npm run test:react", "eject": "react-scripts eject", "predeploy": "npm run build", - "deploy": "gh-pages -b master -d build" + "deploy": "gh-pages -b master -d build", + "lint": "standard", + "fix": "standard --fix" }, "devDependencies": { - "gh-pages": "^6.0.0" + "gh-pages": "^6.0.0", + "standard": "^17.1.0" }, "browserslist": [ ">0.2%", diff --git a/public/manifest.json b/public/manifest.json deleted file mode 100644 index 966db90..0000000 --- a/public/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "short_name": "PrismarineJS", - "name": "A Minecraft server, bot, and API all written in JavaScript", - "icons": [ - { - "src": "favicon.ico", - "sizes": "64x64 32x32 24x24 16x16", - "type": "image/x-icon" - } - ], - "start_url": "./index.html", - "display": "standalone", - "theme_color": "#4DB396", - "background_color": "#ffffff" -} diff --git a/src/App.css b/src/App.css index 9e22dcd..b8353fb 100644 --- a/src/App.css +++ b/src/App.css @@ -57,7 +57,7 @@ a:hover { } .promoBanner { - background-image: url(/images/background.svg), linear-gradient(45deg, #009688, #4db6ac)!important; + background-image: url(../public/images/background.svg), linear-gradient(45deg, #009688, #4db6ac) !important; background-repeat: repeat; background-size: 3.5rem, 100%; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 0 100%); @@ -73,56 +73,78 @@ a:hover { /* -------------------------------------------------------------------------- */ .headerTitle { - background-color: transparent; - color: #FFFFFF; - font-weight: 600; + background-color: transparent; + color: #FFFFFF; + font-weight: 600; } .meetTheTeam ul { - list-style: none; - padding-left: 0; + list-style: none; + padding-left: 0; } .meetTheTeam ul img { - border-radius: 15%; - height: 48px; - width: 48px; + border-radius: 15%; + height: 48px; + width: 48px; } .meetTheTeam ul { - list-style: none; - padding-left: 0; + list-style: none; + padding-left: 0; } .meetTheTeam ul li { - margin-bottom: 3px; + margin-bottom: 3px; } .meetTheTeam ul li img { - margin-right: 15px; - border-radius: 48px; + margin-right: 15px; + border-radius: 48px; } .meetTheTeam ul code { - background-color: #e83e8c; - color: #FFFFFF; - font-family: inherit; - padding: 0.2rem 0.5rem; - position: relative; - margin-left: 6px; - display: inline-block; + background-color: #e83e8c; + color: #FFFFFF; + font-family: inherit; + padding: 0.2rem 0.5rem; + position: relative; + margin-left: 6px; + display: inline-block; } .meetTheTeam ul code:before { - content: ''; - border-right: 3px solid #E83E8C; - border-bottom: 3px solid transparent; - border-top: 3px solid transparent; - position: absolute; - top: calc(50% - 2px); - left: -3px; + content: ''; + border-right: 3px solid #E83E8C; + border-bottom: 3px solid transparent; + border-top: 3px solid transparent; + position: absolute; + top: calc(50% - 2px); + left: -3px; } .meetTheTeam h3 { - margin-bottom: 1rem; + margin-bottom: 1rem; } + +.navbar { + display: flex; + justify-content: center; + width: fit-content; + + .nav-button { + border-radius: 22px; + padding-left: 8px; + padding-right: 8px; + + > a { + color: white; + display: flex; + gap: 8px; + > img { + filter: invert(1); + } + } + } +} + diff --git a/src/App.js b/src/App.js index c3d5c80..1057cb0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,128 +1,119 @@ -import React, { Component } from 'react'; +import React, { useState } from 'react' -import 'bootstrap/dist/css/bootstrap.min.css'; -import './App.css'; +import 'bootstrap/dist/css/bootstrap.min.css' +import './App.css' -class Members extends Component { - constructor(props) { - super(props) - - this.state = { - maintainers: [ - { id: '2346494', name: 'Romain Beaumont', username: 'rom1504' }, - { id: '1069318', name: 'Robin Lambertz', username: 'roblabla' }, - { id: '1977472', name: 'Karang', username: 'Karang' }, - { id: '8526903', name: 'Keegan', username: 'mhsjlw', extra: 'flying-squid' }, - { id: '13330620', name: 'Kasper Seweryn', username: 'wvffle', extra: 'mineflayer' }, - { id: '8838132', name: 'plexigras', username: 'plexigras', extra: 'mineflayer'}, - ], - contributors: [ - { id: '106511', name: 'Andrew Kelley', username: 'andrewrk' }, - { id: '87436', name: 'Josh Wolfe', username: 'thejoshwolfe' }, - { id: '850714', name: 'Georges Oates Larsen', username: 'flynnn' }, - { id: '2260564', name: 'Harold Feit', username: 'DreadWingKnight' }, - { id: '5000732', name: '', username: 'ciolt', extra: 'website' }, - { id: '1270100', name: 'Will Franzen', username: 'wtfaremyinitials' }, - { id: '1077050', name: 'Dennis Bartlett', username: 'dcbartlett' }, - ] - } +function Members () { + const state = { + maintainers: [ + { id: '2346494', name: 'Romain Beaumont', username: 'rom1504' }, + { id: '1069318', name: 'Robin Lambertz', username: 'roblabla' }, + { id: '1977472', name: 'Karang', username: 'Karang' }, + { id: '8526903', name: 'Keegan', username: 'mhsjlw', extra: 'flying-squid' }, + { id: '13330620', name: 'Kasper Seweryn', username: 'wvffle', extra: 'mineflayer' }, + { id: '8838132', name: 'plexigras', username: 'plexigras', extra: 'mineflayer' } + ], + contributors: [ + { id: '106511', name: 'Andrew Kelley', username: 'andrewrk' }, + { id: '87436', name: 'Josh Wolfe', username: 'thejoshwolfe' }, + { id: '850714', name: 'Georges Oates Larsen', username: 'flynnn' }, + { id: '2260564', name: 'Harold Feit', username: 'DreadWingKnight' }, + { id: '5000732', name: '', username: 'ciolt', extra: 'website' }, + { id: '1270100', name: 'Will Franzen', username: 'wtfaremyinitials' }, + { id: '1077050', name: 'Dennis Bartlett', username: 'dcbartlett' } + ] } - componentWillMount() { - - } - - render() { - return ( -
-

Main projects

- -

How to contribute

-

Go to prismarine-contribute to learn more about the projects - and start contributing !

-

Meet the Team

-

PrismarineJS is made possible by many contributors who have put their time and effort into making the project possible.

-
-
-

Maintainers

-
    - {this.state.maintainers.map((e) => { - return ( -
  • - true {e.name} @{e.username} {e.extra ? ({e.extra}) : undefined } -
    • - ) - })} -
-
-
-

Contributors

-
    - {this.state.contributors.map((e) => { - return ( -
  • - true {e.name} @{e.username} {e.extra ? ({e.extra}) : undefined } -
    • - ) - })} -
-
+ return ( +
+

Main projects

+
    +
  • Minecraft data : Language independent module providing minecraft data for minecraft clients, servers and libraries.
    • +
  • Mineflayer : Create Minecraft bots with a powerful, stable, and high level JavaScript API..
    • +
  • Flying-squid : Create Minecraft servers with a powerful, stable, and high level JavaScript API.
    • +
  • Minecraft protocol : Parse and serialize minecraft packets, plus authentication and encryption..
    • +
+

How to contribute

+

Go to prismarine-contribute to learn more about the projects + and start contributing ! +

+

Meet the Team

+

PrismarineJS is made possible by many contributors who have put their time and effort into making the project possible.

+
+
+

Maintainers

+
    + {state.maintainers.map((e) => { + return ( +
  • + true {e.name} @{e.username} {e.extra ? ({e.extra}) : undefined} +
    • + ) + })} +
+
+
+

Contributors

+
    + {state.contributors.map((e) => { + return ( +
  • + true {e.name} @{e.username} {e.extra ? ({e.extra}) : undefined} +
    • + ) + })} +
- ) - } +
+ ) } -export class App extends Component { - constructor(props) { - super(props) - - this.state = { backgroundPosition: "0 0, 0 0" } - - this.onMouseMove = this.onMouseMove.bind(this) - } +function NavEntry ({ name, link, image }) { + return ( +
  • + + + {name} + +
    • + ) +} - componentWillMount() { - document.addEventListener('mousemove', this.onMouseMove) - } +export function App () { + const [backgroundPosition, setBackgroundPosition] = useState('0 0, 0 0') - onMouseMove(e) { - const posX = e.clientX / 20; + function onMouseMove (e) { + const posX = e.clientX / 20 const posY = e.clientY / 20 - this.setState({ backgroundPosition: `${posX}px ${posY}px, 0px 0px` }) + setBackgroundPosition(`${posX}px ${posY}px, 0px 0px`) } - render() { - return ( -
    -
    - -
    -

    PrismarineJS

    -

    Minecraft-compatible server, bot, and API. All written in JavaScript.

    - + return ( +
    +
    + +
    +

    PrismarineJS

    +

    Minecraft-compatible server, bot, and API. All written in JavaScript.

    +
    -
    -
    - -
    +
    +
    +
    +
    - ); - } +
    + ) } -export default App; +export default App diff --git a/src/App.test.js b/src/App.test.js index a754b20..e65c21b 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,9 +1,11 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; +/* eslint-env jest */ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' it('renders without crashing', () => { - const div = document.createElement('div'); - ReactDOM.render(, div); - ReactDOM.unmountComponentAtNode(div); -}); + const div = document.createElement('div') + const root = ReactDOM.createRoot(div) + root.render() + root.unmount() +}) diff --git a/src/index.js b/src/index.js index 3f56958..275bc56 100644 --- a/src/index.js +++ b/src/index.js @@ -1,24 +1,19 @@ -import React, { Component } from 'react'; -import ReactDOM from 'react-dom'; -import { BrowserRouter, Switch, Route } from 'react-router-dom'; +import React, { Component } from 'react' +import ReactDOM from 'react-dom/client' -import './index.css'; -import { App } from './App'; +import './index.css' +import { App } from './App' class Index extends Component { - render() { + render () { return (
    - -
    - - - -
    -     +
    ) } } -ReactDOM.render(, document.getElementById('root')); +const container = document.getElementById('root') +const root = ReactDOM.createRoot(container) +root.render()