From b46bafa5f743404e9789bf40236bc8454a88c1a6 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 1 Mar 2022 19:53:54 -0800
Subject: [PATCH] Add a modal for modifying weapons

---
 components/WeaponModal/index.scss | 12 ++++++++
 components/WeaponModal/index.tsx  | 47 +++++++++++++++++++++++++++++++
 styles/globals.scss               | 14 +++++++++
 3 files changed, 73 insertions(+)
 create mode 100644 components/WeaponModal/index.scss
 create mode 100644 components/WeaponModal/index.tsx

diff --git a/components/WeaponModal/index.scss b/components/WeaponModal/index.scss
new file mode 100644
index 00000000..97b53507
--- /dev/null
+++ b/components/WeaponModal/index.scss
@@ -0,0 +1,12 @@
+.Weapon.Dialog {
+    section {
+        display: flex;
+        flex-direction: column;
+        gap: $unit / 2;
+
+        h3 {
+            color: $grey-50;
+            font-size: $font-small;
+        }
+    }
+}
\ No newline at end of file
diff --git a/components/WeaponModal/index.tsx b/components/WeaponModal/index.tsx
new file mode 100644
index 00000000..a6df76ac
--- /dev/null
+++ b/components/WeaponModal/index.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+
+import ElementToggle from '~components/ElementToggle'
+
+import CrossIcon from '~public/icons/Cross.svg'
+import './index.scss'
+
+interface Props {
+    gridWeapon: GridWeapon
+    children: React.ReactNode
+}
+
+const WeaponModal = (props: Props) => {
+    return (
+        <Dialog.Root>
+            <Dialog.Trigger asChild>
+                { props.children }
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Content className="Weapon Dialog" onOpenAutoFocus={ (event) => event.preventDefault() }>
+                    <div className="DialogHeader">
+                        <div className="DialogTop">
+                            <Dialog.Title className="SubTitle">Modify Weapon</Dialog.Title>
+                            <Dialog.Title className="DialogTitle">{props.gridWeapon.object.name.en}</Dialog.Title>
+                        </div>
+                        <Dialog.Close className="DialogClose" asChild>
+                            <span>
+                                <CrossIcon />
+                            </span>
+                        </Dialog.Close>
+                    </div>
+
+                    <section>
+                        { (props.gridWeapon.object.element == 0) ? 
+                            <ElementToggle 
+                                currentElement={props.gridWeapon.object.element} /> 
+                                : ''}
+                    </section>
+                </Dialog.Content>
+                <Dialog.Overlay className="Overlay" />
+            </Dialog.Portal>
+        </Dialog.Root>
+    )
+}
+
+export default WeaponModal
\ No newline at end of file
diff --git a/styles/globals.scss b/styles/globals.scss
index b70a95db..4f08d3e5 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -110,6 +110,7 @@ select {
 
     .DialogHeader {
         display: flex;
+        align-items: center;
         gap: $unit;
 
         .left {
@@ -150,6 +151,19 @@ select {
         flex-grow: 1;
     }
 
+    .DialogTop {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: $unit / 2;
+
+        .SubTitle {
+            color: $grey-50;
+            font-size: $font-small;
+            font-weight: $medium;
+        }
+    }
+
     .DialogDescription {
         flex-grow: 1;
     }