From be082ec04a890be41bbd7f4e1779b2ed1e08e43e Mon Sep 17 00:00:00 2001 From: Jo Date: Wed, 25 Mar 2026 00:50:38 +0000 Subject: [PATCH] ✨ Restructure demo package and implement logging/hud pipelines --- packages/demo/index.html | 22 ---------------------- packages/demo/src/index.ts | 13 ++++++------- packages/demo/src/world.ts | 3 +++ packages/demo/styles/base.css | 3 +++ packages/demo/src/pipelines/hud.ts | 8 ++++++++ packages/demo/src/pipelines/logging.ts | 16 ++++++++++++++++ packages/demo/styles/abstract/variables.css | 4 ++++ packages/demo/styles/base/base.css | 13 +++++++++++++ packages/demo/styles/base/reset.css | 6 ++++++ 9 file(s) changed, 59 insertion(s)(+), 29 deletion(s)(-) diff --git a/packages/demo/index.html b/packages/demo/index.html --- a/packages/demo/index.html +++ b/packages/demo/index.html @@ -11,26 +11,4 @@ - diff --git a/packages/demo/src/index.ts b/packages/demo/src/index.ts --- a/packages/demo/src/index.ts +++ b/packages/demo/src/index.ts @@ -1,9 +1,8 @@ -import { Cosmic, Pipeline } from "@cosmic/core"; +import { Cosmic } from "@cosmic/core"; +import { hudPipeline } from "./pipelines/hud"; +import { loggingPipeline } from "./pipelines/logging"; -const cosmicDeltaDisplay = document.createElement("p"); -document.body.appendChild(cosmicDeltaDisplay); +const engine = Cosmic.getInstance(); -const engine = Cosmic.instance; -engine.enqueue(new Pipeline("rendering", (dt, frame) => { - cosmicDeltaDisplay.innerText = `Delta time: ${dt.toString()}\nCurrent frame: ${frame}`; -})); +engine.enqueue(hudPipeline); +engine.enqueue(loggingPipeline); diff --git a/packages/demo/src/world.ts b/packages/demo/src/world.ts new file mode 100644 --- /dev/null +++ b/packages/demo/src/world.ts @@ -0,0 +1,3 @@ +import { World } from "@cosmic/core"; + +export const world = new World(); diff --git a/packages/demo/styles/base.css b/packages/demo/styles/base.css new file mode 100644 --- /dev/null +++ b/packages/demo/styles/base.css @@ -0,0 +1,3 @@ +@import "abstract/variables.css"; +@import "base/reset.css"; +@import "base/base.css"; diff --git a/packages/demo/src/pipelines/hud.ts b/packages/demo/src/pipelines/hud.ts new file mode 100644 --- /dev/null +++ b/packages/demo/src/pipelines/hud.ts @@ -0,0 +1,8 @@ +import { Pipeline } from "@cosmic/core"; + +const cosmicDeltaDisplay = document.createElement("p"); +document.body.appendChild(cosmicDeltaDisplay); + +export const hudPipeline = new Pipeline("rendering", (dt, frame) => { + cosmicDeltaDisplay.innerText = `Delta time: ${dt.toString()}\nCurrent frame: ${frame}`; +}); diff --git a/packages/demo/src/pipelines/logging.ts b/packages/demo/src/pipelines/logging.ts new file mode 100644 --- /dev/null +++ b/packages/demo/src/pipelines/logging.ts @@ -0,0 +1,16 @@ +import { Pipeline } from "@cosmic/core"; +import { world } from "../world"; + +// Store the number of passed ticks since the last log, so we don't spam the console :> +let ticksSinceLastLog = 0; + +export const loggingPipeline = new Pipeline("logging", (_dt, _frame) => { + ticksSinceLastLog++; + + // Actually log information if the tick counter is above 500, then reset it. + if (ticksSinceLastLog > 500) { + console.log(world.query()); + + ticksSinceLastLog = 0; + } +}); diff --git a/packages/demo/styles/abstract/variables.css b/packages/demo/styles/abstract/variables.css new file mode 100644 --- /dev/null +++ b/packages/demo/styles/abstract/variables.css @@ -0,0 +1,4 @@ +:root { + --color-background: #141418; + --color-text: white; +} diff --git a/packages/demo/styles/base/base.css b/packages/demo/styles/base/base.css new file mode 100644 --- /dev/null +++ b/packages/demo/styles/base/base.css @@ -0,0 +1,13 @@ +body { + height: 100vh; + width: 100vw; + + color: white; + background-color: #141418; +} + +.layer { + position: absolute; + top: 0; + left: 0; +} diff --git a/packages/demo/styles/base/reset.css b/packages/demo/styles/base/reset.css new file mode 100644 --- /dev/null +++ b/packages/demo/styles/base/reset.css @@ -0,0 +1,6 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + position: relative; +} -- tangled.sh