food window pt1

src/TestPanel.js

@@ -134,6 +134,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>
 }
 
@@ -175,7 +176,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) {
@@ -755,7 +756,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>
 
@@ -845,8 +846,7 @@ useEffect(()=>{
       }}
   />
 
-<SelectorWindow title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={setFoodMenuWindowOpen} GetData={p.GetData}>
-
+<SelectorWindow title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={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></>}>
 <div className="itemWrapperActive r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
 <div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
 <div className="itemWrapperActive r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>

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));