demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 10:14:13 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

viewer fixes

Browse source
This commit is contained in:
Robin Appelman 2023-04-29 16:21:05 +02:00
commit e94f0474ef
9 changed files with 125 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

25
Cargo.lock generated
View file

@ -1879,6 +1879,16 @@ version = "0.3.17"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "6877bb514081ee2a7ff5ef9de3281f14a4dd4bceac4c09388074a6b5df8a139a"
[[package]]
name = "mime_guess"
version = "2.0.4"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "4192263c238a5f0d0c6bfd21f336a313a4ce1c450542449ca191bb657b4642ef"
dependencies = [
"mime",
"unicase",
]
[[package]]
name = "minimal-lexical"
version = "0.2.1"
@ -4666,7 +4676,13 @@ dependencies = [
"http",
"http-body",
"http-range-header",
"httpdate",
"mime",
"mime_guess",
"percent-encoding",
"pin-project-lite",
"tokio",
"tokio-util",
"tower-layer",
"tower-service",
"tracing",
@ -4781,6 +4797,15 @@ version = "0.1.5"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9e79c4d996edb816c91e4308506774452e55e95c3c9de07b6729e17e15a5ef81"
[[package]]
name = "unicase"
version = "2.6.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "50f37be617794602aabbeee0be4f259dc1778fabe05e2d67ee8f79326d5cb4f6"
dependencies = [
"version_check",
]
[[package]]
name = "unicode-bidi"
version = "0.3.13"

2
Cargo.toml
View file

@ -19,7 +19,7 @@ maud = { version = "0.25.0", features = ["axum"] }
axum = { version = "0.6.12", features = ["headers", "macros"] }
hyper = "0.14.25"
hyperlocal = "0.8.0"
tower-http = { version = "0.4.0", features = ["trace"] }
tower-http = { version = "0.4.0", features = ["trace", "fs"] }
steamid-ng = "1.0.0"
itertools = "0.10.5"
const-fnv1a-hash = "1.1.0"

2
script/viewer/Analyse/Analyser.tsx
View file

@ -8,7 +8,7 @@ import {Header, WorldBoundaries} from "./Data/Parser";
import {AsyncParser} from "./Data/AsyncParser";
import {getMapBoundaries} from "./MapBoundries";
import {createSignal} from "solid-js";
import {createEffect, createSignal} from "solid-js";
import {Session, StateUpdate} from "./Session";
export interface AnalyseProps {

6
script/viewer/Analyse/MapContainer.tsx
View file

@ -21,8 +21,10 @@ export const MapContainer = (props: ParentProps<MapContainerProps>) => {
}
}
createEffect(() => {
if (isFinite(scale())) {
props.onScale && props.onScale(scale());
const s = scale();
console.log(s)
if (isFinite(s)) {
props.onScale && props.onScale(s);
}
});

31
script/viewer/Analyse/MapRender.tsx
View file

@ -2,7 +2,7 @@ import {Player as PlayerDot} from './Render/Player';
import {Building as BuildingDot} from './Render/Building';
import {findMapAlias} from './MapBoundries';
import {PlayerState, Header, WorldBoundaries, BuildingState} from "./Data/Parser";
import {splitProps} from "solid-js";
import {createEffect, Show} from "solid-js";
export interface MapRenderProps {
header: Header;
@ -18,29 +18,22 @@ export interface MapRenderProps {
export function MapRender(props: MapRenderProps) {
const mapAlias = findMapAlias(props.header.map);
const image = `images/leveloverview/dist/${mapAlias}.webp`;
const image = `/images/leveloverview/dist/${mapAlias}.webp`;
const background = `url(${image})`;
const playerDots = () => props.players
.filter((player: PlayerState) => player.health)
.map((player: PlayerState) => {
return <PlayerDot player={player} mapBoundary={props.world}
targetSize={props.size} scale={props.scale} />
});
const buildingDots = () => props.buildings
.filter((building: PlayerState) => building.position.x)
.map((building: PlayerState) => {
return <BuildingDot building={building}
mapBoundary={props.world}
targetSize={props.size} scale={props.scale}/>
});
return (
<svg class="map-background" width={props.size.width} height={props.size.height}
style={{"background-image": background}}>
{playerDots()}
{buildingDots()}
<For each={props.players}>{(player) =>
<Show when={player.health}>
<PlayerDot player={player} mapBoundary={props.world} targetSize={props.size} scale={props.scale} />
</Show>
}</For>
<For each={props.buildings}>{(building) =>
<Show when={building.position.x}>
<BuildingDot building={building} mapBoundary={props.world} targetSize={props.size} scale={props.scale}/>
</Show>
}</For>
</svg>
);
}

31
script/viewer/Analyse/Render/Building.tsx
View file

@ -40,29 +40,32 @@ function getIcon(building: BuildingState) {
return `/images/building_icons/${icon}_${team}.png`;
}
export function Building({building, mapBoundary, targetSize, scale}: BuildingProp) {
const worldWidth = mapBoundary.boundary_max.x - mapBoundary.boundary_min.x;
const worldHeight = mapBoundary.boundary_max.y - mapBoundary.boundary_min.y;
const x = building.position.x - mapBoundary.boundary_min.x;
const y = building.position.y - mapBoundary.boundary_min.y;
const scaledX = x / worldWidth * targetSize.width;
const scaledY = (worldHeight - y) / worldHeight * targetSize.height;
const maxHealth = healthMap[building.level];
export function Building(props: BuildingProp) {
const worldWidth = props.mapBoundary.boundary_max.x - props.mapBoundary.boundary_min.x;
const worldHeight = props.mapBoundary.boundary_max.y - props.mapBoundary.boundary_min.y;
const x = () => props.building.position.x - props.mapBoundary.boundary_min.x;
const y = () => props.building.position.y - props.mapBoundary.boundary_min.y;
const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const maxHealth = () => healthMap[props.building.level];
if (!maxHealth) {
return null;
}
const alpha = building.health / maxHealth;
const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`;
const rotate = () => `rotate(${270 - props.building.angle})`;
const alpha = () => props.building.health / maxHealth;
try {
const image = getIcon(building);
return <g transform={`translate(${scaledX} ${scaledY}) scale(${1 / scale})`}
opacity={alpha}>
const image = getIcon(props.building);
return <g transform={transform()}
opacity={alpha()}>
<image href={image} className={"player-icon"} height={32}
width={32}
transform={`translate(-16 -16)`}/>
<Show when={building.angle}>
<Show when={props.building.angle}>
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
transform={`rotate(${270 - building.angle})`}/>
transform={rotate()}/>
</Show>
</g>
} catch (e) {

37
script/viewer/Analyse/Render/Player.tsx
View file

@ -1,4 +1,5 @@
import {PlayerState, WorldBoundaries, Team} from "../Data/Parser";
import {createEffect} from "solid-js";
export interface PlayerProp {
player: PlayerState;
@ -36,26 +37,28 @@ const classMap = {
9: "engineer"
};
export function Player({player, mapBoundary, targetSize, scale}: PlayerProp) {
const worldWidth = mapBoundary.boundary_max.x - mapBoundary.boundary_min.x;
const worldHeight = mapBoundary.boundary_max.y - mapBoundary.boundary_min.y;
const x = player.position.x - mapBoundary.boundary_min.x;
const y = player.position.y - mapBoundary.boundary_min.y;
const scaledX = x / worldWidth * targetSize.width;
const scaledY = (worldHeight - y) / worldHeight * targetSize.height;
const maxHealth = healthMap[player.playerClass];
const alpha = player.health / maxHealth;
const teamColor = (player.team === Team.Red) ? '#a75d50' : '#5b818f';
const imageOpacity = player.health === 0 ? 0 : (1 + alpha) / 2;
export function Player(props: PlayerProp) {
const worldWidth = props.mapBoundary.boundary_max.x - props.mapBoundary.boundary_min.x;
const worldHeight = props.mapBoundary.boundary_max.y - props.mapBoundary.boundary_min.y;
const x = () => props.player.position.x - props.mapBoundary.boundary_min.x;
const y = () => props.player.position.y - props.mapBoundary.boundary_min.y;
const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const maxHealth = () => healthMap[props.player.playerClass];
const alpha = () => props.player.health / maxHealth();
const teamColor = () => (props.player.team === Team.Red) ? '#a75d50' : '#5b818f';
const imageOpacity = () => props.player.health === 0 ? 0 : (1 + alpha()) / 2;
const transform = () => `translate(${scaledX()} ${scaledY()}) scale(${1 / props.scale})`;
const rotate = () => `rotate(${270 - props.player.angle})`;
return <g
transform={`translate(${scaledX} ${scaledY}) scale(${1 / scale})`}>
transform={transform()}>
<polygon points="-6,14 0, 16 6,14 0,24" fill="white"
opacity={imageOpacity}
transform={`rotate(${270 - player.angle})`}/>
<circle r={16} stroke-width={1} stroke="white" fill={teamColor}
opacity={alpha}/>
{getClassImage(player, imageOpacity)}
opacity={imageOpacity()}
transform={rotate()}/>
<circle r={16} stroke-width={1} stroke="white" fill={teamColor()}
opacity={alpha()}/>
{getClassImage(props.player, imageOpacity())}
</g>
}

6
script/viewer/Panner/Panner.tsx
View file

@ -42,8 +42,8 @@ export const Panner = (props: ParentProps<PannerProps>) => {
startX = event.pageX;
startY = event.pageY;
setTranslateX(panner.viewport.x);
setTranslateY(panner.viewport.y);
setTranslateX(Math.floor(panner.viewport.x));
setTranslateY(Math.floor(panner.viewport.y));
setScale(panner.scale);
}
@ -66,10 +66,8 @@ export const Panner = (props: ParentProps<PannerProps>) => {
setTranslateY(panner.viewport.y);
setScale(panner.scale);
if (props.onScale) {
props.onScale(panner.scale);
}
}
const mouseWheel = (event) => {
event.preventDefault();

3
src/main.rs
View file

@ -42,6 +42,7 @@ use std::net::SocketAddr;
use std::os::unix::fs::PermissionsExt;
use std::sync::Arc;
use steam_openid::SteamOpenId;
use tower_http::services::ServeDir;
use tower_http::trace::TraceLayer;
use tracing::{error, info, info_span};
use tracing_subscriber::{
@ -117,6 +118,7 @@ async fn main() -> Result<()> {
.route("/viewer", get(viewer))
.route("/viewer/:id", get(viewer))
.route("/:id", get(demo))
.nest_service("/images", ServeDir::new("images"))
.layer(
TraceLayer::new_for_http().make_span_with(|request: &Request<_>| {
let matched_path = request
@ -373,7 +375,6 @@ async fn viewer(
};
Ok(render(ViewerPage { demo }, session))
}
async fn handler_404() -> impl IntoResponse {
Error::NotFound
}