Skip to content

Commit b101043

Browse files
DressUp.layers is now an array + prettier
1 parent 6329a20 commit b101043

File tree

11 files changed

+304
-192
lines changed

11 files changed

+304
-192
lines changed

.editorconfig

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 4
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
eslint.config.mjs

.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
readme.md
2+
LICENSE

.prettierrc.yaml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
singleQuote: false
2+
semi: true
3+
printWidth: 150
4+
trailingComma: none

configure.js

Lines changed: 60 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,46 @@
11
// -- Lil'Dress Up -- //
22
//// Configuration ////
33

4-
let dressup_display = document.getElementById("canvases"); // The <div> for your canvases.
5-
let dressup_options = document.getElementById("options"); // The <div> for your options.
6-
let dressup_download = document.getElementById("download_b"); // The <a> that will download the final image.
4+
/** The div for your canvases. */
5+
let dressup_display = document.getElementById("canvases");
6+
/** The form for your options. */
7+
let dressup_options = document.getElementById("options");
8+
/** The anchor that will download the final image. */
9+
let dressup_download = document.getElementById("download_b");
10+
/**
11+
* @property {HTMLCanvasElement} canvas - The canvas that displays the final image.
12+
* @property {HTMLButtonElement} button - The button that calls DressUp.finalize().
13+
*/
714
let dressup_final = {
8-
canvas: document.getElementById("final_dress"), // The <canvas> that displays the final image.
9-
button: document.getElementById("finish_b") // The <button> that calls DressUp.finalize().
15+
canvas: document.getElementById("final_dress"),
16+
button: document.getElementById("finish_b")
1017
};
18+
/**
19+
* @property {number} width - Width of canvas in pixels.
20+
* @property {number} height - Height of canvas in pixels.
21+
*/
1122
let dressup_size = {
12-
width: "500",
13-
height: "500"
14-
}
23+
width: 500,
24+
height: 500
25+
};
1526

16-
// The diplay order of options.
17-
// These should exactly match the label of the corresponding layer.
18-
let options_order = [
19-
"Hair",
20-
"Tail",
21-
"Necklaces",
22-
"Accessories",
23-
"Background"
24-
]
27+
/**
28+
* The diplay order of options.
29+
* These should exactly match the label of the corresponding layer.
30+
*/
31+
let options_order = ["Hair", "Tail", "Necklaces", "Accessories", "Background"];
2532

26-
// Location of image folder.
27-
let dressup_location = "./images/"
33+
/** Location of image folder. */
34+
let dressup_location = "./images/";
2835

29-
// The bulk of the game's information.
30-
// This defines the different layers and their attributes.
31-
let layers = {
32-
background: {
36+
/**
37+
* The bulk of the game's information.
38+
* This defines the different layers and their attributes.
39+
* The order here MATTERS! It's back to front!
40+
* @type {Layer[]} */
41+
let layers = [
42+
{
43+
name: "background",
3344
permanent: false,
3445
label: "Background",
3546
images: [
@@ -42,72 +53,50 @@ let layers = {
4253
"backgrounds/bg_06.png"
4354
]
4455
},
45-
tail: {
56+
{
57+
name: "tail",
4658
permanent: false,
4759
label: "Tail",
48-
images: [
49-
"null.png",
50-
"tails/tail_01.png",
51-
"tails/tail_02.png",
52-
"tails/tail_03.png"
53-
]
60+
images: ["null.png", "tails/tail_01.png", "tails/tail_02.png", "tails/tail_03.png"]
5461
},
55-
hair_bottom: {
62+
{
63+
name: "hair_bottom",
5664
permanent: false,
57-
images: [
58-
"null.png",
59-
"hairs/hair_01_back.png",
60-
"hairs/hair_02_back.png",
61-
"hairs/hair_03_back.png"
62-
]
65+
// This layer is being linked to hair_top, therefore it shouldn't have a label.
66+
images: ["null.png", "hairs/hair_01_back.png", "hairs/hair_02_back.png", "hairs/hair_03_back.png"]
6367
},
64-
body: {
68+
{
69+
name: "body",
6570
permanent: true,
66-
images: [
67-
"permanents/body.png"
68-
]
71+
images: ["permanents/body.png"]
6972
},
70-
accessories: {
73+
{
74+
name: "accessories",
7175
permanent: false,
7276
label: "Accessories",
73-
images: [
74-
"null.png",
75-
"accessories/acc_01.png",
76-
"accessories/acc_02.png"
77-
]
77+
images: ["null.png", "accessories/acc_01.png", "accessories/acc_02.png"]
7878
},
79-
necklaces: {
79+
{
80+
name: "necklaces",
8081
permanent: false,
8182
label: "Necklaces",
82-
images: [
83-
"null.png",
84-
"necklaces/necklace_01.png",
85-
"necklaces/necklace_02.png",
86-
"necklaces/necklace_03.png"
87-
]
83+
images: ["null.png", "necklaces/necklace_01.png", "necklaces/necklace_02.png", "necklaces/necklace_03.png"]
8884
},
89-
hair_top: {
85+
{
86+
name: "hair_top",
9087
permanent: false,
9188
label: "Hair",
92-
linked: [
93-
"hair_bottom"
94-
],
95-
images: [
96-
"null.png",
97-
"hairs/hair_01_front.png",
98-
"hairs/hair_02_front.png",
99-
"hairs/hair_03_front.png"
100-
]
89+
linked: ["hair_bottom"],
90+
images: ["null.png", "hairs/hair_01_front.png", "hairs/hair_02_front.png", "hairs/hair_03_front.png"]
10191
},
102-
watermark: {
92+
{
93+
name: "watermark",
10394
permanent: true,
104-
images: [
105-
"permanents/watermark.png"
106-
]
107-
},
108-
}
95+
images: ["permanents/watermark.png"]
96+
}
97+
];
10998

110-
// Creating and loading the game :)
99+
/** The game :) */
111100
let the_game = new DressUp(layers, dressup_size, dressup_display, dressup_options, dressup_download, dressup_final, options_order, dressup_location);
112101

113102
loadDressUp(the_game);

index.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<link rel="stylesheet" href="style.css">
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
77
<title>Lil'Dress Up</title>
88
</head>
99
<body>
10-
1110
<main>
1211
<section id="loading">
1312
<noscript>You need to enable JavaScript to run this app.</noscript>

0 commit comments

Comments
 (0)