Feat complete animation (#73)

Add complete animation in complete modal
Add 3-state-colors on map: 
- green: completed 
- gray: unlocked
- dark: locked
* haven’t add back v-if because the pc is out of power

tests/cypress/e2e/helloworld.cy.js

@@ -135,8 +135,8 @@ describe('example helloworld app', () => {
     it('Typing in Terminal', () => {
       cy.typeInCommand('12345{enter}')
       cy.get('@Terminaltextbox')
-        .should('contain', 'zsh: command not found: 12345')
-        .and('contain', '12345')
+        .should('contain', '12345')
+        .and('contain', 'zsh: command not found: 12345', { timeout: 50000 })
     })
     it('Complete the Game(relating UI)', () => {
       // get answersheet
@@ -185,7 +185,7 @@ describe('example helloworld app', () => {
         // Check survey dialog pop up
         cy.CheckTextElement('#QuestCompleted', '關卡完成！', 'Quest Completed!')
         cy.get('div[class="modal"]').find('p').should('be.visible')
-        cy.findByRole('link', { name: '填寫問卷' }).should('be.visible')
+        cy.get('#BacktoMap').should('contain', '回到地圖').and('be.visible')
       })
     })
   })

tests/cypress/support/commands.js

@@ -9,13 +9,21 @@ Cypress.Commands.add('LoginWithPassword', (username, password) => {
 })
 Cypress.Commands.add('PrepareForGame', () => {
   cy.visit('/')
+  // make sure the login page is loaded
+  cy.url().should('satisfy', (elements) => {
+    const text = elements
+    return text.includes('login') || text.includes('register')
+  })
   cy.LoginWithPassword(
     Cypress.env('defaultAccount'),
     Cypress.env('defaultPassword')
   )
+  // make sure the map page is loaded
   cy.url().should('include', '/map')
   cy.visit('/game/helloworld')
-  cy.get('.xterm-screen', { timeout: 10000 })
+  // make sure the game page is loaded
+  cy.url().should('include', '/game/helloworld')
+  cy.get('.xterm-screen', { timeout: 50000 })
     .as('Terminaltextbox')
     .should('be.visible')
   cy.CheckTextElement('#reset', '重來', 'Reset').click()
@@ -24,10 +32,6 @@ Cypress.Commands.add('PrepareForGame', () => {
     'contain',
     'commander:~ $'
   )
-  cy.get('@Terminaltextbox', { timeout: 150000 }).should(
-    'contain',
-    'commander:~ $'
-  )
 })
 Cypress.Commands.add('typeInCommand', (command) => {
   cy.get('.xterm-screen', { timeout: 150000 }).type(command)