Merge branch 'main' of https://github.com/annacarini/DM-Project

README.md

@@ -6,9 +6,26 @@ It has been realized as a project for the Data Management course from the master
 
 [The application is available here.](https://annacarini.github.io/External-Multipass-Sorting/)
 
-### Tools
+## Tools
 The application's graphics have been realized using the library [Two.js](https://two.js.org/), combined with the library [Tween.js](https://github.com/tweenjs/tween.js) to manage the animations.
 
-### Authors
- - Jacopo Fabi, 
+## Controls
+
+### Buttons
+<img src="https://github.com/annacarini/External-Multipass-Sorting/blob/main/images/controls.png" alt="control buttons" width="300"/>
+The actions are described in the table below.
+
+### Keyboard controls
+| Key | Action | Effect |
+|--|--|--|
+| **Spacebar** | *Play* | Start the automatic play of the simulation |
+| **Spacebar** | *Pause* | Stop the automatic play |
+| **Enter** | *Next* | Play one step with animation |
+| **Right arrow key** | *Jump*| Play one step without animation |
+| **Left arrow key** | *Undo* | Undo the last action |
+| **Plus key (+)** | | Increase the animation speed |
+| **Minus key (-)** | | Decrease the animation speed |
+
+## Authors
+ - Jacopo Fabi, 1809860
  - Anna Carini, 1771784

application.js

@@ -465,8 +465,7 @@ function playAll() {
     // attiva pulsante pausa
     pauseButton.disabled = false;
 
-    // leva i messaggi
-    showMessage("");
+    showMessageBoxContent(false);
 
     play(animTime);
 }
@@ -479,6 +478,8 @@ function pause() {
     // metti in pausa
     paused = true;
 
+    automaticPlay = false;
+
     if (applicationState == States.Finish) return;
 
     // attiva pulsanti play e back
@@ -494,7 +495,7 @@ function pause() {
 function undo() {
 
     // se e' attiva la riproduzione automatica, metti in pausa invece di fare undo?
-    if (automaticPlay && !paused) {
+    if (automaticPlay) {
         pause();
         return;
     }
@@ -518,6 +519,7 @@ function undo() {
     }
 
     showMessageBoxContent(true);
+    console.log("text box content: ", textBox.innerHTML);
 }
 
 
@@ -761,8 +763,7 @@ function play(time = animTime) {
                 buffer.undoWriteOnBuffer();
                 for (var i = framesToWrite.length - 1; i >= 0; i--)
                     relation.undoShiftFramesByOne(startingIndx, emptyFramesSwap[i]);
-                //relation.undoAnimateMultipleSquares(framesToWrite[0], oldFrameValues, oldColors, oldPositions);
-                console.log("LA RELATON", relation.relationArray);
+                console.log("LA RELATION", relation.relationArray);
                 for (var i = framesToWrite.length - 1; i >= 0; i--)
                     relation.undoReadOnePageOfChild(framesToWrite[i]);
                 console.log("IL VALORE DI CURRENT group", relation.currentGroup)
@@ -785,7 +786,7 @@ function play(time = animTime) {
                 nRead += framesToWrite.length
                 document.getElementById('read-count').textContent = nRead;
 
-                console.log("LA RELATON DOPO FUN", relation.relationArray);
+                console.log("LA RELATION DOPO FUN", relation.relationArray);
 
                 applicationState = States.ChildrenInBuffer;
                 showMessage(Messages.childrenBeingMergeSorted);
@@ -838,7 +839,6 @@ function play(time = animTime) {
                 rollback.push([() => {
                     buffer.undoWriteOnBufferFrame(frameEmptyIndx);
                     relation.undoShiftFramesByOne(startingIndx, swap);
-                    //relation.undoAnimateOneSquare(relationIndx);
                     relation.undoReadOnePageOfChild(fr);
                     buffer.framesToRefill.push(frameEmptyIndx);
                     nRead -= 1;
@@ -961,6 +961,7 @@ function play(time = animTime) {
             playJumpButton.disabled = true;
             playButton.disabled = true;
             undoButton.disabled = false;
+            showMessageBoxContent(true);
             break;
 
         default:

index.html

@@ -112,12 +112,12 @@
                     <div style="display:inline-block; font-family:Calibri; font-size:1.2vw; padding-right:0.5vw;">
                         Animation speed
                     </div>
-                    <button id="anim_faster" class="button-56-smaller" type="button">
-                        <span style="vertical-align:middle; padding-bottom:1vh; height:1vh;">+</span>
-                    </button>
                     <button id="anim_slower" class="button-56-smaller" type="button">
                         <span style="vertical-align:middle; padding-bottom:1vh; height:1vh;">–</span>
                     </button>
+                    <button id="anim_faster" class="button-56-smaller" type="button">
+                        <span style="vertical-align:middle; padding-bottom:1vh; height:1vh;">+</span>
+                    </button>
                 </div>
                 <!-- SWITCH per attivare e disattivare i numeri nella relazione -->
                 <div style="position:absolute; bottom:4.2vh; width:100%; height:fit-content; left:50%; transform:translate(-50%, 50%); text-align:center;">

style.css

@@ -298,14 +298,6 @@ input:checked + .slider:before {
     height: 3.15vw;
     transform: translateY(-0.5vh);
 }
-/*
-.animation_btn_img:hover {
-    display: block;
-    position: absolute;
-    transform: translate(0, -1vw);
-    transition: transform .2s ease-out;
-}
-*/
 .animation_btn_img:hover {
     transform: translateY(-0.2vh);
 }
@@ -323,11 +315,6 @@ input:checked + .slider:before {
     padding: 0px;
 }
 
-/*
-body{
-    font-family: 'Exo', sans-serif;
-}
-*/
 
 .context {
     width: 100%;
@@ -344,8 +331,6 @@ body{
 
 
 .area{
-    /*background: #4e54c8;  
-    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  */
     width: 100%;
     height:100vh;
 
@@ -367,7 +352,6 @@ body{
     list-style: none;
     width: 20px;
     height: 20px;
-    /*background: rgba(255, 255, 255, 0.2);*/
     background: #80d1dd7f;
     animation: animate 25s linear infinite;
     bottom: -150px;