diff --git a/packages/demo/index.html b/packages/demo/index.html index 6233783..a3dc586 100644 --- 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 index 0276978..1d8e159 100644 --- 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/pipelines/hud.ts b/packages/demo/src/pipelines/hud.ts new file mode 100644 index 0000000..7b722fa --- /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 index 0000000..08166c1 --- /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/src/world.ts b/packages/demo/src/world.ts new file mode 100644 index 0000000..0d61e67 --- /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/abstract/variables.css b/packages/demo/styles/abstract/variables.css new file mode 100644 index 0000000..0dc46cd --- /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.css b/packages/demo/styles/base.css new file mode 100644 index 0000000..20acf7a --- /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/styles/base/base.css b/packages/demo/styles/base/base.css new file mode 100644 index 0000000..8787965 --- /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 index 0000000..e2bb52a --- /dev/null +++ b/packages/demo/styles/base/reset.css @@ -0,0 +1,6 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + position: relative; +}