Create a web component that you can just use in your networked-aframe project, just us

Create a web component to show connected users about networked-aframe HOT 10 OPEN

vincentfretin commented on May 24, 2024

Create a web component to show connected users

from networked-aframe.

Comments (10)

vincentfretin commented on May 24, 2024 1

I modified my solidjs/tailwind example to add MicButton, ChatButton, ChatPanel components that I extracted and simplified from my project for one of my sponsor.
live: https://naf-nametag-solidjs.glitch.me
code: https://github.com/networked-aframe/naf-nametag-solidjs

As a proof of concept, with the same code, I created web components from the solidjs components via solid-element without shadow dom so using my tailwind classes shared for all web components, and a separate ui-components bundle.
The code to add a mic button and chat in your own project with naf web components is looking currently like this
https://github.com/networked-aframe/naf-nametag-solidjs/blob/5aba4448dd71838cc1998727f785d6ab3a2711da/public/ui-components.html#L76-L100

    <script src="/dist/ui-components.js"></script>
    <style>
      /* You can override colors with css properties used by the ui components, see colors.css for the full list */
      :root {
        --panel-bg: #171717; /* bg-neutral-800 */
        --panel-text: #e2e8f0; /* text-slate-200 */
        --btn-primary-bg: #0f766e; /* bg-teal-700 */
        --btn-primary-bg-hover: #115e59; /* bg-teal-800 */
        --btn-primary-text: #e2e8f0; /* text-slate-200 */
        --btn-border-radius: 0.5rem;
      }
    </style>
    <!--
      You can change the bar position with one of the following classes
      naf-top-bar-left naf-top-bar-center naf-top-bar-right
      naf-bottom-bar-left naf-bottom-bar-center naf-bottom-bar-right
    -->
    <div class="naf-bottom-bar-center">
      <!-- This needs to be after the a-scene so the player element can be found. -->
      <naf-username-input entity="#player" enable-color-picker="true"></naf-username-input>
      <naf-mic-button></naf-mic-button>
      <!-- When you add the naf-chat-button, don't forget to add the naf-chat-panel outside the bar as well -->
      <naf-chat-button></naf-chat-button>
    </div>
    <naf-chat-panel></naf-chat-panel>

You can test it live here: https://naf-nametag-solidjs.glitch.me/ui-components.html

Is this an interesting approach? Would you use something like that in your naf projects?
Please give me some feedback if I should continue on this and create a separate library, mainly create a participants listing with mute indication, unread chat messages, user join/left notifications, translation.

from networked-aframe.

vincentfretin commented on May 24, 2024 1

If you want to try it in your project, you can use the following build

    <script src="https://cdn.jsdelivr.net/gh/networked-aframe/naf-nametag-solidjs@4a374ca/public/dist/ui-components.js"></script>

You still need to define your player-info component with username and color and the associated networked entities, see the example.

from networked-aframe.

vincentfretin commented on May 24, 2024

You can sponsor $100 to vincentfretin fully or partially to work on this feature. Find other work you can sponsor at https://github.com/c-frame/sponsorship

from networked-aframe.

vincentfretin commented on May 24, 2024

In case this wasn't clear, you won't need to know solidjs or tailwindcss to use those web components in your projects. That would only be a script tag to add like any other aframe component.

I'll start working on the users listing web component and later the chat web component if I reach 10 persons donating $10 monthly. Once I reach this goal, I'll know for sure there is an interest for this.
Here are some screenshots of the implemented chat (you can also see it live in the kitchen experience I shared above):

from networked-aframe.

Therealjosephchrzempiec commented on May 24, 2024

I would love to see if who is there as well.

from networked-aframe.

vincentfretin commented on May 24, 2024

@ahmed-frq Your chat could be a good candidate for a first naf web component to be easily reusable in the other examples. I found https://kinsta.com/blog/web-components/ to be simple as an introduction. If you're interested in continuing to contribute, you can look at it after #439 is merged and do a refactoring so it could look like that:

<head>
  <script src="/js/naf-chat.js"></script>
</head>
<body>
  <naf-chat id="chat" style="position: absolute; top: 0; left: 0" name="anonymous"></naf-chat>
  <input type="text" id="username" />
  <script>
document.addEventListener('DOMContentLoaded', () => {
  const chat = document.querySelector('#chat');
  const username = document.querySelector('#username');
  username.value = 'user-' + Math.round(Math.random() * 10000);
  username.addEventListener('input', () = > {
   chat.setAttribute('name', username.value)
  });
});
  </script>
</body>

from networked-aframe.

ahmedrana3d commented on May 24, 2024

i'll definetly check this out, give me some time

from networked-aframe.

vincentfretin commented on May 24, 2024

I see the usage of those web components mainly for persons that don't write javascript at all, or persons that don't want to introduce a build step to their existing experience.
Also those web components may still be used together with your current developed ui in basic html/css/js, solidjs or vue (maybe not with current stable version of react I heard it doesn't support integrating web components). I probably need a way to access or set the state used in the different components like username and color though methods on a specific web component. If you have any feedback of the design, that will be appreciated.

from networked-aframe.

Create a web component to show connected users about networked-aframe HOT 10 OPEN

Comments (10)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent