Merge branch 'master' of https://github.com/sigonasr2/ngsplanner

src/TestPanel.js

@@ -135,6 +135,7 @@ function SelectorWindow(p) {
     {p.filter?itemList.filter((item)=>p.filterFunction(tabPage,item)).filter((item)=>p.searchFieldFunction(filter,item)).sort((a,b)=>p.sortOrderFunction(sortSelector,a,b)).map((item,i)=><React.Fragment key={i}>{p.displayFunction(item)}</React.Fragment>):itemList.map((item,i)=><React.Fragment key={i}>{p.displayFunction(item)}</React.Fragment>)}
     {p.children}
     </div>
+    {p.footer}
   </PopupWindow>
 }
 
@@ -176,7 +177,7 @@ function ClassSelectorWindow(p) {
 }
 
 function GetSpecialWeaponName(item) {
-  return item[WEAPON_EXISTENCE_DATA]!==undefined?(item[WEAPON_EXISTENCE_DATA].special_name?.length>0)?item[WEAPON_EXISTENCE_DATA].special_name:(item[WEAPON_WEAPON].name+" "+item[WEAPON_WEAPONTYPE].name):<><span style={{fontStyle:"italic"}}>Select Weapon</span></>
+  return item[WEAPON_EXISTENCE_DATA]!==undefined?(item[WEAPON_EXISTENCE_DATA].special_name?.length>0)?item[WEAPON_EXISTENCE_DATA].special_name:(item[WEAPON_WEAPON].name+" "+item[WEAPON_WEAPONTYPE].name):<><span className="">Select Weapon</span></>
 }
 
 function ConvertCoordinate(x,y) {
@@ -388,7 +389,7 @@ function FoodPopupWindow(p) {
     }
   }
 
-  return <SelectorWindow title={"Food Menu"} modalOpen={p.foodMenuWindowOpen} setModalOpen={p.setFoodMenuWindowOpen} GetData={p.GetData}>
+  return <SelectorWindow title={"Food Menu"} modalOpen={p.foodMenuWindowOpen} setModalOpen={p.setFoodMenuWindowOpen} GetData={p.GetData}  footer={<><div className="foodPoints"><div>Foods in Recipe</div><div>0</div></div><div className="foodConfirm"><div>Confirm</div><div>Cancel</div></div></>}>
     {FOODLIST.map((key)=><FoodItem key={key} modifyPoints={modifyPoints}  points={foodPointData[key]??0} item={FOODS[key]}/>)}
   </SelectorWindow>
 }
@@ -862,7 +863,7 @@ useEffect(()=>{
             <div>Your Skill Points<span>{20-points[treePage-1]}</span></div>
             <div>SP<span></span>{points[treePage-1]}</div>
           </div>
-          <div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
+          <div className="skillConfirm"><div>Confirm</div><div>Cancel</div></div>
         </div>
       </Modal>
 

src/style.css

@@ -305,6 +305,7 @@ header a {
 	grid-template-columns: minmax(0,auto) minmax(0,1fr);
 	margin: 10px 10px 0;
 	gap: 10px;
+	font-size: 18px;
 }
 .equipName {
 	max-width: 250px;
@@ -1074,7 +1075,7 @@ cursor:pointer !important;
 .skillRightButton {
 	background-position: right;
 }
-.skillPoints {
+.skillPoints, .foodPoints {
 	background-color: rgba(64,64,64,0.5);
 	text-align: center;
 	margin: 10px 10px 0 10px;
@@ -1082,35 +1083,45 @@ cursor:pointer !important;
 	color: white;
 	font-size: 14pt;
 	display: grid;
-	grid-template-columns: repeat(auto-fill,292px);
+	grid-template-columns: minmax(10px,1fr) repeat(2,minmax(auto,292px)) minmax(10px,1fr);
 	justify-content: center;
 	gap: 10px;
 }
-.skillPoints div:first-child {
-	text-align: center;
+.skillPoints div:first-child, .foodPoints div:first-child {
+	grid-column: 2;
+}
+.skillPoints div:last-child,.foodPoints div:last-child{
+	grid-column: 3;
 }
 .skillPoints div span{
-	display: inline-block;
-	width: calc(292px / 2);
-	text-align: center;
+	padding: 0 20px;
 }
-.skillConfirm {
+.foodConfirm, .skillConfirm {
+	display: grid;
+	grid-template-columns: minmax(10px,1fr) repeat(2,minmax(auto,292px)) minmax(10px,1fr);
+	gap: 10px;
 	justify-content: center;
-	display: flex;
-	flex-flow: row wrap;
+	margin:10px 22px 0 12px;
 }
-.skillConfirm span {
-	flex: 1 1 auto;
+.foodConfirm > div, .skillConfirm > div {
 	background-color: rgba(113,169,189,0.33);
-	display: inline-block;
 	text-align: center;
 	line-height: 48px;
 	color: white;
-	font-size: 13pt;
-	margin: 10px 6px 0 6px;
-	max-width: 292px;
+	font-size: 17px;
+	padding: 0 10px;
+}
+.foodConfirm > div:hover, .skillConfirm > div:hover {
+	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
+	cursor:pointer;
+	outline: 2px solid #30cdef;
+}
+.foodConfirm > div:first-child, .skillConfirm > div:first-child {
+	grid-column: 2;
+}
+.foodConfirm > div:last-child, .skillConfirm > div:last-child {
+	grid-column: 3;
 }
-
 /* Sig's Amazing CSS (cuz Dudley edited it) */
 .editBox:hover, .editClass:hover{
 	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));