Created
March 6, 2019 15:04
-
-
Save zladuric/88a2226b449a7aa82947322ac1399be9 to your computer and use it in GitHub Desktop.
Super-quick and dirty demo of web components
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
window.onload = function() { | |
const TILE_TYPES = { | |
FULL: 'full', | |
EMPTY: 'empty', | |
HALF_FULL: 'half-full', | |
}; | |
const template = document.getElementById('tile'); | |
class TileElement extends HTMLElement { | |
connectedCallback () { | |
if (!this.shadowRoot) { | |
this.attachShadow({ mode: 'open' }); | |
this.shadowRoot.appendChild(template.content.cloneNode(true)); | |
this.shadowRoot.querySelector('.tile').classList.add( | |
this.getAttribute('type')); | |
} | |
} | |
} | |
const register = () => customElements.define('a-tile', TileElement) | |
window.WebComponents ? window.WebComponents.waitFor(register) : register(); | |
class World { | |
constructor(height = 10, width = 10) { | |
this.tiles = []; | |
this.tilePointers = {}; | |
for (let i = 0; i < height; i++) { | |
this.tiles[i] = []; | |
for (let j = 0; j < width; j++) { | |
this.tiles[i][j] = this.getRandomTilePointer(); | |
} | |
} | |
} | |
getRandomTilePointer() { | |
const random = Math.floor(Math.random() * 10); | |
if (random > 7) { | |
return this.getTilePointer(TILE_TYPES.FULL); | |
} else if (random > 1) { | |
return this.getTilePointer(TILE_TYPES.EMPTY); | |
} else { | |
return this.getTilePointer(TILE_TYPES.HALF_FULL); | |
} | |
} | |
getTilePointer(type) { | |
if (!this.tilePointers[type]) { | |
this.tilePointers[type] = new Tile(type); | |
} | |
return this.tilePointers[type]; | |
} | |
render(container) { | |
container = container || document.querySelector('.tiles'); | |
for (const row of this.tiles) { | |
for (const tile of row) { | |
const el = document.createElement('a-tile'); | |
el.classList.add(tile.type); | |
container.appendChild(el); | |
} | |
} | |
} | |
} | |
class Tile { | |
constructor(type) { | |
this.type = type; | |
} | |
} | |
const App = window.App || {}; | |
App.world = new World(); | |
window.App = App; | |
App.world.render(); | |
const button = document.querySelector('#regenerate'); | |
button.addEventListener('click', () => { | |
const tiles = document.querySelector('.tiles'); | |
while(tiles.firstChild) { | |
tiles.removeChild(tiles.firstChild); | |
} | |
App.world.render(); | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
<title>Tiles</title> | |
</head> | |
<body> | |
<h1>Tiles</h1> | |
<div class="toolbar"> | |
<button id="regenerate">Regenerate</button> | |
<hr> | |
</div> | |
<div class="tiles"></div> | |
<template id="tile"> | |
<div class="tile"></div> | |
</template> | |
<script type="text/javascript" src="app.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
height: 100%; | |
padding: 1rem; | |
background-color: gray; | |
} | |
.tiles { | |
width: 17rem; | |
display: block; | |
} | |
a-tile { | |
margin: 0.1rem; | |
display: inline-block; | |
height: 1.5rem; | |
width: 1.5rem; | |
} | |
a-tile.empty { | |
background-color: white; | |
} | |
a-tile.full { | |
background-color: black; | |
} | |
a-tile.half-full { | |
background: repeating-linear-gradient( | |
-45deg, | |
white 5px, | |
black 10px | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment