Patrick Brosset captainbrosset

## collision.js
/*

2d pixel-perfect collision detection

Requires that each object has a rectangular bounding box (simple x/y/w/h, no rotation)
and a bit mask (i.e. an array of lines and columns containing 0s for empty pixels and 1s for solid pixels).

On each frame of the animation, take all pairs of objects and
1. compare the bounding boxes
2. for those that collide, check for overlayed bits by creating a new mask that is the AND of the 2 sub-masks and check for 1s

## frustrations.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                captainbrosset
                / frustrations.md
            
            
              Created
              January 4, 2023 10:30
            
              
                List of frustrations when working with the web
              
          
Having to support specific browsers.
Avoiding or removing a feature that doesn’t work across browsers.
Making a design look/work the same across browsers.
Achieving visual precision on stylized elements (e.g., buttons).
Lack of capabilities to implement specific use cases.
Making web sites/applications accessible.
Making web sites/applications performant.
Making web sites/applications secure.
Using web technologies in a native or hybrid context (e.g, using WebViews, Electron, CEF).
Working with different tracking protection and data storage policies in browsers.


## dom-mutation-logger.js
function logMutation(mutation) {
    console.log(mutation);
}

const mutationObserver = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      // Build a reason object that will let the user know what exactly happened
      let details = null;
      if (mutation.type === "attributes") {
        details = {

## z-index.js
(function() {
/**
 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
 *
 * A stacking context is formed, anywhere in the document, by any element which is either
 *
 * - the root element (HTML),
 * - positioned (absolutely or relatively) with a z-index value other than "auto",
 * - a flex item with a z-index value other than "auto",that is the parent element display: flex|inline-flex,
 * - elements with an opacity value less than 1. (See the specification for opacity),

## codeswing.json
{
  "scripts": [],
  "styles": []
}

## badges.html
<!DOCTYPE html>
<meta charset="utf8">
<style>
html {
  font-family: consolas, monospace;
  font-size: 16px;
}

ul, li {
  padding: 0;

## clip-mask.ts
// This is our mask element, a 100%/100% semi-transparent
// element sitting on the whole UI.
const mask = ...;

// Start defining a path used to clip the mask.
// First, go around the outer perimeter.
const polygon = ['0 0', '100% 0', '100% 100%', '0 100%', '0 0'];

// And then clip away the highlighted areas from the mask.
// To do this, we go around their shapes, in reverse direction.

## svg-clip.css
svg {
  clip-path: path("M100,100L200,100L200,150L250,150L250,250L150,250L150,200L100,200L100,100Z");
}

## position.css
.tooltips-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

## generate-path.ts
// Get the first segment's start point.
const points = [segments[0].start];

// And append the end point of each segment, one by one, after that.
for (const segment of segments) {
  if (!segment) {
    continue;
  }
  points.push(segment.end);
}
	/*

	2d pixel-perfect collision detection

	Requires that each object has a rectangular bounding box (simple x/y/w/h, no rotation)
	and a bit mask (i.e. an array of lines and columns containing 0s for empty pixels and 1s for solid pixels).

	On each frame of the animation, take all pairs of objects and
	1. compare the bounding boxes
	2. for those that collide, check for overlayed bits by creating a new mask that is the AND of the 2 sub-masks and check for 1s
	function logMutation(mutation) {
	console.log(mutation);
	}

	const mutationObserver = new MutationObserver((mutations) => {
	for (const mutation of mutations) {
	// Build a reason object that will let the user know what exactly happened
	let details = null;
	if (mutation.type === "attributes") {
	details = {
	(function() {
	/**
	* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
	*
	* A stacking context is formed, anywhere in the document, by any element which is either
	*
	* - the root element (HTML),
	* - positioned (absolutely or relatively) with a z-index value other than "auto",
	* - a flex item with a z-index value other than "auto",that is the parent element display: flex\|inline-flex,
	* - elements with an opacity value less than 1. (See the specification for opacity),
	<!DOCTYPE html>
	<meta charset="utf8">
	<style>
	html {
	font-family: consolas, monospace;
	font-size: 16px;
	}

	ul, li {
	padding: 0;
	// This is our mask element, a 100%/100% semi-transparent
	// element sitting on the whole UI.
	const mask = ...;

	// Start defining a path used to clip the mask.
	// First, go around the outer perimeter.
	const polygon = ['0 0', '100% 0', '100% 100%', '0 100%', '0 0'];

	// And then clip away the highlighted areas from the mask.
	// To do this, we go around their shapes, in reverse direction.
	svg {
	clip-path: path("M100,100L200,100L200,150L250,150L250,250L150,250L150,200L100,200L100,100Z");
	}
	.tooltips-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	// Get the first segment's start point.
	const points = [segments[0].start];

	// And append the end point of each segment, one by one, after that.
	for (const segment of segments) {
	if (!segment) {
	continue;
	}
	points.push(segment.end);
	}