A sorter site for Idolm@ster Characters
Site structure
+137
-37
+31
-33
index.html
+31
-33
index.html
···
1
1
<html>
2
2
3
3
<head>
4
-
<link rel="shortcut icon" href="yinyang.ico" type="image/x-icon">
5
-
<link rel="icon" href="yinyang.ico" type="image/x-icon">
4
+
<link rel="shortcut icon" href="src/yinyang.ico" type="image/x-icon">
5
+
<link rel="icon" href="src/yinyang.ico" type="image/x-icon">
6
6
<meta charset="utf-8">
7
-
<meta name="og:site_name" content="Touhou Character Sorting v2">
7
+
<meta name="og:site_name" content="Touhou Character Sorting">
8
8
<meta name="og:description" content="A simple website for sorting Touhou characters in a formatted list.">
9
-
<meta name="og:image" content="https://i.imgur.com/IZzJMk6.jpg"><title>Touhou Character Sorting</title>
9
+
<meta name="og:image" content="https://i.imgur.com/IZzJMk6.jpg">
10
+
<title>Touhou Character Sorting</title>
10
11
<!-- 4chan identifier tripcode: !FreliaEfl2 -->
11
12
<link rel="stylesheet" type="text/css" href="src/reset.css">
12
13
<link rel="stylesheet" type="text/css" href="src/styles.css">
14
+
<script src="src/main.js"></script>
13
15
</head>
14
16
15
17
<body>
16
18
<div class="container">
19
+
17
20
<div class="progress">
18
-
Battle No. XX
21
+
<span class="progressbattle"></span>
19
22
<div class="progressbar">
20
-
<div class="progressfill"><span class="progresstext">79%</span></div>
23
+
<div class="progressfill"><span class="progresstext"></span></div>
21
24
</div>
22
25
</div>
26
+
23
27
<div class="sorter">
24
28
<img src="src/defaultL.jpg" class="left sort image">
25
29
26
-
<div class="starting button">Click to Start!</div>
30
+
<div class="starting button">Touhou Project Character Sorter<br><br>Click to Start!</div>
27
31
<div class="starting button">Load Progress</div>
28
32
<div class="sorting button">Tie</div>
29
33
<div class="sorting button">Undo</div>
···
31
35
32
36
<img src="src/defaultR.jpg" class="right sort image">
33
37
34
-
<div class="left sort text"><p>Touhou Project</p></div>
35
-
<div class="right sort text"><p>Character Sorter</p></div>
38
+
<div class="left sort text"></div>
39
+
<div class="right sort text"></div>
36
40
</div>
37
-
<div class="sorteroptions">
38
-
<div class="large option">
39
-
<label><input type="checkbox"> Filter Option 1</label>
40
-
</div>
41
-
<div><label><input type="checkbox"> Touhou Game Option 1</label></div>
42
-
<div><label><input type="checkbox"> Touhou Game Option 2</label></div>
43
-
<div><label><input type="checkbox"> Touhou Game Option 3</label></div>
44
-
<div><label><input type="checkbox"> Touhou Game Option 4</label></div>
45
-
<div><label><input type="checkbox"> Touhou Game Option 5</label></div>
46
41
47
-
<hr>
42
+
<div class="options"></div>
43
+
<div class="result"></div>
48
44
49
-
<div class="large option">
50
-
<label><input type="checkbox"> Filter Option 2</label>
51
-
</div>
52
-
<div><label><input type="checkbox"> Stage 1</label></div>
53
-
<div><label><input type="checkbox"> Stage 2</label></div>
54
-
<div><label><input type="checkbox"> Stage 3</label></div>
55
-
<div><label><input type="checkbox"> Stage 4</label></div>
56
-
<div><label><input type="checkbox"> Stage 5</label></div>
57
-
<div><label><input type="checkbox"> Stage 6/Final Stage</label></div>
58
-
<div><label><input type="checkbox"> Extra/Phantasm Stage</label></div>
45
+
<div class="info">
46
+
<p><a href="https://relick.me/song/">Song Sorter</a> | <a href="mailto:fera@imouto.my">Contact</a>
47
+
48
+
<br><br>
59
49
60
-
<hr>
50
+
<p>Sorter for Touhou characters. Pick your sources, and hit the Start button.</p>
51
+
<p>Click on the character you like better from the two, or tie them if you like them equally or don't know them.</p>
52
+
<p>Depending on how many sources you pick, you'll get up to 700+ picks, so set aside a good few cups of tea for this.</p>
53
+
54
+
<br><br>
61
55
62
-
<div><label><input type="checkbox"> Filter Option 3</label></div>
63
-
<div><label><input type="checkbox"> Filter Option 4</label></div>
64
-
<div><label><input type="checkbox"> Filter Option 5</label></div>
56
+
<p>Inspired by <a href="http://mainyan.sakura.ne.jp/thsort.html">this site</a>. Thumbnail Art: <a href="http://www.tasofro.net/">alphes</a>, <a href="http://www.pixiv.net/member.php?id=743845">kaoru</a>, <a href="http://www.pixiv.net/member.php?id=4920496">dairi</a>. Splash Art: <a href="http://kahluamilk.la.coocan.jp/illust/2004/056_hyakkiyakou.jpg">toto nemigi</a>.</p>
57
+
58
+
<br><br>
59
+
60
+
<p>Month Xth, 2018 - Refactored site.</p>
61
+
<p>January 7th, 2018 - Added Antinomy of Common Flowers characters.</p>
62
+
<p>August 11th, 2017 - Added Hidden Star in Four Seasons full version characters.</p>
65
63
</div>
66
64
</div>
67
65
</body>
src/default.jpg
src/default.jpg
This is a binary file and will not be displayed.
+73
src/main.js
+73
src/main.js
···
1
+
const options = [
2
+
{
3
+
"name": "Include by Series Entry",
4
+
"tooltip": "",
5
+
"sub": [
6
+
{ "Books and CDs": "" },
7
+
{ "The Highly Responsive to Prayers": "01 - Reiiden" },
8
+
{ "The Story of Eastern Wonderland": "02 - Fuumaroku" },
9
+
{ "Phantasmagoria of Dim.Dream": "03 - Yumejikuu" },
10
+
{ "Lotus Land Story": "04 - Gensoukyou" },
11
+
{ "Mystic Square": "05 - Kaikidan" },
12
+
{ "Embodiment of Scarlet Devil": "06 - Koumakan" },
13
+
{ "Perfect Cherry Blossom": "07 - Youyoumu" },
14
+
{ "Imperishable Night": "08 - Eiyashou" },
15
+
{ "Immaterial and Missing Power": "07.5 - Suimusou" },
16
+
{ "Phantasmagoria of Flower View": "09 - Kaeidzuka" },
17
+
{ "Shoot the Bullet": "09.5 - Bunkachou" },
18
+
{ "Mountain of Faith": "10 - Fuujinroku" },
19
+
{ "Scarlet Weather Rhapsody": "10.5 - Hisouten" },
20
+
{ "Subterranean Animism": "11 - Chireiden" },
21
+
{ "Undefined Fantastic Object": "12 - Seirensen" },
22
+
{ "Touhou Hisoutensoku": "12.3 - Hisoutensoku" },
23
+
{ "Double Spoiler": "12.5 - Bunkachou" },
24
+
{ "Great Fairy Wars": "12.8 - Daisensou" },
25
+
{ "Ten Desires": "13 - Shinreibyou" },
26
+
{ "Hopeless Masquerade": "13.5 - Shinkirou" },
27
+
{ "Double Dealing Character": "14 - Kishinjou" },
28
+
{ "Impossible Spell Card": "14.3 - Amanojaku" },
29
+
{ "Urban Legend in Limbo": "14.5 - Shinpiroku" },
30
+
{ "Legacy of Lunatic Kingdom": "15 - Kanjuden" },
31
+
{ "Hidden Star in Four Seasons": "16 - Tenkuushou" },
32
+
{ "Antinomy of Common Flowers": "15.5 - Hyouibana" },
33
+
]
34
+
},
35
+
"-----",
36
+
{
37
+
"name": "Include by Stage Appearances",
38
+
"tooltip": "",
39
+
"sub": [
40
+
{ "Stage 1": "" },
41
+
{ "Stage 2": "" },
42
+
{ "Stage 3": "" },
43
+
{ "Stage 4": "" },
44
+
{ "Penultimate Stage": "Stage 4 in 5-stage games, Stage 5 in normal games, and Stage 8 in 9-stage games." },
45
+
{ "Final Stage": "" },
46
+
{ "Extra Stage": "Phantasm is included." }
47
+
]
48
+
},
49
+
"-----",
50
+
{ "Include PC-98 Duplicates": "PC-98 characters with a Windows counterpart will be included." },
51
+
{ "Include Non-Girls": "Certain non-female characters will be included." },
52
+
{ "Show Character Images": "" },
53
+
];
54
+
55
+
window.onload = init;
56
+
57
+
function init() {
58
+
const optionElem = document.querySelector('.options');
59
+
const optionInserted = (size, tooltip, name) => `<div class="${size} option"><label title="${tooltip}"><input type="checkbox" checked> ${name}</label></div>`;
60
+
61
+
options.forEach(opt => {
62
+
if(opt === '-----') {
63
+
optionElem.insertAdjacentHTML('beforeend', '<hr>');
64
+
} else if (Object.keys(opt).length > 1) {
65
+
optionElem.insertAdjacentHTML('beforeend', optionInserted('large', opt.tooltip, opt.name));
66
+
opt.sub.forEach(subopt => {
67
+
optionElem.insertAdjacentHTML('beforeend', optionInserted('small', Object.values(subopt)[0], Object.keys(subopt)[0]));
68
+
});
69
+
} else {
70
+
optionElem.insertAdjacentHTML('beforeend', optionInserted('small', Object.values(opt)[0], Object.keys(opt)[0]));
71
+
}
72
+
});
73
+
}
+33
-4
src/styles.css
+33
-4
src/styles.css
···
6
6
.container {
7
7
display: grid;
8
8
grid-row-gap: 1em;
9
+
margin-top: 1em;
9
10
}
10
11
11
12
.progress {
12
13
margin: 1em auto;
13
14
width: 500px;
15
+
display: none;
14
16
}
15
17
16
18
.progressbar {
···
19
21
border: 1px solid black;
20
22
padding: 3px;
21
23
margin: 2px 0px;
22
-
margin-bottom: 1em;
23
24
}
24
25
25
26
.progresstext {
···
44
45
width: 420px;
45
46
}
46
47
48
+
.sorter > * {
49
+
cursor: pointer;
50
+
}
51
+
47
52
.button {
48
53
border: 1px solid black;
49
54
text-align: center;
···
70
75
.sorter > .text {
71
76
width: 120px;
72
77
height: 60px;
78
+
display: none;
73
79
}
74
80
75
81
.sorter > .text > p {
···
90
96
border: 1px solid #000000;
91
97
}
92
98
93
-
.sorteroptions {
99
+
.options {
94
100
margin: 1em auto;
95
101
display: grid;
96
102
text-align: left;
···
99
105
width: 450px;
100
106
}
101
107
102
-
.sorteroptions > div {
108
+
.options > div {
103
109
font-size: 0.5625em;
104
110
}
105
111
···
107
113
cursor: pointer;
108
114
}
109
115
110
-
.sorteroptions > .large.option, .sorteroptions > hr {
116
+
.options > .large.option, .options > hr {
111
117
grid-column: span 3;
112
118
text-align: center;
113
119
width: 100%;
120
+
}
121
+
122
+
.info {
123
+
margin: 0px auto 3em;
124
+
display: block;
125
+
text-align: center;
126
+
font-size: 0.6875em;
127
+
width: 80%;
128
+
line-height: 1.2em;
129
+
}
130
+
131
+
a {
132
+
color: #990000;
133
+
font-weight: bold;
134
+
text-decoration: none;
135
+
}
136
+
137
+
a:hover {
138
+
color: #FF6600;
139
+
}
140
+
141
+
a:visited {
142
+
color: #6600FF;
114
143
}
src/yinyang.ico
src/yinyang.ico
This is a binary file and will not be displayed.