andras/decla-red
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages 1 Wiki Activity Actions

Improve gameplay and design

Browse source
This commit is contained in:
schmelczerandras 2020-10-22 21:50:39 +02:00
parent af616042f3
commit 1d1bc6655c
15 changed files with 163 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/scripts/objects/camera.ts
View file

@ -1,6 +1,6 @@
import { vec2 } from 'gl-matrix';
import { Renderer } from 'sdf-2d';
import { calculateViewArea, GameObject, mixRgb, settings, UpdateMessage } from 'shared';
import { calculateViewArea, GameObject, mixRgb, settings } from 'shared';
import { Game } from '../game';
import { ViewObject } from './view-object';
@ -32,8 +32,7 @@ export class Camera extends GameObject implements ViewObject {
ambientLight: mixRgb(
settings.backgroundGradient[0],
settings.backgroundGradient[1],
(this.center.x - settings.worldLeftEdge) /
(Math.abs(settings.worldLeftEdge) + Math.abs(settings.worldRightEdge)),
vec2.length(this.center) / settings.worldRadius,
),
});
}

33
frontend/src/scripts/objects/planet-view.ts
View file

@ -1,13 +1,6 @@
import { vec2 } from 'gl-matrix';
import { Drawable, Renderer } from 'sdf-2d';
import {
CommandExecutors,
Id,
Random,
PlanetBase,
UpdateMessage,
settings,
} from 'shared';
import { Renderer } from 'sdf-2d';
import { CommandExecutors, Id, Random, PlanetBase } from 'shared';
import { RenderCommand } from '../commands/types/render';
import { PlanetShape } from '../shapes/planet-shape';
import { ViewObject } from './view-object';
@ -32,18 +25,19 @@ export class PlanetView extends PlanetBase implements ViewObject {
public step(deltaTimeInMilliseconds: number): void {
this.shape.randomOffset += deltaTimeInMilliseconds / 4000;
this.shape.colorMixQ = this.ownership;
let teamName = 'Neutral';
if (this.ownership < 0.5 - settings.planetControlThreshold) {
teamName = 'Decla';
} else if (this.ownership > 0.5 + settings.planetControlThreshold) {
teamName = 'Red';
}
this.ownershipProgess.innerText = `${teamName} ${Math.round(
(Math.abs(this.ownership - 0.5) / 0.5) * 100,
)}%`;
}
private getGradient(): string {
const sideDecla = this.ownership < 0.5;
const sidePercent = (Math.abs(this.ownership - 0.5) / 0.5) * 100;
const color = sideDecla ? 'var(--bright-decla)' : 'var(--bright-red)';
return `conic-gradient(
${color} ${sidePercent}%,
${color} ${sidePercent}%,
var(--bright-neutral) ${sidePercent}%,
var(--bright-neutral) 100%
)`;
}
public beforeDestroy(): void {
this.ownershipProgess.parentElement?.removeChild(this.ownershipProgess);
}
@ -56,6 +50,7 @@ export class PlanetView extends PlanetBase implements ViewObject {
const screenPosition = renderer.worldToDisplayCoordinates(this.center);
this.ownershipProgess.style.left = screenPosition.x + 'px';
this.ownershipProgess.style.top = screenPosition.y + 'px';
this.ownershipProgess.style.background = this.getGradient();
renderer.addDrawable(this.shape);
}

15
frontend/src/scripts/objects/player-character-view.ts
View file

@ -1,13 +1,6 @@
import { vec2 } from 'gl-matrix';
import { Renderer } from 'sdf-2d';
import {
Circle,
Id,
PlayerCharacterBase,
UpdateMessage,
CharacterTeam,
settings,
} from 'shared';
import { Circle, Id, PlayerCharacterBase, CharacterTeam, settings } from 'shared';
import { OptionsHandler } from '../options-handler';
import { BlobShape } from '../shapes/blob-shape';
@ -35,7 +28,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
this.previousHealth = this.health;
this.nameElement = document.createElement('div');
this.nameElement.className = 'player-tag';
this.nameElement.className = 'player-tag ' + this.team;
this.nameElement.innerText = this.name;
this.healthElement = document.createElement('div');
this.nameElement.appendChild(this.healthElement);
@ -47,7 +40,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
public step(deltaTimeInMilliseconds: number): void {
this.timeSinceLastNameElementUpdate += deltaTimeInMilliseconds;
this.healthElement.style.width = this.health + '%';
this.healthElement.style.width = (50 * this.health) / settings.playerMaxHealth + 'px';
if (this.previousHealth > this.health) {
this.previousHealth = this.health;
if (OptionsHandler.options.vibrationEnabled) {
@ -89,7 +82,7 @@ export class PlayerCharacterView extends PlayerCharacterBase implements ViewObje
const headFeetDelta = vec2.subtract(footAverage, this.head!.center, footAverage);
vec2.normalize(headFeetDelta, headFeetDelta);
const textOffset = vec2.scale(headFeetDelta, headFeetDelta, this.head!.radius + 50);
const textOffset = vec2.scale(headFeetDelta, headFeetDelta, this.head!.radius + 60);
return vec2.add(textOffset, this.head!.center, textOffset);
}
}