TeeAssembler 4.0 Angular 18

TeeAssembler 4.0 Angular 18 is a script used for coloring a TeeWorlds/DDNet skins image the same way TeeWorlds/DDNet does and rendering the image in your browser using only CSS and TypeScript (and animate the eyes), you can implement it in your Angular 18 project using npm i @k-i-o/ngx-teeassembler.

---

Credits

Converted to TypeScript and implemented in an Angular 18 library by Samuele Radici (kio)

Thanks to b0th#6474 for helping Aleksandar with the original project.

And thank you .alexander for helping me and allowing me to do this project

Project Infos

Base project: tw-utils.

Original project: TeeAssembler-2.0.

---

Release

The npm package is released on npmjs.com ngx-teeassembler.

---

Usage

$3

npm i @k-i-o/ngx-teeassembler

$3

JS



import { Component } from '@angular/core';



...



import { TeeAssemblerComponent } from "@kiocode/ngx-teeassembler";



@Component({

  selector: 'app-example',

  standalone: true,

  imports: [TeeAssemblerComponent],

  templateUrl: './example.component.html',

  styleUrl: './example.component.less'

})

export class ExampleComponent { }







$3



#### NOTE: YOU WILL HAVE TO CHOOSE A SIZE FOR THE TEE OR THE EYES CAN BE BUGGY



$3

html

$3

html

$3

html



Note: The value of data-lookmouse must be "true" to set it to false you can simply remove the data attribute





$3

html



Note: The value of data-look is the angle and must be an int





$3

html



Note: The variable must be declared in the ts component





---



Known issues



- Eyes are not perfectly aligned like in the game but it's close enough.





---



Preview



!image

!image

!demo



---

Developers



Building / Exporting

Build:

ng build ngx-teeassembler





Pack:

cd dist/ngx-teeassembler && npm pack`

Contact

You can contact me on Discord for anything related to the fork of the original project: everestkio

Contact of the original project owner: .alexander_

---

License