templates/page/home.html.twig line 1

{% extends 'base.html.twig' %}
{% block title %}👾 Combattez pour l'humanité{% endblock %}
{% block head_scripts %}<link rel="stylesheet" href="{{ asset('css/pages/home.css') }}">{% endblock %}
{% block body %}
<section class="bg-one bg-center effect-bg-1">
<div class="bg-effect"></div>
<div id="foglayer_01" class="fog">
<div class="image01"></div>
<div class="image02"></div>
</div>
<div id="foglayer_02" class="fog">
<div class="image01"></div>
<div class="image02"></div>
</div>
<div id="foglayer_03" class="fog">
<div class="image01"></div>
<div class="image02"></div>
</div>
<div class="container d-flex flex-column align-items-center justify-content-center h-70vh">
<div class="text-center">
<p class="h4 text-space mb-4">Faites face à tous les dangers</p>
<p class="big-title mb-4">Entrez dans<br>la <span class="text-second">b<span id="l1">r</span>u<span id="l2">m</span>e</span></p>
<p class="h4 text-space mb-5">Partez re-conquérir notre planète perdue</p>
{% if is_granted('ROLE_USER') %}
<a href="{{ path('app_station_index') }}" class="btn">Retour à la station</a>
{% else %}
<a href="{{ path('app_register') }}" class="btn">Nous rejoindre</a>
{% endif %}
</div>
</div>
</section>
<section class="top-line bg-primary py-5">
<div class="container py-5">
<div class="row">
<div class="col-12 col-md-6 mb-4 mb-md-0">
<p class="h3">Jeu navigateur gratuit</p>
<p class="h2 mb-4">Rejoignez le projet <span class="text-second">C.L.O.N.E.S.</span> et évoluez sur une <span class="text-second">planète infestée</span></p>
<p class="mb-4">Le succès de cette mission ne dépends que de vous. Aurez-vous le courage d'affronter les hordes qui se cachent dans la brume ?</p>
<a href="{{ path('app_page_lore') }}" class="btn">En savoir plus</a>
</div>
<div class="col-12 col-md-5 offset-md-1">
<img class="img-path hover-scale" src="{{ asset('images/story/la-brume-vaisseau-amiral.jpg') }}" alt="Vaisseau amiral de la flotte humaine">
</div>
</div>
</div>
</section>
<section style="background-color: #000">
<div class="earth-before"></div>
<div id='earth' style="height: 500px;overflow: hidden;"></div>
<p class="mb-0 earth-text h2">Tous les moyens sont bons, pour re-conquérir notre planète.<br><span class="text text-no-transform">Il est temps de chasser ces monstres pour récupérer notre Terre. Le conseil a donné carte blanche. Devenez le meilleur pionnier.</span></p>
<div class="earth-after"></div>
</section>
<section class="bg-two">
<div class="effect-bg-1 py-5">
<div class="container py-5">
<div class="row">
<div class="col-12 col-lg-4 lg-4 mb-lg-0">
<div class="card hover-up is-fullheight">
<div class="card-body is-fullheight">
<div class="points color-1">
<span></span>
<span></span>
<span></span>
</div>
<p class="h2 underline">Fouillez</p>
<p>Malgré l'état dans laquelle nous retrouvons notre planète, de nombreuses ressources sont encore à dénicher en fouillant un peu.</p>
<p>Que ce soit des ressources de base comme le bois ou le métal, ou des armes comme ce bon vieux Dézingueur, découvrez plus d'une centaine d'objets. Enfin... si vous avez une chance de cocu.</p>
<div class="d-flex">
<img class="me-2" src="{{ asset('images/items/f1_4.png') }}" alt="" width="50" height="50">
<img class="me-2" src="{{ asset('images/items/f2_48.png') }}" alt="" width="50" height="50">
<img class="me-2" src="{{ asset('images/items/f6_82.png') }}" alt="" width="50" height="50">
<img src="{{ asset('images/items/f5_69.png') }}" alt="" width="50" height="50">
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 lg-4 mb-lg-0">
<div class="card hover-up is-fullheight">
<div class="card-body is-fullheight">
<div class="points color-2">
<span></span>
<span></span>
<span></span>
</div>
<p class="h2 underline">Fabriquez</p>
<p>Assemblez des objets pour en fabriquer de nouveaux, et utilisez-les pour construire et améliorer votre campement.</p>
<p>Découvrez de nouvelles possibilités, améliorez votre vie sur terre et rendez jaloux tous vos voisins !</p>
<p>Et surtout, pensez à faire la poussière de temps en temps dans votre camps.</p>
</div>
</div>
</div>
<div class="col-12 col-lg-4 lg-4 mb-lg-0">
<div class="card hover-up is-fullheight">
<div class="card-body is-fullheight">
<div class="points color-3">
<span></span>
<span></span>
<span></span>
</div>
<p class="h2 underline">Survivez</p>
<p>Seul, avec des amis ou même des inconnus !</p>
<p>Rejoignez (ou non) un groupe pour profiter ensemble (ou pas) d'une carte interactive de plus de 90 000 zones à découvrir, laissant place à 10 biomes uniques avec pour chacun des spécificités.</p>
<p>Massacrez les monstres que vous croisez en chemin, et faites de nouveau prospérer l'humanité !</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block footer_scripts %}
<script>
let text = ["$", "¤", "&", "R"];
let text2 = ["@", "%", "?", "M"];
let inst = setInterval(change, 1000);
let inst2 = setInterval(change2, 500);
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}
function change() {
document.getElementById("l1").innerHTML = text[getRndInteger(0, 4)];
}
function change2() {
document.getElementById("l2").innerHTML = text2[getRndInteger(0, 4)];
}
</script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68727/three.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68727/extras.js"></script>
<script>
"use strict";
var Earth = function (el, data) {
let camera, scene, renderer, composer, w, h;
let points = [],
rotation = {
x: Math.PI * 1.9,
y: Math.PI / 6
},
target = {
x: Math.PI * 1.9,
y: Math.PI / 6
};
const center = new THREE.Vector3(0, 0, 0),
clock = new THREE.Clock(),
distance = 350,
PI_HALF = Math.PI / 2,
pointRadius = 152,
radius = 150;
// Shaders
// https://github.com/dataarts/webgl-globe
const shaders = {
atmosphere: {
uniforms: {},
vertexShader: [
"varying vec3 vNormal;",
"void main() {",
"vNormal = normalize( normalMatrix * normal );",
"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",
"}"
].join("\n"),
fragmentShader: [
"varying vec3 vNormal;",
"void main() {",
"float intensity = pow( 0.8 - dot( vNormal, vec3( 0, 0, 1.0 ) ), 3.0 );",
"gl_FragColor = vec4( 0.3, 0.4, 0.6, 0.075 ) * intensity;",
"}"
].join("\n")
}
};
// -------------------------------------
// Init
// -------------------------------------
function init() {
w = window.innerWidth;
h = window.innerHeight;
camera = new THREE.PerspectiveCamera(distance / 5, w / h, 1, distance * 2);
scene = new THREE.Scene();
scene.add(camera);
// Stars
// http://gielberkers.com/evenly-distribute-particles-shape-sphere-threejs/
let starGeometry = new THREE.Geometry();
for (let i = 0; i < 1000; i++) {
let x = -1 + Math.random() * 2;
let y = -1 + Math.random() * 2;
let z = -1 + Math.random() * 2;
const d = 1 / Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2) + Math.pow(z, 2));
x *= d;
y *= d;
z *= d;
const vertex = new THREE.Vector3(
x * distance,
y * distance,
z * distance
);
starGeometry.vertices.push(vertex);
}
const stars = new THREE.Points(
starGeometry,
new THREE.PointsMaterial({
color: "#555555",
size: 3
})
);
scene.add(stars);
// Light
let light = new THREE.PointLight("#ffffff", 0.5);
camera.add(light);
light.position.set(distance / 2, distance / 2, 0);
light.target = camera;
// Earth
THREE.ImageUtils.crossOrigin = "";
var earthLights = THREE.ImageUtils.loadTexture(
"{{ asset('images/background/earth-lights.jpg') }}"
);
var earthBump = THREE.ImageUtils.loadTexture(
"{{ asset('images/background/earth-bump.jpg') }}"
);
earthLights.minFilter = THREE.LinearFilter;
earthBump.minFilter = THREE.LinearFilter;
var earthGeometry = new THREE.SphereGeometry(radius, 50, 30);
var earthMaterial = new THREE.MeshPhongMaterial({
bumpMap: earthBump,
bumpScale: 4,
emissiveMap: earthBump,
emissive: "#333333",
map: earthBump,
specular: "#010101"
});
const earth = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earth);
// Atmosphere
const atmosphereMaterial = new THREE.ShaderMaterial({
vertexShader: shaders["atmosphere"].vertexShader,
fragmentShader: shaders["atmosphere"].fragmentShader,
side: THREE.BackSide,
blending: THREE.AdditiveBlending,
transparent: true
});
const atmosphere = new THREE.Mesh(earthGeometry, atmosphereMaterial);
atmosphere.scale.set(1.3, 1.3, 1.3);
scene.add(atmosphere);
// Points
for (let i = 0; i < data.length; i++) {
points.push(new point(data[i].lat, data[i].long, data[i].r, i));
let newLine = drawCurve(points[0].position, points[i].position);
new TWEEN.Tween(newLine)
.to({
currentPoint: 200
}, 2000)
.delay(i * 350 + 1500)
.easing(TWEEN.Easing.Cubic.Out)
.onUpdate(function() {
newLine.geometry.setDrawRange(0, newLine.currentPoint);
})
.start();
}
// Renderer
renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
});
renderer.autoClear = false;
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);
// Composer
composer = new THREE.EffectComposer(renderer);
composer.addPass(new THREE.RenderPass(scene, camera));
const effectBloom = new THREE.BloomPass(1.75);
const effectFilm = new THREE.FilmPass(0.25, 0.5, 2048, 0);
const effectShift = new THREE.ShaderPass(THREE.RGBShiftShader);
effectShift.uniforms["amount"].value = 0.003;
effectShift.renderToScreen = true;
composer.addPass(effectBloom);
composer.addPass(effectFilm);
composer.addPass(effectShift);
// Events
window.addEventListener("resize", onWindowResize, false);
// DOM
el.appendChild(renderer.domElement);
}
// -------------------------------------
// Lat + Long to Vector
// -------------------------------------
function latLongToVector3(lat, lon, r) {
// http://www.smartjava.org/content/render-open-data-3d-world-globe-threejs
const phi = (lat * Math.PI) / 180;
const theta = ((lon - 287) * Math.PI) / 180;
const x = -r * Math.cos(phi) * Math.cos(theta);
const y = r * Math.sin(phi);
const z = r * Math.cos(phi) * Math.sin(theta);
return new THREE.Vector3(x, y, z);
}
// -------------------------------------
// Interactivity
// -------------------------------------
function onWindowResize(event) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// -------------------------------------
// Animate
// -------------------------------------
function animate(time) {
render();
TWEEN.update(time);
requestAnimationFrame(animate);
}
// -------------------------------------
// Render
// -------------------------------------
function render() {
if (el.style.cursor != 'move') target.x += 0.00010;
rotation.x += (target.x - rotation.x) * 0.1;
rotation.y += (target.y - rotation.y) * 0.1;
camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);
camera.position.y = distance * Math.sin(rotation.y);
camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);
camera.lookAt(center);
renderer.render(scene, camera);
composer.render();
}
// -------------------------------------
// Point
// -------------------------------------
function point(lat, lng, r, i) {
const position = latLongToVector3(lat, lng, radius);
const pointGeometry = new THREE.SphereGeometry(r, 32, 32);
const pointMaterial = new THREE.MeshBasicMaterial({
color: '#ff3600',
opacity: 0.2,
side: THREE.DoubleSide,
transparent: true
});
let point = new THREE.Mesh(pointGeometry, pointMaterial);
point.position.set(position.x, position.y, position.z);
point.scale.set(0.01, 0.01, 0.01);
point.lookAt(center);
scene.add(point);
new TWEEN.Tween(point.scale)
.to({
x: 1,
y: 1,
z: 1
}, 1000)
.delay(i * 350 + 1500)
.easing(TWEEN.Easing.Cubic.Out)
.start();
const pointRingGeometry = new THREE.RingGeometry(r + 0.5, r + 1.5, 32);
const pointRingMaterial = new THREE.MeshBasicMaterial({
color: '#ff3600',
opacity: 0.2,
side: THREE.DoubleSide,
transparent: true
});
let pointRing = new THREE.Mesh(pointRingGeometry, pointRingMaterial);
pointRing.position.set(position.x, position.y, position.z);
pointRing.scale.set(0.01, 0.01, 0.01);
pointRing.lookAt(center);
scene.add(pointRing);
new TWEEN.Tween(pointRing.scale)
.to({
x: 1,
y: 1,
z: 1
}, 1500)
.delay(i * 350 + 1500)
.easing(TWEEN.Easing.Cubic.Out)
.start();
return point;
}
// http://armsglobe.chromeexperiments.com/js/visualize_lines.js
function drawCurve(a, b, i) {
const distance = a.clone().sub(b).length();
let mid = a.clone().lerp(b, 0.5);
const midLength = mid.length();
mid.normalize();
mid.multiplyScalar(midLength + distance * 0.25);
let normal = (new THREE.Vector3()).subVectors(a, b);
normal.normalize();
const midStart = mid.clone().add(normal.clone().multiplyScalar(distance * 0.25));
const midEnd = mid.clone().add(normal.clone().multiplyScalar(distance * -0.25));
let splineCurveA = new THREE.CubicBezierCurve3(a, a, midStart, mid);
let splineCurveB = new THREE.CubicBezierCurve3(mid, midEnd, b, b);
let points = splineCurveA.getPoints(100);
points = points.splice(0, points.length - 1);
points = points.concat(splineCurveB.getPoints(100));
points.push(center);
let lineGeometry = new THREE.BufferGeometry();
let positions = new Float32Array(points.length * 3);
for (let ii = 0; ii < points.length; ii++) {
positions[ii * 3 + 0] = points[ii].x;
positions[ii * 3 + 1] = points[ii].y;
positions[ii * 3 + 2] = points[ii].z;
}
lineGeometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
lineGeometry.setDrawRange(0, 0);
var lineMaterial = new THREE.LineBasicMaterial({
color: new THREE.Color(0xffffff),
linewidth: 3,
opacity: 0.25,
transparent: true
});
let line = new THREE.Line(lineGeometry, lineMaterial);
line.currentPoint = 0;
scene.add(line);
return line;
}
// -------------------------------------
// Start
// -------------------------------------
init();
animate();
this.animate = animate;
return this;
};
var data = [
{
long: 15,
lat: 52,
r: 8
}, {
long: -0.128,
lat: 51.507,
r: 2
}, {
long: -0.5,
lat: 46,
r: 2
}, {
long: 3,
lat: 47.5,
r: 4
}, {
long: 5,
lat: 49,
r: 3
}, {
long: 10,
lat: 48,
r: 5
}, {
long: -1,
lat: 35,
r: 3
}, {
long: -3,
lat: 40,
r: 6
}, {
long: -8,
lat: 44,
r: 3
}, {
long: 14,
lat: 60,
r: 3
}, {
long: 11,
lat: 35,
r: 3
}, {
long: 15,
lat: 38,
r: 3
}, {
long: 11.8,
lat: 43.9,
r: 3
}, {
long: 15.4,
lat: 50,
r: 5
}, {
long: 31.4,
lat: 50.4,
r: 6
}, {
long: 24.4,
lat: 44.16,
r: 7
}, {
long: 25.462,
lat: 36.393,
r: 2
}
];
var container = document.getElementById("earth");
var planet = new Earth(container, data);
</script>
{% endblock %}

Filepath:: /home/labrume/web/la-brume.com/public_html/templates/page/home.html.twig
Last modified:: December 11, 2023 18:23
Size:: 23 KB / 579 lines

Open this file in your IDE?

Symfony Profiler

templates/page/home.html.twig line 1