Add the item glossary

WitcheryResurrectedWeb/ClientApp/src/client/Glossary.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+
+import postFetch from './util/postFetch.js'
+
+import './styles/Glossary.css'
+
+// TEMP
+import icon from '../assets/TEMP/attuned_stone.png'
+const categories = [
+  'Items',
+  'Blocks',
+  'Mobs',
+  'Brew Effects',
+  'Rites',
+  'Spells'
+]
+// TEMP
+
+class Glossary extends React.Component {
+  state = {
+    entries: { // TEMP
+      items: new Array(50).fill({
+        id: 'witchery:attuned_stone',
+        name: 'Attuned Stone',
+        icon: icon
+      })
+    },
+    category: 'Items', // NOTE: AUTOMATICALLY SET CATEGORY TO FIRST CATEGORY WHEN FETCHED
+    blowup: null
+  }
+
+  render () {
+    return (
+      <div className='page glossary'>
+        <div className='content'>
+          <div className='index frosted'>
+            <div className='categories'>
+              {categories.map((c) =>
+                <div className={'category' + (this.state.category === c ? ' selected' : '')} key={c} onClick={() => this.switchCategory(c)}>{c}</div>
+              )}
+            </div>
+
+            <div className='entries'>
+              {this.state.category === 'Items' // TODO: REMOVE === 'Items'
+                ? this.state.entries[this.state.category.toLowerCase()].map((e) => (
+                  <div className='entry' key={e.name} onClick={() => this.switchBlowup(e)}>
+                    <img alt={e.name} src={e.icon}/>
+
+                    <span className='caption'>{e.name}</span>
+                  </div>
+                ))
+                : null}
+            </div>
+          </div>
+
+          <div className='blowup'>
+            {this.state.blowup
+              ? null
+              : null}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  switchCategory (category) {
+    this.setState({
+      category
+    })
+  }
+
+  switchBlowup (item) {
+    this.setState({
+      blowup: item
+    })
+  }
+}
+
+export default Glossary
+
+/*
+// TODO: MAKE DYNAMIC VARIABLES
+  Category determination
+  Items
+  Item properties
+  Icons
+*/

WitcheryResurrectedWeb/ClientApp/src/client/styles/Glossary.css

@@ -0,0 +1,96 @@
+.page.glossary .content {
+  display: flex;
+}
+
+.page.glossary .content .index {
+  flex: 1;
+  height: calc(100vh - var(--navbar-height));
+  padding: 0.3% 0;
+}
+
+.page.glossary .content .blowup {
+  flex: 2;
+}
+
+.page.glossary .index .categories {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.page.glossary .index .categories .category {
+  transition: 0.2s;
+  background: var(--accent);
+  padding: 0.5% 2%;
+  margin: 1.5%;
+  clip-path: polygon(0.5vw 0%, calc(100% - 0.5vw) 0%, 100% 50%, calc(100% - 0.5vw) 100%, 0.5vw 100%, 0% 50%);
+  cursor: pointer;
+  white-space: nowrap;
+}
+.page.glossary .index .categories .category::before,
+.page.glossary .index .categories .category::after {
+  content: '\25C6';
+  color: rgb(50, 50, 50);
+  opacity: 0.2;
+}
+.page.glossary .index .categories .category::before {
+  margin-left: -0.5rem;
+}
+
+.page.glossary .index .categories .category::after {
+  margin-right: -0.5rem;
+}
+.page.glossary .index .categories .category:hover {
+  background: var(--main);
+}
+.page.glossary .index .categories .category.selected {
+  background: var(--complement);
+}
+.page.glossary .index .categories .category.selected:hover {
+  background: var(--complement-accent);
+}
+
+.page.glossary .index .entries {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  height: 100%;
+  padding-bottom: 10%;
+  overflow: auto;
+}
+
+.page.glossary .index .entries .entry {
+  transition: 0.2s;
+  position: relative;
+  width: 7vw;
+  margin: 1%;
+  cursor: pointer;
+}
+.page.glossary .index .entries .entry::before {
+  transition: 0.2s;
+  content: '';
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 85%;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 25px;
+  clip-path: polygon(0 0, 0% 30%, 40% 0);
+}
+.page.glossary .index .entries .entry:hover {
+  transform: scale(1.05);
+}
+.page.glossary .index .entries .entry:hover::before {
+  clip-path: polygon(0 0, 0% 70%, 80% 0);
+  background: rgba(255, 255, 255, 0.6);
+}
+.page.glossary .index .entries .entry img {
+  width: 100%;
+  image-rendering: pixelated;
+  border: 1px solid gray;
+  border-radius: 25px;
+}
+.page.glossary .index .entries .entry .caption {
+  display: block;
+  text-align: center;
+}

WitcheryResurrectedWeb/ClientApp/src/client/styles/Navbar.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.sandbox.google.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,400,0,0');
 
 #navbar {
   transition: 0.7s;
@@ -7,6 +7,7 @@
   align-items: center;
   top: -1px;
   width: 100%;
+  height: var(--navbar-height);
   padding-left: 0.8vh;
   padding-bottom: 0.2rem;
   background: var(--bs-dark);

WitcheryResurrectedWeb/ClientApp/src/client/styles/index.css

@@ -10,6 +10,8 @@
   --link: #5969d4;
   --link-hover: #4653a1;
   --bs-darker: #292929;
+
+  --navbar-height: 64px;
 }
 
 #root {

WitcheryResurrectedWeb/ClientApp/src/client/util/routes.js

@@ -1,5 +1,6 @@
 import Home from '../Home.jsx'
 import Downloads from '../Downloads.jsx'
+import Glossary from '../Glossary.jsx'
 
 const routes = [
   {
@@ -12,6 +13,11 @@ const routes = [
     path: '/downloads',
     name: 'Downloads',
     Component: Downloads
+  },
+  {
+    path: '/glossary',
+    name: 'Glossary',
+    Component: Glossary
   }
 ]