feat: start integration with gly the engine (#1)

* change: start use gridsystem
* change: add gly game engine

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: rodrigodornelles

.github/workflows/CD.yml

@@ -0,0 +1,36 @@
+name: cd
+
+env:
+  CLOUDFLARE_PROJECT_TRYLUA: ide-gly
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  pages:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'push' || github.event.pull_request.draft == false
+    steps:
+      - 
+        uses: actions/checkout@master
+      - 
+        run: |
+          npm install
+      - 
+        run: |
+          npm run build
+      - 
+        if: github.event_name == 'push' || github.event.pull_request.head.repo.full_name == github.repository || github.event_name == 'workflow_dispatch'
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: ${{ env.CLOUDFLARE_PROJECT_TRYLUA }}
+          directory: dist

package.json

@@ -1,7 +1,13 @@
 {
-  "name": "try-lua",
-  "main": "src/index.js",
+  "name": "@gamely/gly-ide",
+  "license": "MIT",
+  "homepage": "https://ide.gamely.com.br",
+  "repository": "https://github.com/gamelly/gly-ide",
+  "funding": "https://github.com/sponsors/RodrigoDornelles",
+  "bugs": "https://github.com/gamelly/gly-ide/issues",
   "devDependencies": {
+    "@gamely/gly-engine": "^0.0.7",
+    "@gamely/core-native-html5": "^0.0.7",
     "copy-webpack-plugin": "11.0.0",
     "css-loader": "6.7.3",
     "html-webpack-plugin": "5.5.0",
@@ -15,14 +21,5 @@
   "scripts": {
     "start": "webpack --mode=development --watch --progress",
     "build": "webpack --mode=production"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ceifa/try-lua.git"
-  },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/ceifa/try-lua/issues"
-  },
-  "homepage": "https://github.com/ceifa/try-lua#readme"
+  }
 }

src/assets/index.css

@@ -1,81 +1,58 @@
-html {
-    overflow: hidden;
-}
-
-html, body {
+*, *::after, *::before {
+    touch-action: none;
+    box-sizing: border-box;
+    border: 0;
+    padding: 0;
     margin: 0;
 }
 
 main {
-    font-family: "Cascadia Code";
-    display: flex;
-    align-items: stretch;
-    height: 100vh;
-    width: 100%;
-}
-
-pre {
-    font-family: "Cascadia Code";
-    margin: 0;
-    padding: 0;
-}
-
-@media (max-width: 1000px) {
-    main {
-        flex-direction: column;
-    }
+    display: grid;
+    width: 100vw;
+    height: 99.9vh;
+    overflow: hidden;
 }
 
-#editor {
-    flex: 1;
+#buttons {
+    grid-area: buttons;
 }
 
-.tip {
-    position: absolute;
-    bottom: 1em;
-    left: 1em;
-    z-index: 5;
-    color: white;
-    display: flex;
-    flex-direction: column;
+#output {
+    grid-area: output;
 }
 
-#current-action {
-    color: #888888;
-    margin-bottom: 1rem;
+#game {
+    grid-area: game;
+    background-color: black;
 }
 
-#output {
-    flex: 1;
-    background-color: rgb(13, 16, 30);
-    color: white;
-    padding: 10px;
-    overflow: auto;
+#editor {
+    grid-area: editor;
 }
 
-.github {
-    position: absolute;
-    bottom: 1em;
-    right: 1em;
-    z-index: 5;
+#game canvas {
+    width: 100%;
 }
 
-.github a {
-    color: wheat;
+@media (max-width: 700px) {
+    main {
+        grid-template-areas:
+            "buttons buttons"
+            "game output"
+            "editor editor";
+    }
 }
 
-@media (max-width: 1000px) {
-    #divider {
-        width: auto !important;
-        height: 4px;
+@media (min-width: 700px) {
+    #editor {
+        height: 90vh;
     }
-
-    .tip {
-        display: none;
+    main {
+        grid-template-columns: 2fr 2fr;
+        grid-template-rows: auto 1fr 1fr;
+        grid-template-areas:
+            "buttons buttons"
+            "editor game"
+            "editor output";
     }
 }
-
-#divider {
-    width: 4px;
-    background-color: #444444;
-}

src/default.lua

@@ -1,12 +1,31 @@
-function fibonacci(n)
-    local current, next = 0, 1
+local function init(std, game)
+end
 
-    for i = 1, n do
-        print(current)
-        current, next = next, current + next
-    end
+local function loop(std, game)
+end
 
-    return current
+local function draw(std, game)
+    std.draw.clear(std.color.blue)
+    std.draw.color(std.color.black)
+    std.draw.text(8 , 8, 'Hello world!')
 end
 
-fibonacci(20)
+local function exit(std, game)
+end
+
+local P = {
+    meta={
+        title='Hello world',
+        author='RodrigoDornelles',
+        description='say hello to the world!',
+        version='1.0.0'
+    },
+    callbacks={
+        init=init,
+        loop=loop,
+        draw=draw,
+        exit=exit
+    }
+}
+
+return P

src/index.html

@@ -6,35 +6,31 @@
     <meta charset="UTF-8">
     <meta name="description" content="Try Lua online">
     <link rel="icon" type="image/png" href="./assets/logo.png" />
-    <title>Lua Repl</title>
+    <title>IDE - Gly Game Engine</title>
     <link rel="preload" href="/assets/CascadiaMono.ttf" as="font" type="font/ttf" crossorigin>
     <style>
         @font-face {
             font-family: 'Cascadia Code';
             src: url(assets/CascadiaMono.ttf);
         }
     </style>
-    <script>
-        const paste = new URLSearchParams(window.location.search).get('paste');
-        if (paste) {
-            window.pasteFetch = fetch('https://api.ceifa.dev/document/' + paste)
-        }
-    </script>
 </head>
 
 <body>
     <main>
-        <div id="editor">
-            <div class="tip">
-                <span id="current-action"></span>
-                <span>Ctrl + E to execute</span>
-                <span>Ctrl + S to save</span>
-            </div>
-        </div>
-        <div id="divider"></div>
+        <div id="editor"></div>
         <div id="output"></div>
-        <div class="github">
-            <a href="https://github.com/ceifa/try-lua">Made with ❤️</a>
+        <div id="game">
+            <canvas id="gameCanvas"></canvas>
+        </div>
+        <div class="buttons">
+            <button id="btn-play">
+                <span>play</span>
+            </button>
+            <button id="btn-hot-reload">
+                <span>hot reload</span>
+                <input type="checkbox" disabled readonly></input>
+            </button>
         </div>
     </main>
     <link rel="stylesheet" href="./assets/index.css">