-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
165 lines (137 loc) · 10 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>IdentityV-第五人格- スキルタイマー</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
var init = [],
countTimer = [],
activeCounter = [];
$(".skillarea").each(function(i){
init[i] = $(".countdownArea",this).data("num");
});
$(".skillarea").click(function(){
skilltimer($(".skillarea").index($(this)));
});
$(window).keydown(function(e){
var i = 0;
switch(e.keyCode){
case 97:
case 49:
i = 0;
break;
case 98:
case 50:
i = 1;
break;
case 99:
case 51:
i = 2;
break;
default:
i=100;
}
skilltimer(i);
});
function skilltimer(i){
var _self = $(".countdownArea").eq(i);
if($(".skillarea").eq(i).hasClass("active")){
counterClear(i);
}else{
countTimer[i] = setInterval(function(){
var next = _self.text() - 1;
_self.text(next);
if(next <= 0) counterClear(i);
},1000);
$(".skillarea").eq(i).addClass("active");
}
// $(".skillarea").eq(i).toggleClass("active");
}
function counterClear(i){
clearInterval(countTimer[i]);
$(".countdownArea").eq(i).text(init[i]);
$(".skillarea").eq(i).removeClass('active');
}
});
</script>
</head>
<body>
<header>
<h1>IdentityV Skill Timer</h1>
<a href="https://twitter.com/nopi_games" target="_blank">
<svg class="twitter" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 350 300">
<defs>
<style>
.fill {fill: #55acee;}
</style>
</defs>
<path class="fill" d="M350.001,35.509 C346.026,42.167 340.649,49.197 333.870,56.595 C328.493,62.513 321.944,68.556 314.231,74.720 C314.231,74.720 314.231,76.940 314.231,76.940 C314.231,76.940 314.231,79.530 314.231,79.530 C314.231,80.762 314.346,81.626 314.579,82.119 C314.579,82.119 314.579,84.708 314.579,84.708 C314.579,110.109 310.022,135.572 300.903,161.097 C291.785,186.620 278.809,209.494 261.975,229.715 C243.971,251.417 222.113,268.556 196.394,281.134 C170.674,293.711 141.917,299.999 110.122,299.999 C89.546,299.999 70.142,297.041 51.904,291.122 C33.201,285.202 15.899,276.818 -0.001,265.967 C0.936,266.214 2.337,266.338 4.208,266.338 C7.948,266.831 10.755,267.077 12.626,267.077 C12.626,267.077 17.183,267.077 17.183,267.077 C33.550,267.077 49.567,264.242 65.231,258.569 C79.727,253.144 93.403,245.253 106.263,234.895 C91.300,234.649 77.387,229.469 64.531,219.357 C51.904,209.494 43.486,197.040 39.279,181.997 C42.786,182.737 45.007,183.105 45.943,183.105 C45.943,183.105 49.447,183.105 49.447,183.105 C50.151,183.352 51.202,183.476 52.605,183.476 C54.708,183.476 56.346,183.352 57.516,183.105 C59.853,183.105 63.128,182.612 67.335,181.626 C67.801,181.626 68.505,181.502 69.439,181.256 C70.376,181.009 71.075,180.887 71.542,180.887 C54.941,177.434 41.265,168.679 30.509,154.622 C19.520,140.565 14.029,124.536 14.029,106.534 C14.029,106.534 14.029,106.163 14.029,106.163 C14.029,106.163 14.029,105.794 14.029,105.794 C14.029,105.794 14.029,105.424 14.029,105.424 C18.471,108.383 23.615,110.603 29.460,112.082 C35.538,114.054 41.265,115.042 46.644,115.042 C36.354,107.644 28.640,98.642 23.497,88.038 C17.651,77.187 14.729,65.102 14.729,51.786 C14.729,44.388 15.546,37.729 17.183,31.810 C18.120,27.617 20.457,21.576 24.198,13.685 C42.435,37.358 64.177,55.854 89.429,69.172 C115.382,83.475 142.969,91.366 172.195,92.847 C171.494,87.667 171.145,84.832 171.145,84.339 C170.674,80.886 170.441,78.051 170.441,75.830 C170.441,54.868 177.456,36.989 191.483,22.193 C205.512,7.396 222.462,-0.002 242.337,-0.002 C252.623,-0.002 262.325,2.094 271.444,6.286 C280.562,10.971 288.394,16.891 294.942,24.042 C302.423,22.315 310.372,19.850 318.788,16.644 C325.803,13.931 333.051,10.232 340.532,5.547 C337.729,14.424 333.634,22.439 328.260,29.591 C322.179,36.989 315.751,42.907 308.969,47.347 C315.984,46.113 322.999,44.634 330.010,42.907 C335.388,41.428 342.052,38.961 350.001,35.509 Z"/>
</svg>
</a>
</header>
<div id="container">
<div class="skillarea">
引き留める
<div class="skillCount1 countdownArea" data-num="120">120</div>
<svg
class="skillicon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 66 57">
<path fill-rule="evenodd"
d="M44.000,39.000 C42.000,45.667 38.000,52.000 38.000,52.000 C38.000,52.000 26.333,35.667 14.000,32.000 C4.333,25.333 0.000,21.000 0.000,21.000 C0.000,21.000 3.333,-2.333 16.000,1.000 C26.333,3.000 27.000,13.000 27.000,13.000 L43.000,25.000 C43.000,25.000 39.333,36.000 44.000,39.000 ZM16.000,9.000 C12.250,15.857 18.762,15.932 21.000,15.000 C24.429,13.571 21.938,5.500 16.000,9.000 Z"/>
<path fill-rule="evenodd"
d="M45.000,26.000 L66.000,43.000 L64.000,52.000 C64.000,52.000 56.000,55.000 53.000,46.000 C49.000,42.333 43.000,36.000 43.000,36.000 C43.000,36.000 41.667,32.667 45.000,26.000 Z"/>
<path fill-rule="evenodd"
d="M64.000,51.000 C64.000,51.000 60.167,53.000 59.000,53.000 C57.833,53.000 54.521,53.583 54.000,53.000 C53.402,52.331 47.167,40.833 43.000,40.000 C42.833,42.333 44.000,43.000 44.000,43.000 C44.000,43.000 54.167,58.000 59.000,56.000 C59.209,55.930 61.014,55.006 62.000,54.000 C63.373,52.598 64.000,51.000 64.000,51.000 Z"/>
</svg>
</div>
<div class="skillarea">
瞬間移動
<div class="skillCount2 countdownArea" data-num="100">100</div>
<svg class="skillicon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 58 58">
<path fill-rule="evenodd"
d="M14.000,16.000 C14.000,16.000 9.500,20.833 6.000,13.000 C2.500,5.167 11.833,5.833 13.000,8.000 C14.167,10.167 15.000,12.000 15.000,12.000 C15.000,12.000 20.667,11.667 27.000,15.000 C29.500,18.333 27.000,18.000 27.000,18.000 L24.000,18.000 C24.000,18.000 26.000,27.000 27.000,29.000 C28.000,31.000 27.667,32.500 27.000,34.000 C31.000,34.833 31.000,37.000 31.000,37.000 L30.000,42.000 C30.000,42.000 25.333,42.167 23.000,34.000 C20.500,37.667 15.000,39.000 15.000,39.000 C15.000,39.000 12.833,49.167 12.000,51.000 C11.167,52.833 9.167,56.500 8.000,58.000 C5.500,57.000 1.000,53.000 1.000,53.000 L6.000,53.000 C6.000,53.000 7.500,36.333 10.000,35.000 C12.000,32.333 18.000,31.000 18.000,31.000 L14.000,26.000 L9.000,32.000 L-0.000,24.000 C-0.000,24.000 -0.167,21.667 1.000,21.000 C2.167,20.333 3.000,23.000 3.000,23.000 L8.000,28.000 L14.000,16.000 Z"/>
<path fill-rule="evenodd"
d="M17.000,12.000 C17.000,12.000 18.667,-0.333 25.000,-0.000 C31.333,0.333 36.500,10.000 37.000,26.000 C37.500,42.000 35.500,51.667 29.000,52.000 C22.500,52.333 18.667,36.833 19.000,35.000 C19.333,33.167 21.000,36.000 21.000,36.000 C21.000,36.000 23.333,48.500 29.000,47.000 C34.667,45.500 33.000,29.500 33.000,25.000 C33.000,20.500 30.333,5.667 24.000,5.000 C18.000,5.333 19.000,14.000 19.000,14.000 L17.000,15.000 L17.000,12.000 Z"/>
<path fill-rule="evenodd"
d="M40.000,15.000 L39.000,25.000 L51.000,20.000 L54.000,20.000 C54.000,20.000 55.833,23.333 51.000,24.000 C49.833,26.000 51.000,26.000 51.000,26.000 C51.000,26.000 55.833,25.667 57.000,22.000 C57.833,18.333 58.333,5.167 52.000,6.000 C47.833,8.167 49.000,10.000 49.000,10.000 L51.000,11.000 C51.000,11.000 49.667,8.667 52.000,8.000 C53.530,7.563 54.558,10.636 54.944,13.415 C55.147,14.875 55.172,16.254 55.000,17.000 C52.500,18.500 51.000,17.000 51.000,17.000 L53.000,12.000 L45.000,16.000 L40.000,15.000 Z"/>
</svg>
</div>
<div class="skillarea">
神出鬼没
<div class="skillCount3 countdownArea" data-num="150">150</div>
<svg
class="skillicon"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 58 58">
<path fill-rule="evenodd"
d="M11.000,15.000 C11.000,15.000 7.000,11.600 10.000,8.000 C13.000,4.400 20.000,5.600 22.000,7.000 C27.200,7.000 32.000,9.000 32.000,9.000 L22.000,10.000 C22.000,10.000 18.400,12.800 22.000,13.000 C27.600,12.800 35.000,17.000 35.000,17.000 L28.000,18.000 L29.000,19.000 L45.000,24.000 L29.000,24.000 C29.000,24.000 37.000,31.200 37.000,34.000 C37.000,36.800 37.000,43.000 37.000,43.000 L51.000,60.000 L49.000,61.000 L27.000,39.000 L16.000,36.000 L21.000,45.000 C21.000,45.000 14.400,50.800 14.000,51.000 C13.600,51.200 12.000,50.000 12.000,50.000 L16.000,44.000 L5.000,28.000 L19.000,29.000 L4.000,17.000 L11.000,15.000 Z"/>
<path fill-rule="evenodd"
d="M50.532,42.555 C50.532,42.555 49.085,41.266 50.170,39.901 C51.255,38.535 53.787,38.991 54.511,39.521 C56.391,39.521 58.128,40.280 58.128,40.280 L54.511,40.659 C54.511,40.659 53.209,41.721 54.511,41.797 C56.536,41.721 59.213,43.314 59.213,43.314 L56.681,43.693 L57.043,44.072 L62.830,45.968 L57.043,45.968 C57.043,45.968 59.936,48.699 59.936,49.761 C59.936,50.823 59.936,53.174 59.936,53.174 L65.000,59.621 L64.277,60.000 L56.319,51.657 L52.340,50.519 L54.149,53.932 C54.149,53.932 51.762,56.132 51.617,56.208 C51.472,56.284 50.894,55.828 50.894,55.828 L52.340,53.553 L48.362,47.485 L53.426,47.865 L48.000,43.314 L50.532,42.555 Z"/>
<path fill-rule="evenodd"
d="M66.000,46.000 L39.000,-0.000 L39.000,7.000 L66.000,46.000 Z"/>
<path fill-rule="evenodd"
d="M56.000,65.000 L-0.000,57.000 L7.000,54.000 L56.000,65.000 Z"/>
</svg>
</div>
</div><!-- /#container -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123261014-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123261014-1');
</script>
</body>
</html>