yequari
/
yeet.marigold.town
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: yequari:dev-static
Branches Tags
yequari:master
yequari:dev-static
..
compare: yequari:master
Branches Tags
yequari:dev-static
yequari:master

No commits in common. "dev-static" and "master" have entirely different histories.
dev-static ... master

7 changed files with 0 additions and 367 deletions
Show Stats Expand all files Collapse all files

7
css/noscript.css
View File

@ -1,7 +0,0 @@
toy-shelf ul {
position: relative;
}
toy-shelf li {
display: block;
}

96
css/style.css
View File

@ -1,96 +0,0 @@
/* toy-shelf {
width: 400px;
height: 150px;
display: inline-block;
background-color: chartreuse;
} */
@import url(https://fonts.bunny.net/css?family=georama:400|bangers:400);
body {
background: url(../images/d7YslGq.gif);
line-height: 1.6;
font-size: 16px;
margin: 0;
padding: 0;
font-family: 'Georama', sans-serif;
}
header {
text-align: center;
color: white;
font-family: 'Bangers', display;
}
h1,h2,h3 {
line-height: 1.2;
font-family: 'Bangers', display;
}
.container {
width: 85%;
min-height: 100vh;
padding: 20px 50px;
margin: 0 auto;
}
.content {
display: flex;
flex-flow: row wrap-reverse;
align-items: center;
background-color: white;
padding: 20px 50px;
}
.sidebar {
flex: 3 1 20%;
border: 1px solid black;
padding: 20px 30px;
margin-left: 10px;
}
.storefront {
flex: 1 3 fit-content;
margin: 0 auto;
min-height: 720px;
padding: 30px;
}
.shelf-group {
display: inline-block;
padding: 0 20px;
}
shop-counter {
position: relative;
z-index: 2;
}
toy-shelf ul {
position: absolute;
z-index: 3;
margin: 0;
padding: 0;
list-style-type: none;
vertical-align: bottom;
}
toy-shelf li {
display: inline-block;
width: 70px;
height: 70px;
margin: 5px 8px;
padding: 5px;
background-color: black;
color: red;
font-size: 10px;
vertical-align: bottom;
position: relative;
top: 5px;
left: 2px;
text-align: center;
}
footer {
text-align: center;
color: white;
}

BIN
images/MulONxK.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
images/NRJjSF0.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
images/d7YslGq.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 891 B

87
index.html
View File

@ -1,87 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/elements.js"></script>
<link rel="stylesheet" href="css/style.css" />
<noscript>
<link rel="stylesheet" href="css/noscript.css" />
</noscript>
<title>yeet</title>
</head>
<body>
<div class="container">
<header>
<h1>yequari's emporium of excellent toys</h1>
</header>
<main class="content">
<div class="storefront">
<div class="shelf-group">
<h2>Featured</h2>
<toy-shelf>
<ul slot="toy-list">
<li>Armada Megatron</li>
<li>Leo Prime</li>
<li>Coronation Starscream</li>
</ul>
</toy-shelf>
<toy-shelf>
<ul slot="toy-list">
<li>Armada Starscream</li>
<li>Leo Nemesis Prime</li>
<li>Optimus Prime</li>
</ul>
</toy-shelf>
<toy-shelf></toy-shelf>
</div>
<div class="shelf-group">
<h2>New Arrivals</h2>
<toy-shelf>
<ul slot="toy-list">
<li>Armada Megatron</li>
<li>Leo Prime</li>
<li>Coronation Starscream</li>
</ul>
</toy-shelf>
<toy-shelf>
<ul slot="toy-list">
<li>Armada Starscream</li>
<li>Leo Nemesis Prime</li>
<li>Optimus Prime</li>
</ul>
</toy-shelf>
<toy-shelf></toy-shelf>
</div>
<shop-counter></shop-counter>
</div>
<div class="sidebar" id="text">
<p>
<em>This site is a work in progress.
I thought it would be cool to work publicly and show off my experimentation and progress.
Check back on Oct 7th to see the completed version!</em>
</p>
<p>
Welcome to yequari's emporium of excellent toys,
the premier stop for all your toys and collectibles in Marigold Town!
Although we currently collect and showcase primarily Transformers,
we deal with toys and collectibles of all makers, brands, and eras.
MISB, used, vintage, modern, we got it all.
</p>
<p>
We accept trade-ins! Want to add to our collection? Go to the <a href="#">trade-in counter</a>.
</p>
<p>
Don't see what you're looking for at the front desk? We might have it in the <a href="#">back</a>.
</p>
</div>
</main>
<footer>
<p>
<em>This site is best viewed with JavaScript enabled, but should be perfectly usable without. Please report any issues on the <a href="https://git.32bit.cafe/yequari/yeet.marigold.town/issues">git repository</a>.</em>
</p>
</footer>
</div>
</body>
</html>

177
js/elements.js
View File

@ -1,177 +0,0 @@
class Rect extends HTMLElement {
constructor() {
super();
this.perspective = 1200
this.topColor = '#666666'
this.botColor = this.topColor
this.rightColor = '#333333'
this.leftColor = this.rightColor
this.frontColor = 'rgba(255,255,255,0.3)'
this.backColor = this.frontColor
}
createRect() {
const wrapper = document.createElement("div")
wrapper.setAttribute("class", "wrapper")
const rect = document.createElement("span")
rect.setAttribute("class", "rect")
const topshelf = rect.appendChild(document.createElement("div"));
topshelf.setAttribute("class", "top-shelf face");
const leftshelf = rect.appendChild(document.createElement("div"));
leftshelf.setAttribute("class", "left-shelf small-face");
const rightshelf = rect.appendChild(document.createElement("div"));
rightshelf.setAttribute("class", "right-shelf small-face");
const back = rect.appendChild(document.createElement("div"));
back.setAttribute("class", "back-shelf face");
const bottomshelf = rect.appendChild(document.createElement("div"));
bottomshelf.setAttribute("class", "bottom-shelf face");
const front = rect.appendChild(document.createElement("div"));
front.setAttribute("class", "front-shelf face");
let style = document.createElement("style");
style.textContent = `
.wrapper {
width: ${this.width}px;
height: ${this.height}px;
display: block;
margin: none;
}
.rect {
width: 100%;
height: 100%;
display: block;
perspective: ${this.perspective}px;
backface-visibility: visible;
transform-style: preserve-3d;
perspective-origin: 50% 50%;
transform: translateZ(-${this.depth / 2}px);
}
.top-shelf, .bottom-shelf {
width: ${this.width}px;
height: ${this.depth}px;
display: block;
position: absolute;
top: ${(this.height - this.depth) / 2}px;
}
.left-shelf, .right-shelf {
width: ${this.depth}px;
height: ${this.height}px;
display: block;
position: absolute;
left: ${(this.width - this.depth) / 2}px;
}
.front-shelf, .back-shelf {
width: ${this.width}px;
height: ${this.height}px;
display: block;
position: absolute;
}
.top-shelf {
transform: rotateX(90deg) translateZ(${this.height / 2}px);
background-color: ${this.topColor};
}
.bottom-shelf {
transform: rotateX(-90deg) translateZ(${this.height / 2}px);
background-color: ${this.botColor};
}
.right-shelf {
transform: rotateY(90deg) translateZ(${this.width / 2}px);
background-color: ${this.rightColor};
}
.left-shelf {
transform: rotateY(-90deg) translateZ(${this.width / 2}px);
background-color: ${this.leftColor};
}
.front-shelf {
transform: translateZ(${this.depth / 2}px);
background-color: ${this.frontColor};
}
.back-shelf {
transform: rotateY(180deg) translateZ(${this.depth / 2}px);
background-color: ${this.backColor};
}
`
wrapper.appendChild(rect);
wrapper.appendChild(style);
return wrapper;
}
}
class ToyShelf extends Rect {
constructor() {
super();
const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});
this.topColor = '#DAA06D'
this.botColor = this.topColor
this.rightColor = '#6F4E37'
this.leftColor = this.rightColor
this.frontColor = 'rgba(255, 255, 255, 0.1)'
this.backColor = '#6E260E'
this.perspective = 400
this.width = 300;
this.height = 100;
this.depth = 100;
const rect = this.createRect();
shadow.innerHTML = `
<div id="toy-list"><slot name="toy-list"></slot></div>
`
// TODO: change slot items to render on shelf
shadow.firstElementChild.addEventListener('slotchange', e => {
let slot = e.target;
if (slot.name == 'toy-list') {
this.items = slot.assignedElements().map(elem => elem.textContent);
console.log("Items: " + this.items);
}
});
shadow.appendChild(rect);
}
}
class ShopCounter extends Rect {
constructor() {
super();
const shadow = this.attachShadow({mode: "open", slotAssignment: "named"});
this.width = 800;
this.height = 300;
this.depth = 200;
let style = document.createElement("style");
style.textContent = `
.rect {
transform: translateZ(-${this.depth / 2}px) rotateX(-30deg);
}
`
const rect = this.createRect();
shadow.appendChild(rect);
shadow.appendChild(style);
}
}
customElements.define("toy-shelf", ToyShelf);
customElements.define("shop-counter", ShopCounter);