Replace Webpack by Vite

fd4c8e63 · Alexis Faizeau · 6e9e4ed2 · fd4c8e63 · fd4c8e63 · fd4c8e63
Commit fd4c8e63 authored May 31, 2022 by Alexis Faizeau
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -15,9 +15,6 @@ jobs:
      - name: Checkout
        uses: actions/checkout@v3

-      - name: Optimize map
-        uses: thecodingmachine/map-optimizer-action@master
-
      - uses: actions/setup-node@v3
        with:
          node-version: '16.x'
@@ -29,27 +26,13 @@ jobs:
      - name: "Build scripts"
        run: npm run build

-      - name: "Move scripts"
-        run: mv dist/* .
-
-      - name: Bash
-        if: github.ref == 'refs/heads/master'
-        run: |
-          ls -al
-          git config --global --add safe.directory "$GITHUB_WORKSPACE"
-          git config --global user.email "d.negrier@thecodingmachine.com"
-          git config --global user.name "David Négrier"
-          git checkout master
-          git add .
-          git commit -am "Adding files"
-
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v3
        if: github.ref == 'refs/heads/master'
        with:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages # The branch the action should deploy to.
-          FOLDER: . # The folder the action should deploy.
+          FOLDER: dist/ # The folder the action should deploy.
          BASE_BRANCH: master

      - name: Bash2

--- a/.gitignore
+++ b/.gitignore
-/node_modules/
-yarn.lock
\ No newline at end of file
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@@ -6,13 +6,27 @@ This is a starter kit to help you build your own map for [WorkAdventure](https:/

 To understand how to use this starter kit, follow the tutorial at [https://workadventu.re/map-building](https://workadventu.re/map-building).

+## Structure
+* **assets** : All tilesets
+* **src** : All TypeScript/Javascript scripts
+* **map.json** : Map file
+* **map.png** : Image displayed on README.md and on the map infos in-game
+
+If you want to use more than one map file, just add the new map file in the root folder, your tilesets in the assets folder and a new script if you need it in the src folder (it will be automaticaly optimized in production).
+
 ## Installation

 With npm installed (comes with [node](https://nodejs.org/en/)), run the following commands into a terminal in the root directory of this project:

 ```shell
 npm install
-npm run start
+npm run dev
+```
+
+## Test optimized map
+You can test the optimized map as you do in production:
+```sh
+npm run preview
 ```

 ## Licenses

--- a/src/assets/TCM_Logo.png
+++ b/src/assets/TCM_Logo.png
--- a/src/assets/WA_Decoration.png
+++ b/src/assets/WA_Decoration.png
--- a/src/assets/WA_Exterior.png
+++ b/src/assets/WA_Exterior.png
--- a/src/assets/WA_Logo_Long.png
+++ b/src/assets/WA_Logo_Long.png
--- a/src/assets/WA_Logo_Short.png
+++ b/src/assets/WA_Logo_Short.png
--- a/src/assets/WA_Miscellaneous.png
+++ b/src/assets/WA_Miscellaneous.png
--- a/src/assets/WA_Old_Logo_Long.png
+++ b/src/assets/WA_Old_Logo_Long.png
--- a/src/assets/WA_Old_Logo_Short.png
+++ b/src/assets/WA_Old_Logo_Short.png
--- a/src/assets/WA_Other_Furniture.png
+++ b/src/assets/WA_Other_Furniture.png
--- a/src/assets/WA_Room_Builder.png
+++ b/src/assets/WA_Room_Builder.png
--- a/src/assets/WA_Seats.png
+++ b/src/assets/WA_Seats.png
--- a/src/assets/WA_Special_Zones.png
+++ b/src/assets/WA_Special_Zones.png
--- a/src/assets/WA_Tables.png
+++ b/src/assets/WA_Tables.png
--- a/src/assets/WA_User_Interface.png
+++ b/src/assets/WA_User_Interface.png
--- a/index.html
+++ b/index.html
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="robots" content="noindex">
    <meta name="title" content="WorkAdventure Starter Kit">

-    <link href="src/style.css" rel="stylesheet">
    <link rel="icon" href="https://workadventu.re/favicon-96x96.png">
    <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
    <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
    <title>WorkAdventure Starter Kit</title>
-
    <script>
        window.onload = function () {
            const host = window.location.host;
@@ -33,11 +32,156 @@

        };
    </script>
+    <style>
+        body {
+            font-size: 16px;
+            font-family: 'Open Sans', sans-serif;
+            max-width: 800px;
+            margin: auto !important;
+            text-align: center;
+        }
+
+        h1,
+        h2 {
+            font-weight: bold;
+        }
+
+        header {
+            margin: 30px;
+        }
+
+        header .logo {
+            display: block;
+            position: relative;
+        }
+
+        header .logo img {
+            display: block;
+            width: 500px;
+            margin: auto;
+            text-align: center;
+        }
+
+        main {
+            margin-bottom: 30px;
+        }
+
+        .socials img {
+            width: 30px;
+            height: 30px;
+        }
+
+        .socials>a {
+            display: inline-block;
+            margin: 20px 5px;
+        }
+
+        .content {
+            width: 100%;
+            position: relative;
+            z-index: 99999;
+        }
+
+        .content>h2 {
+            padding: 1rem 5vw;
+            max-width: 1200px;
+        }
+
+        a.button {
+            display: inline-block;
+            padding: 13px 20px 12px;
+            background: rgba(20, 48, 76, 0.9);
+            color: white;
+            font-weight: bold;
+            text-transform: uppercase;
+            text-decoration: none;
+            text-align: center;
+            width: auto;
+            position: relative;
+            font-size: 1.8em;
+            margin-top: 2rem;
+        }
+
+        a.button:hover {
+            top: -3px;
+            background: rgba(20, 48, 76);
+            cursor: pointer;
+            color: white;
+        }
+
+
+        .maps {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+
+        .map {
+            width: 30%;
+            margin-bottom: 3%;
+            min-width: 200px;
+        }
+
+        .map a,
+        .map img {
+            width: 100%;
+            display: block;
+        }
+
+        .map a.button {
+            display: inline-block;
+            width: auto;
+            margin: 1rem auto;
+        }
+
+        .url {
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 14px;
+        }
+
+        footer {
+            display: block;
+            font-size: 1.2em;
+            padding: 2rem 5vw;
+        }
+
+
+        /*/ MEDIA QUERIES START HERE /*/
+        @media (max-width: 768px) {
+            /* Hand Held Device */
+
+            body {
+                font-size: 13px;
+            }
+
+            .logo img {
+                width: 60vw;
+            }
+
+            .content {
+                padding: 1rem;
+            }
+
+            .maps {
+                gap: 1rem;
+            }
+
+            .map {
+                width: 47%;
+                margin-bottom: 3%;
+                min-width: 200px;
+            }
+
+        }
+    </style>
 </head>
+
 <body>
    <header>
        <div class="logo">
-            <a href="https://workadventu.re/" target="_blank" title="workadventure"><img src="https://workadventu.re/images/general/logo.svg" alt="WorkAdventure logo"/></a>
+            <a href="https://workadventu.re/" target="_blank" title="workadventure"><img
+                    src="https://workadventu.re/images/general/logo.svg" alt="WorkAdventure logo" /></a>
        </div>
    </header>
    <main>
@@ -66,8 +210,10 @@
                </div>

                <div class="help">
-                    <a href="https://www.youtube.com/watch?v=lu1IZgBJJD4&list=PL7jmrMKZfjCnz36FvezxJ-Tshuh3Zz-nc&ab_channel=WorkAdventure" class="nes-btn is-primary" target="_blank">Watch tutorials</a>
-                    <a href="https://discord.gg/G6Xh9ZM9aR" class="nes-btn is-primary" target="_blank">Talk to the community</a>
+                    <a href="https://www.youtube.com/watch?v=lu1IZgBJJD4&list=PL7jmrMKZfjCnz36FvezxJ-Tshuh3Zz-nc&ab_channel=WorkAdventure"
+                        class="nes-btn is-primary" target="_blank">Watch tutorials</a>
+                    <a href="https://discord.gg/G6Xh9ZM9aR" class="nes-btn is-primary" target="_blank">Talk to the
+                        community</a>
                </div>
            </div>
        </div>
@@ -88,4 +234,5 @@
    </main>
    <footer><a href="https://workadventu.re/" target="_blank" title="workadventu.re">&copy; WorkAdventure</a></footer>
 </body>
+
 </html>
\ No newline at end of file
--- a/map.json
+++ b/map.json
--- a/package-lock.json
+++ b/package-lock.json