webdesignberlin

export interface IHasNeighbours<T> {
    getNeighbours(): Iterable<T>;
}

export class AStar {
    static findPath<T extends IHasNeighbours<T>>(start: T, end: T, distanceFunc: (a: T, b: T) => number, estimateFunc?: (a: T) => number): Array<T> {
        estimateFunc ??= (a: T) => distanceFunc(a, end);
        const closed = new Set<T>();
        const queue = new PriorityQueue<NodeWithNumber<Path<T>>>(NodeWithNumber.comparator);
        queue.push(new NodeWithNumber(new Path<T>(start, undefined, 0), 0));

webdesignberlin

let cols = 5; //columns in the grid
let rows = 5; //rows in the grid

let grid = new Array(cols); //array of all the grid points

let openSet = []; //array containing unevaluated grid points
let closedSet = []; //array containing completely evaluated grid points

let start; //starting grid point
let end; // ending grid point (goal)

webdesignberlin

/*
  Made by Elly Loel - https://ellyloel.com/
  With inspiration from:
    - Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
    - Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
    - Adam Argyle - https://unpkg.com/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

  Notes:
    - `:where()` is used to lower specificity for easy overriding.
*/

webdesignberlin

// This is a super basic way of mapping Vue props to argTypes in cases
// where Storybook (or rather vue-docgen-api) fails.
// See https://github.com/storybookjs/storybook/issues/11774

const toType = (obj) => ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()

const controlTypeMappings = {
  String: 'text',
  Boolean: 'boolean',
  Array: 'object',

webdesignberlin

/**
 * Filters an array of objects using custom predicates.
 *
 * @param  {Array}  array: the array to filter
 * @param  {Object} filters: an object with the filter criteria
 * @return {Array}
 */
function filterArray(array, filters) {
  const filterKeys = Object.keys(filters);
  return array.filter(item => {

webdesignberlin

<template>
  <div>
    <slot/>
  </div>
</template>

<script>
// @ts-check

/**

webdesignberlin

/* -------------------------------- 

Typography

-------------------------------- */

:root {
    --font-primary: sans-serif;
    --font-secondary: serif;

webdesignberlin

Vue.js and Vuex - best practices for managing your state

Modyfing state object

Example

If you have to extend an existing object with additional property, always prefer Vue.set() over Object.assign() (or spread operator).

Example below explains implications for different implementations.

webdesignberlin

.element.collapsed {
  height: 90px;
  width: 100%;  
}

.element.expanded {
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;

webdesignberlin

function idle(action) {
  return new Promise((resolve, reject) => {
    requestIdleCallback(timing => resolve(action(timing)));
  });
}

async function init() {
  criticalPath();
  await idle(lessImportant);
  await idle(nonCritical);