Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@onirix/escape-room-module

Package Overview
Dependencies
Maintainers
3
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@onirix/escape-room-module

Onirix helper for Escape Room experiences.

latest
npmnpm
Version
1.0.2
Version published
Maintainers
3
Created
Source

Onirix Escape Room Module

Version

This module allows you to implement Escape Rooms in a simple and intuitive way. Just add dasheets to the Studio elements and Onirix Escape Room Module will process them and display their data depending on the datasheet type.

If you want to know more about data sheets and data structures in Onirix Studio, take a look at our documentation about the Datastore module.

Install

npm install @onirix/escape-room-module

Include the dependency within the HTML head tag:

<head>
    <script src="https://cdn.jsdelivr.net/npm/@onirix/escape-room-module@1.0.2/+esm"/>
</head>

As ESM modules:

import OnirixEscapeRoomModule from "https://cdn.jsdelivr.net/npm/@onirix/escape-room-module@1.0.2/+esm";

Usage

To use this library, first, the embedsdk must be initialize and pass it to the constructor.

import OnirixEmbedSDK from "https://cdn.jsdelivr.net/npm/@onirix/embed-sdk@1.17.0/+esm";
import OnirixEscapeRoomModule from "https://cdn.jsdelivr.net/npm/@onirix/escape-room-module@1.0.2/+esm";

const embedSDK = new OnirixEmbedSDK();
await embedSDK.connect();

const oxEscapeRoom = new OnirixEscapeRoomModule(embedSDK);

Onirix Escape Room can be configured by adding a second parameter to the constructor:

const uiTexts = {
    ... 
};

const oxEscapeRoom = new OnirixEscapeRoomModule(embedSDK, uiTexts);

The module contains its own default texts, but these can be modified if the uiTexts object contains all the necessary texts.

Predefined data structures

Escape

The data-structure ox-escape is the one that indicates to the module that an Escape Room is going to be implemented, without it no game will be initialized independently of the rest of the added datasheets. It is associated at scene level.

Its structure is as follows:

  • Title: Name of the game (Input)
  • Seconds per penalty: Penalty seconds that will be added to the total time when the game is failed. (Input)
  • Rules: Information about the game rules. (Textarea)
  • Final congratulation: text that will appear at the end of the game as a congratulation. (Textarea)
  • History: text to put the user in context. (Textarea)
  • Image: image for the init and final page. (Image)

Alias

The data-structure ox-escape__alias is used to assign one or more names to an element, allowing through this/these name(s) to modify its visibility. It is associated at the element level.

Its structure is as follows:

  • Identifiers: the name or names to be assigned to the element separated by ';'. (Input)

Key

The data-structure ox-escape__key indicates that it is an item that can be picked up, going to the player's inventory, and that can be used to resolve an element that includes a data-sheet of type ox-escape__lock that has the same activation code.

It should be understood that the term key represents the concept of an element that activates, opens or resolves another element when employed, and does not imply that physically this element must be a key in the strict sense of the word. It is associated at the element level.

Its structure is as follows:

  • Activation code: code that is compared with that of the lock to determine whether this element should open the other. (Input)
  • Message at pickup: message displayed when the user picks up the element. (Textarea)
  • Clue: message that helps to pick up the item, as long as it is ready to be picked up. (Textarea)
  • Name: name of the item that will be displayed at the moment the item is picked up. (Input)
  • Activate alias: aliases assigned to scene elements that will be displayed when the activator is collected. Separated by ';'. (Textarea)
  • Deactivate alias: aliases assigned to scene elements that will be hidden when the activator is collected. Separated by ';'. (Textarea)

Lock

The data-structure ox-escape__lock indicates that it is interactive but requires the use of an element of type ox-escape__key to be used, giving rise to the activation and/or deactivation of other elements. It is associated at the element level.

When interacting with an element of this type, a list of all the keys collected will be displayed so that the user can select the one he/she considers correct.

Its structure is as follows:

  • Activation code: code that is compared with that of the key to determine the element is resolved. (Input)
  • Message on opening: message that is displayed when the lock is successfully resolved. (Textarea)
  • Clue: a message that helps the player to locate and/or solve the lock correctly. (Textarea)
  • Activate alias: aliases assigned to scene elements that will be displayed when the lock is solved. Separated by ';'. (Textarea)
  • Deactivate alias: aliases assigned to scene elements that will be hidden when the lock is solved. Separated by ';'. (Textarea)
  • Final riddle: indicates if solving the lock leads to the end of the game. (Checkbox)

Mechanism

The data-structure ox-escape__mechanism indicates that it is interactive, giving rise to the activation and/or deactivation of other elements when used. It is associated at the element level.

When interacting with an element of this type, a dialog with relevant information of the game will be displayed.

Its structure is as follows:

  • Message on opening: message displayed when interacting with the element. (Textarea)
  • Clue: a message that helps the player to locate an element in the scene when it is already available to be used. (Textarea)
  • Activate alias: aliases assigned to scene elements that will be shown when interacting with the mechanism. Separated by ';'. (Textarea)
  • Deactivate alias: aliases assigned to scene elements that will be hidden when interacting with the mechanism. Separated by ';'. (Textarea)
  • Final riddle: indicates if interacting with this element leads to the end of the game. (Checkbox)

Code

The data-structure ox-escape__code indicates that it is interactive but requires the use of an alphanumeric code entered by the player in a text field, resulting in the activation and/or deactivation of other elements. It is associated at the element level.

Its structure is as follows:

  • Description: message displayed to make a question give some hint. (Textarea)
  • Image: it is optional and can be used to give a hint. (Image)
  • Activation code: is the combination that must be entered and with which the user's text will be compared to determine if it is correct or not. (Input)
  • Message on opening: a message that will be displayed when the correct code is entered. (Textarea)
  • Clue: a message to help the player enter the code correctly. (Textarea)
  • Activate alias: aliases assigned to scene elements that will be displayed when the code is entered correctly. Separated by ';'. (Textarea)
  • Deactivate alias: aliases assigned to scene elements that will be hidden when the code is entered correctly. Separated by ';'. (Textarea)
  • Final riddle: indicates if interacting with this element leads to the end of the game. (Checkbox)

Decision

The data-structure ox-escape__decision indicates that it is interactive but requires the user to choose between four possible options, resulting in the activation and/or deactivation of other elements. It is associated at the element level.

Its structure is as follows:

  • Description: message indicating the question to be answered by the user. (Textarea)
  • Image: it is optional and can be used to give a hint. (Image)
  • Option A: first option. (Input)
  • Option B: second option. (Input)
  • Option C: third option. (Input)
  • Option D: fourth option. (Input )
  • Valid option: indicates which of all is the correct answer. (Dropdown)
  • Title on opening: title message to be displayed when the correct answer is selected. (input)
  • Message on opening: message to be displayed when the correct answer is selected. (Textarea)
  • Clue: a message to help the player locate and/or select the correct option. (Textarea)
  • Activate alias: aliases assigned to scene elements that will be displayed when the correct option is selected. Separated by ';'. (Textarea)
  • Deactivate alias: aliases assigned to scene elements that will be hidden when the correct option is selected. Separated by ';'. (Textarea)
  • Final riddle: indicates if interacting with this element leads to the end of the game. (Checkbox)

Customize

Customizing CSS

The body has a css class called ox-escape-room.

The different elements have these associated css classes:

  • ox-escape-room-init assigned to the initial screen.
  • ox-escape-room-header assigned to the clock at the top
  • ox-escape-room-bottom assigned to the buttons at the bottom.
  • ox-escape-room-question assigned to the dialog to enter the code.
  • ox-escape-room-activators assigned to the dialog that shows the list of activators.
  • ox-escape-room-final assigned to the final screen of the game.
  • ox-escape-room-dialog assigned to the general dialogs.
  • ox-escape-room-decision assigned to the dialog that shows a decision.
  • ox-escape-room-clues assigned to the dialog that shows the list of clues.
  • ox-escape-room-rules assigned to the dialog that displays the rules.

By employing these selectors, you will be able to customize the style of individual elements under them in the DOM.

To modify the look and feel of the Escape Room you can add all the CSS you need to your experience through Onirix Studio's online code editor.

Let's add some code to change the white background of the top clock and the font.

.ox-escape-room .ox-escape-room-header div {
    filter: contrast(150%) brightness(105%);
    background-color: #FABADA;
    color: #6228a7;
}

You can make infinite changes to the interface by adding the appropriate CSS selectors. Through your browser's development tools you can explore the names of the css classes used by the library and add your own custom selectors and rules.

OnirixEscapeRoomModule Class

Methods

This class includes three listener triggering client actions. When the escape room starts an event will be launched and you can hear it in your code in this way:

oxEscapeRoom.onInit = (element) => {
    /**
     * Your code here
     */
}

On the other hand, when the escape rooms ends an event will be launched with the diration of the game as a param:

oxEscapeRoom.onIsFinal = (time) => {
    /**
     * Your code here
     */
}

And finally when the user leaves de escape room one more event is launched:

oxEscapeRoom.onFinish = () => {
    /**
     * Your code here
     */
}

In addition, we can always know how long the user has been playing through the following method:

const time = oxEscapeRoom.getCurrentTime();

Constructor

The constructor accepts essential data for subscribe to embedsdk events:

constructor(embedSdk, uiTexts);
  • embedSdk: intance of the sdk used in the experience to listen events and perform action in elements.
  • uiTexts: Object containing the texts to be displayed during the game. This is an optional parameter since default texts are available. All texts must be included, not just some.

The texts are the following:

{
    init: {
        rules: 'Rules of the game',
        start: 'Start!',
        record: 'Current record:',
        title: "History and rules",
        ar: "AR ESCAPE ROOM"
    },
    rules: {
        rules: 'History and rules'
    },
    clues: {
        clues: "Clues"
    },
    question: {
        answer: "Answer"
    },
    activators: {
        header: "Inventory of activators",
        headerSelect: "Activator required",
        subheader: "Use some of your inventory.",
        empty: "You have not yet collected any activators",
        use: "Use this activator"
    },
    final: {
        header: "Congratulations! you have completed the game",
        time: "Your time",
        end: "Play again",
        completed: "AR ESCAPE ROOM COMPLETED",
        record: "Current record:",
        new_record: "New record!"
    },
    decision: {
        answer: "Answer"
    },
    unlock: {
        resolved: "Resolved!"
    },
    dialog: {
        button: "Continue playing",
        button_mechanism: "OK, I understand",
        button_activator: "+ Add to inventory",
        success: "Resolved!",
        fail: "Wow! it doesn't work",
        fail_desc_1: "You receive a ",
        fail_desc_2: " second penalty for failure."
    }
}

Author

👤 Onirix

Keywords

Augmented reality
WebAR
Industry
escape room
question
checklist

FAQs

Package last updated on 31 Mar 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Rust Support Now in Beta

Product

Rust Support Now in Beta

Socket's Rust support is moving to Beta: all users can scan Cargo projects and generate SBOMs, including Cargo.toml-only crates, with Rust-aware supply chain checks.

By Mikola Lysenko, Trevor Norris  -  Sep 11, 2025
Announcing Socket Fix 2.0

Product

Announcing Socket Fix 2.0

Socket Fix 2.0 brings targeted CVE remediation, smarter upgrade planning, and broader ecosystem support to help developers get to zero alerts.

By Martin Torp, John-David Dalton, Jeppe Fredsgaard Blaabjerg, Benjamin Barslev, Oskar Haarklou Veileborg  -  Sep 10, 2025