WitcheryResurrected · exoRift · Sep 30, 2021 · Sep 30, 2021 · Sep 30, 2021 · Apr 18, 2022
diff --git a/.env b/.env
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,19 @@
+{
+  "extends": ["standard", "react-app"],
+  "rules": {
+    "array-bracket-spacing": "error",
+    "no-lonely-if": "warn",
+    "arrow-parens": "error",
+    "no-var": "error",
+    "prefer-const": "error",
+    "max-len": [
+      "warn",
+      {
+        "code": 155,
+        "tabWidth": 2,
+        "ignoreComments": true
+      }
+    ],
+    "quote-props": "warn"
+  }
+}
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/README.md b/README.md
diff --git a/package.json b/package.json
@@ -1,33 +1,19 @@
 {
   "name": "witchery-resurrected-web",
   "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.12.1",
-    "@material-ui/icons": "^4.11.2",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "caniuse-lite": "^1.0.30001332",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-infinite-scroller": "^1.2.4",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "web-vitals": "^1.0.1"
-  },
+  "description": "Witchery: Resurrected aims to recreate and improve the popular Witchery Minecraft mod in modern versions; with a focus on customizability.",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "react-scripts start",
+    "build": "react-scripts build"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WitcheryResurrected/WitcheryResurrectedWeb.git"
+  },
+  "author": "msrandom",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WitcheryResurrected/WitcheryResurrectedWeb/issues"
   },
   "browserslist": {
     "production": [
@@ -40,5 +26,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "keywords": [],
+  "dependencies": {
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "eslint": "^8.14.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-config-standard": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
+    "react-scripts": "^5.0.1"
   }
 }
diff --git a/public/assets/css/main.css b/public/assets/css/main.css
diff --git a/public/assets/images/favicon.ico b/public/assets/images/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,22 +1,24 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang='en'>
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type = "image/png" href="%PUBLIC_URL%/assets/images/logo192.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta charset='utf-8' />
+    <link rel='icon' href='%PUBLIC_URL%/assets/images/favicon.ico'/>
+    <meta name='viewport' content='width=device-width, initial-scale=1'/>
+    <meta name='theme-color' content='#000000'/>
     <meta
-      name="description"
-      content="Witchery: Resurrected aims to recreate and improve the popular Witchery mod in modern versions; with a focus on customizability."
+      name='description'
+      content='Witchery: Resurrected aims to recreate and improve the popular Witchery mod in modern versions; with a focus on customizability.'
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/images/logo192.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/assets/manifest.json" />
-    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/assets/css/main.css">
+    <link rel='apple-touch-icon' href='%PUBLIC_URL%/assets/images/logo192.png'/>
+    <link rel='manifest' href='%PUBLIC_URL%/manifest.json' />
+    <link rel='stylesheet' type='text/css' href='%PUBLIC_URL%/assets/css/main.css'>
 
     <title>Witchery: Resurrected</title>
   </head>
+
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+
+    <div id='root'/>
   </body>
 </html>
diff --git a/public/assets/manifest.json → public/manifest.json b/public/assets/manifest.json → public/manifest.json
diff --git a/src/App.js b/src/App.js
diff --git a/src/assets/fonts/ChildWitch-z8ABL.ttf b/src/assets/fonts/ChildWitch-z8ABL.ttf
diff --git a/src/assets/images/404.png b/src/assets/images/404.png
diff --git a/public/assets/images/background.png → src/assets/images/background.png b/public/assets/images/background.png → src/assets/images/background.png
diff --git a/src/assets/images/bat_bauble.png b/src/assets/images/bat_bauble.png
diff --git a/src/assets/images/candle_bauble.png b/src/assets/images/candle_bauble.png
diff --git a/public/assets/images/logo.png → src/assets/images/logo.png b/public/assets/images/logo.png → src/assets/images/logo.png
diff --git a/src/assets/images/potion_bauble.png b/src/assets/images/potion_bauble.png
diff --git a/src/assets/images/skull_bauble.png b/src/assets/images/skull_bauble.png
diff --git a/src/assets/videos/background.webm b/src/assets/videos/background.webm
diff --git a/src/client/AdminPanel.jsx b/src/client/AdminPanel.jsx
@@ -0,0 +1,154 @@
+import React from 'react'
+
+import './styles/AdminPanel.css'
+
+class Dependency extends React.Component {
+  id = `${this.props.fileID}.dependencies[${this.props.index}]`
+
+  render () {
+    return (
+      <div className='dependency'>
+        <input id={`${this.id}.name`} name={`${this.id}.name`} placeholder='Name'/>
+        <input id={`${this.id}.link`} name={`${this.id}.link`} placeholder='Link'/>
+
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+class File extends React.Component {
+  id = `files[${this.props.index}]`
+
+  state = {
+    dependencies: []
+  }
+
+  render () {
+    return (
+      <div className='file'>
+        {this.props.children}
+
+        <select id={`${this.id}.loader`} className='form-select' name={`${this.id}.loader`} defaultValue={-1} required>
+          <option value={-1} disabled hidden>Mod Loader</option>
+          <option value={0}>Forge</option>
+          <option value={1}>Fabric</option>
+        </select>
+
+        <input id={`${this.id}.version`} name={`${this.id}.version`} placeholder='Game Version'/>
+
+        <input id={this.id + '.file'} name={this.id + '.file'} type='file' onChange={this.setFile}/>
+
+        <div className='dependencies'>
+          <div className='dependency-container'>
+            {this.state.dependencies}
+          </div>
+
+          <button className='file-button dep-button add' onClick={this.addDep.bind(this)}>+</button>
+        </div>
+      </div>
+    )
+  }
+
+  addDep (e) {
+    if (e) e.preventDefault()
+
+    const key = parseInt(this.state.dependencies[this.state.dependencies.length - 1]?.key || -1) + 1
+
+    this.setState({
+      dependencies: [
+        ...this.state.dependencies,
+        <Dependency key={key} index={key} fileID={this.id}>
+          <button className='file-button dep-button remove' onClick={this.removeDep.bind(this, key)}>&#739;</button>
+        </Dependency>
+      ]
+    })
+  }
+
+  removeDep (id, e) {
+    if (e) e.preventDefault()
+
+    const index = this.state.dependencies.findIndex((f) => parseInt(f.key) === id)
+
+    this.setState({
+      dependencies: [
+        ...this.state.dependencies.slice(0, index),
+        ...this.state.dependencies.slice(index + 1)
+      ]
+    })
+  }
+}
+
+class AdminPanel extends React.Component {
+  state = {
+    files: []
+  }
+
+  componentDidMount () {
+    return this.addFile()
+  }
+
+  render () {
+    return (
+      <div className='page admin-panel'>
+        <div className='content'>
+          <form method='post' encType='multipart/form-data' action='upload'>
+            <input id='name' name='name' placeholder='Name' required/>
+            <textarea id='changelog' name='changelog' placeholder='Changes'/>
+
+            <div className='files'>
+              <div className='file-container'>
+                {this.state.files}
+              </div>
+
+              <button className='file-button add' onClick={this.addFile.bind(this)}>+</button>
+            </div>
+
+            <div className='buttons'>
+              <button className='btn btn-success' type='submit'>Upload</button>
+              <button className='btn btn-danger cancel' onClick={this.cancel}>Cancel</button>
+
+              <input id='pass' type='password' name='pass' placeholder='Secret' required/>
+            </div>
+          </form>
+        </div>
+      </div>
+    )
+  }
+
+  addFile (e) {
+    if (e) e.preventDefault()
+
+    const key = parseInt(this.state.files[this.state.files.length - 1]?.key || -1) + 1
+
+    this.setState({
+      files: [
+        ...this.state.files,
+        <File key={key} index={key}>
+          <button className='file-button remove' onClick={this.removeFile.bind(this, key)}>&#739;</button>
+        </File>
+      ]
+    })
+  }
+
+  removeFile (id, e) {
+    if (e) e.preventDefault()
+
+    const index = this.state.files.findIndex((f) => parseInt(f.key) === id)
+
+    this.setState({
+      files: [
+        ...this.state.files.slice(0, index),
+        ...this.state.files.slice(index + 1)
+      ]
+    })
+  }
+
+  cancel (e) {
+    if (e) e.preventDefault()
+
+    window.location.reload()
+  }
+}
+
+export default AdminPanel