Create a web component to show connected users #423
Comments
|
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 |
|
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.
|
|
I would love to see if who is there as well. |
|
@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> |
|
i'll definetly check this out, give me some time |
|
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. 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. <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? |
|
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. |
|
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. |
|
I removed naf-chat-panel component, it's now included automatically with naf-chat-button. |
|
Follow the issue c-frame/aframe-gltf-model-plus#34 for the other web components remaining to do. |
Create a web component that you can just use in your networked-aframe project, just using
<naf-users></naf-users>, for exampleThe web component would be using the
player-infocomponent on your avatar template like it's done in the Nametags + Color Picker example with the addition of aclientIdproperty that you need to set toNAF.clientIdwhen you enter the room and adding some lines of code in itsupdate()method.This is what I'm using on https://allocola.com/r/MTU4MjU2/kitchen
which is a big project with UI written with solidjs and tailwindcss.
The idea is to open source some of the element on this interface as web components you can easily add to your existing projects.
If there is an interest on sponsoring me for this, I may also create web components for mic selection and chat.
The text was updated successfully, but these errors were encountered: