adding new frames, withholding the ability to use them temporarily

This commit is contained in:
Kyle
2022-04-28 14:56:42 -07:00
parent f06b605b1c
commit 642ee23326
74 changed files with 168 additions and 13 deletions

View File

@@ -3,13 +3,16 @@ $title = 'Card Conjurer - Gallery';
$desc = 'See examples of available frames';
include('../globalHTML/header-1.php');
?>
<h2 class='readable-background header-extension title center'>Gallery</h2>
<div class='layer center'>
<h3>Showcase Frames</h3>
<h4>What they're called, and where to find them</h4>
</div>
<div class='layer center galleryGrid' id="galleryGrid"></div>
<div class='layer center'></div>
<h2 class='readable-background header-extension title center'>Available Frames</h2>
<h4 class='readable-background header-extension center'>What they're called, and where to find them</h4>
<h3 class='layer center'>Showcase Frames</h3>
<div class='layer center galleryGrid' id="showcaseGrid"></div>
<h3 class='layer center'>Regular Frames</h3>
<div class='layer center galleryGrid' id="regularGrid"></div>
<h3 class='layer center'>Token Frames</h3>
<div class='layer center galleryGrid' id="tokenGrid"></div>
<h3 class='layer center'>Other Card Types</h3>
<div class='layer center galleryGrid' id="otherGrid"></div>
<style>
.galleryGrid {
display: grid;
@@ -29,6 +32,7 @@ include('../globalHTML/header-1.php');
padding: 0.5rem;
}
.galleryGridItem > img {
width: 100%;
aspect-ratio: 5 / 7;
}
.galleryGridItem > h4 {
@@ -40,7 +44,43 @@ include('../globalHTML/header-1.php');
</style>
<script>
//template data
const templates = [
//REGULAR FRAMES
const regularTemplates = [
{name: "Regular", location: "Regular > Regular Frames", image: "regular.png"},
{name: "Lands", location: "Regular > Lands", image: "land.png"},
{name: "Class", location: "Regular > Class (D&D)", image: "class.png"},
{name: "Snow", location: "Regular > Snow (Kaldheim)", image: "snow.png"},
{name: "Mutate", location: "Regular > Mutate (Ikoria)", image: "mutate.png"},
{name: "Nyx", location: "Regular > Nyx (Theros)", image: "nyx.png"},
{name: "Adventures", location: "Regular > Adventures (Eldraine)", image: "adventure.png"},
{name: "Devoid", location: "Regular > Devoid (Zendikar)", image: "devoid.png"},
{name: "Aftermath", location: "Regular > Aftermath (Amonkhet)", image: "aftermath.png"},
{name: "Flip", location: "Regular > Flip (Kamigawa)", image: "flip.png"},
{name: "Levelers", location: "Regular > Levelers (Zendikar)", image: "levelers.png"},
{name: "Split", location: "Regular > Split Cards", image: "split.png"},
{name: "Fuse", location: "Regular > Fuse Cards", image: "fuse.png"},
{name: "Conspiracies", location: "Regular > Conspiracies (Draft Matters)", image: "conspiracy.png"},
{name: "Colorshifted", location: "Regular > Colorshifted (Planar Chaos)", image: "colorshifted.png"},
];
//TOKEN FRAMES
const tokenTemplates = [
{name: "Regular Token", location: "Token > Regular", image: "tokenRegular.png"},
{name: "Textless Token", location: "Token > Textless", image: "tokenTextless.png"},
{name: "Tall Token", location: "Token > Tall", image: "tokenTall.png"},
{name: "Day/Night Marker", location: "Token > Day/Night Marker", image: "tokenDayNight.png"},
{name: "Jumpstart Front Cards", location: "Token > Jumpstart Front Cards", image: "tokenJumpstart.png"},
{name: "Planeswalker Emblems", location: "Token > Planeswalker Emblems", image: "emblem.png"},
{name: "Regular Token (Old)", location: "Token > Regular Token (Bordered M15)", image: "tokenOldRegular.png"},
{name: "Textless Token (Old)", location: "Token > Textless Token (Bordered M15)", image: "tokenOldTextless.png"},
{name: "Original Token", location: "Token > Original (Old Bordered)", image: "tokenOriginal.png"},
{name: "Unglued Token", location: "Token > Unglued", image: "tokenUnglued.png"},
];
//OTHER FRAMES
const otherTemplates = [
// {name: "TEMPLATENAME", location: "Token > DISPLAYNAME", image: "IMAGENAME.png"},
];
//SHOWCASE FRAMES
const showcaseTemplates = [
{name: "Gilded (SNC)", location: "Showcase Frames > Gilded (SNC)", image: "sncGilded.png"},
{name: "Ninja (NEO)", location: "Showcase Frames > Ninja (NEO)", image: "neoNinja.png"},
{name: "Samurai (NEO)", location: "Showcase Frames > Samurai (NEO)", image: "neoSamurai.png"},
@@ -72,6 +112,7 @@ include('../globalHTML/header-1.php');
{name: "FNM Inverted Promo", location: "Showcase Frames > FNM Promo (Inverted Promos)", image: "inverted.png"},
{name: "Universes Beyond", location: "Showcase Frames > Universes Beyond", image: "universesBeyond.png"},
{name: "Full Text", location: "Showcase Frames > Full Text", image: "fullText.png"},
{name: "Etched", location: "Showcase Frames > Etched (Commander Precons)", image: "etched.png"},
{name: "Expeditions (ZNR)", location: "Showcase Frames > ZNR Expeditions (2020)", image: "znrExpedition.png"},
{name: "Jace", location: "Showcase Frames > Signature Spellbook (Jace/Gideon)", image: "jace.png"},
{name: "Gideon", location: "Showcase Frames > Signature Spellbook (Jace/Gideon)", image: "gideon.png"},
@@ -84,6 +125,7 @@ include('../globalHTML/header-1.php');
];
//functions
getURL = (imageName) => {
return "img/" + imageName;
return "https://raw.githubusercontent.com/ImKyle4815/cardconjurer/master/gallery/img/" + imageName;
}
templateSample = (name, location, image) => {
@@ -91,8 +133,13 @@ include('../globalHTML/header-1.php');
shell.classList.add("galleryGridItem");
shell.classList.add("readable-background");
const img = document.createElement("img");
img.src = getURL(image);
img.src = getURL("loading.jpg");
shell.appendChild(img);
const actualImage = new Image();
actualImage.onload = () => {
img.src = getURL(image);
}
actualImage.src = getURL(image);
const title = document.createElement("h4");
title.innerHTML = name;
shell.appendChild(title);
@@ -101,10 +148,16 @@ include('../globalHTML/header-1.php');
shell.appendChild(loc);
return shell;
}
//main
const container = document.getElementById("galleryGrid");
for (t of templates) {
container.appendChild(templateSample(t.name, t.location, t.image));
populateGroup = (elementID, templates) => {
const elem = document.getElementById(elementID);
for (t of templates) {
elem.appendChild(templateSample(t.name, t.location, t.image));
}
}
//Populate everything
populateGroup("regularGrid", regularTemplates);
populateGroup("showcaseGrid", showcaseTemplates);
populateGroup("tokenGrid", tokenTemplates);
populateGroup("otherGrid", otherTemplates);
</script>
<?php include('../globalHTML/footer.php'); ?>