ScrollScript: A Self-Made Framework.

Title: ScrollScript: A Self-made Framework

This document introduces an original JavaScript-based system for managing dataflow and interactivity in complex applications, developed during the creation of a UNO game. The system uses nested functions, flag variables, conditional logic, and contextual metaphorical equations to dynamically route behaviour, manage state, and even generate DOM elements.

It's more of a framework than just basic data flow, hence that's why I named it ScrollScript. By Scroll, I mean scrolls where people used to write on in the past.

In this system, we treat actions and contexts as values—anything from numbers to HTML strings—and use them to determine which functions execute. A button press isn't just a trigger; it's a metaphorical equation where 1 can mean 2, and 2 can mean 10, depending on the context.

Example: A button click changes a global boolean and sets a contextual value. That value routes the data into a nested structure of if-statements, triggering a specific function.

One variable is initialized with a null value.

A second variable exists in a function and is toggled true or false based on button clicks (via addEventListener).

Each button also sets another global state variable to a specific value (number, string, or even HTML).

A wrapper function contains an if statement that checks if the boolean is true.

This setup creates an intentional conditional funnel—a way to route data/actions only if the correct boolean and value state match.

Dynamic Data Control: You’re not just passing numbers—you’re passing meaning. Any data type (boolean, number, string, HTML) becomes usable in the flow.

Modular Execution: Each button maps to a different route of execution.

Flexible Rendering: By allowing values to be HTML, you can create or switch entire DOM sections based on flags.

Custom State System: This is a general-purpose version of useState—except it works across multiple files and custom logics.

Imagine 10 files, each containing a massive dataflow function. You:

Define a main function in each file to manage its flow.

Pass those main functions as parameters to a central Connector Function.

The connector uses if conditions and value routing (e.g. parameters.value) to selectively execute parts of each file’s main function, enabling interlinked logic across files.

This creates a multi-layered orchestration system:

One function influences the others based on shared context.

The overall structure mimics reactivity, pipeline architecture, and even event queues.

Complex frontend interfaces

Game logic (e.g., turn-based state machines)

Interactive storytelling engines

Conditional DOM rendering

Custom low-level frameworks or data pipelines

This system demonstrates how deep contemplation and metaphorical thinking can lead to an original and flexible architecture for JavaScript applications. It’s not just code—it’s an interpreted logic engine, a manual reactivity layer, and a creative data router all in one.

It’s a new way of thinking: context = function, action = value, and value = control.