File size: 2,830 Bytes
09a6f7f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import Component from '../lib/component.js';
import store from '../store/index.js';
/**
* @classdesc UI component for the drawing mode buttons.
*/
export default class DrawingMode extends Component {
/**
* @constructor
*/
constructor() {
super({
store,
element: document.querySelector('#draw-tab'),
eventName: 'drawingModeChange'
});
}
/**
* Renders the drawing mode buttons.
*/
render() {
const state = store.state.drawingModeState;
const dict = window.lang_dict[store.state.language]['drawingMode'];
let drawGroundButton = this.element.querySelector('#drawGroundButton');
let drawCeilingButton = this.element.querySelector('#drawCeilingButton');
let eraseButton = this.element.querySelector('#eraseButton');
let clearButton = this.element.querySelector('#clearButton');
let generateTerrainButton = this.element.querySelector('#generateTerrainButton');
this.element.querySelector('#drawingIntro').innerHTML = dict['intro'];
this.element.querySelector('#drawingText').innerHTML = dict['text'];
drawGroundButton.innerHTML = `<i class="fas fa-pencil-alt"></i> ${dict['ground']}`;
drawCeilingButton.innerHTML = `<i class="fas fa-pencil-alt"></i> ${dict['ceiling']}`;
eraseButton.innerHTML = `<i class="fas fa-eraser"></i> ${dict['erase']}`;
clearButton.innerHTML = `<i class="fas fa-times"></i> ${dict['clear']}`;
// Enables the buttons when drawing mode is active
if(state.drawing){
drawGroundButton.className = "btn btn-outline-success";
drawCeilingButton.className = "btn btn-outline-secondary";
eraseButton.className = "btn btn-outline-warning";
// Fills the button corresponding to the current drawing mode
if(state.drawing_ground){
drawGroundButton.className = "btn btn-success";
}
else if(state.drawing_ceiling){
drawCeilingButton.className = "btn btn-secondary";
}
else if(state.erasing){
eraseButton.className = "btn btn-warning";
}
generateTerrainButton.className = "btn btn-success";
generateTerrainButton.innerText = dict['generateTerrain'];
}
// Disables drawing buttons when drawing mode is inactive
else{
drawGroundButton.className = "btn btn-outline-success disabled";
drawCeilingButton.className = "btn btn-outline-secondary disabled";
eraseButton.className = "btn btn-outline-warning disabled";
generateTerrainButton.className = "btn btn-primary";
generateTerrainButton.innerText = dict['draw'];
}
}
}; |