diff --git a/src/App.css b/src/App.css
index 6f28f01..fb2aa15 100644
--- a/src/App.css
+++ b/src/App.css
@@ -4,48 +4,13 @@ body {
background-color: #1e1e1e;
}
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
.img-card {
width: 95px;
- padding: 0px 1px 0px 1px;
+ padding: 0px 1px;
}
.img-card-hidden {
width: 95px;
padding: 0px 1px 0px 1px;
display: none;
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
+}
\ No newline at end of file
diff --git a/src/App.test.tsx b/src/App.test.tsx
deleted file mode 100644
index 4db7ebc..0000000
--- a/src/App.test.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- const { getByText } = render();
- const linkElement = getByText(/learn react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/App.tsx b/src/App.tsx
deleted file mode 100644
index f511a7b..0000000
--- a/src/App.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-
-
-const App : React.FC<{}> = () => {
- return (
-
- );
-};
-
-export default App;
diff --git a/src/Gallery.tsx b/src/Gallery.tsx
index 3d3e2ce..0d488ef 100644
--- a/src/Gallery.tsx
+++ b/src/Gallery.tsx
@@ -1,6 +1,5 @@
-import React, { Fragment, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
import GalleryCard from './GalleryCard';
-import './App.css';
const defaultSet: (size: number) => Set = (size: number) => new Set([...Array.from(Array(size).keys()).map(v => v + 1)]);
@@ -83,11 +82,11 @@ const Gallery: React.FC<{ size: number }> = ({ size }) => {
useEffect(() => storeSet(collection));
return (
-
- {Array.from(originalSet).map((value, key, theset) =>
+ <>
+ {Array.from(originalSet).map((value) =>
addToCollection(value)} />
)}
- )
+ >)
};
export default Gallery;
\ No newline at end of file
diff --git a/src/GalleryCard.tsx b/src/GalleryCard.tsx
index 1ae3fba..c0e08ef 100644
--- a/src/GalleryCard.tsx
+++ b/src/GalleryCard.tsx
@@ -1,14 +1,11 @@
import React from 'react';
-import './App.css';
const GalleryCard: React.FC<{ id: number, hidden: boolean, removeCallback: () => any }> = ({ id, hidden, removeCallback}) => {
- const clickHandler: ((value: number) => ((eve: React.MouseEvent) => any)) = (value) => {
- return (event: React.MouseEvent) => {
- var element = event.currentTarget;
+ const fadeOut = (element: EventTarget & Element) => {
element.setAttribute("style", "");
- var opacity = 1.0; // initial opacity
- var timer = setInterval(function () {
+ let opacity = 1.0;
+ const timer = setInterval(function () {
if (opacity <= 0.1) {
clearInterval(timer);
removeCallback();
@@ -16,15 +13,16 @@ const GalleryCard: React.FC<{ id: number, hidden: boolean, removeCallback: () =>
element.setAttribute("style", `opacity: ${opacity};`);
opacity *= 0.9;
}, 7);
- };
};
- return
{}: clickHandler(id)}
- className={hidden?"img-card-hidden":"img-card"}
- alt={`Pokemon card with number ${String(id)}`}
- src={`https://dominic.leafbla.de/cards/res/${String(id).padStart(3, '0')}.jpg`}
- />;
+ return (!hidden ?
+
{ } : (event) => fadeOut(event.currentTarget)}
+ className={hidden ? "img-card-hidden" : "img-card"}
+ alt={`Pokemon card with number ${String(id)}`}
+ src={`https://dominic.leafbla.de/cards/res/${String(id).padStart(3, '0')}.jpg`}
+ />
+ : null);
};
-export default GalleryCard;
\ No newline at end of file
+export default GalleryCard;
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.tsx b/src/index.tsx
index 0ef5b24..b1dbbb7 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,17 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
-import './index.css';
import Gallery from './Gallery';
-import * as serviceWorker from './serviceWorker';
+import './App.css';
ReactDOM.render(
,
document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+);
\ No newline at end of file