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 ( -
-
- logo - - Learn React - -
-
- ); -}; - -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) => ) + ) }; 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