1080p variant

phpx-foundation · Dec 2, 2024 · a3f0191 · a3f0191
1 parent 7cdfdf3
commit a3f0191
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/app/Http/Controllers/World/HomeController.php b/app/Http/Controllers/World/HomeController.php
@@ -4,14 +4,16 @@
 
 use App\Models\ExternalGroup;
 use App\Models\Group;
+use Illuminate\Http\Request;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Cache;
 
 class HomeController
 {
-	public function __invoke()
+	public function __invoke(Request $request)
 	{
 		return view('world.home', [
+			'show_1080p' => $request->has('1080p'),
 			'points' => Cache::remember(
 				key: 'homepage-points', 
 				ttl: now()->addDay(), 

diff --git a/resources/js/globe.js b/resources/js/globe.js
@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import ThreeGlobe from 'three-globe';
 import WebGL from 'three/addons/capabilities/WebGL.js';
 // import earthNight from '../../public/world/earth-night.jpg';
-// import earthNightHighRes from '../../public/world/earth-night-hires.jpg';
+import earthNightHighRes from '../../public/world/earth-night-hires.jpg';
 import earthNightCustom from '../../public/world/earth-night-custom.jpg';
 import earthTopology from '../../public/world/earth-topology.png';
 
@@ -14,6 +14,7 @@ if (! WebGL.isWebGL2Available()) {
 const node = document.getElementById('globe-visualization');
 // const debug_node = document.getElementById('debug');
 const points = JSON.parse(node.dataset.points);
+const highres = ('highres' in node.dataset);
 
 const colorInterpolator = t => `rgba(255, 210, 210, ${ 1 - t })`;
 // const colorInterpolator = t => `rgba(83, 116, 255, ${ 1 - t })`; // php.net
@@ -26,7 +27,7 @@ function random_number(min, max) {
 
 const Globe = new ThreeGlobe()
 	// .globeImageUrl(is_fast_connection ? earthNightHighRes : earthNight)
-	.globeImageUrl(earthNightCustom)
+	.globeImageUrl(highres ? earthNightHighRes : earthNightCustom)
 	.bumpImageUrl(earthTopology)
 	.ringsData(points)
 	.ringColor(() => colorInterpolator)

diff --git a/resources/views/world/home.blade.php b/resources/views/world/home.blade.php
@@ -8,7 +8,11 @@
 	</x-slot:og>
 
 	<x-slot:before>
-		<div id="globe-visualization" class="w-full h-32 -mb-4 sm:h-40 md:h-56 lg:h-96" data-points="{{ json_encode($points) }}"></div>
+		@if($show_1080p)
+			<div id="globe-visualization" class="w-[1920px] h-[1080px] mx-auto -mb-4" data-points="{{ json_encode($points) }}" data-highres="true"></div>
+		@else
+			<div id="globe-visualization" class="w-full h-32 -mb-4 sm:h-40 md:h-56 lg:h-96" data-points="{{ json_encode($points) }}"></div>
+		@endif
 		@env('local')
 			<div id="debug" class="absolute top-4 right-4 bg-red-800 text-white p-4 rounded"></div>
 		@endenv