├── mtgi-v2
├── public
│ ├── robots.txt
│ ├── favicon.ico
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── index.html
├── src
│ ├── logo512.png
│ ├── components
│ │ ├── Context.js
│ │ ├── Navbar.js
│ │ ├── Card.js
│ │ ├── CardList.js
│ │ ├── CardModal.js
│ │ ├── Landing.js
│ │ ├── Sort.js
│ │ └── CardForm.js
│ ├── test
│ │ ├── setupTests.js
│ │ └── App.test.js
│ ├── index.js
│ ├── App.css
│ ├── App.js
│ ├── logo.svg
│ └── index.css
├── .gitignore
├── package.json
├── README.md
└── data
│ └── db.json
└── README.md
/mtgi-v2/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/mtgi-v2/src/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StygianLiege/MTG-Inventory/HEAD/mtgi-v2/src/logo512.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # MTG-Inventory
2 | Magic: The Gathering Inventory - Navigate to `mtgi-v2` for the application.
3 |
--------------------------------------------------------------------------------
/mtgi-v2/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StygianLiege/MTG-Inventory/HEAD/mtgi-v2/public/favicon.ico
--------------------------------------------------------------------------------
/mtgi-v2/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StygianLiege/MTG-Inventory/HEAD/mtgi-v2/public/logo192.png
--------------------------------------------------------------------------------
/mtgi-v2/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/StygianLiege/MTG-Inventory/HEAD/mtgi-v2/public/logo512.png
--------------------------------------------------------------------------------
/mtgi-v2/src/components/Context.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 |
3 | export const Context = createContext();
4 |
--------------------------------------------------------------------------------
/mtgi-v2/src/test/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/mtgi-v2/src/test/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from '../App';
3 |
4 | test('renders learn react link', () => {
5 | render(
9 |
11 | );
12 |
--------------------------------------------------------------------------------
/mtgi-v2/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/mtgi-v2/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/mtgi-v2/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import logo from '../logo512.png';
3 | import { Context } from './Context';
4 |
5 | const Navbar = () => {
6 | const { view, dispatchView, setScroll } = useContext(Context);
7 | const handlePageView = (view) => {
8 | dispatchView(view);
9 | };
10 | return (
11 |
12 |
13 |
handlePageView(0)} className="navbar-button">
14 | Inventory
15 |
16 |
{
18 | if (view === 0) setScroll(window.scrollY);
19 | handlePageView(1);
20 | }}
21 | className="navbar-button"
22 | >
23 | New Card
24 |
25 |
24 |
handleCardView(url, card)}
27 | onClick={() => handleCardClick()}
28 | >
29 | {card.cardName}
30 |
31 |
20 |
21 |
Inventory
22 | {cards.map((card) => (
23 |
26 |
11 |
12 | {/*
13 |
14 |
15 |
16 | Add Card
17 |
18 |
*/}
19 |
20 |
21 | {/*
22 |
23 |
24 |
25 | Add Card
26 |
27 |
30 |
31 |
33 | );
34 | }
35 |
36 | export default App;
37 |
--------------------------------------------------------------------------------
/mtgi-v2/README.md:
--------------------------------------------------------------------------------
1 | # MTG Inventory v2
2 |
3 | Back and better than ever.
4 |
5 | ## Instructions
6 |
7 | You'll need a browser (I recommend Google Chrome), and Node.js installed on your machine.
8 |
9 | Open a terminal and clone this repo into a folder of your choosing.
10 |
11 | Once cloned, navigate to this application via `cd mtgi-v2` in the terminal.
12 |
13 | Now run `npm install` in the terminal to download the necessary dependencies.
14 |
15 | MTG Inventory is ready to go!
16 |
17 | To boot up the local server/database, run `npx json-server --watch data/db.json --port 8000` next.
18 |
19 | Now open a second terminal and start up the interface with `npm start`.
20 |
21 | The application will be found at `http://localhost:3000/` in your browser.
22 |
23 | The Inventory is your collection of cards.
24 |
25 | It will have some sample cards at first.
26 |
27 | To delete a card, click on the card from the Inventory list, and then click the **Delete** button at the bottom of the card information.
28 |
29 | To add new cards, click **New Card** and fill in the required information.
30 |
31 | When ready, hit **Submit**.
32 |
33 | Your new card will now be in the Inventory.
34 |
35 | Add more cards and watch your collection grow.
36 |
37 | Use the **Search** and **Sort** features to tailor which cards appear and in which order.
38 |
39 | Some stretch features to watch out for:
40 |
41 | - Decks!!
42 |
--------------------------------------------------------------------------------
/mtgi-v2/src/components/CardModal.js:
--------------------------------------------------------------------------------
1 | import { Context } from './Context';
2 | import { useContext } from 'react';
3 |
4 | const CardModal = () => {
5 | const {
6 | curCard,
7 | update,
8 | dispatchUpdate,
9 | dispatchView,
10 | dispatchClearCardView,
11 | } = useContext(Context);
12 | const handleDelete = () => {
13 | fetch('http://localhost:8000/cards/' + curCard.id, {
14 | method: 'DELETE',
15 | })
16 | .then(() => {
17 | dispatchUpdate(update + 1);
18 | dispatchClearCardView();
19 | dispatchView(0);
20 | })
21 | .catch((err) => alert(err.message));
22 | };
23 | return (
24 |
25 |
26 |
27 |
NAME:
28 |
{curCard.cardName}
29 |
TYPE:
30 |
{curCard.cardType}
31 |
CONVERTED MANA COST:
32 |
{curCard.cardManaCost}
33 |
COLOR IDENTITY:
34 |
{curCard.cardColorIdentity}
35 |
36 |
37 |
38 | Delete
39 |
40 |
41 |
42 |
MTG Inventory v2
25 |
26 |
27 | Your collection...
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/mtgi-v2/src/logo.svg:
--------------------------------------------------------------------------------
1 |
67 |
83 | Loading...
}
87 | {view === 2 &&
90 |
{
94 | if (view === 0) setScroll(window.scrollY);
95 | view === 2 ? setView(0) : setView(2);
96 | }}
97 | />
98 |
102 |
73 | Search:
74 | Sort:
95 | Alphabetically
96 | Mana Cost
110 | Color Identity:
124 | Colorless
125 | White
134 | Blue
143 | Red
152 | Black
161 | Green
170 |
179 | );
180 | };
181 |
182 | export default Sort;
183 |
--------------------------------------------------------------------------------
/mtgi-v2/src/components/CardForm.js:
--------------------------------------------------------------------------------
1 | import { useState, useContext } from 'react';
2 | import { Context } from './Context';
3 |
4 | const CardForm = () => {
5 | const [cardName, setCardName] = useState('');
6 | const [cardType, setCardType] = useState('');
7 | const [cardManaCost, setCardManaCost] = useState(0);
8 | const [cardUrl, setCardUrl] = useState('');
9 | const [colorless, setColorless] = useState(false);
10 | const [white, setWhite] = useState(false);
11 | const [blue, setBlue] = useState(false);
12 | const [red, setRed] = useState(false);
13 | const [black, setBlack] = useState(false);
14 | const [green, setGreen] = useState(false);
15 |
16 | const { update, dispatchUpdate, dispatchView } = useContext(Context);
17 |
18 | const handleAddCard = () => {
19 | const cArr = [colorless, white, blue, red, black, green];
20 | let cId = '';
21 | for (let i = 0; i < cArr.length; i++) {
22 | if (cArr[i] && i === 0) {
23 | cId += 'Colorless/';
24 | } else if (cArr[i] && i === 1) {
25 | cId += 'White/';
26 | } else if (cArr[i] && i === 2) {
27 | cId += 'Blue/';
28 | } else if (cArr[i] && i === 3) {
29 | cId += 'Red/';
30 | } else if (cArr[i] && i === 4) {
31 | cId += 'Black/';
32 | } else if (cArr[i] && i === 5) {
33 | cId += 'Green/';
34 | }
35 | }
36 | const cardColorIdentity = cId.slice(0, -1);
37 | const card = {
38 | cardName,
39 | cardType,
40 | cardManaCost,
41 | cardColorIdentity,
42 | cardUrl,
43 | };
44 | console.log(
45 | `Name: ${cardName}, Type: ${cardType}, Mana Cost: ${cardManaCost}, Url: ${cardUrl}`
46 | );
47 | console.log(
48 | `Colorless: ${colorless}, White: ${white}, Blue: ${blue}, Red: ${red}, Black: ${black}, Green: ${green}`
49 | );
50 | console.log(`Color Identity: ${cardColorIdentity}`);
51 | console.log(card);
52 | fetch('http://localhost:8000/cards', {
53 | method: 'POST',
54 | headers: { 'Content-type': 'application/json' },
55 | body: JSON.stringify(card),
56 | })
57 | .then(() => {
58 | console.log('New Card Added');
59 | })
60 | .then(() => {
61 | dispatchUpdate(update + 1);
62 | dispatchView(0);
63 | })
64 | .catch((err) => {
65 | alert(err.message);
66 | });
67 | };
68 |
69 | return (
70 |
71 |
New Card
72 |
170 |
171 | Submit
172 |
173 |