LFS Forum - Node.js - React Node InSim - React renderer for InSim buttons

#1 - Flame CZE

Node.js - React Node InSim - React renderer for InSim buttons

Wed 3 Jan 2024, 18:05

🚧 This project is still under development. Any API may change as needed. Bugs and incomplete features are to be expected.

React Node InSim

Introducing React Node InSim, A React renderer for InSim buttons, based on Node.js with TypeScript support. It also provides layout components for easier button positioning, hooks for handling incoming InSim packets and tracking server connections & players.

Installation

npm install react@18 node-insim react-node-insim

or if you use Yarn:

yarn add react@18 node-insim react-node-insim

Basic Usage

To connect to an LFS server from your Node.js application, enter its hostname, a port and a short name for your application into the createRoot function, which will create a React root for you. Then you call root.render() just like you would with React DOM.

Quote from Basic usage: github.com/simbroadcasts/react-node-insim :

import { InSim } from 'node-insim';
import { InSimFlags } from 'node-insim/packets';
import { Button, createRoot } from 'react-node-insim';

const inSim = new InSim();

inSim.connect({
  IName: 'React InSim',
  ReqI: 1,
  Host: '127.0.0.1',
  Port: 29999,
  Flags: InSimFlags.ISF_LOCAL,
});

const root = createRoot(inSim);

root.render(
  <Button top={100} left={80} width={30} height={10}>
    Hello InSim!
  </Button>,
);

Minimal working example app

A Node.js app written in TypeScript, which displays a single button on local LFS.

https://github.com/mkapal/react-node-insim-example

Components showcase

Button

Stack

Flex

Grid

Toggle button

Toggle button group

Text box

Hooks

To learn more, including how to use the InSim button components or InSim hooks, check out the React Node InSim repository on GitHub.

GitHub | NPM | React Node InSim - An open-source project by Sim Broadcasts

#2 - gu3st

Wed 3 Jan 2024, 18:18

Really cool Smile

#3 - LordJaguar

Wed 3 Jan 2024, 18:38

I have no idea how it work but amazing work

#4 - Androphp

Fri 5 Jan 2024, 11:19

As someone who doesn't know anything about this subject, can you please tell me how I can run the push-button system? I only have node.js installed. I couldn't manage it

#5 - Flame CZE

Fri 5 Jan 2024, 12:43

I've created a minimal working example app in TypeScript for you:https://github.com/mkapal/react-node-insim-example

I'll update the README later with more detailed instructions.

#6 - Grace Child Racing

Sat 11 Jan 2025, 13:26

IS there a way to show image inside buttons or display an image?

#7 - Flame CZE

Sat 11 Jan 2025, 15:13

Not possible using InSim.

#8 - Grace Child Racing

Tue 14 Jan 2025, 22:07

How do you reset / clear the usePlayers() list?

#9 - Flame CZE

Wed 15 Jan 2025, 07:20

The usePlayers list should always be in sync the actual list of players in LFS. If it is not, then I'd like to know when that happens because it's a bug.

#10 - Grace Child Racing

Wed 15 Jan 2025, 09:18

so From replay to hotlap the list is not deleted or cleared...

Attached images

#11 - Flame CZE

Wed 15 Jan 2025, 09:57

Thank you, I will have a look at the issue.

#12 - EliteAti

Wed 15 Jan 2025, 13:04

Hey, awesome work. Finally a library I can work with Big grin

#13 - Flame CZE

Button scopes

Sat 15 Feb 2025, 13:48

While developing an InSim app for myself, I needed to show personalised buttons to each connection and human player on track. To abstract away having to assign the button UCIDs manually, I've introduced scopes in the React Node InSim library.

Here's a demo video with two LFS users:
- the "React NodeInSim" button is the same for all connections (UCID 255)
- the username buttons are different for each connection
- the player name buttons are different for each human player on track

Example code:

export function ScopesExample() {
  return (
    <GlobalScopeProvider>
      <Button top={0} left={80} height={5} width={40}>
        React Node InSim
      </Button>
    </GlobalScopeProvider>
    <ConnectionScopeProvider>
      <UserNameButton />
      <HumanPlayerScopeProvider>
        <HumanPlayerNameButton />
      </HumanPlayerScopeProvider>
    </ConnectionScopeProvider>
  );
}

Demo app source code

#14 - Grace Child Racing

Fri 21 Feb 2025, 18:14

Was wondering if when if there was collision detection eg. hitting wall or another car or objects

#15 - Flame CZE

Fri 21 Feb 2025, 19:40

You can use the following InSim packets:

A car hitting a wall: IS_HLV


inSim.connect({
  // ...other connection options
  Flags: InSimFlags.ISF_HLV // enable receiving IS_HLV packets
});

inSim.on(PacketType.ISP_HLV, packet => {
  console.log(packet.HLVC === HLVCViolation.WALL); // wall hit
})

Car to car contacts: IS_CON


inSim.connect({
  // ...other connection options
  Flags: InSimFlags.ISF_CON // enable receiving IS_CON packets
});

inSim.on(PacketType.ISP_CON, packet => {
  console.log(packet.A.Speed); // speed of car A
  console.log(packet.B.X); // X position of car B
})

Layout object collisions: IS_OBH


inSim.connect({
  // ...other connection options
  Flags: InSimFlags.ISF_OBH // enable receiving IS_OBH packets
});

inSim.on(PacketType.ISP_OBH, packet => {
  console.log(packet.Index); // object index
})

#16 - Grace Child Racing

Sat 22 Feb 2025, 05:34

Quote from Flame CZE :You can use the following InSim packets...

Bless you. thanks alot..got it.

#17 - Flame CZE

v0.1.0 and testing

Fri 6 Jun 2025, 08:58

Version v0.1.0 released with the following changes:

Breaking change: Pass InSim instance as an argument in createRoot

In order to have node-insim truly decoupled, I've decided to change the createRoot API so it accepts the InSim instance as an argument. This is what the connection looks like now:

const inSim = new InSim();

inSim.connect({
  IName: 'React InSim',
  ReqI: 1,
  Host: '127.0.0.1',
  Port: 29999,
  Flags: InSimFlags.ISF_LOCAL,
});

const root = createRoot(inSim);

root.render(
  <Button top={100} left={80} width={30} height={10}>
    Hello InSim!
  </Button>,
);

The only requirement for the InSim connection options is the ReqI being a non-zero value, otherwise react-node-insim will throw an error. The ReqI is needed to wait for a successful connection to LFS.

As a result of this change, createRoot no longer returns the InSim instance since it's no longer created inside.

Unit tests

To have some confidence that React Node InSim will send the correct IS_BTN packets given a React component tree, I've started writing unit tests. You can see some simple tests for <Button> in tests/button.test.ts. The tests intercept TCP connections and check if the correct packets are received at a given host/port.

There are still many more test cases to cover. I would like to continue writing them in the future.

Misc

Fix: Only trigger onType and onClick event if ClickID and UCID matches
Add a CI pipeline
Exclude host from connection scope
Allow null and ToggleButton elements inside Flex component
Allow ToggleButton in Stack