From 9790361f2474657b849de2f9d24c64b753cd8a75 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Wed, 21 Jul 2021 15:27:04 +0200 Subject: [PATCH 01/25] Generate overview based on subproject size --- main.ts | 14 ++--- metadata/project.json | 16 +++++ src/api.ts | 1 - src/helpers.ts | 63 +++++++++++++++++++ src/scenes/{LegacyScene.ts => DetailScene.ts} | 6 +- src/scenes/OverviewScene.ts | 16 ++--- src/scenes/scenes.ts | 4 +- src/sketchObjects/Edge.ts | 2 +- src/types.ts | 11 ++++ 9 files changed, 109 insertions(+), 24 deletions(-) create mode 100644 metadata/project.json delete mode 100644 src/api.ts create mode 100644 src/helpers.ts rename src/scenes/{LegacyScene.ts => DetailScene.ts} (67%) create mode 100644 src/types.ts diff --git a/main.ts b/main.ts index 99556d0..f3288a4 100644 --- a/main.ts +++ b/main.ts @@ -1,6 +1,6 @@ import p5 from 'p5'; import { SCREEN_WIDTH, SCREEN_HEIGHT } from './src/constants/screen'; -import { LegacyScene } from './src/scenes/LegacyScene'; +import { DetailScene } from './src/scenes/DetailScene'; import { OverviewScene } from './src/scenes/OverviewScene'; import { Scenes } from './src/scenes/scenes'; import store from './src/store'; @@ -9,7 +9,7 @@ import { Companion, CompanionState } from './src/ui/companion'; const sketch = (s: p5) => { // Scenes let overviewScene: OverviewScene; - let legacyScene: LegacyScene; + let detailScene: DetailScene; s.setup = () => { s.createCanvas(SCREEN_WIDTH, SCREEN_HEIGHT); @@ -18,7 +18,7 @@ const sketch = (s: p5) => { new Companion(); overviewScene = new OverviewScene(); - legacyScene = new LegacyScene(); + detailScene = new DetailScene(); }; s.draw = () => { @@ -26,8 +26,8 @@ const sketch = (s: p5) => { if (currentScene === Scenes.OVERVIEW) { overviewScene.draw(); - } else if (currentScene === Scenes.LEGACY) { - legacyScene.draw(); + } else if (currentScene === Scenes.DETAIL) { + detailScene.draw(); } }; @@ -38,8 +38,8 @@ const sketch = (s: p5) => { if (currentScene === Scenes.OVERVIEW) { overviewScene.onSceneClick(); - } else if (currentScene === Scenes.LEGACY) { - legacyScene.onSceneClick(); + } else if (currentScene === Scenes.DETAIL) { + detailScene.onSceneClick(); } }; }; diff --git a/metadata/project.json b/metadata/project.json new file mode 100644 index 0000000..52cd135 --- /dev/null +++ b/metadata/project.json @@ -0,0 +1,16 @@ +{ + "subprojects": [ + { + "name": "sample", + "path": "packages/sample", + "size": 2450, + "contents": {} + }, + { + "name": "sample", + "path": "packages/sample", + "size": 5600, + "contents": {} + } + ] +} diff --git a/src/api.ts b/src/api.ts deleted file mode 100644 index b786864..0000000 --- a/src/api.ts +++ /dev/null @@ -1 +0,0 @@ -export class Api {} diff --git a/src/helpers.ts b/src/helpers.ts new file mode 100644 index 0000000..df5d00e --- /dev/null +++ b/src/helpers.ts @@ -0,0 +1,63 @@ +import { mp5 } from '../main'; +import { SCREEN_HEIGHT, SCREEN_WIDTH } from './constants/screen'; +import { Edge } from './sketchObjects/Edge'; +import { Coordinates, SubProject } from './types'; + +export function getEdgeDimensions({ size }: SubProject): number { + const radius = size * 0.05; + return radius > 150 ? 150 : radius; +} + +export function generateRandomEdgeCoordinates(): Coordinates { + return { + x: mp5.random(150, SCREEN_WIDTH - 150), + y: mp5.random(150, SCREEN_HEIGHT - 150), + }; +} + +export function isColliding( + coordinatesToTest: Coordinates, + existingCoordinates: Coordinates[] +): boolean { + return existingCoordinates.some( + (existingCoordinate) => + mp5.dist( + existingCoordinate.x, + existingCoordinate.y, + coordinatesToTest.x, + coordinatesToTest.y + ) < 300 + ); +} + +export function generateEdgeCoords(existingCoordinates: Coordinates[]): Coordinates { + let newCoords: Coordinates; + + do { + newCoords = generateRandomEdgeCoordinates(); + } while (isColliding(newCoords, existingCoordinates)); + + return newCoords; +} + +export function generateEdges(subprojects: SubProject[]): Edge[] { + let edgeCoords = []; + + subprojects.forEach((subproject) => { + const coordinates = generateEdgeCoords(edgeCoords); + edgeCoords.push({ + x: coordinates.x, + y: coordinates.y, + r: getEdgeDimensions(subproject), + }); + }); + + return edgeCoords.map( + (edgeCoord) => + new Edge({ + x: edgeCoord.x, + y: edgeCoord.y, + r: edgeCoord.r, + }) + ); +} diff --git a/src/scenes/LegacyScene.ts b/src/scenes/DetailScene.ts similarity index 67% rename from src/scenes/LegacyScene.ts rename to src/scenes/DetailScene.ts index 9a50b95..7502312 100644 --- a/src/scenes/LegacyScene.ts +++ b/src/scenes/DetailScene.ts @@ -1,7 +1,8 @@ import { mp5 } from '../../main'; import store from '../store'; import { Scenes } from './scenes'; -export class LegacyScene { + +export class DetailScene { constructor() {} draw() { @@ -9,7 +10,8 @@ export class LegacyScene { } onSceneClick() { - console.log('Click on legacy scene'); + console.log('Click on detail scene'); + console.log('Changing back to overview'); store.setState({ currentScene: Scenes.OVERVIEW }); } } diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index fea6373..17b4fb6 100644 --- a/src/scenes/OverviewScene.ts +++ b/src/scenes/OverviewScene.ts @@ -2,21 +2,17 @@ import { mp5 } from '../../main'; import { Player } from '../sketchObjects/Player'; import { colors } from '../constants/colors'; import { Edge } from '../sketchObjects/Edge'; -import { Scenes } from './scenes'; import store from '../store'; +import { generateEdges } from '../helpers'; +import { Scenes } from './scenes'; +import projectMetadata from '../../metadata/project.json'; export class OverviewScene { player: Player; - edgeData: Array<{ x: number; y: number; r: number; scene: Scenes }>; edges: Edge[]; constructor() { - this.edgeData = [ - { x: 100, y: 100, r: 50, scene: Scenes.LEGACY }, - { x: 900, y: 400, r: 100, scene: Scenes.LEGACY }, - { x: 300, y: 600, r: 75, scene: Scenes.LEGACY }, - ]; - this.edges = this.edgeData.map((edge) => new Edge(edge.x, edge.y, edge.r)); + this.edges = generateEdges(projectMetadata.subprojects); this.player = new Player(); } @@ -29,10 +25,10 @@ export class OverviewScene { } public onSceneClick() { - this.edgeData.forEach((edge, i) => { + this.edges.forEach((edge, i) => { const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y); if (dist < edge.r) { - store.setState({ currentScene: edge.scene }); + store.setState({ currentScene: Scenes.DETAIL }); } }); } diff --git a/src/scenes/scenes.ts b/src/scenes/scenes.ts index 5083c73..00dfc32 100644 --- a/src/scenes/scenes.ts +++ b/src/scenes/scenes.ts @@ -1,6 +1,4 @@ export enum Scenes { OVERVIEW = 'OVERVIEW', - LEGACY = 'LEGACY', - PACKAGES = 'PACKAGES', - CONTRIBUTORS = 'CONTRIBUTORS', + DETAIL = 'DETAIL', } diff --git a/src/sketchObjects/Edge.ts b/src/sketchObjects/Edge.ts index 2832f26..933b713 100644 --- a/src/sketchObjects/Edge.ts +++ b/src/sketchObjects/Edge.ts @@ -6,7 +6,7 @@ export class Edge { y: number; r: number; - constructor(x: number, y: number, r: number) { + constructor({ x, y, r }: { x: number; y: number; r: number }) { this.x = x; this.y = y; this.r = r; diff --git a/src/types.ts b/src/types.ts new file mode 100644 index 0000000..9e6cd8a --- /dev/null +++ b/src/types.ts @@ -0,0 +1,11 @@ +export interface SubProject { + name: string; + path: string; + size: number; + contents: any; +} + +export interface Coordinates { + x: number; + y: number; +} From 40d4a2364e12276b540fe4521d333d44a29a797e Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Wed, 21 Jul 2021 16:08:39 +0200 Subject: [PATCH 02/25] Show package name in overview --- metadata/project.json | 8 ++++---- src/helpers.ts | 21 ++++++++++++--------- src/sketchObjects/Edge.ts | 7 ++++++- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/metadata/project.json b/metadata/project.json index 52cd135..c2e77ae 100644 --- a/metadata/project.json +++ b/metadata/project.json @@ -1,14 +1,14 @@ { "subprojects": [ { - "name": "sample", - "path": "packages/sample", + "name": "block", + "path": "packages/block", "size": 2450, "contents": {} }, { - "name": "sample", - "path": "packages/sample", + "name": "client", + "path": "packages/client", "size": 5600, "contents": {} } diff --git a/src/helpers.ts b/src/helpers.ts index df5d00e..c5230a1 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -30,8 +30,9 @@ export function isColliding( ); } -export function generateEdgeCoords(existingCoordinates: Coordinates[]): Coordinates { +export function generateEdgeCoords(existingEdges: Edge[]): Coordinates { let newCoords: Coordinates; + const existingCoordinates = existingEdges.map(({ x, y }) => ({ x, y })); do { newCoords = generateRandomEdgeCoordinates(); @@ -41,23 +42,25 @@ export function generateEdgeCoords(existingCoordinates: Coordinates[]): Coordina } export function generateEdges(subprojects: SubProject[]): Edge[] { - let edgeCoords = []; + let edges = []; subprojects.forEach((subproject) => { - const coordinates = generateEdgeCoords(edgeCoords); - edgeCoords.push({ + const coordinates = generateEdgeCoords(edges); + edges.push({ x: coordinates.x, y: coordinates.y, r: getEdgeDimensions(subproject), + name: subproject.name, }); }); - return edgeCoords.map( - (edgeCoord) => + return edges.map( + (edge) => new Edge({ - x: edgeCoord.x, - y: edgeCoord.y, - r: edgeCoord.r, + x: edge.x, + y: edge.y, + r: edge.r, + name: edge.name, }) ); } diff --git a/src/sketchObjects/Edge.ts b/src/sketchObjects/Edge.ts index 933b713..a521ee8 100644 --- a/src/sketchObjects/Edge.ts +++ b/src/sketchObjects/Edge.ts @@ -5,15 +5,20 @@ export class Edge { x: number; y: number; r: number; + name: string; - constructor({ x, y, r }: { x: number; y: number; r: number }) { + constructor({ x, y, r, name }: { x: number; y: number; r: number; name: string }) { this.x = x; this.y = y; this.r = r; + this.name = name; } draw() { mp5.fill(mp5.color(colors.grey)); mp5.ellipse(this.x, this.y, this.r * 2); + mp5.textSize(20); + mp5.fill(0); + mp5.text(this.name, this.x, this.y); } } From 18850e9fb8b44968bfe61083f7e09b3906a2bebb Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Thu, 22 Jul 2021 14:08:50 +0200 Subject: [PATCH 03/25] Set up intro message and player in detail scene --- metadata/project.json | 18 ++++++++++++++++++ src/scenes/DetailScene.ts | 9 ++++++++- src/scenes/OverviewScene.ts | 8 ++++++++ 3 files changed, 34 insertions(+), 1 deletion(-) diff --git a/metadata/project.json b/metadata/project.json index c2e77ae..0e616b3 100644 --- a/metadata/project.json +++ b/metadata/project.json @@ -11,6 +11,24 @@ "path": "packages/client", "size": 5600, "contents": {} + }, + { + "name": "blockchain", + "path": "packages/blockchain", + "size": 4000, + "contents": {} + }, + { + "name": "ethash", + "path": "packages/ethash", + "size": 3600, + "contents": {} + }, + { + "name": "common", + "path": "packages/common", + "size": 1000, + "contents": {} } ] } diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index 7502312..0301c1f 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -1,12 +1,19 @@ import { mp5 } from '../../main'; +import { Player } from '../sketchObjects/Player'; import store from '../store'; import { Scenes } from './scenes'; export class DetailScene { - constructor() {} + player: Player; + + constructor() { + this.player = new Player(); + } draw() { mp5.background(100); + this.player.follow(); + this.player.move(); } onSceneClick() { diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index 17b4fb6..81884a6 100644 --- a/src/scenes/OverviewScene.ts +++ b/src/scenes/OverviewScene.ts @@ -14,6 +14,14 @@ export class OverviewScene { constructor() { this.edges = generateEdges(projectMetadata.subprojects); this.player = new Player(); + + setTimeout(() => { + store.getState().addUserMessage({ + text: "Hello there 👋 Let's start exploring the ethereumjs open source project", + inputWanted: false, + timestamp: Date.now(), + }); + }, 2000); } public draw() { From e6536ca7c86835ab6f37383cb98486f9518c9f99 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Sat, 24 Jul 2021 17:19:54 +0200 Subject: [PATCH 04/25] Set up contributor and detail scene --- .htmlnanorc.js | 3 +++ metadata/project.json | 6 +++++- src/helpers.ts | 4 ++++ src/scenes/DetailScene.ts | 14 +++++++++++++- src/scenes/OverviewScene.ts | 1 + src/sketchObjects/Contributor.ts | 24 ++++++++++++++++++++++++ src/store.ts | 18 ++++++++++++++++++ src/types.ts | 6 +++++- 8 files changed, 73 insertions(+), 3 deletions(-) create mode 100644 .htmlnanorc.js create mode 100644 src/sketchObjects/Contributor.ts diff --git a/.htmlnanorc.js b/.htmlnanorc.js new file mode 100644 index 0000000..86d7fe9 --- /dev/null +++ b/.htmlnanorc.js @@ -0,0 +1,3 @@ +module.exports = { + minifySvg: false, +}; diff --git a/metadata/project.json b/metadata/project.json index 0e616b3..8297af4 100644 --- a/metadata/project.json +++ b/metadata/project.json @@ -4,7 +4,11 @@ "name": "block", "path": "packages/block", "size": 2450, - "contents": {} + "contents": { + "legacy": ["Test"], + "contributors": ["Test"], + "packages": ["Test"] + } }, { "name": "client", diff --git a/src/helpers.ts b/src/helpers.ts index c5230a1..63986c1 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -64,3 +64,7 @@ export function generateEdges(subprojects: SubProject[]): Edge[] { }) ); } + +export function getSubproject(name: string, projects: SubProject[]): SubProject { + return projects.filter((project) => project.name === name)[0]; +} diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index 0301c1f..4f7100c 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -1,19 +1,31 @@ import { mp5 } from '../../main'; +import { colors } from '../constants/colors'; import { Player } from '../sketchObjects/Player'; import store from '../store'; import { Scenes } from './scenes'; export class DetailScene { player: Player; + contributors: any; + legacy: any; + packages: any; constructor() { this.player = new Player(); + + store.subscribe((state) => { + this.contributors = state.currContributors; + this.legacy = state.currLegacy; + this.packages = state.currPackages; + }); } draw() { - mp5.background(100); + mp5.background(mp5.color(colors.greyLighter)); this.player.follow(); this.player.move(); + + // TODO: Draw what can be found } onSceneClick() { diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index 81884a6..d1d8029 100644 --- a/src/scenes/OverviewScene.ts +++ b/src/scenes/OverviewScene.ts @@ -36,6 +36,7 @@ export class OverviewScene { this.edges.forEach((edge, i) => { const dist = mp5.dist(mp5.mouseX, mp5.mouseY, edge.x, edge.y); if (dist < edge.r) { + store.getState().setDetailScene(edge.name); store.setState({ currentScene: Scenes.DETAIL }); } }); diff --git a/src/sketchObjects/Contributor.ts b/src/sketchObjects/Contributor.ts new file mode 100644 index 0000000..29f1233 --- /dev/null +++ b/src/sketchObjects/Contributor.ts @@ -0,0 +1,24 @@ +import { mp5 } from '../../main'; +import { colors } from '../constants/colors'; + +export class Contributor { + x: number; + y: number; + size: number; + name: string; + profileURL: string; + revealed: boolean; + + constructor(x: number, y: number, size: number, name?: string, profileURL?: string) { + this.x = x; + this.y = y; + this.size = size; + } + + public place() {} + + private draw() { + mp5.fill(mp5.color(colors.blueGrey)); + mp5.ellipse(this.x, this.y, this.size); + } +} diff --git a/src/store.ts b/src/store.ts index a5369ee..d52c9fd 100644 --- a/src/store.ts +++ b/src/store.ts @@ -2,12 +2,19 @@ import create from 'zustand/vanilla'; import { devtools } from 'zustand/middleware'; import { Scenes } from './scenes/scenes'; import { CompanionMessage, CompanionState } from './ui/companion'; +import project from '../metadata/project.json'; +import { getSubproject } from './helpers'; +import { SubProject } from './types'; export interface State { currentScene: Scenes; companionState: CompanionState; userMessages: CompanionMessage[]; addUserMessage: (newMessage: CompanionMessage) => void; + currContributors: any; + currLegacy: any; + currPackages: any; + setDetailScene: (packageName: string) => void; } const store = create( @@ -17,6 +24,17 @@ const store = create( userMessages: [], addUserMessage: (newMessage) => set((state) => ({ userMessages: [...state.userMessages, newMessage] })), + currContributors: [], + currLegacy: [], + currPackages: [], + setDetailScene: (packageName) => + set(() => ({ + currContributors: getSubproject(packageName, project.subprojects as SubProject[]).contents + .contributors, + currLegacy: getSubproject(packageName, project.subprojects as SubProject[]).contents.legacy, + currPackages: getSubproject(packageName, project.subprojects as SubProject[]).contents + .packages, + })), })) ); diff --git a/src/types.ts b/src/types.ts index 9e6cd8a..280428e 100644 --- a/src/types.ts +++ b/src/types.ts @@ -2,7 +2,11 @@ export interface SubProject { name: string; path: string; size: number; - contents: any; + contents: { + contributors: any[]; + legacy: any[]; + packages: any[]; + }; } export interface Coordinates { From cd858baf3a1ea3eecdf5e07f6d4b63fd81f7a570 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Sat, 24 Jul 2021 17:21:09 +0200 Subject: [PATCH 05/25] Create other sketchObjects --- src/sketchObjects/Legacy.ts | 23 +++++++++++++++++++++++ src/sketchObjects/Package.ts | 23 +++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 src/sketchObjects/Legacy.ts create mode 100644 src/sketchObjects/Package.ts diff --git a/src/sketchObjects/Legacy.ts b/src/sketchObjects/Legacy.ts new file mode 100644 index 0000000..35e59ed --- /dev/null +++ b/src/sketchObjects/Legacy.ts @@ -0,0 +1,23 @@ +import { mp5 } from '../../main'; +import { colors } from '../constants/colors'; + +export class Legacy { + x: number; + y: number; + size: number; + name: string; + revealed: boolean; + + constructor(x: number, y: number, size: number, name?: string, profileURL?: string) { + this.x = x; + this.y = y; + this.size = size; + } + + public place() {} + + private draw() { + mp5.fill(mp5.color(colors.red)); + mp5.ellipse(this.x, this.y, this.size); + } +} diff --git a/src/sketchObjects/Package.ts b/src/sketchObjects/Package.ts new file mode 100644 index 0000000..ea61188 --- /dev/null +++ b/src/sketchObjects/Package.ts @@ -0,0 +1,23 @@ +import { mp5 } from '../../main'; +import { colors } from '../constants/colors'; + +export class Contributor { + x: number; + y: number; + size: number; + name: string; + revealed: boolean; + + constructor(x: number, y: number, size: number, name?: string, profileURL?: string) { + this.x = x; + this.y = y; + this.size = size; + } + + public place() {} + + private draw() { + mp5.fill(mp5.color(colors.redDark)); + mp5.ellipse(this.x, this.y, this.size); + } +} From db39a8cb4239f4c4ed941269df7368fb670cf73d Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Sat, 24 Jul 2021 17:43:39 +0200 Subject: [PATCH 06/25] Draw subproject contents on screen --- src/scenes/DetailScene.ts | 27 ++++++++++++++++++++------- src/sketchObjects/Contributor.ts | 4 +--- src/sketchObjects/Legacy.ts | 4 +--- src/sketchObjects/Package.ts | 6 ++---- 4 files changed, 24 insertions(+), 17 deletions(-) diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index 4f7100c..521efb0 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -1,22 +1,27 @@ import { mp5 } from '../../main'; import { colors } from '../constants/colors'; +import { Contributor } from '../sketchObjects/Contributor'; +import { Legacy } from '../sketchObjects/Legacy'; +import { Package } from '../sketchObjects/Package'; import { Player } from '../sketchObjects/Player'; import store from '../store'; import { Scenes } from './scenes'; export class DetailScene { player: Player; - contributors: any; - legacy: any; - packages: any; + contributors: any[]; + legacy: any[]; + packages: any[]; constructor() { this.player = new Player(); store.subscribe((state) => { - this.contributors = state.currContributors; - this.legacy = state.currLegacy; - this.packages = state.currPackages; + this.contributors = state.currContributors.map( + (contributor) => new Contributor(100, 200, 100) + ); + this.legacy = state.currLegacy.map((legacy) => new Legacy(200, 300, 100)); + this.packages = state.currPackages.map((currPackage) => new Package(400, 300, 100)); }); } @@ -25,7 +30,15 @@ export class DetailScene { this.player.follow(); this.player.move(); - // TODO: Draw what can be found + this.contributors.forEach((contributor) => { + contributor.place(); + }); + this.legacy.forEach((legacyObj) => { + legacyObj.place(); + }); + this.packages.forEach((packageObj) => { + packageObj.place(); + }); } onSceneClick() { diff --git a/src/sketchObjects/Contributor.ts b/src/sketchObjects/Contributor.ts index 29f1233..fb47312 100644 --- a/src/sketchObjects/Contributor.ts +++ b/src/sketchObjects/Contributor.ts @@ -15,9 +15,7 @@ export class Contributor { this.size = size; } - public place() {} - - private draw() { + public place() { mp5.fill(mp5.color(colors.blueGrey)); mp5.ellipse(this.x, this.y, this.size); } diff --git a/src/sketchObjects/Legacy.ts b/src/sketchObjects/Legacy.ts index 35e59ed..fc4fb74 100644 --- a/src/sketchObjects/Legacy.ts +++ b/src/sketchObjects/Legacy.ts @@ -14,9 +14,7 @@ export class Legacy { this.size = size; } - public place() {} - - private draw() { + private place() { mp5.fill(mp5.color(colors.red)); mp5.ellipse(this.x, this.y, this.size); } diff --git a/src/sketchObjects/Package.ts b/src/sketchObjects/Package.ts index ea61188..88e5d8e 100644 --- a/src/sketchObjects/Package.ts +++ b/src/sketchObjects/Package.ts @@ -1,7 +1,7 @@ import { mp5 } from '../../main'; import { colors } from '../constants/colors'; -export class Contributor { +export class Package { x: number; y: number; size: number; @@ -14,9 +14,7 @@ export class Contributor { this.size = size; } - public place() {} - - private draw() { + public place() { mp5.fill(mp5.color(colors.redDark)); mp5.ellipse(this.x, this.y, this.size); } From 7e634917bf5a22179790e86cb6c589bb2d970d37 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Sun, 25 Jul 2021 15:22:34 +0200 Subject: [PATCH 07/25] Implement reveal bubbles on click --- metadata/project.json | 30 +++------------------------ src/scenes/DetailScene.ts | 6 +++--- src/sketchObjects/Player.ts | 41 +++++++++++++++++++++++++++++++++++++ 3 files changed, 47 insertions(+), 30 deletions(-) diff --git a/metadata/project.json b/metadata/project.json index 8297af4..b930f03 100644 --- a/metadata/project.json +++ b/metadata/project.json @@ -5,34 +5,10 @@ "path": "packages/block", "size": 2450, "contents": { - "legacy": ["Test"], - "contributors": ["Test"], - "packages": ["Test"] + "contributors": [], + "legacy": [], + "packages": [] } - }, - { - "name": "client", - "path": "packages/client", - "size": 5600, - "contents": {} - }, - { - "name": "blockchain", - "path": "packages/blockchain", - "size": 4000, - "contents": {} - }, - { - "name": "ethash", - "path": "packages/ethash", - "size": 3600, - "contents": {} - }, - { - "name": "common", - "path": "packages/common", - "size": 1000, - "contents": {} } ] } diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index 521efb0..00b0c52 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -27,6 +27,7 @@ export class DetailScene { draw() { mp5.background(mp5.color(colors.greyLighter)); + this.player.drawOnReveal(); this.player.follow(); this.player.move(); @@ -42,8 +43,7 @@ export class DetailScene { } onSceneClick() { - console.log('Click on detail scene'); - console.log('Changing back to overview'); - store.setState({ currentScene: Scenes.OVERVIEW }); + // store.setState({ currentScene: Scenes.OVERVIEW }); + this.player.reveal(); } } diff --git a/src/sketchObjects/Player.ts b/src/sketchObjects/Player.ts index e31fb78..b63ea7e 100644 --- a/src/sketchObjects/Player.ts +++ b/src/sketchObjects/Player.ts @@ -7,6 +7,11 @@ export class Player { r: number; easing: number; history: Array<{ x: number; y: number }> = []; + lastTrailEl: { x: number; y: number }; + cursorOnRevealClick: { x: number; y: number }; + showRevealEl: boolean; + revealElCoordinates: { x: number; y: number }; + lastRevealClickTime: number; constructor() { this.x = mp5.height / 2; @@ -34,6 +39,37 @@ export class Player { this.drawCursorIndicator(mp5.mouseX, mp5.mouseY, 4); } + public reveal() { + const { x, y } = this.lastTrailEl; + + if (x && y) { + console.log('Drawing'); + this.showRevealEl = true; + this.revealElCoordinates = { x, y }; + this.cursorOnRevealClick = { x: mp5.mouseX, y: mp5.mouseY }; + this.lastRevealClickTime = mp5.millis(); + } + } + + public drawOnReveal() { + const timeElapsedSinceRevealClick = mp5.millis() - this.lastRevealClickTime; + + if (this.showRevealEl) { + mp5.fill(mp5.color(colors.greyLighter)); + mp5.strokeWeight(5); + mp5.stroke(mp5.color(255)); + mp5.ellipse( + this.cursorOnRevealClick.x, + this.cursorOnRevealClick.y, + timeElapsedSinceRevealClick * 0.4 + ); + + if (timeElapsedSinceRevealClick > 2000) { + this.showRevealEl = false; + } + } + } + private drawPlayerShape(x: number, y: number) { mp5.fill(mp5.color(colors.grey)); mp5.noStroke(); @@ -48,6 +84,11 @@ export class Player { private drawPlayerTrail() { const immediateHistory = this.history.slice(1).slice(-30); + const lastTrailElPosition = immediateHistory[0]; + + if (lastTrailElPosition) { + this.lastTrailEl = lastTrailElPosition; + } immediateHistory.forEach((pointInHistory, i) => { if (i % 5 === 0) { From 4639c220254b782de78bdf53c41fd71b01cb4a97 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Mon, 26 Jul 2021 17:53:03 +0200 Subject: [PATCH 08/25] Basic reveal mechanic --- metadata/project.json | 6 +++++- package-lock.json | 27 +++++++++++++++++++++++++++ package.json | 1 + src/area.ts | 7 +++++++ src/helpers.ts | 7 +++++++ src/scenes/DetailScene.ts | 1 + src/sketchObjects/Package.ts | 15 ++++++++++++++- src/sketchObjects/Player.ts | 15 +++++++++------ 8 files changed, 71 insertions(+), 8 deletions(-) create mode 100644 src/area.ts diff --git a/metadata/project.json b/metadata/project.json index b930f03..e13f5f3 100644 --- a/metadata/project.json +++ b/metadata/project.json @@ -7,7 +7,11 @@ "contents": { "contributors": [], "legacy": [], - "packages": [] + "packages": [ + { + "name": "react" + } + ] } } ] diff --git a/package-lock.json b/package-lock.json index 5aa1dc6..5a3844d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "animejs": "^3.2.1", "p5": "^1.4.0", + "rxjs": "^7.2.0", "zustand": "^3.5.7" }, "devDependencies": { @@ -7545,6 +7546,14 @@ "inherits": "^2.0.1" } }, + "node_modules/rxjs": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.2.0.tgz", + "integrity": "sha512-aX8w9OpKrQmiPKfT1bqETtUr9JygIz6GZ+gql8v7CijClsP0laoFUdKzxFAoWuRdSlOdU2+crss+cMf+cqMTnw==", + "dependencies": { + "tslib": "~2.1.0" + } + }, "node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -8653,6 +8662,11 @@ "node": ">=6" } }, + "node_modules/tslib": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" + }, "node_modules/tty-browserify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", @@ -15130,6 +15144,14 @@ "inherits": "^2.0.1" } }, + "rxjs": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.2.0.tgz", + "integrity": "sha512-aX8w9OpKrQmiPKfT1bqETtUr9JygIz6GZ+gql8v7CijClsP0laoFUdKzxFAoWuRdSlOdU2+crss+cMf+cqMTnw==", + "requires": { + "tslib": "~2.1.0" + } + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -16032,6 +16054,11 @@ } } }, + "tslib": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz", + "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==" + }, "tty-browserify": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz", diff --git a/package.json b/package.json index b49613a..d9a9c4c 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "dependencies": { "animejs": "^3.2.1", "p5": "^1.4.0", + "rxjs": "^7.2.0", "zustand": "^3.5.7" } } diff --git a/src/area.ts b/src/area.ts new file mode 100644 index 0000000..625c19c --- /dev/null +++ b/src/area.ts @@ -0,0 +1,7 @@ +import { BehaviorSubject } from 'rxjs'; + +export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: number }>({ + x: 0, + y: 0, + w: 0, +}); diff --git a/src/helpers.ts b/src/helpers.ts index 63986c1..0079bbf 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -30,6 +30,13 @@ export function isColliding( ); } +export function shapeCollision( + firstShape: { x: number; y: number; w: number }, + secondShape: { x: number; y: number; w: number } +) { + return mp5.dist(firstShape.x, firstShape.y, secondShape.x, secondShape.y) < secondShape.w - 150; +} + export function generateEdgeCoords(existingEdges: Edge[]): Coordinates { let newCoords: Coordinates; const existingCoordinates = existingEdges.map(({ x, y }) => ({ x, y })); diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index 00b0c52..a88818d 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -39,6 +39,7 @@ export class DetailScene { }); this.packages.forEach((packageObj) => { packageObj.place(); + packageObj.drawOnReveal(); }); } diff --git a/src/sketchObjects/Package.ts b/src/sketchObjects/Package.ts index 88e5d8e..cbdfebc 100644 --- a/src/sketchObjects/Package.ts +++ b/src/sketchObjects/Package.ts @@ -1,5 +1,8 @@ +import { asyncScheduler, distinct, distinctUntilKeyChanged, throttleTime } from 'rxjs'; import { mp5 } from '../../main'; +import { revealedArea$ } from '../area'; import { colors } from '../constants/colors'; +import { shapeCollision } from '../helpers'; export class Package { x: number; @@ -12,10 +15,20 @@ export class Package { this.x = x; this.y = y; this.size = size; + + revealedArea$.subscribe((revealedArea) => { + this.revealed = shapeCollision({ x: this.x, y: this.y, w: 10 }, revealedArea); + }); } public place() { mp5.fill(mp5.color(colors.redDark)); - mp5.ellipse(this.x, this.y, this.size); + mp5.ellipse(this.x, this.y, 10); + } + + public drawOnReveal() { + if (this.revealed) { + mp5.ellipse(this.x, this.y, this.size); + } } } diff --git a/src/sketchObjects/Player.ts b/src/sketchObjects/Player.ts index b63ea7e..474fdbe 100644 --- a/src/sketchObjects/Player.ts +++ b/src/sketchObjects/Player.ts @@ -1,4 +1,5 @@ import { mp5 } from '../../main'; +import { revealedArea$ } from '../area'; import { colors } from '../constants/colors'; export class Player { @@ -43,7 +44,6 @@ export class Player { const { x, y } = this.lastTrailEl; if (x && y) { - console.log('Drawing'); this.showRevealEl = true; this.revealElCoordinates = { x, y }; this.cursorOnRevealClick = { x: mp5.mouseX, y: mp5.mouseY }; @@ -55,17 +55,20 @@ export class Player { const timeElapsedSinceRevealClick = mp5.millis() - this.lastRevealClickTime; if (this.showRevealEl) { + const x = this.cursorOnRevealClick.x; + const y = this.cursorOnRevealClick.y; + const w = Math.floor(timeElapsedSinceRevealClick * 0.4); + mp5.fill(mp5.color(colors.greyLighter)); mp5.strokeWeight(5); mp5.stroke(mp5.color(255)); - mp5.ellipse( - this.cursorOnRevealClick.x, - this.cursorOnRevealClick.y, - timeElapsedSinceRevealClick * 0.4 - ); + mp5.ellipse(x, y, w); + + revealedArea$.next({ x, y, w }); if (timeElapsedSinceRevealClick > 2000) { this.showRevealEl = false; + revealedArea$.next({ x: 0, y: 0, w: 0 }); } } } From 76875e8ee14bc3587092fe95ad5a046c0c32d947 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Mon, 26 Jul 2021 18:03:33 +0200 Subject: [PATCH 09/25] Fix reveal mechanic --- src/area.ts | 11 +++++++++++ src/helpers.ts | 7 ------- src/sketchObjects/Package.ts | 13 +++++++------ src/sketchObjects/Player.ts | 2 +- 4 files changed, 19 insertions(+), 14 deletions(-) diff --git a/src/area.ts b/src/area.ts index 625c19c..cb46b00 100644 --- a/src/area.ts +++ b/src/area.ts @@ -1,7 +1,18 @@ import { BehaviorSubject } from 'rxjs'; +import { mp5 } from '../main'; export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: number }>({ x: 0, y: 0, w: 0, }); + +export function pointIsRevealed( + point: { x: number; y: number }, + revealedArea: { x: number; y: number; w: number } +): boolean { + const distanceBetweenPoints = mp5.dist(point.x, point.y, revealedArea.x, revealedArea.y); + console.log(distanceBetweenPoints, revealedArea.w); + + return distanceBetweenPoints < revealedArea.w / 2; +} diff --git a/src/helpers.ts b/src/helpers.ts index 0079bbf..63986c1 100644 --- a/src/helpers.ts +++ b/src/helpers.ts @@ -30,13 +30,6 @@ export function isColliding( ); } -export function shapeCollision( - firstShape: { x: number; y: number; w: number }, - secondShape: { x: number; y: number; w: number } -) { - return mp5.dist(firstShape.x, firstShape.y, secondShape.x, secondShape.y) < secondShape.w - 150; -} - export function generateEdgeCoords(existingEdges: Edge[]): Coordinates { let newCoords: Coordinates; const existingCoordinates = existingEdges.map(({ x, y }) => ({ x, y })); diff --git a/src/sketchObjects/Package.ts b/src/sketchObjects/Package.ts index cbdfebc..ae12e97 100644 --- a/src/sketchObjects/Package.ts +++ b/src/sketchObjects/Package.ts @@ -1,8 +1,7 @@ -import { asyncScheduler, distinct, distinctUntilKeyChanged, throttleTime } from 'rxjs'; +import { map } from 'rxjs'; import { mp5 } from '../../main'; -import { revealedArea$ } from '../area'; +import { pointIsRevealed, revealedArea$ } from '../area'; import { colors } from '../constants/colors'; -import { shapeCollision } from '../helpers'; export class Package { x: number; @@ -16,9 +15,11 @@ export class Package { this.y = y; this.size = size; - revealedArea$.subscribe((revealedArea) => { - this.revealed = shapeCollision({ x: this.x, y: this.y, w: 10 }, revealedArea); - }); + revealedArea$ + .pipe(map((revealedArea) => pointIsRevealed({ x: this.x, y: this.y }, revealedArea))) + .subscribe((isRevealed) => { + this.revealed = isRevealed; + }); } public place() { diff --git a/src/sketchObjects/Player.ts b/src/sketchObjects/Player.ts index 474fdbe..f0bbcd0 100644 --- a/src/sketchObjects/Player.ts +++ b/src/sketchObjects/Player.ts @@ -57,7 +57,7 @@ export class Player { if (this.showRevealEl) { const x = this.cursorOnRevealClick.x; const y = this.cursorOnRevealClick.y; - const w = Math.floor(timeElapsedSinceRevealClick * 0.4); + const w = timeElapsedSinceRevealClick * 0.4; mp5.fill(mp5.color(colors.greyLighter)); mp5.strokeWeight(5); From 3b7beecf8c258c4a840d73a26b6f27883dc3d134 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Mon, 26 Jul 2021 18:11:56 +0200 Subject: [PATCH 10/25] Remove log --- src/area.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/area.ts b/src/area.ts index cb46b00..89d073a 100644 --- a/src/area.ts +++ b/src/area.ts @@ -12,7 +12,6 @@ export function pointIsRevealed( revealedArea: { x: number; y: number; w: number } ): boolean { const distanceBetweenPoints = mp5.dist(point.x, point.y, revealedArea.x, revealedArea.y); - console.log(distanceBetweenPoints, revealedArea.w); return distanceBetweenPoints < revealedArea.w / 2; } From 2297bbb562347966095d4ba4b6c26484c2928158 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Mon, 26 Jul 2021 19:15:58 +0200 Subject: [PATCH 11/25] Implement package reveal and active handling --- src/area.ts | 4 ++- src/scenes/DetailScene.ts | 4 +-- src/sketchObjects/Package.ts | 67 ++++++++++++++++++++++++++++++------ src/sketchObjects/Player.ts | 4 ++- 4 files changed, 64 insertions(+), 15 deletions(-) diff --git a/src/area.ts b/src/area.ts index 89d073a..1ca1563 100644 --- a/src/area.ts +++ b/src/area.ts @@ -1,6 +1,8 @@ -import { BehaviorSubject } from 'rxjs'; +import { BehaviorSubject, Subject } from 'rxjs'; import { mp5 } from '../main'; +export const playerHeadPosition$ = new Subject<{ x: number; y: number }>(); + export const revealedArea$ = new BehaviorSubject<{ x: number; y: number; w: number }>({ x: 0, y: 0, diff --git a/src/scenes/DetailScene.ts b/src/scenes/DetailScene.ts index a88818d..538862c 100644 --- a/src/scenes/DetailScene.ts +++ b/src/scenes/DetailScene.ts @@ -21,7 +21,7 @@ export class DetailScene { (contributor) => new Contributor(100, 200, 100) ); this.legacy = state.currLegacy.map((legacy) => new Legacy(200, 300, 100)); - this.packages = state.currPackages.map((currPackage) => new Package(400, 300, 100)); + this.packages = state.currPackages.map((currPackage) => new Package(400, 300, 50)); }); } @@ -39,7 +39,7 @@ export class DetailScene { }); this.packages.forEach((packageObj) => { packageObj.place(); - packageObj.drawOnReveal(); + packageObj.draw(); }); } diff --git a/src/sketchObjects/Package.ts b/src/sketchObjects/Package.ts index ae12e97..b1568c2 100644 --- a/src/sketchObjects/Package.ts +++ b/src/sketchObjects/Package.ts @@ -1,6 +1,6 @@ -import { map } from 'rxjs'; +import { combineLatest, map } from 'rxjs'; import { mp5 } from '../../main'; -import { pointIsRevealed, revealedArea$ } from '../area'; +import { playerHeadPosition$, pointIsRevealed, revealedArea$ } from '../area'; import { colors } from '../constants/colors'; export class Package { @@ -9,27 +9,72 @@ export class Package { size: number; name: string; revealed: boolean; + active: boolean = false; + startSize: number = 5; + currentSize: number = 5; constructor(x: number, y: number, size: number, name?: string, profileURL?: string) { this.x = x; this.y = y; this.size = size; - revealedArea$ - .pipe(map((revealedArea) => pointIsRevealed({ x: this.x, y: this.y }, revealedArea))) - .subscribe((isRevealed) => { + combineLatest([revealedArea$, playerHeadPosition$]).subscribe( + ([revealedArea, playerHeadPosition]) => { + const isRevealed = pointIsRevealed({ x: this.x, y: this.y }, revealedArea); + const isTouched = isRevealed + ? pointIsRevealed( + { x: this.x, y: this.y }, + { + x: playerHeadPosition.x, + y: playerHeadPosition.y, + w: 30, + } + ) + : false; + this.revealed = isRevealed; - }); + + if (this.active === false && isTouched) { + this.active = true; + console.log(this.active); + } + } + ); } public place() { - mp5.fill(mp5.color(colors.redDark)); - mp5.ellipse(this.x, this.y, 10); + mp5.noStroke(); + mp5.rectMode('center'); + mp5.fill(mp5.color(colors.greyLight)); + mp5.rect(this.x, this.y, this.startSize, this.startSize); } - public drawOnReveal() { - if (this.revealed) { - mp5.ellipse(this.x, this.y, this.size); + public draw() { + if (this.revealed && !this.active) { + this.drawRevealedShape(); + } else if ((this.active && this.revealed) || (!this.revealed && this.active)) { + this.drawActiveShape(); + } else { + this.drawUnrevealedShape(); } } + + private drawUnrevealedShape() { + mp5.rect(this.x, this.y, this.startSize, this.startSize); + } + + private drawRevealedShape() { + if (this.currentSize < this.size) { + this.currentSize++; + } else { + this.currentSize = this.size; + } + + mp5.rect(this.x, this.y, this.currentSize, this.currentSize); + } + + private drawActiveShape() { + mp5.fill(mp5.color(colors.redLight)); + mp5.rect(this.x, this.y, this.currentSize, this.currentSize); + } } diff --git a/src/sketchObjects/Player.ts b/src/sketchObjects/Player.ts index f0bbcd0..1fbf983 100644 --- a/src/sketchObjects/Player.ts +++ b/src/sketchObjects/Player.ts @@ -1,5 +1,5 @@ import { mp5 } from '../../main'; -import { revealedArea$ } from '../area'; +import { playerHeadPosition$, revealedArea$ } from '../area'; import { colors } from '../constants/colors'; export class Player { @@ -34,6 +34,8 @@ export class Player { this.drawPlayerTrail(); this.drawPlayerShape(this.x, this.y); + + playerHeadPosition$.next({ x: this.x, y: this.y }); } public move() { From 001a074c5433ed6dcb4d116b5f7e59dccb30586f Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Mon, 26 Jul 2021 22:00:55 +0200 Subject: [PATCH 12/25] Add feedback and knowledge questions for companion --- src/constants/messages.ts | 56 +++++++++++++++++++++++++++++++++++++ src/scenes/OverviewScene.ts | 8 ------ src/ui/companion.ts | 8 +++--- 3 files changed, 60 insertions(+), 12 deletions(-) create mode 100644 src/constants/messages.ts diff --git a/src/constants/messages.ts b/src/constants/messages.ts new file mode 100644 index 0000000..5a59caa --- /dev/null +++ b/src/constants/messages.ts @@ -0,0 +1,56 @@ +import { CompanionMessage } from '../ui/companion'; + +export const introMessage = { + text: "Hello there 👋 Let's start exploring the ethereumjs open source project", + inputWanted: false, +}; + +export const feedbackQuestions: CompanionMessage[] = [ + { + text: 'Would you say, that you have learned something about the underlying project from going through this interactive probe? If yes, what have you learned? If no, what was missing from the probe in your opinion?', + inputWanted: true, + }, + { + text: 'What was your overall experience going through this probe? What did you like or did not like? Is there anything that stood out for you?', + inputWanted: true, + }, + { + text: 'How did you experience the companion (Lower right)? Was it helpful or rather annoying?', + inputWanted: true, + }, + { + text: 'Could you imageine yourself using the probe on different projects to learn about them? If so, on which projects would you want to try it out?', + inputWanted: true, + }, + { + text: 'Have you felt like any information was missing on the things that were shown within the probe?', + inputWanted: true, + }, + { + text: 'Would you have liked to see additional information on the underlying project? If so, what kind of information and how would you have liked its presentation?', + inputWanted: true, + }, + { + text: 'Do you have any additional ideas on how playful elements or game mechanics could be used within the onboarding phase of software development projects?', + inputWanted: true, + }, + { + text: 'Anything else you want to mention?', + inputWanted: true, + }, +]; + +export const knowledgeQuestions: CompanionMessage[] = [ + { + text: 'You would like to ask something on X within the block subproject, who could you ask about that?', + inputWanted: true, + }, + { + text: 'What packages that are used in this project can you think of?', + inputWanted: true, + }, + { + text: 'Legacy', + inputWanted: true, + }, +]; diff --git a/src/scenes/OverviewScene.ts b/src/scenes/OverviewScene.ts index d1d8029..8d02e43 100644 --- a/src/scenes/OverviewScene.ts +++ b/src/scenes/OverviewScene.ts @@ -14,14 +14,6 @@ export class OverviewScene { constructor() { this.edges = generateEdges(projectMetadata.subprojects); this.player = new Player(); - - setTimeout(() => { - store.getState().addUserMessage({ - text: "Hello there 👋 Let's start exploring the ethereumjs open source project", - inputWanted: false, - timestamp: Date.now(), - }); - }, 2000); } public draw() { diff --git a/src/ui/companion.ts b/src/ui/companion.ts index a58ca0b..0fa7635 100644 --- a/src/ui/companion.ts +++ b/src/ui/companion.ts @@ -11,7 +11,7 @@ export enum CompanionState { export interface CompanionMessage { text: string; inputWanted: boolean; - timestamp: number; + timestamp?: number; } export class Companion { @@ -75,7 +75,7 @@ export class Companion { } showMessage(message: CompanionMessage) { - this.messageTextRef.innerText = message.text; + this.messageTextRef.innerHTML = message.text; this.messageRef.style.display = 'flex'; if (message.inputWanted) { @@ -89,8 +89,8 @@ export class Companion { console.log(this.message); if (this.message.inputWanted) { - // Get text from textarea - // Send via API + // TODO: Get text from textarea + // TODO: Send via API } // Hide Message From acdecc6e8541e7d4bc6971f87790981eded4a868 Mon Sep 17 00:00:00 2001 From: Dennis Schoepf Date: Fri, 30 Jul 2021 13:48:05 +0200 Subject: [PATCH 13/25] Implement info message --- index.html | 13 + main.ts | 5 +- package-lock.json | 9252 +-------------------------------------------- src/store.ts | 8 + src/ui/info.ts | 62 + styles.scss | 44 + 6 files changed, 150 insertions(+), 9234 deletions(-) create mode 100644 src/ui/info.ts diff --git a/index.html b/index.html index 899a4e5..3788b5f 100644 --- a/index.html +++ b/index.html @@ -22,7 +22,20 @@