Refactor code

src/App.css

@@ -20,6 +20,12 @@ body {
   padding: 0px 1px 0px 1px;
 }
 
+.img-card-hidden {
+  width: 95px;
+  padding: 0px 1px 0px 1px;
+  display: none;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

src/Gallery.tsx

@@ -1,13 +1,8 @@
 import React, { Fragment, useEffect, useState } from 'react';
-import './App.css';
 import GalleryCard from './GalleryCard';
+import './App.css';
 
-const defaultSet: any = (size: number) => {
-  const newSet = new Set<number>();
-  for (var i: number = 1; i <= size; i++) newSet.add(i);
-  return newSet;
-}
-
+const defaultSet: (size: number) => Set<number> = (size: number) => new Set([...Array.from(Array(size).keys()).map(v => v + 1)]);
 
 const stateToString: (s: Set<number>) => (string) = (s: Set<number>) => {
   const numbers: Array<number> = Array.from(s).sort((a, b) => a - b);
@@ -69,7 +64,7 @@ const loadSet: (() => Set<number>) = () => {
   return numbers;
 };
 
-const storeSet: ((set: Set<number>) => void) = (collection) => {
+const storeSet: ((set: Set<number>) => void) = (collection: Set<number>) => {
 
   var href = document.location.href;
   var pureHref: string = href.split("#")[0];
@@ -87,27 +82,10 @@ const Gallery: React.FC<{ size: number }> = ({ size }) => {
 
   useEffect(() => storeSet(collection));
 
-  const clickHandler: ((value: number) => ((eve: React.MouseEvent) => any)) = (value) => {
-    return (event: React.MouseEvent) => {
-      var element = event.currentTarget;
-      element.setAttribute("style", "");
-      var opacity = 1.0;  // initial opacity
-      var timer = setInterval(function () {
-        if (opacity <= 0.1) {
-          clearInterval(timer);
-          addToCollection(value);
-        } else {
-          element.setAttribute("style", `opacity: ${opacity};`);
-        }
-        opacity *= 0.9;
-      }, 7);
-    };
-  };
-
   return (
     <Fragment>
-      {Array.from(originalSet).filter(element => !collection.has(element)).map((value, key, theset) =>
-        <GalleryCard id={value} key={value} clickHandler={clickHandler(value)} />
+      {Array.from(originalSet).map((value, key, theset) =>
+        <GalleryCard id={value} key={value} hidden={collection.has(value)} removeCallback={() => addToCollection(value)} />
       )}
     </Fragment>)
 };

src/GalleryCard.tsx

@@ -1,10 +1,27 @@
 import React from 'react';
 import './App.css';
 
-const GalleryCard: React.FC<{ id: number, clickHandler: any }> = ({ id, clickHandler }) => {
+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;
+      element.setAttribute("style", "");
+      var opacity = 1.0;  // initial opacity
+      var timer = setInterval(function () {
+        if (opacity <= 0.1) {
+          clearInterval(timer);
+          removeCallback();
+        }
+        element.setAttribute("style", `opacity: ${opacity};`);
+        opacity *= 0.9;
+      }, 7);
+    };
+  };
+
   return <img
-    onClick={clickHandler}
-    className="img-card"
+    onClick={hidden? () => {}: 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`}
   />;