From 2aff73e055f6256fcf300ded9164c1380a3b1d6d Mon Sep 17 00:00:00 2001
From: Joshua Sigona <sigonasr2@gmail.com>
Date: Sat, 26 Jun 2021 15:31:19 +0900
Subject: [PATCH] Add Class Selector

---
 ngoplanner/public/icons/UINGSClassFi.png | Bin 0 -> 119 bytes
 ngoplanner/public/icons/UINGSClassFo.png | Bin 0 -> 215 bytes
 ngoplanner/public/icons/UINGSClassGu.png | Bin 0 -> 128 bytes
 ngoplanner/public/icons/UINGSClassHu.png | Bin 0 -> 116 bytes
 ngoplanner/public/icons/UINGSClassRa.png | Bin 0 -> 118 bytes
 ngoplanner/public/icons/UINGSClassTe.png | Bin 0 -> 197 bytes
 ngoplanner/src/App.css                   |  24 +++++++++
 ngoplanner/src/App.js                    |  59 +++++++++++++++++++++--
 8 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 ngoplanner/public/icons/UINGSClassFi.png
 create mode 100644 ngoplanner/public/icons/UINGSClassFo.png
 create mode 100644 ngoplanner/public/icons/UINGSClassGu.png
 create mode 100644 ngoplanner/public/icons/UINGSClassHu.png
 create mode 100644 ngoplanner/public/icons/UINGSClassRa.png
 create mode 100644 ngoplanner/public/icons/UINGSClassTe.png

diff --git a/ngoplanner/public/icons/UINGSClassFi.png b/ngoplanner/public/icons/UINGSClassFi.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a02475f66d2b61e1551c96d8b21a6e916de83c4
GIT binary patch
literal 119
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJTYyi9E0BKZeAf8b!pT4uV@Z%-
zFoVOh8)-m}yr+v}h{WaOgoK2YloSSLiR1zf11E+i#|Q>)g{x5v*7*#@O|$lg0+lj&
My85}Sb4q9e0EOxs+yDRo

literal 0
HcmV?d00001

diff --git a/ngoplanner/public/icons/UINGSClassFo.png b/ngoplanner/public/icons/UINGSClassFo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9adb257ad48e8c41b39943033c5f7d47aa3b88b5
GIT binary patch
literal 215
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!Vt`MGE0F&G|Nqx_HkjzkTae&^
zy{~0}ia1Mx{D7Kd{Q4*Fdhse{SDF`4FvioxF+}2W={ZNf76TsVixrn1eRyC0AaV(-
zqRTY@O>-wOESMuWDT%qj#inubLVeyRO^N&`AG9$Ve6e21#vGybqd_*&JuEYJscrQ4
pH(zgDVb&^ju1s?mKNI`4&3;E5%MsgrOLd?<44$rjF6*2UngCQ#R4)Jk

literal 0
HcmV?d00001

diff --git a/ngoplanner/public/icons/UINGSClassGu.png b/ngoplanner/public/icons/UINGSClassGu.png
new file mode 100644
index 0000000000000000000000000000000000000000..d7286bccbc74edcce4ae1847f6d5e60725e2ecd1
GIT binary patch
literal 128
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJTYyi9E0DI?_;rW8O(2lPSQ6wH
z%;50sMjA+!r;B5V#O34!1|~N*H-m#5X#r{n7#>biYA|42#-w%LVG+X}+b7%%3|<Kg
V-Kz!Dp9A$Uc)I$ztaD0e0sw>KA8-Hw

literal 0
HcmV?d00001

diff --git a/ngoplanner/public/icons/UINGSClassHu.png b/ngoplanner/public/icons/UINGSClassHu.png
new file mode 100644
index 0000000000000000000000000000000000000000..f63d037d52e5bb83e7c42e056b8bdc7c95c4502b
GIT binary patch
literal 116
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJTYyi9E0BKZ>}+|Ae+!VsSQ6wH
z%;50sMjDVK<LTlUB5^r6fq~ggA;E#I*|9;8Q$VvpbV8CYgVr;K&`Xc5wgc5Mc)I$z
JtaD0e0s!m08l3<D

literal 0
HcmV?d00001

diff --git a/ngoplanner/public/icons/UINGSClassRa.png b/ngoplanner/public/icons/UINGSClassRa.png
new file mode 100644
index 0000000000000000000000000000000000000000..3c77778d8f9435cd4607e1b3fd722e6880d9d11c
GIT binary patch
literal 118
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJTYyi9E0A_hf2hT^^ahZ{SQ6wH
z%;50sMjDVK=jq}YA`zaP(7@;>(D3<%62mhAfddzsbQr?@O&J-?+8G*buF0DKRWf+G
L`njxgN@xNAPwE?e

literal 0
HcmV?d00001

diff --git a/ngoplanner/public/icons/UINGSClassTe.png b/ngoplanner/public/icons/UINGSClassTe.png
new file mode 100644
index 0000000000000000000000000000000000000000..e00a36c70d707738d8685d85bcb29407a159d660
GIT binary patch
literal 197
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!T!2rAE0F%W%?1;F0SnH3FOULM
z!BG<A7tA2w7TdA<<Y%t$=O+Ng{5)M8LnJPj_Bje2P~c%Q+`8oVfBx@_l3zvi@o;-E
zHI!s@Xl_4yASx^ILDUqL=^P$e{E^;ETI7=z4!ZCyEjHVh{`dFYr(*l6b@sLJALCYT
WWL|NsX!Z}F$qb&ZelF{r5}E)roJkk}

literal 0
HcmV?d00001

diff --git a/ngoplanner/src/App.css b/ngoplanner/src/App.css
index d60512b..10c57c9 100644
--- a/ngoplanner/src/App.css
+++ b/ngoplanner/src/App.css
@@ -311,4 +311,28 @@ td:last-child {
 .hover:hover{
 	background-color:rgba(255,255,0,0.4);
 	cursor:pointer;
+}
+
+input#editBox{
+	height:18px;
+	width:50%;
+	padding: 0px;
+	margin: 0px;
+	text-align:right;
+}
+
+.popup{
+	position:absolute;
+	background-color: rgba(128,128,128,1);
+	max-width: 250px;
+	min-width: 100px;
+	padding: 20px;
+}
+.popup button{
+	margin:5px;
+	width:48px;
+	font-size:12px;
+	overflow:wrap;
+	background-color:rgba(64,64,96,0.9);
+	color:rgba(210,210,210,1);
 }
\ No newline at end of file
diff --git a/ngoplanner/src/App.js b/ngoplanner/src/App.js
index f11a3aa..2f3e08c 100644
--- a/ngoplanner/src/App.js
+++ b/ngoplanner/src/App.js
@@ -25,7 +25,7 @@ function EditBox(p) {
 	})
 return <input id="editBox" onKeyDown={(e)=>{
 	if (e.key==="Enter") {p.setEdit(false)}
-}}	maxLength={p.maxlength?p.maxlength:20} onBlur={()=>{p.setEdit(false)}} value={p.value} onChange={(f)=>{p.setName(f.currentTarget.value)}}>
+}}	maxLength={p.maxlength?p.maxlength:20} onBlur={()=>{p.setEdit(false)}} value={p.value} onChange={(f)=>{f.currentTarget.value.length>0?p.setName(f.currentTarget.value):p.setName(p.originalName)}}>
 	
 	</input>
 }
@@ -36,19 +36,70 @@ function EditableBox(p) {
 	return <>
 		<div className="hover" onClick={(f)=>{setEdit(true)}}>
 			{edit?
-			<EditBox maxlength={p.maxlength} setEdit={setEdit} setName={setName} value={name}/>
+			<EditBox maxlength={p.maxlength} setEdit={setEdit} originalName={name} setName={setName} value={name}/>
 			:<>{name}</>}
 		</div>
 	</>
 }
 
+const CLASSES = {
+	HUNTER:{
+		name:"Hunter",
+		icon:"icons/UINGSClassHu.png"
+	},
+	FIGHTER:{
+		name:"Fighter",
+		icon:"icons/UINGSClassFi.png"
+	},
+	RANGER:{
+		name:"Ranger",
+		icon:"icons/UINGSClassRa.png"
+	},
+	GUNNER:{
+		name:"Gunner",
+		icon:"icons/UINGSClassGu.png"
+	},
+	FORCE:{
+		name:"Force",
+		icon:"icons/UINGSClassFo.png"
+	},
+	TECHTER:{
+		name:"Techter",
+		icon:"icons/UINGSClassTe.png"
+	}
+}
+
+function Class(p) {
+	const class_obj = CLASSES[p.name]
+	return <><img src={class_obj.icon}/>{class_obj.name}</>
+}
+
+function ClassSelector(p){
+	return <div className="popup">
+		Class Selector<br/>
+		{Object.keys(CLASSES).map((cl)=>{
+		return <button className="rounded" onClick={()=>{p.setClassName(cl);p.setEdit(false)}}><img src={CLASSES[cl].icon}/><br/>{CLASSES[cl].name}</button>
+		})}
+	</div>
+}
+
+function EditableClass(p){
+	const [edit,setEdit] = useState(false)
+	return <><span className="hover" onClick={()=>{setEdit(true)}}><Class name={p.class}/>
+	</span>
+	{edit&&<ClassSelector setClassName={p.setClassName} setEdit={setEdit}/>}
+	</>
+}
+
 function MainBox() {
+	const [className,setClassName] = useState("RANGER")
+	const [secondaryClassName,setSecondaryClassName] = useState("FORCE")
 	return <Box title="NGS Planner">
 		<table className="ba">
 			<ListRow title="Author"><EditableBox data="Dudley"/></ListRow>
 			<ListRow title="Build Name"><EditableBox data="Fatimah"/></ListRow>
-			<ListRow title="Class" content={<><img alt="" src="https://pso2na.arks-visiphone.com/images/8/87/UINGSClassRa.png" /> Ranger</>}><span className="ye">Lv.20</span></ListRow>
-			<ListRow content={<><img alt="" src="https://pso2na.arks-visiphone.com/images/3/39/UINGSClassFo.png" /> Force</>}>Lv.15</ListRow>
+			<ListRow title="Class" content={<EditableClass setClassName={setClassName} class={className}></EditableClass>}><span className="ye">Lv.20</span></ListRow>
+			<ListRow content={<><EditableClass setClassName={setSecondaryClassName} class={secondaryClassName}></EditableClass></>}>Lv.15</ListRow>
 		</table>
 	   </Box>
 }