Convert project to use nextjs

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 jobs:
   build:
     docker:
-      - image: circleci/node:10.16.2-browsers
+      - image: cimg/node:18.15.0-browsers
     working_directory: ~/repo
     steps:
       - checkout

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": ["next/core-web-vitals"],
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "requireConfigFile": false,
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  }
+}

.github/workflows/codeql-analysis.yml

@@ -28,7 +28,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: [ 'javascript' ]
+        language: [ 'javascript-typescript' ]
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
         # Learn more:
         # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
@@ -39,7 +39,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -50,7 +50,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -64,4 +64,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/nodejs.yml

@@ -4,21 +4,18 @@ on: [push]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
-        node-version: [8.x, 10.x, 12.x]
-
+        node-version: [16.x, 17.x, 18.x]
     steps:
     - uses: actions/checkout@v1
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
     - name: npm build
-      run: |
+      run:
         npm ci
         npm run build --if-present
     - name: Running unit tests

.gitignore

@@ -1,10 +1,40 @@
-build
-node_modules
-cordova
-.idea
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# env configuration
+# server/config.json
+# client/config.json
+
+# dependencies
+/server/node_modules
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+.next
+/out/
+
+# production
+/build
+
+# misc
 .DS_Store
-dump.rdb
-server/config.json
-data/config.json
-npm-debug.log
-.external-ecmascript.js
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

LICENSE

@@ -6,7 +6,7 @@ of the WTFAdventure. You can purchase one for only $25 from Creative Market:
 https://creativemarket.com/melissareneepohl/959421-Complete-Fantasy-Game-UI-kit 
 
 For Everything Else
-==================================
+=================================
 
               DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE 
                     Version 2, December 2004 

README.md

@@ -8,7 +8,9 @@ WTF?! Adventure is completely open-source, allowing its community to collaborate
 
 ### Features & Functionality
 
-- **Webpack:** Dev and prod config files and now utilizes browserSync for easier client side development. A new build folder is created that contains minified versions of the client side resources.
+- **NextJS:** Running on NextJS v13 and using App Router.
+
+- **Typescript:** Now using typescript ;D
 
 - **NodeJS:** Server has been updated to use nodemon for easier restarting and server development
 
@@ -67,15 +69,17 @@ WTF?! Adventure is completely open-source, allowing its community to collaborate
 
 Running the server is fairly straightforward, for the most part. If you already have everything installed and configured you can skip directly to step 3.
 
-### Step 1 - Install the dependencies
+### Step 1 - Install the client dependencies
 
 In the command line run: `npm install`
 
-### Step 2 - Setting the config files
+Open the `client/config.json` file and update the ports and settings to meet your needs.
+
+### Step 2 - Install the server dependencies
 
-Convert the server configuration for local usage, go in both `src/server/config.json` and `src/client/config.json` and update the ports and settings to meet your needs.
+In the command line run: `cd ./server && npm install`
 
-In `src/server/config.json` the **secretKey** should be a strong password that has been [base62 encoded](http://encode-base62.nichabi.com/).
+Open the `server/config.json` file and update the ports and settings to meet your needs. The **secretKey** should be a strong password that has been [base62 encoded](http://encode-base62.nichabi.com/).
 
 ### Step 3 - Install MySQL
 
@@ -101,23 +105,25 @@ Start MySQL and make sure it's running.
 
 In the command line type: `npm run wtfserver`
 
-### Step 6 - Run the HTML5 Client Webpack
+### Step 6 - Run the NextJS app
+
+If you've never run the project before then you need to build it first: `npm run build`
 
-Open another terminal and then type: `npm start`
+Once you have a build you can start the game using: `npm start`
 
 ### Step 7 - View in Browser
 
 Now open your browser and navigate to `http://{ip}:{port}/` as defined in your client configuration file. Typically this will be `http://localhost:3000` if you use the default webpack and client configuration settings provided.
 
 ## Troubleshooting
-* Typically errors with WTF Adventure are due to mysql connection or authentication issues in `src/server/config.json`.
+* Typically errors with WTF Adventure are due to mysql connection or authentication issues in `server/config.json`.
   * If you are using XAMPP or MAMP the correct default values are already configured for you
   * Check that MySQL is running
   * Check that your hostname, port number, user name, password and database are correct
   * Check that your secretKey is base62 encoded
-* Make sure you are running the correct IP and port in the client window in `src/client/config.json`
+* Make sure you are running the correct IP and port in the client window in `client/config.json`
   * If you are using MAMP or XAMPP the correct default values are already configured for you
 * Errors installing dependencies
   * When this happens you will need to look at the specific error you are getting from the dependency and try to resolve the issue
   * Sometimes these can be fixed by upgrading to the latest version or bumping back to a previous version
-  * Try searching on Stack Overflow or in the GitHub repo click on the issues tab for the NPM package causing the issue to see if there is a possible solution
+  * Try searching on Stack Overflow or in the GitHub repo click on the issues tab for the NPM package causing the issue to see if there is a possible solution

SECURITY.md

@@ -9,11 +9,10 @@ currently being supported with security updates.
 
 | Version | Supported          |
 | ------- | ------------------ |
-| < 7.x   | :x:                |
-| 8.x     | :white_check_mark: |
-| 10.x    | :white_check_mark: |
-| 12.x    | :white_check_mark: |
+| < 16.x  | :x:                |
+| 16.x    | :white_check_mark: |
+| 18.x    | :white_check_mark: |
 
 ## Reporting a Vulnerability
 
-Please create an issue if you notice a security problem and tag it with the Security label.
+Please create an issue if you notice a security problem and tag it with the Security label.

app/game/index.tsx

@@ -0,0 +1,55 @@
+import Canvas from '@/component/canvas';
+import ChatInput from '@/component/chatInput';
+import ChatBar from '@/component/chatBar';
+import WorldBar from '@/component/worldBar';
+import Bubbles from '@/component/bubbles';
+import Hud from '@/component/hud';
+import ButtonBar from '@/component/buttonBar';
+import DropDialog from '@/component/dropDialog';
+import Map from '@/component/map';
+import ProfileDialog from '@/component/profileDialog';
+import SettingsDialog from '@/component/settingsDialog';
+import Inventory from '@/component/inventory';
+import Bank from '@/component/bank';
+import Trade from '@/component/trade';
+import Enchant from '@/component/enchant';
+import AbilitiesBar from '@/component/abilitiesBar';
+import Notifications from '@/component/notifications';
+import PlayerActions from '@/component/playerActions';
+import ActionsDialog from '@/component/actionsDialog';
+
+const GamePage = () => {
+    return (
+        <div id="container">
+            <div id="border">
+                <Bubbles />
+                <div id="canvasLayers">
+                    <Canvas id="background" />
+                    <Canvas id="entities" />
+                    <Canvas id="foreground" />
+                    <Canvas id="cursor" />
+                    <Canvas id="textCanvas" />
+                </div>
+                <WorldBar />
+                <ChatBar />
+                <Hud />
+                <ButtonBar />
+                <ActionsDialog />
+                <PlayerActions />
+                <DropDialog />
+                <ProfileDialog />
+                <SettingsDialog />
+                <Map />
+                <Inventory />
+                <Bank />
+                <Trade />
+                <Enchant />
+                <AbilitiesBar />
+                <Notifications />
+                <ChatInput />
+            </div>
+        </div>
+    );
+}
+
+export default GamePage;

app/layout.tsx

@@ -0,0 +1,68 @@
+import '@/styles/globals.scss';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import config from '@/client/config.json' assert { type: 'json'};
+import Providers from '@/client/contexts/providers';
+
+const inter = Inter({ subsets: ['latin'] });
+const { title, description, keywords, developer, url, favicon, twitter } = config;
+
+export const metadata: Metadata = {
+  title,
+  applicationName: title,
+  description,
+  authors: [{ name: developer, url }],
+  publisher: developer,
+  generator: "Next.js",
+  metadataBase: new URL(url),
+  alternates: {
+    canonical: '/',
+    languages: {
+      'de-DE': '/de-DE',
+    },
+  },
+  keywords: keywords,
+  viewport: "width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0",
+  robots: "index,follow",
+  icons: [
+    {rel: "icon", url: favicon },
+    { rel: "apple-touch-icon", url: favicon }
+  ],
+  openGraph: {
+    type: "website",
+    title,
+    description,
+    siteName: title,
+    url: url,
+    images: [{
+      url: favicon,
+    }]
+  },
+  twitter: {
+    card: "summary_large_image",
+    site: twitter,
+    creator: twitter,
+    images: favicon
+  },
+  appleWebApp: {
+    capable: true,
+    title,
+    statusBarStyle: "black-translucent"
+  }
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>
+          {children}
+        </Providers>
+      </body>
+    </html>
+  )
+}