Skip to content

Commit 910ddd4

Browse files
everlosteeverloste
authored
Merge pull request #1
Merge main and temp branch
2 parents e69969b + e42dbd3 commit 910ddd4

File tree

3 files changed

+179
-11
lines changed

3 files changed

+179
-11
lines changed

‎index.html‎

Lines changed: 75 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,88 @@
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<meta http-equiv="X-Clacks-Overhead" content="GNU Terry Pratchett" />
7-
8-
<title>Datapack Toolkit</title>
97
<meta name="description" content="datapack toolkit :3" />
8+
<link rel="stylesheet" href="style.css">
9+
<title>Datapack Toolkit Web</title>
1010
</head>
1111

1212
<body>
13-
<input type="file" id="input" accept=".zip,.jar" multiple />
13+
<h2>Datapack Toolkit Web (in development)</h2>
14+
<div class="edit_area">
15+
16+
<p>Select a datapack file...</p>
17+
<input type="file" id="input" accept=".zip,.jar" multiple />
18+
19+
<div class="work_area">
20+
<div id="datapack-display"></div>
21+
22+
<template id="datapack-template">
23+
<div class="datapack">
24+
<img class="datapack-icon" height="100px"/>
25+
<div class="datapack-name-and-description">
26+
<h3 class="datapack-name"></h3>
27+
<p class="datapack-description"></p>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<div class="config-screen">
33+
<p>
34+
No config loaded
35+
</p>
36+
37+
<div class="widget text-widget">
38+
<p class="widget-text">
39+
A text widget...
40+
</p>
41+
</div>
42+
43+
<div class="widget title-widget">
44+
<h3 class="widget-text">
45+
A heading widget...
46+
</h3>
47+
</div>
1448

15-
<div id="datapack-display"></div>
49+
<div class="widget image-widget">
50+
<p>⚠ Image widgets are not supported</p>
51+
</div>
1652

17-
<template id="datapack-template">
18-
<div class="datapack">
19-
<h2 class="datapack-name"></h2>
20-
<p class="datapack-description"></p>
21-
<img class="datapack-icon" />
53+
<div class="widget slider-widget">
54+
<p class="widget-text">
55+
A slider
56+
</p>
57+
<input type="range" min="1" max="100" value="50" class="widget-input widget-range-input" id="myRange">
58+
</div>
59+
60+
<div class="widget switch-widget">
61+
<p class="widget-text">
62+
A switch
63+
</p>
64+
<input type="checkbox" class="widget-input widget-switch-input">
65+
</div>
66+
67+
<div class="widget number-widget">
68+
<p class="widget-text">
69+
A number box
70+
</p>
71+
<input type="number" class="widget-input widget-number-input">
72+
</div>
73+
74+
</div>
75+
76+
<script type="module" src="/src/main.ts"></script>
2277
</div>
23-
</template>
2478

25-
<script type="module" src="/src/main.ts"></script>
79+
80+
</div>
81+
2682
</body>
83+
<footer>
84+
<p>
85+
Developed by Autumn and Bee
86+
∗ Read the <a href="https://github.com/autumn-mck/dptoolkit-web">source code</a>
87+
∗ Report issues <a href="https://github.com/autumn-mck/dptoolkit-web/issues">here</a>
88+
∗ Join the <a href="https://everloste.github.io/discord">Discord server</a> for other things
89+
</p>
90+
</footer>
2791
</html>

‎src/main.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@ async function onFileUploaded(e: Event) {
1313
const acceptedTypes = ["application/zip", "application/java-archive", "application/x-zip-compressed"];
1414
console.log("Files detected: "); console.log(fileList);
1515
const zipFiles = Array.from(fileList).filter((file) => acceptedTypes.includes(file.type));
16+
if (zipFiles.length == 0) {
17+
window.alert("Couldn't load datapack archive, archive may not be a datapack.");
18+
}
1619
const datapacks = await Promise.all(zipFiles.map(loadDatapack));
1720
const validDatapacks = datapacks.filter((dp) => dp instanceof Object);
1821
console.timeEnd("loadDatapacks");

‎style.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
2+
3+
html {
4+
font-family: "Inter", sans-serif;
5+
color: whitesmoke;
6+
background-color: #11111b;
7+
}
8+
9+
a:link {
10+
color: #cba6f7;
11+
}
12+
a:visited {
13+
color: #dec7fa;
14+
}
15+
16+
.edit_area {
17+
background-color: #181825;
18+
padding: 1em;
19+
}
20+
.work_area {
21+
margin-top: 1em;
22+
display: flex;
23+
align-items: stretch;
24+
}
25+
#datapack-display {
26+
background-color: #1e1e2e;
27+
border: 2px;
28+
border-color: #11111b;
29+
border-style: solid;
30+
31+
min-width: 25%;
32+
33+
padding: 1em;
34+
margin-right: 1em;
35+
}
36+
.datapack {
37+
display: flex;
38+
align-items: center;
39+
justify-content: left;
40+
justify-items: auto;
41+
}
42+
.datapack + .datapack {
43+
margin-top: 1em;
44+
}
45+
.datapack-name-and-description {
46+
padding-left: 1em;
47+
align-items: stretch;
48+
align-content: center;
49+
justify-content: center;
50+
}
51+
.datapack-icon {
52+
border-radius: 0.5em;
53+
}
54+
.datapack-description {
55+
color: rgb(214, 214, 214);
56+
margin-top: 0.5em;
57+
}
58+
.datapack-name {
59+
margin-bottom: 0.5em;
60+
}
61+
.config-screen {
62+
background-color: #1e1e2e;
63+
border: 2px;
64+
border-color: #11111b;
65+
border-style: solid;
66+
67+
width: 100%;
68+
padding: 1em;
69+
}
70+
71+
/* CONFIG WIDGETS AND STUFF */
72+
.widget {
73+
border: 1px;
74+
border-color: #11111b;
75+
border-style: solid;
76+
77+
display: flex;
78+
justify-content: space-between;
79+
justify-items: stretch;
80+
81+
padding-left: 1em;
82+
padding-right: 1em;
83+
84+
accent-color: #cba6f7;
85+
}
86+
.widget + .widget {
87+
margin-top: 0.5em;
88+
}
89+
.widget-text {
90+
min-width: 25%;
91+
}
92+
.widget-input {
93+
min-width: 25%;
94+
}
95+
.widget-number-input {
96+
background-color: #181825;
97+
border-color: #11111b;
98+
border: 1px;
99+
color: inherit;
100+
font-family: inherit;
101+
}

0 commit comments

Comments
 (0)