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+ */
714let 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+ */
1122let 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 :) */
111100let the_game = new DressUp ( layers , dressup_size , dressup_display , dressup_options , dressup_download , dressup_final , options_order , dressup_location ) ;
112101
113102loadDressUp ( the_game ) ;
0 commit comments