Skip to content

Commit 5afb3a3

Browse files
robeecodesrobeecodes
committed
docs: complete comments
1 parent 3669a1e commit 5afb3a3

File tree

9 files changed

+276
-72
lines changed

9 files changed

+276
-72
lines changed

‎src/index.html‎

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,22 @@
99
</head>
1010

1111
<body>
12+
<!--Initial overlay showing splash screen-->
1213
<div id="overlay">
13-
<img src="img/rc-cover.webp" alt="rc car simulator cover image" />
14+
<img src="img/rc-cover.webp" alt="rc car simulator cover image"/>
1415
<div id="title" class="p-5 text-light">
15-
<h1>RC Car Simulator</h1>
16+
<h1 class="display-1">RC Car Simulator</h1>
1617
<div class="d-flex flex-row align-items-center">
17-
<p class="ms-3">Created by:</p>
18-
<p class="fs-1 font-monospace ms-3">Digital Bobs</p>
18+
<p class="ms-3 electro-text">Created by:</p>
19+
<p class="fs-1 ms-3 electro-text">Digital Bobs</p>
1920
</div>
2021
</div>
2122
<div id="start" class="p-1 p-md-5 text-light">
2223
<button type="button" id="startButton" class="btn btn-lg btn-primary px-5 fs-1 fw-bold">Start</button>
2324
</div>
2425
</div>
2526

27+
<!--World selection screen-->
2628
<div id="worldSelect">
2729
<div class="container-fluid min-vh-100 d-flex flex-column justify-content-center align-items-center bg-dark text-light p-5">
2830
<div class="row flex-column flex-lg-row">
@@ -31,18 +33,23 @@ <h1>RC Car Simulator</h1>
3133
</div>
3234
<div class="col d-flex flex-column justify-content-center">
3335
<h1 class="fw-bold">Welcome</h1>
34-
<p>Digital Bobs is excited to announce our partnership with <em>The Cave</em> to promote their new range of remote-controlled cars.</p>
35-
<p>When you try our brand new RC Car Simulator, you can test real, on-the-market gadgets in a realistic virtual environment.</p>
36-
<p>For this demo version of our RC Car Simulator, you can test your chosen car in a living room-inspired environment.</p>
36+
<p>Digital Bobs is excited to announce our partnership with <em>The Cave</em> to promote their new range
37+
of remote-controlled cars.</p>
38+
<p>When you try our brand new RC Car Simulator, you can test real, on-the-market gadgets in a realistic
39+
virtual environment.</p>
40+
<p>For this demo version of our RC Car Simulator, you can test your chosen car in a living room-inspired
41+
environment.</p>
3742
<p>Future versions will include new areas based on user feedback.</p>
3843
<div class="align-self-lg-end align-self-center">
39-
<button type="button" id="confirmWorld" class="btn btn-lg btn-primary px-5 fs-4 fw-bold">Proceed</button>
44+
<button type="button" id="confirmWorld" class="btn btn-lg btn-primary px-5 fs-4 fw-bold">Proceed
45+
</button>
4046
</div>
4147
</div>
4248
</div>
4349
</div>
4450
</div>
4551

52+
<!--Car selection screen-->
4653
<div id="carSelect">
4754
<div class="container-fluid min-vh-100 d-flex flex-column justify-content-center align-items-center bg-dark text-light p-5">
4855
<div class="row flex-column flex-lg-row">
@@ -62,13 +69,16 @@ <h1 class="text-center fw-bold display-3">Select your car</h1>
6269
<div id="desc">
6370
<div id="ferrori" class="carInfo mb-2">
6471
<h2 class="text-center fw-bold">The Ferrori Mini Zoomer</h2>
65-
<p class="text-center my-1">The latest in mini sports car technology. Impress your friends with its versatile capabilities in multiple environments!</p>
66-
<p class="text-center lead mt-3">Available in-store now for £23.99</p>
72+
<p class="text-center my-1">The latest in mini sports car technology. Impress your friends with
73+
its versatile capabilities in multiple environments!</p>
74+
<p class="text-center lead mt-3">Available in-store now for <span
75+
class="text-info">£23.99</span></p>
6776
</div>
6877
<div id="truck" class="carInfo mb-2">
6978
<h2 class="text-center fw-bold">The Micro Giga Truck</h2>
7079
<p class="text-center my-1">Speed and power combined into one glorious mini truck.</p>
71-
<p class="text-center lead mt-3">Available in-store now for £28.99</p>
80+
<p class="text-center lead mt-3">Available in-store now for <span
81+
class="text-info">£28.99</span></p>
7282
</div>
7383
</div>
7484
<div class="align-self-center">
@@ -80,20 +90,27 @@ <h2 class="text-center fw-bold">The Micro Giga Truck</h2>
8090
</div>
8191
</div>
8292

93+
<!--Instructions screen-->
8394
<div id="guide"
8495
class="container-fluid min-vh-100 d-flex flex-column align-items-center justify-content-center bg-dark text-center text-light">
8596
<div id="info" class="mx-auto shadow-lg p-5 rounded-5">
8697
<h1 class="display-5 fw-bold mb-4">How to Play</h1>
8798
<ol class="list-group my-3 text-start">
8899
<li class="list-group-item bg-dark text-light">Move your car using WASD or the arrow keys</li>
89100
<li class="list-group-item bg-dark text-light">Honk using the spacebar</li>
90-
<li class="list-group-item bg-dark text-light">Hold down left click and move your mouse to rotate the camera</li>
91-
<li class="list-group-item bg-dark text-light">Hold down right click and move your mouse to move the camera</li>
101+
<li class="list-group-item bg-dark text-light">Hold down left click and move your mouse to rotate the
102+
camera
103+
</li>
104+
<li class="list-group-item bg-dark text-light">Hold down right click and move your mouse to move the
105+
camera
106+
</li>
92107
<li class="list-group-item bg-dark text-light">Use your scroll wheel to zoom in or out</li>
93108
</ol>
94-
<p>Some objects in the scene are interactable! When your car approaches them, you will be notified with a popup.</p>
109+
<p class="fw-bold">Some objects in the scene are interactable! When your car approaches them, you will be
110+
notified with a popup.</p>
95111
<div class="alert alert-danger" role="alert">
96-
This is an early demo of the simulator! If you face issues with the car getting stuck, please refresh the page. You can also refresh the page to restart the simulator.
112+
This is an early demo of the simulator! If you face issues with the car getting stuck, please refresh the
113+
page. You can also refresh the page to restart the simulator.
97114
</div>
98115
<button id="playButton" class="btn btn-lg btn-primary mt-3 px-5 display-6">Let's Go!</button>
99116
</div>

‎src/index.js‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import LivingRoom from "./scripts/worlds/LivingRoom.js";
1010
import Truck from "./scripts/cars/Truck.js";
1111
import * as UITools from "./scripts/ui/UITools.js";
1212

13+
// Initialise global variables
14+
1315
let scene, physicsWorld, camera, renderer, controls;
1416
let colour, intensity, light;
1517
let ambientLight;
@@ -24,12 +26,17 @@ let world, car;
2426

2527
let groundMaterial, wheelMaterial;
2628

29+
30+
// Handle html overlays
2731
const {overlay, worldSelect, carSelect, guide} = UITools.getUIElements();
2832

33+
// Only show splash screen to start
2934
UITools.removeUIElement(worldSelect);
3035
UITools.removeUIElement(carSelect);
3136
UITools.removeUIElement(guide);
3237

38+
39+
// When splash buton start is clicked, go to world select
3340
let startButton = document.getElementById("startButton");
3441
startButton.addEventListener("click", toWorldSelect);
3542

@@ -45,6 +52,7 @@ function toWorldSelect(e) {
4552

4653
let carButton, carChoice, descBox, descriptions;
4754

55+
// When world button is clicked, go to car select
4856
function toCarSelect(e) {
4957
UITools.removeUIElement(worldSelect);
5058
UITools.addUIElement(carSelect);
@@ -57,12 +65,14 @@ function toCarSelect(e) {
5765
descriptions = document.querySelectorAll(".carInfo");
5866
descBox.innerHTML = '';
5967

68+
// Event listeners to track chosen car
6069
carChoice.forEach((choice, i) => {
6170
choice.addEventListener("click", changeCarDesc);
6271
if (choice.checked) descBox.appendChild(descriptions[i]);
6372
});
6473
}
6574

75+
// Update car description based on selected car
6676
function changeCarDesc(e) {
6777
for (let i = 0; i < carChoice.length; i++) {
6878
if (carChoice[i].checked) {
@@ -74,10 +84,12 @@ function changeCarDesc(e) {
7484

7585
let playButton;
7686

87+
// When care button is clicked, go to instructions
7788
function toGuide(e) {
7889
carChoice.forEach((choice, i) => {
7990
choice.removeEventListener("click", changeCarDesc);
8091
});
92+
// Set car based on chosen car
8193
for (let i = 0; i < carChoice.length; i++) {
8294
const item = carChoice[i];
8395
if (!item.checked) continue;
@@ -95,9 +107,13 @@ function toGuide(e) {
95107
UITools.addUIElement(guide);
96108
carButton.removeEventListener("click", toGuide);
97109
playButton = document.getElementById("playButton");
110+
// When play button is clicked, run init
98111
playButton.addEventListener("click", init);
99112
}
100113

114+
/**
115+
* Load all entities for the world and car
116+
*/
101117
function loadEntities() {
102118
world = new LivingRoom(gltfLoader, scene, physicsWorld, groundMaterial, camera, () => {
103119
world.car = new car(gltfLoader, scene, physicsWorld, world.carStart, wheelMaterial, camera);
@@ -116,6 +132,9 @@ function loadEntities() {
116132
});
117133
}
118134

135+
/**
136+
* Initialise the scene
137+
*/
119138
function init() {
120139
// Tone
121140
Tone.start();
@@ -136,6 +155,7 @@ function init() {
136155
physicsWorld.defaultContactMaterial.friction = 0.2;
137156
physicsWorld.broadphase = new CANNON.SAPBroadphase(physicsWorld);
138157

158+
// cannon-es contact materials
139159
groundMaterial = new CANNON.Material("groundMaterial");
140160
wheelMaterial = new CANNON.Material("wheelMaterial");
141161
const wheelGroundContactMaterial = window.wheelGroundContactMaterial = new CANNON.ContactMaterial(wheelMaterial, groundMaterial, {
@@ -171,14 +191,16 @@ function init() {
171191
ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
172192
scene.add(ambientLight);
173193

194+
// Add camera
174195
camera = new THREE.PerspectiveCamera(
175196
75,
176197
window.innerWidth / window.innerHeight,
177198
0.1,
178199
1000,
179200
);
180201

181-
camera.position.set(0, 0.66, 2.84);
202+
camera.position.set(-1.7429902804941595, 0.7616083627313399, -1.7814849500234389);
203+
camera.rotation.set(0, -Math.PI / 2, 0);
182204

183205
scene.add(camera);
184206

@@ -193,36 +215,47 @@ function init() {
193215
play();
194216
}
195217

196-
// simple render function
218+
/**
219+
* Render the Three.js scene
220+
*/
197221
function render() {
198222
renderer.render(scene, camera);
199223
}
200224

201-
// start animating
202-
225+
/**
226+
* Play the Three.js scene
227+
*/
203228
function play() {
204229
renderer.setAnimationLoop(() => {
205230
update();
206231
render();
207232
});
208233
}
209234

235+
/**
236+
* Update the Three.js scene
237+
*/
210238
function update() {
211239
deltaTime += clock.getDelta();
212240

213241
if (deltaTime > interval) {
214242
physicsWorld.fixedStep();
243+
// Check car and world are available before calling update
215244
if (world.car && world) {
216245
if (world.car.isLoaded && world.isLoaded) {
217246
world.car.update();
218247
world.update();
219248
}
220249
}
250+
// Update orbit controls
221251
controls.update(deltaTime);
222252
deltaTime = deltaTime % interval;
223253
}
224254
}
225255

256+
/**
257+
* Window resize handler
258+
*/
226259
function onWindowResize() {
227260
//resize & align
228261
sceneHeight = window.innerHeight;

‎src/scripts/cars/Truck.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Car from "./Car.js";
66
* @extends Car
77
*/
88
export default class Truck extends Car {
9-
constructor(loader, scene, physicsWorld, startPosition, wheelMaterial, camera, maxForce = 0.5, modelPath = 'models/vehicles/Truck.glb') {
9+
constructor(loader, scene, physicsWorld, startPosition, wheelMaterial, camera, maxForce = 0.35, modelPath = 'models/vehicles/Truck.glb') {
1010
super(loader, scene, physicsWorld, startPosition, wheelMaterial, camera, maxForce, modelPath);
1111
}
1212
}

‎src/scripts/roadkits/RoadKit.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,11 @@ export default class RoadKit {
525525
return;
526526
}
527527

528+
// Turn selectedtile green
529+
this.selectedTile.mesh.children.forEach((child, i) => {
530+
child.material.emissive = new THREE.Color(0x00ff00);
531+
});
532+
528533
// Store the cell the tile was grabbed from
529534
this.selectedTile.cell = cell;
530535

‎src/scripts/utils/createModal.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import * as bootstrap from 'bootstrap'
1010
export default function createModal(object, content) {
1111
// Create the HTML for the modal
1212
const modalHTML = `
13-
<div class="modal" id="${object}Modal" tabindex="-1" aria-labelledby="${object}Modal" aria-hidden="true">
13+
<div class="modal" id="${object}Modal" tabindex="-1" aria-labelledby="${object}Modal" aria-hidden="true" inert>
1414
<div class="modal-dialog">
1515
<div class="modal-content">
1616
<div class="modal-body bg-dark text-center text-light fs-3">

‎src/scripts/utils/proximityVolume.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export default function proximityVolume(emitterPosition, listener, gainNode, max
1414
const distance = emitterPosition.distanceTo(listenerPosition);
1515

1616
// Adjust the volume based on distance
17-
const maxDistance = 5;
17+
const maxDistance = 3.5;
1818
const minVolume = -0.9;
1919

2020
// Volume decreases as distance increases, but never lower than `minVolume`

0 commit comments

Comments
 (0)