-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
115 lines (106 loc) · 5.04 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
<!-- create html with input -->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Crusader King III Playset Generator</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css"
integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-clipboard@2.x.x/dist/alpine-clipboard.js" defer></script>
<script defer src="https://unpkg.com/alpinejs@3.9.0/dist/cdn.min.js"></script>
</head>
<body class="my-auto w-full">
<div class="container w-full md:max-w-3xl mx-auto flex flex-col min-h-screen my-2">
<a href="/CK3PlaysetGen" class="flex justify-center p-4 md:p-0">
<img class="object-cover object-top h-72 rounded w-full"
src="https://github.com/iniznet/CK3PlaysetGen/raw/master/src/img/ck3.jpg" alt="Crusader Kings 3 Cover">
</a>
<div x-data="{ value: '', url: '' }" class="flex-grow">
<div class="pt-0 pb-5 md:pt-10 md:pb-5 mx-4">
<form method="GET">
<div class="bg-white flex items-center rounded-lg shadow-md md:shadow-xl">
<input placeholder="Playset URL..." type="search" name="url"
class="rounded-l-full w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none"
autofocus
x-model="url">
<div class="p-2 md:px-4">
<button
class="rounded-full focus:outline-none w-10 h-12 md:w-10 md:h-12 flex items-center justify-center"
@click.prevent="generator(url)">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path xmlns="http://www.w3.org/2000/svg"
d="M460.54,169.58A222.6,222.6,0,1,0,478,256,221.16,221.16,0,0,0,460.54,169.58ZM256,448C150,448,64,362,64,256S150,64,256,64s192,86,192,192S362,448,256,448Zm28.06-307.33L399.39,256,284.06,371.33l-21.21-21.21L342,271H133.82V241H342l-79.12-79.12Z" />
</svg>
</button>
</div>
</div>
</form>
</div>
<div class="flex mt-4 flex-grow">
<textarea class="mx-4 bg-gray-100 rounded-br-lg w-full"
rows="6"
@click="$clipboard(value)" x-model="value"></textarea>
</div>
</div>
</div>
</body>
<script>
function generator(url) {
let data = document.querySelector('[x-data]')._x_dataStack[0];
// check if input is a url with regex
if ( !isValidURL( url ) && !data ) {
console.log('invalid url');
return;
}
const apiHost = 'https://cors.niznet.my.id/';
let playsetName = "Playset #" + Math.floor(Math.random() * 1000);
let json = {
"game": "ck3",
"name": playsetName,
"mods": []
}
fetch( apiHost + url, {
headers: {
'origin': window.location.protocol + '//' + window.location.host,
'x-requested-with': 'CK3PlaysetGen'
}
} )
.then( res => res.text() )
.then( text => {
let parser = new DOMParser();
let doc = parser.parseFromString(text, "text/html");
let i = 0;
doc.querySelectorAll('.collectionItem').forEach( (mod) => {
json.mods.push({
"displayName": mod.querySelector('.workshopItemTitle').innerText,
"enabled": true,
"position": i,
"steamId": mod.id.split('sharedfile_')[1]
});
i++;
});
})
.then( () => {
if (json.mods.length === 0) {
console.log('no mods found');
return;
}
data.value = JSON.stringify(json);
const a = document.createElement("a");
a.href = URL.createObjectURL(new Blob([JSON.stringify(json, null, 2)], {
type: "text/plain"
}));
a.setAttribute('download', playsetName + '.json');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
} )
}
// taken from https://stackoverflow.com/a/49849482/7234751
function isValidURL(string) {
var res = string.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g);
return (res !== null)
};
</script>
</html>