diff --git a/new/data/images/aaam15WFull.png b/data/images/aaam15WFull.png similarity index 100% rename from new/data/images/aaam15WFull.png rename to data/images/aaam15WFull.png diff --git a/new/data/images/aam15WFull.png b/data/images/aam15WFull.png similarity index 100% rename from new/data/images/aam15WFull.png rename to data/images/aam15WFull.png diff --git a/new/data/images/corners.png b/data/images/corners.png similarity index 100% rename from new/data/images/corners.png rename to data/images/corners.png diff --git a/new/data/images/imageSpreadsheet.csv b/data/images/imageSpreadsheet.csv similarity index 100% rename from new/data/images/imageSpreadsheet.csv rename to data/images/imageSpreadsheet.csv diff --git a/new/data/images/m15AFull.png b/data/images/m15AFull.png similarity index 100% rename from new/data/images/m15AFull.png rename to data/images/m15AFull.png diff --git a/new/data/images/m15ALegendary.png b/data/images/m15ALegendary.png similarity index 100% rename from new/data/images/m15ALegendary.png rename to data/images/m15ALegendary.png diff --git a/new/data/images/m15APT.png b/data/images/m15APT.png similarity index 100% rename from new/data/images/m15APT.png rename to data/images/m15APT.png diff --git a/new/data/images/m15ARareStamp.png b/data/images/m15ARareStamp.png similarity index 100% rename from new/data/images/m15ARareStamp.png rename to data/images/m15ARareStamp.png diff --git a/new/data/images/m15BFull.png b/data/images/m15BFull.png similarity index 100% rename from new/data/images/m15BFull.png rename to data/images/m15BFull.png diff --git a/new/data/images/m15BLegendary.png b/data/images/m15BLegendary.png similarity index 100% rename from new/data/images/m15BLegendary.png rename to data/images/m15BLegendary.png diff --git a/new/data/images/m15BPT.png b/data/images/m15BPT.png similarity index 100% rename from new/data/images/m15BPT.png rename to data/images/m15BPT.png diff --git a/new/data/images/m15BRareStamp.png b/data/images/m15BRareStamp.png similarity index 100% rename from new/data/images/m15BRareStamp.png rename to data/images/m15BRareStamp.png diff --git a/new/data/images/m15CFull.png b/data/images/m15CFull.png similarity index 100% rename from new/data/images/m15CFull.png rename to data/images/m15CFull.png diff --git a/new/data/images/m15CLegendary.png b/data/images/m15CLegendary.png similarity index 100% rename from new/data/images/m15CLegendary.png rename to data/images/m15CLegendary.png diff --git a/new/data/images/m15CPT.png b/data/images/m15CPT.png similarity index 100% rename from new/data/images/m15CPT.png rename to data/images/m15CPT.png diff --git a/new/data/images/m15CRareStamp.png b/data/images/m15CRareStamp.png similarity index 100% rename from new/data/images/m15CRareStamp.png rename to data/images/m15CRareStamp.png diff --git a/new/data/images/m15GFull.png b/data/images/m15GFull.png similarity index 100% rename from new/data/images/m15GFull.png rename to data/images/m15GFull.png diff --git a/new/data/images/m15GLegendary.png b/data/images/m15GLegendary.png similarity index 100% rename from new/data/images/m15GLegendary.png rename to data/images/m15GLegendary.png diff --git a/new/data/images/m15GPT.png b/data/images/m15GPT.png similarity index 100% rename from new/data/images/m15GPT.png rename to data/images/m15GPT.png diff --git a/new/data/images/m15GRareStamp.png b/data/images/m15GRareStamp.png similarity index 100% rename from new/data/images/m15GRareStamp.png rename to data/images/m15GRareStamp.png diff --git a/new/data/images/m15MFull.png b/data/images/m15MFull.png similarity index 100% rename from new/data/images/m15MFull.png rename to data/images/m15MFull.png diff --git a/new/data/images/m15MLegendary.png b/data/images/m15MLegendary.png similarity index 100% rename from new/data/images/m15MLegendary.png rename to data/images/m15MLegendary.png diff --git a/new/data/images/m15MPT.png b/data/images/m15MPT.png similarity index 100% rename from new/data/images/m15MPT.png rename to data/images/m15MPT.png diff --git a/new/data/images/m15MRareStamp.png b/data/images/m15MRareStamp.png similarity index 100% rename from new/data/images/m15MRareStamp.png rename to data/images/m15MRareStamp.png diff --git a/new/data/images/m15MaskFrame.png b/data/images/m15MaskFrame.png similarity index 100% rename from new/data/images/m15MaskFrame.png rename to data/images/m15MaskFrame.png diff --git a/new/data/images/m15MaskPinline.png b/data/images/m15MaskPinline.png similarity index 100% rename from new/data/images/m15MaskPinline.png rename to data/images/m15MaskPinline.png diff --git a/new/data/images/m15MaskRules.png b/data/images/m15MaskRules.png similarity index 100% rename from new/data/images/m15MaskRules.png rename to data/images/m15MaskRules.png diff --git a/new/data/images/m15MaskTitle.png b/data/images/m15MaskTitle.png similarity index 100% rename from new/data/images/m15MaskTitle.png rename to data/images/m15MaskTitle.png diff --git a/new/data/images/m15MaskType.png b/data/images/m15MaskType.png similarity index 100% rename from new/data/images/m15MaskType.png rename to data/images/m15MaskType.png diff --git a/new/data/images/m15RFull.png b/data/images/m15RFull.png similarity index 100% rename from new/data/images/m15RFull.png rename to data/images/m15RFull.png diff --git a/new/data/images/m15RLegendary.png b/data/images/m15RLegendary.png similarity index 100% rename from new/data/images/m15RLegendary.png rename to data/images/m15RLegendary.png diff --git a/new/data/images/m15RPT.png b/data/images/m15RPT.png similarity index 100% rename from new/data/images/m15RPT.png rename to data/images/m15RPT.png diff --git a/new/data/images/m15RRareStamp.png b/data/images/m15RRareStamp.png similarity index 100% rename from new/data/images/m15RRareStamp.png rename to data/images/m15RRareStamp.png diff --git a/new/data/images/m15UFull.png b/data/images/m15UFull.png similarity index 100% rename from new/data/images/m15UFull.png rename to data/images/m15UFull.png diff --git a/new/data/images/m15ULegendary.png b/data/images/m15ULegendary.png similarity index 100% rename from new/data/images/m15ULegendary.png rename to data/images/m15ULegendary.png diff --git a/new/data/images/m15UPT.png b/data/images/m15UPT.png similarity index 100% rename from new/data/images/m15UPT.png rename to data/images/m15UPT.png diff --git a/new/data/images/m15URareStamp.png b/data/images/m15URareStamp.png similarity index 100% rename from new/data/images/m15URareStamp.png rename to data/images/m15URareStamp.png diff --git a/new/data/images/m15WFull.png b/data/images/m15WFull.png similarity index 100% rename from new/data/images/m15WFull.png rename to data/images/m15WFull.png diff --git a/new/data/images/m15WLegendary.png b/data/images/m15WLegendary.png similarity index 100% rename from new/data/images/m15WLegendary.png rename to data/images/m15WLegendary.png diff --git a/new/data/images/m15WPT.png b/data/images/m15WPT.png similarity index 100% rename from new/data/images/m15WPT.png rename to data/images/m15WPT.png diff --git a/new/data/images/m15WRareStamp.png b/data/images/m15WRareStamp.png similarity index 100% rename from new/data/images/m15WRareStamp.png rename to data/images/m15WRareStamp.png diff --git a/data/manaSymbols/0.png b/data/images/manaSymbols/0.png similarity index 100% rename from data/manaSymbols/0.png rename to data/images/manaSymbols/0.png diff --git a/data/manaSymbols/1.png b/data/images/manaSymbols/1.png similarity index 100% rename from data/manaSymbols/1.png rename to data/images/manaSymbols/1.png diff --git a/data/manaSymbols/10.png b/data/images/manaSymbols/10.png similarity index 100% rename from data/manaSymbols/10.png rename to data/images/manaSymbols/10.png diff --git a/data/manaSymbols/11.png b/data/images/manaSymbols/11.png similarity index 100% rename from data/manaSymbols/11.png rename to data/images/manaSymbols/11.png diff --git a/data/manaSymbols/12.png b/data/images/manaSymbols/12.png similarity index 100% rename from data/manaSymbols/12.png rename to data/images/manaSymbols/12.png diff --git a/data/manaSymbols/13.png b/data/images/manaSymbols/13.png similarity index 100% rename from data/manaSymbols/13.png rename to data/images/manaSymbols/13.png diff --git a/data/manaSymbols/14.png b/data/images/manaSymbols/14.png similarity index 100% rename from data/manaSymbols/14.png rename to data/images/manaSymbols/14.png diff --git a/data/manaSymbols/15.png b/data/images/manaSymbols/15.png similarity index 100% rename from data/manaSymbols/15.png rename to data/images/manaSymbols/15.png diff --git a/data/manaSymbols/16.png b/data/images/manaSymbols/16.png similarity index 100% rename from data/manaSymbols/16.png rename to data/images/manaSymbols/16.png diff --git a/data/manaSymbols/17.png b/data/images/manaSymbols/17.png similarity index 100% rename from data/manaSymbols/17.png rename to data/images/manaSymbols/17.png diff --git a/data/manaSymbols/18.png b/data/images/manaSymbols/18.png similarity index 100% rename from data/manaSymbols/18.png rename to data/images/manaSymbols/18.png diff --git a/data/manaSymbols/19.png b/data/images/manaSymbols/19.png similarity index 100% rename from data/manaSymbols/19.png rename to data/images/manaSymbols/19.png diff --git a/data/manaSymbols/2.png b/data/images/manaSymbols/2.png similarity index 100% rename from data/manaSymbols/2.png rename to data/images/manaSymbols/2.png diff --git a/data/manaSymbols/20.png b/data/images/manaSymbols/20.png similarity index 100% rename from data/manaSymbols/20.png rename to data/images/manaSymbols/20.png diff --git a/data/manaSymbols/21.png b/data/images/manaSymbols/21.png similarity index 100% rename from data/manaSymbols/21.png rename to data/images/manaSymbols/21.png diff --git a/data/manaSymbols/22.png b/data/images/manaSymbols/22.png similarity index 100% rename from data/manaSymbols/22.png rename to data/images/manaSymbols/22.png diff --git a/data/manaSymbols/23.png b/data/images/manaSymbols/23.png similarity index 100% rename from data/manaSymbols/23.png rename to data/images/manaSymbols/23.png diff --git a/data/manaSymbols/24.png b/data/images/manaSymbols/24.png similarity index 100% rename from data/manaSymbols/24.png rename to data/images/manaSymbols/24.png diff --git a/data/manaSymbols/25.png b/data/images/manaSymbols/25.png similarity index 100% rename from data/manaSymbols/25.png rename to data/images/manaSymbols/25.png diff --git a/data/manaSymbols/26.png b/data/images/manaSymbols/26.png similarity index 100% rename from data/manaSymbols/26.png rename to data/images/manaSymbols/26.png diff --git a/data/manaSymbols/27.png b/data/images/manaSymbols/27.png similarity index 100% rename from data/manaSymbols/27.png rename to data/images/manaSymbols/27.png diff --git a/data/manaSymbols/28.png b/data/images/manaSymbols/28.png similarity index 100% rename from data/manaSymbols/28.png rename to data/images/manaSymbols/28.png diff --git a/data/manaSymbols/29.png b/data/images/manaSymbols/29.png similarity index 100% rename from data/manaSymbols/29.png rename to data/images/manaSymbols/29.png diff --git a/data/manaSymbols/3.png b/data/images/manaSymbols/3.png similarity index 100% rename from data/manaSymbols/3.png rename to data/images/manaSymbols/3.png diff --git a/data/manaSymbols/30.png b/data/images/manaSymbols/30.png similarity index 100% rename from data/manaSymbols/30.png rename to data/images/manaSymbols/30.png diff --git a/data/manaSymbols/31.png b/data/images/manaSymbols/31.png similarity index 100% rename from data/manaSymbols/31.png rename to data/images/manaSymbols/31.png diff --git a/data/manaSymbols/32.png b/data/images/manaSymbols/32.png similarity index 100% rename from data/manaSymbols/32.png rename to data/images/manaSymbols/32.png diff --git a/data/manaSymbols/33.png b/data/images/manaSymbols/33.png similarity index 100% rename from data/manaSymbols/33.png rename to data/images/manaSymbols/33.png diff --git a/data/manaSymbols/34.png b/data/images/manaSymbols/34.png similarity index 100% rename from data/manaSymbols/34.png rename to data/images/manaSymbols/34.png diff --git a/data/manaSymbols/35.png b/data/images/manaSymbols/35.png similarity index 100% rename from data/manaSymbols/35.png rename to data/images/manaSymbols/35.png diff --git a/data/manaSymbols/36.png b/data/images/manaSymbols/36.png similarity index 100% rename from data/manaSymbols/36.png rename to data/images/manaSymbols/36.png diff --git a/data/manaSymbols/37.png b/data/images/manaSymbols/37.png similarity index 100% rename from data/manaSymbols/37.png rename to data/images/manaSymbols/37.png diff --git a/data/manaSymbols/38.png b/data/images/manaSymbols/38.png similarity index 100% rename from data/manaSymbols/38.png rename to data/images/manaSymbols/38.png diff --git a/data/manaSymbols/39.png b/data/images/manaSymbols/39.png similarity index 100% rename from data/manaSymbols/39.png rename to data/images/manaSymbols/39.png diff --git a/data/manaSymbols/4.png b/data/images/manaSymbols/4.png similarity index 100% rename from data/manaSymbols/4.png rename to data/images/manaSymbols/4.png diff --git a/data/manaSymbols/40.png b/data/images/manaSymbols/40.png similarity index 100% rename from data/manaSymbols/40.png rename to data/images/manaSymbols/40.png diff --git a/data/manaSymbols/41.png b/data/images/manaSymbols/41.png similarity index 100% rename from data/manaSymbols/41.png rename to data/images/manaSymbols/41.png diff --git a/data/manaSymbols/42.png b/data/images/manaSymbols/42.png similarity index 100% rename from data/manaSymbols/42.png rename to data/images/manaSymbols/42.png diff --git a/data/manaSymbols/43.png b/data/images/manaSymbols/43.png similarity index 100% rename from data/manaSymbols/43.png rename to data/images/manaSymbols/43.png diff --git a/data/manaSymbols/44.png b/data/images/manaSymbols/44.png similarity index 100% rename from data/manaSymbols/44.png rename to data/images/manaSymbols/44.png diff --git a/data/manaSymbols/45.png b/data/images/manaSymbols/45.png similarity index 100% rename from data/manaSymbols/45.png rename to data/images/manaSymbols/45.png diff --git a/data/manaSymbols/46.png b/data/images/manaSymbols/46.png similarity index 100% rename from data/manaSymbols/46.png rename to data/images/manaSymbols/46.png diff --git a/data/manaSymbols/47.png b/data/images/manaSymbols/47.png similarity index 100% rename from data/manaSymbols/47.png rename to data/images/manaSymbols/47.png diff --git a/data/manaSymbols/48.png b/data/images/manaSymbols/48.png similarity index 100% rename from data/manaSymbols/48.png rename to data/images/manaSymbols/48.png diff --git a/data/manaSymbols/49.png b/data/images/manaSymbols/49.png similarity index 100% rename from data/manaSymbols/49.png rename to data/images/manaSymbols/49.png diff --git a/data/manaSymbols/5.png b/data/images/manaSymbols/5.png similarity index 100% rename from data/manaSymbols/5.png rename to data/images/manaSymbols/5.png diff --git a/data/manaSymbols/50.png b/data/images/manaSymbols/50.png similarity index 100% rename from data/manaSymbols/50.png rename to data/images/manaSymbols/50.png diff --git a/data/manaSymbols/51.png b/data/images/manaSymbols/51.png similarity index 100% rename from data/manaSymbols/51.png rename to data/images/manaSymbols/51.png diff --git a/data/manaSymbols/52.png b/data/images/manaSymbols/52.png similarity index 100% rename from data/manaSymbols/52.png rename to data/images/manaSymbols/52.png diff --git a/data/manaSymbols/53.png b/data/images/manaSymbols/53.png similarity index 100% rename from data/manaSymbols/53.png rename to data/images/manaSymbols/53.png diff --git a/data/manaSymbols/54.png b/data/images/manaSymbols/54.png similarity index 100% rename from data/manaSymbols/54.png rename to data/images/manaSymbols/54.png diff --git a/data/manaSymbols/55.png b/data/images/manaSymbols/55.png similarity index 100% rename from data/manaSymbols/55.png rename to data/images/manaSymbols/55.png diff --git a/data/manaSymbols/56.png b/data/images/manaSymbols/56.png similarity index 100% rename from data/manaSymbols/56.png rename to data/images/manaSymbols/56.png diff --git a/data/manaSymbols/57.png b/data/images/manaSymbols/57.png similarity index 100% rename from data/manaSymbols/57.png rename to data/images/manaSymbols/57.png diff --git a/data/manaSymbols/58.png b/data/images/manaSymbols/58.png similarity index 100% rename from data/manaSymbols/58.png rename to data/images/manaSymbols/58.png diff --git a/data/manaSymbols/59.png b/data/images/manaSymbols/59.png similarity index 100% rename from data/manaSymbols/59.png rename to data/images/manaSymbols/59.png diff --git a/data/manaSymbols/6.png b/data/images/manaSymbols/6.png similarity index 100% rename from data/manaSymbols/6.png rename to data/images/manaSymbols/6.png diff --git a/data/manaSymbols/60.png b/data/images/manaSymbols/60.png similarity index 100% rename from data/manaSymbols/60.png rename to data/images/manaSymbols/60.png diff --git a/data/manaSymbols/61.png b/data/images/manaSymbols/61.png similarity index 100% rename from data/manaSymbols/61.png rename to data/images/manaSymbols/61.png diff --git a/new/data/images/manaSymbols/62.png b/data/images/manaSymbols/62.png similarity index 100% rename from new/data/images/manaSymbols/62.png rename to data/images/manaSymbols/62.png diff --git a/new/data/images/manaSymbols/63.png b/data/images/manaSymbols/63.png similarity index 100% rename from new/data/images/manaSymbols/63.png rename to data/images/manaSymbols/63.png diff --git a/data/manaSymbols/7.png b/data/images/manaSymbols/7.png similarity index 100% rename from data/manaSymbols/7.png rename to data/images/manaSymbols/7.png diff --git a/data/manaSymbols/8.png b/data/images/manaSymbols/8.png similarity index 100% rename from data/manaSymbols/8.png rename to data/images/manaSymbols/8.png diff --git a/data/manaSymbols/9.png b/data/images/manaSymbols/9.png similarity index 100% rename from data/manaSymbols/9.png rename to data/images/manaSymbols/9.png diff --git a/new/data/images/secondary.png b/data/images/secondary.png similarity index 100% rename from new/data/images/secondary.png rename to data/images/secondary.png diff --git a/new/data/images/stamp.png b/data/images/stamp.png similarity index 100% rename from new/data/images/stamp.png rename to data/images/stamp.png diff --git a/data/borders/imgFoil.png b/data/imgFoil.png similarity index 100% rename from data/borders/imgFoil.png rename to data/imgFoil.png diff --git a/new/data/m15 - Shortcut.lnk b/data/m15 - Shortcut.lnk similarity index 100% rename from new/data/m15 - Shortcut.lnk rename to data/m15 - Shortcut.lnk diff --git a/new/data/scripts/colors.js b/data/scripts/colors.js similarity index 100% rename from new/data/scripts/colors.js rename to data/scripts/colors.js diff --git a/new/data/scripts/setCodeList.js b/data/scripts/setCodeList.js similarity index 100% rename from new/data/scripts/setCodeList.js rename to data/scripts/setCodeList.js diff --git a/new/data/images/manaSymbols/48.png b/data/site/images/48.png similarity index 100% rename from new/data/images/manaSymbols/48.png rename to data/site/images/48.png diff --git a/data/site/images/background.png b/data/site/images/background.png index 5635fb38..52a5ff90 100644 Binary files a/data/site/images/background.png and b/data/site/images/background.png differ diff --git a/new/data/site/images/background.xcf b/data/site/images/background.xcf similarity index 100% rename from new/data/site/images/background.xcf rename to data/site/images/background.xcf diff --git a/new/data/site/images/hex.png b/data/site/images/hex.png similarity index 100% rename from new/data/site/images/hex.png rename to data/site/images/hex.png diff --git a/new/data/site/images/layerBackground.png b/data/site/images/layerBackground.png similarity index 100% rename from new/data/site/images/layerBackground.png rename to data/site/images/layerBackground.png diff --git a/new/data/site/images/lowpoly.png b/data/site/images/lowpoly.png similarity index 100% rename from new/data/site/images/lowpoly.png rename to data/site/images/lowpoly.png diff --git a/new/data/site/images/strip.png b/data/site/images/strip.png similarity index 100% rename from new/data/site/images/strip.png rename to data/site/images/strip.png diff --git a/new/data/site/images/strip.xcf b/data/site/images/strip.xcf similarity index 100% rename from new/data/site/images/strip.xcf rename to data/site/images/strip.xcf diff --git a/data/site/main.js b/data/site/main.js index 8d28d883..cc5d2ecf 100644 --- a/data/site/main.js +++ b/data/site/main.js @@ -1,74 +1,710 @@ //============================================// // Card Conjurer, by Kyle Burton // //============================================// -window.onscroll = function() {scrollFunction()} -window.onresize = function() {scrollFunction()} +//Define some variables +var cardWidth = 750, cardHeight = 1050 +var version = {} +var date = new Date() +document.getElementById("inputInfoNumber").value = date.getFullYear() +//Make all the canvases and their contexts +var mainCanvas = document.getElementById("mainCanvas") +mainCanvas.width = cardWidth +mainCanvas.height = cardHeight +var mainContext = mainCanvas.getContext("2d") +var canvasList = ["card", "mask", "image", "text", "paragraph", "line", "transparent", "crop", "bottomInfo", "setSymbol", "watermark", "temp"] +for (var i = 0; i < canvasList.length; i++) { + window[canvasList[i] + "Canvas"] = document.createElement("canvas") + window[canvasList[i] + "Canvas"].width = cardWidth + window[canvasList[i] + "Canvas"].height = cardHeight + window[canvasList[i] + "Context"] = window[canvasList[i] + "Canvas"].getContext("2d") +} +//Create the arrays that keeps track of what parts of the card are what +var cardMasterTypes = [] +var cardMasterImages = [] +var cardMasterOpacity = [] +var cardMasterOpacityValue = [] +//Mana symbol Array setup +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"] +var manaSymbolImageList = [] +//Manually create a few important images +var cardArt = new Image(), setSymbol = new Image(), watermark = new Image() +cardArt.crossOrigin = "anonymous" +setSymbol.crossOrigin = "anonymous" +watermark.crossOrigin = "anonymous" +cardArt.onload = function() { + updateCardCanvas() +} +setSymbol.onload = function() { + updateSetSymbolCanvas() +} +watermark.onload = function() { + updateWatermarkCanvas() +} +//Load the mana symbol images +loadManaSymbolImages() +//Load the CSV full of image data +loadImageSpreadsheet() -function scrollFunction() { - var scrollHeight = document.body.scrollTop - if (scrollHeight < 0) { - scrollHeight = 0 - } - var titleHeight = parseInt(window.innerWidth * 141 / 1236 - 10); - if (window.innerWidth >= 750) { - if (window.innerWidth >= 970) { - titleHeight = 100 + +//============================================// +// Functions // +//============================================// +//Load the CSV full of image data +function loadImageSpreadsheet() { + var xhttp = new XMLHttpRequest() + xhttp.onreadystatechange = function() { + if (this.readyState == 4) { + var rawText = xhttp.responseText.split("\n") + for (var i = 0; i < rawText.length; i ++) { + for (var n = 0; n < rawText[0].split(",").length; n++) { + if (i == 0) { + window[rawText[0].split(",")[n].trim() + "Array"] = [] + } else { + window[rawText[0].split(",")[n].trim() + "Array"][i - 1] = rawText[i].split(",")[n].trim() + } + } + if (i == rawText.length - 1) { + init() + } + } } - if (scrollHeight < titleHeight - 30) { - document.getElementById("header").style.maxHeight = titleHeight - scrollHeight - } else { - document.getElementById("header").style.maxHeight = "30px" - } - document.getElementsByClassName("mainGrid")[0].style.marginTop = titleHeight + 10 + } + xhttp.open("GET", "data/images/imageSpreadsheet.csv", true) + xhttp.send() +} +//After the csv has been loaded, the init function runs. +function init() { + //Loads the base version (m15) + changeVersionTo("m15") + //Loads all the masks + for (var i = 0; i < colorArray.length; i ++) { + if (colorArray[i] == "Mask") { + loadImage(i) + } + } + //Runs any tests. This should not do anything when published. + setTimeout(testFunction, 100) + checkCookies() +} +//Loads an image. Only actually loads images the first time each image is loaded, otherwise assigns it. +function loadImage(index, target = "none") { + if (window[nameArray[index]] == undefined) { + window[nameArray[index]] = new customImage(index, target) } else { - document.getElementsByClassName("mainGrid")[0].style.marginTop = 0 - document.getElementById("header").style.maxHeight = titleHeight + addToCardMaster(index, target) } } - -//Toggles the visibility of predetermined sections of the input boxes -function toggleView(targetId, targetClass) { - for (var i = 0; i < document.getElementsByClassName(targetClass).length; i++) { - document.getElementsByClassName(targetClass)[i].classList.remove("shown") +//Special image object +function customImage(index, target) { + this.loaded = false + this.index = index + this.image = new Image() + this.image.src = "data/images/" + nameArray[index] + ".png" + this.image.onload = function() { + window[nameArray[index]].loaded = true + addToCardMaster(index, target) } - document.getElementById(targetClass + "-" + targetId).classList.add("shown") } - -//Loads images from a file upload -function loadImage(event, destination) { +//Adds an image to the card master. Replaces the previous one if it already existed +function addToCardMaster(index, target) { + if (target == "preview") { + document.getElementById("imgPreview").src = window[nameArray[index]].image.src + return + } + if ((target == typeArray[index]) || (secondaryArray[index] && target.replace("Secondary", "")) == typeArray[index] || (typeArray[index] == "Full")) { + if (cardMasterTypes.includes(target)) { + cardMasterImages[cardMasterTypes.indexOf(target)] = window[nameArray[index]] + } else { + cardMasterImages[cardMasterTypes.length] = window[nameArray[index]] + cardMasterTypes[cardMasterTypes.length] = target + } + cardMasterUpdated() + } +} +//Runs through all the assigned card images and draws them in +function cardMasterUpdated() { + imageContext.clearRect(0, 0, cardWidth, cardHeight) + for (var i = 0; i < version.typeOrder.length; i ++) { + if (cardMasterTypes.includes(version.typeOrder[i])) { + imageContext.mask(cardMasterTypes.indexOf(version.typeOrder[i])) + } + } +} +//Custom function that draws onto a canvas using masks +CanvasRenderingContext2D.prototype.mask = function(cardMasterIndex) { + maskContext.clearRect(0, 0, cardWidth, cardHeight) + maskContext.globalCompositeOperation = "source-over" + if (cardMasterTypes[cardMasterIndex].includes("Secondary")) { + maskContext.drawImage(window[nameArray[nameArray.indexOf("secondary")]].image, 0, 0, cardWidth, cardHeight) + maskContext.globalCompositeOperation = "source-in" + } + var maskToUse = window[versionArray[cardMasterImages[cardMasterIndex].index] + "Mask" + cardMasterTypes[cardMasterIndex].replace("Secondary", "")] + if (maskToUse != undefined) { + maskContext.drawImage(maskToUse.image, xArray[maskToUse.index] * cardWidth, yArray[maskToUse.index] * cardHeight, widthArray[maskToUse.index] * cardWidth, heightArray[maskToUse.index] * cardHeight) + maskContext.globalCompositeOperation = "source-in" + } + var mainImageIndex = cardMasterImages[cardMasterIndex].index + maskContext.drawImage(cardMasterImages[cardMasterIndex].image, xArray[mainImageIndex] * cardWidth, yArray[mainImageIndex] * cardHeight, widthArray[mainImageIndex] * cardWidth, heightArray[mainImageIndex] * cardHeight) + this.drawImage(maskCanvas, 0, 0, cardWidth, cardHeight) + if (cardMasterTypes[cardMasterIndex].includes("RareStamp")) { + this.drawImage(window[nameArray[nameArray.indexOf("stamp")]].image, version.rareStampX, version.rareStampY, version.rareStampWidth, version.rareStampHeight) + } + updateImageCanvas() +} +//All the canvas functions +function updateImageCanvas() { + imageContext.globalCompositeOperation = "destination-out" + for (var i = 0; i < cardMasterOpacity.length; i ++) { + imageContext.globalAlpha = 1 - cardMasterOpacityValue[i] / 100 + //opacityc + opacityImage = window[version.currentVersion + "Mask" + cardMasterOpacity[i]].image + imageContext.drawImage(opacityImage, 0, 0, cardWidth, cardHeight) + } + imageContext.globalAlpha = 1 + imageContext.globalCompositeOperation = "source-over" + updateBottomInfoCanvas() +} +function updateTextCanvas() { + //post processing? + updateCardCanvas() +} +//Rewrites all the text! +function updateText() { + version.textList[whichTextIndex][1] = document.getElementById("inputText").value + textContext.clearRect(0, 0, cardWidth, cardHeight) + for (var i = 0; i < version.textList.length; i ++) { + var waitUntilIAmDone = textContext.writeText(version.textList[i][1], version.textList[i][2], version.textList[i][3], version.textList[i][4], version.textList[i][5], version.textList[i][6], version.textList[i][7], version.textList[i][8], version.textList[i][9]) + updateTextCanvas() + } +} +//figures out the placing of the set symbol +function updateSetSymbolCanvas() { + setSymbolContext.clearRect(0, 0, cardWidth, cardHeight) + var setSymbolWidth, setSymbolHeight, setSymbolX, setSymbolY + if (version.setSymbolWidth / version.setSymbolHeight < setSymbol.width / setSymbol.height) { + //wider + setSymbolWidth = version.setSymbolWidth + setSymbolHeight = version.setSymbolWidth / setSymbol.width * setSymbol.height + setSymbolX = version.setSymbolRight - setSymbolWidth + setSymbolY = version.setSymbolVertical - setSymbolHeight / 2 + } else { + //taller + setSymbolHeight = version.setSymbolHeight + setSymbolWidth = version.setSymbolHeight / setSymbol.height * setSymbol.width + setSymbolX = version.setSymbolRight - setSymbolWidth + setSymbolY = version.setSymbolVertical - setSymbolHeight / 2 + } + setSymbolContext.drawImage(setSymbol, setSymbolX, setSymbolY, setSymbolWidth, setSymbolHeight) + updateCardCanvas() +} +function updateWatermarkCanvas() { + if (document.getElementById("inputWatermarkPrimary").value != "none") { + watermarkContext.clearRect(0, 0, cardWidth, cardHeight) + var watermarkX, watermarkY, watermarkWidth, watermarkHeight + if (version.watermarkWidth / version.watermarkHeight < watermark.width / watermark.height) { + //wider + watermarkWidth = version.watermarkWidth + watermarkHeight = version.watermarkWidth / watermark.width * watermark.height + watermarkX = cardWidth / 2 - watermarkWidth / 2 + watermarkY = version.watermarkY - watermarkHeight / 2 + } else { + //taller + watermarkHeight = version.watermarkHeight + watermarkWidth = version.watermarkHeight / watermark.height * watermark.width + watermarkX = cardWidth / 2 - watermarkWidth / 2 + watermarkY = version.watermarkY - watermarkHeight / 2 + } + watermarkContext.drawImage(watermark, watermarkX, watermarkY, watermarkWidth, watermarkHeight) + watermarkContext.globalCompositeOperation = "source-atop" + watermarkContext.fillStyle = document.getElementById("inputWatermarkPrimary").value + watermarkContext.fillRect(0, 0, cardWidth, cardHeight) + if (document.getElementById("inputWatermarkSecondary").value != "none") { + tempContext.clearRect(0, 0, cardWidth, cardHeight) + tempContext.drawImage(window[nameArray[nameArray.indexOf("secondary")]].image, 0, 0, cardWidth, cardHeight) + tempContext.globalCompositeOperation = "source-atop" + 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" + updateCardCanvas() + } +} +//Does the bottom info function! This can be different depending on the version. +function updateBottomInfoCanvas() { + window[version.bottomInfoFunction]() +} +function updateCardCanvas() { + //clear it + cardContext.fillStyle = "black" + cardContext.fillRect(0, 0, cardWidth, cardHeight) + //draw the art, frame, text, mana symbols, set symbol, watermark... + cardContext.drawImage(cardArt, version.artX + getValue("inputCardArtX"), version.artY + getValue("inputCardArtY"), cardArt.width * getValue("inputCardArtZoom") / 100, cardArt.height * getValue("inputCardArtZoom") / 100) + cardContext.drawImage(imageCanvas, 0, 0, cardWidth, cardHeight) + cardContext.drawImage(watermarkCanvas, 0, 0, cardWidth, cardHeight) + cardContext.drawImage(textCanvas, 0, 0, cardWidth, cardHeight) + cardContext.drawImage(bottomInfoCanvas, 0, 0, cardWidth, cardHeight) + cardContext.drawManaCost(document.getElementById("inputManaCost").value, version.manaCostX, version.manaCostY, version.manaCostDiameter, version.manaCostDistance, version.manaCostDirection) + cardContext.drawImage(setSymbolCanvas, 0, 0, cardWidth, cardHeight) + //clear the corners + cardContext.globalCompositeOperation = "destination-out" + cardContext.drawImage(window[nameArray[nameArray.indexOf("corners")]].image, 0, 0, cardWidth, cardHeight) + cardContext.globalCompositeOperation = "source-over" + //paste it to the visible canvas + mainContext.clearRect(0, 0, cardWidth, cardHeight) + mainContext.drawImage(cardCanvas, 0, 0, cardWidth, cardHeight) +} +//Loads an image in from user input +function userLoadImage() { + loadImage(document.getElementById("inputImageIndex").value, "preview") +} +//Enters an image from user input +function userEnterImage() { + loadImage(document.getElementById("inputImageIndex").value, document.getElementById("inputImageType").value) +} +//Removes an image from user input +function userRemoveImage() { + if (cardMasterTypes.includes(document.getElementById("inputImageType").value) && document.getElementById("inputImageType").value != "Full") { + cardMasterImages.splice(cardMasterTypes.indexOf(document.getElementById("inputImageType").value), 1) + cardMasterTypes.splice(cardMasterTypes.indexOf(document.getElementById("inputImageType").value), 1) + cardMasterUpdated() + } +} +//Loads a script +function loadScript(scriptPath){ + var script = document.createElement("script") + script.setAttribute("type","text/javascript") + script.setAttribute("src", scriptPath) + if (typeof script != "undefined") { + document.getElementsByTagName("head")[0].appendChild(script) + } +} +//Adjusts values to the card size +function cwidth(inputWidth) { + return inputWidth / 750 * cardWidth +} +function cheight(inputHeight) { + return inputHeight / 1050 * cardHeight +} +//shortcut for parseInt(document.getElementById("").value) +function getValue(elementId) { + return parseFloat(document.getElementById(elementId).value) +} +//Changes the version +function changeVersionTo(versionToChangeTo) { + loadScript("data/versions/" + versionToChangeTo + "Version.js") +} +function finishChangingVersion() { + document.getElementById("inputImageType").innerHTML = "" + document.getElementById("inputImageTypeOpacity").innerHTML = "" + for (var i = 0; i < version.typeOrder.length; i ++) { + document.getElementById("inputImageType").innerHTML += "" + if (window[version.currentVersion + "Mask" + version.typeOrder[i]]) { + document.getElementById("inputImageTypeOpacity").innerHTML += "" + cardMasterOpacity[cardMasterOpacity.length] = version.typeOrder[i] + cardMasterOpacityValue[cardMasterOpacityValue.length] = 100 + } + } + for (var i = 0; i < version.textList.length; i ++) { + document.getElementById("inputWhichText").innerHTML += "" + } + hideShowColors(true) + loadOpacityValue() + updateText() + updateBottomInfoCanvas() + updateSetSymbolCanvas() +} +//Hides and shows the options in inputImageColor to match the selected type +function hideShowColors(enter = false) { + document.getElementById("inputImageIndex").innerHTML = "" + for (var i = 0; i < versionArray.length; i ++) { + if (versionArray[i] == version.currentVersion && (typeArray[i] == document.getElementById("inputImageType").value.replace("Secondary", "") || (typeArray[i] == "Full" && version.typeNotFull.includes(document.getElementById("inputImageType").value) == false)) && colorArray[i] != "Mask") { + document.getElementById("inputImageIndex").innerHTML += "" + } + } + if (enter) { + userEnterImage() + } + userLoadImage() +} +//Loads the opacity value +function loadOpacityValue() { + document.getElementById("inputOpacityValue").value = cardMasterOpacityValue[cardMasterOpacity.indexOf(document.getElementById("inputImageTypeOpacity").value)] +} +function opacityValueUpdated() { + cardMasterOpacityValue[cardMasterOpacity.indexOf(document.getElementById("inputImageTypeOpacity").value)] = document.getElementById("inputOpacityValue").value + cardMasterUpdated() +} +//Custom text function! This acts on any codes and makes things look nice :) +CanvasRenderingContext2D.prototype.writeText = function(text = "", textX = 0, textY = 0, textWidth = cardWidth, textHeight = cardHeight, textFont = "belerenbsc", inputTextSize = 38, textColor="black", other="") { + paragraphContext.clearRect(0, 0, cardWidth, cardHeight) + var textSize = inputTextSize + lineContext.font = textSize + "px " + textFont + lineContext.fillStyle = textColor + var otherParameters = other.split(",") + var outline, shadow = 0, oneLine = false, outlineWidth = 2, textAlign = "left", verticalAlign = true, lineSpace = 1 + for (var i = 0; i < otherParameters.length; i ++) { + eval(otherParameters[i]) + } + lineContext.strokeStyle = outline + lineContext.lineWidth = outlineWidth + var currentLineX = 0 + var currentLineY = textY + textSize * 0.45 + var uniqueSplitter = "9dn57gwbt4sh" + var splitString = text.replace(/ /g, uniqueSplitter + " " + uniqueSplitter).replace(/{/g, uniqueSplitter + "{").replace(/}/g, "}" + uniqueSplitter).split(uniqueSplitter) + splitString[splitString.length] = " " + var lastWordAdded = "" + for (var i = 0; i < splitString.length; i++) { + if (splitString[i] != "") { + var wordToWrite = splitString[i] + var finishLine = false + if (splitString[i].includes("{") && splitString[i].includes("}")) { + //It may be a code + wordToWrite = "" + possibleCodeLower = splitString[i].toLowerCase().replace("{", "").replace("}", "") + if (possibleCodeLower == "line" && !oneline) { + finishLine = true + } else if (possibleCodeLower == "linenospace" && ! oneline) { + finishLine = true + } else if (possibleCodeLower == "bar" || possibleCodeLower == "flavor") { + finishLine = true + var barWidth = manaSymbolImageList[63].width + var barHeight = manaSymbolImageList[63].height + paragraphContext.drawImage(manaSymbolImageList[63], textX + textWidth / 2 - barWidth / 2, currentLineY + textSize * 0.6, barWidth, barHeight) + currentLineY += textSize * 0.8 + if (possibleCodeLower == "flavor") { + lineContext.font = "italic " + (textSize - 3) + "px " + textFont + } + } else if (possibleCodeLower.includes("fontsize")) { + textSize += parseInt(possibleCodeLower.slice(8, possibleCodeLower.length)) + lineContext.font = textSize + "px " + textFont + } else if (possibleCodeLower == "i") { + lineContext.font = "italic " + textSize + "px " + textFont + } else if (possibleCodeLower == "/i") { + lineContext.font = textSize + "px " + textFont + } else if (possibleCodeLower == "center") { + textAlign = "center" + } else if (possibleCodeLower == "right") { + textAlign = "right" + } else if (possibleCodeLower == "left") { + textAlign = "left" + } else if (possibleCodeLower.includes("up")) { + currentLineY -= (parseInt(possibleCodeLower.slice(2, possibleCodeLower.length))) + } else if (possibleCodeLower.includes("down")) { + currentLineY += (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length))) + } else if (possibleCodeLower.includes("left")) { + currentLineX -= (parseInt(possibleCodeLower.slice(4, possibleCodeLower.length))) + } else if (possibleCodeLower.includes("right")) { + currentLineX += (parseInt(possibleCodeLower.slice(5, possibleCodeLower.length))) + } else if (possibleCodeLower == "artistbrush") { + var artistBrushWidth = textSize * 1.2 + lineContext.drawImage(manaSymbolImageList[62], currentLineX, currentLineY - artistBrushWidth * 0.58, artistBrushWidth, artistBrushWidth * 13 / 21) + currentLineX += artistBrushWidth * 1.1 + } else if (possibleCodeLower.includes("font")) { + textFont = possibleCodeLower.slice(5, possibleCodeLower.length) + lineContext.font = textSize + "px " + textFont + } else if (manaSymbolCodeList.includes(possibleCodeLower)) { + //THIS HAS TO BE THE LAST ONE + var manaSymbolDiameter = textSize * 0.77 + lineContext.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(possibleCodeLower)], currentLineX, currentLineY - manaSymbolDiameter * 0.95, manaSymbolDiameter, manaSymbolDiameter) + currentLineX += manaSymbolDiameter * 1.02 + } else { + wordToWrite = splitString[i] + } + } + if (wordToWrite != "" || finishLine == true) { + //We're left with a word. Write it. + var currentWordWidth = lineContext.measureText(wordToWrite).width + if (i == splitString.length - 1) { + //forces the last artificially added space to be too wide, making sure the last line is drawn in. + currentWordWidth = textWidth + 1 + } + if (currentLineX + currentWordWidth > textWidth || finishLine) { + //Finish the line + if (oneLine && i != splitString.length - 1) { + lineContext.clearRect(0, 0, cardWidth, cardHeight) + this.writeText(text, textX, textY, textWidth, textHeight, textFont, inputTextSize - 1, textColor, other) + return + } + var alignAdjust = 0 + if (textAlign == "center" || textAlign == "right") { + if (lastWordAdded == " ") { + currentLineX -= textContext.measureText(" ").width + } + if (textAlign == "center") { + alignAdjust = textWidth / 2 - currentLineX / 2 + textX + } else if (textAlign == "right") { + alignAdjust = textWidth + textX - currentLineX + } + } else { + alignAdjust += textX + } + paragraphContext.drawImage(lineCanvas, 0 + alignAdjust, 0, cardWidth, cardHeight) + lineContext.clearRect(0, 0, cardWidth, cardHeight) + currentLineY += textSize * lineSpace + currentLineX = 0 + if (wordToWrite == " ") { + currentWordWidth = 0 + } + } + //Whether or not the current line is finished, write to it. + if (shadow > 0) { + lineContext.fillText(wordToWrite, currentLineX + shadow, currentLineY + shadow) + } + if (outline != undefined) { + lineContext.strokeText(wordToWrite, currentLineX, currentLineY) + } + lineContext.fillText(wordToWrite, currentLineX, currentLineY) + currentLineX += currentWordWidth + lastWordAdded = wordToWrite + } + } + } + verticalAdjust = 0 + if (verticalAlign) { + verticalAdjust = (textHeight + textY - currentLineY + textSize) / 2 + } + this.drawImage(paragraphCanvas, 0, 0 + verticalAdjust, cardWidth, cardHeight) + return "done" +} +//Loads up all the mana symbol images +function loadManaSymbolImages() { + for (var i = 0; i < manaSymbolCodeList.length; i++) { + manaSymbolImageList[i] = new Image() + manaSymbolImageList[i].src = "data/images/manaSymbols/" + i + ".png" + } +} +//Draws a mana cost +CanvasRenderingContext2D.prototype.drawManaCost = function(text, symbolsX, symbolsY, diameter = 50, distance = -50, direction = "horizontal") { + var splitManaCost = text.replace(/{/g, " ").replace(/}/g, " ").split(" ") + var currentSymbolIndex = 0 + var currentX = symbolsX + var currentY = symbolsY + for (var i = splitManaCost.length - 1; i >= 0; i --) { + if (manaSymbolCodeList.includes(splitManaCost[i])) { + if (Array.isArray(direction) && i < direction.length) { + currentX = direction[i][0] + currentY = direction[i][1] + } + this.fillStyle = "black" + this.beginPath() + this.arc(currentX + diameter / 2.1, currentY + diameter / 1.8, diameter / 2, 0, 2 * Math.PI, false) + this.fill() + this.drawImage(manaSymbolImageList[manaSymbolCodeList.indexOf(splitManaCost[i])], currentX, currentY, diameter, diameter) + if (direction == "horizontal") { + currentX += distance + } else if (direction == "vertical") { + currentY += distance + } + } + } +} +//Changes the textarea content to whichever text is currently selected for editing +var whichTextIndex = 0 +function changeWhichText() { + for (var i = 0; i < version.textList.length; i ++) { + if (version.textList[i][0] == document.getElementById("inputWhichText").value) { + whichTextIndex = i + } + } + document.getElementById("inputText").value = version.textList[whichTextIndex][1] +} +//Removes all the white pixels in an image +var whiteThreshold = 240 +function whiteToTransparent(targetImage, source = targetImage.src) { + //Create image, size canvas, draw image + var imgTempTarget = new Image() + imgTempTarget.crossOrigin = "anonymous" + imgTempTarget.src = source + imgTempTarget.onload = function() { + if (imgTempTarget.width > 0 && imgTempTarget.height > 0) { + transparentCanvas.width = imgTempTarget.width + transparentCanvas.height = imgTempTarget.height + transparentContext.drawImage(imgTempTarget, 0, 0) + //declare variables + var width = transparentCanvas.width + var height = transparentCanvas.height + var imageData = transparentContext.getImageData(0, 0, transparentCanvas.width, transparentCanvas.height) + var x, y, index + //Go through every pixel and + for (y = 0; y < height; y++) { + for (x = 0; x < width; x++) { + index = (y * width + x) * 4 + if (imageData.data[index] >= whiteThreshold && imageData.data[index + 1] >= whiteThreshold && imageData.data[index + 2] >= whiteThreshold) { + imageData.data[index + 3] = 0 + } + } + } + transparentContext.clearRect(0, 0, width, height) + transparentContext.putImageData(imageData, 0, 0) + targetImage.src = transparentCanvas.toDataURL() + autocrop(targetImage) + } + } +} +//Removes all the whitespace in an image +function autocrop(targetImage, source = targetImage.src) { + //Create image, size canvas, draw image + var imgTempTarget = new Image() + imgTempTarget.crossOrigin = "anonymous" + imgTempTarget.src = source + imgTempTarget.onload = function() { + if (imgTempTarget.width > 0 && imgTempTarget.height > 0) { + cropCanvas.width = imgTempTarget.width + cropCanvas.height = imgTempTarget.height + cropContext.drawImage(imgTempTarget, 0, 0) + //declare variables + var width = cropCanvas.width + var height = cropCanvas.height + var pix = {x:[], y:[]} + var imageData = cropContext.getImageData(0, 0, cropCanvas.width, cropCanvas.height) + var x, y, index + if (imageData.data.length > 4) { + //Go through every pixel and + for (y = 0; y < height; y++) { + for (x = 0; x < width; x++) { + //(y * width + x) * 4 + 3 calculates the index at which the alpha value of the pixel at x, y is given + index = (y * width + x) * 4 + 3 + if (imageData.data[index] > 0) { + //pix is the image object that stores two arrays of x and y coordinates. These stored coordinates are all the visible pixels + pix.x.push(x) + pix.y.push(y) + } + } + } + //sorts the arrays numerically + pix.x.sort(function(a,b){return a-b}) + pix.y.sort(function(a,b){return a-b}) + var n = pix.x.length - 1 + //Finds the difference between the leftmost and rightmost visible pixels, and the topmost and bottommost pixels, cuts out a section of the canvas + width = pix.x[n] - pix.x[0] + height = pix.y[n] - pix.y[0] + var cropped = cropContext.getImageData(pix.x[0], pix.y[0], width + 1, height + 1) + //Resizes the canvas and draws cropped image + cropCanvas.width = width + 1 + cropCanvas.height = height + 1 + cropContext.putImageData(cropped, 0, 0) + //Saves the newly cropped image to the given image + targetImage.src = cropCanvas.toDataURL() + } + } + } +} +//The next several functions are all about loading images! +function uploadImage(event, destination) { var input = event.target var reader = new FileReader() reader.onload = function() { var dataURL = reader.result destination.src = dataURL - destination.cropped = false - if (destination == imgWatermark) { - imgWatermark.whiteToTransparent = false - } } reader.readAsDataURL(input.files[0]) } +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_ids":')) + } + 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] + updateBottomInfoCanvas() +} +//Downloads the image! +function downloadCardImage(linkElement) { + if (document.getElementById("inputInfoArtist").value.replace(/ /g, "") != "") { + linkElement.download = version.textList[0][1].toLowerCase().replace(/ /g, "_") + ".png" + if (linkElement.download == ".png") { + linkElement.download = "card.png" + } + } else { + event.preventDefault() + alert("You must properly credit an artist before downloading") + } + var cardImageData = cardCanvas.toDataURL() + if (cardImageData == undefined) { + alert("Sorry, it seems that you cannot download your card. Please try using a different browser/device.") + } + linkElement.href = cardImageData +} +//Toggles the visibility of tooltips +function toggleTooltips(revealed = true) { + var tooltipList = document.getElementsByClassName("tooltiptext") + for (var i = 0; i < tooltipList.length; i ++) { + if (revealed) { + tooltipList[i].classList.remove("hidden") + } else { + tooltipList[i].classList.add("hidden") + } + } + setCookie("tooltipsToggled", revealed + "") +} -//closes alerts -var close = document.getElementsByClassName("closebtn") -for (var i = 0; i < close.length; i++) { - close[i].onclick = function() { - parentDiv = this.parentElement - parentDiv.style.opacity = "0" - setTimeout(function() {parentDiv.style.display = "none"}, 250) + + + + +//DELETE: (for testing purposes only) +function testFunction() { + loadScript("data/scripts/setCodeList.js") +} + + + +function setCookie(cookieName, cookieValue, cookieTime = (5 * 365 * 24 * 60 * 60 * 1000)) { //years*days*hours*minutes*seconds*milliseconds + var tempDate = new Date(); + tempDate.setTime(tempDate.getTime() + cookieTime); + var expires = "expires=" + tempDate.toUTCString(); + document.cookie = cookieName + "=" + cookieValue + ";" + expires + ";path=/"; +} +function getCookie(cookieName) { + var name = cookieName + "="; + var cookieArray = document.cookie.split(";"); + for(var i = 0; i < cookieArray.length; i++) { + var tempCookie = cookieArray[i]; + while (tempCookie.charAt(0) == " ") { + tempCookie = tempCookie.substring(1); + } + if (tempCookie.indexOf(name) == 0) { + return tempCookie.substring(name.length, tempCookie.length); + } + } + return ""; +} +function checkCookies() { + if (getCookie("tooltipsToggled") == "false") { + toggleTooltips(false) + document.getElementById("tooltipToggler").checked = false } } -function createAlert(type, message) { - var newAlert = document.createElement("DIV") - newAlert.innerHTML = message - newAlert.classList.add("alert", type) - document.getElementById("alertMenu").appendChild(newAlert) - newAlert.onclick = function() { - this.style.opacity = "0" - setTimeout(function() {newAlert.classList.add("hidden")}, 250) - } -} -//things to run at the end: -scrollFunction() \ No newline at end of file + +/*To do list: +watermarks + + + + + +possibly border color? +*/ \ No newline at end of file diff --git a/data/life/NoSleep.js b/data/site/other/life/NoSleep.js similarity index 100% rename from data/life/NoSleep.js rename to data/site/other/life/NoSleep.js diff --git a/new/data/site/other/life/life.js b/data/site/other/life/life.js similarity index 100% rename from new/data/site/other/life/life.js rename to data/site/other/life/life.js diff --git a/data/life/menuButton.png b/data/site/other/life/menuButton.png similarity index 100% rename from data/life/menuButton.png rename to data/site/other/life/menuButton.png diff --git a/data/life/menuExitButton.png b/data/site/other/life/menuExitButton.png similarity index 100% rename from data/life/menuExitButton.png rename to data/site/other/life/menuExitButton.png diff --git a/data/site/styles.css b/data/site/styles.css index f2ec249a..61e00aa4 100644 --- a/data/site/styles.css +++ b/data/site/styles.css @@ -35,309 +35,228 @@ font-family: goudymedieval; src: url("../fonts/goudy-medieval.ttf"); } - :root { - /*Color Palette*/ - /*Regular*/ - --color-background: #00000077; - --color-background-darker: #000000aa; - --color-primary: #073c00; - --color-select: #0b6b00; -} - -/*Page-wide styling*/ -* { - font-family: belerenb; - font-size: 16pt; /*Master font size*/ - user-select: none; - color: #eee; -} -html { - background-color: #333; -} -body { - margin: 0; -} - -/*Grid styling*/ -.grid { - display: grid; -} -.mainGrid > div { - border-style: solid; - border-color: var(--color-primary); - border-width: 1px 1px 0px 1px; - width: calc(100% - 2px); -} -.mainGrid > div:nth-child(odd) { - background: var(--color-background); -} -.mainGrid > div:nth-child(even) { - background: var(--color-background-darker); -} -.selectionGrid { - grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); - text-align: center; -} -.mainGrid > div.canvasContainer { - padding: 0; - text-align: center; -} -#canvas { - display: block; - max-width:750px; - width: 100%; - height: auto; - margin: 0px auto; -} - -/*Card manipulation menu grid*/ -.selectionGrid > div { - font-size: 1.1em; - font-family: belerenbsc; - cursor: pointer; - padding: 0.1em; - border: 0.05em solid var(--color-primary); - background-color: var(--color-background); - -webkit-transition: 0.3333s; - transition: 0.3333s; -} -.selectionGrid > div:hover { - border: 0.15em solid var(--color-select); - padding: 0px; -} -.padded { - padding: 1em; -} -.paddedVertical { - padding: 1em 0px; -} -.cmm, .extras { - display: none; -} -.shown { - display: block; -} -.sampleCard { - width: 100%; -} - -/*Inputs and more*/ -/*dropdown*/ -.dropdown { - position: relative; - display: inline-block; - width: 100%; -} -.dropdown select { - padding-left: 0.25em; - width: inherit; - cursor: pointer; - -moz-appearance: none; - -webkit-appearance:none; - appearance: none; -} -.dropdown select option::hover { - /*nothing for now :)*/ -} -.dropdown::after { - content: "\25BC"; - font-size: 0.6em; - position: absolute; - pointer-events: none; - right: 0.6em; - top: 0.5em; -} -/*checkbox*/ -.checkbox { - height: 1em; - margin: 0.1em 0px 0.3em 0px; - position: relative; -} -.checkbox label { - display: inline-block; - width: calc(1.2em - 6px); - height: calc(1.2em - 6px); - border: 3px solid var(--color-select); - border-radius: 0.25em; - position: absolute; - top: 0px; - left: 0px; - cursor: pointer; - -webkit-transition: 0.5s; - transition: 0.5s; -} -.checkbox input:checked ~ label { - background: var(--color-select); - border: 3px solid var(--color-primary); -} -.checkbox > input { - opacity: 0; -} -.checkbox div { - white-space: pre; - position: relative; - top: -0.1em; - left: 1.3em; -} -/*other inputs*/ -input[type="text"], input[type="number"], textarea, input[type="file"] { - width: 100%; - padding-left: 0.25em; -} -/*color selector*/ -input[type="color"] { - padding: 0px; -} -.input { - background: var(--color-primary); - border-radius: 0.25em; - border: 1px solid var(--color-select); -} - -/*Hyperlinks*/ -a:link, a:visited { - color: #fff; -} -a:hover, a:active { - color: #999; -} -a { - -webkit-transition: 0.3333s; - transition: 0.3333s; -} - -/*Desktop*/ -@media only screen and (min-width: 750px) { - html { - background: url("images/background.png") no-repeat center center fixed; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - } - * { - font-size: 20pt; /*Master font size*/ - } - header { - top: 0; - } - footer { - bottom: 0; - } - header, footer { - position: fixed; - width: 100%; - z-index: 1000; - } - footer > #alertMenu { - position: static; - } - #header { - max-height: 100px; - width: auto; - } - .mainGrid { - margin-top: 110px; - margin-bottom: 1.1em; - } -} -@media only screen and (min-width: 1175px) { - .mainGrid { - grid-template-columns: 750px auto; - } - .mainGrid > div:not(.canvasContainer):not(.cmmArea) { - grid-column: 1 / span 2; - } - /*.sampleGrid { - grid-column: 1 / span 2; - }*/ -} -@media only screen and (orientation: landscape) { - .sampleCard { - width: 32.8%; - } -} - - -/*Header and Footer*/ -#header { - width: auto; -} -header, .footer { - text-align: center; - background-color: black; - padding: 5px 0px; -} -footer * { - font-size: inherit; - padding: 0.25em + --shifting-color-1: rgb(128, 237, 18); + --shifting-color-1-light: rgb(255, 255, 168); + --light-color: #eee; + --dark-color: #333; } footer { - font-size: 0.8em; + background-color: var(--dark-color); + padding: 2.5em; + font: 1.3em gothammedium; + color: var(--light-color); } - -/*symbol grid*/ -.manaSymbol > img { - position: relative; +body { + margin: 0px; + background-image: url(images/lowpoly.png); + background-attachment: fixed; + background-size: cover; +} +html { + background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light)); + background-attachment: fixed; + overflow-x: hidden; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-size: 8pt; +} +canvas { + width: calc(100%); + height: auto; + max-width: 750px; + max-height: 1050px; +} +.canvasContainer { + text-align: center; +} +.mainGrid { + padding: 0.3em; + display: grid; + grid-gap: 1.5em; + grid-template-columns: auto; + font: 1.6em mplantin; +} +.imageGrid { + display: grid; + grid-template-columns: auto 9em; + min-height: 12.5em; +} +.imgPreview { + width: 100%; +} +.bar { + background-image: url(../images/manaSymbols/63.png); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 2px; + width: 100%; height: 1em; } -.symbolGrid { - grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr)); +.cardMenu > div > div:nth-child(1) { + /*border: 1px solid blue;*/ text-align: center; + font: 1.5em belerenbsc; } -.symbolGrid > div { - border: 0.1em solid var(--color-background); - border-radius: 1em; - background-color: var(--color-primary); +.twoGrid { + display: grid; + grid-template-columns: 50% auto; } - -/*Sitewide text (bottom of the page)*/ -.miniTitle { - font-family: belerenbsc; - text-align: center; - font-size: 1.2em; - padding-bottom: 0.125em; +.input, .textarea, .button, .select { + font: 1em mplantin; + background-color: var(--light-color); + border: 1px solid #aaae; + border-radius: 0.2em; + padding: 0px 0.2em; + outline: none; } -.paragraph { - padding-bottom: 0.25em; - text-indent: 2em; +.textarea { + min-height: 6em; + max-height: 18em; + resize: vertical; } -/*Donation buttons!*/ -.donateGrid { - grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); +.select { + background: #fafafa url(../images/manaSymbols/49.png) no-repeat calc(100% - 0.1em) 50%; + background-size: 1em 1em; + -webkit-appearance: none; } -.donateGrid.grid > div { - font-size: 1.7em; +.autoGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(6em, 1fr)); + grid-auto-rows: min-content; } -.donateGrid > div > img { +.input.file { + padding: 0px; + height: 1.26em; +} +.tooltip { position: relative; - top: 0.25em; - left: 0.5em; - height: 1.7em; } - - - -#alertMenu { - position: fixed; - bottom: 0; +.tooltip .tooltiptext { + visibility: hidden; + background-color: var(--dark-color); + color: var(--light-color); + text-align: center; + border-radius: 5px; + padding: 5px; + top: calc(100% + 5px); + left: 0px; + max-width: calc(100% - 10px); + width: auto; + position: absolute; + z-index: 1; + opacity: 0; + transition: opacity 0.5s; } -.alert { - opacity: 1; - padding: 0.25em; - cursor: pointer; - transition: 0.25s; - border: 0px solid var(--color-select); +.tooltip .tooltiptext::after { + content: " "; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent var(--dark-color) transparent; } -.alert:hover { - border-width: 0.15em; - padding: 0.1em; +.tooltip .tooltiptext:hover { + /*visibility: hidden;*/ + opacity: 0; +} +div.tooltip > * { + width: 100%; +} +a { + color: black; +} +a:hover { + color: var(--dark-color); +} +footer a { + color: white; +} +footer a:hover { + color: var(--shifting-color-1-light); } -.alert.info {background-color: var(--color-primary);} -.alert.conflict {background-color: #b37d07;} -.alert.warning {background-color: #3b0000;} - .hidden { display: none; +} +.footerGrid { + display: grid; + grid-template-columns: auto; + grid-gap: 2em; +} +.layer { + padding: 2em 2em; + color: black; + font-size: 2em; + text-align: center; +} +.layer:nth-child(even) { + background-color: var(--light-color); + background-image: url(images/layerBackground.png); + background-position: center; + background-repeat: no-repeat; +} +.title { + font: 1.5em belerenbsc; +} +.pageTitle { + font: 5em belerenbsc; + text-align: center; + padding-top: 0.3em; +} +.paragraph { + font: 1em mplantin; + text-align: left; +} +.indent { + text-indent: 2em; +} +.leftMargin { + margin-left: 2em; +} + +/*Controls the area taken by the canvas*/ +@media screen and (min-width: 888pt) { + /*Makes room for the canvas and controls to be side by side*/ + .mainGrid { + padding: 1.5em; + grid-template-columns: calc(750px + 2px) auto; + } +} +@media screen and (min-width: calc(750px + 2em)) { + /*The canvas can be full size and doesn't have to scale anymore*/ + canvas { + width: 750px; + height: 1050px; + } +} +/*The screen is big enough (larger than phone, likely) to use a larger font*/ +@media screen and (min-width: 263pt) { + html { + font-size: 10pt; + } +} +/*These control tooltips for mobile devices vs. desktops/laptops*/ +@media screen and (min-width: 1024px) { + .tooltip:hover .tooltiptext { + visibility: visible; + opacity: 1; + } +} +@media screen and (max-width: 1023px) { + .tooltip:focus .tooltiptext, div.tooltip > input:focus + .tooltiptext, div.tooltip > textarea:focus + .tooltiptext { + visibility: visible; + opacity: 1; + } +} +/*The footer can now fit horizontally!*/ +@media screen and (min-width: 375pt) { + .footerGrid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(0px, 1fr)); + grid-gap: 1em; + } } \ No newline at end of file diff --git a/new/data/versions/m15Version.js b/data/versions/m15Version.js similarity index 100% rename from new/data/versions/m15Version.js rename to data/versions/m15Version.js diff --git a/new/disclaimer.html b/disclaimer.html similarity index 100% rename from new/disclaimer.html rename to disclaimer.html diff --git a/index.html b/index.html index ab16f6d2..ce99cd44 100644 --- a/index.html +++ b/index.html @@ -2,321 +2,117 @@ Card Conjurer - - - - - - - - - - - + - - -
-
-
- - -
- -
- -
-
-
-
Frame
-
Text
-
Info
-
Art
-
Set Symbol
-
Watermark
-
Advanced
-
Download
- - +
+ Card Conjurer +
+
+
+
+
-
-
- Border - - - -

- Frame - - - -
-
- -