karolina/bsagconv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edited colours; added Bai Jamjuree font; plurals in output text now set based on output values

Browse Source
This commit is contained in:
karolina
2026-03-08 12:08:33 +01:00
parent fe35ddaf0e
commit 3bdd0248e8
13 changed files with 178 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+page.svelte
+178 -12
View File
@@ -21,22 +21,44 @@
return `A ${v.name} ${v.type} photographed by ${v.imgCredit}.`
}
function getPlural(type: string): string {
return `${type}(${type == "bus" ? "e" : ""}s)`;
function getPluralFragments(length: string | number, type: string): string[] {
let l: number = 0;
if (typeof(length) === "string") {
l = Number(length);
} else {
l = length;
}
if (l === 1.0) {
return ["", "is"];
} else {
if (type == "bus") {
return ["es", "are"];
} else {
return ["s", "are"];
}
}
}
function calcToVehicles() {
let vehicle = getVehicle(vehicleId);
calcVal = ((lengthVal * 1000) / vehicle.length).toFixed(2);
outputText = `${lengthVal} metre(s) is equal to the length of ${calcVal} ${vehicle.name} ${getPlural(vehicle.type)}!`
vehicleVal = Number(calcVal);
let vehicleFragments = getPluralFragments(vehicleVal, vehicle.type);
let lengthFragments = getPluralFragments(lengthVal, "");
outputText = `${Number(lengthVal)} metre${lengthFragments[0]} is equal to the length of ${vehicleVal} ${vehicle.name} ${vehicle.type}${vehicleFragments[0]}!`
}
function calcToLength() {
let vehicle = getVehicle(vehicleId);
calcVal = (vehicleVal * (vehicle.length / 1000)).toFixed(2);
outputText = `${vehicleVal} ${vehicle.name} ${getPlural(vehicle.type)} is equal to the length of ${calcVal} metre(s)!`
lengthVal = Number(calcVal);
let vehicleFragments = getPluralFragments(vehicleVal, vehicle.type);
let lengthFragments = getPluralFragments(lengthVal, "");
outputText = `${Number(vehicleVal)} ${vehicle.name} ${vehicle.type}${vehicleFragments[0]} ${vehicleFragments[1]} ${lengthVal} metre${lengthFragments[0]} long!`
}
</script>
@@ -48,7 +70,6 @@
<h1>bsag conv</h1>
<div style="width: 100%; background-color: aquamarine; height: 2px;"></div>
<div class="split-container">
<div class="length-input-container">
<div class="half-split-container">
@@ -58,8 +79,14 @@
</div>
<div class="button-container">
<button onclick={() => calcToVehicles()}>→</button>
<button onclick={() => calcToLength()}>←</button>
<div class="wide-buttons">
<button onclick={() => calcToVehicles()}>→</button>
<button onclick={() => calcToLength()}>←</button>
</div>
<div class="slim-buttons">
<button onclick={() => calcToVehicles()}>↓</button>
<button onclick={() => calcToLength()}>↑</button>
</div>
</div>
<div class="vehicle-input-container">
@@ -84,21 +111,106 @@
<p>{outputText}</p>
<p class="credit-text">Unless credited to denizk0461 (me), all images courtesy of their respective photographers. Images and vehicle information sourced from <a href="https://wiki.bre-forum.de">wiki.bre-forum.de</a></p>
<p class="credit-text">Unless credited to denizk0461 (me), all images courtesy of their respective displayed photographers. Images and vehicle information sourced from <a href="https://wiki.bre-forum.de">wiki.bre-forum.de</a></p>
<style>
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/extralight.ttf");
font-weight: 200;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/extralight-italic.ttf");
font-weight: 200;
font-style: italic;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/light.ttf");
font-weight: 300;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/light-italic.ttf");
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/regular.ttf");
font-weight: 400;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/italic.ttf");
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/medium.ttf");
font-weight: 500;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/medium-italic.ttf");
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/semibold.ttf");
font-weight: 600;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/semibold-italic.ttf");
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "Bai Jamjuree";
src: url("/fonts/bai-jamjuree/bold-italic.ttf");
font-weight: bold;
font-style: italic;
}
:root {
--color-bsag-red: #FF0000;
--color-bsag-red-bg: color-mix(in srgb, var(--color-bsag-red) 20%, transparent);
--color-bsag-red-bg-hover: color-mix(in srgb, var(--color-bsag-red) 60%, transparent);
--color-bg: #1f1f1f;
--color-text: #e0e0e0;
background-color: var(--color-bg);
max-width: 800px;
interpolate-size: allow-sizes;
}
p, h1, h2, h3, h4, h5, h6 {
color: var(--color-text);
font-family: 'Bai Jamjuree', sans-serif;
}
.split-container {
display: grid;
grid-template-columns: 3fr 1fr 3fr;
display: flex;
gap: 8px;
flex-direction: row;
box-sizing: border-box;
}
.length-input-container, .vehicle-input-container {
flex: 2;
}
.half-split-container {
display: grid;
gap: 16px;
@@ -116,6 +228,36 @@
.button-container {
display: flex;
flex-direction: column;
flex: 1;
}
.wide-buttons, .slim-buttons {
gap: 8px;
}
button {
font-size: 1.5rem;
padding: 8px;
border: dashed var(--color-bsag-red) 2px;
color: var(--color-text);
background-color: var(--color-bsag-red-bg);
}
button:hover {
background-color: var(--color-bsag-red-bg-hover);
cursor: pointer;
}
.wide-buttons {
display: flex;
flex-direction: column;
}
.slim-buttons {
display: none;
flex-direction: row;
}
.slim-buttons button {
flex: 1;
}
.img-container {
@@ -137,15 +279,39 @@
bottom: 0;
margin: 0;
padding: 4px 6px;
background-color: aqua;
color: var(--color-text);
background-color: var(--color-bsag-red-bg-hover);
}
.credit-text, .credit-text a {
font-size: 0.9rem;
color: #666;
color: #999;
}
.credit-text a {
text-decoration: dashed 1px underline;
}
@media screen and (max-width: 666px) {
.split-container {
flex-direction: column;
}
.img-container {
height: 300px;
}
.wide-buttons {
display: none;
}
.slim-buttons {
display: flex;
}
}
@media screen and (max-width: 540px) {
.img-container {
height: 200px;
}
}
</style>