archived/botw-hundo-dupl
Archived
1
0
Fork 0
Code Activity

ui updates

Browse source
This commit is contained in:
iTNTPiston 2022-06-22 21:30:21 -07:00
parent 0806612f9e
commit 0cf48a91aa
8 changed files with 195 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/App.css
View file

@ -76,3 +76,8 @@ h1 {
color:#eeeeee;
float: left;
}
h3.ListHeader {
margin: 0;
padding: 10px;
}

170
src/App.tsx
View file

@ -5,10 +5,12 @@ import React, { useEffect, useMemo, useRef, useState } from "react";
import "./App.css";
import { CommandItem } from "./components/CommandItem";
import { DisplayPane } from "surfaces/DisplayPane";
import { DisplayPane, stacksToItemListProps } from "surfaces/DisplayPane";
import { Item } from "core/Item";
import { saveAs } from "data/FileSaver";
import { parseCommand } from "core/Parser";
import { ItemList } from "components/ItemList";
import { TitledList } from "components/TitledList";
const getDefaultCommands = (): Command[]=>{
const encoded = localStorage.getItem("HDS.CurrentCommandsText");
@ -47,6 +49,31 @@ const getDefaultCommands = (): Command[]=>{
];
};
const tempSaveInventory = new Inventory();
tempSaveInventory.rawInit([
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
{item: Item.Acorn, count: 55, equipped: false},
])
const listProps = stacksToItemListProps(tempSaveInventory.getSlots(), 0, true);
export const App: React.FC = () => {
const [overlaySave, setOverlaySave] = useState<boolean>(false);
const [commands, setCommands] = useState<Command[]>(getDefaultCommands());
@ -98,8 +125,7 @@ export const App: React.FC = () => {
}, [contextMenuRef, contextMenuShowing]);
return (
<div className='Calamity'
>
<div className='Calamity'>
<input ref={uploadRef} id="Upload" type="File" hidden onChange={(e)=>{
const files = e.target.files;
if(files?.length && files[0]){
@ -114,18 +140,77 @@ export const App: React.FC = () => {
});
}
}}/>
<div id="CommandList" style={{
width: "300px",
height: "calc( 100vh - 5px )",
overflowY: "auto",
float: "left",
border: "1px solid black",
boxSizing: "content-box"
} }>
<ul style={{
listStyleType: "none",
paddingInlineStart: 0
<div id="NavBar" style={{
height: 40
}}>
<button>Simulation</button>
<button>Reference</button>
<button>Options</button>
</div>
<div id="SidePane" style={{
width: 300,
float: "left"
}}>
<div style={{
maxHeight: 220,
height: "30vh",
border: "1px solid black",
boxSizing: "content-box",
overflowY: "hidden"
}}>
<TitledList title="Saves">
<ol>
<CommandItem
onClick={()=>{}}
comment={false}
>
Manual Save
</CommandItem>
<CommandItem
onClick={()=>{}}
comment={false}
>
Auto Save 1
</CommandItem>
<CommandItem
onClick={()=>{}}
comment={false}
>
Auto Save 2
</CommandItem>
<CommandItem
onClick={()=>{}}
comment={false}
>
Auto Save 3
</CommandItem>
<CommandItem
onClick={()=>{}}
comment={false}
>
Auto Save 4
</CommandItem>
<CommandItem
onClick={()=>{}}
comment={false}
>
Auto Save 5
</CommandItem>
</ol>
</TitledList>
</div>
<div style={{
minHeight: "calc( 70vh - 45px )",
height: "calc( 100vh - 45px - 220px )",
border: "1px solid black",
boxSizing: "content-box",
overflowY: "hidden"
}}>
<TitledList title="Instructions">
<ol style={{
}}>
{
commands.map((c,i)=>
@ -167,8 +252,29 @@ export const App: React.FC = () => {
setContextMenuShowing(true);
}}>(options)</CommandItem>
</ul>
</ol>
</TitledList>
</div>
</div>
<div id="MainPane" style={{
width: "calc ( 100% - 300px )"
}}>
<div style={{
maxHeight: 220,
height: "30vh",
border: "1px solid black",
boxSizing: "content-box",
overflowY: "hidden"
} }>
<TitledList title="Save Data">
<ItemList {...listProps}/>
</TitledList>
</div>
<div >
{displayIndex >= 0 && displayIndex < commands.length &&
<DisplayPane
overlaySave={overlaySave}
@ -185,6 +291,38 @@ export const App: React.FC = () => {
}}
/>
}
</div>
</div>
{/* <div id="SavePane" style={{
height: "200px"
}}>
</div>
<div id="InstructionPane" style={{
}}> */}
{/* <div id="CommandList" style={{
width: "300px",
height: "calc( 60vh - 5px )",
overflowY: "auto",
border: "1px solid black",
boxSizing: "content-box"
} }>
</div> */}
{/* </div> */}
{
contextMenuShowing && <div style={{

BIN
src/assets/img/2017022420411100_F1C11A22FAEE3B82F21B330E1B786A39.0.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 76 KiB

3
src/components/CommandItem.tsx
View file

@ -10,6 +10,9 @@ type CommandItemProps = PropsWithChildren<{
}>;
export const CommandItem: React.FC<CommandItemProps> = ({isSelected, isContextSelected, comment,children, onClick, onContextMenu}) => {
if(comment){
return <div className={clsx("CommandItem", isSelected && "CommandItemSelected", isContextSelected&& "CommandItemContextSelected",comment && "CommandItemComment")}>{children}</div>
}
return <li
className={clsx("CommandItem", isSelected && "CommandItemSelected", isContextSelected&& "CommandItemContextSelected",comment && "CommandItemComment")}
onClick={(e)=>{

25
src/components/TitledList.tsx Normal file
View file

@ -0,0 +1,25 @@
import { PropsWithChildren } from "react"
type TitledListProps = PropsWithChildren<{
title: string
}>
export const TitledList: React.FC<TitledListProps> = ({title, children}) => {
return (
<>
<h3 className="ListHeader" style={{
height: 20,
border: "1px solid red",
boxSizing: "content-box"
}}>
{title}
</h3>
<div style={{
height: "calc( 100% - 40px )",
overflowY: "auto"}}
>
{children}
</div>
</>
);
}

4
src/core/Inventory.ts
View file

@ -46,6 +46,10 @@ export class Inventory {
return this.turnedInOrbs;
}
public rawInit(stacks: ItemStack[]) {
this.slots = new Slots(stacks);
}
public init(stacks: ItemStack[]) {
this.slots = new Slots([]);
stacks.forEach(s=>{

1
src/index.css
View file

@ -1,5 +1,6 @@
body {
margin: 0;
overflow: hidden;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;

6
src/surfaces/DisplayPane.tsx
View file

@ -19,7 +19,7 @@ type DisplayPaneProps = {
editCommand: (c: Command)=>void
}
const stacksToItemListProps = (slots: Slots, numBroken: number, isSave: boolean): ItemListProps => {
export const stacksToItemListProps = (slots: Slots, numBroken: number, isSave: boolean): ItemListProps => {
return {
items: stacksToItemProps(slots.getSlotsRef()),
numBroken,
@ -27,11 +27,11 @@ const stacksToItemListProps = (slots: Slots, numBroken: number, isSave: boolean)
};
};
const stacksToItemProps = (stacks: ItemStack[]): ItemListItemProps[] => {
export const stacksToItemProps = (stacks: ItemStack[]): ItemListItemProps[] => {
return stacks.map(stackToItemProps);
};
const stackToItemProps = ({item, count, equipped}: ItemStack): ItemListItemProps => {
export const stackToItemProps = ({item, count, equipped}: ItemStack): ItemListItemProps => {
const data = itemToItemData(item);
return {image: data.image, count: data.stackable ? count : 0, isEquipped:equipped};
};