Skip to content

Commit fddb3b5

Browse files
JacobdeanrJacobdeanr
committed
Added details to cards
Created separate UI components for each parameter, like fog, sun angles, tags etc
1 parent 8e7d5ff commit fddb3b5

File tree

69 files changed

+2025
-47
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+2025
-47
lines changed

‎app/ui/fogparameters.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
type Fog = { primaryFogColor?: number[]; secondaryFogColor?: number[] };
2+
3+
export default function FogParams(f: Fog) {
4+
if (!f || (!f.primaryFogColor && !f.secondaryFogColor)) return null;
5+
return (
6+
<div className="text-sm text-neutral-400">
7+
<h3 className="font-semibold mb-1 mt-2">Fog Parameters</h3>
8+
<ul className="list-inside space-y-0.5">
9+
{f.primaryFogColor?.length && (
10+
<li>
11+
<span className="font-semibold">Primary Fog Color:</span>{' '}
12+
{f.primaryFogColor.join(' ')}
13+
</li>
14+
)}
15+
{f.secondaryFogColor?.length && (
16+
<li>
17+
<span className="font-semibold">Secondary Fog Color:</span>{' '}
18+
{f.secondaryFogColor.join(' ')}
19+
</li>
20+
)}
21+
</ul>
22+
</div>
23+
);
24+
}

‎app/ui/maplist.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
type MapLink = { name: string; url: string };
2+
3+
export default function MapList({ maps }: { maps?: MapLink[] }) {
4+
if (!maps?.length) return null;
5+
return (
6+
<div>
7+
<h3 className="font-semibold mb-1">Maps featuring this skybox</h3>
8+
<ul className="list-disc list-inside space-y-0.5 text-sm">
9+
{maps.map((m) => (
10+
<li key={m.url}>
11+
<a href={m.url} target="_blank" className="underline text-blue-300">
12+
{m.name}
13+
</a>
14+
</li>
15+
))}
16+
</ul>
17+
</div>
18+
);
19+
}

‎app/ui/meta.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
type Props = {
2+
author?: string;
3+
publishDate?: string;
4+
categories?: string[];
5+
description?: string;
6+
};
7+
8+
export default function Meta({
9+
author,
10+
publishDate,
11+
categories,
12+
description,
13+
}: Props) {
14+
return (
15+
<>
16+
{description && <p className="text-sm text-neutral-300">{description}</p>}
17+
18+
<ul className="text-sm text-neutral-400 space-y-0.5">
19+
{author && (
20+
<li>
21+
<span className="font-semibold">Author:</span> {author}
22+
</li>
23+
)}
24+
{publishDate && (
25+
<li>
26+
<span className="font-semibold">Published:</span> {publishDate}
27+
</li>
28+
)}
29+
{categories?.length && (
30+
<li>
31+
<span className="font-semibold">Categories:</span>{' '}
32+
{categories.join(', ')}
33+
</li>
34+
)}
35+
</ul>
36+
</>
37+
);
38+
}
39+

‎app/ui/modal.tsx

Lines changed: 30 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,43 @@
11
'use client';
2-
import { useEffect } from 'react';
2+
import { useEffect, useState } from 'react';
3+
import Meta from './meta';
4+
import SunParams from './sunparameters';
5+
import FogParams from './fogparameters';
6+
import MapList from './maplist';
37

4-
type Props = {
5-
slug: string;
6-
onClose: () => void;
8+
type MapLink = { name: string; url: string };
9+
type Meta = {
10+
author?: string; publishDate?: string; categories?: string[]; description?: string;
11+
steamMaps?: MapLink[];
12+
sunParameters?: any;
13+
fogParameters?: any;
714
};
815

9-
export default function Modal({ slug, onClose }: Props) {
16+
export default function Modal({ slug, onClose }: { slug: string; onClose: () => void }) {
17+
const [meta, setMeta] = useState<Meta | null>(null);
1018
const imgBase = `/Source_Skyboxes_NextJS/skyboxes/${slug}/images`;
1119

12-
useEffect(() => {
13-
const original = document.documentElement.style.overflow;
14-
document.documentElement.style.overflow = 'hidden';
20+
useEffect(() => { fetch(`/Source_Skyboxes_NextJS/data/${slug}.json`).then(r=>r.ok?r.json():null).then(setMeta); }, [slug]);
21+
useEffect(() => { const o=document.documentElement.style.overflow; document.documentElement.style.overflow='hidden'; return ()=>{document.documentElement.style.overflow=o}},[]);
22+
useEffect(() => { const h=(e:KeyboardEvent)=>e.key==='Escape'&&onClose(); window.addEventListener('keydown',h); return ()=>window.removeEventListener('keydown',h)},[onClose]);
1523

16-
return () => {
17-
document.documentElement.style.overflow = original;
18-
};
19-
}, []);
24+
return (
25+
<div onClick={onClose} className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex items-center justify-center p-4">
26+
<article onClick={e=>e.stopPropagation()} className="w-full max-w-[90vw] sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-4xl max-h-[70vh] overflow-y-auto overscroll-contain bg-neutral-900 rounded-lg shadow-xl ring-1 ring-neutral-700/60">
27+
<div className="relative w-full aspect-[16/9]">
28+
<img src={`${imgBase}/previews/1.webp`} alt="" className="absolute inset-0 w-full h-full object-cover" />
29+
</div>
2030

21-
useEffect(() => {
22-
const handler = (e: KeyboardEvent) => e.key === 'Escape' && onClose();
23-
window.addEventListener('keydown', handler);
24-
return () => window.removeEventListener('keydown', handler);
25-
}, [onClose]);
31+
<div className="p-4 space-y-4">
32+
<h2 className="text-xl font-bold">{slug}</h2>
2633

27-
return (
28-
<div
29-
onClick={onClose}
30-
className="fixed inset-0 z-50 bg-black/75 backdrop-blur-sm flex justify-center items-center p-4"
31-
>
32-
<article
33-
onClick={e => e.stopPropagation()}
34-
className="
35-
w-full max-w-[90vw]
36-
sm:max-w-xl
37-
md:max-w-2xl
38-
lg:max-w-3xl
39-
xl:max-w-4xl
40-
max-h-[70vh] overflow-y-auto
41-
bg-neutral-900 rounded-lg shadow-xl ring-1 ring-neutral-700/60
42-
"
43-
>
44-
<img
45-
src={`${imgBase}/previews/1.webp`}
46-
alt={`${slug} preview`}
47-
className="w-full"
48-
/>
34+
<Meta {...meta} />
35+
<SunParams {...meta?.sunParameters} />
36+
<FogParams {...meta?.fogParameters} />
37+
<MapList maps={meta?.steamMaps} />
4938

50-
<div className="p-4">
51-
<h2 className="text-xl font-bold mb-2">{slug}</h2>
52-
<a
53-
href={`/Source_Skyboxes_NextJS/skyboxes/${slug}/download/${slug}.7z`}
54-
className="underline text-blue-300"
55-
download
56-
>
57-
Download
39+
<a href={`/Source_Skyboxes_NextJS/skyboxes/${slug}/download/${slug}.7z`} className="underline text-blue-300" download>
40+
Download .7z
5841
</a>
5942
</div>
6043
</article>

‎app/ui/sunparameters.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
type Sun = {
2+
sunAngle?: string;
3+
pitch?: string | number;
4+
brightness?: number[];
5+
ambience?: number[];
6+
};
7+
8+
export default function SunParams(s: Sun) {
9+
if (!s || (!s.sunAngle && !s.pitch && !s.brightness && !s.ambience)) return null;
10+
return (
11+
<div className="text-sm text-neutral-400">
12+
<h3 className="font-semibold mb-1">Sun Parameters</h3>
13+
<ul className="list-inside space-y-0.5">
14+
{s.sunAngle && (
15+
<li>
16+
<span className="font-semibold">Sun Angle:</span> {s.sunAngle}
17+
</li>
18+
)}
19+
{s.pitch !== undefined && (
20+
<li>
21+
<span className="font-semibold">Pitch:</span> {s.pitch}
22+
</li>
23+
)}
24+
{s.brightness?.length && (
25+
<li>
26+
<span className="font-semibold">Brightness:</span>{' '}
27+
{s.brightness.join(' ')}
28+
</li>
29+
)}
30+
{s.ambience?.length && (
31+
<li>
32+
<span className="font-semibold">Ambient:</span>{' '}
33+
{s.ambience.join(' ')}
34+
</li>
35+
)}
36+
</ul>
37+
</div>
38+
);
39+
}
40+

‎public/data/sky_cloudy001_hdr.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"author": "Jacob Robbins",
3+
"description": "",
4+
"publishDate": "2012-06-23",
5+
"license": "CC BY 4.0",
6+
"categories": [
7+
"Afternoon",
8+
"Cloudy"
9+
],
10+
"steamMaps": [
11+
{
12+
"name": "Spruceville",
13+
"url": "https://steamcommunity.com/sharedfiles/filedetails/?id=1486408313"
14+
},
15+
{
16+
"name": "gm_lcl",
17+
"url": "https://steamcommunity.com/sharedfiles/filedetails/?id=3304889604"
18+
}
19+
]
20+
}

‎public/data/sky_cloudy002_hdr.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"author": "Jacob Robbins",
3+
"description": "",
4+
"publishDate": "2012-06-25",
5+
"license": "CC BY 4.0",
6+
"categories": [
7+
"Afternoon",
8+
"Cloudy"
9+
]
10+
}

‎public/data/sky_cloudy003_hdr.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"author": "Jacob Robbins",
3+
"description": "",
4+
"publishDate": "2012-07-03",
5+
"license": "CC BY 4.0",
6+
"categories": [
7+
"Afternoon",
8+
"Cloudy"
9+
],
10+
"steamMaps": [
11+
{
12+
"name": "zs_bankbarn",
13+
"url": "https://steamcommunity.com/sharedfiles/filedetails/?id=2904941963"
14+
}
15+
],
16+
"sunParameters": {
17+
"sunAngle": "0 30 0",
18+
"pitch": "-65",
19+
"brightness": [
20+
254,
21+
249,
22+
218,
23+
600
24+
],
25+
"ambience": [
26+
77,
27+
96,
28+
130,
29+
400
30+
]
31+
}
32+
}

‎public/data/sky_cloudy004_hdr.json

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"author": "Jacob Robbins",
3+
"description": "",
4+
"publishDate": "2012-07-03",
5+
"license": "CC BY 4.0",
6+
"categories": [
7+
"Afternoon",
8+
"Cloudy"
9+
],
10+
"steamMaps": [
11+
{
12+
"name": "de_ali",
13+
"url": "https://counterstrike.fandom.com/wiki/Ali"
14+
}
15+
],
16+
"sunParameters": {
17+
"sunAngle": "0 30 0",
18+
"pitch": "-65",
19+
"brightness": [
20+
254,
21+
249,
22+
218,
23+
600
24+
],
25+
"ambience": [
26+
77,
27+
96,
28+
130,
29+
400
30+
]
31+
}
32+
}

‎public/data/sky_cloudy005_hdr.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"author": "Jacob Robbins",
3+
"description": "",
4+
"publishDate": "2012-08-24",
5+
"license": "CC BY 4.0",
6+
"categories": [
7+
"Afternoon",
8+
"Cloudy"
9+
]
10+
}

0 commit comments

Comments
 (0)