I've recently built a traffic light using vue.js, but unfortunately, it's not functioning as expected. The colors (red, yellow, and green) are supposed to change according to the time duration, but for some reason, this isn't happening. Can anyone spot the issue?
CSS
#screen {
width: 450px;
height: 740px;
background: #222;
border-radius: 12px;
margin: auto;
padding: 23px;
}
.light {
width: 230px;
height: 270px;
display: inline-block;
opacity: 0.2;
border-radius: 100%;
transition: opacity 10s;
margin-bottom: 12px;
}
.active {
opacity: 1;
}
.red {
background: red;
}
.yellow {
background: yellow;
}
.green {
background: green;
}
My HTML I have created the necessary divs.
<div id="screen">
<div id="light red" :class="{active: now=='red'}"></div>
<div id="light yellow" :class="{active: now=='yellow'}"></div>
<div id="light green" :class="{active: now=='green'}"></div>
</div>
and here is my Vue.js code Everything appears to be in place and there are no errors in the console. Yet, the functionality still seems to be off. Any suggestions on what might be causing this issue?
class State {
constructor(name, dur, next){
this.name = name;
this.dur = dur;
this.next = next;
}
}
class Controller {
trigger(state, callback){
callback(state);
setTimeout(()=>{
this.trigger(state.next, callback);
}, state.dur * 10)
}
}
var app = new Vue({
el: '#screen',
data:{
now: 'red'
},
mounted(){
var controller = new Controller();
var red = new State('red', 2);
var yellowRed = new State('yellow', 1);
var yellowGreen = new State('yellow', 1);
var green = new State('green', 3);
red.next = yellowRed;
yellowR.next = green;
green.next = yellowGreen;
yellowG.next = red;
controller.trigger(red, (state)=>{
this.now = state.name;
});
}
})
Could I be overlooking something? Should I consider rewriting my function?