blob: 8a0de1311e06f0ca9ae5fa563900bde8f457929a (
plain) (
blame)
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
166
167
168
169
170
171
172
|
interface UserScript {
name: string;
url: string;
}
interface EamusementUserscriptModalProps {
isOpen: boolean;
onClose: () => void;
mainGameName: string;
userPage: string;
importPage: string;
scripts: UserScript[];
}
interface EamusementUserscriptCardProps {
mainGameName: string;
onClick: () => void;
}
export const EamusementUserscriptCard = ({ mainGameName, onClick }: EamusementUserscriptCardProps) => {
return (
<div className="bg-slate-800 rounded-lg border border-slate-700 p-6 hover:border-violet-500 transition-colors">
<div className="w-12 h-12 bg-blue-600/20 rounded-lg flex items-center justify-center mb-4">
<svg
className="w-6 h-6 text-blue-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</div>
<h4 className="text-white font-semibold mb-2">
{mainGameName} e-amusement Play History (Userscript)
</h4>
<p className="text-slate-400 text-sm mb-4">
Import via scraping your {mainGameName} playdata from KONAMI e-amusement
</p>
<button
onClick={onClick}
className="hover:cursor-pointer w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-3 sm:px-4 rounded-md text-sm sm:text-base font-medium transition-colors"
>
Export e-amusement
</button>
</div>
)
}
const EamusementUserscriptModal = ({
isOpen,
onClose,
mainGameName,
userPage,
importPage,
scripts,
}: EamusementUserscriptModalProps) => {
if (!isOpen) return null;
const handleClose = () => {
onClose();
};
if(mainGameName === undefined){
return "Sorry, due to some extreme error the game you're looking for doesn't seem to exist..."
}
return (
<div className="fixed inset-0 z-50 overflow-y-auto">
{/* Backdrop */}
<div
className="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
onClick={handleClose}
/>
{/* Modal */}
<div className="flex min-h-full items-center justify-center p-4">
<div className="relative bg-slate-900 rounded-lg border border-slate-700 w-full max-w-xl p-6 shadow-xl">
{/* Header */}
<div className="mb-6">
<h3 className="text-xl font-bold text-white mb-2">
Import {mainGameName} e-amusement Data
</h3>
<p className="text-slate-400 text-sm">
Follow the instructions below to import your data
</p>
</div>
{/* Warning */}
<div className="mb-6 rounded-md bg-blue-500/10 border border-blue-500/20 p-3">
<p className="text-sm text-blue-400">
You may or may need to be subscribed to{" "}
<a
className="font-bold hover:underline"
href="https://p.eagate.573.jp/payment/p/ex_select_course.html"
>
KONAMI's e-amusement Basic and/or Premium course
</a>{" "}
to view a exportable playdata history for certain games.
</p>
</div>
{/* Instructions */}
<div className="mb-4 rounded-md bg-slate-800 border border-slate-700 p-4">
<h4 className="text-sm font-semibold text-slate-300 mb-2">
Instructions:
</h4>
<ol className="text-sm text-slate-400 space-y-1 list-decimal list-inside">
<li>
Log into the{" "}
<a
className="font-bold hover:underline"
href={userPage}>
{mainGameName} e-amusement page
</a>
</li>
<li>
Navigate to the{" "}
<a
className="font-bold hover:underline"
href={importPage}>
{mainGameName} Play History Page
</a>{" "}
</li>
<li>
Install the relevant userscript (use a browser extension such as{" "}
<a
className="font-bold hover:underline"
href="https://www.tampermonkey.net/">Tampermonkey</a>)
</li>
{/* Additional Info */}
<div className="my-2 rounded-md bg-blue-500/10 border border-blue-500/20 p-3">
<p className="text-sm text-blue-400">
{scripts.map(userscript => (
<a
href={userscript.url}
className="font-bold underline"
>
{userscript.name}
</a>
))}
</p>
</div>
<li>
A button will appear on the page that you can click to start the scraping process.
</li>
<li>
Upload the resulting JSON file into Mirage using the
Batch-Manual Upload functionality
</li>
<li>Verify that all data has been imported correctly</li>
</ol>
</div>
{/* Actions */}
<div className="flex justify-center">
<button
onClick={handleClose}
className="px-6 py-2 bg-violet-600 hover:bg-violet-700 text-white rounded-md font-medium transition-colors"
>
Got it
</button>
</div>
</div>
</div>
</div>
);
};
export default EamusementUserscriptModal;
|
