Skip to content

Commit e8a9506

Browse files
execferaexecfera
committed
synchronize datafiles with main, th20 update
1 parent ecbc66e commit e8a9506

28 files changed

Lines changed: 17071 additions & 12691 deletions

‎.nojekyll‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1+

‎LICENSE.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
Copyright 2018 Frelia (@execfera)
2-
3-
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4-
5-
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6-
1+
Copyright 2018 Frelia (@execfera)
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6+
77
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 165 additions & 165 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,165 @@
1-
# charasort
2-
A web based character sorter. Allows users to run through a manual merge sort of their favorite
3-
characters from a set.
4-
5-
**Features**
6-
* Entirely client side, no backend server required.
7-
* Filtering out characters based on JSON based filters.
8-
* Shareable links of sorter results.
9-
* Versioning of sorter data - you may want to add characters and resources over time. Versioning keeps shareable links valid even if the base character data is changed.
10-
11-
The version in this repo is built for characters from the [Touhou Project](https://en.wikipedia.org/wiki/Touhou_Project)
12-
game series, but the sorter can be easily edited to create any custom sorter desired.
13-
14-
## Related Sorters
15-
Several others have created other sorters based on other concepts and series, see them [here](https://github.com/execfera/charasort/wiki)!
16-
17-
## Creating Your Own Sorter
18-
This is a list of things you need to change for your sorter, for each file.
19-
20-
* `index.html`
21-
* Sorter name: Change under `starting start button` and the `<title>` tags.
22-
* Starting banner images: 120px x 180px, under `left sort image` and `right sort image`.
23-
* OpenGraph tags: `og:site_name`, `og:description` and `og:image` will show up on embeds when linked to social media such as Facebook, Twitter and Discord.
24-
* Sorter info: Insert whatever you like under the `info` tag.
25-
* Website icon: Remember to get your own `favicon.ico`!
26-
27-
* `src/js/data.js`
28-
29-
Change `imageRoot` if you are not uploading your images to imgur.
30-
31-
* `src/js/data/YYYY-MM-DD.js`
32-
33-
Creating your own set of data is relatively simple. First, change the `dataSetVersion` date to the date when you are creating the dataset. Example: `dataSetVersion = 2018-02-20`. The actual filename does not matter, it is just for your own easy reference.
34-
35-
Further down, each file comprises of two sets of data: `characterData` and `options`.
36-
37-
`characterData` is an array of objects filled with character data. Its layout is as follows.
38-
39-
```
40-
{
41-
name: string,
42-
img: string,
43-
opts: {
44-
key1: boolean | string[],
45-
key2: boolean | string[],
46-
...
47-
}
48-
}
49-
```
50-
51-
Parameters:
52-
53-
* `name`: The name of the character to be displayed. **Required.**
54-
* `img`: An image filename of the character, in 120px x 180px, to be added to `imageRoot` in `data.js`. **Required.**
55-
* `opts`: An object of 'options' that will be used to filter out characters that will be used. Further explanation below. **Required.**
56-
57-
Example:
58-
59-
```
60-
{
61-
name: "Flandre Scarlet",
62-
img: "OhaDcnc.png",
63-
opts: {
64-
series: ["book", "EoSD", "StB"],
65-
stage: ["ex"],
66-
loli: true
67-
}
68-
}
69-
```
70-
71-
`options` is an array of objects that can take either two forms. The first form is a **Basic Filter**. The Basic Filter, when selected, removes any character that matches its criteria. Its layout is as follows.
72-
73-
```
74-
{
75-
name: string,
76-
key: string,
77-
tooltip?: string, // optional
78-
checked?: boolean, // optional
79-
}
80-
```
81-
82-
Parameters:
83-
84-
* `name`: The name of the option to be displayed. **Required.**
85-
* `key`: A shorthand reference, used to refer to it in the character data. **Required.**
86-
* `tooltip`: Some optional information that appears when you hover over the option. If not provided, defaults to the option's name.
87-
* `checked`: If set to `true`, this option will be checked when your sorter starts. If not provided, defaults to `false`.
88-
89-
Example:
90-
91-
```
92-
{
93-
name: 'Filter Lolis',
94-
key: 'loli',
95-
tooltip: 'Check this if you want to remove lolis from being listed.'
96-
checked: true,
97-
}
98-
```
99-
100-
In this example, checking this option would remove the example 'Flandre Scarlet' above from the list of sorted characters, since she has `loli` set to `true`. The `checked` option is true, so in this sorter, it would be enabled by default.
101-
102-
The second form is a **Nested Inclusion Filter**. The Nested Inclusion Filter has a few sub-options under it. When selected, any options under it that are *not* selected will be excluded from the sort. Its layout is similar to the Basic Filter, except with an extra `sub` part, which lists the sub-options.
103-
104-
```
105-
{
106-
name: string,
107-
key: string,
108-
tooltip?: string, // optional
109-
checked?: boolean, // optional
110-
sub: [
111-
{
112-
name: string,
113-
key: string,
114-
tooltip?: string, // optional
115-
checked?: boolean, // optional
116-
},
117-
{
118-
name: string,
119-
key: string,
120-
tooltip?: string, // optional
121-
checked?: boolean, // optional
122-
},
123-
...
124-
]
125-
}
126-
```
127-
128-
This option will be often the only one you may need, since it is easy to use it for filtering by series.
129-
130-
Example:
131-
132-
```
133-
{
134-
name: 'Filter by Series Appearance',
135-
key: 'series',
136-
tooltip: 'Check this if you want to filter out certain series.'
137-
checked: true,
138-
sub: [
139-
{ name: 'Books & CDs', key: 'book' },
140-
{ name: 'Embodiment of Scarlet Devil', key: 'EoSD' },
141-
{ name: 'Perfect Cherry Blossom', key: 'PCB' },
142-
]
143-
}
144-
```
145-
146-
In this case, this would create a "Filter by Series Appearance" option, with the three listed sub-options. "Flandre Scarlet" above has both `book` and `EoSD` under `series`, so unless you uncheck both "Books & CDs" and "Embodiment of Scarlet Devil", she would still appear in the sort.
147-
148-
## Updating Your Own Sorter
149-
150-
When you need to add more characters to your sorter, you must create a new data file with a new date, and include it in your `index.html` file under the `<script src="src/js/data.js"></script>` line, while keeping your previous data files also included.
151-
152-
The script will automatically get the latest version, but will retain the previous versions in case someone keeps a shareable link from one of the previous versions.
153-
154-
## Credits
155-
156-
* [html2canvas](https://github.com/niklasvh/html2canvas/) for image generation.
157-
* [seedrandom](https://github.com/davidbau/seedrandom) for PRNG used in character array shuffling.
158-
* [lz-string](https://github.com/pieroxy/lz-string) for shareable link compression.
159-
* [SpinKit](http://tobiasahlin.com/spinkit/) for loading animation.
160-
* [thsort](http://mainyan.sakura.ne.jp/thsort.html) for the original inspiration.
161-
162-
## Known Issues
163-
164-
* Does not work with CloudFlare's Rocket Loader.
165-
* Breaks on older versions of IE and mobile Safari, due to various incompatibilities.
1+
# charasort
2+
A web based character sorter. Allows users to run through a manual merge sort of their favorite
3+
characters from a set.
4+
5+
**Features**
6+
* Entirely client side, no backend server required.
7+
* Filtering out characters based on JSON based filters.
8+
* Shareable links of sorter results.
9+
* Versioning of sorter data - you may want to add characters and resources over time. Versioning keeps shareable links valid even if the base character data is changed.
10+
11+
The version in this repo is built for characters from the [Touhou Project](https://en.wikipedia.org/wiki/Touhou_Project)
12+
game series, but the sorter can be easily edited to create any custom sorter desired.
13+
14+
## Related Sorters
15+
Several others have created other sorters based on other concepts and series, see them [here](https://github.com/execfera/charasort/wiki)!
16+
17+
## Creating Your Own Sorter
18+
This is a list of things you need to change for your sorter, for each file.
19+
20+
* `index.html`
21+
* Sorter name: Change under `starting start button` and the `<title>` tags.
22+
* Starting banner images: 120px x 180px, under `left sort image` and `right sort image`.
23+
* OpenGraph tags: `og:site_name`, `og:description` and `og:image` will show up on embeds when linked to social media such as Facebook, Twitter and Discord.
24+
* Sorter info: Insert whatever you like under the `info` tag.
25+
* Website icon: Remember to get your own `favicon.ico`!
26+
27+
* `src/js/data.js`
28+
29+
Change `imageRoot` if you are not uploading your images to imgur.
30+
31+
* `src/js/data/YYYY-MM-DD.js`
32+
33+
Creating your own set of data is relatively simple. First, change the `dataSetVersion` date to the date when you are creating the dataset. Example: `dataSetVersion = 2018-02-20`. The actual filename does not matter, it is just for your own easy reference.
34+
35+
Further down, each file comprises of two sets of data: `characterData` and `options`.
36+
37+
`characterData` is an array of objects filled with character data. Its layout is as follows.
38+
39+
```
40+
{
41+
name: string,
42+
img: string,
43+
opts: {
44+
key1: boolean | string[],
45+
key2: boolean | string[],
46+
...
47+
}
48+
}
49+
```
50+
51+
Parameters:
52+
53+
* `name`: The name of the character to be displayed. **Required.**
54+
* `img`: An image filename of the character, in 120px x 180px, to be added to `imageRoot` in `data.js`. **Required.**
55+
* `opts`: An object of 'options' that will be used to filter out characters that will be used. Further explanation below. **Required.**
56+
57+
Example:
58+
59+
```
60+
{
61+
name: "Flandre Scarlet",
62+
img: "OhaDcnc.png",
63+
opts: {
64+
series: ["book", "EoSD", "StB"],
65+
stage: ["ex"],
66+
loli: true
67+
}
68+
}
69+
```
70+
71+
`options` is an array of objects that can take either two forms. The first form is a **Basic Filter**. The Basic Filter, when selected, removes any character that matches its criteria. Its layout is as follows.
72+
73+
```
74+
{
75+
name: string,
76+
key: string,
77+
tooltip?: string, // optional
78+
checked?: boolean, // optional
79+
}
80+
```
81+
82+
Parameters:
83+
84+
* `name`: The name of the option to be displayed. **Required.**
85+
* `key`: A shorthand reference, used to refer to it in the character data. **Required.**
86+
* `tooltip`: Some optional information that appears when you hover over the option. If not provided, defaults to the option's name.
87+
* `checked`: If set to `true`, this option will be checked when your sorter starts. If not provided, defaults to `false`.
88+
89+
Example:
90+
91+
```
92+
{
93+
name: 'Filter Lolis',
94+
key: 'loli',
95+
tooltip: 'Check this if you want to remove lolis from being listed.'
96+
checked: true,
97+
}
98+
```
99+
100+
In this example, checking this option would remove the example 'Flandre Scarlet' above from the list of sorted characters, since she has `loli` set to `true`. The `checked` option is true, so in this sorter, it would be enabled by default.
101+
102+
The second form is a **Nested Inclusion Filter**. The Nested Inclusion Filter has a few sub-options under it. When selected, any options under it that are *not* selected will be excluded from the sort. Its layout is similar to the Basic Filter, except with an extra `sub` part, which lists the sub-options.
103+
104+
```
105+
{
106+
name: string,
107+
key: string,
108+
tooltip?: string, // optional
109+
checked?: boolean, // optional
110+
sub: [
111+
{
112+
name: string,
113+
key: string,
114+
tooltip?: string, // optional
115+
checked?: boolean, // optional
116+
},
117+
{
118+
name: string,
119+
key: string,
120+
tooltip?: string, // optional
121+
checked?: boolean, // optional
122+
},
123+
...
124+
]
125+
}
126+
```
127+
128+
This option will be often the only one you may need, since it is easy to use it for filtering by series.
129+
130+
Example:
131+
132+
```
133+
{
134+
name: 'Filter by Series Appearance',
135+
key: 'series',
136+
tooltip: 'Check this if you want to filter out certain series.'
137+
checked: true,
138+
sub: [
139+
{ name: 'Books & CDs', key: 'book' },
140+
{ name: 'Embodiment of Scarlet Devil', key: 'EoSD' },
141+
{ name: 'Perfect Cherry Blossom', key: 'PCB' },
142+
]
143+
}
144+
```
145+
146+
In this case, this would create a "Filter by Series Appearance" option, with the three listed sub-options. "Flandre Scarlet" above has both `book` and `EoSD` under `series`, so unless you uncheck both "Books & CDs" and "Embodiment of Scarlet Devil", she would still appear in the sort.
147+
148+
## Updating Your Own Sorter
149+
150+
When you need to add more characters to your sorter, you must create a new data file with a new date, and include it in your `index.html` file under the `<script src="src/js/data.js"></script>` line, while keeping your previous data files also included.
151+
152+
The script will automatically get the latest version, but will retain the previous versions in case someone keeps a shareable link from one of the previous versions.
153+
154+
## Credits
155+
156+
* [html2canvas](https://github.com/niklasvh/html2canvas/) for image generation.
157+
* [seedrandom](https://github.com/davidbau/seedrandom) for PRNG used in character array shuffling.
158+
* [lz-string](https://github.com/pieroxy/lz-string) for shareable link compression.
159+
* [SpinKit](http://tobiasahlin.com/spinkit/) for loading animation.
160+
* [thsort](http://mainyan.sakura.ne.jp/thsort.html) for the original inspiration.
161+
162+
## Known Issues
163+
164+
* Does not work with CloudFlare's Rocket Loader.
165+
* Breaks on older versions of IE and mobile Safari, due to various incompatibilities.

0 commit comments

Comments
 (0)