Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Peter
|
43430cfbef | ||
|
Peter
|
174ed834ca |
@@ -22,10 +22,8 @@
|
|||||||
"@angular/platform-browser": "^19.2.0",
|
"@angular/platform-browser": "^19.2.0",
|
||||||
"@angular/platform-browser-dynamic": "^19.2.0",
|
"@angular/platform-browser-dynamic": "^19.2.0",
|
||||||
"@angular/router": "^19.2.0",
|
"@angular/router": "^19.2.0",
|
||||||
"@types/three": "^0.177.0",
|
|
||||||
"ngx-cookie-service": "^19.1.2",
|
"ngx-cookie-service": "^19.1.2",
|
||||||
"rxjs": "~7.8.0",
|
"rxjs": "~7.8.0",
|
||||||
"three": "^0.177.0",
|
|
||||||
"tslib": "^2.3.0",
|
"tslib": "^2.3.0",
|
||||||
"zone.js": "~0.15.0"
|
"zone.js": "~0.15.0"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -5,10 +5,6 @@ export const routes: Routes = [
|
|||||||
path: '',
|
path: '',
|
||||||
loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
|
loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'particles',
|
|
||||||
loadComponent: () => import('./particles/particles.component').then(m => m.ParticlesComponent)
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: 'map',
|
path: 'map',
|
||||||
loadComponent: () => import('./map/map.component').then(m => m.MapComponent)
|
loadComponent: () => import('./map/map.component').then(m => m.MapComponent)
|
||||||
@@ -109,8 +105,6 @@ export const routes: Routes = [
|
|||||||
path: 'forms',
|
path: 'forms',
|
||||||
loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
|
loadComponent: () => import('./forms/forms.component').then(m => m.FormsComponent)
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: 'particles',
|
|
||||||
loadComponent: () => import('./particles/particles.component').then(m => m.ParticlesComponent)
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,79 @@
|
|||||||
|
<ng-container>
|
||||||
|
<app-header [current_page]="'community'" height="460px" background_image="/public/img/backgrounds/community.jpg"
|
||||||
|
[overlay_gradient]="0.5">
|
||||||
|
<div class="title" header-content>
|
||||||
|
<h1>Community</h1>
|
||||||
|
<h2>Talented people who help Altitude in more than one way.</h2>
|
||||||
|
</div>
|
||||||
|
</app-header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="darkmodeSection">
|
||||||
|
<div class="customContainer">
|
||||||
|
<h2>Current Nitro Boosters</h2>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="social" class="darkmodeSectionThree">
|
||||||
|
<div class="container" style="padding: 50px 0 0 0; justify-content: center;">
|
||||||
|
<h2 class="sectionTitle">Social Media</h2>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; justify-content: center; padding-bottom: 30px;">
|
||||||
|
<p style="text-align: center;">We're currently not looking for more people to help manage our socials.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="crateTeam" class="darkmodeSection">
|
||||||
|
<div class="container" style="padding: 50px 0 0 0; justify-content: center;">
|
||||||
|
<h2 class="sectionTitle">Crate Team</h2>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="darkmodeSectionThree">
|
||||||
|
<div class="container" style="padding: 50px 0 0 0; justify-content: center;">
|
||||||
|
<h2 class="sectionTitle">Event Leaders</h2>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; justify-content: center; padding-bottom: 30px;">
|
||||||
|
<p style="text-align: center;">We're currently not looking for more Event Leaders.</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="darkmodeSection">
|
||||||
|
<div class="container" style="padding: 50px 0 0 0; justify-content: center;">
|
||||||
|
<h2 class="sectionTitle">Event Team</h2>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; justify-content: center; padding-bottom: 30px;">
|
||||||
|
<div style="flex-direction: column;">
|
||||||
|
<p style="text-align: center;">We occasionally open applications for the event team.</p>
|
||||||
|
<p style="text-align: center;">If you're interested in joining you simply need to keep an eye on the Discord
|
||||||
|
announcements.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section class="darkmodeSectionThree">
|
||||||
|
<div class="container" style="padding: 50px 0 0 0; justify-content: center;">
|
||||||
|
<h2 class="sectionTitle">YouTubers & Streamers</h2>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex; justify-content: center; padding-bottom: 30px;">
|
||||||
|
<div style="flex-direction: column;">
|
||||||
|
<p style="text-align: center;"><a style="cursor: pointer;" id="reqButton">Show Requirements...</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="req" class="hide" style="display: flex; justify-content: center; padding-bottom: 30px;">
|
||||||
|
<div style="flex-direction: column; justify-content: center; max-width: 800px;">
|
||||||
|
<p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Requirements:</span>
|
||||||
|
</p>
|
||||||
|
<p style="text-align: center;">You need to have at least one recent stream/video on Altitude which we can use
|
||||||
|
to gauge if your audience enjoys your content on Altitude.</p>
|
||||||
|
<br>
|
||||||
|
<p style="text-align: center;">Twitch: You need to be affiliate and get at least 5 viewers on average while
|
||||||
|
streaming on Altitude.</p>
|
||||||
|
<p style="text-align: center;">YouTube videos: You need at least 500 subs and have at least 200 views per
|
||||||
|
video within a week on average for Altitude content.</p>
|
||||||
|
<p style="text-align: center;">YouTube streamers: You need at least 500 subs and have at least 5 viewers on
|
||||||
|
average while streaming on Altitude.</p>
|
||||||
|
<br>
|
||||||
|
<p style="text-align: center;"><span style="font-family: 'opensans-bold', sans-serif;">Note:</span> Before
|
||||||
|
accepting or denying you we will watch your latest video/stream on Altitude (so keep your broadcasts public
|
||||||
|
on twitch).</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</ng-container>
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
.customContainer {
|
||||||
|
width: 80%;
|
||||||
|
max-width: 1020px;
|
||||||
|
margin: auto;
|
||||||
|
padding: 80px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
+6
-6
@@ -1,18 +1,18 @@
|
|||||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
import { ParticlesComponent } from './particles.component';
|
import { CommunityComponent } from './community.component';
|
||||||
|
|
||||||
describe('ParticlesComponent', () => {
|
describe('CommunityComponent', () => {
|
||||||
let component: ParticlesComponent;
|
let component: CommunityComponent;
|
||||||
let fixture: ComponentFixture<ParticlesComponent>;
|
let fixture: ComponentFixture<CommunityComponent>;
|
||||||
|
|
||||||
beforeEach(async () => {
|
beforeEach(async () => {
|
||||||
await TestBed.configureTestingModule({
|
await TestBed.configureTestingModule({
|
||||||
imports: [ParticlesComponent]
|
imports: [CommunityComponent]
|
||||||
})
|
})
|
||||||
.compileComponents();
|
.compileComponents();
|
||||||
|
|
||||||
fixture = TestBed.createComponent(ParticlesComponent);
|
fixture = TestBed.createComponent(CommunityComponent);
|
||||||
component = fixture.componentInstance;
|
component = fixture.componentInstance;
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
});
|
});
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {HeaderComponent} from "../header/header.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-community',
|
||||||
|
imports: [
|
||||||
|
HeaderComponent
|
||||||
|
],
|
||||||
|
templateUrl: './community.component.html',
|
||||||
|
styleUrl: './community.component.scss'
|
||||||
|
})
|
||||||
|
export class CommunityComponent {
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,53 @@
|
|||||||
|
<ng-container>
|
||||||
|
<app-header [current_page]="'nickgenerator'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
|
||||||
|
[overlay_gradient]="0.5">
|
||||||
|
<div class="title" header-content>
|
||||||
|
<h1>Nickname Generator</h1>
|
||||||
|
<h2>Customize your in-game nickname</h2>
|
||||||
|
<h3 style="font-family: 'minecraft-text', sans-serif; font-size: 0.8rem; margin-top: 10px;">Made by TheParm</h3>
|
||||||
|
</div>
|
||||||
|
</app-header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- <section class="darkmodeSection">
|
||||||
|
<div class="container containerNick">
|
||||||
|
<div style="padding: 0 5% 0 5%;">
|
||||||
|
<div id="parts" class="previewNickDiv">
|
||||||
|
</div>
|
||||||
|
<div class="previewNickDiv">
|
||||||
|
<input type="button" class="button" value="Add Part" onclick="addPart()"/>
|
||||||
|
<input type="button" class="button" value="Remove Part" onclick="deletePart()"/>
|
||||||
|
</div>
|
||||||
|
<br><br><br><br>
|
||||||
|
<div id="commandTry" class="previewNickDiv">
|
||||||
|
<div id="try" class="command darkBg"></div>
|
||||||
|
<input type="button" class="button copy" value="Copy" onclick="copy(this)"/>
|
||||||
|
</div>
|
||||||
|
<div id="commandRequest" class="previewNickDiv">
|
||||||
|
<div id="request" class="command darkBg"></div>
|
||||||
|
<input type="button" class="button copy" value="Copy" onclick="copy(this)"/>
|
||||||
|
</div>
|
||||||
|
<div id="preview" class="preview darkBg previewNickDiv">
|
||||||
|
</div>
|
||||||
|
<div id="template" class='part' style="display: none">
|
||||||
|
<p style="font-family: 'minecraft-text', sans-serif">
|
||||||
|
Text: <input type="text" id="text" class="textPart" size=18 oninput="inputChanged()"/>
|
||||||
|
Gradient: <input type="checkbox" id="grad" class="gradPart" oninput="onGradient(this)"/>
|
||||||
|
<input id="colorA" type="text" class="coloris colorAPart color" value="#ffffff" oninput="inputChanged()"/>
|
||||||
|
<input id="colorB" type="text" class="coloris colorBPart color" value="#ffffff" oninput="inputChanged()"/>
|
||||||
|
Continuation: <input type="checkbox" id="cont" class="contPart" disabled oninput="onContinuation(this)"/>
|
||||||
|
<span id="invalid" class="invalidPart" style="display: none">(min 1 - max 16 chars)</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style="margin-top: 20px; text-align: center;">
|
||||||
|
<p style="font-family: 'minecraft-text', sans-serif">
|
||||||
|
Usage: Add as many parts as you wish, then apply the color and/or gradient, and copy/paste the command
|
||||||
|
into the minecraft chat. The total length of the nickname should be between 3 and 16 characters. Use the
|
||||||
|
continuation checkbox to continue the gradient from the last gradient color.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section> -->
|
||||||
|
</main>
|
||||||
|
</ng-container>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { NickgeneratorComponent } from './nickgenerator.component';
|
||||||
|
|
||||||
|
describe('NickgeneratorComponent', () => {
|
||||||
|
let component: NickgeneratorComponent;
|
||||||
|
let fixture: ComponentFixture<NickgeneratorComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [NickgeneratorComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(NickgeneratorComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {HeaderComponent} from "../header/header.component";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-nickgenerator',
|
||||||
|
imports: [
|
||||||
|
HeaderComponent
|
||||||
|
],
|
||||||
|
templateUrl: './nickgenerator.component.html',
|
||||||
|
styleUrl: './nickgenerator.component.scss'
|
||||||
|
})
|
||||||
|
export class NickgeneratorComponent {
|
||||||
|
|
||||||
|
}
|
||||||
@@ -0,0 +1,82 @@
|
|||||||
|
<ng-container>
|
||||||
|
<app-header [current_page]="'nicknames'" height="460px" background_image="/public/img/backgrounds/trees.jpg"
|
||||||
|
[overlay_gradient]="0.5">
|
||||||
|
<div class="title" header-content>
|
||||||
|
<h1>How To Get A Nickname</h1>
|
||||||
|
<h2>Personalize your writing and nickname in-game by choosing some of the millions of custom colors that we have
|
||||||
|
to offer!</h2>
|
||||||
|
</div>
|
||||||
|
</app-header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="darkmodeSection">
|
||||||
|
<section class="columnSection">
|
||||||
|
<div class="columnContainer">
|
||||||
|
<div class="columnParagraph">
|
||||||
|
<h2>Creating a Nickname</h2>
|
||||||
|
<p>Donors that have the Duke or Archduke rank have the ability to create custom nicknames for themselves. A
|
||||||
|
nickname should be similar enough to the player’s username for that player to be identifiable, and it
|
||||||
|
<span style="font-family: 'opensans-bold', sans-serif;">must not exceed 16 characters in length</span>. In
|
||||||
|
general, a nickname should include the main part of a player’s actual username to avoid confusion.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columnParagraph">
|
||||||
|
<h2>Make it Your Own</h2>
|
||||||
|
<p>Altitude now supports the full range of RGB colors, which includes more than 16 million different hues.
|
||||||
|
In addition, the previous basic color codes still exist and are able to be used in combination with the
|
||||||
|
RGB colors. You can still use <span style="font-family: 'opensans-bold', sans-serif;">/colors</span> to
|
||||||
|
see the basic color codes that are available for use. You can also make use of <span
|
||||||
|
style="font-family: 'opensans-bold', sans-serif;">/colorsextra</span> which shows many different RGB
|
||||||
|
color options. These colors will be in the form of <span
|
||||||
|
style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span>; write down the colors that you like so
|
||||||
|
that you can easily use them later.</p>
|
||||||
|
<img ngSrc="/public/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
|
||||||
|
width="480">
|
||||||
|
<p>Output of /colorsextra</p>
|
||||||
|
<p>Furthermore, you can also use the <a [routerLink]="['/nickgenerator']">nickname generation tool</a> to
|
||||||
|
make and preview potential nicknames - as well as copying the commands to use in-game.</p>
|
||||||
|
<p>Players are encouraged to play around and personalize their nicknames, as long as they follow the rules
|
||||||
|
and are legible! There are endless possibilities beyond simple gradients as well; players can create any
|
||||||
|
combination of standard colors and gradients that they choose.</p>
|
||||||
|
<p>Even if you aren’t a Duke or Archduke, you can try out colors like this on signs in-game.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="columnContainer">
|
||||||
|
<div class="columnParagraph">
|
||||||
|
<h2>Request Your Nickname</h2>
|
||||||
|
<p>Players can only submit a new nickname request using <span
|
||||||
|
style="font-family: 'opensans-bold', sans-serif;">/nick request <name></span> once per day. When a
|
||||||
|
nickname is requested, it will notify staff for near-instant approval. Creating custom nicknames using RGB
|
||||||
|
can be difficult, so we have implemented <span style="font-family: 'opensans-bold', sans-serif;">/nick try <name></span>
|
||||||
|
so that you can experiment with your nicknames as many times as you want. It is highly encouraged to use
|
||||||
|
this command before submitting a formal request to staff. You can select an RGB color by putting the <span
|
||||||
|
style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span> code into curly braces before your
|
||||||
|
text.</p>
|
||||||
|
<p>We also support gradients in nicknames. You can specify the start and finish color and your nickname will
|
||||||
|
automatically find a gradient that goes between the two endpoints. <span
|
||||||
|
style="font-family: 'opensans-bold', sans-serif;">The symbol > is used to start a gradient, and the symbol < is used to close a gradient.</span>
|
||||||
|
You can have as many gradients as you want in your nickname, as long as it is readable.</p>
|
||||||
|
<p><span style="font-family: 'opensans-bold', sans-serif;">/nick try {#003380}Player</span>
|
||||||
|
would result in a blue name that read as “Player”.</p>
|
||||||
|
<p><span style="font-family: 'opensans-bold', sans-serif;">/nick try {#003380>}Player{#0000FF<}</span>
|
||||||
|
would result in the nickname reading as “Player” with a blue gradient fading across the letters in the
|
||||||
|
name.</p>
|
||||||
|
</div>
|
||||||
|
<div class="columnParagraph">
|
||||||
|
<h2>Useful Commands</h2>
|
||||||
|
<ul>
|
||||||
|
<li><span style="font-family: 'opensans-bold', sans-serif;">/nick help</span> - Shows a list of all useful
|
||||||
|
nickname commands and how to use them.
|
||||||
|
</li>
|
||||||
|
<li><span style="font-family: 'opensans-bold', sans-serif;">/nick try name</span> - Allows players to see
|
||||||
|
how a nickname would look as many times as you like.
|
||||||
|
</li>
|
||||||
|
<li><span style="font-family: 'opensans-bold', sans-serif;">/nick request name</span> - Allows players to
|
||||||
|
submit a new nickname to staff for approval. This function can only be used once per day.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</ng-container>
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { NicknamesComponent } from './nicknames.component';
|
||||||
|
|
||||||
|
describe('NicknamesComponent', () => {
|
||||||
|
let component: NicknamesComponent;
|
||||||
|
let fixture: ComponentFixture<NicknamesComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [NicknamesComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(NicknamesComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {HeaderComponent} from "../header/header.component";
|
||||||
|
import {NgOptimizedImage} from '@angular/common';
|
||||||
|
import {RouterLink} from '@angular/router';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-nicknames',
|
||||||
|
imports: [
|
||||||
|
HeaderComponent,
|
||||||
|
NgOptimizedImage,
|
||||||
|
RouterLink
|
||||||
|
],
|
||||||
|
templateUrl: './nicknames.component.html',
|
||||||
|
styleUrl: './nicknames.component.scss'
|
||||||
|
})
|
||||||
|
export class NicknamesComponent {
|
||||||
|
|
||||||
|
}
|
||||||
@@ -1,189 +0,0 @@
|
|||||||
<app-header current_page="particles" height="200px" background_image="/public/img/backgrounds/staff.png"
|
|
||||||
[overlay_gradient]="0.5">
|
|
||||||
<div class="title" header-content>
|
|
||||||
<h1>Particle Creator</h1>
|
|
||||||
</div>
|
|
||||||
</app-header>
|
|
||||||
|
|
||||||
<main>
|
|
||||||
<section class="darkmodeSection">
|
|
||||||
<section class="column">
|
|
||||||
<div class="renderer-section row column">
|
|
||||||
<div #rendererContainer class="renderer-container column row"></div>
|
|
||||||
<div class="plane-controls">
|
|
||||||
<label>Plane Position (Z-axis):</label>
|
|
||||||
<mat-slider min="0" max="16" step="1" #planeSlider>
|
|
||||||
<input matSliderThumb [(ngModel)]="planePosition" (input)="updatePlanePosition($event)">
|
|
||||||
</mat-slider>
|
|
||||||
<span>{{ planePosition }}/16 blocks</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="column controls-section">
|
|
||||||
<mat-card>
|
|
||||||
<mat-card-header>
|
|
||||||
<mat-card-title>Particle Properties</mat-card-title>
|
|
||||||
</mat-card-header>
|
|
||||||
<mat-card-content>
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Particle Name</mat-label>
|
|
||||||
<input matInput [(ngModel)]="particleData.particle_name" placeholder="Enter particle name">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Display Name</mat-label>
|
|
||||||
<input matInput [(ngModel)]="particleData.display_name" placeholder="Enter display name">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Particle Type</mat-label>
|
|
||||||
<mat-select [(ngModel)]="particleData.particle_type">
|
|
||||||
<mat-option *ngFor="let type of particleTypes" [value]="type">{{ type }}</mat-option>
|
|
||||||
</mat-select>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Lore</mat-label>
|
|
||||||
<textarea matInput [(ngModel)]="particleData.lore" placeholder="Enter lore"></textarea>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Display Item</mat-label>
|
|
||||||
<input matInput [(ngModel)]="particleData.display_item" placeholder="Enter display item">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Permission</mat-label>
|
|
||||||
<input matInput [(ngModel)]="particleData.permission" placeholder="Enter permission">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Package Permission</mat-label>
|
|
||||||
<input matInput [(ngModel)]="particleData.package_permission" placeholder="Enter package permission">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Frame Delay</mat-label>
|
|
||||||
<input matInput type="number" [(ngModel)]="particleData.frame_delay" placeholder="Enter frame delay">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Repeat</mat-label>
|
|
||||||
<input matInput type="number" [(ngModel)]="particleData.repeat" placeholder="Enter repeat count">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Repeat Delay</mat-label>
|
|
||||||
<input matInput type="number" [(ngModel)]="particleData.repeat_delay"
|
|
||||||
placeholder="Enter repeat delay">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-form-field appearance="outline">
|
|
||||||
<mat-label>Random Offset</mat-label>
|
|
||||||
<input matInput type="number" [(ngModel)]="particleData.random_offset"
|
|
||||||
placeholder="Enter random offset">
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<mat-checkbox [(ngModel)]="particleData.stationary">Stationary</mat-checkbox>
|
|
||||||
</div>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column">
|
|
||||||
<mat-card class="color-picker-card">
|
|
||||||
<mat-card-header>
|
|
||||||
<mat-card-title>Particle Color</mat-card-title>
|
|
||||||
</mat-card-header>
|
|
||||||
<mat-card-content>
|
|
||||||
<div class="color-picker">
|
|
||||||
<input type="color" [(ngModel)]="selectedColor">
|
|
||||||
<span>Selected Color: {{ selectedColor }}</span>
|
|
||||||
</div>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column frames-section">
|
|
||||||
<mat-card>
|
|
||||||
<mat-card-header>
|
|
||||||
<mat-card-title>Frames</mat-card-title>
|
|
||||||
</mat-card-header>
|
|
||||||
<mat-card-content>
|
|
||||||
<div class="frames-container">
|
|
||||||
<mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
|
|
||||||
(selectedIndexChange)="switchFrame(frames[$event])">
|
|
||||||
<mat-tab *ngFor="let frameId of frames" [label]="frameId">
|
|
||||||
<div class="frame-content">
|
|
||||||
<h3>Particles in {{ frameId }}</h3>
|
|
||||||
<div class="particles-list">
|
|
||||||
<div *ngFor="let particle of particleData.frames[frameId]; let i = index" class="particle-item">
|
|
||||||
<span>Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
|
|
||||||
, {{ particle.z.toFixed(2) }})</span>
|
|
||||||
<button mat-icon-button color="warn" (click)="removeParticle(frameId, i)">
|
|
||||||
<mat-icon>delete</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="!particleData.frames[frameId] || particleData.frames[frameId].length === 0"
|
|
||||||
class="no-particles">
|
|
||||||
No particles in this frame. Click on the plane to add particles.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="frame-actions">
|
|
||||||
<button mat-raised-button color="warn" (click)="removeFrame(frameId)"
|
|
||||||
[disabled]="frames.length <= 1">
|
|
||||||
Remove Frame
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-tab>
|
|
||||||
</mat-tab-group>
|
|
||||||
<div class="add-frame">
|
|
||||||
<button mat-raised-button color="primary" (click)="addFrame()">
|
|
||||||
Add New Frame
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column json-output">
|
|
||||||
|
|
||||||
|
|
||||||
<mat-card>
|
|
||||||
<mat-card-header>
|
|
||||||
<mat-card-title>JSON Output</mat-card-title>
|
|
||||||
</mat-card-header>
|
|
||||||
<mat-card-content>
|
|
||||||
<pre>{{ generateJson() }}</pre>
|
|
||||||
</mat-card-content>
|
|
||||||
</mat-card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
@@ -1,128 +0,0 @@
|
|||||||
.renderer-section {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.renderer-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 400px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plane-controls {
|
|
||||||
margin-top: 10px;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
border-radius: 4px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.plane-controls mat-slider {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls-section {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
gap: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.form-row {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
mat-form-field {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker-card {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker input[type="color"] {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frames-section {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frames-container {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame-content {
|
|
||||||
padding: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.particles-list {
|
|
||||||
max-height: 300px;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 1px solid #eee;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 10px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.particle-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px;
|
|
||||||
border-bottom: 1px solid #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
.particle-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-particles {
|
|
||||||
padding: 20px;
|
|
||||||
text-align: center;
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-frame {
|
|
||||||
margin-top: 15px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-output {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.json-output pre {
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 4px;
|
|
||||||
overflow-x: auto;
|
|
||||||
max-height: 300px;
|
|
||||||
font-family: monospace;
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
@@ -1,494 +0,0 @@
|
|||||||
import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
|
||||||
import {CommonModule} from '@angular/common';
|
|
||||||
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
|
|
||||||
import {MatButtonModule} from '@angular/material/button';
|
|
||||||
import {MatInputModule} from '@angular/material/input';
|
|
||||||
import {MatFormFieldModule} from '@angular/material/form-field';
|
|
||||||
import {MatSelectModule} from '@angular/material/select';
|
|
||||||
import {MatSliderModule} from '@angular/material/slider';
|
|
||||||
import {MatCheckboxModule} from '@angular/material/checkbox';
|
|
||||||
import {MatTabsModule} from '@angular/material/tabs';
|
|
||||||
import {MatCardModule} from '@angular/material/card';
|
|
||||||
import {MatIconModule} from '@angular/material/icon';
|
|
||||||
import {HeaderComponent} from '../header/header.component';
|
|
||||||
import * as THREE from 'three';
|
|
||||||
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
|
|
||||||
|
|
||||||
// Define particle types
|
|
||||||
export enum ParticleType {
|
|
||||||
REDSTONE = 'REDSTONE',
|
|
||||||
// Other particle types can be added later
|
|
||||||
}
|
|
||||||
|
|
||||||
// Interface for particle information
|
|
||||||
interface ParticleInfo {
|
|
||||||
particle_type: string;
|
|
||||||
x: number;
|
|
||||||
y: number;
|
|
||||||
z: number;
|
|
||||||
color: string;
|
|
||||||
extra: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Interface for the complete particle data
|
|
||||||
interface ParticleData {
|
|
||||||
particle_name: string;
|
|
||||||
display_name: string;
|
|
||||||
particle_type: string;
|
|
||||||
lore: string;
|
|
||||||
display_item: string;
|
|
||||||
permission: string;
|
|
||||||
package_permission: string;
|
|
||||||
frame_delay: number;
|
|
||||||
repeat: number;
|
|
||||||
repeat_delay: number;
|
|
||||||
random_offset: number;
|
|
||||||
stationary: boolean;
|
|
||||||
frames: {
|
|
||||||
[frameId: string]: ParticleInfo[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'app-particles',
|
|
||||||
standalone: true,
|
|
||||||
imports: [
|
|
||||||
CommonModule,
|
|
||||||
FormsModule,
|
|
||||||
ReactiveFormsModule,
|
|
||||||
MatButtonModule,
|
|
||||||
MatInputModule,
|
|
||||||
MatFormFieldModule,
|
|
||||||
MatSelectModule,
|
|
||||||
MatSliderModule,
|
|
||||||
MatCheckboxModule,
|
|
||||||
MatTabsModule,
|
|
||||||
MatCardModule,
|
|
||||||
MatIconModule,
|
|
||||||
HeaderComponent
|
|
||||||
],
|
|
||||||
templateUrl: './particles.component.html',
|
|
||||||
styleUrl: './particles.component.scss'
|
|
||||||
})
|
|
||||||
export class ParticlesComponent implements OnInit, AfterViewInit {
|
|
||||||
@ViewChild('rendererContainer') rendererContainer!: ElementRef;
|
|
||||||
@ViewChild('planeSlider') planeSlider!: ElementRef;
|
|
||||||
|
|
||||||
// Three.js objects
|
|
||||||
private scene!: THREE.Scene;
|
|
||||||
private camera!: THREE.PerspectiveCamera;
|
|
||||||
private renderer!: THREE.WebGLRenderer;
|
|
||||||
private controls!: OrbitControls;
|
|
||||||
private playerModel!: THREE.Group;
|
|
||||||
private intersectionPlane!: THREE.Mesh;
|
|
||||||
private particles: THREE.Mesh[] = [];
|
|
||||||
private raycaster = new THREE.Raycaster();
|
|
||||||
private mouse = new THREE.Vector2();
|
|
||||||
|
|
||||||
// Particle data
|
|
||||||
public particleData: ParticleData = {
|
|
||||||
particle_name: '',
|
|
||||||
display_name: '',
|
|
||||||
particle_type: ParticleType.REDSTONE,
|
|
||||||
lore: '',
|
|
||||||
display_item: 'REDSTONE',
|
|
||||||
permission: '',
|
|
||||||
package_permission: '',
|
|
||||||
frame_delay: 1,
|
|
||||||
repeat: 1,
|
|
||||||
repeat_delay: 0,
|
|
||||||
random_offset: 0,
|
|
||||||
stationary: true,
|
|
||||||
frames: {
|
|
||||||
'frame1': []
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// UI state
|
|
||||||
public currentFrame: string = 'frame1';
|
|
||||||
public planePosition: number = 8; // Position in 1/16th of a block
|
|
||||||
public selectedColor: string = '#ff0000';
|
|
||||||
public particleTypes = Object.values(ParticleType);
|
|
||||||
public frames: string[] = ['frame1'];
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
}
|
|
||||||
|
|
||||||
ngOnInit(): void {
|
|
||||||
// Initialize component
|
|
||||||
}
|
|
||||||
|
|
||||||
ngAfterViewInit(): void {
|
|
||||||
this.initThreeJS();
|
|
||||||
this.animate();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize Three.js scene
|
|
||||||
private initThreeJS(): void {
|
|
||||||
// Create scene
|
|
||||||
this.scene = new THREE.Scene();
|
|
||||||
this.scene.background = new THREE.Color(0xf0f0f0);
|
|
||||||
|
|
||||||
// Get container dimensions
|
|
||||||
const containerWidth = this.rendererContainer.nativeElement.clientWidth;
|
|
||||||
const containerHeight = 400; // Fixed height as defined in CSS
|
|
||||||
|
|
||||||
// Create camera
|
|
||||||
this.camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 0.1, 1000);
|
|
||||||
this.camera.position.set(0, 1, 3);
|
|
||||||
this.camera.lookAt(0, 1, 0);
|
|
||||||
|
|
||||||
// Create renderer
|
|
||||||
this.renderer = new THREE.WebGLRenderer({antialias: true});
|
|
||||||
this.renderer.setSize(containerWidth, containerHeight);
|
|
||||||
|
|
||||||
// Center the canvas in the container
|
|
||||||
this.renderer.domElement.style.display = 'block';
|
|
||||||
this.renderer.domElement.style.margin = 'auto';
|
|
||||||
|
|
||||||
this.rendererContainer.nativeElement.appendChild(this.renderer.domElement);
|
|
||||||
|
|
||||||
// Initialize orbit controls
|
|
||||||
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
|
|
||||||
this.controls.enableDamping = true; // Add smooth damping effect
|
|
||||||
this.controls.dampingFactor = 0.05;
|
|
||||||
this.controls.minDistance = 2; // Minimum zoom distance
|
|
||||||
this.controls.maxDistance = 10; // Maximum zoom distance
|
|
||||||
this.controls.target.set(0, 1, 0); // Set target to player's center
|
|
||||||
this.controls.update();
|
|
||||||
|
|
||||||
// Add lights
|
|
||||||
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
|
|
||||||
this.scene.add(ambientLight);
|
|
||||||
|
|
||||||
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
|
|
||||||
directionalLight.position.set(1, 1, 1);
|
|
||||||
this.scene.add(directionalLight);
|
|
||||||
|
|
||||||
// Create player model (simple representation)
|
|
||||||
this.createPlayerModel();
|
|
||||||
|
|
||||||
// Create intersection plane
|
|
||||||
this.createIntersectionPlane();
|
|
||||||
|
|
||||||
// Add event listeners
|
|
||||||
this.renderer.domElement.addEventListener('mousedown', this.onMouseDown.bind(this));
|
|
||||||
this.renderer.domElement.addEventListener('mouseup', this.onMouseUp.bind(this));
|
|
||||||
this.renderer.domElement.addEventListener('mousemove', this.onMouseMove.bind(this));
|
|
||||||
window.addEventListener('resize', this.onWindowResize.bind(this));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create a simple player model
|
|
||||||
private createPlayerModel(): void {
|
|
||||||
this.playerModel = new THREE.Group();
|
|
||||||
|
|
||||||
// Head
|
|
||||||
const headGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
|
|
||||||
const headMaterial = new THREE.MeshLambertMaterial({color: 0xffccaa});
|
|
||||||
const head = new THREE.Mesh(headGeometry, headMaterial);
|
|
||||||
head.position.y = 1.35;
|
|
||||||
this.playerModel.add(head);
|
|
||||||
|
|
||||||
// Body
|
|
||||||
const bodyGeometry = new THREE.BoxGeometry(0.5, 0.7, 0.25);
|
|
||||||
const bodyMaterial = new THREE.MeshLambertMaterial({color: 0x0000ff});
|
|
||||||
const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
|
|
||||||
body.position.y = 0.75;
|
|
||||||
this.playerModel.add(body);
|
|
||||||
|
|
||||||
// Arms
|
|
||||||
const armGeometry = new THREE.BoxGeometry(0.2, 0.7, 0.25);
|
|
||||||
const armMaterial = new THREE.MeshLambertMaterial({color: 0xffccaa});
|
|
||||||
|
|
||||||
const leftArm = new THREE.Mesh(armGeometry, armMaterial);
|
|
||||||
leftArm.position.set(-0.35, 0.75, 0);
|
|
||||||
this.playerModel.add(leftArm);
|
|
||||||
|
|
||||||
const rightArm = new THREE.Mesh(armGeometry, armMaterial);
|
|
||||||
rightArm.position.set(0.35, 0.75, 0);
|
|
||||||
this.playerModel.add(rightArm);
|
|
||||||
|
|
||||||
// Legs
|
|
||||||
const legGeometry = new THREE.BoxGeometry(0.25, 0.7, 0.25);
|
|
||||||
const legMaterial = new THREE.MeshLambertMaterial({color: 0x000000});
|
|
||||||
|
|
||||||
const leftLeg = new THREE.Mesh(legGeometry, legMaterial);
|
|
||||||
leftLeg.position.set(-0.125, 0.15, 0);
|
|
||||||
this.playerModel.add(leftLeg);
|
|
||||||
|
|
||||||
const rightLeg = new THREE.Mesh(legGeometry, legMaterial);
|
|
||||||
rightLeg.position.set(0.125, 0.15, 0);
|
|
||||||
this.playerModel.add(rightLeg);
|
|
||||||
|
|
||||||
this.scene.add(this.playerModel);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create the intersection plane
|
|
||||||
private createIntersectionPlane(): void {
|
|
||||||
const planeGeometry = new THREE.PlaneGeometry(3, 3);
|
|
||||||
const planeMaterial = new THREE.MeshBasicMaterial({
|
|
||||||
color: 0x00AA00,
|
|
||||||
transparent: true,
|
|
||||||
opacity: 0.05,
|
|
||||||
side: THREE.DoubleSide
|
|
||||||
});
|
|
||||||
|
|
||||||
this.intersectionPlane = new THREE.Mesh(planeGeometry, planeMaterial);
|
|
||||||
this.intersectionPlane.position.z = 0;
|
|
||||||
// Center the plane vertically with the player (player is about 2 blocks tall)
|
|
||||||
this.intersectionPlane.position.y = 1;
|
|
||||||
this.scene.add(this.intersectionPlane);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update plane position based on slider
|
|
||||||
public updatePlanePosition(event: Event): void {
|
|
||||||
// Access the value from the slider element
|
|
||||||
const slider = event.target as HTMLInputElement;
|
|
||||||
this.planePosition = Number(slider.value);
|
|
||||||
// Convert from 1/16th block to Three.js units
|
|
||||||
const position = (this.planePosition / 16) - 0.5; // Center at 0
|
|
||||||
|
|
||||||
// Apply position based on the plane's current rotation
|
|
||||||
// This ensures the plane always moves towards/away from the viewer
|
|
||||||
const rotation = this.intersectionPlane.rotation.y;
|
|
||||||
|
|
||||||
if (Math.abs(rotation) < 0.1 || Math.abs(rotation - Math.PI) < 0.1) {
|
|
||||||
// Camera in front (0) or behind (PI)
|
|
||||||
// For camera behind, we need to invert the direction
|
|
||||||
const direction = Math.abs(rotation) < 0.1 ? 1 : -1;
|
|
||||||
this.intersectionPlane.position.z = position * direction;
|
|
||||||
// Reset x position to avoid cumulative changes
|
|
||||||
this.intersectionPlane.position.x = 0;
|
|
||||||
} else {
|
|
||||||
// Camera on right (PI/2) or left (-PI/2)
|
|
||||||
// For camera on left, we need to invert the direction
|
|
||||||
const direction = rotation > 0 ? 1 : -1;
|
|
||||||
this.intersectionPlane.position.x = position * direction;
|
|
||||||
// Reset z position to avoid cumulative changes
|
|
||||||
this.intersectionPlane.position.z = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Track if mouse is being dragged
|
|
||||||
private isDragging = false;
|
|
||||||
private mouseDownTime = 0;
|
|
||||||
|
|
||||||
// Handle mouse down event
|
|
||||||
private onMouseDown(event: MouseEvent): void {
|
|
||||||
this.isDragging = false;
|
|
||||||
this.mouseDownTime = Date.now();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle mouse up event
|
|
||||||
private onMouseUp(event: MouseEvent): void {
|
|
||||||
// If mouse was down for less than 200ms and didn't move much, consider it a click, not a drag
|
|
||||||
if (Date.now() - this.mouseDownTime < 200 && !this.isDragging) {
|
|
||||||
this.handlePlaneClick(event);
|
|
||||||
}
|
|
||||||
this.isDragging = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle mouse move event
|
|
||||||
private onMouseMove(event: MouseEvent): void {
|
|
||||||
// If mouse moves while button is pressed, it's a drag
|
|
||||||
if (event.buttons > 0) {
|
|
||||||
this.isDragging = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle mouse click on the plane
|
|
||||||
private handlePlaneClick(event: MouseEvent): void {
|
|
||||||
// Calculate mouse position in normalized device coordinates
|
|
||||||
const rect = this.renderer.domElement.getBoundingClientRect();
|
|
||||||
this.mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
|
|
||||||
this.mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
|
|
||||||
|
|
||||||
// Update the picking ray with the camera and mouse position
|
|
||||||
this.raycaster.setFromCamera(this.mouse, this.camera);
|
|
||||||
|
|
||||||
// Calculate objects intersecting the picking ray
|
|
||||||
const intersects = this.raycaster.intersectObject(this.intersectionPlane);
|
|
||||||
|
|
||||||
if (intersects.length > 0) {
|
|
||||||
const point = intersects[0].point;
|
|
||||||
this.addParticle(point.x, point.y, point.z);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add a particle at the specified position
|
|
||||||
private addParticle(x: number, y: number, z: number): void {
|
|
||||||
// Create a visual representation of the particle
|
|
||||||
const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
|
|
||||||
const particleMaterial = new THREE.MeshBasicMaterial({color: this.selectedColor});
|
|
||||||
const particleMesh = new THREE.Mesh(particleGeometry, particleMaterial);
|
|
||||||
|
|
||||||
particleMesh.position.set(x, y, z);
|
|
||||||
this.scene.add(particleMesh);
|
|
||||||
this.particles.push(particleMesh);
|
|
||||||
|
|
||||||
// Add to particle data
|
|
||||||
const hexColor = this.selectedColor.replace('#', '');
|
|
||||||
const r = parseInt(hexColor.substring(0, 2), 16) / 255;
|
|
||||||
const g = parseInt(hexColor.substring(2, 4), 16) / 255;
|
|
||||||
const b = parseInt(hexColor.substring(4, 6), 16) / 255;
|
|
||||||
|
|
||||||
const particleInfo: ParticleInfo = {
|
|
||||||
particle_type: ParticleType.REDSTONE,
|
|
||||||
x: x,
|
|
||||||
y: y,
|
|
||||||
z: z,
|
|
||||||
color: `${r},${g},${b}`,
|
|
||||||
extra: 1
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!this.particleData.frames[this.currentFrame]) {
|
|
||||||
this.particleData.frames[this.currentFrame] = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.particleData.frames[this.currentFrame].push(particleInfo);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle window resize
|
|
||||||
private onWindowResize(): void {
|
|
||||||
const containerWidth = this.rendererContainer.nativeElement.clientWidth;
|
|
||||||
const containerHeight = 400; // Fixed height as defined in CSS
|
|
||||||
|
|
||||||
this.camera.aspect = containerWidth / containerHeight;
|
|
||||||
this.camera.updateProjectionMatrix();
|
|
||||||
this.renderer.setSize(containerWidth, containerHeight);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Animation loop
|
|
||||||
private animate(): void {
|
|
||||||
requestAnimationFrame(this.animate.bind(this));
|
|
||||||
|
|
||||||
// Update controls
|
|
||||||
if (this.controls) {
|
|
||||||
this.controls.update();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update plane orientation based on camera position
|
|
||||||
if (this.intersectionPlane && this.camera) {
|
|
||||||
// Calculate the angle between camera and player (in the XZ plane)
|
|
||||||
const cameraAngle = Math.atan2(
|
|
||||||
this.camera.position.x,
|
|
||||||
this.camera.position.z
|
|
||||||
);
|
|
||||||
|
|
||||||
// Determine which quadrant the camera is in with a 45-degree offset
|
|
||||||
// Adding Math.PI/4 (45 degrees) to the angle before determining the quadrant
|
|
||||||
// This shifts the quadrant boundaries by 45 degrees
|
|
||||||
const quadrant = Math.floor((cameraAngle + Math.PI + Math.PI / 4) / (Math.PI / 2)) % 4;
|
|
||||||
|
|
||||||
// Rotate the plane to face the camera
|
|
||||||
if (quadrant === 0) {
|
|
||||||
this.intersectionPlane.rotation.y = 0; // Camera in front
|
|
||||||
this.updateFrameMaterial(0x00AA00);
|
|
||||||
} else if (quadrant === 1) {
|
|
||||||
this.intersectionPlane.rotation.y = Math.PI / 2; // Camera on right
|
|
||||||
this.updateFrameMaterial(0x0000AA);
|
|
||||||
} else if (quadrant === 2) {
|
|
||||||
this.intersectionPlane.rotation.y = Math.PI; // Camera behind
|
|
||||||
this.updateFrameMaterial(0x00AA00);
|
|
||||||
} else {
|
|
||||||
this.intersectionPlane.rotation.y = -Math.PI / 2; // Camera on left
|
|
||||||
this.updateFrameMaterial(0x0000AA);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
this.renderer.render(this.scene, this.camera);
|
|
||||||
}
|
|
||||||
|
|
||||||
public updateFrameMaterial(color: number) {
|
|
||||||
this.intersectionPlane.material = new THREE.MeshBasicMaterial({
|
|
||||||
color: color,
|
|
||||||
transparent: true,
|
|
||||||
opacity: 0.05,
|
|
||||||
side: THREE.DoubleSide
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add a new frame
|
|
||||||
public addFrame(): void {
|
|
||||||
const frameId = `frame${this.frames.length + 1}`;
|
|
||||||
this.frames.push(frameId);
|
|
||||||
this.particleData.frames[frameId] = [];
|
|
||||||
this.currentFrame = frameId;
|
|
||||||
this.clearParticleVisuals();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Switch to a different frame
|
|
||||||
public switchFrame(frameId: string): void {
|
|
||||||
this.currentFrame = frameId;
|
|
||||||
this.clearParticleVisuals();
|
|
||||||
this.renderFrameParticles(frameId);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Clear particle visuals from the scene
|
|
||||||
private clearParticleVisuals(): void {
|
|
||||||
for (const particle of this.particles) {
|
|
||||||
this.scene.remove(particle);
|
|
||||||
}
|
|
||||||
this.particles = [];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Render particles for a specific frame
|
|
||||||
private renderFrameParticles(frameId: string): void {
|
|
||||||
if (!this.particleData.frames[frameId]) return;
|
|
||||||
|
|
||||||
for (const particleInfo of this.particleData.frames[frameId]) {
|
|
||||||
const particleGeometry = new THREE.SphereGeometry(0.03, 16, 16);
|
|
||||||
|
|
||||||
// Parse color
|
|
||||||
const colorParts = particleInfo.color.split(',');
|
|
||||||
const color = new THREE.Color(
|
|
||||||
parseFloat(colorParts[0]),
|
|
||||||
parseFloat(colorParts[1]),
|
|
||||||
parseFloat(colorParts[2])
|
|
||||||
);
|
|
||||||
|
|
||||||
const particleMaterial = new THREE.MeshBasicMaterial({color});
|
|
||||||
const particleMesh = new THREE.Mesh(particleGeometry, particleMaterial);
|
|
||||||
|
|
||||||
particleMesh.position.set(particleInfo.x, particleInfo.y, particleInfo.z);
|
|
||||||
this.scene.add(particleMesh);
|
|
||||||
this.particles.push(particleMesh);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate JSON output
|
|
||||||
public generateJson(): string {
|
|
||||||
return JSON.stringify(this.particleData, null, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove a particle
|
|
||||||
public removeParticle(frameId: string, index: number): void {
|
|
||||||
if (this.particleData.frames[frameId] && this.particleData.frames[frameId].length > index) {
|
|
||||||
this.particleData.frames[frameId].splice(index, 1);
|
|
||||||
|
|
||||||
// Update visuals if this is the current frame
|
|
||||||
if (frameId === this.currentFrame) {
|
|
||||||
this.clearParticleVisuals();
|
|
||||||
this.renderFrameParticles(frameId);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Remove a frame
|
|
||||||
public removeFrame(frameId: string): void {
|
|
||||||
const index = this.frames.indexOf(frameId);
|
|
||||||
if (index !== -1) {
|
|
||||||
this.frames.splice(index, 1);
|
|
||||||
delete this.particleData.frames[frameId];
|
|
||||||
|
|
||||||
// Switch to first frame if we removed the current one
|
|
||||||
if (frameId === this.currentFrame && this.frames.length > 0) {
|
|
||||||
this.switchFrame(this.frames[0]);
|
|
||||||
} else if (this.frames.length === 0) {
|
|
||||||
// If no frames left, add one
|
|
||||||
this.addFrame();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user