Skip to content

Commit 42b62ac

Browse files
ggftoggfto
committed
Add new hud shapes
1 parent fe1c04a commit 42b62ac

26 files changed

Lines changed: 2246 additions & 950 deletions

‎html/index.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/index.js‎

Lines changed: 98 additions & 64 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/vendor.js‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎svelte-source/pnpm-lock.yaml‎

Lines changed: 780 additions & 658 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎svelte-source/src/App.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
<link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
4949
</svelte:head>
5050

51-
<main class="{DebugStore ? 'bg-dark-300' :'bg-transparent'} min-h-screen">
51+
<main class="{DebugStore ? 'bg-gray-300' :'bg-transparent'} min-h-screen">
5252
{#if !$MenuStore.isCineamticModeChecked }
5353
<CompassHud />
5454
<MoneyHud />
@@ -57,4 +57,4 @@
5757
<MapBorder />
5858
{/if}
5959
<Menu />
60-
</main>
60+
</main>

‎svelte-source/src/components/atoms/button.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
export let disableText: string = "";
66
</script>
77

8-
<button style="backdrop-filter: drop-shadow(4px 4px 4px gray);" class="button bg-[var(--ps-hud-primary)] text-sm text-white py-2 px-4 my-2 rounded w-[150px] uppercase select-none disabled:opacity-25 disabled:cursor-not-allowed {buttonClass}"
8+
<button style="backdrop-filter: drop-shadow(4px 4px 4px gray);"
9+
class="button bg-[#03f0b5ff] text-sm text-white py-2 px-4 my-2 w-[150px]
10+
uppercase select-none disabled:opacity-25 disabled:cursor-not-allowed {buttonClass}"
911
on:click disabled={disable}
1012
>
1113
<span class="text-black py-3 font-bold">
1214
{disable && disableText ? disableText : name}
1315
</span>
14-
</button>
16+
</button>

‎svelte-source/src/components/atoms/numberInput.svelte‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,20 @@
3939
</script>
4040

4141

42-
<div class="flex flex-row mx-auto border h-10 w-30 rounded-lg border-gray-600 relative text-black">
43-
<button class="font-semibold border-r bg-[#292929] hover:bg-red-600 text-white border-gray-600 border-1 h-full w-20 flex rounded-l-md focus:outline-none cursor-pointer"
42+
<div class="flex flex-row mx-auto border h-10 w-30 border-gray-600 relative text-black">
43+
<button class="font-semibold border-r bg-[#383838] hover:bg-red-600 text-white border-gray-600
44+
border-1 h-full w-20 flex focus:outline-none cursor-pointer"
4445
on:click={() => handleClick("decrease")}>
4546
<span class="mx-auto mt-[10%] text-lg font-bold">-</span>
4647
</button>
4748

48-
<input type="text" class="w-15 p-2 p-1 text-xs appearance-none text-base border-gray-600 border-1 focus:outline-none focus:border-1 focus:border-gray-400 text-center bg-[#292929] text-white"
49+
<input type="text" class="w-15 p-2 p-1 text-xs appearance-none text-base border-gray-600
50+
border-1 focus:outline-none focus:border-1 focus:border-gray-400 text-center bg-[#383838] text-white"
4951
bind:value={value} on:input={(e) => handleInputUpdate(e)}/>
5052

51-
<button class="font-semibold border-l bg-[#292929] hover:bg-green-600 text-white border-gray-600 border-1 h-full w-20 flex rounded-r-md focus:outline-none cursor-pointer"
53+
<button class="font-semibold border-l bg-[#383838] hover:bg-green-600 text-white border-gray-600
54+
border-1 h-full w-20 flex focus:outline-none cursor-pointer"
5255
on:click={() => handleClick("increase")}>
5356
<span class="mx-auto mt-[10%] text-lg font-bold">+</span>
5457
</button>
55-
</div>
58+
</div>

‎svelte-source/src/components/atoms/select.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,8 @@
4949

5050
<style>
5151
.themed {
52-
--background: #292929;
53-
--listBackground: #292929;
52+
--background: #383838;
53+
--listBackground: #383838;
5454
--itemIsActiveBG: var(--ps-hud-primary);
5555
--itemHoverBG: var(--ps-hud-primary-hover);
5656
--border: #171717;
@@ -64,4 +64,4 @@
6464
:global(.listContainer) {
6565
z-index: 3 !important;
6666
}
67-
</style>
67+
</style>

‎svelte-source/src/components/atoms/textInput.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@
44
</script>
55

66
<input bind:value={value} type="text" class="bg-[var(--ps-hud-primary)] block w-full p-1.5 my-2 text-black text-base
7-
font-bold rounded-md placeholder-[black] outline-none"
7+
font-bold placeholder-[black] outline-none"
88
placeholder="Profile" pattern="[A-Za-z1-9]" max={maxLengh}
9-
>
9+
>

‎svelte-source/src/components/hud-shapes/circle-fill.svelte‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<script lang="ts">
2+
import { tweened } from 'svelte/motion';
3+
import { cubicOut } from 'svelte/easing';
4+
import Fa from 'svelte-fa'
5+
export let height: number = 50;
6+
export let icon: any = null;
7+
export let iconColor: string = "red";
8+
export let iconContrast: number = 100;
9+
export let iconDropShadowAmount: number = 0;
10+
export let iconScaling: number = 0.45;
11+
export let iconTranslateX: number = 0;
12+
export let iconTranslateY: number = 0;
13+
export let name: string = "";
14+
export let outlineColor: string = "red";
15+
export let outlineContrast: number = 100;
16+
export let outlineDropShadowAmount: number = 0;
17+
export let progressColor: string = "red";
18+
export let progressContrast: number = 100;
19+
export let progressDropShadowAmount: number = 0;
20+
export let progressValue: number = 100;
21+
export let rotateDegree: number = 0;
22+
export let translateX: number = 0;
23+
export let translateY: number = 0;
24+
export let width: number = 50;
25+
export let borderSize: number = 3;
26+
27+
let radius: number = 25;
28+
let stroke: number = 25;
29+
let minimumAxis: number = height;
30+
let normalizedRadius: number = radius - (stroke/2);
31+
let circumference = normalizedRadius * 2 * Math.PI;
32+
let strokeDashoffset: number = 0;
33+
34+
const progressTween = tweened(progressValue, {
35+
duration: 600,
36+
easing: cubicOut
37+
});
38+
$: {
39+
progressTween.set(progressValue)
40+
}
41+
$: {
42+
minimumAxis = height > width ? height : width;
43+
radius = minimumAxis/2;
44+
stroke = radius;
45+
normalizedRadius = radius - (stroke/2);
46+
circumference = normalizedRadius * 2 * Math.PI;
47+
}
48+
$: {
49+
strokeDashoffset = minimumAxis - $progressTween / 100 * minimumAxis;
50+
}
51+
</script>
52+
53+
<svg
54+
width={radius * 2}
55+
height={radius * 2}
56+
viewBox = "0 0 {radius * 2} {radius * 2}"
57+
overflow="visible"
58+
>
59+
<defs>
60+
<clipPath id={name+"-cut-out-circle"}>
61+
<circle
62+
stroke-width={stroke}
63+
r={radius}
64+
cx={radius}
65+
cy={radius}
66+
/>
67+
</clipPath>
68+
</defs>
69+
<g
70+
transform="
71+
{ rotateDegree > 0 ? "rotate("+rotateDegree+" "+radius+" "+radius+")": ""}
72+
{ "translate("+translateX+" "+translateY+")" }"
73+
>
74+
<circle
75+
stroke={"black"}
76+
fill="transparent"
77+
stroke-width={borderSize}
78+
r={normalizedRadius*2+(borderSize/2)}
79+
cx={radius}
80+
cy={radius}
81+
shape-rendering="geometricPrecision"
82+
/>
83+
<line
84+
x1="50%"
85+
y1="100%"
86+
x2="50%"
87+
y2="0%"
88+
stroke={progressColor}
89+
stroke-dasharray={minimumAxis}
90+
stroke-dashoffset={strokeDashoffset}
91+
stroke-width={minimumAxis}
92+
clip-path="url(#{name+"-cut-out-circle"})"
93+
shape-rendering="geometricPrecision"
94+
style="filter: {progressDropShadowAmount ? "drop-shadow(0px 0px "+progressDropShadowAmount+"px "+progressColor+")": ""}
95+
{"contrast("+progressContrast+"%)"};"
96+
/>
97+
</g>
98+
<g style="filter: {iconDropShadowAmount ? "drop-shadow(0px 0px "+iconDropShadowAmount+"px "+iconColor+")": ""}
99+
{"contrast("+iconContrast+"%)"};">
100+
<Fa icon={icon} scale={iconScaling} translateX={iconTranslateX}
101+
translateY={iconTranslateY} style="color:{iconColor}"/>
102+
</g>
103+
</svg>

0 commit comments

Comments
 (0)