Add avoid

This commit is contained in:
Andras Schmelczer 2022-09-26 17:44:36 +02:00
parent d3927cc13c
commit f41bab1156
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
5 changed files with 38 additions and 3 deletions

BIN
src/data/media/avoid.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

View file

@ -10,6 +10,7 @@ import { UpArrowButton } from '../page/up-arrow-button/up-arrow-button';
import cvEnglish from './media/cv-andras-schmelczer.pdf'; import cvEnglish from './media/cv-andras-schmelczer.pdf';
import me from './media/me.jpg'; import me from './media/me.jpg';
import { adAstra } from './projects/ad-astra'; import { adAstra } from './projects/ad-astra';
import { avoid } from './projects/avoid';
import { citySimulation } from './projects/city-simulation'; import { citySimulation } from './projects/city-simulation';
import { declared } from './projects/declared'; import { declared } from './projects/declared';
import { forex } from './projects/forex'; import { forex } from './projects/forex';
@ -53,6 +54,7 @@ const main = new Main(
nuclear, nuclear,
nuclearEditor, nuclearEditor,
citySimulation, citySimulation,
avoid,
platformGame, platformGame,
photos, photos,
leds, leds,

View file

@ -0,0 +1,18 @@
import { Preview } from '../../page/preview/preview';
import { TimelineElementParameters } from '../../page/timeline-element/timeline-element-parameters';
import avoidPoster from '../media/avoid.png';
import { Open } from '../shared';
export const avoid: TimelineElementParameters = {
title: 'Avoid',
date: '2018 January',
figure: new Preview(
avoidPoster,
'https://schmelczer.dev/avoid',
'A webpage showcasing the SDF-2D project.'
),
description:
"I recently found my first-ever web game. It's incredibly simple but I killed some time with it, so feel free to try it out but don't judge too harshly.",
links: [Open('https://schmelczer.dev/avoid')],
};

View file

@ -7,6 +7,6 @@ export interface TimelineElementParameters {
figure: html | Video | Preview; figure: html | Video | Preview;
title: string; title: string;
description: string; description: string;
more: Array<string>; more?: Array<html>;
links: Array<html>; links: Array<html>;
} }

View file

@ -5,7 +5,7 @@ import { generate } from './timeline-element.html';
export class TimelineElement extends PageElement { export class TimelineElement extends PageElement {
private isOpen = false; private isOpen = false;
private more: HTMLElement; private readonly more?: HTMLElement;
public constructor( public constructor(
private timelineElement: TimelineElementParameters, private timelineElement: TimelineElementParameters,
@ -14,9 +14,12 @@ export class TimelineElement extends PageElement {
) { ) {
super(generate(timelineElement, showMore)); super(generate(timelineElement, showMore));
this.more = this.query('.more'); this.more = this.query('.more');
addEventListener('resize', this.handleResize.bind(this)); addEventListener('resize', this.handleResize.bind(this));
this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this)); if (this.more) {
this.query('.info-button').addEventListener('click', this.toggleOpen.bind(this));
}
this.attachElementByReplacing( this.attachElementByReplacing(
'.figure', '.figure',
@ -43,6 +46,10 @@ export class TimelineElement extends PageElement {
} }
private openMore() { private openMore() {
if (!this.more) {
return;
}
this.isOpen = true; this.isOpen = true;
this.query('.info-button > p').innerText = this.showLess; this.query('.info-button > p').innerText = this.showLess;
@ -52,6 +59,10 @@ export class TimelineElement extends PageElement {
} }
private closeMore() { private closeMore() {
if (!this.more) {
return;
}
this.isOpen = false; this.isOpen = false;
this.query('.info-button > p').innerText = this.showMore; this.query('.info-button > p').innerText = this.showMore;
@ -60,6 +71,10 @@ export class TimelineElement extends PageElement {
} }
private handleResize() { private handleResize() {
if (!this.more) {
return;
}
if (this.isOpen) { if (this.isOpen) {
this.more.style.height = 'auto'; this.more.style.height = 'auto';
setTimeout(this.openMore.bind(this), 100); setTimeout(this.openMore.bind(this), 100);