diff --git a/public/graphics/icon-timer.svg b/public/graphics/icon-timer.svg
new file mode 100644
index 0000000..b0ed9b6
--- /dev/null
+++ b/public/graphics/icon-timer.svg
@@ -0,0 +1,73 @@
+
+
+
+
diff --git a/public/index.html b/public/index.html
index 42fb06b..e24059d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,7 @@
-
+
diff --git a/public/index.js b/public/index.js
index 58e4d6e..b75c5d5 100644
--- a/public/index.js
+++ b/public/index.js
@@ -102,6 +102,12 @@ const Cube = function (width, depth, height) {
this.frames.push(frame);
}
+ this.deleteFrame = function (frameIndex) {
+ this.frames = this.frames.slice(0, frameIndex).concat(
+ this.frames.slice(frameIndex + 1)
+ );
+ }
+
this.switchLed = function (layerIndex, ledIndex) {
this.frames[this.currentFrame].layers[layerIndex][ledIndex] = !this.frames[this.currentFrame].layers[layerIndex][ledIndex];
}
@@ -158,7 +164,7 @@ const Cube = function (width, depth, height) {
led.classList.add('led', 'led-off');
led.addEventListener(
- 'click',
+ 'mousedown',
(event) => {
const index = y * this.depth + x;
const layer = this.height - z - 1;
@@ -208,6 +214,7 @@ const FrameMenu = function (id) {
this.htmlButtonAddFrameBefore = this.html.querySelector('#button-add-frame-before');
this.htmlButtonAddFrameAfter = this.html.querySelector('#button-add-frame-after');
this.htmlButtonToggleAnimation = this.html.querySelector('#button-toggle-animation');
+ this.htmlButtonDeleteFrame = this.html.querySelector('#button-delete-frame');
this.htmlInputDuration = this.html.querySelector('#frame-duration');
this.isAnimationPlaying = false;
@@ -252,6 +259,14 @@ const FrameMenu = function (id) {
}
);
+ this.htmlButtonDeleteFrame.addEventListener(
+ 'click',
+ () => {
+ this._decreaseSliderMax();
+ this.onFrameDelete();
+ }
+ );
+
this.slideToFrame = function (frameIndex) {
this.htmlSlider.value = frameIndex + 1;
this._updateFramePosition();
@@ -261,6 +276,12 @@ const FrameMenu = function (id) {
this.htmlInputDuration.value = duration;
}
+ this.startAnimation = function () {
+ this.isAnimationPlaying = false;
+
+ this._updateToggleButton();
+ }
+
this.stopAnimation = function () {
this.isAnimationPlaying = false;
@@ -271,6 +292,8 @@ const FrameMenu = function (id) {
this.onFrameAppend = function () {}
+ this.onFrameDelete = function () {}
+
this.onSlide = function () {}
this.onInputDuration = function () {}
@@ -286,6 +309,20 @@ const FrameMenu = function (id) {
if (frameNumber > 1) {
this.htmlButtonToggleAnimation.disabled = false;
}
+
+ this.htmlButtonDeleteFrame.disabled = false;
+ }
+
+ this._decreaseSliderMax = function () {
+ const frameNumber = parseInt(this.htmlSlider.max) - 1;
+
+ this.htmlSlider.max = frameNumber;
+ this.htmlDisplayFrames.innerText = frameNumber;
+
+ if (frameNumber < 2) {
+ this.htmlButtonToggleAnimation.disabled = true;
+ this.htmlButtonDeleteFrame.disabled = true;
+ }
}
this._updateFramePosition = function () {
@@ -301,6 +338,18 @@ const FrameMenu = function (id) {
this.htmlButtonToggleAnimation.classList.add('icon-button-play');
this.htmlButtonToggleAnimation.classList.remove('icon-button-stop');
}
+
+ const elements = [
+ this.htmlSlider,
+ this.htmlButtonAddFrameAfter,
+ this.htmlButtonAddFrameBefore,
+ this.htmlInputDuration,
+ this.htmlButtonDeleteFrame,
+ ];
+
+ for (const element of elements) {
+ element.disabled = this.isAnimationPlaying;
+ }
}
}
@@ -382,5 +431,18 @@ frameMenu.onToggleAnimation = (isPlaying) => {
for (const frame of ANIMATION_FRAME_QUEUE) {
clearTimeout(frame);
}
+
+ frameMenu.stopAnimation();
}
+}
+frameMenu.onFrameDelete = () => {
+ if (cube.frames.length < 2) {
+ return;
+ }
+
+ cube.deleteFrame(cube.currentFrame);
+ cube.currentFrame--;
+ cube.currentFrame = cube.currentFrame < 0 ? 0 : cube.currentFrame;
+
+ frameMenu.slideToFrame(cube.currentFrame);
}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 35ea6ec..8ed8bf4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -79,6 +79,10 @@ button:disabled {
background-image: url("graphics/icon-delete.svg");
}
+.icon-button-timer {
+ background-image: url("graphics/icon-timer.svg");
+}
+
button:hover {
background-color: #3765ff;
}
@@ -158,6 +162,10 @@ button:hover {
width: 80px;
}
+.selector {
+ position: relative;
+}
+
.selector-title {
margin-bottom: 10px;
font-weight: bold;
@@ -185,10 +193,11 @@ button:hover {
.selector-items {
border-radius: 0 0 10px 10px;
- position: relative;
+ position: absolute;
background-color: black;
- top: -8px;
+ top: 68px;
padding: 0;
+ width: 100%;
}
.selector-item {