small starting delays + cannot start without sounds

This commit is contained in:
Klemek
2024-10-18 17:35:35 +02:00
parent 0fe886fe0f
commit 95c6bb9072
2 changed files with 13 additions and 9 deletions
+3 -3
View File
@@ -16,7 +16,7 @@
<main id="app" style="display:none"> <main id="app" style="display:none">
<h1>Startle Machine</h1> <h1>Startle Machine</h1>
<p>Generates silence occasionally broken up by random sound effects.<br>Click the button below and leave this tab to start the prank.</p> <p>Generates silence occasionally broken up by random sound effects.<br>Click the button below and leave this tab to start the prank.</p>
<button class="start" :disabled="started" @click="start">{{ started ? 'You can leave this tab now...' : 'Start the prank' }}</button> <button class="start" :disabled="started || !canStart" @click="start">{{ started ? 'You can leave this tab now...' : (canStart ? 'Start the prank' : 'Select at least one sound') }}</button>
<br> <br>
<h2>Configuration</h2> <h2>Configuration</h2>
<table class="config"> <table class="config">
@@ -27,12 +27,12 @@
</colgroup> </colgroup>
<tr> <tr>
<td><label for="minDelay">Minimum delay:</label></td> <td><label for="minDelay">Minimum delay:</label></td>
<td><input id="minDelay" type="range" v-model="minDelay" min="1" max="120" /></td> <td><input id="minDelay" type="range" v-model="minDelay" min="1" max="60" /></td>
<td>{{ minDelay }} minutes</td> <td>{{ minDelay }} minutes</td>
</tr> </tr>
<tr> <tr>
<td><label for="maxDelay">Maximum delay:</label></td> <td><label for="maxDelay">Maximum delay:</label></td>
<td><input id="maxDelay" type="range" v-model="maxDelay" min="1" max="120" /></td> <td><input id="maxDelay" type="range" v-model="maxDelay" min="1" max="60" /></td>
<td>{{ maxDelay }} minutes</td> <td>{{ maxDelay }} minutes</td>
</tr> </tr>
<tr> <tr>
+10 -6
View File
@@ -65,8 +65,8 @@ let app = {
return { return {
sounds: [], sounds: [],
started: false, started: false,
minDelay: 15, minDelay: 5,
maxDelay: 45, maxDelay: 10,
volume: 50, volume: 50,
randomPitch: true, randomPitch: true,
hidePrank: true, hidePrank: true,
@@ -75,7 +75,11 @@ let app = {
fakes: FAKES, fakes: FAKES,
}; };
}, },
computed: {}, computed: {
canStart() {
return this.sounds.filter(sound => sound.active).length > 0;
},
},
watch: { watch: {
minDelay() { minDelay() {
this.maxDelay = Math.max(this.minDelay, this.maxDelay); this.maxDelay = Math.max(this.minDelay, this.maxDelay);
@@ -146,9 +150,9 @@ let app = {
}, },
trigger() { trigger() {
this.started = true; this.started = true;
const time = random.int(this.minDelay, this.maxDelay); const time = random.int(this.minDelay * 60 * 1000, this.maxDelay * 60 * 1000);
console.log(`Next in ${time} minutes`); console.log(`Next in ${Math.round(time / (60 * 1000))} minutes`);
setTimeout(this.playRandomSound, time * 60 * 1000); setTimeout(this.playRandomSound, time);
}, },
selectAll() { selectAll() {
this.sounds.forEach(sound => { this.sounds.forEach(sound => {