Merge pull request #7 from Techbot/drupal_user_create

Automatically create and authenticate Drupal users from Discord users

Author: Techbot

Diff for: .gitignore

@@ -1,6 +1,7 @@
 .vscode
+.DS_Store
+.env*
 
-/config/
 /vendor/
 
 # Assets and user uploads
@@ -11,6 +12,7 @@
 
 # mine
 tiled
+server/.env*
 server/lib
 server/reports
 server/arena.config.ts
@@ -25,7 +27,6 @@ client/.parcel-cache
 client/src/game/backend.ts
 client/src/assets/fonts/*
 
-node_modules
 LICENSE.md
 
 config_init
@@ -36,6 +37,3 @@ _phaser_server
 _phaser_client
 
 public/
-
-server/.env*
-

Diff for: README.md

@@ -23,48 +23,98 @@
 * [The Eclectic Meme Conspiracy Online - Game Scripts](https://docs.google.com/document/d/1rdpK02PXfvUjwQLJgLXHzOeSbtBHymMo8Wq35UMY42s/)
 * [The Eclectic Meme Conspiracy - Game Information](https://docs.google.com/spreadsheets/d/18frZlc8CwXpQ6V0slhlR1qcUyX5OijrPhJUCGY2S6hw/edit#gid=1469334051)
 
-### Steps to build a world from the engine.
+## Installation
 
 #### Drupal Setup
 * Install Drupal (Minimal Install)
-* Download required modules (Paragraphs, Flag, Profile, Registration Role)
+* Download required modules (Paragraphs, Flag, Profile, Registration Role, Rest API Auth)
 
-`composer require 'drupal/profile:^1.10' 'drupal/paragraphs:^1.17' 'drupal/flag:^4.0@beta' 'drupal/registration_role:^2.0'`
+`composer require 'drupal/profile:^1.10' 'drupal/paragraphs:^1.17' 'drupal/flag:^4.0@beta' 'drupal/registration_role:^2.0' 'drupal/rest_api_authentication:^2.0' 'drupal/file_field_replace:^3.0'`
 
 * Helpful Drupal configurations:
   * Administration =>Appearance => Claro => Install and set as default
   * Administration => Extend => Toolbar
 
-* Clone Jigs into modules/custom/jigs or
-* Install Drupal/Jigs
+* Clone Jigs4Discord into modules/custom/jigs
+* Enable the required modules before installing the JiGS module (saves execution time)
+  * The JiGS Dependencies module is included for convenience.
+* Install the JiGS module
 * Install the default content - https://github.com/Techbot/JiGS-demo-content
   * If you followed these instructions, all you need to do is turn on the module.
 * Clone assets into /web/assets/ - https://github.com/Techbot/JiGS-demo-assets
+* Go to Configuration => JSON:API and accept all operations
+* Go to Configuration => API Authentication Configuration
+  * Enable Authentication
+  * Choose API Key Authentication
+  * Generate New API Key
+  * You will need to assign the Administrator role to the user you want to use for API access
+* For some hosting scenarios, you may need to configure your CORS settings on both Drupal main and the /assets folder.
+  * Configure /sites/default/default.services.yml
+  * Add an .htaccess to /assets
+
 
 #### Colyseus Setup
 * cd into modules/custom/jigs/server
 * `npm install`
 * copy src/services/db_SETUP.ts into src/services/db.ts and configure
 * Copy example.env to .env and configure
-* npm run start
+* Add your administrator username and the API key from the previous section
 
 #### Phaser Setup
 * cd into modules/custom/jigs/client
-* Copy example.env to .env and configure
+* Copy example.env.* to .env.* and configure
 * `npm install`
-* `npm run build`
-* Copy the css & js paths into modules/custom/jigs/jigs.libraries.yml and increment the version number
-* Run `npm run start`
-* In a new tab, run `npm tunnel`
-* Put the cloudflared URL into your Discord app's OAuth and URL Mappings
-* Test your new Discord app!
 
-#### Testing Drupal Setup
+## Testing
+Steps to do rapid development and testing without the need to build the client and bundle into Drupal for every code change.
+
+### Local Development
+* Add a fake discord_id to your user account in Drupal (i.e. 12345)
+* Set your client's .env.development Drupal URLs to /drupal
+* In server run `npm run start`
+* In client run `npm run start`
+* In your browser, open http://localhost:5173/?discord_id=12345
+* You should see the game running and the HUD populated with your user information
+* Click in and you should be able to run around on the map!
+
+### Discord Testing
+* In client run `npm run tunnel`
+* In your Discord configuration:
+  * URL Mappings: / = tunnel URL
+  * OAuth2: Redirects = tunnel URL
+* Run your Discord activity and you should be able to run around on the map!
+
+## Production
+Steps to bundle the client into Drupal and deploy the servers to a cloud provider.
+
+### Local Setup
+* Set your client's .env.production Drupal URLs to blank
+  * Optionally point assets URL at a CDN server 
+* In client run `NODE_ENV=production && npm run build`
+* Copy the css & js paths into modules/custom/jigs/jigs.libraries.yml and increment the version number
+* In server run `npm run start`
 * In Drupal, go to Administration => Configuration => Development => Performance and clear all caches
 * Go to the home page and verify that the game is running
-  * Note: You might need to configure your webserver to route wildcard hostnames through to your Drupal folder!
 
-#### World Setup
+### Tunnel
+* If you have necessary ports open (80,2567), you can just run:
+  * `cloudflared tunnel --url http://localhost`
+  * Server URL will be tunnel:2567
+  * Drupal URL will be tunnel (or tunnel:8080 or however you have Apache configured)
+* If you need to tunnel to servers individually you can run:
+  * In server run `npm run tunnel`
+  * For Drupal run `cloudflared tunnel --url http://localhost`
+* Note: You might need to configure your webserver to route wildcard hostnames through to your Drupal folder!
+
+### Discord
+* In your Discord configuration:
+  * OAuth2: Redirects = Server URL 
+  * URL Mappings:
+    * / = Drupal URL
+    * /api = Server URL
+    * OAuth2: Redirects = Server URL
+
+## World Setup
 * Design the content (Drupal) see  https://www.emc23.com/jigs-drupal-and-content-modelling
 * Design relationships between the above content data and the players (mysql queries dropped into a folder triggered by the heartbeats- aka Agenda.js)
 

Diff for: client/example.env

@@ -0,0 +1,11 @@
+# Rename this from example.env to .env
+VITE_DISCORD_CLIENT_ID=PASTE_OAUTH2_CLIENT_ID_HERE
+
+# Change to /drupal if you want to use vite server config
+# Change to blank when you're ready to bundle directly into Drupal assets
+# Useful for scaling Drupal and Jigs separately and hosting assets on a CDN
+VITE_DRUPAL_URL=/drupal
+VITE_ASSETS_URL=/drupal
+
+# Used in the vite.config.js for configuring the /drupal path above in the Vite server
+VITE_FULL_DRUPAL_URL=http://localhost

Diff for: client/example.env.development

@@ -0,0 +1,12 @@
+# Rename this from example.env to .env
+VITE_DISCORD_CLIENT_ID=PASTE_OAUTH2_CLIENT_ID_HERE
+
+# Change to /drupal if you want to use vite server config
+# Change to blank when you're ready to bundle directly into Drupal assets
+# Useful for scaling Drupal and Jigs separately and hosting assets on a CDN
+VITE_DRUPAL_URL=
+VITE_ASSETS_URL=
+
+# Used in the vite.config.js for configuring the /drupal path above in the Vite server
+# Not used if you bundle static assets directly into Drupal
+VITE_FULL_DRUPAL_URL=http://localhost

Diff for: client/example.env.production

@@ -49,6 +49,7 @@
     "d3-org-chart": "^2.7.0",
     "gauge": "^5.0.1",
     "phaser": "3.55.2",
+    "phaser-animated-tiles": "^2.0.2",
     "phaser3-rex-plugins": "1.1.85",
     "pinia": "2.0.33",
     "pixi.js": "^8.1.0",

Diff for: client/package.json

@@ -1,5 +1,4 @@
 <script>
-import axios from "axios";
 import * as coreui from '@coreui/coreui'
 import { CButton } from '@coreui/vue'
 import { useJigsStore } from "./stores/jigs.ts";

Diff for: client/src/App.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import axios from 'axios';
 export default {
   name: "ChatBox",
   data() {

Diff for: client/src/components/messenger/ChatBox.vue

@@ -1,5 +1,5 @@
 <script>
-import axios from "axios";
+import {jigsGet} from '../../utils/JigsAPI.ts';
 import { useJigsStore } from "../../stores/jigs.ts";
 import * as coreui from '@coreui/coreui'
 import draggable from 'vuedraggable';
@@ -22,11 +22,6 @@ export default {
   },
   mounted() {
     this.jigs = useJigsStore();
-    /*     axios
-          .get("/mystorage?_wrapper_format=drupal_ajax")
-          .then((response) => {
-         // this.jigs.playerStorage = response.data[0].value["playerStorage"].storeItems;
-          }); */
     this.jigs.myInventory();
   },
   computed: {
@@ -42,16 +37,14 @@ export default {
       this.list = [{ name: "Edgard", id: id++ }];
     },
     addToStorage: function () {
-      axios
-        .get("/tostorage?_wrapper_format=drupal_ajax&id=" +  this.jigs.item)
+      jigsGet("tostorage?_wrapper_format=drupal_ajax&id=" +  this.jigs.item)
         .then((response) => {
           this.jigs.divideInventory(response);
         });
       console.log("Storage : " +  this.jigs.item);
     },
     addToBackpack: function () {
-      axios
-        .get("/tobackpack?_wrapper_format=drupal_ajax&id=" +  this.jigs.item)
+      jigsGet("tobackpack?_wrapper_format=drupal_ajax&id=" +  this.jigs.item)
         .then((response) => {
           this.jigs.divideInventory(response);
         });

Diff for: client/src/components/pages/Inventory.vue

@@ -1,5 +1,4 @@
 <script>
-import axios from "axios";
 import { useJigsStore } from "../../stores/jigs.ts";
 export default {
   setup() {
@@ -31,14 +30,6 @@ export default {
       this.timestamp = dateTime;
     }
   }
-  // mounted() {
-  //    this.jigs = useJigsStore();
-  //   axios
-  //     .get("/mylogs?_wrapper_format=drupal_ajax")
-  //     .then((response) => {
-  //       this.jigs.playerLogs = response.data[0].value["playerLogs"];
-  //     });
-  // }
 }
 </script>
 

Diff for: client/src/components/pages/Logs.vue

@@ -1,5 +1,5 @@
 <script>
-import axios from "axios";
+import {jigsGet} from '../../utils/JigsAPI.ts';
 import { useJigsStore } from "../../stores/jigs.ts";
 import * as coreui from '@coreui/coreui'
 export default {
@@ -19,8 +19,7 @@ export default {
   },
   mounted() {
      this.jigs = useJigsStore();
-    axios
-      .get("/mymissions?_wrapper_format=drupal_ajax")
+    jigsGet("mymissions?_wrapper_format=drupal_ajax")
       .then((response) => {
         this.jigs.playerQuests = response.data[0].value["playerMissions"];
         console.log(this.jigs.playerQuests)

Diff for: client/src/components/pages/Quests.vue

@@ -1,14 +1,13 @@
 <script>
-import axios from 'axios'
+import {jigsGet} from '../../utils/JigsAPI.ts';
 export default {
   data() {
     return {
       posts: []
     }
   },
   mounted() {
-    axios
-      .get('/mydata?_wrapper_format=drupal_ajax')
+    jigsGet('mydata?_wrapper_format=drupal_ajax')
       .then((response) => {
         this.posts = response.data[0].value
       })
@@ -17,10 +16,7 @@ export default {
     formSubmit(e) {
       e.preventDefault();
       let currentObj = this;
-      axios.get('/mydata?_wrapper_format=drupal_ajax', {
-        name: this.name,
-        description: this.description
-      })
+      jigsGet(`mydata?_wrapper_format=drupal_ajax&name=${this.name}&description=${this.description}`)
         .then(function (response) {
           currentObj.posts = response.data[0].value
         })

Diff for: client/src/components/tabs/Log.vue

@@ -11,7 +11,7 @@ export default class Layers {
        this.jigs = useJigsStore();
     }
 
-    loadLayers(scene: Phaser.Scene) {
+    loadLayers(scene: Phaser.Scene & { animatedTiles: any; colliderMap: any; }) {
 
 
 console.log('********* load Layers *********')
@@ -35,12 +35,11 @@ console.log('********* load Layers *********')
             map.addTilesetImage(image);
         }, this);
 
-        // @TODO figure out why collidermap doesn't exist
-        //scene.colliderMap = map.createLayer('Tile Layer 1', this.jigs.tilesetArray_1).setDepth(1);
+        scene.colliderMap = map.createLayer('Tile Layer 1', this.jigs.tilesetArray_1).setDepth(1);
         map.createLayer('Tile Layer 2', this.jigs.tilesetArray_2).setDepth(2).setPipeline('Light2D');
         map.createLayer('Tile Layer 3', this.jigs.tilesetArray_3).setDepth(3).setPipeline('Light2D');
         map.createLayer('Tile Layer 4', this.jigs.tilesetArray_4).setDepth(5).setPipeline('Light2D');
-       // scene.animatedTiles.init(map);
+        scene.animatedTiles.init(map);
 
     }
 }

Diff for: client/src/game/entities/layers.ts

@@ -1,7 +1,7 @@
 /**
  * ------- Mission Dialog ---------
  */
-import axios from "axios";
+import {jigsGet} from '../../utils/JigsAPI.ts';
 //import WebFont from '../../assets/WebFont.ts'
 
 export default class Mission {
@@ -127,8 +127,7 @@ export default class Mission {
 
 function sendPositive(data) {
   console.log("this is me sending a value: " + data.value);
-  axios
-    .get("/addmission?_wrapper_format=drupal_ajax&id=" + data.value)
+  jigsGet("addmission?_wrapper_format=drupal_ajax&id=" + data.value)
     .then((response) => {
       console.log("this is me receiving a value: " + response);
     });

Diff for: client/src/game/entities/mission.ts

@@ -13,7 +13,7 @@ export default class Mob extends Phaser.Physics.Arcade.Sprite {
         super(scene, 0, 0, null);
 
 
-        scene.children.add(this).play('Zombie-Green-stop-default', true);
+        scene.children.add(this).play('Zombie-Green-walk-default', true);
 
         //scene.add.sprite(0, 0).play('Zombie-Green-hurt-default',true);
         // this.jigs = useJigsStore();

Diff for: client/src/game/entities/mob.ts

@@ -2,7 +2,7 @@
  * -------NPC ---------
  */
 import Phaser from "phaser";
-import axios from "axios";
+import {jigsGet} from '../../utils/JigsAPI.ts';
 
 export default class Npc extends Phaser.Physics.Arcade.Sprite {
     jigs: any;
@@ -25,8 +25,7 @@ export default class Npc extends Phaser.Physics.Arcade.Sprite {
     onNPCDown(npc, scene) {
         console.log("who" + npc);
         if (npc[5] == 1) {
-            axios
-                .get("/mymission?_wrapper_format=drupal_ajax&npc=" + npc[6])
+            jigsGet("mymission?_wrapper_format=drupal_ajax&npc=" + npc[6])
                 .then((response) => {
                     console.log("why ");
 

Diff for: client/src/game/entities/npc.ts

@@ -3,7 +3,7 @@
  */
 import Npc from "./npc.ts";
 import { useJigsStore } from '../../stores/jigs.ts';
-import axios from "axios";
+import {jigsGet} from '../../utils/JigsAPI.ts';
 
 export default class NPCs {
   jigs: any;
@@ -46,8 +46,7 @@ export default class NPCs {
   }
   onNPCDown(npc, self) {
     if (npc[5] == 1) {
-      axios
-        .get("/mymission?_wrapper_format=drupal_ajax&npc=" + npc[6])
+      jigsGet("mymission?_wrapper_format=drupal_ajax&npc=" + npc[6])
         .then((response) => {
           console.log("");
           self.scene.hydrateMission(response);