WitcheryResurrected · exoRift · Jun 20, 2022 · Jun 20, 2022 · Jun 20, 2022 · Jun 21, 2022
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -1,17 +1,16 @@
 <!DOCTYPE html>
 <html lang='en'>
   <head>
-    <meta charset='utf-8' />
-    <link rel='icon' href='%PUBLIC_URL%/assets/images/favicon.ico'/>
+    <meta charset='utf-8'/>
+    <link rel='icon' href='/assets/images/favicon.ico'/>
     <meta name='viewport' content='width=device-width, initial-scale=1'/>
-    <meta name='theme-color' content='#000000'/>
+    <meta name='theme-color' content='#7a2a91'/>
     <meta
       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%/manifest.json' />
-    <link rel='stylesheet' type='text/css' href='%PUBLIC_URL%/assets/css/main.css'>
+    <link rel='apple-touch-icon' href='/assets/images/logo192.png'/>
+    <link rel='manifest' href='/manifest.json' />
 
     <title>Witchery: Resurrected</title>
   </head>
@@ -20,5 +19,7 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id='root'/>
+
+    <script type='module' src='/src/index.jsx'></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
-  "name": "witchery-resurrected-web",
-  "version": "0.1.0",
+  "name": "witchery-resurrected",
+  "version": "1.0.0",
   "description": "Witchery: Resurrected aims to recreate and improve the popular Witchery Minecraft mod in modern versions; with a focus on customizability.",
   "scripts": {
-    "dev": "react-scripts start",
-    "build": "react-scripts build"
+    "dev": "vite dev",
+    "build": "vite build"
   },
   "repository": {
     "type": "git",
@@ -29,14 +29,16 @@
   },
   "keywords": [],
   "dependencies": {
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.13",
     "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"
+    "vite": "^3.2.3"
   }
 }
diff --git a/public/manifest.json b/public/manifest.json
@@ -20,6 +20,6 @@
   ],
   "start_url": ".",
   "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "theme_color": "#7a2a91",
+  "background_color": "#26272b"
 }
diff --git a/src/assets/TEMP/attuned_stone.png b/src/assets/TEMP/attuned_stone.png
diff --git a/src/assets/TEMP/clay_jar.png b/src/assets/TEMP/clay_jar.png
diff --git a/src/assets/TEMP/foul_fume.png b/src/assets/TEMP/foul_fume.png
diff --git a/src/assets/TEMP/goddess_breath.png b/src/assets/TEMP/goddess_breath.png
diff --git a/src/assets/TEMP/goddess_tear.png b/src/assets/TEMP/goddess_tear.png
diff --git a/src/assets/TEMP/magic_whiff.png b/src/assets/TEMP/magic_whiff.png
diff --git a/src/assets/fonts/Mojang-Regular.ttf b/src/assets/fonts/Mojang-Regular.ttf
diff --git a/src/assets/images/background.png b/src/assets/images/background.png
diff --git a/src/assets/images/book.png b/src/assets/images/book.png
diff --git a/src/assets/images/book_back_arrow.png b/src/assets/images/book_back_arrow.png
diff --git a/src/assets/images/crafting_guis/crafting_table.png b/src/assets/images/crafting_guis/crafting_table.png
diff --git a/src/assets/images/crafting_guis/distillery.png b/src/assets/images/crafting_guis/distillery.png
diff --git a/src/assets/images/crafting_guis/furnace.png b/src/assets/images/crafting_guis/furnace.png
diff --git a/src/assets/images/crafting_guis/kettle.png b/src/assets/images/crafting_guis/kettle.png
diff --git a/src/assets/images/crafting_guis/progress_arrow.png b/src/assets/images/crafting_guis/progress_arrow.png
diff --git a/src/assets/images/crafting_guis/progress_bubbles.png b/src/assets/images/crafting_guis/progress_bubbles.png
diff --git a/src/assets/images/crafting_guis/progress_double_arrow.png b/src/assets/images/crafting_guis/progress_double_arrow.png
diff --git a/src/assets/images/crafting_guis/progress_spinning_arrow.png b/src/assets/images/crafting_guis/progress_spinning_arrow.png
diff --git a/src/assets/images/crafting_guis/progress_triple_arrow.png b/src/assets/images/crafting_guis/progress_triple_arrow.png
diff --git a/src/assets/images/crafting_guis/smelting_flames.png b/src/assets/images/crafting_guis/smelting_flames.png
diff --git a/src/assets/images/crafting_guis/spinning_wheel.png b/src/assets/images/crafting_guis/spinning_wheel.png
diff --git a/src/assets/images/crafting_guis/witches_oven.png b/src/assets/images/crafting_guis/witches_oven.png
diff --git a/src/assets/images/paper_overlay.png b/src/assets/images/paper_overlay.png
diff --git a/src/client/AdminPanel.jsx b/src/client/AdminPanel.jsx
@@ -80,14 +80,28 @@ class File extends React.Component {
 }
 
 class AdminPanel extends React.Component {
+  static authURL = 'https://discord.com/api/oauth2/authorize?client_id=665314456745541653&response_type=code&scope=identify&redirect_uri=' +
+    encodeURIComponent(window.location.origin + '/auth')
+
+  static cancel (e) {
+    if (e) e.preventDefault()
+
+    window.location.reload()
+  }
+
   state = {
-    files: []
+    files: [],
+    authToken: null
   }
 
   componentDidMount () {
     return this.addFile()
   }
 
+  componentWillUnmount () {
+    clearInterval(this.authCheckInterval)
+  }
+
   render () {
     return (
       <div className='page admin-panel'>
@@ -104,11 +118,18 @@ class AdminPanel extends React.Component {
               <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 type='hidden' id='auth' name='auth' value={this.state.authToken || ''}/>
 
-              <input id='pass' type='password' name='pass' placeholder='Secret' required/>
+            <div className='buttons'>
+              <button className='btn btn-success' type='submit' onClick={this.checkAuth.bind(this)}>Upload</button>
+              <button className='btn btn-danger cancel' onClick={AdminPanel.cancel}>Cancel</button>
+
+              <div
+                className={`btn btn-${this.state.authToken ? 'outline-success disabled' : 'secondary'} authorize`}
+                onClick={this.openAuthWindow.bind(this)}
+              >
+                {this.state.authToken ? 'Authorized' : 'Authorize'}
+              </div>
             </div>
           </form>
         </div>
@@ -144,10 +165,30 @@ class AdminPanel extends React.Component {
     })
   }
 
-  cancel (e) {
-    if (e) e.preventDefault()
+  openAuthWindow () {
+    window.open(AdminPanel.authURL, 'popup', 'width=500,height=800,scrollbars=no,resizable=no,noreferrer')
 
-    window.location.reload()
+    if (!this.authCheckInterval) {
+      this.authCheckInterval = setInterval(() => {
+        if ('admin_auth' in localStorage) {
+          this.setState({
+            authToken: localStorage.getItem('admin_auth')
+          })
+
+          localStorage.removeItem('admin_auth')
+
+          clearInterval(this.authCheckInterval)
+        }
+      })
+    }
+  }
+
+  checkAuth (e) {
+    if (!this.state.authToken) {
+      alert('Remember to authorize!')
+
+      e.preventDefault()
+    }
   }
 }
 

diff --git a/src/client/Auth.jsx b/src/client/Auth.jsx
@@ -0,0 +1,15 @@
+import React from 'react'
+
+class Auth extends React.Component {
+  componentDidMount () {
+    localStorage.setItem('admin_auth', new URLSearchParams(window.location.search).get('code'))
+
+    window.close()
+  }
+
+  render () {
+    return (<></>)
+  }
+}
+
+export default Auth
diff --git a/src/client/Compendium.jsx b/src/client/Compendium.jsx
@@ -0,0 +1,108 @@
+import React from 'react'
+import {
+  Link
+} from 'react-router-dom'
+
+import backArrow from '../assets/images/book_back_arrow.png'
+
+import './styles/Compendium.css'
+
+// TEMP
+const categories = [
+  'infusions',
+  'afflictions'
+]
+// TEMP
+
+class Compendium extends React.Component {
+  static capitalizationRegex = /(?:^|\s)(.)/g
+  static hashRegex = /#(?<category>[^/]+)(?:\/(?<id>.+))?/
+
+  state = {
+    categories, // TEMP
+    sections: {
+      infusions: [
+        {
+          id: 'light',
+          name: 'Light',
+          icon: null,
+          description: 'THIS IS THE LIGHT INFUSION'
+        }
+      ],
+      afflictions: [
+        {
+          id: 'vampirism',
+          name: 'Vampirism',
+          icon: null,
+          description: 'THIS IS VAMPIRISIM',
+          forms: [
+            {
+              id: 'bat',
+              name: 'Bat',
+              stats: {
+                health: '5'
+              },
+              description: 'THIS IS THE BAT TRANSFORMATION'
+            }
+          ]
+        }
+      ]
+    } // TEMP
+  }
+
+  constructor (props) {
+    super(props)
+
+    this.title = props.title + ' - Compendium'
+    document.title = this.title
+  }
+
+  componentDidMount () { // TODO: GET SECTIONS
+    const location = window.location.hash.match(Compendium.hashRegex)
+
+    if (location) this.switchLocation(location.groups.category, location.groups.id)
+  }
+
+  render () {
+    return (
+      <div className='page compendium'>
+        <div className='content'>
+          <div className='side index'>
+            <ul className='categories'>
+              {this.state.categories.map((c, i) =>
+                <li className={`minecraft category${c === this.state.category ? ' selected' : ''}`} key={i} onClick={this.switchLocation.bind(this, c)}>
+                  {c.replace(Compendium.capitalizationRegex, (l) => l.toUpperCase())}
+                </li>)}
+            </ul>
+
+            <Link to='/glossary'><img className='back-arrow' alt='back' src={backArrow}/></Link>
+          </div>
+
+          <div className='side blowup'>
+            BRUH MOMENT
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  switchLocation (category, section) {
+    if (!(category in this.state.sections)) return
+
+    window.location.hash = category
+    this.setState({
+      category
+    })
+
+    const data = this.state.sections[category].find((s) => s.id === section)
+    if (!data) return
+
+    window.location += '/' + section
+    document.title = this.title + ` [${data.name}]`
+    this.setState({
+      section
+    })
+  }
+}
+
+export default Compendium