2 |
76 |
--------------------------------------------------------------------------------
/src/app/helper/components/animator/animator.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/helper/components/animator/animator.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, EventEmitter, Input, Output } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'aoc-animator',
5 | templateUrl: './animator.component.html',
6 | styleUrls: ['./animator.component.scss'],
7 | })
8 | export class AnimatorComponent {
9 | currentIdx: number = 0;
10 | visualizing: boolean = false;
11 | interval = 100;
12 | @Input() iterations: number = 0;
13 | @Output() currentIdxEvent = new EventEmitter
3 |
12 |
21 |
30 |
39 |
48 |
57 |
58 |
59 | Animation speed: {{ interval }}ms
60 |
61 |
68 |
69 |
70 |
71 | Iterations: {{ currentIdx + 1 }} / {{ iterations }} ({{
72 | (100 * currentIdx) / (iterations - 1) | number : "1.0-2"
73 | }}%)
74 |
75 |
2 |
11 |
20 |
21 |
22 | Current step: {{ currentStateIdx }}
23 | Total cost: {{ currentCost }}
24 |
25 |
26 |
32 |
42 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/amphipods-room-visualizer/amphipods-room-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | .room-grid {
2 | margin-top: 0.5em;
3 | display: grid;
4 | grid-template-columns: repeat(var(--col), 1.5em);
5 | grid-template-rows: repeat(var(--row), 1.5em);
6 |
7 | .cell {
8 | grid-column-end: span 1;
9 | grid-row-end: span 1;
10 | height: 1.5em;
11 | width: 1.5em;
12 | display: flex;
13 | justify-content: center;
14 |
15 | &.border-cell {
16 | background-color: rgba(#fad02c, 0.5);
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/amphipods-room-visualizer/amphipods-room-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, HostBinding, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { Point2D } from 'src/app/helper/util-functions/point';
4 | import { AmphipodRoomField } from '../../day23.service';
5 |
6 | @Component({
7 | selector: 'aoc-amphipods-room-visualizer',
8 | templateUrl: './amphipods-room-visualizer.component.html',
9 | styleUrls: ['./amphipods-room-visualizer.component.scss'],
10 | })
11 | export class AmphipodsRoomVisualizerComponent
12 | extends BaseResultComponent
13 | implements OnInit
14 | {
15 | states: AmphipodRoomField[][] = [];
16 | border: Point2D[] = [];
17 | costs: number[] = [];
18 | currentStateIdx: number = 0;
19 | minX: number = 0;
20 | maxX: number = 0;
21 | minY: number = 0;
22 | maxY: number = 0;
23 |
24 | @HostBinding('style.--col')
25 | get col(): number {
26 | return this.maxX - this.minX;
27 | }
28 |
29 | @HostBinding('style.--row')
30 | get row(): number {
31 | return this.maxY - this.minY;
32 | }
33 |
34 | ngOnInit(): void {
35 | this.states = this.data.states as AmphipodRoomField[][];
36 | this.border = this.data.border as Point2D[];
37 | this.costs = this.data.costs as number[];
38 | this.currentStateIdx = 0;
39 | this.minX = Math.min(...this.border.map((p) => p.x));
40 | this.maxX = Math.max(...this.border.map((p) => p.x));
41 | this.minY = Math.min(...this.border.map((p) => p.y));
42 | this.maxY = Math.max(...this.border.map((p) => p.y));
43 | }
44 |
45 | nextStep() {
46 | this.currentStateIdx++;
47 | }
48 |
49 | prevStep() {
50 | this.currentStateIdx--;
51 | }
52 |
53 | get currentState(): AmphipodRoomField[] {
54 | return this.states[this.currentStateIdx];
55 | }
56 |
57 | get currentCost(): number {
58 | return this.costs[this.currentStateIdx];
59 | }
60 |
61 | get currentMoving(): number | undefined {
62 | if (this.currentStateIdx == this.states.length - 1) {
63 | return undefined;
64 | }
65 | var currentState = this.states[this.currentStateIdx];
66 | var nextState = this.states[this.currentStateIdx + 1];
67 | var result = 0;
68 | currentState.forEach((f, idx) => {
69 | if (currentState[idx].occupant && !nextState[idx].occupant) {
70 | result = idx;
71 | }
72 | });
73 | return result;
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/arithmetic-logic-unit-visualizer/arithmetic-logic-unit-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
39 | {{ room.occupant }}
40 |
41 |
2 |
11 |
20 |
21 |
22 |
23 | NOMAD version:
24 | {{ digit }}
29 |
30 |
31 |
32 |
38 |
39 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/arithmetic-logic-unit-visualizer/arithmetic-logic-unit-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | .nomad-number {
2 | font-size: 1.5rem;
3 | margin-bottom: 0.5em;
4 | }
5 |
6 | .nomad-instructions {
7 | display: grid;
8 | width: fit-content;
9 | grid-template-columns: auto auto;
10 | grid-column-gap: 0.5em;
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/arithmetic-logic-unit-visualizer/arithmetic-logic-unit-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 |
4 | @Component({
5 | selector: 'aoc-arithmetic-logic-unit-visualizer',
6 | templateUrl: './arithmetic-logic-unit-visualizer.component.html',
7 | styleUrls: ['./arithmetic-logic-unit-visualizer.component.scss'],
8 | })
9 | export class ArithmeticLogicUnitVisualizerComponent
10 | extends BaseResultComponent
11 | implements OnInit
12 | {
13 | currentDigitIdx: number = 0;
14 | instructions: [string, Map{{ instruction[0] }}
33 |
34 | [w: {{ instruction[1].get("w") }}, x: {{ instruction[1].get("x") }}, y:
35 | {{ instruction[1].get("y") }}, z: {{ instruction[1].get("z") }}]
36 |
37 |
12 | Numbers:
13 |
21 |
22 |
18 | {{ number }}
19 |
20 |
23 |
40 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/bingo-visualizer/bingo-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | .flex-row {
2 | display: flex;
3 | flex-flow: row wrap;
4 | }
5 |
6 | .number-cell {
7 | height: 1.5em;
8 | width: 1.5em;
9 | display: flex;
10 | justify-content: center;
11 | border-radius: 0.25em;
12 | margin: 0.1em;
13 | }
14 |
15 | .board {
16 | margin: 0.75em;
17 | display: grid;
18 | grid-template-columns: repeat(5, auto);
19 | border: rgba(#fff, 0.1) solid 2px;
20 |
21 | &.won {
22 | border: #fad02c solid 2px;
23 | box-shadow: 0 0 1em #fad02c;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/bingo-visualizer/bingo-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { normalize } from 'src/app/helper/util-functions/normalize';
4 |
5 | @Component({
6 | selector: 'aoc-bingo-visualizer',
7 | templateUrl: './bingo-visualizer.component.html',
8 | styleUrls: ['./bingo-visualizer.component.scss'],
9 | })
10 | export class BingoVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit
13 | {
14 | boards!: number[][][];
15 | numbers!: number[];
16 | visualizeCounter: number = 0;
17 | wonBoards!: number[];
18 | visualizing: boolean = false;
19 | ngOnInit(): void {
20 | var fullBoards = this.data.boards as [number, boolean][][][];
21 | this.boards = fullBoards.map((board) =>
22 | board.map((row) => row.map((tuple) => tuple[0]))
23 | );
24 | this.numbers = this.data.numbers as number[];
25 | this.visualizeCounter = this.numbers.length;
26 | this.wonBoards = this.data.wonBoards;
27 | }
28 |
29 | getNumberStyle(n: number): string {
30 | var idx = this.numbers
31 | .slice(0, this.visualizeCounter)
32 | .findIndex((num) => num == n);
33 | if (idx >= 0) {
34 | var value = normalize(idx, 0, this.numbers.length, 0.25, 1);
35 | return `rgba(250, 208, 44, ${value})`;
36 | }
37 | return 'transparent';
38 | }
39 | startVisualization() {
40 | this.visualizing = true;
41 | this.visualizeCounter = 0;
42 | this.loop();
43 | }
44 |
45 | private loop() {
46 | setTimeout(() => {
47 | this.visualizeCounter++;
48 | if (this.visualizeCounter < this.numbers.length) {
49 | this.loop();
50 | } else {
51 | this.visualizing = false;
52 | }
53 | }, 100);
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/bits-visualizer/bits-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
28 |
39 |
36 | {{ number }}
37 |
38 |
2 |
3 |
4 | {{
5 | separator == 0 ? "⠀⠀" : "│⠀"
6 | }}
7 | ├
8 | └
9 |
10 | ⠀
11 |
12 | Version:
14 | {{
15 | packet.packetBits?.slice(0, 3)
16 | }}
17 | ({{ packet.version }})
20 | Type ID: {{ packet.packetBits?.slice(3, 6) }} ({{
22 | packet.typeId
23 | }})
25 |
26 | Length type ID: {{ packet.lengthId }}
29 |
30 | Subpackets total length:
32 | {{ packet.packetBits?.slice(7, 23) }} ({{
33 | packet.lengthNumber
34 | }})
36 |
37 |
38 | Number of subpackets:
40 | {{ packet.packetBits?.slice(7, 18) }} ({{
41 | packet.lengthNumber
42 | }})
44 |
45 |
46 |
47 |
48 |
49 | Operator: {{ packet.packetBits?.slice(3, 6) }} ({{ getOperator(packet.typeId) }})
55 | Final value:
57 | {{ packet.value }}
59 |
60 |
61 | Literal value:
63 | {{ c }}
71 | ({{ packet.value }})
74 |
75 |
76 |
77 |
78 |
79 |
88 |
89 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/bits-visualizer/bits-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | width: 100%;
3 | display: block;
4 | margin-top: -0.4em;
5 |
6 | span {
7 | display: inline-block;
8 | line-height: 1em;
9 | }
10 |
11 | .bits-row {
12 | margin-right: 0.5em;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/bits-visualizer/bits-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { Packet } from '../../day16.service';
4 |
5 | @Component({
6 | selector: 'aoc-bits-visualizer',
7 | templateUrl: './bits-visualizer.component.html',
8 | styleUrls: ['./bits-visualizer.component.scss'],
9 | })
10 | export class BitsVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit
13 | {
14 | @Input() packet!: Packet;
15 | @Input() depth: number = 0;
16 | @Input() separators: number[] = [];
17 | @Input() isChild: boolean = false;
18 | @Input() isLast: boolean = true;
19 | @Input() showValues: boolean = false;
20 |
21 | ngOnInit(): void {
22 | if (this.data) {
23 | this.packet = this.data.packet as Packet;
24 | this.showValues = this.data.showValues as boolean;
25 | }
26 | }
27 |
28 | getOperator(typeId: number): string {
29 | switch (typeId) {
30 | case 0:
31 | return '+';
32 | case 1:
33 | return '×';
34 | case 2:
35 | return 'Min';
36 | case 3:
37 | return 'Max';
38 | case 5:
39 | return '>';
40 | case 6:
41 | return '<';
42 | case 7:
43 | return '=';
44 | default:
45 | return '';
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/caves-visualizer/caves-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/caves-visualizer/caves-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | .network {
2 | height: 800px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/caves-visualizer/caves-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { ScriptsLoaderService } from 'src/app/helper/services/scripts-loader.service';
4 |
5 | declare let vis: any;
6 |
7 | @Component({
8 | selector: 'aoc-caves-visualizer',
9 | templateUrl: './caves-visualizer.component.html',
10 | styleUrls: ['./caves-visualizer.component.scss'],
11 | })
12 | export class CavesVisualizerComponent
13 | extends BaseResultComponent
14 | implements OnInit
15 | {
16 | networkId!: string;
17 | visLoaded: boolean = false;
18 | constructor(private scripts: ScriptsLoaderService) {
19 | super();
20 | this.networkId = (Math.random() + 1).toString(36).substring(2);
21 | }
22 |
23 | ngOnInit(): void {
24 | var sources: number[] = this.data.sources as number[];
25 | var targets: number[] = this.data.targets as number[];
26 | var values: number[] = this.data.values as number[];
27 | var labels: string[] = this.data.labels as string[];
28 | var maxValue = Math.max(...values);
29 | this.scripts
30 | .loadScript(
31 | 'VisNetwork',
32 | 'https://unpkg.com/vis-network/standalone/umd/vis-network.min.js'
33 | )
34 | .then(() => {
35 | var nodes = new vis.DataSet(
36 | labels.map((l, idx) => {
37 | return { id: idx, label: l };
38 | })
39 | );
40 | var edges = new vis.DataSet(
41 | sources.map((s, idx) => {
42 | return {
43 | from: s,
44 | to: targets[idx],
45 | value: values[idx] / maxValue,
46 | arrows: 'to',
47 | color: '#fad02c',
48 | };
49 | })
50 | );
51 |
52 | var container = document.getElementById(this.networkId);
53 |
54 | // provide the data in the vis format
55 | var data = {
56 | nodes: nodes,
57 | edges: edges,
58 | };
59 | var options = {
60 | physics: {
61 | barnesHut: {
62 | springConstant: 0,
63 | avoidOverlap: 0.2,
64 | },
65 | },
66 | };
67 |
68 | // initialize your network!
69 | var network = new vis.Network(container, data, options);
70 | // network.stabilize();
71 | });
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/ocean-trench-visualizer/ocean-trench-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
10 |
11 | Current step: {{ currentIdx }}
12 | Lit pixels: {{ litPixels }}
13 |
14 |
15 | ![]()
16 |
17 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/ocean-trench-visualizer/ocean-trench-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 | .flex-row {
6 | display: flex;
7 | flex-flow: row wrap;
8 | }
9 | .grid-wrapper {
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/ocean-trench-visualizer/ocean-trench-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 |
4 | @Component({
5 | selector: 'aoc-ocean-trench-visualizer',
6 | templateUrl: './ocean-trench-visualizer.component.html',
7 | styleUrls: ['./ocean-trench-visualizer.component.scss'],
8 | })
9 | export class OceanTrenchVisualizerComponent
10 | extends BaseResultComponent
11 | implements OnInit, AfterViewInit
12 | {
13 | images: number[][][] = [];
14 | currentIdx: number = 0;
15 | visualizing: boolean = false;
16 | squareWidth: number = 5;
17 |
18 | constructor(private el: ElementRef) {
19 | super();
20 | }
21 |
22 | get image(): number[][] {
23 | return this.images[this.currentIdx];
24 | }
25 |
26 | get litPixels(): number {
27 | return this.image.flat().filter((d) => d == 1).length;
28 | }
29 |
30 | get imageWidth(): number {
31 | return this.image.length;
32 | }
33 |
34 | get finalWidth(): number {
35 | return this.images.slice(-1)[0].length;
36 | }
37 |
38 | get imageCanvas(): string {
39 | var imageArray = this.image;
40 |
41 | var canvas = document.createElement('canvas');
42 | let ctx = canvas.getContext('2d');
43 | const magnifier = this.squareWidth;
44 | canvas.width = magnifier * this.imageWidth;
45 | canvas.height = magnifier * this.imageWidth;
46 | ctx!.fillStyle = '#fad02c';
47 | imageArray.forEach((row, y) => {
48 | row.forEach((val, x) => {
49 | if (val) {
50 | ctx!.fillRect(x * magnifier, y * magnifier, magnifier, magnifier);
51 | }
52 | });
53 | });
54 | const data = canvas.toDataURL();
55 | return data;
56 | }
57 |
58 | ngOnInit(): void {
59 | this.images = this.data.images as number[][][];
60 | this.currentIdx = this.images.length - 1;
61 | this.currentIdx = 0;
62 | }
63 |
64 | ngAfterViewInit(): void {
65 | this.squareWidth =
66 | this.el.nativeElement.offsetWidth / (3 * this.finalWidth);
67 | }
68 |
69 | startVisualization() {
70 | this.visualizing = true;
71 | this.currentIdx = 0;
72 | this.loop();
73 | }
74 |
75 | private loop() {
76 | setTimeout(() => {
77 | this.currentIdx++;
78 | if (this.currentIdx < this.images.length - 1) {
79 | this.loop();
80 | } else {
81 | this.visualizing = false;
82 | }
83 | }, 100);
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/octopus-flashes-visualizer/octopus-flashes-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
10 |
11 | Current step: {{ currentIdx }}
12 | Flashes sum: {{ flashedAmount }}
13 |
14 |
15 |
23 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/octopus-flashes-visualizer/octopus-flashes-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | .number-cell {
2 | height: 1.5em;
3 | width: 1.5em;
4 | display: flex;
5 | justify-content: center;
6 | border-radius: 0.25em;
7 | margin: 0.1em;
8 | }
9 |
10 | .flex-row {
11 | display: flex;
12 | flex-flow: row wrap;
13 | }
14 |
15 | .grid {
16 | margin: 0.75em;
17 | display: grid;
18 | grid-template-columns: repeat(10, auto);
19 | width: fit-content;
20 | }
21 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/octopus-flashes-visualizer/octopus-flashes-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 |
4 | @Component({
5 | selector: 'aoc-octopus-flashes-visualizer',
6 | templateUrl: './octopus-flashes-visualizer.component.html',
7 | styleUrls: ['./octopus-flashes-visualizer.component.scss'],
8 | })
9 | export class OctopusFlashesVisualizerComponent
10 | extends BaseResultComponent
11 | implements OnInit
12 | {
13 | snapshots: number[][][] = [];
14 | flashes: number[] = [];
15 | currentIdx: number = 0;
16 | visualizing: boolean = false;
17 |
18 | get snapshot(): number[][] {
19 | return this.snapshots[this.currentIdx];
20 | }
21 |
22 | get flashedAmount(): number {
23 | return this.currentIdx > 0
24 | ? this.flashes.slice(0, this.currentIdx).reduce((a, b) => a + b)
25 | : this.flashes[0];
26 | }
27 |
28 | ngOnInit(): void {
29 | this.snapshots = this.data.snapshots as number[][][];
30 | this.flashes = this.data.flashes as number[];
31 | this.currentIdx = this.snapshots.length - 1;
32 | }
33 |
34 | startVisualization() {
35 | this.visualizing = true;
36 | this.currentIdx = 0;
37 | this.loop();
38 | }
39 |
40 | private loop() {
41 | setTimeout(() => {
42 | this.currentIdx++;
43 | if (this.currentIdx < this.snapshots.length - 1) {
44 | this.loop();
45 | } else {
46 | this.visualizing = false;
47 | }
48 | }, 100);
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/sea-cucumbers-visualizer/sea-cucumbers-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
10 |
11 |
20 | {{ number }}
21 |
22 | Current step: {{ currentIdx }}
12 |
13 |
14 | ![]()
15 |
16 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/sea-cucumbers-visualizer/sea-cucumbers-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 | .flex-row {
6 | display: flex;
7 | flex-flow: row wrap;
8 | }
9 | .grid-wrapper {
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/sea-cucumbers-visualizer/sea-cucumbers-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 |
4 | @Component({
5 | selector: 'aoc-sea-cucumbers-visualizer',
6 | templateUrl: './sea-cucumbers-visualizer.component.html',
7 | styleUrls: ['./sea-cucumbers-visualizer.component.scss'],
8 | })
9 | export class SeaCucumbersVisualizerComponent
10 | extends BaseResultComponent
11 | implements OnInit, AfterViewInit
12 | {
13 | areas: string[][][] = [];
14 | currentIdx: number = 0;
15 | visualizing: boolean = false;
16 | squareWidth: number = 5;
17 |
18 | constructor(private el: ElementRef) {
19 | super();
20 | }
21 |
22 | get area(): string[][] {
23 | return this.areas[this.currentIdx];
24 | }
25 |
26 | get imageWidth(): number {
27 | return this.area.length;
28 | }
29 |
30 | get imageCanvas(): string {
31 | var imageArray = this.area;
32 |
33 | var canvas = document.createElement('canvas');
34 | let ctx = canvas.getContext('2d');
35 | const magnifier = this.squareWidth;
36 | canvas.width = magnifier * this.imageWidth;
37 | canvas.height = magnifier * this.imageWidth;
38 | ctx!.fillStyle = '#fad02c';
39 | imageArray.forEach((row, y) => {
40 | row.forEach((val, x) => {
41 | if (val == '>' || val == 'v') {
42 | ctx!.fillStyle = val == '>' ? '#fad02c' : '#ffffff';
43 | ctx!.fillRect(x * magnifier, y * magnifier, magnifier, magnifier);
44 | }
45 | });
46 | });
47 | const data = canvas.toDataURL();
48 | return data;
49 | }
50 |
51 | ngOnInit(): void {
52 | this.areas = this.data.areas as string[][][];
53 | this.currentIdx = 0;
54 | }
55 |
56 | ngAfterViewInit(): void {
57 | this.squareWidth =
58 | this.el.nativeElement.offsetWidth / (3 * this.imageWidth);
59 | }
60 |
61 | startVisualization() {
62 | this.visualizing = true;
63 | this.currentIdx = 0;
64 | this.loop();
65 | }
66 |
67 | private loop() {
68 | setTimeout(() => {
69 | this.currentIdx++;
70 | if (this.currentIdx < this.areas.length - 1) {
71 | this.loop();
72 | } else {
73 | this.visualizing = false;
74 | }
75 | }, 100);
76 | }
77 | }
78 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/seven-segments-display-visualizer/seven-segments-display-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
20 |
42 |
43 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/seven-segments-display-visualizer/seven-segments-display-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | .display-row {
2 | display: flex;
3 | flex-flow: row;
4 |
5 | .divider {
6 | display: flex;
7 | align-items: center;
8 | margin-left: 0.5em;
9 | margin-right: 0.5em;
10 | font-size: 2em;
11 | line-height: 1em;
12 | }
13 |
14 | .display-block {
15 | display: flex;
16 | flex-flow: column;
17 | width: fit-content;
18 | height: fit-content;
19 | margin: 0.25em;
20 |
21 | &.accented {
22 | filter: drop-shadow(0 0 2px #fad02c) drop-shadow(0 0 5px #fad02c);
23 | }
24 |
25 | .display-block-part {
26 | height: 1em;
27 | width: 1em;
28 | box-sizing: border-box;
29 | border-color: #fad02c;
30 | border-style: solid;
31 | border-width: 0;
32 |
33 | &:nth-child(1) {
34 | border-top-left-radius: 2px;
35 | border-top-right-radius: 2px;
36 | }
37 |
38 | &:nth-child(2) {
39 | border-bottom-left-radius: 2px;
40 | border-bottom-right-radius: 2px;
41 | }
42 |
43 | &.a:nth-child(1) {
44 | border-top-width: 2px;
45 | }
46 |
47 | &.b:nth-child(1),
48 | &.e:nth-child(2) {
49 | border-left-width: 2px;
50 | }
51 |
52 | &.c:nth-child(1),
53 | &.f:nth-child(2) {
54 | border-right-width: 2px;
55 | }
56 |
57 | &.d:nth-child(1) {
58 | border-bottom-width: 2px;
59 | }
60 |
61 | &.g:nth-child(2) {
62 | border-bottom-width: 2px;
63 | }
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/seven-segments-display-visualizer/seven-segments-display-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { Display } from '../../day8.service';
4 |
5 | @Component({
6 | selector: 'aoc-seven-segments-display-visualizer',
7 | templateUrl: './seven-segments-display-visualizer.component.html',
8 | styleUrls: ['./seven-segments-display-visualizer.component.scss'],
9 | })
10 | export class SevenSegmentsDisplayVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit
13 | {
14 | inputDisplays!: Display[];
15 | decodedDisplays!: Display[];
16 | accentUniqueLengths: boolean = false;
17 | uniqueLenghts = [2, 3, 4, 7];
18 | ngOnInit(): void {
19 | this.inputDisplays = this.data.inputDisplays as Display[];
20 | this.decodedDisplays = (this.data.decodedDisplays ?? []) as Display[];
21 | this.accentUniqueLengths = this.data.accentUniqueLengths as boolean ?? false;
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/src/app/solutions2021/components/snailfish-number-visualizer/snailfish-number-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
3 |
8 |
9 |
10 | >
11 |
12 |
17 |
18 |
19 | ➔
21 |
25 |
30 |
31 |
32 | >
33 |
34 |
39 |
40 |
41 |
2 |
81 |
82 |
3 |
12 |
21 |
30 |
43 |
44 |
45 | Animation speed: {{ interval }}ms
46 |
47 |
54 |
55 |
56 |
57 |
58 | Adding numbers:
59 |
69 | Iterations: {{ iterations }} ({{ currentSnapshotIdx + 1 }}: 70 | {{ currentSnailfishIdx + 1 }}) 71 |
72 |
73 | 69 | Iterations: {{ iterations }} ({{ currentSnapshotIdx + 1 }}: 70 | {{ currentSnailfishIdx + 1 }}) 71 |
74 |
80 |
89 | [
90 | {{ currentSnailfish.x }}
93 |
99 | ,
100 | {{ currentSnailfish.y }}
111 | {{ lines[i] }}
3 | {{ result }}
4 |
8 | {{ scores[i] }}
9 |
10 |
7 | ![]()
8 | ![]()
9 |
10 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/blizzard-visualizer/blizzard-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 | .grid-wrapper {
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 |
10 | img {
11 | position: absolute;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/blizzard-visualizer/blizzard-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { Point2D } from 'src/app/helper/util-functions/point';
4 | import { Blizzard, getCurrentBlizzardsPositions } from '../../day24.service';
5 |
6 | @Component({
7 | selector: 'aoc-blizzard-visualizer',
8 | templateUrl: './blizzard-visualizer.component.html',
9 | styleUrls: ['./blizzard-visualizer.component.scss'],
10 | })
11 | export class BlizzardVisualizerComponent
12 | extends BaseResultComponent
13 | implements OnInit, AfterViewInit
14 | {
15 | blizzards!: Blizzard[];
16 | moves!: Point2D[];
17 | walls!: Point2D[];
18 | minX!: number;
19 | maxX!: number;
20 | minY!: number;
21 | maxY!: number;
22 | currentIdx: number = 0;
23 | visualizing: boolean = false;
24 | squareWidth: number = 5;
25 | blizzardsCache = {};
26 |
27 | constructor(private el: ElementRef) {
28 | super();
29 | }
30 |
31 | get imageHeight(): number {
32 | return this.maxY - this.minY + 1;
33 | }
34 |
35 | get imageWidth(): number {
36 | return this.maxX - this.minX + 1;
37 | }
38 |
39 | get wallsCanvas(): string {
40 | var canvas = document.createElement('canvas');
41 | let ctx = canvas.getContext('2d');
42 | const magnifier = this.squareWidth;
43 | canvas.width = magnifier * this.imageWidth;
44 | canvas.height = magnifier * this.imageHeight;
45 | ctx!.fillStyle = '#ccc';
46 | this.walls.forEach((wall) => {
47 | ctx!.fillRect(
48 | (wall.x - this.minX) * magnifier,
49 | (wall.y - this.minY) * magnifier,
50 | magnifier,
51 | magnifier
52 | );
53 | });
54 | const data = canvas.toDataURL();
55 | return data;
56 | }
57 |
58 | get imageCanvas(): string {
59 | var canvas = document.createElement('canvas');
60 | let ctx = canvas.getContext('2d');
61 | const magnifier = this.squareWidth;
62 | canvas.width = magnifier * this.imageWidth;
63 | canvas.height = magnifier * this.imageHeight;
64 |
65 | ctx!.fillStyle = 'rgb(250, 208, 44)';
66 | ctx!.fillRect(
67 | (this.moves[this.currentIdx].x - this.minX) * magnifier,
68 | (this.moves[this.currentIdx].y - this.minY) * magnifier,
69 | magnifier,
70 | magnifier
71 | );
72 | ctx!.fillStyle = 'rgba(115,155,208,0.25)';
73 | var currentBlizzard = getCurrentBlizzardsPositions(
74 | this.blizzards,
75 | this.currentIdx,
76 | this.maxX - 1,
77 | this.maxY - 1,
78 | this.blizzardsCache
79 | );
80 | currentBlizzard.forEach((blizzard) => {
81 | ctx!.fillRect(
82 | (blizzard.x - this.minX) * magnifier,
83 | (blizzard.y - this.minY) * magnifier,
84 | magnifier,
85 | magnifier
86 | );
87 | });
88 | const data = canvas.toDataURL();
89 | return data;
90 | }
91 |
92 | ngOnInit(): void {
93 | this.blizzards = this.data.blizzards as Blizzard[];
94 | this.walls = this.data.walls as Point2D[];
95 | this.moves = this.data.moves as Point2D[];
96 | this.currentIdx = 0;
97 | this.minX = Math.min(...this.walls.map((p) => p.x));
98 | this.maxX = Math.max(...this.walls.map((p) => p.x));
99 | this.minY = Math.min(...this.walls.map((p) => p.y));
100 | this.maxY = Math.max(...this.walls.map((p) => p.y));
101 | }
102 |
103 | ngAfterViewInit(): void {
104 | this.blizzardsCache = {};
105 | this.squareWidth = this.el.nativeElement.offsetHeight / this.imageHeight;
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/camp-sections-visualizer/camp-sections-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
3 | Elf 1
4 |
5 |
6 | Elf 2
7 |
8 |
9 | Overlap
10 |
11 |
14 | ![]()
15 |
16 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/camp-sections-visualizer/camp-sections-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
6 | .flex-row {
7 | display: flex;
8 | flex-flow: row wrap;
9 |
10 | &>div {
11 | margin-right: 8px;
12 | }
13 | }
14 |
15 | .block {
16 | width: 32px;
17 | height: 32px;
18 | }
19 |
20 | .block-1 {
21 | background-color: #fad02c;
22 | opacity: 0.6;
23 | }
24 |
25 | .block-2 {
26 | background-color: #fff;
27 | opacity: 0.6;
28 | }
29 |
30 | .block-3 {
31 | background-color: #fad02c;
32 | opacity: 1.0;
33 | }
34 |
35 | .grid-wrapper {
36 | display: flex;
37 | justify-content: center;
38 | align-items: center;
39 | }
40 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/camp-sections-visualizer/camp-sections-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
2 | import { min } from 'rxjs';
3 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
4 |
5 | @Component({
6 | selector: 'aoc-camp-sections-visualizer',
7 | templateUrl: './camp-sections-visualizer.component.html',
8 | styleUrls: ['./camp-sections-visualizer.component.scss'],
9 | })
10 | export class CampSectionsVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit, AfterViewInit
13 | {
14 | sections: [number[], number[]][] = [];
15 | squareWidth: number = 5;
16 | minSection: number = 0;
17 | maxSection: number = 0;
18 |
19 | constructor(private el: ElementRef) {
20 | super();
21 | }
22 |
23 | get imageWidth(): number {
24 | return this.maxSection - this.minSection + 1;
25 | }
26 |
27 | get imageCanvas(): string {
28 | var sections = this.sections;
29 |
30 | var canvas = document.createElement('canvas');
31 | let ctx = canvas.getContext('2d');
32 | const magnifier = this.squareWidth;
33 | canvas.width = magnifier * this.imageWidth;
34 | canvas.height = magnifier * this.sections.length;
35 | sections.forEach((ranges, y) => {
36 | Array.range(this.minSection, this.maxSection + 1).forEach(
37 | (sectionId, x) => {
38 | var fillStyle = null;
39 | if (ranges.every((range) => range.includes(sectionId))) {
40 | fillStyle = '#fad02c';
41 | ctx!.globalAlpha = 1.0;
42 | } else if (ranges[0].includes(sectionId)) {
43 | fillStyle = '#fad02c';
44 | ctx!.globalAlpha = 0.6;
45 | } else if (ranges[1].includes(sectionId)) {
46 | fillStyle = '#ffffff';
47 | ctx!.globalAlpha = 0.6;
48 | }
49 |
50 | if (fillStyle != null) {
51 | ctx!.fillStyle = fillStyle;
52 | ctx!.fillRect(x * magnifier, y * magnifier, magnifier, magnifier);
53 | }
54 | }
55 | );
56 | });
57 | const data = canvas.toDataURL();
58 | return data;
59 | }
60 |
61 | ngOnInit(): void {
62 | this.sections = this.data.sections as [number[], number[]][];
63 | var allNumbers: number[] = [];
64 | this.sections.forEach((ranges) => {
65 | allNumbers = allNumbers.concat(ranges.flat());
66 | });
67 | this.minSection = Math.min(...allNumbers);
68 | this.maxSection = Math.max(...allNumbers);
69 | }
70 |
71 | ngAfterViewInit(): void {
72 | this.squareWidth =
73 | this.el.nativeElement.offsetWidth / (2 * this.imageWidth);
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/cargo-visualizer/cargo-step-visualizer/cargo-step-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
12 |
23 |
24 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/cargo-visualizer/cargo-step-visualizer/cargo-step-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: fit-content;
4 | }
5 |
6 | .grid {
7 | margin: 0.75em;
8 | display: grid;
9 | width: fit-content;
10 | column-gap: 8px;
11 | }
12 |
13 | .cargo-cell {
14 | justify-self: center;
15 | min-width: 3ch;
16 | text-align: center;
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/cargo-visualizer/cargo-step-visualizer/cargo-step-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { Stack } from '../../../../helper/util-functions/stack';
3 |
4 | interface CargoElement {
5 | value: string;
6 | row: number;
7 | col: number;
8 | }
9 |
10 | @Component({
11 | selector: 'aoc-cargo-step-visualizer',
12 | templateUrl: './cargo-step-visualizer.component.html',
13 | styleUrls: ['./cargo-step-visualizer.component.scss'],
14 | })
15 | export class CargoStepVisualizerComponent {
16 | @Input() stacks: Stack
8 | [{{ element.value }}]
9 |
10 |
11 |
20 | {{ column + 1 }}
21 |
22 |
2 |
106 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/cargo-visualizer/cargo-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
6 | .flex-box {
7 | margin: 0.75em;
8 | display: flex;
9 | flex-direction: column;
10 | width: fit-content;
11 |
12 | .cargo {
13 | justify-content: center;
14 | display: flex;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/cargo-visualizer/cargo-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { CargoMove, CargoSnapshot, CargoStep } from '../../day5.service';
4 |
5 | @Component({
6 | selector: 'aoc-cargo-visualizer',
7 | templateUrl: './cargo-visualizer.component.html',
8 | styleUrls: ['./cargo-visualizer.component.scss'],
9 | })
10 | export class CargoVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit
13 | {
14 | snapshots: CargoSnapshot[] = [];
15 |
16 | currentSnapshotIdx: number = 0;
17 | currentStepIdx: number = 0;
18 | currentStepStateIdx: number = 0;
19 | visualizing: boolean = false;
20 | iterations: number = 0;
21 | totalIterations: number = 0;
22 | interval = 100;
23 |
24 | get snapshot(): CargoSnapshot {
25 | return this.snapshots[this.currentSnapshotIdx];
26 | }
27 |
28 | get move(): CargoMove {
29 | return this.snapshot.move;
30 | }
31 |
32 | get step(): CargoStep {
33 | return this.snapshot.steps[this.currentStepIdx];
34 | }
35 |
36 | ngOnInit(): void {
37 | this.snapshots = this.data.snapshots as CargoSnapshot[];
38 | this.totalIterations =
39 | this.snapshots.flatMap((s) => s.steps.map((x) => 3)).sum() - 1;
40 | }
41 |
42 | pauseVisualization() {
43 | this.visualizing = false;
44 | }
45 |
46 | startVisualization() {
47 | this.visualizing = true;
48 | if (
49 | this.currentStepIdx == this.snapshot.steps.length - 1 &&
50 | this.currentSnapshotIdx == this.snapshots.length - 1 &&
51 | this.currentStepStateIdx == 2
52 | ) {
53 | this.currentStepIdx = 0;
54 | this.currentSnapshotIdx = 0;
55 | this.currentStepStateIdx = 0;
56 | this.iterations = 0;
57 | }
58 | this.loop();
59 | }
60 |
61 | nextStep() {
62 | this.iterations++;
63 | var isLastStepState = this.currentStepStateIdx == 2;
64 | var isLastStep = this.currentStepIdx == this.snapshot.steps.length - 1;
65 |
66 | this.currentStepStateIdx++;
67 |
68 | if (isLastStepState) {
69 | this.currentStepStateIdx = 0;
70 | this.currentStepIdx++;
71 | }
72 |
73 | if (isLastStep && isLastStepState) {
74 | this.currentStepIdx = 0;
75 | this.currentSnapshotIdx++;
76 | }
77 | }
78 |
79 | prevStep() {
80 | this.iterations--;
81 | var isFirstStepState = this.currentStepStateIdx == 0;
82 | var isFirstStep = this.currentStepIdx == 0;
83 |
84 | this.currentStepStateIdx--;
85 |
86 | if (isFirstStepState) {
87 | this.currentStepIdx--;
88 | this.currentStepStateIdx = 2;
89 | }
90 |
91 | if (isFirstStep && isFirstStepState) {
92 | this.currentSnapshotIdx--;
93 | this.currentStepIdx = this.snapshot.steps.length - 1;
94 | }
95 | }
96 |
97 | private loop() {
98 | if (this.visualizing) {
99 | setTimeout(() => {
100 | this.nextStep();
101 | if (
102 | this.currentStepStateIdx < 2 ||
103 | this.currentStepIdx < this.snapshot.steps.length - 1 ||
104 | this.currentSnapshotIdx < this.snapshots.length - 1
105 | ) {
106 | this.loop();
107 | } else {
108 | this.visualizing = false;
109 | }
110 | }, this.interval);
111 | }
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/datastream-buffer-visualizer/datastream-buffer-visualizer.component.html:
--------------------------------------------------------------------------------
1 | {{ char }}
7 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/datastream-buffer-visualizer/datastream-buffer-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | word-break: break-all;
5 |
6 | .packet-character {
7 | padding: 0 4px;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/datastream-buffer-visualizer/datastream-buffer-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 |
4 | @Component({
5 | selector: 'aoc-datastream-buffer-visualizer',
6 | templateUrl: './datastream-buffer-visualizer.component.html',
7 | styleUrls: ['./datastream-buffer-visualizer.component.scss'],
8 | })
9 | export class DatastreamBufferVisualizerComponent
10 | extends BaseResultComponent
11 | implements OnInit
12 | {
13 | message: string[] = [];
14 | index: number = 0;
15 | packetLength: number = 0;
16 | ngOnInit(): void {
17 | this.message = (this.data.message as string).split('');
18 | this.index = this.data.index as number;
19 | this.packetLength = this.data.packetLength as number;
20 | }
21 |
22 | isInPacket(idx: number): boolean {
23 | return idx > this.index - this.packetLength && idx <= this.index;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/device-file-visualizer/device-file-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
3 |
12 |
21 |
35 |
49 |
50 |
51 | Animation speed: {{ interval }}ms
52 |
53 |
60 |
61 |
62 |
63 |
105 |
64 |
65 | move {{ move.amount }} from
66 | {{ move.from }} to
67 | {{ move.to }}
69 | Iterations: {{ iterations }} / {{ totalIterations }} ({{ 70 | (100 * iterations) / totalIterations | number : "1.0-2" 71 | }}%) 72 |
73 | 69 | Iterations: {{ iterations }} / {{ totalIterations }} ({{ 70 | (100 * iterations) / totalIterations | number : "1.0-2" 71 | }}%) 72 |
74 |
104 |
75 |
76 |
81 |
82 |
83 |
87 |
88 |
89 |
94 |
95 |
96 |
97 |
102 |
103 |
2 |
3 |
4 | {{
5 | separator == 0 ? "⠀⠀" : "│⠀"
6 | }}
7 | ├
8 | └
9 |
10 |
11 | ⠀
12 | {{ file.fileName }}
17 | ({{ file.isDirectory ? "dir, " : "file, " }}size={{ file.fileSize }})
23 |
24 |
25 |
26 |
27 |
36 |
37 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/device-file-visualizer/device-file-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | width: 100%;
3 | display: block;
4 | margin-top: -0.4em;
5 |
6 | span {
7 | display: inline-block;
8 | line-height: 1em;
9 | }
10 |
11 | .file-row {
12 | margin-right: 0.5em;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/device-file-visualizer/device-file-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from '../../../helper/components/base-result.component';
3 | import { DeviceFile } from '../../day7.service';
4 |
5 | @Component({
6 | selector: 'aoc-device-file-visualizer',
7 | templateUrl: './device-file-visualizer.component.html',
8 | styleUrls: ['./device-file-visualizer.component.scss'],
9 | })
10 | export class DeviceFileVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit
13 | {
14 | @Input() file!: DeviceFile;
15 | @Input() selectedDirectories!: DeviceFile[];
16 | @Input() depth: number = 0;
17 | @Input() separators: number[] = [];
18 | @Input() isChild: boolean = false;
19 | @Input() isLast: boolean = true;
20 |
21 | ngOnInit(): void {
22 | if (this.data) {
23 | this.file = this.data.file as DeviceFile;
24 | this.selectedDirectories = this.data.selectedDirectories as DeviceFile[];
25 | }
26 | }
27 |
28 | matchDeviceFile(file: DeviceFile): boolean {
29 | return this.selectedDirectories.some((dir) => {
30 | return (
31 | file.isDirectory &&
32 | file.fileName === dir.fileName &&
33 | file.fileSize === dir.fileSize
34 | );
35 | });
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/elves-moves-visualizer/elves-moves-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
7 | ![]()
8 |
9 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/elves-moves-visualizer/elves-moves-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 | .grid-wrapper {
6 | display: flex;
7 | justify-content: center;
8 | align-items: center;
9 | }
10 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/elves-moves-visualizer/elves-moves-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
2 | import { colorInterpolate } from 'src/app/helper/util-functions/color-interpolate';
3 | import { normalize } from 'src/app/helper/util-functions/normalize';
4 | import { BaseResultComponent } from '../../../helper/components/base-result.component';
5 | import { MovingElf } from '../../day23.service';
6 |
7 | @Component({
8 | selector: 'aoc-elves-moves-visualizer',
9 | templateUrl: './elves-moves-visualizer.component.html',
10 | styleUrls: ['./elves-moves-visualizer.component.scss'],
11 | })
12 | export class ElvesMovesVisualizerComponent
13 | extends BaseResultComponent
14 | implements OnInit, AfterViewInit
15 | {
16 | elves!: MovingElf[];
17 | minX!: number;
18 | maxX!: number;
19 | minY!: number;
20 | maxY!: number;
21 | currentIdx: number = 0;
22 | visualizing: boolean = false;
23 | squareWidth: number = 5;
24 |
25 | constructor(private el: ElementRef) {
26 | super();
27 | }
28 |
29 | get imageHeight(): number {
30 | return this.maxY - this.minY + 1;
31 | }
32 |
33 | get imageWidth(): number {
34 | return this.maxX - this.minX + 1;
35 | }
36 |
37 | get imageCanvas(): string {
38 | var canvas = document.createElement('canvas');
39 | let ctx = canvas.getContext('2d');
40 | const magnifier = this.squareWidth;
41 | canvas.width = magnifier * this.imageWidth;
42 | canvas.height = magnifier * this.imageHeight;
43 |
44 | ctx!.fillStyle = 'rgb(250, 208, 44)';
45 | this.elves.forEach((elf) => {
46 | ctx!.fillStyle = colorInterpolate(
47 | 'rgb(250, 208, 44)',
48 | 'rgb(255, 255, 255)',
49 | normalize(
50 | this.currentIdx -
51 | 1 -
52 | elf.moveChanges.findLast((change) => change < this.currentIdx)!,
53 | 0,
54 | 10,
55 | 0,
56 | 1
57 | )
58 | );
59 | ctx!.fillRect(
60 | (elf.positionsList[this.currentIdx].x - this.minX) * magnifier,
61 | (elf.positionsList[this.currentIdx].y - this.minY) * magnifier,
62 | magnifier,
63 | magnifier
64 | );
65 | });
66 | const data = canvas.toDataURL();
67 | return data;
68 | }
69 |
70 | ngOnInit(): void {
71 | this.elves = this.data.elves as MovingElf[];
72 | this.currentIdx = 0;
73 | this.minX = Math.min(
74 | ...this.elves.map((elf) => Math.min(...elf.positionsList.map((p) => p.x)))
75 | );
76 | this.maxX = Math.max(
77 | ...this.elves.map((elf) => Math.max(...elf.positionsList.map((p) => p.x)))
78 | );
79 | this.minY = Math.min(
80 | ...this.elves.map((elf) => Math.min(...elf.positionsList.map((p) => p.y)))
81 | );
82 | this.maxY = Math.max(
83 | ...this.elves.map((elf) => Math.max(...elf.positionsList.map((p) => p.y)))
84 | );
85 | }
86 |
87 | ngAfterViewInit(): void {
88 | this.squareWidth =
89 | this.el.nativeElement.offsetWidth / (3 * this.imageWidth);
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/falling-rocks-visualizer/falling-rocks-visualizer.component.html:
--------------------------------------------------------------------------------
1 | Current rock: {{ currentRock + 1 }}
6 |
7 | Current move:
8 | {{
9 | jets[rocksPositions[currentRock][currentMove].jetIdx] === -1 ? "<" : ">"
10 | }}
11 |
12 |
13 | ![]()
14 |
15 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/falling-rocks-visualizer/falling-rocks-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 | .flex-row {
6 | display: flex;
7 | flex-flow: row wrap;
8 | }
9 | .grid-wrapper {
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/falling-sand-visualizer/falling-sand-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
7 | ![]()
8 | ![]()
9 |
10 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/falling-sand-visualizer/falling-sand-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 | .flex-row {
6 | display: flex;
7 | flex-flow: row wrap;
8 | }
9 | .grid-wrapper {
10 | display: flex;
11 | justify-content: center;
12 | align-items: center;
13 |
14 | img {
15 | position: absolute;
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/falling-sand-visualizer/falling-sand-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
2 | import { Point2D } from 'src/app/helper/util-functions/point';
3 | import { BaseResultComponent } from '../../../helper/components/base-result.component';
4 |
5 | @Component({
6 | selector: 'aoc-falling-sand-visualizer',
7 | templateUrl: './falling-sand-visualizer.component.html',
8 | styleUrls: ['./falling-sand-visualizer.component.scss'],
9 | })
10 | export class FallingSandVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit, AfterViewInit
13 | {
14 | rocks!: Point2D[];
15 | sands!: Point2D[][];
16 | minX!: number;
17 | maxX!: number;
18 | minY!: number;
19 | maxY!: number;
20 | currentIdx: number = 0;
21 | visualizing: boolean = false;
22 | squareWidth: number = 5;
23 |
24 | constructor(private el: ElementRef) {
25 | super();
26 | }
27 |
28 | get sand(): Point2D[] {
29 | return this.sands[this.currentIdx];
30 | }
31 |
32 | get imageHeight(): number {
33 | return this.maxY - this.minY + 1;
34 | }
35 |
36 | get imageWidth(): number {
37 | return this.maxX - this.minX + 1;
38 | }
39 |
40 | get rockCanvas(): string {
41 | var canvas = document.createElement('canvas');
42 | let ctx = canvas.getContext('2d');
43 | const magnifier = this.squareWidth;
44 | canvas.width = magnifier * this.imageWidth;
45 | canvas.height = magnifier * this.imageHeight;
46 | ctx!.fillStyle = '#ffffff';
47 | this.rocks.forEach((rock) => {
48 | ctx!.fillRect(
49 | (rock.x - this.minX) * magnifier,
50 | (rock.y - this.minY) * magnifier,
51 | magnifier,
52 | magnifier
53 | );
54 | });
55 | const data = canvas.toDataURL();
56 | return data;
57 | }
58 |
59 | get imageCanvas(): string {
60 | var canvas = document.createElement('canvas');
61 | let ctx = canvas.getContext('2d');
62 | const magnifier = this.squareWidth;
63 | canvas.width = magnifier * this.imageWidth;
64 | canvas.height = magnifier * this.imageHeight;
65 | ctx!.fillStyle = '#fad02c';
66 | this.sand.forEach((grain) => {
67 | ctx!.fillRect(
68 | (grain.x - this.minX) * magnifier,
69 | (grain.y - this.minY) * magnifier,
70 | magnifier,
71 | magnifier
72 | );
73 | });
74 | const data = canvas.toDataURL();
75 | return data;
76 | }
77 |
78 | ngOnInit(): void {
79 | this.rocks = this.data.rocks as Point2D[];
80 | this.sands = this.data.sands as Point2D[][];
81 | this.currentIdx = 0;
82 | this.minX = Math.min(
83 | ...this.rocks.concat(this.sands[this.sands.length - 1]).map((p) => p.x)
84 | );
85 | this.maxX = Math.max(
86 | ...this.rocks.concat(this.sands[this.sands.length - 1]).map((p) => p.x)
87 | );
88 | this.minY = 0;
89 | this.maxY = Math.max(
90 | ...this.rocks.concat(this.sands[this.sands.length - 1]).map((p) => p.y)
91 | );
92 | }
93 |
94 | ngAfterViewInit(): void {
95 | this.squareWidth =
96 | this.el.nativeElement.offsetWidth / (3 * this.imageWidth);
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkey-map-cube-visualizer/monkey-map-cube-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkey-map-cube-visualizer/monkey-map-cube-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
6 | .scene {
7 | height: 800px;
8 | }
9 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkey-math-equations-visualizer/monkey-math-equations-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkey-math-equations-visualizer/monkey-math-equations-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
6 | .network {
7 | height: 800px;
8 | }
9 |
10 | .equations-container {
11 | display: flex;
12 | flex-direction: column;
13 |
14 | ::ng-deep {
15 | .eq-smaller-margin {
16 | margin: 0.25em 0;
17 | }
18 | }
19 | .equation {
20 | margin: 1em 0;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkeys-inspections-visualizer/monkey-inspection-visualizer/monkey-inspection-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | 🐒 #{{ monkeyId }}
5 | 6 | Inspections: 7 | {{ monkeyInspection.inspections }}
9 | Items: {{ items }}
11 | Condition: x % {{ monkeyInspection.divisibleBy }} == 0 ? 13 | {{ monkeyInspection.trueMonkeyIndex }} : 14 | {{ monkeyInspection.falseMonkeyIndex }}
16 |
17 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkeys-inspections-visualizer/monkey-inspection-visualizer/monkey-inspection-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: fit-content;
4 | justify-self: center;
5 | }
6 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkeys-inspections-visualizer/monkey-inspection-visualizer/monkey-inspection-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input } from '@angular/core';
2 | import { Monkey } from 'src/app/solutions2022/day11.service';
3 |
4 | @Component({
5 | selector: 'aoc-monkey-inspection-visualizer',
6 | templateUrl: './monkey-inspection-visualizer.component.html',
7 | styleUrls: ['./monkey-inspection-visualizer.component.scss'],
8 | })
9 | export class MonkeyInspectionVisualizerComponent {
10 | @Input() monkeyId!: number;
11 | @Input() monkeyInspection!: Monkey;
12 |
13 | get items(): string {
14 | return this.monkeyInspection.items.map((item) => item.value).join(', ');
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkeys-inspections-visualizer/monkeys-inspections-visualizer.component.html:
--------------------------------------------------------------------------------
1 | 5 | 6 | Inspections: 7 | {{ monkeyInspection.inspections }}
9 | Items: {{ items }}
11 | Condition: x % {{ monkeyInspection.divisibleBy }} == 0 ? 13 | {{ monkeyInspection.trueMonkeyIndex }} : 14 | {{ monkeyInspection.falseMonkeyIndex }}
16 |
2 |
15 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkeys-inspections-visualizer/monkeys-inspections-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
6 | .grid {
7 | display: grid;
8 | grid-template-columns: repeat(4, 1fr);
9 | column-gap: 0.5em;
10 | row-gap: 0.5em;
11 | }
12 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/monkeys-inspections-visualizer/monkeys-inspections-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from '../../../helper/components/base-result.component';
3 | import { Monkey } from '../../day11.service';
4 |
5 | @Component({
6 | selector: 'aoc-monkeys-inspections-visualizer',
7 | templateUrl: './monkeys-inspections-visualizer.component.html',
8 | styleUrls: ['./monkeys-inspections-visualizer.component.scss'],
9 | })
10 | export class MonkeysInspectionsVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit
13 | {
14 | currentIdx: number = 0;
15 | iterations!: number;
16 |
17 | monkeysSnapshots: Monkey[][] = [];
18 |
19 | get monkeys(): Monkey[] {
20 | return this.monkeysSnapshots[this.currentIdx];
21 | }
22 |
23 | ngOnInit(): void {
24 | this.monkeysSnapshots = this.data.monkeysSnapshots as Monkey[][];
25 | this.iterations = this.monkeysSnapshots.length;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/packet-numbers-visualizer/packet-numbers-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
8 |
14 |
2 |
12 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/packet-numbers-visualizer/packet-numbers-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/packet-numbers-visualizer/packet-numbers-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, Input, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { PacketNumber } from '../../day13.service';
4 |
5 | @Component({
6 | selector: 'aoc-packet-numbers-visualizer',
7 | templateUrl: './packet-numbers-visualizer.component.html',
8 | styleUrls: ['./packet-numbers-visualizer.component.scss'],
9 | })
10 | export class PacketNumbersVisualizerComponent
11 | extends BaseResultComponent
12 | implements OnInit
13 | {
14 | packetNumbersGroups!: PacketNumber[][];
15 | highlightIndexes!: number[][];
16 |
17 | isHighlighted(i: number, j: number): boolean {
18 | return this.highlightIndexes.some((pair) => pair[0] === i && pair[1] === j);
19 | }
20 |
21 | ngOnInit(): void {
22 | this.packetNumbersGroups = this.data.packetNumbers as PacketNumber[][];
23 | this.highlightIndexes = this.data.highlightIndexes as number[][];
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/pressure-valves-visualizer/pressure-valves-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/pressure-valves-visualizer/pressure-valves-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | .network {
2 | height: 800px;
3 | }
4 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/rope-bridge-visualizer/rope-bridge-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
3 |
10 |
11 |
7 | {{ packetNumber | json }}
8 |
9 | 10 |
2 |
63 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/rope-bridge-visualizer/rope-bridge-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
6 | .grid-wrapper {
7 | display: flex;
8 | justify-content: center;
9 | align-items: center;
10 | }
11 |
12 | .grid {
13 | margin: 0.75em;
14 | display: grid;
15 | width: fit-content;
16 | }
17 |
18 | .rope-cell {
19 | height: 100%;
20 | width: 100%;
21 | display: flex;
22 | & > span {
23 | margin: auto;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/rope-bridge-visualizer/rope-bridge-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from 'src/app/helper/components/base-result.component';
3 | import { Point2D } from 'src/app/helper/util-functions/point';
4 | import { RopeMove } from '../../day9.service';
5 |
6 | @Component({
7 | selector: 'aoc-rope-bridge-visualizer',
8 | templateUrl: './rope-bridge-visualizer.component.html',
9 | styleUrls: ['./rope-bridge-visualizer.component.scss'],
10 | })
11 | export class RopeBridgeVisualizerComponent
12 | extends BaseResultComponent
13 | implements OnInit, AfterViewInit
14 | {
15 | currentIdx: number = 0;
16 |
17 | headMoves!: { move: RopeMove; position: Point2D }[];
18 | knotsMoves!: Point2D[][];
19 | minX!: number;
20 | maxX!: number;
21 | minY!: number;
22 | maxY!: number;
23 |
24 | squareWidth: number = 5;
25 |
26 | get move(): RopeMove {
27 | return this.headMoves[this.currentIdx].move;
28 | }
29 |
30 | get head(): Point2D {
31 | return this.headMoves[this.currentIdx].position;
32 | }
33 |
34 | get tail(): Point2D {
35 | return this.knotsMoves.slice(-1)[0][this.currentIdx];
36 | }
37 |
38 | get tailTrail(): Point2D[] {
39 | return this.knotsMoves.slice(-1)[0].slice(0, this.currentIdx + 1);
40 | }
41 |
42 | get body(): Point2D[] {
43 | return this.knotsMoves
44 | .slice(0, -1)
45 | .map((knotMoves) => knotMoves[this.currentIdx]);
46 | }
47 |
48 | get gridRepeatStyle(): object {
49 | return {
50 | 'grid-template-columns': `repeat(${this.minX + this.maxX + 1}, ${
51 | this.squareWidth
52 | }px)`,
53 | 'grid-template-rows': `repeat(${this.minY + this.maxY + 1}, ${
54 | this.squareWidth
55 | }px)`,
56 | };
57 | }
58 |
59 | constructor(private el: ElementRef) {
60 | super();
61 | }
62 |
63 | ngOnInit(): void {
64 | this.headMoves = this.data.headMoves as {
65 | move: RopeMove;
66 | position: Point2D;
67 | }[];
68 | this.knotsMoves = this.data.knotsMoves as Point2D[][];
69 |
70 | this.minX = -1 * Math.min(...this.headMoves.map((m) => m.position.x));
71 | this.maxX = Math.max(...this.headMoves.map((m) => m.position.x));
72 | this.minY = -1 * Math.min(...this.headMoves.map((m) => m.position.y));
73 | this.maxY = Math.max(...this.headMoves.map((m) => m.position.y));
74 | }
75 |
76 | ngAfterViewInit(): void {
77 | this.squareWidth =
78 | this.el.nativeElement.offsetWidth / ((this.minX + this.maxX + 1) * 2);
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/snafu-numbers-visualizer/snafu-numbers-visualizer.component.html:
--------------------------------------------------------------------------------
1 |
7 |
8 | Direction {{ move.direction }}
9 | Steps {{ move.distance }} 11 |
12 | 9 | Steps {{ move.distance }} 11 |
13 |
62 |
14 |
61 |
19 | H
20 |
21 |
26 |
27 | T
28 |
29 |
30 |
36 |
42 | .
43 |
44 |
45 |
51 | s
52 |
53 |
60 |
2 |
17 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/snafu-numbers-visualizer/snafu-numbers-visualizer.component.scss:
--------------------------------------------------------------------------------
1 | :host {
2 | display: block;
3 | width: 100%;
4 | }
5 |
6 | .grid-wrapper {
7 | display: flex;
8 | flex-direction: column;
9 | justify-content: center;
10 | align-items: center;
11 | }
12 |
13 | .grid {
14 | display: grid;
15 | grid-template-columns: repeat(8, 1fr);
16 | column-gap: 0.5em;
17 | row-gap: 0.5em;
18 | }
19 |
20 | .grid-cell {
21 | justify-self: center;
22 | }
23 |
--------------------------------------------------------------------------------
/src/app/solutions2022/components/snafu-numbers-visualizer/snafu-numbers-visualizer.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { BaseResultComponent } from '../../../helper/components/base-result.component';
3 |
4 | @Component({
5 | selector: 'aoc-snafu-numbers-visualizer',
6 | templateUrl: './snafu-numbers-visualizer.component.html',
7 | styleUrls: ['./snafu-numbers-visualizer.component.scss'],
8 | })
9 | export class SnafuNumbersVisualizerComponent
10 | extends BaseResultComponent
11 | implements OnInit
12 | {
13 | snafuNumbers!: string[];
14 | parsedNumbers!: number[];
15 | finalNumber!: number;
16 | finalSnafuNumber!: string;
17 |
18 | get factoredSnafuNumber(): string {
19 | return this.finalSnafuNumber
20 | .split('')
21 | .reverse()
22 | .map(
23 | (char, idx) =>
24 | `${char.replace('-', '-1').replace('=', '-2')} * 5^${idx}`
25 | )
26 | .reverse()
27 | .join(' + ');
28 | }
29 |
30 | ngOnInit(): void {
31 | this.snafuNumbers = this.data.snafuNumbers as string[];
32 | this.parsedNumbers = this.data.parsedNumbers as number[];
33 | this.finalNumber = this.data.finalNumber as number;
34 | this.finalSnafuNumber = this.data.finalSnafuNumber as string;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/app/solutions2022/day1.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { PlotlyGraphComponent } from '../helper/components/plotly-graph/plotly-graph.component';
3 | import { BaseSolutionService } from '../helper/services/base-solution.service';
4 | import {
5 | ISolutionService,
6 | PuzzleResult,
7 | } from '../helper/services/isolution.service';
8 | import { SolutionsCollectorService } from '../helper/services/solutions-collector.service';
9 | import { parseIntoNumbers } from '../helper/util-functions/parse-into-numbers';
10 | import { sumNumbers } from '../helper/util-functions/sum';
11 |
12 | @Injectable({
13 | providedIn: 'root',
14 | })
15 | export class Day1Service
16 | extends BaseSolutionService
17 | implements ISolutionService
18 | {
19 | constructor(solutionsCollectorService: SolutionsCollectorService) {
20 | super(solutionsCollectorService, 2022, 1, 'Calorie Counting');
21 | }
22 | override solvePart1(input: string): PuzzleResult {
23 | var groups = input.split('\n\n').map(parseIntoNumbers);
24 | var intakes = groups.map(sumNumbers);
25 | var result = Math.max(...intakes);
26 | return {
27 | result: result,
28 | component: PlotlyGraphComponent,
29 | componentData: {
30 | graphData: [
31 | {
32 | x: intakes.map((val, idx) => idx + 1),
33 | y: intakes,
34 | type: 'bar',
35 | marker: { color: '#fad02c' },
36 | },
37 | ],
38 | graphLayout: {
39 | yaxis: { title: 'Calories sum' },
40 | xaxis: { title: 'Elf', automargin: true },
41 | },
42 | },
43 | };
44 | }
45 | override solvePart2(input: string): PuzzleResult {
46 | var groups = input.split('\n\n').map(parseIntoNumbers);
47 | var intakes = groups
48 | .map(sumNumbers)
49 | .map((val, idx) => [val, idx + 1])
50 | .sort((a, b) => (a[0] < b[0] ? -1 : a[0] > b[0] ? 1 : 0));
51 |
52 | var triple_intakes = intakes.slice(0, -2).map((val, idx) => {
53 | var sub_arr = intakes.slice(idx, idx + 3);
54 | return [
55 | sub_arr.reduce((acc, cur) => {
56 | return acc + cur[0];
57 | }, 0),
58 | sub_arr.map((x) => x[1]).join(' + '),
59 | ];
60 | });
61 |
62 | return {
63 | result: triple_intakes.slice(-1)[0][0],
64 | component: PlotlyGraphComponent,
65 | componentData: {
66 | graphData: [
67 | {
68 | x: triple_intakes.map((val) => val[1]),
69 | y: triple_intakes.map((val) => val[0]),
70 | type: 'bar',
71 | marker: { color: '#fad02c' },
72 | },
73 | ],
74 | graphLayout: {
75 | yaxis: { title: 'Calories sum' },
76 | xaxis: { title: 'Elf', type: 'category', automargin: true },
77 | },
78 | },
79 | };
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/src/app/solutions2022/day25.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { PlotlyGraphComponent } from '../helper/components/plotly-graph/plotly-graph.component';
3 | import { BaseSolutionService } from '../helper/services/base-solution.service';
4 | import {
5 | ISolutionService,
6 | PuzzleResult,
7 | } from '../helper/services/isolution.service';
8 | import { SolutionsCollectorService } from '../helper/services/solutions-collector.service';
9 | import { splitIntoLines } from '../helper/util-functions/split-into-lines';
10 | import { SnafuNumbersVisualizerComponent } from './components/snafu-numbers-visualizer/snafu-numbers-visualizer.component';
11 |
12 | function fromSNAFU(value: string): number {
13 | return value
14 | .split('')
15 | .reverse()
16 | .map((char, idx) => {
17 | var base = Math.pow(5, idx);
18 | switch (char) {
19 | case '=':
20 | return base * -2;
21 | case '-':
22 | return base * -1;
23 | default:
24 | return base * Number(char);
25 | }
26 | })
27 | .sum();
28 | }
29 |
30 | // Inspired by u/ai_prof
31 | // https://www.reddit.com/r/adventofcode/comments/zur1an/comment/j1qmqf1/
32 | function toSNAFU(value: number): string {
33 | if (value == 0) return '';
34 |
35 | var quotient = Math.floor(value / 5);
36 | switch (value % 5) {
37 | case 3:
38 | return toSNAFU(1 + quotient) + '=';
39 | case 4:
40 | return toSNAFU(1 + quotient) + '-';
41 | default:
42 | return toSNAFU(quotient) + (value % 5).toString();
43 | }
44 | }
45 |
46 | @Injectable({
47 | providedIn: 'root',
48 | })
49 | export class Day25Service
50 | extends BaseSolutionService
51 | implements ISolutionService
52 | {
53 | constructor(solutionsCollectorService: SolutionsCollectorService) {
54 | super(solutionsCollectorService, 2022, 25, 'Full of Hot Air');
55 | }
56 | override solvePart1(input: string): PuzzleResult {
57 | var lines = splitIntoLines(input, true);
58 | var numbers = lines.map(fromSNAFU);
59 | var numbersSum = numbers.sum();
60 | var snafuNumber = toSNAFU(numbersSum);
61 | return {
62 | result: snafuNumber,
63 | component: SnafuNumbersVisualizerComponent,
64 | componentData: {
65 | snafuNumbers: lines,
66 | parsedNumbers: numbers,
67 | finalNumber: numbersSum,
68 | finalSnafuNumber: snafuNumber,
69 | },
70 | };
71 | }
72 | override solvePart2(input: string): number {
73 | return 0;
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/src/app/solutions2022/day4.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { PlotlyGraphComponent } from '../helper/components/plotly-graph/plotly-graph.component';
3 | import { BaseSolutionService } from '../helper/services/base-solution.service';
4 | import {
5 | ISolutionService,
6 | PuzzleResult,
7 | } from '../helper/services/isolution.service';
8 | import { SolutionsCollectorService } from '../helper/services/solutions-collector.service';
9 | import { splitIntoLines } from '../helper/util-functions/split-into-lines';
10 | import { CampSectionsVisualizerComponent } from './components/camp-sections-visualizer/camp-sections-visualizer.component';
11 |
12 | export class Sections {
13 | protected elf1Start: number;
14 | protected elf1End: number;
15 | protected elf2Start: number;
16 | protected elf2End: number;
17 |
18 | constructor(inputLine: string) {
19 | var parts = inputLine.split(',');
20 | var elf1Range = parts[0].split('-').map(Number);
21 | var elf2Range = parts[1].split('-').map(Number);
22 |
23 | this.elf1Start = elf1Range[0];
24 | this.elf1End = elf1Range[1];
25 |
26 | this.elf2Start = elf2Range[0];
27 | this.elf2End = elf2Range[1];
28 | }
29 |
30 | get ranges(): [number[], number[]] {
31 | return [
32 | Array.range(this.elf1Start, this.elf1End + 1),
33 | Array.range(this.elf2Start, this.elf2End + 1),
34 | ];
35 | }
36 |
37 | get isTotalOverlap(): boolean {
38 | return (
39 | (this.elf1Start <= this.elf2Start && this.elf1End >= this.elf2End) ||
40 | (this.elf2Start <= this.elf1Start && this.elf2End >= this.elf1End)
41 | );
42 | }
43 |
44 | get overlapLength(): number {
45 | var ranges = this.ranges;
46 | var frequency = ranges[0]
47 | .concat(ranges[1])
48 | .reduce(function (acc: { [item: number]: number }, curr: number) {
49 | return acc[curr] ? ++acc[curr] : (acc[curr] = 1), acc;
50 | }, {});
51 | return Object.entries(frequency).filter(([key, value]) => value > 1).length;
52 | }
53 | }
54 |
55 | @Injectable({
56 | providedIn: 'root',
57 | })
58 | export class Day4Service
59 | extends BaseSolutionService
60 | implements ISolutionService
61 | {
62 | constructor(solutionsCollectorService: SolutionsCollectorService) {
63 | super(solutionsCollectorService, 2022, 4, 'Camp Cleanup');
64 | }
65 | override solvePart1(input: string): PuzzleResult {
66 | var sections = splitIntoLines(input).map((line) => new Sections(line));
67 | return {
68 | result: sections.filter((x) => x.isTotalOverlap).length,
69 | component: CampSectionsVisualizerComponent,
70 | componentData: {
71 | sections: sections.map((section) => section.ranges),
72 | },
73 | };
74 | }
75 | override solvePart2(input: string): PuzzleResult {
76 | var sections = splitIntoLines(input).map((line) => new Sections(line));
77 | var overlaps = sections.map((x) => x.overlapLength);
78 | var overlapsFrequency = overlaps.reduce(function (
79 | acc: { [item: number]: number },
80 | curr: number
81 | ) {
82 | return acc[curr] ? ++acc[curr] : (acc[curr] = 1), acc;
83 | },
84 | {});
85 | return {
86 | result: overlaps.filter((x) => x > 0).length,
87 | component: PlotlyGraphComponent,
88 | componentData: {
89 | graphData: [
90 | {
91 | x: Object.entries(overlapsFrequency).map(([key, value]) => key),
92 | y: Object.entries(overlapsFrequency).map(([key, value]) => value),
93 | type: 'bar',
94 | marker: { color: '#fad02c' },
95 | },
96 | ],
97 | graphLayout: {
98 | yaxis: { title: 'Count' },
99 | xaxis: { title: 'Overlap size', automargin: true },
100 | },
101 | },
102 | };
103 | }
104 | }
105 |
--------------------------------------------------------------------------------
/src/app/solutions2022/day6.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { PlotlyGraphComponent } from '../helper/components/plotly-graph/plotly-graph.component';
3 | import { BaseSolutionService } from '../helper/services/base-solution.service';
4 | import {
5 | ISolutionService,
6 | PuzzleResult,
7 | } from '../helper/services/isolution.service';
8 | import { SolutionsCollectorService } from '../helper/services/solutions-collector.service';
9 | import { splitIntoLines } from '../helper/util-functions/split-into-lines';
10 | import { DatastreamBufferVisualizerComponent } from './components/datastream-buffer-visualizer/datastream-buffer-visualizer.component';
11 |
12 | function findStartOfPacket(message: string, markerLength: number): number {
13 | return (
14 | message
15 | .split('')
16 | .findIndex(
17 | (buffer, idx) =>
18 | new Set(message.slice(idx, idx + markerLength)).size === markerLength
19 | ) + markerLength
20 | );
21 | }
22 |
23 | @Injectable({
24 | providedIn: 'root',
25 | })
26 | export class Day6Service
27 | extends BaseSolutionService
28 | implements ISolutionService
29 | {
30 | constructor(solutionsCollectorService: SolutionsCollectorService) {
31 | super(solutionsCollectorService, 2022, 6, 'Tuning Trouble');
32 | }
33 | override solvePart1(input: string): PuzzleResult {
34 | var datastreamBuffer = splitIntoLines(input)[0];
35 | var result = findStartOfPacket(datastreamBuffer, 4);
36 | return {
37 | result: result,
38 | component: DatastreamBufferVisualizerComponent,
39 | componentData: {
40 | index: result,
41 | message: datastreamBuffer,
42 | packetLength: 4,
43 | },
44 | };
45 | }
46 | override solvePart2(input: string): PuzzleResult {
47 | var datastreamBuffer = splitIntoLines(input)[0];
48 | var result = findStartOfPacket(datastreamBuffer, 14);
49 | return {
50 | result: result,
51 | component: DatastreamBufferVisualizerComponent,
52 | componentData: {
53 | index: result,
54 | message: datastreamBuffer,
55 | packetLength: 14,
56 | },
57 | };
58 | }
59 | }
60 |
--------------------------------------------------------------------------------
/src/app/solutions2022/web-workers/day16.worker.ts:
--------------------------------------------------------------------------------
1 | ///
3 |
11 |
12 |
7 | {{ snafuNumber }} =>
8 | {{ parsedNumbers[i] }}
9 |
10 |
13 | {{ finalNumber }} = {{ factoredSnafuNumber }} =
14 | {{ finalSnafuNumber }}
15 |
16 |