tyutyu v0

Author: Bider01

src/app/app-routing.module.ts

@@ -4,10 +4,12 @@ import { Routes, RouterModule } from '@angular/router';
 import { HomeComponent } from './home';
 import { LoginComponent } from './login';
 import { AuthGuard } from './_helpers';
+import {TyutyuGeneratorComponent} from "@app/tyutyu/tyutyu-generator.component";
 
 const routes: Routes = [
     { path: '', component: HomeComponent, canActivate: [AuthGuard] },
     { path: 'login', component: LoginComponent },
+    { path: 'tyutyu', component: TyutyuGeneratorComponent },
 
     // otherwise, redirect to home
     { path: '**', redirectTo: '' }

src/app/app.module.ts

@@ -30,6 +30,7 @@ import {MatBadgeModule} from '@angular/material/badge';
 import {CheckinDialog} from '@app/home/ticket-dialog/checkin.dialog';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {AppConfigService} from "@app/app-config.service";
+import {TyutyuGeneratorComponent} from "@app/tyutyu/tyutyu-generator.component";
 
 export function loadAppConfig(configService: AppConfigService) {
   return () => configService.loadConfig();
@@ -69,7 +70,8 @@ export function loadAppConfig(configService: AppConfigService) {
     LoginComponent,
     VariationPipe,
     EditDialog,
-    CheckinDialog
+    CheckinDialog,
+    TyutyuGeneratorComponent
   ],
     providers: [
         {

src/app/tyutyu/Hermione-Regular.otf

@@ -0,0 +1,39 @@
+<div class="container">
+  <h2>Tyütyü Szöveg Generátor</h2>
+
+  <textarea [(ngModel)]="inputText" placeholder="Írj be egy szöveget..." (input)="formatText()"></textarea>
+
+  <!-- Hibaüzenet megjelenítése, ha van -->
+  <div *ngIf="errorMessage" class="error-message">
+    {{ errorMessage }}
+  </div>
+
+  <div class="preview-container">
+    <div class="preview">
+      <div *ngFor="let line of formattedText" class="line">
+        <div class="spacing" [style.width.px]="calculateSidePadding(calculateWidth(line)) * 10"></div>
+        <span *ngFor="let char of line; let i = index" class="char"
+              [ngStyle]="{'width.px': (letterWidths[char] || defaultWidth) * 10}">
+          {{ char }}
+          <span class="size">{{ letterWidths[char] || defaultWidth }} cm</span>
+        </span>
+        <div class="spacing" [style.width.px]="calculateSidePadding(calculateWidth(line)) * 10"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="measurements">
+    <h3>Méretek:</h3>
+    <ul>
+      <li *ngFor="let line of formattedText">
+        "{{ line }}" - {{ calculateWidth(line) }} cm széles
+        (Kétoldali térköz: {{ calculateSidePadding(calculateWidth(line)) }} cm)
+      </li>
+      <li>Sorok száma: {{ formattedText.length }}</li>
+      <li>Betűk magassága: {{ letterHeight }} cm</li>
+      <li>Sorok közötti távolság: {{ lineHeight }} cm</li>
+      <li>Betűköz: {{ letterSpacing }} cm</li>
+      <li>Szóköz: {{ wordSpacing }} cm</li>
+    </ul>
+  </div>
+</div>

src/app/tyutyu/tyutyu-generator.component.html

@@ -0,0 +1,65 @@
+@font-face {
+  font-family: 'Hermione';
+  src: url('Hermione-Regular.otf') format('truetype');
+}
+
+.container {
+  max-width: 500px;
+  margin: auto;
+  font-family: Arial, sans-serif;
+  text-align: center;
+
+  h2 {
+    font-size: 1.5rem;
+  }
+
+  textarea {
+    width: 100%;
+    height: 100px;
+    font-size: 1.2rem;
+    padding: 10px;
+    margin-bottom: 15px;
+    font-family: 'Hermione', sans-serif;
+    text-transform: uppercase;
+    white-space: pre-wrap;
+  }
+
+  .error-message {
+    background: red;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
+  .preview-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #fafafa;
+    border: 2px solid #000;
+    width: 500px;
+    height: 350px;
+    margin: auto;
+  }
+
+  .measurements {
+    margin-top: 15px;
+    background: #f8f9fa;
+    padding: 10px;
+    border-radius: 5px;
+
+    ul {
+      list-style: none;
+      padding: 0;
+    }
+
+    li {
+      background: #ddd;
+      padding: 5px;
+      margin-bottom: 5px;
+    }
+  }
+}
+

src/app/tyutyu/tyutyu-generator.component.scss

@@ -0,0 +1,85 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-tyutyu-generator',
+  templateUrl: './tyutyu-generator.component.html',
+  styleUrls: ['./tyutyu-generator.component.scss']
+})
+export class TyutyuGeneratorComponent {
+  inputText: string = '';
+  formattedText: string[] = [];
+  errorMessage: string | null = null; // Hibaüzenet tárolása
+
+  // Betűméretek (cm-ben), Excel alapján
+  letterWidths: { [key: string]: number } = {
+    'M': 6, 'W': 6, '.': 1, '…': 5, ';': 1, '"': 2, "'": 1, '(': 2, ')': 2, ':': 1
+  };
+  defaultWidth = 5; // Normál betűk szélessége
+  wordSpacing = 4;  // Szóköz távolsága
+  letterSpacing = 1; // Betűk közötti távolság
+  lineHeight = 2;   // Sorok közötti távolság
+  letterHeight = 10; // Betűk magassága
+  maxCharsPerLine = 8;
+  maxLines = 3;
+
+  constructor() {
+    this.formatText();
+  }
+
+  formatText(): void {
+    let lines = this.inputText.toUpperCase().split('\n').map(line => line.trim()).filter(line => line.length > 0);
+
+    if (lines.length === 0) {
+      this.formattedText = [];
+      this.errorMessage = null;
+      return;
+    }
+
+    let autoWrappedLines: string[] = [];
+    lines.forEach(line => {
+      autoWrappedLines.push(...this.wrapLine(line));
+    });
+
+    if (autoWrappedLines.length > this.maxLines) {
+      this.errorMessage = `HIBA: A szöveg túl hosszú! Maximum ${this.maxLines} sor engedélyezett.`;
+      this.formattedText = [];
+    } else {
+      this.errorMessage = null;
+      this.formattedText = autoWrappedLines;
+    }
+  }
+
+  wrapLine(text: string): string[] {
+    let words = text.split(' ');
+    let lines: string[] = [];
+    let currentLine = '';
+
+    words.forEach(word => {
+      let testLine = currentLine ? `${currentLine} ${word}` : word;
+      if (this.calculateWidth(testLine) <= this.maxCharsPerLine * this.defaultWidth) {
+        currentLine = testLine;
+      } else {
+        if (lines.length < this.maxLines - 1) {
+          lines.push(currentLine);
+          currentLine = word;
+        }
+      }
+    });
+
+    if (currentLine) lines.push(currentLine);
+    return lines;
+  }
+
+  calculateWidth(text: string): number {
+    return text.split('').reduce((sum, char, index, arr) => {
+      let charWidth = this.letterWidths[char] || this.defaultWidth;
+      let extraSpace = (char === ' ') ? this.wordSpacing : (index < arr.length - 1 ? this.letterSpacing : 0);
+      return sum + charWidth + extraSpace;
+    }, 0);
+  }
+
+  calculateSidePadding(width: number): number {
+    let totalWidth = 50; // Tyütyü teljes szélessége cm-ben
+    return (totalWidth - width) / 2; // Oldalsó térköz számítása
+  }
+}