From d49330a4fcc5622b7c2e29309a4accb46221b8b0 Mon Sep 17 00:00:00 2001 From: Sebastian Dine Date: Sat, 18 Mar 2023 12:13:50 +0100 Subject: [PATCH] Minor adjustment/refactoring resolves #1 resolves #2 --- README.md | 146 +++++++++--------- card-collection-manager-2/package.json | 2 +- .../src-tauri/Cargo.toml | 2 +- .../src-tauri/config.json | 1 - .../src/components/modals/ImageModal.tsx | 39 +---- .../templates/CardImageWithLoader.tsx | 75 +++++++++ .../templates/CreateEditModalTemplate.tsx | 2 +- .../src/components/templates/IntegerInput.tsx | 31 +++- .../components/templates/SpinnerLoader.tsx | 21 +++ version | 2 +- 10 files changed, 206 insertions(+), 115 deletions(-) mode change 100644 => 100755 README.md delete mode 100644 card-collection-manager-2/src-tauri/config.json create mode 100644 card-collection-manager-2/src/components/templates/CardImageWithLoader.tsx create mode 100644 card-collection-manager-2/src/components/templates/SpinnerLoader.tsx diff --git a/README.md b/README.md old mode 100644 new mode 100755 index a7e7581..eb07dbe --- a/README.md +++ b/README.md @@ -1,73 +1,73 @@ -# Card Collection Manager 2 -![img1](img1.PNG) -![img2](img2.PNG) - -## Project Description -This projects provides a management application for trading card game collections. Its aim is to be a simple solution to keep track of collections. The main reason why I wrote this application is because I required a tool, which can manage single card images of a large collection, besides common card collection management features. - -This project is the successor of my previous project [Card Collection Manager](https://github.com/sebastiandine/Card-Collection-Manager). The main benefit over the first version of the project is that this version can support multiple card games at once. Right now, it supports [Magic the Gathering](https://magic.wizards.com/) and the [Pokemon TCG](https://tcg.pokemon.com). The project was designed with extensibility in mind, so adding support for additional games is quite easy (about 2 hours of work per game). - -In addition to these functional enhancements, the application was completely rewritten from scratch. While the previous project was Java-based, this version is based on the [Tauri framework](https://tauri.app/), using Rust and Typescript. Therefore, the application is now available as native binary for all three common platform: Windows, Linux and MacOS. - -## Migrate from Card Collection Manager 1 -You can migrate your Magic the Gathering collection from CCM1 to CCM2 by following these steps: -1. Create a JSON export of your collection in CCM1 (`Export -> to JSON (.json)`) -2. Copy this file to `/magic/collection.json`, where `` is the root collection directory of your CCM2 instance. By default, this will be the directory where CCM2 is installed, but you can also specify an arbitrary directory via the CCM2 settings dialog (`File -> Settings`). -3. Copy all image files of your collection from `/images/` to `/magic/images/`, where `` is the root collection directory of your CCM1 instance. - -After performing these steps, the next time you open CCM2, you will see your collection in CCM2. Now, you can delete CCM1. - - -## How to build/ contribute -### Contribute -The project includes configuration for [VSCode development containers](https://code.visualstudio.com/docs/remote/containers) which should be the preffered environment to develop new features of the app. The container automatically sets up a whole Tauri development environment including Typescript & Rust plugins for VSCode. - -Also, in directory `hooks/` you find some helpful git hooks that automate/standardize some work. You can activate these hooks by executing the script `activate_hooks.sh` from within the `hooks/` directory. - -Additionally, if you want to run the GUI out of the container, you need to use a X11 tool. I will briefly explain how to run them in order to display the GUI from the container: - -**Windows**
-I recommend [Xming](https://sourceforge.net/projects/xming/) if your host system is Windows ([VcXSrv](https://sourceforge.net/projects/vcxsrv/), which I recommended for the Java-based CCM1 did not work here). Once you have it installed, start it via `Xming.exe` and enable the option `Disable access control` before you start the server. Now, you can start a GUI app in your container that will be displayed via the X-server on the host system. - -**MacOS**
-Install [XQuartz](https://www.xquartz.org/) and run it via the following command: -``` -xhost +localhost -``` -Now, you can start a GUI app in your container that will be displayed via the X-server on the host system. - -### Local Run & Building -* Execute `yarn` to install all NodeJS dependencies when you initially check out the project. Make sure you are in the Tauri project directory. -* Execute `yarn tauri dev` to run the application in development mode. Make sure you are in the Tauri project directory. If you run this for the first time, it will quite long since it needs to fetch all Rust-based dependencies and build corresponding binaries. If you make changes to the Rust code of the project, it will also take a while (but not as long as the initial run), since it has to recompile binaries. -* Execute `yarn tauri build` to build the application. Right now, Tauri only supports building for the local architecture. Since the development container is based on Linux, this means you will build Linux packages via this command. - -### Remote Building -Actual versions are automatically built via GitHub Action pipelines defined at [`.github/workflows`](./.github/workflows/). - -## Toolkit -### Base -* [Tauri](https://tauri.app/) framework with [Rust](https://www.rust-lang.org/) for backend/internal logic and [Typescript](https://www.typescriptlang.org/) for the UI. - -### Frontend (TS) -* [Next.JS](https://nextjs.org/) as UI framework. -* [Tailwind CSS](https://tailwindcss.com/) for UI component styling. -* [React Icons](https://react-icons.github.io/react-icons/) -* [React Spinner](https://mhnpd.github.io/react-loader-spinner/docs/intro) - -### Backend (Rust) -* [serde](https://crates.io/crates/serde) for data serialization/deserialization. -* [serde_json](https://crates.io/crates/serde_json) for data serialization/deserialization to and from JSON. -* [image](https://crates.io/crates/image) to work with image files. -* [base64](https://crates.io/crates/base64) to convert image files to base64 encoded strings to send them from backend to frontend. -* [reqwest](https://crates.io/crates/reqwest) for REST calls to game-specific APIs to fetch set and card data. -* [strum](https://crates.io/crates/strum) for additional macros for enums and strings. -* [nom](https://crates.io/crates/nom) for type checks. - -### Additional Resources -* [Scryfall API](https://scryfall.com/docs/api) for fetching card and set data of Magic the Gathering, including card preview images. -* [Pokemon TCG API](https://docs.pokemontcg.io/) for fetching card and set data of the Pokemon TCG, including card preview images. - -### Further Reading -* [Tauri GitHub Actions Templates](https://github.com/tauri-apps/tauri-action) -* [Rust Serialization Framework](https://github.com/serde-rs/serde) -* [Tauri Command Docs](https://tauri.app/v1/guides/features/command) +# Card Collection Manager 2 +![img1](img1.PNG) +![img2](img2.PNG) + +## Project Description +This projects provides a management application for trading card game collections. Its aim is to be a simple solution to keep track of collections. The main reason why I wrote this application is because I required a tool, which can manage single card images of a large collection, besides common card collection management features. + +This project is the successor of my previous project [Card Collection Manager](https://github.com/sebastiandine/Card-Collection-Manager). The main benefit over the first version of the project is that this version can support multiple card games at once. Right now, it supports [Magic the Gathering](https://magic.wizards.com/) and the [Pokemon TCG](https://tcg.pokemon.com). The project was designed with extensibility in mind, so adding support for additional games is quite easy (about 2 hours of work per game). + +In addition to these functional enhancements, the application was completely rewritten from scratch. While the previous project was Java-based, this version is based on the [Tauri framework](https://tauri.app/), using Rust and Typescript. Therefore, the application is now available as native binary for all three common platform: Windows, Linux and MacOS. + +## Migrate from Card Collection Manager 1 +You can migrate your Magic the Gathering collection from CCM1 to CCM2 by following these steps: +1. Create a JSON export of your collection in CCM1 (`Export -> to JSON (.json)`) +2. Copy this file to `/magic/collection.json`, where `` is the root collection directory of your CCM2 instance. By default, this will be the directory where CCM2 is installed, but you can also specify an arbitrary directory via the CCM2 settings dialog (`File -> Settings`). +3. Copy all image files of your collection from `/images/` to `/magic/images/`, where `` is the root collection directory of your CCM1 instance. + +After performing these steps, the next time you open CCM2, you will see your collection in CCM2. Now, you can delete CCM1. + + +## How to build/ contribute +### Contribute +The project includes configuration for [VSCode development containers](https://code.visualstudio.com/docs/remote/containers) which should be the preffered environment to develop new features of the app. The container automatically sets up a whole Tauri development environment including Typescript & Rust plugins for VSCode. + +Also, in directory `hooks/` you find some helpful git hooks that automate/standardize some work. You can activate these hooks by executing the script `activate_hooks.sh` from within the `hooks/` directory. If you are receiving errors like `fatal: cannot run .git/hooks/pre-commit: No such file or directory`, check the line-end sequence of the hook scripts, adjust them according to your system and run `activate_hooks.sh` again. + +Additionally, if you want to run the GUI out of the container, you need to use a X11 tool. I will briefly explain how to run them in order to display the GUI from the container: + +**Windows**
+I recommend [Xming](https://sourceforge.net/projects/xming/) if your host system is Windows ([VcXSrv](https://sourceforge.net/projects/vcxsrv/), which I recommended for the Java-based CCM1 did not work here). Once you have it installed, start it via `Xming.exe` and enable the option `Disable access control` before you start the server. Now, you can start a GUI app in your container that will be displayed via the X-server on the host system. + +**MacOS**
+Install [XQuartz](https://www.xquartz.org/) and run it via the following command: +``` +xhost +localhost +``` +Now, you can start a GUI app in your container that will be displayed via the X-server on the host system. + +### Local Run & Building +* Execute `yarn` to install all NodeJS dependencies when you initially check out the project. Make sure you are in the Tauri project directory. +* Execute `yarn tauri dev` to run the application in development mode. Make sure you are in the Tauri project directory. If you run this for the first time, this will take quite a long time, since it needs to fetch all Rust-based dependencies and build corresponding binaries. If you make changes to the Rust code of the project, it will also take a while (but not as long as the initial run), since it has to recompile binaries. +* Execute `yarn tauri build` to build the application. Right now, Tauri only supports building for the local architecture. Since the development container is based on Linux, this means you will build Linux packages via this command. + +### Remote Building +Actual versions are automatically built via GitHub Action pipelines defined at [`.github/workflows`](./.github/workflows/). + +## Toolkit +### Base +* [Tauri](https://tauri.app/) framework with [Rust](https://www.rust-lang.org/) for backend/internal logic and [Typescript](https://www.typescriptlang.org/) for the UI. + +### Frontend (TS) +* [Next.JS](https://nextjs.org/) as UI framework. +* [Tailwind CSS](https://tailwindcss.com/) for UI component styling. +* [React Icons](https://react-icons.github.io/react-icons/) +* [React Spinner](https://mhnpd.github.io/react-loader-spinner/docs/intro) + +### Backend (Rust) +* [serde](https://crates.io/crates/serde) for data serialization/deserialization. +* [serde_json](https://crates.io/crates/serde_json) for data serialization/deserialization to and from JSON. +* [image](https://crates.io/crates/image) to work with image files. +* [base64](https://crates.io/crates/base64) to convert image files to base64 encoded strings to send them from backend to frontend. +* [reqwest](https://crates.io/crates/reqwest) for REST calls to game-specific APIs to fetch set and card data. +* [strum](https://crates.io/crates/strum) for additional macros for enums and strings. +* [nom](https://crates.io/crates/nom) for type checks. + +### Additional Resources +* [Scryfall API](https://scryfall.com/docs/api) for fetching card and set data of Magic the Gathering, including card preview images. +* [Pokemon TCG API](https://docs.pokemontcg.io/) for fetching card and set data of the Pokemon TCG, including card preview images. + +### Further Reading +* [Tauri GitHub Actions Templates](https://github.com/tauri-apps/tauri-action) +* [Rust Serialization Framework](https://github.com/serde-rs/serde) +* [Tauri Command Docs](https://tauri.app/v1/guides/features/command) diff --git a/card-collection-manager-2/package.json b/card-collection-manager-2/package.json index 17deb7d..d674fe4 100644 --- a/card-collection-manager-2/package.json +++ b/card-collection-manager-2/package.json @@ -1,7 +1,7 @@ { "name": "card-collection-manager-2", "private": true, - "version": "1.0.0", + "version": "1.0.1", "scripts": { "dev": "next dev -p 1420", "build": "next build && next export -o dist", diff --git a/card-collection-manager-2/src-tauri/Cargo.toml b/card-collection-manager-2/src-tauri/Cargo.toml index 0cfd9b1..bb6f7df 100644 --- a/card-collection-manager-2/src-tauri/Cargo.toml +++ b/card-collection-manager-2/src-tauri/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "card-collection-manager-2" -version = "1.0.0" +version = "1.0.1" description = "A Tauri App" authors = ["you"] license = "" diff --git a/card-collection-manager-2/src-tauri/config.json b/card-collection-manager-2/src-tauri/config.json deleted file mode 100644 index 7eb0cb0..0000000 --- a/card-collection-manager-2/src-tauri/config.json +++ /dev/null @@ -1 +0,0 @@ -{"dataStorage":"/home/dev/cards","defaultGame":"Magic"} \ No newline at end of file diff --git a/card-collection-manager-2/src/components/modals/ImageModal.tsx b/card-collection-manager-2/src/components/modals/ImageModal.tsx index bf7a43a..707bf44 100644 --- a/card-collection-manager-2/src/components/modals/ImageModal.tsx +++ b/card-collection-manager-2/src/components/modals/ImageModal.tsx @@ -1,11 +1,9 @@ import React, { Dispatch, SetStateAction, useEffect, useState } from "react"; -import { invoke } from "@tauri-apps/api/tauri"; import { GrNext, GrPrevious } from "react-icons/gr"; -import { RotatingLines } from "react-loader-spinner"; import ModalTemplate from "../templates/ModalTemplate"; -import Image from "next/image"; +import CardImageWithLoader from "../templates/CardImageWithLoader"; /** * Modal to display a set of images. @@ -25,43 +23,24 @@ const ImageModal: React.FC<{ startIndex?: number; }> = (props) => { - // current image as base-64 string - const [imageB64, setImageB64] = useState(""); // index of current image in `props.images` const [imageIndex, setImageIndex] = useState(0); - // flag to display the loading image - const [loaderVisible, setLoaderVisible] = useState(true); useEffect(() => { if (props.visible && props.images) { - setLoaderVisible(true); setImageIndex(props.startIndex | 0); - loadImage(props.startIndex | 0); } }, [props.visible]); - const loadImage = async (id: number) => { - invoke("get_image_b64", { image: props.images[id], game: props.game }).then( - (result) => { - setImageB64(result as string); - setLoaderVisible(false); - } - ); - }; - const loadNextImage = () => { if(imageIndex < props.images.length -1){ - setLoaderVisible(true); setImageIndex(imageIndex + 1); - loadImage(imageIndex + 1); } } const loadPreviousImage = () => { if(imageIndex > 0){ - setLoaderVisible(true); setImageIndex(imageIndex - 1); - loadImage(imageIndex - 1); } } @@ -74,20 +53,8 @@ const ImageModal: React.FC<{ modalStyle=" w-[80%] h-[80%]" >
- {loaderVisible - ? -
- -
- : - - } - + + {/* next/previous image icons */} {props.images.length > 1 ? (
diff --git a/card-collection-manager-2/src/components/templates/CardImageWithLoader.tsx b/card-collection-manager-2/src/components/templates/CardImageWithLoader.tsx new file mode 100644 index 0000000..d116308 --- /dev/null +++ b/card-collection-manager-2/src/components/templates/CardImageWithLoader.tsx @@ -0,0 +1,75 @@ +import React, { Suspense } from "react"; +import { invoke } from "@tauri-apps/api/tauri"; +import Image from "next/image"; + +import SpinnerLoader from "./SpinnerLoader"; + +// Promise wrapper that acts as an interface for a component to work with React.Suspense. +const wrapPromise = (promise: Promise) => { + let status = 'pending'; // set initial status + let result: T; + let error: any; + + // resolve promise + let suspender = promise.then( + (res) => { + status = 'success'; + result = res; + }, + (err) => { + status = 'error'; + error = err; + } + ); + + return { + read() { + switch (status) { + case 'pending': throw suspender; + case 'error': throw error; + default: return result; + } + } + }; +}; + +// Get the promise that returns the image data as base-64 string once it resolves. +const loadImagePromise = (images: string[], index: number, game: string) => { + return invoke("get_image_b64", { image: images[index], game: game}) + .then(res => res as string) + .catch(err => err) + } + + // wrap image data promise inside the "Suspense interface" +const loadImageWrapped = (images: string[], index: number, game: string) => { + const imagePromise = loadImagePromise(images, index, game); + return wrapPromise(imagePromise); +}; + +// Image component that can be used with React.Suspense +const CardImageSuspendable: React.FC<{ resource: any }> = (props) => { + const imageB64: string = props.resource.read(); + return ( + + ) +}; + +/** + * This component loads an image from the backend and displays it. It uses React.Suspense in order + * to display a loading animation until the image data is loaded. + * + * # Props: + * * game - Name of the game for which images should be displayed. + * * images - List of image names. From this list, one image is loaded and displayed at a time. + * * index - index that indicates which element from `props.images` should be displayed. + */ +const CardImageWithLoader: React.FC<{images: string[], index: number, game: string}> = (props) => { + + return ( + }> + + + ); +}; + +export default CardImageWithLoader; diff --git a/card-collection-manager-2/src/components/templates/CreateEditModalTemplate.tsx b/card-collection-manager-2/src/components/templates/CreateEditModalTemplate.tsx index 401c104..69f83b0 100644 --- a/card-collection-manager-2/src/components/templates/CreateEditModalTemplate.tsx +++ b/card-collection-manager-2/src/components/templates/CreateEditModalTemplate.tsx @@ -300,7 +300,7 @@ const CreateEditModalTemplate: React.FC<{ - = () => { + * const inputRef = useRef(null); + * + * const printValue = () => { + * console.log(Number.parseInt(inputRef.current!.value)) + * } + * + * return ( + *
+ * + * + *
+ * ); + * } */ const IntegerInput = forwardRef((props: React.DetailedHTMLProps, HTMLInputElement>, ref: React.MutableRefObject) => { diff --git a/card-collection-manager-2/src/components/templates/SpinnerLoader.tsx b/card-collection-manager-2/src/components/templates/SpinnerLoader.tsx new file mode 100644 index 0000000..551b12b --- /dev/null +++ b/card-collection-manager-2/src/components/templates/SpinnerLoader.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { RotatingLines } from "react-loader-spinner"; + +/** + * Simple loading animation with rotating lines. + * see also: https://mhnpd.github.io/react-loader-spinner/docs/components/rotating-lines + */ +const SpinnerLoader: React.FC<{}> = () => { + return ( +
+ +
+ ); +}; + +export default SpinnerLoader; \ No newline at end of file diff --git a/version b/version index 3eefcb9..7dea76e 100644 --- a/version +++ b/version @@ -1 +1 @@ -1.0.0 +1.0.1