Initial commit

src/App.css

@@ -1,5 +1,7 @@
-.App {
+body {
-  text-align: center;
+  margin: 8px;
+  padding: 10px;
+  background-color: #1e1e1e;
 }
 
 .App-logo {
@@ -13,6 +15,11 @@
   }
 }
 
+.img-card {
+  width: 95px;
+  padding: 0px 1px 0px 1px;
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;

src/App.tsx

@@ -1,14 +1,17 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import BoldText from './BoldText';
 
-function App() {
+
+
+const App : React.FC<{}> = () => {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
-          Edit <code>src/App.tsx</code> and save to reload.
+          Edit <code>src/App.tsx</code> and <BoldText></BoldText> to reload.
         </p>
         <a
           className="App-link"
@@ -21,6 +24,6 @@ function App() {
       </header>
     </div>
   );
-}
+};
 
 export default App;

src/Gallery.tsx

@@ -0,0 +1,45 @@
+import React, { Fragment, useEffect, useState } from 'react';
+import './App.css';
+import GalleryCard from './GalleryCard';
+
+const defaultSet: any = (size: number) => {
+  const newSet = new Set<number>();
+  for (var i: number = 1; i <= size; i++) newSet.add(i);
+  return newSet;
+}
+
+const loadSet: (() => Set<number>) = () => {
+  var href: string = document.location.href;
+  var afterHref: string = href.indexOf("#") === -1 ? "" : href.substring(href.indexOf("#") + 1);
+  var numbers = afterHref === "" ? [] : afterHref.split(",").filter(s => s !== "").map(i => parseInt(i));
+  return new Set<number>([...numbers]);
+};
+
+const Gallery: React.FC<{ size: number }> = ({ size }) => {
+  const originalSet: Set<number> = defaultSet(size);
+  const [collection, setCollection] = useState(loadSet());
+
+  function addToCollection(toRemove: number) {
+    return setCollection(previousState => new Set<number>([...Array.from(previousState), toRemove]));
+  }
+
+  function getStateString() {
+    var s = Array.from(collection).sort((a, b) => a - b).join(",")
+    return s;
+  }
+
+  useEffect(() => {
+    var href = document.location.href;
+    var pureHref = (href.indexOf("#") === -1) ? href : href.substring(0, href.indexOf("#"));
+    document.location.href = `${pureHref}#${getStateString()}`;
+  });
+
+  return (
+    <Fragment>
+      {Array.from(originalSet).filter(element => !collection.has(element)).map((value, key, theset) =>
+        <GalleryCard id={value} key={value} clickHandler={(e: React.MouseEvent) => addToCollection(value)} />
+      )}
+    </Fragment>)
+};
+
+export default Gallery;

src/GalleryCard.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import './App.css';
+
+const GalleryCard: React.FC<{ id: number, clickHandler: any }> = ({ id, clickHandler }) => {
+  return <img
+    onClick={clickHandler}
+    className="img-card"
+    alt={`Pokemon card with number ${String(id)}`}
+    src={`https://dominic.leafbla.de/cards/res/${String(id).padStart(3, '0')}.jpg`}
+  />;
+};
+
+export default GalleryCard;

src/index.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import Gallery from './Gallery';
 import * as serviceWorker from './serviceWorker';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Gallery size={150}/>
   </React.StrictMode>,
   document.getElementById('root')
 );