Skip to content

Instantly share code, notes, and snippets.

View jlogix's full-sized avatar

Justin jlogix

View GitHub Profile
@jlogix
jlogix / styles.css
Last active June 15, 2024 19:03
body{
margin: 0;
}
.grid {
display: grid;
/* # of grid rows. This will be set by JS */
grid-template-rows: var(--grid-rows);
/* # of grid columns. This will be set by JS */
grid-template-columns: var(--grid-cols);
@jlogix
jlogix / listing-1.js
Created July 14, 2018 03:48
var layout =`
+------------------------------------------------+
| |
| |
+-----+------------------+-----------------+-----+
| | | | |
| | | | |
| | | | |
| | | | |
| | | | |
@jlogix
jlogix / listing-2.js
Last active July 23, 2018 10:41
var lines = layout.split(/[\r\n]/) // split layout into individual lines
.map(
i=>i.match(/\+/)? // '+' means one or more boxes ending
i.split(/[\+\|]/)
.filter(e=>e) // filter out zero length lines
.map(
b=>b.match(/^\-+$/)? // all '-'s mean box is ending here
-(b.length+1): // denote that by -ve number
b.length+1) // box still open. put +ve length
:i.split(/\|/) // if '+' not found, then split at '|'
@jlogix
jlogix / listing-3.js
Last active July 14, 2018 04:31
var bgcolors = ["#f7a7a7", "#d0f7a7", "#f7d6a7", "#a7e2f7", "#e7bafb", "#fbbadc", "#def5d1", "#f7f1a7", "#b5fdd6", "#fb9387"]; //put some nice background colors here for our boxes
var crow = 0; // current row. not the bird :)
var boxes = []; // the array that contains all box definitions
lines.filter(e=>e) // filter out zero length lines
.forEach(function(e) {
o = e.map((x,i,a) => a.filter((y,j) => j<i).reduce((s,z) => s+Math.abs(z),1)); //get start columns of boxes
e.forEach(function(x,i) {
var f = boxes.filter(b => b.col===o[i] && b.opn); // are there open boxes at this column offset?
if (x>0) { // +ve number means...
@jlogix
jlogix / listing-4.js
Last active July 14, 2018 04:49
var nrows = lines.length-1; // total number of rows
var ncols = lines[0].reduce((s,e) => s+Math.abs(e),0); // total number of columns
var rows = `repeat(${nrows}, 1fr)`;
var cols = `repeat(${ncols}, 1fr)`;
document.documentElement.style.setProperty('--grid-rows', rows); // CSS variable for grid-template-rows
document.documentElement.style.setProperty('--grid-cols', cols); // CSS variable for grid-template-columns
document.documentElement.style.setProperty('--nrows', nrows);
boxes.forEach(function(b, i){
$(`<div>${i+1}</div>`)
@jlogix
jlogix / gfonts-preview.html
Last active August 15, 2019 08:11
<!DOCTYPE html>
<html>
<head>
<title>Google Fonts Preview</title>
<style>
#preview {
margin: 0 auto;
text-align: center;
width: 80%;
}