diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..f9e8c60 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,151 @@ +# Contributing Guide + +## How to setup the project? +1. Fork the repo, +2. Open a terminal and clone the project with `git clone https://github.com/[your-github-username]/svelte-chess.git`, +3. Open the folder on your editor, +4. Install dependencies with `npm install`, +5. You're ready to start contributing 🎉 + +## Contributing new pieces sets + +`svelte-chess` uses smaller and fewer optimized pieces assets. + +- One `SVG` and `CSS` file for every set + one base `CSS` file. +- `CSS` for multiple pieces sets can be combined into one file if your app needs it. +- Every piece set is contained in a `32x32` viewport. Since we're using SVGs, there's no need to have a bigger viewport that would translate in a bigger file size because of the nature of SVGs. +- `SVG` for the all the pieces sets are optimized using [https://jakearchibald.github.io/svgomg/](https://jakearchibald.github.io/svgomg/) with the number precision set to `2` + +### How to add new pieces? + +1. Find a set of pieces that you would like to include. You can find more pieces on: + - [Lichess repo](https://github.com/lichess-org/lila/tree/master/public/piece) + - [Sharechess repo](https://github.com/sharechess/sharechess/tree/main/public/pieces) + +2. Copy the set's SVGs to Figma. The frames will not be named with the pieces codes when you paste them on Figma like in the image bellow, it's up to you if you want to name them for organization purposes. + + ![Alt text](static/screenshot-1.png) + +3. Make the calculation to scale every SVG's stroke-width down to the correct value for them to be `32×32` SVGs. *You are not going to resize the piece inside the frame, but the whole frame including the piece*. This is needed because if you resize the SVGs, the stroke will not be scaled up/down (it will stay the same). If the original size is `40×40` px and the stroke-width is `1.33`, we need to find the stroke-width for the `32×32` size. Formula: `(original_stroke_width * desired_size) / original_size = desired_stroke_width`. + + ![Alt text](static/screenshot-2.png) ![Alt text](static/screenshot-3.png) + + With the values from the image above, the formula will be: `(1.33 * 32) / 40 = 1.064`. Now we have the correct stroke-width for the `32×32` size: + + ![Alt text](static/screenshot-4.png) ![Alt text](static/screenshot-5.png) + +4. Do the same for all pieces. Beware that some pieces may have different stroke-widths inside! You have to do the calculation for every different stroke-width. + +5. Add a SVG file with the name of the set that you want to contribute and paste the following template inside: + + ```svg + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ``` + Note: The `style` tag is *very* important, do not remove it! + +6. Go to Figma and select the frame of one of the pieces that you already resized (it's important that you select the whole frame and not just the piece inside), then right-click on the frame, click on `Copy/Paste as` and then on `Copy as SVG`. + + ![Alt text](static/screenshot-6.png) + + You will have something like this on your clipboard: + ```svg + + + + ``` + + It doesn't matter if it says `height="33"`, the only thing that we will need is the `path` tags. Copy all of them (in this case we only have one `path`) + + ```diff + - + + - + ``` + + The piece that we copied is the white pawn (the code is `wP`). For a black pawn the code will be `bP`. Paste all the `path` tags inside the corresponding `g` tag (``): + + ```diff + + ... + + + + + ... + + + ``` + +7. Repeat the previous step for all the other pieces. + +8. When you finish, copy the whole SVG and paste it on [https://jakearchibald.github.io/svgomg/](https://jakearchibald.github.io/svgomg/). Set number precision to `2` and be sure to disable the `Collapse useless groups` option. Then, copy back the SVG to your editor (you should replace the old SVG with the new optimized version that you just copied). You might want to disable the `Prettify markup` option to get smaller sizes. Just beware that the `style` tag shouldn't be removed! + + ![Alt text](static/screenshot-7.png) + +9. Remember to add attribution for the pieces sets. + +10. Add a CSS file with the name of your pieces set with the following CSS rule inside: + ```css + /* Replace `your-new-set-name` with the real name of the set */ + .your-new-set-name { + --wP: url('your-new-set-name.svg#wP'); + --wB: url('your-new-set-name.svg#wB'); + --wN: url('your-new-set-name.svg#wN'); + --wR: url('your-new-set-name.svg#wR'); + --wQ: url('your-new-set-name.svg#wQ'); + --wK: url('your-new-set-name.svg#wK'); + --bP: url('your-new-set-name.svg#bP'); + --bB: url('your-new-set-name.svg#bB'); + --bN: url('your-new-set-name.svg#bN'); + --bR: url('your-new-set-name.svg#bR'); + --bQ: url('your-new-set-name.svg#bQ'); + --bK: url('your-new-set-name.svg#bK'); + } + ``` + +11. Make the PR with your changes and you're ready to go 🎉 + +**Note:** If you need help with any of the steps or found a way to further optimize the process, don't hesitate on reaching out. \ No newline at end of file diff --git a/static/pieces/alpha.css b/static/pieces/alpha.css new file mode 100644 index 0000000..8d52845 --- /dev/null +++ b/static/pieces/alpha.css @@ -0,0 +1,14 @@ +.alpha { + --wP: url('alpha.svg#wP'); + --wB: url('alpha.svg#wB'); + --wN: url('alpha.svg#wN'); + --wR: url('alpha.svg#wR'); + --wQ: url('alpha.svg#wQ'); + --wK: url('alpha.svg#wK'); + --bP: url('alpha.svg#bP'); + --bB: url('alpha.svg#bB'); + --bN: url('alpha.svg#bN'); + --bR: url('alpha.svg#bR'); + --bQ: url('alpha.svg#bQ'); + --bK: url('alpha.svg#bK'); +} diff --git a/static/pieces/alpha.svg b/static/pieces/alpha.svg new file mode 100644 index 0000000..3b91fa5 --- /dev/null +++ b/static/pieces/alpha.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/pieces/anarcandy.css b/static/pieces/anarcandy.css new file mode 100644 index 0000000..506b9f3 --- /dev/null +++ b/static/pieces/anarcandy.css @@ -0,0 +1,14 @@ +.anarcandy { + --wP: url('anarcandy.svg#wP'); + --wB: url('anarcandy.svg#wB'); + --wN: url('anarcandy.svg#wN'); + --wR: url('anarcandy.svg#wR'); + --wQ: url('anarcandy.svg#wQ'); + --wK: url('anarcandy.svg#wK'); + --bP: url('anarcandy.svg#bP'); + --bB: url('anarcandy.svg#bB'); + --bN: url('anarcandy.svg#bN'); + --bR: url('anarcandy.svg#bR'); + --bQ: url('anarcandy.svg#bQ'); + --bK: url('anarcandy.svg#bK'); +} diff --git a/static/pieces/anarcandy.svg b/static/pieces/anarcandy.svg new file mode 100644 index 0000000..86b7801 --- /dev/null +++ b/static/pieces/anarcandy.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/pieces/base.css b/static/pieces/base.css new file mode 100644 index 0000000..606d434 --- /dev/null +++ b/static/pieces/base.css @@ -0,0 +1,12 @@ +piece.pawn.white {background-image: var(--wP)} +piece.bishop.white {background-image: var(--wB)} +piece.knight.white {background-image: var(--wN)} +piece.rook.white {background-image: var(--wR)} +piece.queen.white {background-image: var(--wQ)} +piece.king.white {background-image: var(--wK)} +piece.pawn.black {background-image: var(--bP)} +piece.bishop.black {background-image: var(--bB)} +piece.knight.black {background-image: var(--bN)} +piece.rook.black {background-image: var(--bR)} +piece.queen.black {background-image: var(--bQ)} +piece.king.black {background-image: var(--bK)} diff --git a/static/pieces/cburnett.svg b/static/pieces/cburnett.svg new file mode 100644 index 0000000..ef1e004 --- /dev/null +++ b/static/pieces/cburnett.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/pieces/pixel.css b/static/pieces/pixel.css new file mode 100644 index 0000000..15381cc --- /dev/null +++ b/static/pieces/pixel.css @@ -0,0 +1,14 @@ +.pixel { + --wP: url('pixel.svg#wP'); + --wB: url('pixel.svg#wB'); + --wN: url('pixel.svg#wN'); + --wR: url('pixel.svg#wR'); + --wQ: url('pixel.svg#wQ'); + --wK: url('pixel.svg#wK'); + --bP: url('pixel.svg#bP'); + --bB: url('pixel.svg#bB'); + --bN: url('pixel.svg#bN'); + --bR: url('pixel.svg#bR'); + --bQ: url('pixel.svg#bQ'); + --bK: url('pixel.svg#bK'); +} diff --git a/static/pieces/pixel.svg b/static/pieces/pixel.svg new file mode 100644 index 0000000..8fc643a --- /dev/null +++ b/static/pieces/pixel.svg @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/pieces/staunty.css b/static/pieces/staunty.css new file mode 100644 index 0000000..9d6ff23 --- /dev/null +++ b/static/pieces/staunty.css @@ -0,0 +1,14 @@ +.staunty { + --wP: url('staunty.svg#wP'); + --wB: url('staunty.svg#wB'); + --wN: url('staunty.svg#wN'); + --wR: url('staunty.svg#wR'); + --wQ: url('staunty.svg#wQ'); + --wK: url('staunty.svg#wK'); + --bP: url('staunty.svg#bP'); + --bB: url('staunty.svg#bB'); + --bN: url('staunty.svg#bN'); + --bR: url('staunty.svg#bR'); + --bQ: url('staunty.svg#bQ'); + --bK: url('staunty.svg#bK'); +} diff --git a/static/pieces/staunty.svg b/static/pieces/staunty.svg new file mode 100644 index 0000000..a84a86c --- /dev/null +++ b/static/pieces/staunty.svg @@ -0,0 +1,134 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/pieces/tatiana.css b/static/pieces/tatiana.css new file mode 100644 index 0000000..f6bcc8a --- /dev/null +++ b/static/pieces/tatiana.css @@ -0,0 +1,14 @@ +.tatiana { + --wP: url('tatiana.svg#wP'); + --wB: url('tatiana.svg#wB'); + --wN: url('tatiana.svg#wN'); + --wR: url('tatiana.svg#wR'); + --wQ: url('tatiana.svg#wQ'); + --wK: url('tatiana.svg#wK'); + --bP: url('tatiana.svg#bP'); + --bB: url('tatiana.svg#bB'); + --bN: url('tatiana.svg#bN'); + --bR: url('tatiana.svg#bR'); + --bQ: url('tatiana.svg#bQ'); + --bK: url('tatiana.svg#bK'); +} diff --git a/static/pieces/tatiana.svg b/static/pieces/tatiana.svg new file mode 100644 index 0000000..7b2c2bc --- /dev/null +++ b/static/pieces/tatiana.svg @@ -0,0 +1,88 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/screenshot-1.png b/static/screenshot-1.png new file mode 100644 index 0000000..015798b Binary files /dev/null and b/static/screenshot-1.png differ diff --git a/static/screenshot-2.png b/static/screenshot-2.png new file mode 100644 index 0000000..68ce5a6 Binary files /dev/null and b/static/screenshot-2.png differ diff --git a/static/screenshot-3.png b/static/screenshot-3.png new file mode 100644 index 0000000..fb27040 Binary files /dev/null and b/static/screenshot-3.png differ diff --git a/static/screenshot-4.png b/static/screenshot-4.png new file mode 100644 index 0000000..a25f5f3 Binary files /dev/null and b/static/screenshot-4.png differ diff --git a/static/screenshot-5.png b/static/screenshot-5.png new file mode 100644 index 0000000..669cb79 Binary files /dev/null and b/static/screenshot-5.png differ diff --git a/static/screenshot-6.png b/static/screenshot-6.png new file mode 100644 index 0000000..3e04fb0 Binary files /dev/null and b/static/screenshot-6.png differ diff --git a/static/screenshot-7.png b/static/screenshot-7.png new file mode 100644 index 0000000..8b87872 Binary files /dev/null and b/static/screenshot-7.png differ