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

inline js data

Browse source
This commit is contained in:
Robin Appelman 2023-04-29 17:30:56 +02:00
commit 1e2a3e28e7
8 changed files with 111 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

19
build/bundlers/src/lib.rs
View file

@ -1,6 +1,8 @@
mod script;
mod style;
use base64::engine::general_purpose::STANDARD;
use base64::Engine;
use fnv::FnvHasher;
pub use script::bundle_script;
use std::fs::read;
@ -43,3 +45,20 @@ pub fn guess_mime(path: &str) -> &'static str {
}
return "text/plain";
}
fn inline_url(path: &str) -> String {
let content = read(path).unwrap_or_else(|e| {
eprintln!("Failed to write inline file {path}: {e}");
panic!("Failed to inline");
});
let (mime, encode) = guess_embed(path);
if encode {
let encoded = STANDARD.encode(content);
format!("data:{mime};base64,{encoded}")
} else {
let content = String::from_utf8(content).expect("invalid utf8");
let encoded = urlencoding::encode(&content);
format!("data:{mime},{encoded}")
}
}

39
build/bundlers/src/script/inline.rs Normal file
View file

@ -0,0 +1,39 @@
use crate::inline_url;
use swc_core::ecma::{
ast::*,
visit::{VisitMut, VisitMutWith},
};
pub struct InlineVisitor {}
impl InlineVisitor {
fn visit_require(&mut self, expr: &mut Expr, path: &str) {
if let Some(path) = path.strip_prefix("inline://") {
let data = inline_url(path);
*expr = Expr::Lit(Lit::Str(data.into()));
}
}
}
impl VisitMut for InlineVisitor {
fn visit_mut_expr(&mut self, expr: &mut Expr) {
if let Expr::Call(CallExpr {
args,
callee: Callee::Expr(callee),
..
}) = expr
{
if let Expr::Ident(callee) = callee.as_ref() {
if callee.sym.as_ref() == "require" {
if let Some(arg) = args.first() {
if let Expr::Lit(Lit::Str(arg)) = arg.expr.as_ref() {
let path = arg.value.to_string();
self.visit_require(expr, &path)
}
}
}
}
}
expr.visit_mut_children_with(self);
}
}

4
build/bundlers/src/script.rs → build/bundlers/src/script/mod.rs
View file

@ -1,3 +1,6 @@
mod inline;
use crate::script::inline::InlineVisitor;
use anyhow::Error;
use jsx_dom_expressions::TransformVisitor;
use std::collections::HashMap;
@ -153,6 +156,7 @@ impl Load for Loader {
let module = module
.fold_with(&mut strip(top_level_mark))
.fold_with(&mut as_folder(InlineVisitor {}))
.fold_with(&mut as_folder(TransformVisitor::new(
jsx_dom_expressions::config::Config {
module_name: "solid-js/web".to_string(),

20
build/bundlers/src/style.rs
View file

@ -1,6 +1,4 @@
use crate::guess_embed;
use base64::engine::general_purpose::STANDARD;
use base64::Engine;
use crate::inline_url;
use lightningcss::bundler::{Bundler, FileProvider};
use lightningcss::stylesheet::{MinifyOptions, ParserOptions, PrinterOptions};
use lightningcss::targets::Browsers;
@ -8,7 +6,6 @@ use lightningcss::values::url::Url;
use lightningcss::visit_types;
use lightningcss::visitor::{Visit, VisitTypes, Visitor};
use std::convert::Infallible;
use std::fs::read;
use std::path::Path;
pub fn bundle_style(style: &str) -> Vec<u8> {
@ -61,20 +58,7 @@ impl<'i> Visitor<'i> for InlineUrlVisitor {
fn visit_url(&mut self, url: &mut Url<'i>) -> Result<(), Self::Error> {
if let Some(path) = url.url.strip_prefix("inline://") {
let content = read(path).unwrap_or_else(|e| {
eprintln!("Failed to write inline file {path}: {e}");
panic!("Failed to inline");
});
let (mime, encode) = guess_embed(path);
if encode {
let encoded = STANDARD.encode(content);
url.url = format!("data:{mime};base64,{encoded}").into();
} else {
let content = String::from_utf8(content).expect("invalid utf8");
let encoded = urlencoding::encode(&content);
url.url = format!("data:{mime},{encoded}").into();
}
url.url = inline_url(path).into();
}
Ok(())
}

1
script/viewer.tsx
View file

@ -36,6 +36,7 @@ ready(async () => {
const parse = async (data: ArrayBuffer, parseProgress: HTMLProgressElement, stored: boolean) => {
const header = parseHeaderFromBuffer(data);
console.log(header);
const parser = new AsyncParser(data, (progress) => parseProgress.value = progress);
await parser.cache();

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

@ -16,30 +16,24 @@ const healthMap = [0, 150, 180, 216];
function getBuildingType(type: BuildingType) {
switch (type) {
case BuildingType.TeleporterEntrance:
return 'tele_entrance';
return require("inline://images/building_icons/tele_entrance.png");
case BuildingType.TeleporterExit:
return 'tele_exit';
return require("inline://images/building_icons/tele_exit.png");
case BuildingType.Dispenser:
return 'dispenser';
return require("inline://images/building_icons/dispenser.png");
case BuildingType.Level1Sentry:
return 'sentry_1';
return require("inline://images/building_icons/sentry_1.png");
case BuildingType.Level2Sentry:
return 'sentry_2';
return require("inline://images/building_icons/sentry_2.png");
case BuildingType.Level3Sentry:
return 'sentry_3';
return require("inline://images/building_icons/sentry_3.png");
case BuildingType.MiniSentry:
return 'sentry_1';
return require("inline://images/building_icons/sentry_1.png");
default:
return 'unknown';
return '';
}
}
function getIcon(building: BuildingState) {
const icon = getBuildingType(building.buildingType);
const team = building.team === Team.Red ? 'red' : 'blue';
return `/images/building_icons/${icon}_${team}.png`;
}
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;
@ -48,6 +42,7 @@ export function Building(props: BuildingProp) {
const scaledX = () => x() / worldWidth * props.targetSize.width;
const scaledY = () => (worldHeight - y()) / worldHeight * props.targetSize.height;
const maxHealth = () => healthMap[props.building.level];
const teamColor = () => (props.building.team === Team.Red) ? '#a75d50' : '#5b818f';
if (!maxHealth) {
return null;
}
@ -57,10 +52,12 @@ export function Building(props: BuildingProp) {
const alpha = () => props.building.health / maxHealth;
try {
const image = getIcon(props.building);
const image = () => getBuildingType(props.building.buildingType);
return <g transform={transform()}
opacity={alpha()}>
<image href={image} className={"player-icon"} height={32}
<circle r={16} stroke-width={1} stroke="white" fill={teamColor()}
opacity={alpha()}/>
<image href={image()} className={"player-icon"} height={32}
width={32}
transform={`translate(-16 -16)`}/>
<Show when={props.building.angle}>

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

@ -1,5 +1,4 @@
import {PlayerState, WorldBoundaries, Team} from "../Data/Parser";
import {createEffect} from "solid-js";
export interface PlayerProp {
player: PlayerState;
@ -24,17 +23,17 @@ const healthMap = {
9: 125,//engineer
};
const classMap = {
0: "empty",
1: "scout",
2: "sniper",
3: "soldier",
4: "demoman",
5: "medic",
6: "heavy",
7: "pyro",
8: "spy",
9: "engineer"
const imageMap = {
0: require("inline://images/class_icons/empty.svg"),
1: require("inline://images/class_icons/scout.svg"),
2: require("inline://images/class_icons/sniper.svg"),
3: require("inline://images/class_icons/soldier.svg"),
4: require("inline://images/class_icons/demoman.svg"),
5: require("inline://images/class_icons/medic.svg"),
6: require("inline://images/class_icons/heavy.svg"),
7: require("inline://images/class_icons/pyro.svg"),
8: require("inline://images/class_icons/spy.svg"),
9: require("inline://images/class_icons/engineer.svg"),
};
export function Player(props: PlayerProp) {
@ -63,11 +62,10 @@ export function Player(props: PlayerProp) {
}
function getClassImage(player: PlayerState, imageOpacity: number) {
if (!classMap[player.playerClass]) {
if (!imageMap[player.playerClass]) {
return [];
}
const image = `/images/class_icons/${classMap[player.playerClass]}.svg`;
return <image href={image}
return <image href={imageMap[player.playerClass]}
class={"player-icon " + player.team}
opacity={imageOpacity}
height={32}

40
style/pages/viewer/PlayerSpec.css
View file

@ -87,34 +87,34 @@
}
& .class-icon.scout {
background-image: url('../../images/class_portraits/Icon_scout.jpg');
background-image: url('/images/class_portraits/Icon_scout.jpg');
}
& .class-icon.soldier {
background-image: url('../../images/class_portraits/Icon_soldier.jpg');
background-image: url('/images/class_portraits/Icon_soldier.jpg');
}
& .class-icon.pyro {
background-image: url('../../images/class_portraits/Icon_pyro.jpg');
background-image: url('/images/class_portraits/Icon_pyro.jpg');
}
& .class-icon.demoman {
background-image: url('../../images/class_portraits/Icon_demoman.jpg');
background-image: url('/images/class_portraits/Icon_demoman.jpg');
}
& .class-icon.engineer {
background-image: url('../../images/class_portraits/Icon_engineer.jpg');
background-image: url('/images/class_portraits/Icon_engineer.jpg');
}
& .class-icon.heavy {
background-image: url('../../images/class_portraits/Icon_heavy.jpg');
background-image: url('/images/class_portraits/Icon_heavy.jpg');
}
& .class-icon.medic {
background-image: url('../../images/class_portraits/Icon_medic.jpg');
background-image: url('/images/class_portraits/Icon_medic.jpg');
}
& .class-icon.sniper {
background-image: url('../../images/class_portraits/Icon_sniper.jpg');
background-image: url('/images/class_portraits/Icon_sniper.jpg');
}
& .class-icon.spy{
background-image: url('../../images/class_portraits/Icon_spy.jpg');
background-image: url('/images/class_portraits/Icon_spy.jpg');
}
& .class-icon.uber {
background-image: url('images/charge_red.svg');
background-image: url('inline://images/charge_red.svg');
}
& .class-icon, & .steam-avatar {
@ -148,34 +148,34 @@
}
& .class-icon.scout {
background-image: url('../../images/class_portraits/Icon_scout_blue.jpg');
background-image: url('/images/class_portraits/Icon_scout_blue.jpg');
}
& .class-icon.soldier {
background-image: url('../../images/class_portraits/Icon_soldier_blue.jpg');
background-image: url('/images/class_portraits/Icon_soldier_blue.jpg');
}
& .class-icon.pyro {
background-image: url('../../images/class_portraits/Icon_pyro_blue.jpg');
background-image: url('/images/class_portraits/Icon_pyro_blue.jpg');
}
& .class-icon.demoman {
background-image: url('../../images/class_portraits/Icon_demoman_blue.jpg');
background-image: url('/images/class_portraits/Icon_demoman_blue.jpg');
}
& .class-icon.engineer {
background-image: url('../../images/class_portraits/Icon_engineer_blue.jpg');
background-image: url('/images/class_portraits/Icon_engineer_blue.jpg');
}
& .class-icon.heavy {
background-image: url('../../images/class_portraits/Icon_heavy_blue.jpg');
background-image: url('/images/class_portraits/Icon_heavy_blue.jpg');
}
& .class-icon.medic {
background-image: url('../../images/class_portraits/Icon_medic_blue.jpg');
background-image: url('/images/class_portraits/Icon_medic_blue.jpg');
}
& .class-icon.sniper {
background-image: url('../../images/class_portraits/Icon_sniper_blue.jpg');
background-image: url('/images/class_portraits/Icon_sniper_blue.jpg');
}
& .class-icon.spy {
background-image: url('../../images/class_portraits/Icon_spy_blue.jpg');
background-image: url('/images/class_portraits/Icon_spy_blue.jpg');
}
& .class-icon.uber {
background-image: url('images/charge_blue.svg');
background-image: url('inline://images/charge_blue.svg');
}
}