From 500a56e429f986000532fbd660fba42913ad43d5 Mon Sep 17 00:00:00 2001
From: wagonsoftware <vlad.s@wagon.llc>
Date: Wed, 2 Nov 2022 23:31:50 +0300
Subject: [PATCH] avatar base

---
 .../ui/src/lib/avatar/avatar.component.html   |  1 +
 .../ui/src/lib/avatar/avatar.component.scss   | 24 ++++++++++++++
 .../src/lib/avatar/avatar.component.spec.ts   | 23 +++++++++++++
 .../ui/src/lib/avatar/avatar.component.ts     | 33 +++++++++++++++++++
 .../ui/src/lib/avatar/avatar.interface.ts     |  1 +
 projects/ui/src/lib/avatar/avatar.module.ts   | 18 ++++++++++
 .../ui/src/lib/popup/popup.component.html     |  2 +-
 .../ui/src/lib/popup/popup.component.scss     |  9 +++--
 projects/ui/src/lib/popup/popup.component.ts  |  8 ++++-
 projects/ui/src/lib/ui.module.ts              |  5 ++-
 .../ui/src/lib/utils/string-hash-to-hsl.ts    | 21 ++++++++++++
 projects/ui/src/public-api.ts                 |  1 +
 .../main/main-menu/main-menu.component.scss   |  1 +
 .../main/main-root/main-root.component.scss   |  2 +-
 .../sections/game-page/game-page.component.ts |  2 +-
 .../components/sandbox/sandbox.component.html |  5 +++
 16 files changed, 149 insertions(+), 7 deletions(-)
 create mode 100644 projects/ui/src/lib/avatar/avatar.component.html
 create mode 100644 projects/ui/src/lib/avatar/avatar.component.scss
 create mode 100644 projects/ui/src/lib/avatar/avatar.component.spec.ts
 create mode 100644 projects/ui/src/lib/avatar/avatar.component.ts
 create mode 100644 projects/ui/src/lib/avatar/avatar.interface.ts
 create mode 100644 projects/ui/src/lib/avatar/avatar.module.ts
 create mode 100644 projects/ui/src/lib/utils/string-hash-to-hsl.ts

diff --git a/projects/ui/src/lib/avatar/avatar.component.html b/projects/ui/src/lib/avatar/avatar.component.html
new file mode 100644
index 0000000..8e248f9
--- /dev/null
+++ b/projects/ui/src/lib/avatar/avatar.component.html
@@ -0,0 +1 @@
+{{shortUsername}}
diff --git a/projects/ui/src/lib/avatar/avatar.component.scss b/projects/ui/src/lib/avatar/avatar.component.scss
new file mode 100644
index 0000000..3f12b54
--- /dev/null
+++ b/projects/ui/src/lib/avatar/avatar.component.scss
@@ -0,0 +1,24 @@
+:host {
+  display: block;
+  aspect-ratio: 1/1;
+  text-transform: uppercase;
+  color: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--local-size, 50px);
+  font-size: var(--local-size);
+
+  &[data-size="default"] {
+    --local-size: 50px;
+  }
+  &[data-size="small"] {
+    --local-size: 50px;
+  }
+  &[data-size="medium"] {
+    --local-size: 50px;
+  }
+  &[data-size="large"] {
+    --local-size: 50px;
+  }
+}
diff --git a/projects/ui/src/lib/avatar/avatar.component.spec.ts b/projects/ui/src/lib/avatar/avatar.component.spec.ts
new file mode 100644
index 0000000..1e7da96
--- /dev/null
+++ b/projects/ui/src/lib/avatar/avatar.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AvatarComponent } from './avatar.component';
+
+describe('AvatarComponent', () => {
+  let component: AvatarComponent;
+  let fixture: ComponentFixture<AvatarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AvatarComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AvatarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ui/src/lib/avatar/avatar.component.ts b/projects/ui/src/lib/avatar/avatar.component.ts
new file mode 100644
index 0000000..d1da9d1
--- /dev/null
+++ b/projects/ui/src/lib/avatar/avatar.component.ts
@@ -0,0 +1,33 @@
+import { Component, HostBinding, Input, OnInit } from '@angular/core';
+import { stringHashToHsl } from '../utils/string-hash-to-hsl';
+import { AvatarSize } from './avatar.interface';
+
+@Component({
+  selector: 'skirda-avatar',
+  templateUrl: './avatar.component.html',
+  styleUrls: ['./avatar.component.scss'],
+})
+export class AvatarComponent implements OnInit {
+  @Input() username: string = 'username';
+  @Input() size: AvatarSize = 'default';
+
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  @HostBinding('style.background-color')
+  get color() {
+    return stringHashToHsl(this.username);
+  }
+
+  @HostBinding('data-size')
+  get avatarSize() {
+    return `${this.size}px`;
+  }
+
+  get shortUsername() {
+    let array = this.username.split(' ');
+    if (array.length >= 2) return array[0].charAt(0) + array[1].charAt(0);
+    else return this.username.charAt(0);
+  }
+}
diff --git a/projects/ui/src/lib/avatar/avatar.interface.ts b/projects/ui/src/lib/avatar/avatar.interface.ts
new file mode 100644
index 0000000..dbc2d79
--- /dev/null
+++ b/projects/ui/src/lib/avatar/avatar.interface.ts
@@ -0,0 +1 @@
+export type AvatarSize = 'default' | 'small' | 'medium' | 'large';
diff --git a/projects/ui/src/lib/avatar/avatar.module.ts b/projects/ui/src/lib/avatar/avatar.module.ts
new file mode 100644
index 0000000..fc6dc9c
--- /dev/null
+++ b/projects/ui/src/lib/avatar/avatar.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AvatarComponent } from './avatar.component';
+
+
+
+@NgModule({
+  declarations: [
+    AvatarComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    AvatarComponent
+  ]
+})
+export class AvatarModule { }
diff --git a/projects/ui/src/lib/popup/popup.component.html b/projects/ui/src/lib/popup/popup.component.html
index 38b82e6..bb95076 100644
--- a/projects/ui/src/lib/popup/popup.component.html
+++ b/projects/ui/src/lib/popup/popup.component.html
@@ -1,4 +1,4 @@
-<div class="popup-overlay" (click)="closeViaClick($event)" [attr.style]="'--local-overlay:' + config.overlay.background" [ngClass]="{'shown': loaded, 'hiding': hiding}" skirdaKeyboard (escape)="closeViaEscape($event)">
+<div class="popup-overlay" [style.left]="offsetLeft + 'px'" (click)="closeViaClick($event)" [attr.style]="'--local-overlay:' + config.overlay.background" [ngClass]="{'shown': loaded, 'hiding': hiding}" skirdaKeyboard (escape)="closeViaEscape($event)">
   <div class="popup-window-wrapper" [attr.data-appearance]="config.appearance" [attr.data-theme]="config.theme">
     <div class="popup-window">
       <div class="popup-head">
diff --git a/projects/ui/src/lib/popup/popup.component.scss b/projects/ui/src/lib/popup/popup.component.scss
index b983b7f..fbd28ae 100644
--- a/projects/ui/src/lib/popup/popup.component.scss
+++ b/projects/ui/src/lib/popup/popup.component.scss
@@ -1,5 +1,10 @@
 :host::ng-deep {
   position: absolute;
+  width: 100vw;
+  height: 100vh;
+  // background-color: red;
+  top: 0;
+  left: 0px;
 
   @keyframes show {
     from {
@@ -43,10 +48,10 @@
 
   .popup-overlay {
     display: block;
-    position: fixed;
+    position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
+    width: 100vw;
     height: 100vh;
     background-color: var(--local-overlay, var(--sk-overlay));
     display: flex;
diff --git a/projects/ui/src/lib/popup/popup.component.ts b/projects/ui/src/lib/popup/popup.component.ts
index 63bc1e8..bf1cabf 100644
--- a/projects/ui/src/lib/popup/popup.component.ts
+++ b/projects/ui/src/lib/popup/popup.component.ts
@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   Component,
+  ElementRef,
   EventEmitter,
   Input,
   OnInit,
@@ -21,16 +22,21 @@ export class PopupComponent implements OnInit, AfterViewInit {
   loaded: boolean = false;
   hiding: boolean = false;
   contentQueue?: TemplateRef<any>;
+  offsetLeft: number = 0;
 
   @Output() event: EventEmitter<string> = new EventEmitter();
 
   @ViewChild(PopupDirective) private popupContent!: PopupDirective;
 
-  constructor() {}
+  constructor(private element: ElementRef<HTMLElement>) {}
 
   ngOnInit(): void {}
 
   ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.offsetLeft =
+        -this.element.nativeElement.getBoundingClientRect().left;
+    }, 0);
     if (this.contentQueue) {
       this.load(this.contentQueue);
       this.contentQueue = undefined;
diff --git a/projects/ui/src/lib/ui.module.ts b/projects/ui/src/lib/ui.module.ts
index 17be2ad..78f90b4 100644
--- a/projects/ui/src/lib/ui.module.ts
+++ b/projects/ui/src/lib/ui.module.ts
@@ -10,8 +10,9 @@ import { ButtonModule } from './button/button.module';
 import { TagModule } from './tag/tag.module';
 import { PipesModule } from './pipes/pipes.module';
 import { GameModule } from './game/game.module';
-import { PopupModule } from '../public-api';
 import { DirectivesModule } from './directives/directives.module';
+import { PopupModule } from './popup/popup.module';
+import { AvatarModule } from './avatar/avatar.module';
 
 @NgModule({
   declarations: [],
@@ -29,6 +30,7 @@ import { DirectivesModule } from './directives/directives.module';
     GameModule,
     PopupModule,
     DirectivesModule,
+    AvatarModule,
   ],
   exports: [
     IconModule,
@@ -44,6 +46,7 @@ import { DirectivesModule } from './directives/directives.module';
     GameModule,
     PopupModule,
     DirectivesModule,
+    AvatarModule,
   ],
 })
 export class UiModule {}
diff --git a/projects/ui/src/lib/utils/string-hash-to-hsl.ts b/projects/ui/src/lib/utils/string-hash-to-hsl.ts
new file mode 100644
index 0000000..c138fcf
--- /dev/null
+++ b/projects/ui/src/lib/utils/string-hash-to-hsl.ts
@@ -0,0 +1,21 @@
+/**
+ * Converts a string to an HSL color
+ * @param value string to convert
+ * @return HSL color string
+ */
+export function stringHashToHsl(value: string): string {
+  if (value === ``) return ``;
+
+  let hash = 0;
+
+  for (let i = 0; i < value.length; i++) {
+    hash = value.charCodeAt(i) + ((hash << 5) - hash);
+    hash = hash & hash;
+  }
+
+  const hue = hash % 360;
+  const saturation = 60 + (hash % 5);
+  const lightness = 80 + (hash % 5);
+
+  return `hsl(${hue},${saturation}%,${lightness}%)`;
+}
diff --git a/projects/ui/src/public-api.ts b/projects/ui/src/public-api.ts
index 94165b8..661fc91 100644
--- a/projects/ui/src/public-api.ts
+++ b/projects/ui/src/public-api.ts
@@ -14,3 +14,4 @@ export * from './lib/tag/tag.module';
 export * from './lib/pipes/pipes.module';
 export * from './lib/game/game.module';
 export * from './lib/popup/popup.module';
+export * from './lib/avatar/avatar.module';
diff --git a/src/app/components/main/main-menu/main-menu.component.scss b/src/app/components/main/main-menu/main-menu.component.scss
index 0e0cf95..66c7227 100644
--- a/src/app/components/main/main-menu/main-menu.component.scss
+++ b/src/app/components/main/main-menu/main-menu.component.scss
@@ -36,6 +36,7 @@
         transition: 0.1s ease;
         border-radius: var(--sk-br-m);
         cursor: pointer;
+        flex-shrink: 0;
 
         &:hover {
           background-color: rgba(255, 255, 255, 0.05);
diff --git a/src/app/components/main/main-root/main-root.component.scss b/src/app/components/main/main-root/main-root.component.scss
index e614d6a..f469783 100644
--- a/src/app/components/main/main-root/main-root.component.scss
+++ b/src/app/components/main/main-root/main-root.component.scss
@@ -26,6 +26,6 @@
     background-color: rgba(0,0,0,0.15);
     display: flex;
     backdrop-filter: blur(2rem);
-    overflow-y: auto;
+    // overflow-y: auto;
   }
 }
diff --git a/src/app/components/main/sections/game-page/game-page.component.ts b/src/app/components/main/sections/game-page/game-page.component.ts
index ae6b8ed..ffbc954 100644
--- a/src/app/components/main/sections/game-page/game-page.component.ts
+++ b/src/app/components/main/sections/game-page/game-page.component.ts
@@ -56,7 +56,7 @@ export class GamePageComponent implements OnInit, OnDestroy {
             // background: 'rgba(255, 255, 255, 1)',
           },
           body: 'Humblebrag chillwave sriracha, ramps polaroid distillery edison bulb palo santo etsy sus pabst knausgaard typewriter dreamcatcher.',
-          theme: 'light',
+          theme: 'dark',
         })
         .subscribe((event) => {
           console.log(`event: ${event}`);
diff --git a/src/app/components/sandbox/sandbox.component.html b/src/app/components/sandbox/sandbox.component.html
index 64b33d7..925b92e 100644
--- a/src/app/components/sandbox/sandbox.component.html
+++ b/src/app/components/sandbox/sandbox.component.html
@@ -29,3 +29,8 @@
   <p>Church-key listicle whatever hoodie hexagon pour-over ascot paleo tacos, organic aesthetic tbh meggings raclette.</p>
 </ng-template>
 <skirda-button (click)="openPopup(popupContent)">Call popup</skirda-button>
+
+<hr>
+
+<h3>Avatar</h3>
+<skirda-avatar></skirda-avatar>