gallery

.gitignore

@@ -5,3 +5,4 @@ data/borders/.DS_Store
 data/borders/m15/.DS_Store
 gallery/buildImageList.bat
 gallery/buildImageList.py
+debug.log

gallery/gallery.css

@@ -0,0 +1,87 @@
+#imageGallery {
+	margin-top: 2rem;
+	width: 100%;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
+	grid-auto-rows: min-content;
+	grid-gap: 1rem;
+	justify-items: center;
+	align-items: center;
+}
+
+
+
+.galleryCard {
+	/*margin: 1rem;*/
+	cursor: pointer;
+	width: 375px;
+	height: 525px;
+	transition: 2s;
+	text-align: center;
+}
+.galleryCard > img {
+	z-index: 1;
+}
+.galleryCard > div {
+	position: relative;
+	top: -2rem;
+	left: 0;
+	z-index: -1;
+}
+
+
+
+.galleryHidden {
+	opacity: 0;
+}
+.galleryVisible {
+	opacity: 1;
+}
+
+
+
+.filterHidden {
+	display: none;
+}
+
+
+
+#fullImageViewbox {
+	display: none;
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	backdrop-filter: brightness(40%) blur(8px);
+	-webkit-backdrop-filter: brightness(40%) blur(8px);
+	text-align: center;
+	cursor: pointer;
+}
+#fullImageViewbox.visible {
+	display: block;
+}
+#fullImageViewbox > img {
+	margin: 1rem;
+	height: calc(100% - 2rem);
+	width: auto;
+	cursor: default;
+	animation-duration: 0.5s;
+}
+#fullImageViewbox.visible > img.visible {
+	animation-name: previewIn;
+}
+#fullImageViewbox.visible > img:not(.visible) {
+	animation-name: previewOut;
+	position: relative; top: 100vh;
+	animation-duration: 0.3s;
+}
+
+@keyframes previewIn {
+	from {position: relative; top: 100vh;}
+	to {position: relative; top: 0;}
+}
+@keyframes previewOut {
+	from {position: relative; top: 0;}
+	to {position: relative; top: 100vh;}
+}

gallery/gallery.js

@@ -0,0 +1,79 @@
+var imageElementList = []
+const imageHeight = 525
+var windowY
+
+function readGalleryImageList() {
+	var xhttp = new XMLHttpRequest()
+	xhttp.onreadystatechange = function() {
+		if (this.readyState == 4 && this.status == 200) {
+			buildHTML(this.responseText.split('\n'))
+		}
+	}
+	xhttp.open('GET', '/gallery/galleryImageNameList.txt', true)
+	xhttp.send()
+}
+
+readGalleryImageList()
+
+function buildHTML(imageNameList) {
+	imageNameList.forEach(function(item) {
+		var element = document.createElement('div')
+		var label = document.createElement('div')
+		var image = document.createElement('img')
+		element.classList = 'galleryCard galleryHidden'
+		if (item.includes('Wasteland.png')) {
+			element.classList += ' filterHidden'
+		}
+		image.imageName = item
+		image.addEventListener('click', zoomImage)
+		label.innerHTML = item.replace('.png', '').replace('_', ' ')
+		element.appendChild(image)
+		element.appendChild(label)
+		document.getElementById('imageGallery').appendChild(element)
+		imageElementList.push(element)
+	})
+	scrollEvent()
+}
+
+function zoomImage(event) {
+	document.getElementById('fullImage').src = '/gallery/images/fullres/' + event.target.imageName
+	document.getElementById('fullImage').classList = 'visible'
+	document.getElementById('fullImageViewbox').classList = 'visible'
+	windowY = window.scrollY
+}
+
+function unzoomImage(event) {
+	if (event.target.id != 'fullImage') {
+		document.getElementById('fullImage').classList = ''
+		setTimeout(function(){document.getElementById('fullImageViewbox').classList = ''}, 300)
+	}
+}
+
+window.addEventListener('scroll', scrollEvent, false)
+
+function scrollEvent() {
+	if (document.getElementById('fullImageViewbox').classList == 'visible') {
+		window.scrollTo(0, windowY)
+		return
+	}
+	windowInnerHeight = window.innerHeight
+	imageElementList.forEach(function(element) {
+		boundingRect = element.getBoundingClientRect()
+		if (element.classList.contains('galleryHidden') && boundingRect.bottom >= 0 && boundingRect.top - windowInnerHeight <= 0) {
+			element.children[0].src = '/gallery/images/preview/' + element.children[0].imageName
+			element.classList.replace('galleryHidden', 'galleryVisible')
+		}
+	})
+}
+
+function sort(word) {
+	imageElementList.forEach(function(element) {
+		if (!element.classList.contains('filterHidden')) {
+			element.classList.add('filterHidden')
+		}
+		if (element.children[1].innerHTML.toLowerCase().includes(word.toLowerCase())) {
+			element.classList.remove('filterHidden')
+		}
+	})
+	scrollEvent()
+}

gallery/galleryImageNameList.txt

@@ -0,0 +1,250 @@
+Craterhoof Behemoth.png
+Wasteland.png
+Baron Sengir.png
+Turntimber Symbiosis.png
+Shatterskull Smashing.png
+Agadeem's Awakening.png
+Emeria's Call.png
+sea_gate,_reborn.png
+odric,_steadfast_leader (2).png
+sea_gate_restoration.png
+thalia.png
+odric.png
+creeper,_child_of_notch.png
+not_the_impostor....png
+polluted_delta.png
+the_vent.png
+the_reactor.png
+who_is_the_imposter_.png
+emergency_meeting.png
+murder.png
+aurra_sing,_bounty_hunter.png
+dryden_vos,_crime_lord (1).png
+dryden_vos,_crime_lord.png
+breeding_pool (2).png
+sacred_foundry (2).png
+overgrown_tomb (2).png
+steam_vents (2).png
+godless_shrine (2).png
+windswept_heath (2).png
+fellwar stone.png
+kozilek,_the_great_distortion.png
+ulamog,_the_ceaseless_hunger.png
+emrakul,_the_promised_end (2).png
+aang's_epic_armor.png
+sokka,_veteran_combatant.png
+piandao,_master_swordsman.png
+animar,_soul_of_elements.png
+emrakul,_the_aeons_torn.png
+ulamog,_the_infinite_gyre.png
+kozilek,_butcher_of_truth (2).png
+emeria_angel.png
+temple_garden (2).png
+wooded_foothills (1).png
+stomping_ground (2).png
+bloodstained_mire (2).png
+blood_crypt (2).png
+watery_grave (2).png
+flooded_strand (3).png
+hallowed_fountain (2).png
+command_tower (2).png
+helm_of_the_host.png
+vanquisher's_banner.png
+dryad_of_the_ilysian_grove (2).png
+deadeye_navigator .png
+talisman_of_curiosity.png
+talisman_of_hierarchy.png
+panharmonicon.png
+yarok,_the_desecrated.png
+brago,_king_eternal.png
+wooded_foothills (2).png
+flooded_strand (2).png
+mountain.png
+forest.png
+island.png
+swamp.png
+mana_confluence (2).png
+valakut,_the_molten_pinnacle.png
+double_identity.png
+karn's_bastion.png
+nesting_grounds.png
+mana_confluence.png
+metallic_mimic.png
+the_ozolith.png
+lightning_greaves.png
+blood_artist.png
+manascape_refractor.png
+dimir_signet (1).png
+rakdos_signet.png
+arcane_signet.png
+chromatic_lantern.png
+phyrexian_metamorph.png
+phyrexian_altar (1).png
+sol_ring (2).png
+zurzoth,_chaos_rider.png
+maze_of_ith.png
+hammer_of_nazahn.png
+sword_of_feast_and_famine (2).png
+gaea's_cradle (3).png
+gaea's_cradle (2).png
+gaea's_cradle (1).png
+gaea's_cradle.png
+revel_in_riches.png
+skullclamp.png
+ashnod's_altar.png
+jhoira,_weatherlight_captain.png
+avenger_of_zendikar.png
+doubling_season.png
+solemn_simulacrum.png
+mox_opal.png
+the_storm_crow.png
+sword_of_feast_and_famine.png
+academy_ruins (3).png
+academy_ruins (2).png
+academy_ruins (1).png
+academy_ruins.png
+blood_moon.png
+sword_of_fire_and_ice.png
+cyclonic_rift.png
+thriving_heath.png
+thriving_grove.png
+thriving_moor.png
+thriving_bluff.png
+crystals_of_mutation.png
+demonic_tutor.png
+aven_mindcensor.png
+opt.png
+return_of_the_wildspeaker.png
+buried_ruin.png
+whispersilk_cloak.png
+mystic_remora.png
+force_of_vigor.png
+generous_gift.png
+farseek (1).png
+farseek.png
+orzhov_signet.png
+liliana's_caress.png
+hall_of_heliod's_generosity.png
+oath_of_nissa.png
+nykthos,_shrine_to_nyx (1).png
+inventors'_fair.png
+steelshaper's_gift.png
+sword_of_light_and_shadow.png
+sword_of_sinew_and_steel.png
+sword_of_truth_and_justice.png
+chandra's_ignition.png
+ash_barrens (1).png
+true_conviction.png
+coalition_relic.png
+talisman_of_conviction.png
+boros_signet.png
+azorius_signet.png
+phyrexian_altar.png
+craterhoof_behemoth.png
+beastmaster_ascension.png
+goblin_bombardment.png
+bloodstained_mire.png
+growing_rites_of_itlimoc.png
+rogue's_passage.png
+zacama,_primal_calamity.png
+solemn_simulacrum (1).png
+solemn_simulacrum (2).png
+thassa's_oracle.png
+eladamri's_call.png
+intruder_alarm.png
+idyllic_tutor.png
+cryptolith_rite.png
+eternal_witness.png
+vizier_of_the_menagerie.png
+rhystic_study.png
+emrakul,_the_promised_end.png
+breeding_pool.png
+temple_garden.png
+sacred_foundry.png
+stomping_ground.png
+blood_crypt.png
+steam_vents.png
+godless_shrine.png
+hallowed_fountain.png
+darksteel_plate.png
+blade_of_selves.png
+return_to_dust.png
+smothering_tithe.png
+catdog,_inseperable.png
+kalamax,_the_stormsire.png
+helm_of_awakening.png
+reflecting_pool.png
+seedborn_muse.png
+dryad_of_the_ilysian_grove.png
+emerald_medallion.png
+ruby_medallion.png
+fire_diamond.png
+moss_diamond.png
+gruul_signet.png
+simic_signet.png
+izzet_signet.png
+oona,_queen_of_the_fae.png
+vilis,_broker_of_blood.png
+aquaman.png
+sol_ring.png
+show_and_tell.png
+enlightened_tutor.png
+flareon.png
+reliquary_tower (1).png
+reliquary_tower.png
+nykthos,_shrine_to_nyx.png
+watery_grave.png
+flooded_strand.png
+dolmen_gate.png
+sensei's_divining_top.png
+rune-scarred_demon.png
+rhystic_study (2).png
+propaganda.png
+evacuation.png
+spark_double.png
+gilded_lotus.png
+dimir_signet.png
+thran_dynamo.png
+c-3po.png
+jabba_the_hutt,_crime_lord.png
+super_mechagodzilla,_kaiju_engine.png
+mechagodzilla,_kaiju_engine.png
+zirda,_the_dawnwaker.png
+fertilid.png
+ash_barrens.png
+the-gitrog-monster.png
+life_from_the_loam.png
+songs-of-the-damned.png
+band_of_brushwaggs.png
+nivvy_m.png
+katniss.png
+griffin.png
+golgari_signet (1).png
+golgari_signet.png
+lotus_petal (1).png
+kozilek,_butcher_of_truth.png
+culling_the_weak.png
+fabricate (1).png
+fabricate.png
+talisman_of_resilience.png
+talisman_of_creativity.png
+command_tower (1).png
+command_tower.png
+lotus_petal.png
+overgrown_tomb.png
+windswept_heath.png
+wooded_foothills.png
+worldly_tutor.png
+demonic_tutor (2).png
+squee's_embrace.png
+squee's_revenge.png
+squee's_toy.png
+squee,_goblin_nabob.png
+maze_of_ith (2).png
+gavi_nest_warden.png
+sakura_tribe_elder.png
+tiana_ship's_caretaker.png
+gerrard,_weatherlight_hero.png
+predator,_flagship.png
+weatherlight.png
+kozilek,_the_great_distortion (2).png