init idk
Ayaka
26
.gitignore
vendored
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# dev
|
||||||
|
src/*.dev.jsx
|
||||||
11
README.md
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
# Project Sekai Stickers
|
||||||
|
|
||||||
|
help is welcome, got some skill issues so dont judge me 
|
||||||
|
|
||||||
|
## credit
|
||||||
|
|
||||||
|
-original stickers from [reddit](https://www.reddit.com/r/ProjectSekai/comments/x1h4v1/after_an_ungodly_amount_of_time_i_finally_made/)
|
||||||
|
|
||||||
|
-cropped images by Modder4869#4818 on discord
|
||||||
|
|
||||||
|
-website by Ayaka#4715 on discord
|
||||||
29550
package-lock.json
generated
Normal file
43
package.json
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "sekai-stickers",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@emotion/react": "^11.10.4",
|
||||||
|
"@emotion/styled": "^11.10.4",
|
||||||
|
"@mui/base": "^5.0.0-alpha.100",
|
||||||
|
"@mui/material": "^5.10.8",
|
||||||
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
|
"@testing-library/react": "^13.4.0",
|
||||||
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"react-slider": "^2.0.4",
|
||||||
|
"web-vitals": "^2.1.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/android-chrome-192x192.png
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
public/android-chrome-256x256.png
Normal file
|
After Width: | Height: | Size: 76 KiB |
BIN
public/apple-touch-icon.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
9
public/browserconfig.xml
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<browserconfig>
|
||||||
|
<msapplication>
|
||||||
|
<tile>
|
||||||
|
<square150x150logo src="/mstile-150x150.png"/>
|
||||||
|
<TileColor>#da532c</TileColor>
|
||||||
|
</tile>
|
||||||
|
</msapplication>
|
||||||
|
</browserconfig>
|
||||||
BIN
public/favicon-16x16.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
public/favicon-32x32.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
public/favicon.ico
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
public/img/airi/Airi_01.png
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
public/img/airi/Airi_02.png
Normal file
|
After Width: | Height: | Size: 68 KiB |
BIN
public/img/airi/Airi_03.png
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
public/img/airi/Airi_04.png
Normal file
|
After Width: | Height: | Size: 67 KiB |
BIN
public/img/airi/Airi_06.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/img/airi/Airi_07.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
public/img/airi/Airi_08.png
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
public/img/airi/Airi_09.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
public/img/airi/Airi_11.png
Normal file
|
After Width: | Height: | Size: 64 KiB |
BIN
public/img/airi/Airi_12.png
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/img/airi/Airi_13.png
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
public/img/airi/Airi_14.png
Normal file
|
After Width: | Height: | Size: 77 KiB |
BIN
public/img/airi/Airi_16.png
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
public/img/airi/Airi_17.png
Normal file
|
After Width: | Height: | Size: 70 KiB |
BIN
public/img/airi/Airi_18.png
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
public/img/akito/Akito_01.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/img/akito/Akito_02.png
Normal file
|
After Width: | Height: | Size: 67 KiB |
BIN
public/img/akito/Akito_03.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/img/akito/Akito_04.png
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
public/img/akito/Akito_06.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
public/img/akito/Akito_07.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
public/img/akito/Akito_08.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/img/akito/Akito_09.png
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/img/akito/Akito_11.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
public/img/akito/Akito_12.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
public/img/akito/Akito_13.png
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/img/akito/Akito_14.png
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/img/akito/Akito_16.png
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
public/img/an/An_01.png
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
public/img/an/An_02.png
Normal file
|
After Width: | Height: | Size: 61 KiB |
BIN
public/img/an/An_03.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
public/img/an/An_04.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
public/img/an/An_06.png
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/img/an/An_07.png
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
public/img/an/An_08.png
Normal file
|
After Width: | Height: | Size: 59 KiB |
BIN
public/img/an/An_09.png
Normal file
|
After Width: | Height: | Size: 64 KiB |
BIN
public/img/an/An_11.png
Normal file
|
After Width: | Height: | Size: 66 KiB |
BIN
public/img/an/An_12.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
public/img/an/An_13.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
public/img/an/An_14.png
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
public/img/an/An_16.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
public/img/emu/Emu_01.png
Normal file
|
After Width: | Height: | Size: 58 KiB |
BIN
public/img/emu/Emu_02.png
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
public/img/emu/Emu_03.png
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
public/img/emu/Emu_04.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
public/img/emu/Emu_06.png
Normal file
|
After Width: | Height: | Size: 65 KiB |
BIN
public/img/emu/Emu_07.png
Normal file
|
After Width: | Height: | Size: 45 KiB |
BIN
public/img/emu/Emu_08.png
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
public/img/emu/Emu_09.png
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
public/img/emu/Emu_11.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
public/img/emu/Emu_12.png
Normal file
|
After Width: | Height: | Size: 62 KiB |
BIN
public/img/emu/Emu_13.png
Normal file
|
After Width: | Height: | Size: 78 KiB |
BIN
public/img/emu/Emu_14.png
Normal file
|
After Width: | Height: | Size: 79 KiB |
BIN
public/img/emu/Emu_16.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
public/img/emutest.png
Normal file
|
After Width: | Height: | Size: 64 KiB |
BIN
public/img/ena/Ena_01.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
public/img/ena/Ena_02.png
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
public/img/ena/Ena_03.png
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
public/img/ena/Ena_04.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
public/img/ena/Ena_06.png
Normal file
|
After Width: | Height: | Size: 55 KiB |
BIN
public/img/ena/Ena_07.png
Normal file
|
After Width: | Height: | Size: 51 KiB |
BIN
public/img/ena/Ena_08.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
public/img/ena/Ena_09.png
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
public/img/ena/Ena_11.png
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
public/img/ena/Ena_12.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
public/img/ena/Ena_13.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
BIN
public/img/ena/Ena_14.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
BIN
public/img/ena/Ena_16.png
Normal file
|
After Width: | Height: | Size: 63 KiB |
30
public/index.html
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||||
|
<link rel="manifest" href="/site.webmanifest" />
|
||||||
|
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
|
||||||
|
<meta name="msapplication-TileColor" content="#da532c" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta name="description" content="Project sekai stickers maker" />
|
||||||
|
<title>Project Sekai Stickers</title>
|
||||||
|
|
||||||
|
<meta property="og:title" content="Project Sekai Stickers" />
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="Make your own Project sekai stickers!"
|
||||||
|
/>
|
||||||
|
<meta property="og:image" content="/og-image.png" />
|
||||||
|
<meta property="og:url" content="https://st.ayaka.one" />
|
||||||
|
<meta property="og:site_name" content="Project Sekai Stickers" />
|
||||||
|
<meta property="og:type" content="website" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/mstile-150x150.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
public/og-image.png
Normal file
|
After Width: | Height: | Size: 106 KiB |
64
public/safari-pinned-tab.svg
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||||
|
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||||
|
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="296.000000pt" height="296.000000pt" viewBox="0 0 296.000000 296.000000"
|
||||||
|
preserveAspectRatio="xMidYMid meet">
|
||||||
|
<metadata>
|
||||||
|
Created by potrace 1.14, written by Peter Selinger 2001-2017
|
||||||
|
</metadata>
|
||||||
|
<g transform="translate(0.000000,296.000000) scale(0.100000,-0.100000)"
|
||||||
|
fill="#000000" stroke="none">
|
||||||
|
<path d="M2313 2695 c-24 -17 -73 -99 -74 -124 0 -11 -2 -12 -6 -3 -3 8 -9 10
|
||||||
|
-16 4 -7 -5 -25 -13 -42 -17 -37 -10 -36 -10 -59 -20 -14 -6 -24 -3 -37 13 -9
|
||||||
|
12 -22 22 -29 22 -6 0 -9 4 -6 9 5 7 -47 22 -94 26 -33 3 -85 -39 -73 -59 3
|
||||||
|
-5 0 -7 -8 -4 -9 3 -14 24 -15 62 -1 31 -4 60 -7 63 -11 10 -112 29 -140 25
|
||||||
|
-35 -4 -57 -50 -90 -189 -17 -74 -21 -105 -13 -113 8 -9 -4 -10 -45 -5 -31 4
|
||||||
|
-81 6 -110 5 -30 -1 -75 -1 -102 -1 -51 1 -202 -29 -252 -50 -16 -7 -33 -13
|
||||||
|
-37 -13 -3 -1 -10 -4 -14 -8 -15 -15 -21 -7 -62 80 -22 48 -57 104 -76 124
|
||||||
|
-38 40 -47 40 -107 6 -57 -32 -57 -34 -12 -142 13 -32 23 -60 21 -61 -2 -2
|
||||||
|
-19 18 -38 45 -45 62 -64 74 -93 59 -35 -19 -87 -76 -87 -97 0 -19 55 -104 72
|
||||||
|
-110 4 -2 8 -10 8 -17 0 -7 4 -15 9 -17 25 -9 14 -30 -18 -34 -19 -2 -50 -14
|
||||||
|
-69 -26 -20 -12 -32 -16 -28 -10 4 7 3 12 -2 12 -5 0 -8 10 -7 23 4 40 -22 57
|
||||||
|
-89 57 -71 0 -84 -7 -95 -46 -6 -24 -15 -31 -53 -40 -25 -7 -55 -17 -67 -24
|
||||||
|
-20 -10 -23 -9 -28 9 -8 33 -103 51 -103 20 0 -5 -6 -9 -12 -9 -35 0 -90 -73
|
||||||
|
-69 -90 3 -3 30 -40 59 -83 l53 -77 -18 -30 c-9 -17 -21 -30 -25 -30 -17 0
|
||||||
|
-48 -67 -48 -103 0 -27 7 -44 24 -60 36 -33 243 -147 269 -147 20 -1 20 -2 -6
|
||||||
|
-16 -36 -20 -65 -27 -97 -23 -91 9 -130 -13 -130 -72 0 -19 -6 -32 -17 -36
|
||||||
|
-59 -20 -79 -82 -48 -142 8 -16 11 -31 8 -35 -4 -3 -2 -6 3 -6 12 0 10 -45 -4
|
||||||
|
-80 -7 -18 -6 -37 4 -65 20 -58 17 -83 -13 -109 -39 -33 -35 -70 17 -148 24
|
||||||
|
-37 48 -64 55 -62 9 4 13 -9 13 -41 1 -53 26 -93 63 -101 22 -5 25 -11 26 -46
|
||||||
|
1 -51 22 -128 40 -149 16 -19 61 -30 69 -17 3 4 10 6 15 2 5 -3 15 -1 22 4 7
|
||||||
|
5 20 8 30 7 9 -2 17 1 17 5 0 5 22 8 49 6 52 -3 49 -5 158 95 37 33 44 77 17
|
||||||
|
103 -14 15 -13 16 10 16 14 0 53 -19 86 -42 44 -30 73 -42 101 -44 22 -1 57
|
||||||
|
-9 77 -17 20 -8 45 -18 56 -21 17 -6 17 -8 3 -24 -29 -32 -21 -80 16 -97 17
|
||||||
|
-8 462 -11 620 -4 9 0 25 10 34 23 15 20 21 21 48 13 16 -5 37 -13 47 -18 15
|
||||||
|
-8 31 -6 86 6 12 3 32 7 43 10 12 2 29 11 38 19 14 12 20 11 50 -14 38 -32 48
|
||||||
|
-32 122 4 47 22 54 23 64 9 14 -18 86 -24 132 -10 40 12 60 33 65 67 4 33 15
|
||||||
|
40 49 30 32 -9 41 -17 82 -72 15 -21 36 -42 46 -47 50 -27 112 -18 138 20 11
|
||||||
|
14 19 17 32 10 12 -7 22 -6 29 1 7 7 12 9 12 5 0 -18 58 25 64 46 3 13 19 41
|
||||||
|
36 61 27 35 29 44 28 110 -1 96 -30 146 -93 162 -18 4 -26 15 -31 39 -7 39
|
||||||
|
-39 72 -81 84 -24 7 -44 3 -89 -15 -32 -13 -59 -22 -59 -21 -1 1 2 16 6 33 9
|
||||||
|
30 9 30 78 30 43 -1 75 4 82 12 7 6 30 12 51 12 45 0 74 25 103 89 26 59 15
|
||||||
|
101 -33 126 -48 25 -51 31 -42 69 9 40 4 74 -14 91 -16 16 -152 59 -164 52
|
||||||
|
-13 -9 -35 10 -39 32 -1 12 0 21 5 22 4 1 39 2 77 3 83 2 115 12 134 39 16 22
|
||||||
|
22 67 9 67 -4 0 -8 13 -8 28 0 35 -27 50 -103 58 -29 3 -56 9 -60 14 -5 4 -10
|
||||||
|
33 -12 64 -1 31 -7 62 -14 69 -6 8 -8 16 -5 19 5 5 -14 47 -60 134 -16 31 -16
|
||||||
|
31 25 74 42 44 103 156 93 172 -3 4 -1 8 4 8 5 0 9 8 9 18 -1 9 3 41 7 71 8
|
||||||
|
53 9 54 23 30 41 -67 153 -62 182 8 12 29 12 83 0 83 -11 0 -23 73 -32 193 -1
|
||||||
|
9 -5 17 -10 17 -4 0 -6 4 -3 9 3 5 -4 21 -16 36 -19 25 -25 26 -67 20 -25 -4
|
||||||
|
-60 -13 -78 -20 -32 -14 -32 -14 -27 -71 4 -56 4 -56 -20 -50 -35 9 -72 -8
|
||||||
|
-79 -35 l-6 -24 -21 23 c-20 21 -21 25 -6 47 24 37 28 90 8 112 -21 24 -101
|
||||||
|
63 -128 63 -11 0 -29 -7 -41 -15z m22 -223 c-3 -3 -11 0 -18 7 -9 10 -8 11 6
|
||||||
|
5 10 -3 15 -9 12 -12z m-256 -65 c12 -15 12 -17 -3 -11 -9 3 -16 13 -16 22 0
|
||||||
|
8 1 13 3 11 1 -2 9 -12 16 -22z m-304 -557 c3 -6 -1 -7 -9 -4 -18 7 -21 14 -7
|
||||||
|
14 6 0 13 -4 16 -10z m-1362 -100 c12 -12 32 -23 45 -27 17 -4 21 -10 16 -22
|
||||||
|
-3 -9 -7 -22 -7 -28 0 -17 1 -17 -33 12 -16 14 -33 25 -37 25 -5 0 -15 7 -24
|
||||||
|
15 -12 12 -13 19 -3 30 16 19 17 19 43 -5z m2200 -607 c4 -3 3 -11 -4 -19 -6
|
||||||
|
-8 -8 -14 -3 -14 5 0 2 -5 -6 -10 -16 -10 -40 10 -53 43 -6 16 -3 18 26 12 17
|
||||||
|
-4 36 -9 40 -12z m-2270 -297 l24 -24 -29 -16 c-27 -17 -28 -17 -27 6 1 13 -2
|
||||||
|
31 -6 41 -10 25 10 21 38 -7z m180 -193 c-7 -2 -19 -2 -25 0 -7 3 -2 5 12 5
|
||||||
|
14 0 19 -2 13 -5z m-67 -42 c-11 -12 -24 -17 -34 -13 -13 4 -10 9 13 18 40 17
|
||||||
|
41 17 21 -5z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.2 KiB |
19
public/site.webmanifest
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
{
|
||||||
|
"name": "",
|
||||||
|
"short_name": "",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "/android-chrome-192x192.png",
|
||||||
|
"sizes": "192x192",
|
||||||
|
"type": "image/png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "/android-chrome-256x256.png",
|
||||||
|
"sizes": "256x256",
|
||||||
|
"type": "image/png"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"theme_color": "#ffffff",
|
||||||
|
"background_color": "#ffffff",
|
||||||
|
"display": "standalone"
|
||||||
|
}
|
||||||
68
src/App.css
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 4rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.canvas {
|
||||||
|
height: 256px;
|
||||||
|
width: 296px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 256px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal {
|
||||||
|
width: 296px;
|
||||||
|
margin-left: -30px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings {
|
||||||
|
color: white;
|
||||||
|
font-family: "YurukaStd";
|
||||||
|
margin: 1.5rem 0 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings > div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picker {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 2rem;
|
||||||
|
font-family: "YurukaStd";
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer > a {
|
||||||
|
color: rgb(199, 199, 199);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer > a:hover {
|
||||||
|
color: rgb(255, 255, 255);
|
||||||
|
}
|
||||||
151
src/App.jsx
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
import "./App.css";
|
||||||
|
import Canvas from "./components/Canvas";
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import characters from "./characters.json";
|
||||||
|
import Slider from "@mui/material/Slider";
|
||||||
|
import TextField from "@mui/material/TextField";
|
||||||
|
import Button from "@mui/material/Button";
|
||||||
|
import Picker from "./components/Picker";
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [character, setCharacter] = useState(49);
|
||||||
|
const [text, setText] = useState(characters[character].defaultText.text);
|
||||||
|
const [position, setPosition] = useState({
|
||||||
|
x: characters[character].defaultText.x,
|
||||||
|
y: characters[character].defaultText.y,
|
||||||
|
});
|
||||||
|
const [fontSize, setFontSize] = useState(characters[character].defaultText.s);
|
||||||
|
const [rotate, setRotate] = useState(characters[character].defaultText.r);
|
||||||
|
const [loaded, setLoaded] = useState(false);
|
||||||
|
const img = new Image();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setText(characters[character].defaultText.text);
|
||||||
|
setPosition({
|
||||||
|
x: characters[character].defaultText.x,
|
||||||
|
y: characters[character].defaultText.y,
|
||||||
|
});
|
||||||
|
setRotate(characters[character].defaultText.r);
|
||||||
|
setFontSize(characters[character].defaultText.s);
|
||||||
|
setLoaded(false);
|
||||||
|
}, [character]);
|
||||||
|
|
||||||
|
img.src = "/img/" + characters[character].img;
|
||||||
|
|
||||||
|
img.onload = () => {
|
||||||
|
setLoaded(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const draw = (ctx) => {
|
||||||
|
ctx.canvas.width = 296;
|
||||||
|
ctx.canvas.height = 256;
|
||||||
|
|
||||||
|
if (loaded && document.fonts.check("12px YurukaStd")) {
|
||||||
|
ctx.drawImage(img, 0, 0, 296, 256);
|
||||||
|
ctx.font = `${fontSize}px YurukaStd`;
|
||||||
|
ctx.lineWidth = 9;
|
||||||
|
ctx.save();
|
||||||
|
|
||||||
|
ctx.translate(position.x, position.y);
|
||||||
|
ctx.rotate(rotate / 10);
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.strokeStyle = "white";
|
||||||
|
ctx.strokeText(text, 0, 0);
|
||||||
|
ctx.fillStyle = characters[character].color;
|
||||||
|
ctx.fillText(text, 0, 0);
|
||||||
|
ctx.restore();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const download = () => {
|
||||||
|
const canvas = document.getElementsByTagName("canvas")[0];
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.download = `${characters[character].name}_st.ayaka.one.png`;
|
||||||
|
link.href = canvas.toDataURL();
|
||||||
|
link.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<div className="container">
|
||||||
|
<div className="vertical">
|
||||||
|
<div className="canvas">
|
||||||
|
<Canvas draw={draw} />
|
||||||
|
</div>
|
||||||
|
<Slider
|
||||||
|
value={256 - position.y}
|
||||||
|
onChange={(e, v) => setPosition({ ...position, y: 256 - v })}
|
||||||
|
min={0}
|
||||||
|
max={256}
|
||||||
|
step={1}
|
||||||
|
orientation="vertical"
|
||||||
|
track={false}
|
||||||
|
color="secondary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="horizontal">
|
||||||
|
<Slider
|
||||||
|
value={position.x}
|
||||||
|
onChange={(e, v) => setPosition({ ...position, x: v })}
|
||||||
|
min={0}
|
||||||
|
max={296}
|
||||||
|
step={1}
|
||||||
|
track={false}
|
||||||
|
color="secondary"
|
||||||
|
/>
|
||||||
|
<div className="settings">
|
||||||
|
<div>
|
||||||
|
<label>Rotate: </label>
|
||||||
|
<Slider
|
||||||
|
value={rotate}
|
||||||
|
onChange={(e, v) => setRotate(v)}
|
||||||
|
min={-10}
|
||||||
|
max={10}
|
||||||
|
step={1}
|
||||||
|
track={false}
|
||||||
|
color="secondary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label>
|
||||||
|
<nobr>Font size: </nobr>
|
||||||
|
</label>
|
||||||
|
<Slider
|
||||||
|
value={fontSize}
|
||||||
|
onChange={(e, v) => setFontSize(v)}
|
||||||
|
min={10}
|
||||||
|
max={100}
|
||||||
|
step={1}
|
||||||
|
track={false}
|
||||||
|
color="secondary"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text">
|
||||||
|
<TextField
|
||||||
|
label="Text"
|
||||||
|
size="small"
|
||||||
|
color="secondary"
|
||||||
|
value={text}
|
||||||
|
fullWidth
|
||||||
|
onChange={(e) => setText(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="picker">
|
||||||
|
<Picker setCharacter={setCharacter} />
|
||||||
|
<Button color="secondary" onClick={download}>
|
||||||
|
download
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="footer">
|
||||||
|
<a href="https://github.com/theoriginalayaka/sekai-stickers">
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
913
src/characters.json
Normal file
@@ -0,0 +1,913 @@
|
|||||||
|
[
|
||||||
|
{
|
||||||
|
"id": "3",
|
||||||
|
"name": "Airi 01",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_01.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "keep up",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "4",
|
||||||
|
"name": "Airi 02",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_02.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "nice to meet ya",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": 0,
|
||||||
|
"s": 28
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "5",
|
||||||
|
"name": "Airi 03",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_03.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "keep at it!",
|
||||||
|
"x": 140,
|
||||||
|
"y": 79,
|
||||||
|
"r": 2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "6",
|
||||||
|
"name": "Airi 04",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_04.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "8",
|
||||||
|
"name": "Airi 06",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_06.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "9",
|
||||||
|
"name": "Airi 07",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_07.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "10",
|
||||||
|
"name": "Airi 08",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_08.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "11",
|
||||||
|
"name": "Airi 09",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_09.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "13",
|
||||||
|
"name": "Airi 11",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_11.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "14",
|
||||||
|
"name": "Airi 12",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_12.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "15",
|
||||||
|
"name": "Airi 13",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_13.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "16",
|
||||||
|
"name": "Airi 14",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_14.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "18",
|
||||||
|
"name": "Airi 16",
|
||||||
|
"character": "airi",
|
||||||
|
"img": "airi/Airi_16.png",
|
||||||
|
"color": "#FB8AAC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "19",
|
||||||
|
"name": "Akito 01",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_01.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "20",
|
||||||
|
"name": "Akito 02",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_02.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "21",
|
||||||
|
"name": "Akito 03",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_03.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "22",
|
||||||
|
"name": "Akito 04",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_04.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "24",
|
||||||
|
"name": "Akito 06",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_06.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "25",
|
||||||
|
"name": "Akito 07",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_07.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "26",
|
||||||
|
"name": "Akito 08",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_08.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "27",
|
||||||
|
"name": "Akito 09",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_09.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "29",
|
||||||
|
"name": "Akito 11",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_11.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "30",
|
||||||
|
"name": "Akito 12",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_12.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "31",
|
||||||
|
"name": "Akito 13",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_13.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "32",
|
||||||
|
"name": "Akito 14",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_14.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "33",
|
||||||
|
"name": "Akito 16",
|
||||||
|
"character": "akito",
|
||||||
|
"img": "akito/Akito_16.png",
|
||||||
|
"color": "#FF7722",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "34",
|
||||||
|
"name": "An 01",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_01.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "35",
|
||||||
|
"name": "An 02",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_02.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "36",
|
||||||
|
"name": "An 03",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_03.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "37",
|
||||||
|
"name": "An 04",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_04.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "39",
|
||||||
|
"name": "An 06",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_06.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "40",
|
||||||
|
"name": "An 07",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_07.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "41",
|
||||||
|
"name": "An 08",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_08.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "42",
|
||||||
|
"name": "An 09",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_09.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "44",
|
||||||
|
"name": "An 11",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_11.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "45",
|
||||||
|
"name": "An 12",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_12.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "46",
|
||||||
|
"name": "An 13",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_13.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "47",
|
||||||
|
"name": "An 14",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_14.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "49",
|
||||||
|
"name": "An 16",
|
||||||
|
"character": "an",
|
||||||
|
"img": "an/An_16.png",
|
||||||
|
"color": "#00BADC",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "50",
|
||||||
|
"name": "Emu 01",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_01.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "51",
|
||||||
|
"name": "Emu 02",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_02.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "52",
|
||||||
|
"name": "Emu 03",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_03.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "53",
|
||||||
|
"name": "Emu 04",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_04.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "55",
|
||||||
|
"name": "Emu 06",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_06.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "56",
|
||||||
|
"name": "Emu 07",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_07.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "57",
|
||||||
|
"name": "Emu 08",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_08.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "58",
|
||||||
|
"name": "Emu 09",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_09.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "60",
|
||||||
|
"name": "Emu 11",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_11.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "61",
|
||||||
|
"name": "Emu 12",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_12.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "62",
|
||||||
|
"name": "Emu 13",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_13.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "Wonderhoy!",
|
||||||
|
"x": 148,
|
||||||
|
"y": 70,
|
||||||
|
"r": -2,
|
||||||
|
"s": 38
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "63",
|
||||||
|
"name": "Emu 14",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_14.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "65",
|
||||||
|
"name": "Emu 16",
|
||||||
|
"character": "emu",
|
||||||
|
"img": "emu/Emu_16.png",
|
||||||
|
"color": "#FF66BB",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "66",
|
||||||
|
"name": "Ena 01",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_01.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "67",
|
||||||
|
"name": "Ena 02",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_02.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "68",
|
||||||
|
"name": "Ena 03",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_03.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "69",
|
||||||
|
"name": "Ena 04",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_04.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "71",
|
||||||
|
"name": "Ena 06",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_06.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "72",
|
||||||
|
"name": "Ena 07",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_07.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "73",
|
||||||
|
"name": "Ena 08",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_08.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "74",
|
||||||
|
"name": "Ena 09",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_09.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "76",
|
||||||
|
"name": "Ena 11",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_11.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "77",
|
||||||
|
"name": "Ena 12",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_12.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "78",
|
||||||
|
"name": "Ena 13",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_13.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "79",
|
||||||
|
"name": "Ena 14",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_14.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "81",
|
||||||
|
"name": "Ena 16",
|
||||||
|
"character": "ena",
|
||||||
|
"img": "ena/Ena_16.png",
|
||||||
|
"color": "#B18F6C",
|
||||||
|
"defaultText": {
|
||||||
|
"text": "something",
|
||||||
|
"x": 148,
|
||||||
|
"y": 58,
|
||||||
|
"r": -2,
|
||||||
|
"s": 47
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
]
|
||||||
21
src/components/Canvas.jsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
import { useRef, useEffect } from 'react'
|
||||||
|
import "../index.css"
|
||||||
|
|
||||||
|
const Canvas = props => {
|
||||||
|
|
||||||
|
const { draw, ...rest } = props
|
||||||
|
const canvasRef = useRef(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
const canvas = canvasRef.current
|
||||||
|
const context = canvas.getContext('2d')
|
||||||
|
|
||||||
|
draw(context)
|
||||||
|
|
||||||
|
}, [draw])
|
||||||
|
|
||||||
|
return <canvas ref={canvasRef} {...rest}/>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Canvas
|
||||||
72
src/components/Picker.jsx
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import ImageList from "@mui/material/ImageList";
|
||||||
|
import ImageListItem from "@mui/material/ImageListItem";
|
||||||
|
import Popover from "@mui/material/Popover";
|
||||||
|
import Button from "@mui/material/Button";
|
||||||
|
import { useState } from "react";
|
||||||
|
import characters from "../characters.json";
|
||||||
|
|
||||||
|
export default function Picker({ setCharacter }) {
|
||||||
|
const [anchorEl, setAnchorEl] = useState(null);
|
||||||
|
|
||||||
|
const handleClick = (event) => {
|
||||||
|
setAnchorEl(event.currentTarget);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setAnchorEl(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const open = Boolean(anchorEl);
|
||||||
|
const id = open ? "picker" : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
aria-describedby={id}
|
||||||
|
variant="contained"
|
||||||
|
color="secondary"
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
Pick character
|
||||||
|
</Button>
|
||||||
|
<Popover
|
||||||
|
id={id}
|
||||||
|
open={open}
|
||||||
|
anchorEl={anchorEl}
|
||||||
|
onClose={handleClose}
|
||||||
|
anchorOrigin={{
|
||||||
|
vertical: "bottom",
|
||||||
|
horizontal: "left",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ImageList sx={{ width: 500, height: 450 }} cols={4} rowHeight={120}>
|
||||||
|
{characters.map((c, index) => (
|
||||||
|
<ImageListItem
|
||||||
|
key={index}
|
||||||
|
onClick={() => {
|
||||||
|
handleClose();
|
||||||
|
setCharacter(index);
|
||||||
|
}}
|
||||||
|
sx={{
|
||||||
|
cursor: "pointer",
|
||||||
|
"&:hover": {
|
||||||
|
opacity: 0.5,
|
||||||
|
},
|
||||||
|
"&:active": {
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={`/img/${c.img}`}
|
||||||
|
srcSet={`/img/${c.img}`}
|
||||||
|
alt={c.name}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
</ImageListItem>
|
||||||
|
))}
|
||||||
|
</ImageList>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
BIN
src/fonts/YurukaStd.woff2
Normal file
10
src/index.css
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: rgb(87, 73, 91);
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'YurukaStd';
|
||||||
|
src: local('YurukaStd'), url(./fonts/YurukaStd.woff2) format('woff2');
|
||||||
|
}
|
||||||
22
src/index.jsx
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
import React from "react";
|
||||||
|
import ReactDOM from "react-dom/client";
|
||||||
|
import "./index.css";
|
||||||
|
import App from "./App";
|
||||||
|
import { ThemeProvider, createTheme } from "@mui/material/styles";
|
||||||
|
import CssBaseline from "@mui/material/CssBaseline";
|
||||||
|
|
||||||
|
const darkTheme = createTheme({
|
||||||
|
palette: {
|
||||||
|
mode: "dark",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<ThemeProvider theme={darkTheme}>
|
||||||
|
<CssBaseline />
|
||||||
|
<App />
|
||||||
|
</ThemeProvider>
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||