convert to emotion

lewisc64 · Aug 17, 2024 · bd9d2fa · bd9d2fa
1 parent 8d8113f
commit bd9d2fa
Show file tree

Hide file tree

Showing 24 changed files with 776 additions and 453 deletions.
diff --git a/elden-ring-poise-optimizer/package-lock.json b/elden-ring-poise-optimizer/package-lock.json
diff --git a/elden-ring-poise-optimizer/package.json b/elden-ring-poise-optimizer/package.json
@@ -10,10 +10,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.12.0",
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

diff --git a/elden-ring-poise-optimizer/src/App.css b/elden-ring-poise-optimizer/src/App.css
diff --git a/elden-ring-poise-optimizer/src/App.jsx b/elden-ring-poise-optimizer/src/App.jsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { css, Global } from '@emotion/react';
 import {
   UNOBTAINABLE_ARMOR_NAMES,
   DATA_VERSION,
@@ -10,8 +11,7 @@ import baseArmorData from './data/armor_data.json';
 
 import { ArmorSelectionAggregator } from './components/ArmorSelector';
 import PoiseCalculator from './components/PoiseCalculator';
-
-import './App.css';
+import UnintrusiveText from './components/UnintrusiveText';
 
 const App = () => {
   const [armorData] = useState(
@@ -21,11 +21,37 @@ const App = () => {
 
   return (
     <div>
-      <p className="unintrusive">
+      <Global
+        styles={css`
+          :root {
+            --control-background-color: #888;
+            --positive-control-background-color: #66a;
+            --negative-control-background-color: #a66;
+          }
+          body {
+            font-family: sans-serif;
+            background-color: #222;
+            color: #eee;
+          }
+        `}
+      />
+      <UnintrusiveText
+        css={css`
+          display: block;
+          margin-bottom: 1rem;
+        `}
+      >
         For version '{DATA_VERSION}'. Data source:{' '}
         <a href={DATA_SOURCE_LINK}>{DATA_SOURCE_DESCRIPTION}</a>.
-      </p>
-      <a id="githubLink" href={GITHUB_LINK}>
+      </UnintrusiveText>
+      <a
+        css={css`
+          position: fixed;
+          top: 1rem;
+          right: 1rem;
+        `}
+        href={GITHUB_LINK}
+      >
         <img alt="GitHub logo" src="./github-logo.png"></img>
       </a>
       <ArmorSelectionAggregator

diff --git a/elden-ring-poise-optimizer/src/components/ArmorComboReadout.css b/elden-ring-poise-optimizer/src/components/ArmorComboReadout.css
diff --git a/elden-ring-poise-optimizer/src/components/ArmorComboReadout.jsx b/elden-ring-poise-optimizer/src/components/ArmorComboReadout.jsx
@@ -1,12 +1,28 @@
+import { css } from '@emotion/react';
 import { applyBullGoatMultiplier } from '../utilities';
 import ArmorReadout from './ArmorReadout';
 
-import './ArmorComboReadout.css';
-
 const ArmorComboReadout = ({ combo }) => {
   return (
-    <article className="comboReadout">
-      <div className="combos">
+    <article
+      css={css`
+        display: inline-block;
+        background-color: #444;
+        padding: 0.5rem;
+      `}
+    >
+      <div
+        css={css`
+          display: grid;
+          grid-template-columns: auto 1fr;
+          grid-column-gap: 0.5rem;
+          align-items: center;
+          grid-row-gap: 0.5rem;
+          > p {
+            margin: 0;
+          }
+        `}
+      >
         <p>Head: </p>
         <ArmorReadout armor={combo.head} />
         <p>Body: </p>
@@ -16,19 +32,36 @@ const ArmorComboReadout = ({ combo }) => {
         <p>Legs: </p>
         <ArmorReadout armor={combo.legs} />
       </div>
-      <div className="details">
-        <div>
-          <p>Weight</p>
-          <p>{combo.weight}</p>
-        </div>
-        <div>
-          <p>Poise</p>
-          <p>{combo.poise}</p>
-        </div>
-        <div>
-          <p>Poise (Bull-Goat's)</p>
-          <p>{applyBullGoatMultiplier(combo.poise)}</p>
-        </div>
+      <div
+        css={css`
+          display: grid;
+          grid-template-columns: 1fr 1fr 2fr;
+          grid-row-gap: 0.5rem;
+          background-color: #aaa;
+          color: #222;
+          margin-top: 0.5rem;
+          padding: 0.5rem;
+          > p {
+            text-align: center;
+            margin: 0;
+          }
+        `}
+      >
+        <p>Weight</p>
+        <p>Poise</p>
+        <p>Poise (Bull-Goat's)</p>
+        {[combo.weight, combo.poise, applyBullGoatMultiplier(combo.poise)].map(
+          (x) => (
+            <p
+              css={css`
+                font-size: 1.2rem;
+                font-weight: 700;
+              `}
+            >
+              {x}
+            </p>
+          )
+        )}
       </div>
     </article>
   );

diff --git a/elden-ring-poise-optimizer/src/components/ArmorReadout.css b/elden-ring-poise-optimizer/src/components/ArmorReadout.css