105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
import { Component, Output, EventEmitter, Input } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
|
|
//TODO: Second and fourth ring of keys
|
|
|
|
@Component({
|
|
selector: 'app-circle-keyboard',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
<div class="circle-keyboard-container">
|
|
<!-- Center Button - Large with 3 sections -->
|
|
<div class="center-button-container">
|
|
<!-- Top half split: Backspace left, Enter right -->
|
|
<button class="center-section top-left"
|
|
(click)="keyPressed.emit('Backspace')"
|
|
title="Backspace">
|
|
⌫
|
|
</button>
|
|
<button class="center-section top-right"
|
|
(click)="keyPressed.emit('Enter')"
|
|
title="Enter">
|
|
↵
|
|
</button>
|
|
<!-- Bottom half: Space -->
|
|
<button class="center-section bottom-right"
|
|
(click)="keyPressed.emit('Space')"
|
|
title="Space">
|
|
␣
|
|
</button>
|
|
<button (click)="shiftToggled.emit()"
|
|
[class.active]="shiftActive"
|
|
class="center-section bottom-left">
|
|
⇧
|
|
</button>
|
|
<button class="center-section middle-left"
|
|
(click)="keyPressed.emit('.')"
|
|
title="Period">
|
|
.
|
|
</button>
|
|
<button class="center-section middle-right"
|
|
(click)="keyPressed.emit(',')"
|
|
title="Comma">
|
|
,
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 8 Surrounding Buttons in Circle -->
|
|
<button *ngFor="let key of circleKeysFirst; let i = index"
|
|
class="circle-button"
|
|
[style.transform]="getCirclePositionFromTop(i, 110)"
|
|
(click)="keyPressed.emit(key)">
|
|
{{ shiftActive ? key : key.toLowerCase() }}
|
|
</button>
|
|
|
|
<button *ngFor="let key of circleKeysSecond; let i = index"
|
|
class="circle-button second-ring"
|
|
[style.transform]="getCirclePositionFromTop(i, 150, 22.5)"
|
|
(click)="keyPressed.emit(key)">
|
|
{{ shiftActive ? key : key.toLowerCase() }}
|
|
</button>
|
|
|
|
<button *ngFor="let key of circleKeysThird; let i = index"
|
|
class="circle-button third-ring"
|
|
[style.transform]="getCirclePositionFromTop(i, 170)"
|
|
(click)="keyPressed.emit(key)">
|
|
{{ shiftActive ? key : key.toLowerCase() }}
|
|
</button>
|
|
|
|
<button class="circle-button fourth-ring"
|
|
[style.transform]="getCirclePositionFromTop(0, 182, -12)"
|
|
(click)="keyPressed.emit(circleKeysFourth[0])">
|
|
{{ shiftActive ? circleKeysFourth[0] : circleKeysFourth[0].toLowerCase() }}
|
|
</button>
|
|
|
|
<button class="circle-button fourth-ring"
|
|
[style.transform]="getCirclePositionFromTop(0, 182, 14)"
|
|
(click)="keyPressed.emit(circleKeysFourth[1])">
|
|
{{ shiftActive ? circleKeysFourth[1] : circleKeysFourth[1].toLowerCase() }}
|
|
</button>
|
|
</div>
|
|
`,
|
|
styleUrl: './circle-keyboard.component.css'
|
|
})
|
|
export class CircleKeyboardComponent {
|
|
@Input() shiftActive = false;
|
|
@Output() keyPressed = new EventEmitter<string>();
|
|
@Output() shiftToggled = new EventEmitter<void>();
|
|
|
|
// 8 keys arranged in circle
|
|
circleKeysFirst = ['E', 'T', 'A', 'O', 'N', 'I', 'H', 'S'];
|
|
circleKeysSecond = ['R', 'L', 'D', 'U', 'C', 'M', 'W', 'Y'];
|
|
circleKeysThird = ['F', 'G', 'P', 'B', 'V', 'K', 'J', 'X'];
|
|
circleKeysFourth = ['Q', 'Z'];
|
|
|
|
// Calculate position for each button in circle
|
|
getCirclePositionFromTop(index: number, radius: number, offset: number = 0): string {
|
|
const angle = ((index * 45) - 90) + offset; // Start from top (0°), 45° apart
|
|
const angleRad = (angle * Math.PI) / 180;
|
|
const x = Math.cos(angleRad) * radius;
|
|
const y = Math.sin(angleRad) * radius;
|
|
return `translate(${x}px, ${y}px)`;
|
|
}
|
|
}
|