Compare commits

..

5 Commits

Author SHA1 Message Date
yequari b552aa4312 layout changes, apply fonts 2023-09-30 17:06:22 -07:00
yequari aad36ee953 add placeholders for toy entries 2023-09-30 14:53:08 -07:00
yequari 1aacf5c6fe add Rect class to make adding more shapes easier 2023-09-30 12:20:27 -07:00
yequari 8767cd544d too many shapes 2023-09-26 21:21:18 -07:00
yequari dda401d147 almost done with basic layout 2023-09-24 11:37:22 -07:00
7 changed files with 367 additions and 0 deletions

7
css/noscript.css Normal file
View File

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

96
css/style.css Normal file
View File

@ -0,0 +1,96 @@
/* 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 Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
images/NRJjSF0.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
images/d7YslGq.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 891 B

87
index.html Normal file
View File

@ -0,0 +1,87 @@
<!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 Normal file
View File

@ -0,0 +1,177 @@
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);