Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added: bushstrokes and custom attributes #47

Open
wants to merge 4 commits into
base: nifty-ink-dev
Choose a base branch
from
Open

added: bushstrokes and custom attributes #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3e30778
added: brushstrokes and custom attributes
xjjda22 Feb 10, 2022
99f002a
updated: createink add custom attributes
xjjda22 Feb 10, 2022
3c383b8
update: show attributes in viewink page
xjjda22 Feb 10, 2022
0091094
updated: clear attributes after minting
xjjda22 Feb 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
139 changes: 136 additions & 3 deletions packages/react-app/src/CreateInk.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ import {
DownloadOutlined,
UploadOutlined,
InfoCircleOutlined,
BookOutlined
BookOutlined,
MinusCircleOutlined,
PlusOutlined
} from "@ant-design/icons";
import {
Row,
Expand All @@ -32,7 +34,9 @@ import {
Tooltip,
Popover,
Table,
Select
Select,
Divider,
Badge
} from "antd";
import { useLocalStorage } from "./hooks";
import { addToIPFS, transactionHandler } from "./helpers";
Expand Down Expand Up @@ -62,6 +66,7 @@ export default function CreateInk(props) {
const [colorArray, setColorArray] = useLocalStorage("colorArray", "twitter");
const [_, setDrafts] = useLocalStorage("drafts", []);
const [canvasFile, setCanvasFile] = useState(null);
let [InkAttributes, setInkAttributes] = useLocalStorage("inkAttributes", [{trait_type: "brushstrokes",value:0}]);

const recentColorCount = 24;

Expand Down Expand Up @@ -340,6 +345,9 @@ export default function CreateInk(props) {
setDrawingSaved(false);
}
//}

InkAttributes[0].value = drawingCanvas.current.lines.length;
setInkAttributes(InkAttributes);
};

useEffect(() => {
Expand Down Expand Up @@ -371,6 +379,9 @@ export default function CreateInk(props) {
//console.log(decompressed)
//drawingCanvas.current.loadSaveData(decompressed, true)
setInitialDrawing(decompressed);

InkAttributes[0].value = currentLines.current.length;
setInkAttributes(InkAttributes);
} catch (e) {
console.log(e);
}
Expand Down Expand Up @@ -461,6 +472,9 @@ export default function CreateInk(props) {
value: values.limit.toString()
}
];
if(InkAttributes.length > 0 ){
currentInk["attributes"] = currentInk["attributes"].concat(InkAttributes);
}
currentInk["name"] = values.title;
let newEns;
try {
Expand Down Expand Up @@ -549,6 +563,7 @@ export default function CreateInk(props) {
props.setViewDrawing(drawingCanvas.current.getSaveData()); //LZ.decompress(props.drawing))
setDrawingSize(10000);
props.setDrawing("");
setInkAttributes([{trait_type: "brushstrokes",value:0}]);
history.push("/ink/" + drawingHash);
}
};
Expand Down Expand Up @@ -688,13 +703,56 @@ export default function CreateInk(props) {
const saveDraft = () => {
let imageData = drawingCanvas.current.canvas.drawing.toDataURL("image/png");
let savedData = LZ.compress(drawingCanvas.current.getSaveData());
let inkAttr = JSON.stringify(InkAttributes);

setDrafts(drafts => {
return [...drafts, { imageData, savedData }];
return [...drafts, { imageData, savedData, inkAttr}];
});
};

let top, bottom, canvas, shortcutsPopover, draftSaver;
let badgeColors = [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime',
];
// let attributesArr = [
// {
// trait_type: "brushstrokes",
// value: 1000
// },
// {
// trait_type: "tags",
// value: "mountains, sun, mt fuji"
// }
// ]

const saveAttributes = a => {
// console.log('attributes form values :', a);

// InkAttributes.length = 1;
InkAttributes = InkAttributes.concat(a.attrs);
setInkAttributes(InkAttributes);
};
const delAttributes = i => {
// console.log('attributes i :', i);

InkAttributes = InkAttributes.filter( (t,ii) =>{
return ii !== i
});
setInkAttributes(InkAttributes);
};

if (props.mode === "edit") {
top = (
<div style={{ margin: "0 auto", marginBottom: 16 }}>
Expand Down Expand Up @@ -786,6 +844,7 @@ export default function CreateInk(props) {
drawingCanvas.current.clear();
//setLoadedLines()
props.setDrawing();
setInkAttributes([{trait_type: "brushstrokes",value:0}]);
}}
okText="Yes"
cancelText="No"
Expand Down Expand Up @@ -815,6 +874,80 @@ export default function CreateInk(props) {
<PlaySquareOutlined /> PLAY
</Button>
</div>

<div style={{ flex: "1 0 auto", margin: "2% 10%" }}>
<Divider orientation="left">Attributes</Divider>
<Form
name="attributes_form"
onFinish={saveAttributes}
autoComplete="off"
layout={"inline"}
labelAlign={"middle"}
style={{ justifyContent: "center" }}
>
<Form.List name="attrs">
{(fields, { add, remove }) => (
<>
{
fields.map(({ key, name, ...restField }) => (
<Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
<Form.Item
{...restField}
name={[name, 'trait_type']}
rules={[{ required: true, message: 'Missing trait type' }]}
>
<Input placeholder="trait type" />
</Form.Item>
<Form.Item
{...restField}
name={[name, 'value']}
rules={[{ required: true, message: 'Missing value' }]}
>
<Input placeholder="value" />
</Form.Item>
<Form.Item>
<MinusCircleOutlined onClick={() => remove(name)} />
</Form.Item>
</Space>
))
}
<Form.Item>
<Space>
<Button type="primary" onClick={() => add()} icon={<PlusOutlined />}>
add custom attribute
</Button>
<Button type="primary" htmlType="submit">
save attributes
</Button>
</Space>
</Form.Item>
</>
)}
</Form.List>
</Form>
<div style={{ marginTop: 16 }}>
{
InkAttributes.map( (c,i) => (
<>
<Badge color={badgeColors[i]} text={
<>
<div style={{width: 150, fontWeight:"bold",display: "inline-block",textAlign:"left"}}>
{c.trait_type}
</div>:
<div style={{width: 250, marginLeft: 16, display: "inline-block",textAlign:"left"}}>
{c.value}
</div>
<div style={{width: 250, marginLeft: 16, display: "inline-block",textAlign:"left"}}>
{ i > 0 && <MinusCircleOutlined onClick={() => delAttributes(i)} /> }
</div>
</>
}
style={{ width:725, margin: "0 auto"}}/>
</>
))
}
</div>
</div>
</div>
);

Expand Down
6 changes: 4 additions & 2 deletions packages/react-app/src/Drafts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@ const { Text } = Typography;
export default function Drafts(props) {
const history = useHistory();
const [drafts, setDrafts] = useLocalStorage("drafts", []);
const [InkAttributes, setInkAttributes] = useLocalStorage("inkAttributes", [{trait_type: "brushstrokes",value:0}]);
const { address, ens, setDrawing } = props;

const goDraft = useCallback(
savedData => {
(savedData, inkAttr) => {
setDrawing(savedData);
setInkAttributes(inkAttr ? JSON.parse(inkAttr): [{trait_type: "brushstrokes",value:0}]);
history.push("/create");
},
[history, setDrawing]
Expand Down Expand Up @@ -79,7 +81,7 @@ export default function Drafts(props) {
<Popconfirm
title="This will overwrite the current drawing, are you sure?"
onConfirm={() => {
goDraft(draft.savedData);
goDraft(draft.savedData,draft.inkAttr);
}}
okText="Yes"
cancelText="No"
Expand Down
2 changes: 1 addition & 1 deletion packages/react-app/src/NftyWallet.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Button, Badge, Tabs, Row, Col, Drawer, Layout, Menu } from "antd";
import { MenuOutlined } from "@ant-design/icons";
import { PlusOutlined } from "@ant-design/icons";
import { useContractReader, useLocalStorage } from "./hooks";
import { RelayProvider } from "@opengsn/gsn";
import { RelayProvider } from "@opengsn/provider";
import { Account, Faucet } from "./components";
import { createClient } from "@supabase/supabase-js";
import Holdings from "./Holdings.js";
Expand Down
47 changes: 45 additions & 2 deletions packages/react-app/src/ViewInk.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ import {
Skeleton,
InputNumber,
Input,
Tabs
Tabs,
Divider
} from "antd";
import { AddressInput, Address, Loader } from "./components";
import {
Expand Down Expand Up @@ -837,11 +838,53 @@ export default function ViewInk(props) {
<img width={1} height={1} src={inkJson.image} />
);
}

let badgeColors = [
'pink',
'red',
'yellow',
'orange',
'cyan',
'green',
'blue',
'purple',
'geekblue',
'magenta',
'volcano',
'gold',
'lime',
];
let bottom = (
<div>
{likeButtonDisplay}
{detailsDisplay}
{
inkJson &&
inkJson.attributes &&
<div style={{ flex: "1 0 auto", margin: "2% 10% 5%" }}>
<Divider orientation="left">Attributes</Divider>
<div style={{ marginTop: 16 }}>
{
inkJson &&
inkJson.attributes &&
inkJson.attributes.map( (c,i) => (
<>
<Badge color={badgeColors[i]} text={
<>
<div style={{width: 150, fontWeight:"bold",display: "inline-block",textAlign:"left"}}>
{c.trait_type}
</div>:
<div style={{width: 250, marginLeft: 16, display: "inline-block",textAlign:"left"}}>
{c.value}
</div>
</>
}
style={{ width:725, margin: "0 auto"}}/>
</>
))
}
</div>
</div>
}
<div style={{ marginTop: 16, margin: "auto" }}>{inkChainInfoDisplay}</div>

<div style={{ marginTop: 20 }}>
Expand Down