Merge branch 'release/v2.0.0-beta.12'

README.md

@@ -2,16 +2,17 @@
 > Livecoding is a desktop appliaction where newbies can learn the basics of programmation.
 > The principle is simple : You write commands in the in-app editor, press send, and the commands will interact the a little game (like pacman).
 
-## Changelog - v2.0.0-beta.11
+## Changelog - v2.0.0-beta.12
 
 *This version is unstable - do not use in production !*
 
 **Client :**
-- Add save button to download the content editor into a file.
-- Add import button to load a file into the editor content
+- Little UI impovments
+- Disable language changes dropdown and game loading button when a process is running
+- Update websocket protocol error codes to match specs
 
 **Processor :**
-- Update on the synchronisation procedure between processor and languages process.
+- Update websocket protocol error codes to match specs
 
 **Pokedash game :**
 The legacy game shipped with livecoding is deprecated, the new default game are developped in his dedicated repo : [LiveCoding-Pokedash-Game](https://github.com/CPNV-ES/LiveCoding-Pokedash-Game).

client/src/components/console/ConsoleBox.vue

@@ -11,6 +11,15 @@ export default {
     ...mapState({
       messages: state => state.console.messages
     })
+  },
+  updated () {
+    this.$nextTick(() => this.scrollToEnd())
+  },
+  methods: {
+    scrollToEnd: function () {
+      // scroll to the start of the last message
+      this.$el.scrollTop = this.$el.lastElementChild.offsetTop
+    }
   }
 }
 </script>

client/src/components/editor/EditorMenu.vue

@@ -25,6 +25,14 @@ export default {
       set (value) {
         this.$store.commit('UPDATE_EDITOR_LANGUAGE', value)
       }
+    },
+    running: {
+      get () {
+        return this.$store.state.processor.running
+      },
+      set (value) {
+        this.$store.commit('SET_PROCESS_RUNNING_STATE', value)
+      }
     }
   },
   methods: {
@@ -34,7 +42,7 @@ export default {
     ]),
     async run () {
       try {
-        this.loader = true
+        this.running = true
         // Launch the process execution, and wait the end the execution
         await this.$store.dispatch('run')
       } catch (e) {
@@ -47,7 +55,7 @@ export default {
           duration: 4500
         })
       } finally {
-        this.loader = false
+        this.running = false
       }
     },
     stop () {
@@ -69,6 +77,7 @@ export default {
           <select
             v-model="language"
             class="spacing"
+            :disabled="running"
           >
             <option
               v-for="(lang, index) in gameManager.provider.gameInterpreters"
@@ -90,7 +99,7 @@ export default {
       >
         <button
           class="button is-primary"
-          :class="{ 'is-loading': loader }"
+          :class="{ 'is-loading': running }"
           :disabled="!gameLoaded"
           @click="run"
         >
@@ -102,7 +111,7 @@ export default {
       </div>
       <!-- STOP SCRIPT EXECUTION IN CASE OF PROBLEM - Showed only when process running -->
       <div
-        v-if="loader"
+        v-if="running"
         class="control"
         title="Stoppez l'execution du script"
       >

client/src/components/game/GameActionsButtons.vue

@@ -8,7 +8,8 @@ import { mapState } from 'vuex'
 export default {
   computed: {
     ...mapState({
-      loading: state => state.game.loading
+      loading: state => state.game.loading,
+      running: state => state.processor.running
     })
   },
   methods: {
@@ -56,7 +57,7 @@ export default {
         <button
           class="button is-warning"
           :class="{ 'is-loading': loading }"
-          :disabled="loading"
+          :disabled="running || loading"
           @click="reload()"
         >
           <span class="icon is-left">

client/src/components/game/GameSettingsBox.vue

@@ -7,7 +7,8 @@ import { mapState, mapGetters } from 'vuex'
 export default {
   computed: {
     ...mapState({
-      loading: state => state.game.loading
+      loading: state => state.game.loading,
+      running: state => state.processor.running
     }),
     ...mapGetters({
       shareUrl: 'shareUrl'
@@ -116,8 +117,8 @@ export default {
           <p class="control">
             <button
               class="button is-primary"
-              :disabled="loading"
               :class="{ 'is-loading': loading }"
+              :disabled="running || loading"
               @click="load()"
             >
               Load
@@ -144,6 +145,7 @@ export default {
               class="input"
               type="text"
               placeholder="URL du jeux"
+              readonly
             >
             <span class="icon is-small is-left">
               <i class="fas fa-share-square" />

client/src/game/providers/Provider.js

@@ -70,7 +70,7 @@ export default class Provider {
    * @return {String}
    */
   get assetsBasePath () {
-    return `${this.url}/${this.manifest.data.assets}/`
+    return `${this.url}/${this.manifest.data.assets}`
   }
 
   /**

client/src/processor/ExternalWebSocketProcessorProxy.js

@@ -50,9 +50,16 @@ export class ExternalWebSocketProcessorProxy {
                     this.dispatch('console/success', 'Processor successfully loaded script, launching process.')
                     this.dispatch('console/info', 'Waiting for engine interactions')
                     this.socket.onmessage = async (mEvent) => {
+                      // Check message content to determine action to execute
                       // Evaluate the command in the game context
-                      if (mEvent.data === 'close game') {
+                      if (mEvent.data === 'CLOSE_GAME') {
+                        console.log('CLOSE_GAME')
                         this.socket.close()
+                      } else if (mEvent.data === 'CLOSE_GAME_WITH_WEBSOCKET_ERRORS') {
+                        console.log('CLOSE_GAME_WITH_WEBSOCKET_ERRORS')
+                        this.socket.close()
+                      } else if (mEvent.data.startsWith('PROCESS_ERROR')) {
+                        this.dispatch('console/error', mEvent.data.substring(13))
                       } else {
                         let tutu = await window.game.executeGameCommand(mEvent.data)
                         this.socket.send(tutu)

client/src/store/mutations.js

@@ -82,5 +82,12 @@ export default {
    */
   SET_GAME_LOADING_STATE: (state, value) => {
     state.game.loading = value
+  },
+  /**
+   * Set the game loading state
+   * @param {boolean} value
+   */
+  SET_PROCESS_RUNNING_STATE: (state, value) => {
+    state.processor.running = value
   }
 }

client/src/store/state.js

@@ -33,6 +33,7 @@ export default {
     }
   },
   processor: {
+    running: false,
     url: localStorage.getItem('processor-url') || 'ws://localhost:12800/'
   },
   /**

docs/README.md

@@ -21,6 +21,7 @@ Live coding is built arround two main blocks :
 
 ### Server side processor
 
+* [Introduction](./server/intro.md)
 * [The processor](./server/processor.md)
 * [Engines](./server/engines.md)
 

docs/server/intro.md

@@ -0,0 +1,8 @@
+# Intro
+
+The LiveCoding server handles all the requests of a customer connected through a websocket.
+In detail, the server allows executing the client code to perform a game and interacting with it through a proxy server.
+The server must:
+    - get all game classes
+    - get the game engine
+    - execute the game using a server-proxy to iterate with the client

docs/server/languages.md

@@ -0,0 +1,25 @@
+# Create and Use a language
+The LiveCoding server allow you to create new languages to performe your game.
+
+## Language module
+LiveConding use a modular structure to integrate new languages. 
+You can find the languages module into "~/server/languages" folder.
+To be able to create and use a new language you must put it inside the language module.
+The module must have a very precise structure to be recognized and used.
+
+## How it work
+
+
+## How to create
+Create a new language module step by step
+
+### Create Folder
+First of all create a new folder called with the new language
+
+    par exampele: to create a new javascript language module:
+
+    mkdir /server/languages/javascript
+### 
+
+## How to use
+

server/core/process.py

@@ -57,7 +57,7 @@ async def proxyGame(self):
             if errorMsg.strip() != "none" and errorMsg.strip() != "":          
                 mlog.show("Process error.. Game has been stopped..")
                 mlog.show("Error message: " + errorMsg)
-                await self.socket.send("ERROR/" + errorMsg)                    # send the error to client
+                await self.socket.send("PROCESS_ERROR" + errorMsg)                    # send the error to client
                 self.process.terminate()                                       # stop the subprocess 
                 break       
 

server/main.py

@@ -16,9 +16,9 @@ async def game(websocket, path):
     mlog.show("New Client Connection")
     listen = Listen(websocket)
     if await listen.run():
-        await websocket.send("close game")
+        await websocket.send("CLOSE_GAME")
     else:
-        await websocket.send("close game with error")
+        await websocket.send("CLOSE_GAME_WITH_WEBSOCKET_ERRORS")
     mlog.show("Client Connection Closed")
 
 mlog.show("Starting Live Coding Server .... Wait")