diff --git a/data/images/manaSymbols/0.png b/data/images/manaSymbols/0.png new file mode 100644 index 00000000..af88e794 Binary files /dev/null and b/data/images/manaSymbols/0.png differ diff --git a/data/images/manaSymbols/1.png b/data/images/manaSymbols/1.png new file mode 100644 index 00000000..82e78834 Binary files /dev/null and b/data/images/manaSymbols/1.png differ diff --git a/data/images/manaSymbols/10.png b/data/images/manaSymbols/10.png new file mode 100644 index 00000000..3e690aa2 Binary files /dev/null and b/data/images/manaSymbols/10.png differ diff --git a/data/images/manaSymbols/11.png b/data/images/manaSymbols/11.png new file mode 100644 index 00000000..8783c2bb Binary files /dev/null and b/data/images/manaSymbols/11.png differ diff --git a/data/images/manaSymbols/12.png b/data/images/manaSymbols/12.png new file mode 100644 index 00000000..74fc1965 Binary files /dev/null and b/data/images/manaSymbols/12.png differ diff --git a/data/images/manaSymbols/13.png b/data/images/manaSymbols/13.png new file mode 100644 index 00000000..6af5e76c Binary files /dev/null and b/data/images/manaSymbols/13.png differ diff --git a/data/images/manaSymbols/14.png b/data/images/manaSymbols/14.png new file mode 100644 index 00000000..778e71c6 Binary files /dev/null and b/data/images/manaSymbols/14.png differ diff --git a/data/images/manaSymbols/15.png b/data/images/manaSymbols/15.png new file mode 100644 index 00000000..0e2c368c Binary files /dev/null and b/data/images/manaSymbols/15.png differ diff --git a/data/images/manaSymbols/16.png b/data/images/manaSymbols/16.png new file mode 100644 index 00000000..fe808e5e Binary files /dev/null and b/data/images/manaSymbols/16.png differ diff --git a/data/images/manaSymbols/17.png b/data/images/manaSymbols/17.png new file mode 100644 index 00000000..f91a58f9 Binary files /dev/null and b/data/images/manaSymbols/17.png differ diff --git a/data/images/manaSymbols/18.png b/data/images/manaSymbols/18.png new file mode 100644 index 00000000..723eb4cf Binary files /dev/null and b/data/images/manaSymbols/18.png differ diff --git a/data/images/manaSymbols/19.png b/data/images/manaSymbols/19.png new file mode 100644 index 00000000..dae11a22 Binary files /dev/null and b/data/images/manaSymbols/19.png differ diff --git a/data/images/manaSymbols/2.png b/data/images/manaSymbols/2.png new file mode 100644 index 00000000..b3d82fcb Binary files /dev/null and b/data/images/manaSymbols/2.png differ diff --git a/data/images/manaSymbols/20.png b/data/images/manaSymbols/20.png new file mode 100644 index 00000000..526ca221 Binary files /dev/null and b/data/images/manaSymbols/20.png differ diff --git a/data/images/manaSymbols/21.png b/data/images/manaSymbols/21.png new file mode 100644 index 00000000..a1d9c533 Binary files /dev/null and b/data/images/manaSymbols/21.png differ diff --git a/data/images/manaSymbols/22.png b/data/images/manaSymbols/22.png new file mode 100644 index 00000000..857e726e Binary files /dev/null and b/data/images/manaSymbols/22.png differ diff --git a/data/images/manaSymbols/23.png b/data/images/manaSymbols/23.png new file mode 100644 index 00000000..80ae2b7a Binary files /dev/null and b/data/images/manaSymbols/23.png differ diff --git a/data/images/manaSymbols/24.png b/data/images/manaSymbols/24.png new file mode 100644 index 00000000..dd85d92a Binary files /dev/null and b/data/images/manaSymbols/24.png differ diff --git a/data/images/manaSymbols/25.png b/data/images/manaSymbols/25.png new file mode 100644 index 00000000..2a268369 Binary files /dev/null and b/data/images/manaSymbols/25.png differ diff --git a/data/images/manaSymbols/26.png b/data/images/manaSymbols/26.png new file mode 100644 index 00000000..6b6e6a0e Binary files /dev/null and b/data/images/manaSymbols/26.png differ diff --git a/data/images/manaSymbols/27.png b/data/images/manaSymbols/27.png new file mode 100644 index 00000000..0531ac2d Binary files /dev/null and b/data/images/manaSymbols/27.png differ diff --git a/data/images/manaSymbols/28.png b/data/images/manaSymbols/28.png new file mode 100644 index 00000000..3a0dbe05 Binary files /dev/null and b/data/images/manaSymbols/28.png differ diff --git a/data/images/manaSymbols/29.png b/data/images/manaSymbols/29.png new file mode 100644 index 00000000..4e393bec Binary files /dev/null and b/data/images/manaSymbols/29.png differ diff --git a/data/images/manaSymbols/3.png b/data/images/manaSymbols/3.png new file mode 100644 index 00000000..a4aaedc6 Binary files /dev/null and b/data/images/manaSymbols/3.png differ diff --git a/data/images/manaSymbols/30.png b/data/images/manaSymbols/30.png new file mode 100644 index 00000000..58101dea Binary files /dev/null and b/data/images/manaSymbols/30.png differ diff --git a/data/images/manaSymbols/31.png b/data/images/manaSymbols/31.png new file mode 100644 index 00000000..373d75d9 Binary files /dev/null and b/data/images/manaSymbols/31.png differ diff --git a/data/images/manaSymbols/32.png b/data/images/manaSymbols/32.png new file mode 100644 index 00000000..68a07790 Binary files /dev/null and b/data/images/manaSymbols/32.png differ diff --git a/data/images/manaSymbols/33.png b/data/images/manaSymbols/33.png new file mode 100644 index 00000000..913b43fe Binary files /dev/null and b/data/images/manaSymbols/33.png differ diff --git a/data/images/manaSymbols/34.png b/data/images/manaSymbols/34.png new file mode 100644 index 00000000..c9b83bcb Binary files /dev/null and b/data/images/manaSymbols/34.png differ diff --git a/data/images/manaSymbols/35.png b/data/images/manaSymbols/35.png new file mode 100644 index 00000000..98c7fbf5 Binary files /dev/null and b/data/images/manaSymbols/35.png differ diff --git a/data/images/manaSymbols/36.png b/data/images/manaSymbols/36.png new file mode 100644 index 00000000..fcdd4393 Binary files /dev/null and b/data/images/manaSymbols/36.png differ diff --git a/data/images/manaSymbols/37.png b/data/images/manaSymbols/37.png new file mode 100644 index 00000000..0c1d2da5 Binary files /dev/null and b/data/images/manaSymbols/37.png differ diff --git a/data/images/manaSymbols/38.png b/data/images/manaSymbols/38.png new file mode 100644 index 00000000..216251fa Binary files /dev/null and b/data/images/manaSymbols/38.png differ diff --git a/data/images/manaSymbols/39.png b/data/images/manaSymbols/39.png new file mode 100644 index 00000000..dc47735a Binary files /dev/null and b/data/images/manaSymbols/39.png differ diff --git a/data/images/manaSymbols/4.png b/data/images/manaSymbols/4.png new file mode 100644 index 00000000..08d75a97 Binary files /dev/null and b/data/images/manaSymbols/4.png differ diff --git a/data/images/manaSymbols/40.png b/data/images/manaSymbols/40.png new file mode 100644 index 00000000..8574ed78 Binary files /dev/null and b/data/images/manaSymbols/40.png differ diff --git a/data/images/manaSymbols/41.png b/data/images/manaSymbols/41.png new file mode 100644 index 00000000..821e894a Binary files /dev/null and b/data/images/manaSymbols/41.png differ diff --git a/data/images/manaSymbols/42.png b/data/images/manaSymbols/42.png new file mode 100644 index 00000000..9c8aab59 Binary files /dev/null and b/data/images/manaSymbols/42.png differ diff --git a/data/images/manaSymbols/43.png b/data/images/manaSymbols/43.png new file mode 100644 index 00000000..471b974c Binary files /dev/null and b/data/images/manaSymbols/43.png differ diff --git a/data/images/manaSymbols/44.png b/data/images/manaSymbols/44.png new file mode 100644 index 00000000..68ccd442 Binary files /dev/null and b/data/images/manaSymbols/44.png differ diff --git a/data/images/manaSymbols/45.png b/data/images/manaSymbols/45.png new file mode 100644 index 00000000..c8526e5c Binary files /dev/null and b/data/images/manaSymbols/45.png differ diff --git a/data/images/manaSymbols/46.png b/data/images/manaSymbols/46.png new file mode 100644 index 00000000..776fa89d Binary files /dev/null and b/data/images/manaSymbols/46.png differ diff --git a/data/images/manaSymbols/47.png b/data/images/manaSymbols/47.png new file mode 100644 index 00000000..235144f0 Binary files /dev/null and b/data/images/manaSymbols/47.png differ diff --git a/data/images/manaSymbols/48.png b/data/images/manaSymbols/48.png new file mode 100644 index 00000000..357dce5d Binary files /dev/null and b/data/images/manaSymbols/48.png differ diff --git a/data/images/manaSymbols/49.png b/data/images/manaSymbols/49.png new file mode 100644 index 00000000..fa50da49 Binary files /dev/null and b/data/images/manaSymbols/49.png differ diff --git a/data/images/manaSymbols/5.png b/data/images/manaSymbols/5.png new file mode 100644 index 00000000..f6930ee8 Binary files /dev/null and b/data/images/manaSymbols/5.png differ diff --git a/data/images/manaSymbols/50.png b/data/images/manaSymbols/50.png new file mode 100644 index 00000000..56392649 Binary files /dev/null and b/data/images/manaSymbols/50.png differ diff --git a/data/images/manaSymbols/51.png b/data/images/manaSymbols/51.png new file mode 100644 index 00000000..3b098dcc Binary files /dev/null and b/data/images/manaSymbols/51.png differ diff --git a/data/images/manaSymbols/52.png b/data/images/manaSymbols/52.png new file mode 100644 index 00000000..fba0f73e Binary files /dev/null and b/data/images/manaSymbols/52.png differ diff --git a/data/images/manaSymbols/53.png b/data/images/manaSymbols/53.png new file mode 100644 index 00000000..5ce5d5ab Binary files /dev/null and b/data/images/manaSymbols/53.png differ diff --git a/data/images/manaSymbols/54.png b/data/images/manaSymbols/54.png new file mode 100644 index 00000000..9dbedb27 Binary files /dev/null and b/data/images/manaSymbols/54.png differ diff --git a/data/images/manaSymbols/55.png b/data/images/manaSymbols/55.png new file mode 100644 index 00000000..a199cc76 Binary files /dev/null and b/data/images/manaSymbols/55.png differ diff --git a/data/images/manaSymbols/56.png b/data/images/manaSymbols/56.png new file mode 100644 index 00000000..4b6c92cd Binary files /dev/null and b/data/images/manaSymbols/56.png differ diff --git a/data/images/manaSymbols/57.png b/data/images/manaSymbols/57.png new file mode 100644 index 00000000..d03c020b Binary files /dev/null and b/data/images/manaSymbols/57.png differ diff --git a/data/images/manaSymbols/58.png b/data/images/manaSymbols/58.png new file mode 100644 index 00000000..aef16f82 Binary files /dev/null and b/data/images/manaSymbols/58.png differ diff --git a/data/images/manaSymbols/59.png b/data/images/manaSymbols/59.png new file mode 100644 index 00000000..a051fa3e Binary files /dev/null and b/data/images/manaSymbols/59.png differ diff --git a/data/images/manaSymbols/6.png b/data/images/manaSymbols/6.png new file mode 100644 index 00000000..09f74d0d Binary files /dev/null and b/data/images/manaSymbols/6.png differ diff --git a/data/images/manaSymbols/60.png b/data/images/manaSymbols/60.png new file mode 100644 index 00000000..3f8e6565 Binary files /dev/null and b/data/images/manaSymbols/60.png differ diff --git a/data/images/manaSymbols/61.png b/data/images/manaSymbols/61.png new file mode 100644 index 00000000..975af655 Binary files /dev/null and b/data/images/manaSymbols/61.png differ diff --git a/data/images/manaSymbols/62.png b/data/images/manaSymbols/62.png new file mode 100644 index 00000000..e9583ee8 Binary files /dev/null and b/data/images/manaSymbols/62.png differ diff --git a/data/images/manaSymbols/63.png b/data/images/manaSymbols/63.png new file mode 100644 index 00000000..f3b4c60c Binary files /dev/null and b/data/images/manaSymbols/63.png differ diff --git a/data/images/manaSymbols/64.png b/data/images/manaSymbols/64.png new file mode 100644 index 00000000..d409ee8d Binary files /dev/null and b/data/images/manaSymbols/64.png differ diff --git a/data/images/manaSymbols/65.png b/data/images/manaSymbols/65.png new file mode 100644 index 00000000..f3a332c3 Binary files /dev/null and b/data/images/manaSymbols/65.png differ diff --git a/data/images/manaSymbols/7.png b/data/images/manaSymbols/7.png new file mode 100644 index 00000000..51e4783c Binary files /dev/null and b/data/images/manaSymbols/7.png differ diff --git a/data/images/manaSymbols/8.png b/data/images/manaSymbols/8.png new file mode 100644 index 00000000..3aefd2b9 Binary files /dev/null and b/data/images/manaSymbols/8.png differ diff --git a/data/images/manaSymbols/9.png b/data/images/manaSymbols/9.png new file mode 100644 index 00000000..e4ad3213 Binary files /dev/null and b/data/images/manaSymbols/9.png differ diff --git a/data/images/manaSymbols/future/0.png b/data/images/manaSymbols/future/0.png new file mode 100644 index 00000000..a44c45f5 Binary files /dev/null and b/data/images/manaSymbols/future/0.png differ diff --git a/data/images/manaSymbols/future/1.png b/data/images/manaSymbols/future/1.png new file mode 100644 index 00000000..46ba6bf0 Binary files /dev/null and b/data/images/manaSymbols/future/1.png differ diff --git a/data/images/manaSymbols/future/10.png b/data/images/manaSymbols/future/10.png new file mode 100644 index 00000000..7669e8ba Binary files /dev/null and b/data/images/manaSymbols/future/10.png differ diff --git a/data/images/manaSymbols/future/11.png b/data/images/manaSymbols/future/11.png new file mode 100644 index 00000000..1038bb40 Binary files /dev/null and b/data/images/manaSymbols/future/11.png differ diff --git a/data/images/manaSymbols/future/12.png b/data/images/manaSymbols/future/12.png new file mode 100644 index 00000000..7bb86aec Binary files /dev/null and b/data/images/manaSymbols/future/12.png differ diff --git a/data/images/manaSymbols/future/13.png b/data/images/manaSymbols/future/13.png new file mode 100644 index 00000000..b7ef99b8 Binary files /dev/null and b/data/images/manaSymbols/future/13.png differ diff --git a/data/images/manaSymbols/future/14.png b/data/images/manaSymbols/future/14.png new file mode 100644 index 00000000..7a58b2aa Binary files /dev/null and b/data/images/manaSymbols/future/14.png differ diff --git a/data/images/manaSymbols/future/15.png b/data/images/manaSymbols/future/15.png new file mode 100644 index 00000000..d14ad331 Binary files /dev/null and b/data/images/manaSymbols/future/15.png differ diff --git a/data/images/manaSymbols/future/16.png b/data/images/manaSymbols/future/16.png new file mode 100644 index 00000000..9e86e139 Binary files /dev/null and b/data/images/manaSymbols/future/16.png differ diff --git a/data/images/manaSymbols/future/17.png b/data/images/manaSymbols/future/17.png new file mode 100644 index 00000000..535ceecb Binary files /dev/null and b/data/images/manaSymbols/future/17.png differ diff --git a/data/images/manaSymbols/future/18.png b/data/images/manaSymbols/future/18.png new file mode 100644 index 00000000..b4f7a4d9 Binary files /dev/null and b/data/images/manaSymbols/future/18.png differ diff --git a/data/images/manaSymbols/future/19.png b/data/images/manaSymbols/future/19.png new file mode 100644 index 00000000..0f6c1738 Binary files /dev/null and b/data/images/manaSymbols/future/19.png differ diff --git a/data/images/manaSymbols/future/2.png b/data/images/manaSymbols/future/2.png new file mode 100644 index 00000000..e5d63c41 Binary files /dev/null and b/data/images/manaSymbols/future/2.png differ diff --git a/data/images/manaSymbols/future/20.png b/data/images/manaSymbols/future/20.png new file mode 100644 index 00000000..c88b5bb8 Binary files /dev/null and b/data/images/manaSymbols/future/20.png differ diff --git a/data/images/manaSymbols/future/21.png b/data/images/manaSymbols/future/21.png new file mode 100644 index 00000000..75a65b1d Binary files /dev/null and b/data/images/manaSymbols/future/21.png differ diff --git a/data/images/manaSymbols/future/22.png b/data/images/manaSymbols/future/22.png new file mode 100644 index 00000000..02cb67db Binary files /dev/null and b/data/images/manaSymbols/future/22.png differ diff --git a/data/images/manaSymbols/future/23.png b/data/images/manaSymbols/future/23.png new file mode 100644 index 00000000..26011509 Binary files /dev/null and b/data/images/manaSymbols/future/23.png differ diff --git a/data/images/manaSymbols/future/24.png b/data/images/manaSymbols/future/24.png new file mode 100644 index 00000000..5d58f73a Binary files /dev/null and b/data/images/manaSymbols/future/24.png differ diff --git a/data/images/manaSymbols/future/25.png b/data/images/manaSymbols/future/25.png new file mode 100644 index 00000000..7fbbd5fc Binary files /dev/null and b/data/images/manaSymbols/future/25.png differ diff --git a/data/images/manaSymbols/future/26.png b/data/images/manaSymbols/future/26.png new file mode 100644 index 00000000..52de3d29 Binary files /dev/null and b/data/images/manaSymbols/future/26.png differ diff --git a/data/images/manaSymbols/future/27.png b/data/images/manaSymbols/future/27.png new file mode 100644 index 00000000..704d8919 Binary files /dev/null and b/data/images/manaSymbols/future/27.png differ diff --git a/data/images/manaSymbols/future/28.png b/data/images/manaSymbols/future/28.png new file mode 100644 index 00000000..ddaf8da5 Binary files /dev/null and b/data/images/manaSymbols/future/28.png differ diff --git a/data/images/manaSymbols/future/29.png b/data/images/manaSymbols/future/29.png new file mode 100644 index 00000000..8798d076 Binary files /dev/null and b/data/images/manaSymbols/future/29.png differ diff --git a/data/images/manaSymbols/future/3.png b/data/images/manaSymbols/future/3.png new file mode 100644 index 00000000..fca19572 Binary files /dev/null and b/data/images/manaSymbols/future/3.png differ diff --git a/data/images/manaSymbols/future/30.png b/data/images/manaSymbols/future/30.png new file mode 100644 index 00000000..c04ddda5 Binary files /dev/null and b/data/images/manaSymbols/future/30.png differ diff --git a/data/images/manaSymbols/future/31.png b/data/images/manaSymbols/future/31.png new file mode 100644 index 00000000..414d4bcc Binary files /dev/null and b/data/images/manaSymbols/future/31.png differ diff --git a/data/images/manaSymbols/future/32.png b/data/images/manaSymbols/future/32.png new file mode 100644 index 00000000..c30195dd Binary files /dev/null and b/data/images/manaSymbols/future/32.png differ diff --git a/data/images/manaSymbols/future/33.png b/data/images/manaSymbols/future/33.png new file mode 100644 index 00000000..02459a93 Binary files /dev/null and b/data/images/manaSymbols/future/33.png differ diff --git a/data/images/manaSymbols/future/34.png b/data/images/manaSymbols/future/34.png new file mode 100644 index 00000000..3b3d7c19 Binary files /dev/null and b/data/images/manaSymbols/future/34.png differ diff --git a/data/images/manaSymbols/future/35.png b/data/images/manaSymbols/future/35.png new file mode 100644 index 00000000..4d8da46d Binary files /dev/null and b/data/images/manaSymbols/future/35.png differ diff --git a/data/images/manaSymbols/future/36.png b/data/images/manaSymbols/future/36.png new file mode 100644 index 00000000..3e4cdfb3 Binary files /dev/null and b/data/images/manaSymbols/future/36.png differ diff --git a/data/images/manaSymbols/future/4.png b/data/images/manaSymbols/future/4.png new file mode 100644 index 00000000..2f347bdf Binary files /dev/null and b/data/images/manaSymbols/future/4.png differ diff --git a/data/images/manaSymbols/future/5.png b/data/images/manaSymbols/future/5.png new file mode 100644 index 00000000..0880896c Binary files /dev/null and b/data/images/manaSymbols/future/5.png differ diff --git a/data/images/manaSymbols/future/6.png b/data/images/manaSymbols/future/6.png new file mode 100644 index 00000000..4c6dced5 Binary files /dev/null and b/data/images/manaSymbols/future/6.png differ diff --git a/data/images/manaSymbols/future/7.png b/data/images/manaSymbols/future/7.png new file mode 100644 index 00000000..cf2af3b0 Binary files /dev/null and b/data/images/manaSymbols/future/7.png differ diff --git a/data/images/manaSymbols/future/8.png b/data/images/manaSymbols/future/8.png new file mode 100644 index 00000000..f5f77069 Binary files /dev/null and b/data/images/manaSymbols/future/8.png differ diff --git a/data/images/manaSymbols/future/9.png b/data/images/manaSymbols/future/9.png new file mode 100644 index 00000000..7a008e49 Binary files /dev/null and b/data/images/manaSymbols/future/9.png differ diff --git a/data/scripts/main.js b/data/scripts/main.js index f90580a5..958bb44d 100644 --- a/data/scripts/main.js +++ b/data/scripts/main.js @@ -13,6 +13,9 @@ var selectedMaskImage = 0 var selectedCardMasterElement var selectedTextObject var cardTextList = new Array() +var manaSymbolCodeList = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "w", "u", "b", "r", "g", "2w", "2u", "2b", "2r", "2g", "pw", "pu", "pb", "pr", "pg", "wu", "wb", "ub", "ur", "br", "bg", "rg", "rw", "gw", "gu", "x", "s", "c", "t","untap", "e", "y", "z", "1/2", "inf", "chaos", "plane", "l+", "l-", "l0", "oldtap", "artistbrush", "bar", "whiteBrush", "blackBrush"]; +var manaSymbolImageList = []; +manaSymbolCodeList.forEach((item, index) => {manaSymbolImageList[index] = new Image(); manaSymbolImageList[index].src = 'data/images/manaSymbols/' + index + '.png'}) function newCanvas(name) { window[name + 'Canvas'] = document.createElement('canvas') @@ -32,8 +35,14 @@ newCanvas('frameMasks') newCanvas('textLine') newCanvas('textParagraph') newCanvas('text') +newCanvas('bottomInfo') +newCanvas('manaCost') +newCanvas('watermark') +newCanvas('temp') var artWidth = cardWidth, artHeight = cardHeight +var setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight +var watermarkDrawX = 0, watermarkDrawY = 0, watermarkDrawWidth = 0, watermarkDrawHeight = 0 cardArt = new Image() setSymbol = new Image() watermark = new Image() @@ -53,10 +62,25 @@ cardArt.onload = function() { cardArtUpdated() } setSymbol.onload = function() { - //updateSetSymbol() + if (setSymbol.width / setSymbol.height > setSymbolWidth / setSymbolHeight) { + setSymbolDrawWidth = setSymbolWidth + setSymbolDrawHeight = setSymbolWidth * setSymbol.height / setSymbol.width + } else { + setSymbolDrawHeight = setSymbolHeight + setSymbolDrawWidth = setSymbolHeight * setSymbol.width / setSymbol.height + } + setSymbolDrawX = setSymbolX[0] + if (setSymbolX[1] == 'right') { + setSymbolDrawX -= setSymbolDrawWidth + } + setSymbolDrawY = setSymbolY[0] + if (setSymbolY[1] == 'center') { + setSymbolDrawY -= setSymbolDrawHeight / 2 + } + drawCardObjects() } watermark.onload = function() { - //updateWatermark() + watermarkUpdated() } class cardPlaceholder { @@ -72,8 +96,10 @@ class cardPlaceholder { uniqueNumberTracker += 1 } draw() { - console.log(this) mainContext.drawImage(this.whatToDraw, scaleX(this.x), scaleY(this.y), scaleX(this.width) * this.zoom, scaleY(this.height) * this.zoom) + if (this.whatToDraw == textCanvas) { + mainContext.drawImage(manaCostCanvas, 0, 0, cardWidth, cardHeight) + } } cardMasterElement() { var temporaryElement = document.createElement('div') @@ -173,8 +199,14 @@ function drawCardObjects() { } } } - //draw art - //collector's info function + mainContext.drawImage(watermarkCanvas, 0, 0, cardWidth, cardHeight) + mainContext.drawImage(setSymbol, setSymbolDrawX, setSymbolDrawY, setSymbolDrawWidth, setSymbolDrawHeight) + mainContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight) + mainContext.globalCompositeOperation = 'destination-over' + mainContext.drawImage(cardArt, scaleX(cardMasterList[0].x), scaleY(cardMasterList[0].y), scaleX(cardMasterList[0].width) * cardMasterList[0].zoom, scaleY(cardMasterList[0].height) * cardMasterList[0].zoom) + mainContext.globalCompositeOperation = 'destination-out' + //draw the corner cutters + mainContext.globalCompositeOperation = 'source-over' previewContext.drawImage(mainCanvas, 0, 0, previewCanvas.width, previewCanvas.height) } @@ -182,6 +214,9 @@ class frameImage { constructor(displayName = 'custom', imageSource = '', x = 0, y = 0, width = 1, height = 1, masks = [], frameImageListIndex) { this.name = displayName this.image = new Image() + if (this.name == 'custom') { + this.image.crossOrigin = 'anonymous' + } this.image.src = imageSource this.x = x this.y = y @@ -210,10 +245,11 @@ function maskOptionClicked(event) { Array.from(document.getElementById('maskPicker').children).forEach(element => element.classList.remove('maskOptionSelected')) if (event.target.nodeName == 'IMG') { event.target.parentElement.classList.add('maskOptionSelected') + selectedMaskImage = parseInt(event.target.parentElement.id.replace('maskOption', '')) } else { event.target.classList.add('maskOptionSelected') + selectedMaskImage = parseInt(event.target.id.replace('maskOption', '')) } - selectedMaskImage = parseInt(event.target.id.replace('maskOption', '')) } function loadMaskImages(listOfMasks) { @@ -291,63 +327,129 @@ function drawCardText() { } function writeText(textObjectList, targetContext) { var textCanvasBuffer = 100 + var rewritingLine = false + var textSize + outerloop: for (var i = 0; i < textObjectList.length; i++) { + if (!rewritingLine) { + textSize = scaleY(textObjectList[i].fontSize) + } else { + textSize -= 1 + } + rewritingLine = false + textLineCanvas.width = scaleX(textObjectList[i].width) + 2 * textCanvasBuffer + textLineCanvas.height = textSize + 2 * textCanvasBuffer + textParagraphCanvas.width = scaleX(textObjectList[i].width) + 2 * textCanvasBuffer + textParagraphCanvas.height = scaleY(textObjectList[i].height) + 2 * textCanvasBuffer textLineContext.clearRect(0, 0, textLineCanvas.width, textLineCanvas.height) textParagraphContext.clearRect(0, 0, textParagraphCanvas.width, textParagraphCanvas.height) - var textSize = scaleY(textObjectList[i].fontSize) + var outline, shadow = 0, oneLine = false, outlineThickness = 2, textAlign = 'left', finishLine = false, paragraphSpace = 0 + textObjectList[i].otherParameters.forEach(item => eval(item)) + textLineContext.strokeStyle = outline + textLineContext.lineWidth = outlineThickness textLineContext.font = textSize + 'px ' + textObjectList[i].font textLineContext.fillStyle = textObjectList[i].fontColor var textX = textCanvasBuffer var textY = 0 var currentLineWidth = 0 - var textAlign = 'left' - textLineContext.width = scaleX(textObjectList[i].width) + 2 * textCanvasBuffer - textLineContext.height = textSize + 2 * textCanvasBuffer - textParagraphContext.width = scaleX(textObjectList[i].width) + 2 * textCanvasBuffer - textParagraphContext.height = scaleY(textObjectList[i].height) + 2 * textCanvasBuffer - var mustFinishLine = false - var splitText = textObjectList[i].text.replace(/\n/g, '{line}').replace(/{/g, 'fh48a3h2{').replace(/}/g, '}fh48a3h2').replace(/ /g, ' fh48a3h2').split('fh48a3h2') + var splitText = textObjectList[i].text.replace(/\n/g, '{line}').replace(/{/g, 'fh48a3h2{').replace(/}/g, '}fh48a3h2').replace(/ /g, 'fh48a3h2 fh48a3h2').split('fh48a3h2') splitText.push('') + innerloop: for (var n = 0; n < splitText.length; n++) { - if (splitText[n] != 0 || n == splitText.length - 1) { + if (splitText[n] != '' || n == splitText.length - 1) { wordToWrite = '' if (splitText[n][0] == '{' && splitText[n][splitText[n].length - 1] == '}') { var possibleCodeLower = splitText[n].substr(1, splitText[n].length - 2).toLowerCase() - if (possibleCodeLower == 'line') { - + if (possibleCodeLower == 'line' && !oneLine) { + finishLine = true + paragraphSpace = textSize * 0.35 + } else if (possibleCodeLower == 'linenospace' && !oneLine) { + finishLine = true + } else if ((possibleCodeLower == 'bar' || possibleCodeLower == 'flavor') && !oneLine) { + finishLine = true + var barWidth = scaleX(textObjectList[i].width) * 0.95 + var barHeight = scaleY(0.001) + textLineContext.drawImage(manaSymbolImageList[63], textCanvasBuffer + (scaleX(textObjectList[i].width) - barWidth) / 2, textSize * 1.6 + textCanvasBuffer, barWidth, barHeight) + paragraphSpace = textSize * 0.8 + if (possibleCodeLower == 'flavor') { + textLineContext.font = 'italic ' + (textSize * 0.92) + 'px ' + textObjectList[i].font + } } else if (possibleCodeLower == 'i') { - + textLineContext.font = 'italic ' + textSize + 'px ' + textObjectList[i].font + } else if (possibleCodeLower == '/i') { + textLineContext.font = textSize + 'px ' + textObjectList[i].font + } else if (possibleCodeLower.includes('fontsize')) { + textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length)) + textLineContext.font = textSize + 'px ' + textObjectList[i].font + } else if (possibleCodeLower == 'left') { + textAlign = 'left' + } else if (possibleCodeLower == 'center') { + textAlign = 'center' + } else if (possibleCodeLower == 'right') { + textAlign = 'right' + } else if (possibleCodeLower.includes('outline:')) { + outline = true; + textLineContext.strokeStyle = possibleCodeLower.replace('outline:', '').split(',')[0]; + textLineContext.lineWidth = parseInt(possibleCodeLower.replace('outline:', '').split(',')[1]); + } else if (possibleCodeLower.includes('shadow')) { + shadow = parseInt(possibleCodeLower.replace('shadow', '')); + } else if (possibleCodeLower.includes('fontcolor')) { + textLineContext.fillStyle = possibleCodeLower.slice(9, possibleCodeLower.length) + } else if (possibleCodeLower == 'artistbrush') { + var artistBrushWidth = textSize * 1.2 + textLineContext.drawImage(manaSymbolImageList[62], textX, textCanvasBuffer + textSize - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21) + currentLineX += artistBrushWidth * 1.1 + } else if (manaSymbolCodeList.includes(possibleCodeLower.split('/').join(''))) { + //THIS HAS TO BE THE LAST ONE + var manaSymbolDiameter = textSize * 0.77 + textLineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower.split('/').join(''))], textX, textCanvasBuffer + textSize - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter) + currentLineWidth += manaSymbolDiameter * 1.02 + textX += manaSymbolDiameter * 1.02 } else { wordToWrite = splitText[n] } } else { wordToWrite = splitText[n] } - if (wordToWrite != '' || n == splitText.length - 1) { + if (wordToWrite != '' || n == splitText.length - 1 || finishLine) { var currentWordWidth = textLineContext.measureText(wordToWrite).width - if (currentWordWidth + currentLineWidth > scaleX(textObjectList[i].width) || n == splitText.length - 1) { - //finish the current line, draw to paragraph, clear + if (currentWordWidth + currentLineWidth > scaleX(textObjectList[i].width) || n == splitText.length - 1 || finishLine) { + if (oneLine && currentWordWidth + currentLineWidth > scaleX(textObjectList[i].width) && textSize > 0) { + rewritingLine = true + i -= 1 + continue outerloop + } var textAlignShift = 0 if (textAlign == 'center') { textAlignShift = (scaleX(textObjectList[i].width) - currentLineWidth) / 2 } else if (textAlign == 'right') { textAlignShift = scaleX(textObjectList[i].width) - currentLineWidth } - textParagraphContext.drawImage(textLineCanvas, 0 + textAlignShift, textY) + textParagraphContext.drawImage(textLineCanvas, 0 + textAlignShift, textY, textLineCanvas.width, textLineCanvas.height) if (n != splitText.length - 1) { textLineContext.clearRect(0, 0, textLineCanvas.width, textLineCanvas.height) textX = textCanvasBuffer currentLineWidth = 0 - textY += textSize + textY += textSize + paragraphSpace + paragraphSpace = 0 + finishLine = false } } + if (shadow > 0) { + textLineContext.fillStyle = 'black' + textLineContext.fillText(wordToWrite, textX + shadow, textCanvasBuffer + textSize + shadow) + textLineContext.fillStyle = textObjectList[i].fontColor + } + if (outline != undefined) { + lineContext.strokeText(wordToWrite, textX, textCanvasBuffer + textSize) + } textLineContext.fillText(wordToWrite, textX, textCanvasBuffer + textSize) currentLineWidth += currentWordWidth textX += currentWordWidth } } if (n == splitText.length - 1) { - targetContext.drawImage(textParagraphCanvas, scaleX(textObjectList[i].x) - textCanvasBuffer, scaleY(textObjectList[i].y) - textCanvasBuffer + (scaleY(textObjectList[i].height) - textY) / 2) + targetContext.drawImage(textParagraphCanvas, scaleX(textObjectList[i].x) - textCanvasBuffer, scaleY(textObjectList[i].y) - textCanvasBuffer - textSize + (scaleY(textObjectList[i].height) - textY - textSize) / 2, textParagraphCanvas.width, textParagraphCanvas.height) } } } @@ -371,9 +473,225 @@ function cardArtUpdated() { drawCardObjects() } +var savedArtList = [], cardArtUrlList = [], cardArtArtistList = [] +function inputCardArtName(cardArtNameInput) { + var xhttp = new XMLHttpRequest() + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + savedArtList = this.responseText.split('"art_crop":"') + savedArtList.splice(0, 1) + document.getElementById('inputCardArtNameNumber').max = savedArtList.length + document.getElementById('inputCardArtNameNumber').value = 1 + for (i = 0; i < savedArtList.length; i ++) { + cardArtUrlList[i] = savedArtList[i].split('","border_crop":')[0] + } + for (i = 0; i < savedArtList.length; i ++) { + cardArtArtistList[i] = savedArtList[i].slice(savedArtList[i].indexOf('"artist":"') + 10, savedArtList[i].indexOf('","artist_id')); + } + inputCardArtNameNumber(1) + } else if (this.readyState == 4 && this.status == 404) { + alert("Sorry, but we can't seem to find any art for " + cardArtNameInput) + } + } + xhttp.open('GET', 'https://api.scryfall.com/cards/search?order=released&unique=art&q=name%3D' + cardArtNameInput.replace(/ /g, '_'), true) + xhttp.send() +} +function inputCardArtNameNumber(cardArtNameNumberInput) { + cardArt.src = cardArtUrlList[cardArtNameNumberInput - 1] + document.getElementById('inputInfoArtist').value = cardArtArtistList[cardArtNameNumberInput - 1] + bottomInfoUpdated() +} + +function initialize() { + cardMasterList.push(new cardPlaceholder('Card Art Placeholder', cardArt)) + cardMasterList.push(new cardPlaceholder('Text Placeholder', window['textCanvas'])) + cardMaster.insertBefore(cardMasterList[0].cardMasterElement(), cardMaster.children[0]) + cardMaster.insertBefore(cardMasterList[1].cardMasterElement(), cardMaster.children[0]) + drawCardObjects() +} + +function bottomInfoUpdated() { + window[bottomInfoFunction]() +} + +function uploadLocalFrameImage(event) { + var input = event.target; + var reader = new FileReader(); + reader.onload = function() { + addUploadedFrameImage(reader.result) + } + reader.readAsDataURL(input.files[0]); +} + +function addUploadedFrameImage(imageSource) { + frameImageList.push(new frameImage('custom', imageSource, 0, 0, 1, 1, maskNameList, frameImageList.length)) +} + +function manaCostUpdated() { + manaCostContext.clearRect(0, 0, cardWidth, cardHeight) + var manaCostList = document.getElementById('inputManaCost').value.toLowerCase().replace(/{/, ' ').replace(/}/, ' ').split('/').join('').split(' ') + var manaSymbolIndex = -1 + manaCostCanvas.fillStyle = 'black' + for (var i = 0; i < manaCostList.length; i++) { + if (manaSymbolCodeList.includes(manaCostList[i])) { + manaSymbolIndex += 1 + var x = eval(manaCostXPath) + var y = eval(manaCostYPath) + var diameter = eval(manaCostDiameter) + var shadowOffset = eval(manaCostShadowOffset) + manaCostContext.beginPath() + manaCostContext.arc(x + diameter / 2 + shadowOffset[0], y + diameter / 2 + shadowOffset[1], diameter / 2, 0, 2 * Math.PI) + manaCostContext.fill() + manaCostContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(manaCostList[i])], x, y, diameter, diameter) + } + } + drawCardObjects() +} + +function watermarkUpdated() { + if (document.getElementById('inputWatermarkPrimary').value != 'none') { + watermarkContext.clearRect(0, 0, cardWidth, cardHeight) + if (watermarkWidth / watermarkHeight < watermark.width / watermark.height) { + watermarkDrawWidth = watermarkWidth + watermarkDrawHeight = watermarkWidth / watermark.width * watermark.height + } else { + watermarkDrawHeight = watermarkHeight + watermarkDrawWidth = watermarkHeight / watermark.height * watermark.width + } + watermarkDrawX = cardWidth / 2 - watermarkDrawWidth / 2 + watermarkDrawY = watermarkY - watermarkDrawHeight / 2 + watermarkContext.drawImage(watermark, watermarkDrawX, watermarkDrawY, watermarkDrawWidth, watermarkDrawHeight) + watermarkContext.globalCompositeOperation = 'source-in' + if (document.getElementById('inputWatermarkPrimary').value != 'default') { + watermarkContext.fillStyle = document.getElementById('inputWatermarkPrimary').value + watermarkContext.fillRect(0, 0, cardWidth, cardHeight) + } + if (document.getElementById('inputWatermarkSecondary').value != 'none') { + watermarkContext.globalCompositeOperation = 'source-atop' + tempContext.clearRect(0, 0, cardWidth, cardHeight) + tempContext.drawImage(maskImageList[maskNameList.indexOf('Right Half')], 0, 0, cardWidth, cardHeight) + tempContext.globalCompositeOperation = 'source-in' + if (document.getElementById('inputWatermarkSecondary').value == 'default') { + tempContext.drawImage(watermark, watermarkDrawX, watermarkDrawY, watermarkDrawWidth, watermarkDrawHeight) + } else { + tempContext.fillStyle = document.getElementById('inputWatermarkSecondary').value + tempContext.fillRect(0, 0, cardWidth, cardHeight) + } + tempContext.globalCompositeOperation = 'source-over' + watermarkContext.drawImage(tempCanvas, 0, 0, cardWidth, cardHeight) + } + watermarkContext.globalCompositeOperation = 'source-over' + } else { + watermarkContext.clearRect(0, 0, cardWidth, cardHeight) + } + drawCardObjects() +} + +var savedImportResponse = '' +function inputCardNameTextImport(cardName) { + var xhttp = new XMLHttpRequest() + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + savedImportResponse = this.responseText.split('{"object":"card"') + inputCardNameNumberTextImport(1) + document.getElementById('inputCardNameNumberTextImport').max = savedImportResponse.length - 1 + document.getElementById('inputCardNameNumberTextImport').value = 1 + } else if (this.readyState == 4 && this.status == 404) { + savedImportResponse = '' + alert("Sorry, but we can't seem to find any card named '" + cardName + "'") + } + } + xhttp.open('GET', 'https://api.scryfall.com/cards/search?order=released&q=name%3D' + cardName.replace(/ /g, '+'), true) + xhttp.send() +} +function inputCardNameNumberTextImport(index) { + var importCardTextResponse = savedImportResponse[index] + importText(beforeAfter(importCardTextResponse, '"name":"', '",'), 'Card Title') + importText(beforeAfter(importCardTextResponse, '"type_line":"', '",'), 'Card Type') + importText(beforeAfter(importCardTextResponse, '"oracle_text":"', '",').replace(/\\n/g, '\n').replace(/ \\"/g, ' \u201C').replace(/\\"/g, '\u201D').replace(/\(/g, '{i}(').replace(/\)/g, '){/i}'), 'Rules Text') + if (importCardTextResponse.includes('"power":"')) { + importText(beforeAfter(importCardTextResponse, '"power":"', '",') + '/' + beforeAfter(importCardTextResponse, '"toughness":"', '",'), 'Power Toughness') + } else { + importText('', 'Power Toughness') + } + /* + if (importCardTextResponse.includes('"loyalty":"') && version.currentVersion == 'planeswalker') { + importText(beforeAfter(importCardTextResponse, '"loyalty":"', '",'), 'Loyalty') + var abilityList = beforeAfter(importCardTextResponse, '"oracle_text":"', '",').replace(/ \\"/g, ' \u201C').replace(/\\"/g, '\u201D').split(/\\n/g) + for (var i = 0; i < abilityList.length; i++) { + var stringVersion = '' + switch(i) { + case 3: + stringVersion = 'Fourth' + break; + case 2: + stringVersion = 'Third' + break; + case 1: + stringVersion = 'Second' + break; + default: + stringVersion = 'First' + } + if (abilityList[i].slice(0, 4).includes(':')) { + importText(abilityList[i].split(/: (.+)?/)[1], stringVersion + ' Ability') + document.getElementById('inputPlaneswalker' + (i + 1) + 'Icon').value = abilityList[i].split(/: (.+)?/)[0] + } else { + importText('{left24}' + abilityList[i], stringVersion + ' Ability'); + document.getElementById('inputPlaneswalker' + (i + 1) + 'Icon').value = '' + } + if (document.getElementById('inputPlaneswalker' + (i + 1)).value < 1) { + document.getElementById('inputPlaneswalker' + (i + 1)).value = 1 + } + } + } + */ + document.getElementById('inputManaCost').value = beforeAfter(importCardTextResponse, '"mana_cost":"', '",') + document.getElementById('inputCardArtName').value = beforeAfter(importCardTextResponse, '"name":"', '",') + document.getElementById('inputSetCode').value = beforeAfter(importCardTextResponse, '"set":"', '",') + document.getElementById('inputSetRarity').value = beforeAfter(importCardTextResponse, '"rarity":"', '",')[0] + setSymbol.src = 'https://cors-anywhere.herokuapp.com/http://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=' + document.getElementById('inputSetCode').value + '&size=large&rarity=' + document.getElementById('inputSetRarity').value + inputCardArtName(beforeAfter(importCardTextResponse, '"name":"', '",')) +} +function importText(text, target) { + for (var i = 0; i < cardTextList.length; i++) { + if (cardTextList[i].name == target) { + cardTextList[i].text = text + } + } + document.getElementById('textPicker').children[0].click() + drawCardObjects() +} +function beforeAfter(targetString, beforeString, afterString) { + if (targetString.includes(beforeString) && targetString.includes(afterString)) { + return targetString.split(beforeString)[1].split(afterString)[0]; + } else { + return ''; + } +} + +function toggleTabs(clickedElement, targetId) { + Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('tabOptionSelected')) + clickedElement.classList.add('tabOptionSelected') + Array.from(document.getElementById(targetId).parentElement.children).forEach(element => element.classList.add('hidden')) + document.getElementById(targetId).classList.remove('hidden') +} + + + + + + + + + + + + + + + + + //Must run last: -cardMasterList.push(new cardPlaceholder('Card Art Placeholder', cardArt)) -cardMasterList.push(new cardPlaceholder('Text Placeholder', window['textCanvas'])) -cardMaster.insertBefore(cardMasterList[0].cardMasterElement(), cardMaster.children[0]) -cardMaster.insertBefore(cardMasterList[1].cardMasterElement(), cardMaster.children[0]) -drawCardObjects() \ No newline at end of file +initialize() \ No newline at end of file diff --git a/data/scripts/versionM15.js b/data/scripts/versionM15.js index ce4632fb..ea6768ab 100644 --- a/data/scripts/versionM15.js +++ b/data/scripts/versionM15.js @@ -21,4 +21,29 @@ new cardText('Power/Toughness', '', 0.1, 0.1, 0.8, 0.8, 'mplantin', 0.0177, 'bla artX = 0 artY = 0 artWidth = 1500 -artHeight = 500 \ No newline at end of file +artHeight = 500 +bottomInfoFunction = 'bottomInfoM15' + +manaCostXPath = 'scaleX(0.05) * manaSymbolIndex' +manaCostYPath = 'scaleY(0.1)' +manaCostDiameter = 'scaleX(0.05)' +manaCostShadowOffset = '[scaleX(-0.01), scaleY(0.01)]' + +setSymbolX = [scaleX(0.8), 'right'] +setSymbolY = [scaleY(0.5), 'left'] +setSymbolWidth = scaleX(0.1) +setSymbolHeight = scaleY(0.1) + +watermarkX = scaleX(0.5) +watermarkY = scaleY(0.5) +watermarkWidth = scaleX(1) +watermarkHeight = scaleY(1) + +function bottomInfoM15() { + bottomInfoContext.clearRect(0, 0, cardWidth, cardHeight) + writeText( + [ + {text: 'EEEEEEEE', x: 0, y: 0.05, width: 0.8, height: 0.05, font: 'mplantin', fontSize: 0.05, fontColor: 'black', otherParameters: ['oneLine=true']}, + ], bottomInfoContext) + // document.body.appendChild(bottomInfoCanvas) +} \ No newline at end of file diff --git a/data/site/styles.css b/data/site/styles.css index 5053f8aa..e1e3df8a 100644 --- a/data/site/styles.css +++ b/data/site/styles.css @@ -44,42 +44,52 @@ html { user-select: none; font-size: 20pt; } +body { + margin: 0px; +} +.cardMaster { + margin: 0.9rem 0px; +} .cardMasterElement { font: 1rem belerenbsc; - border: 1px solid black; - border-radius: 0.5rem; - margin-top: 0.125rem; + margin-top: 0.1rem; display: grid; - grid-template-columns: 2rem auto 1rem; + grid-template-columns: 2rem auto 2rem; align-items: center; + background: gray; } .cardMasterElement > .handle { cursor: move; - padding: 1rem 0.5rem; + padding: 0.5rem; text-align: center; - border: 1px solid green; } .cardMasterElementMoving { - background-color: gray; + background-color: #555; } .cardMasterElement > .delete { cursor: pointer; text-align: center; - border: 1px solid red; } .cardMasterElement.cardMasterElementSelected { - border: 5px solid green; + background: green; } .splitGrid { display: grid; - grid-template-columns: 50% 50%; + grid-template-columns: 1fr 1fr; + grid-gap: 0.1rem; +} +.autoGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); + grid-auto-rows: min-content; } .frameGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)); grid-auto-rows: min-content; + grid-gap: 0.1rem; } img { -webkit-user-drag: none; @@ -92,7 +102,6 @@ img { max-height: 260pt; overflow-y: auto; overflow-x: hidden; - border: 1px solid black; } #framePicker > div { height: 3rem; @@ -112,23 +121,65 @@ img { } #maskPicker > div, #framePicker > div { background-color: gray; - border: 1px solid blue; - border-radius: 0.25rem; } #maskPicker > div { - /*margin-left: 0.5rem;*/ - padding: 0.25rem; - /*width: calc(100% - 1.3rem);*/ + padding: 0.5rem; + margin-bottom: 0.1rem; } +#textPicker { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); + grid-auto-rows: min-content; + grid-gap: 0.1rem; + margin: 0.1rem 0px; +} #textPicker > div { - border: 1px solid black; - padding: 1rem; + font: 1rem belerenbsc; + background: gray; + padding: 0.5rem; } #textPicker > div.selectedText { - border: 5px solid green; + background: green; } canvas { - border:1px solid black; + background: gray; +} + +.hidden { + display: none; +} + + + +.mainGrid { + display: grid; + grid-template-columns: 750px auto; + grid-gap: 1rem; + background: #eeeeee; + padding: 1rem; + margin-bottom: 12rem; +} + +.tabPicker { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); + grid-auto-rows: min-content; + grid-gap: 0.1rem; + margin-bottom: 1rem; +} +.tabPicker > div { + font: 1rem belerenbsc; + text-align: center; + padding: 0.5rem; + background: gray; +} +.tabPicker > div.tabOptionSelected { + background: green; +} + +input, textarea, button, select { + font: 0.8rem mplantin; + width: 100%; } \ No newline at end of file diff --git a/index.html b/index.html index cd4de95a..c4547b51 100644 --- a/index.html +++ b/index.html @@ -7,53 +7,129 @@ - -
-
-
-
-
-
- - -
-
+
+ +
+
+
Frame
+
Text
+
Art
+
Set Symbol
+
Watermark
+
Collector
+
Import
+
+
+
+
+
+
+
+
+ + +
+
-
-
- X: - Y: - Scale: - Opacity: - Erase: -
-
-
-
-
- Text: - X: - Y: - Width: - Height: +
+
+ X: + Y: + Scale: + Opacity: + Erase: +
+
Upload your own frame images:
+
+ + +
+
+ + + + + + +
-
-
-
- - - - -
-
-
X, Y, & Zoom:
- - - -
-
-