Skip to content

Commit

Permalink
Convert project to use nextjs (#101)
Browse files Browse the repository at this point in the history
* convert to nextjs
* chore: bump to v2
  • Loading branch information
design1online authored Oct 12, 2023
1 parent 7b79a8b commit a4800cb
Show file tree
Hide file tree
Showing 1,901 changed files with 17,679 additions and 32,718 deletions.
9 changes: 0 additions & 9 deletions .babelrc

This file was deleted.

2 changes: 1 addition & 1 deletion .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 0 additions & 14 deletions .eslintrc

This file was deleted.

14 changes: 14 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
8 changes: 4 additions & 4 deletions .github/workflows/codeql-analysis.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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.
Expand All @@ -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
Expand All @@ -64,4 +64,4 @@ jobs:
# make release

- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@v1
uses: github/codeql-action/analyze@v2
7 changes: 2 additions & 5 deletions .github/workflows/nodejs.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
48 changes: 39 additions & 9 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 16 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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
9 changes: 4 additions & 5 deletions SECURITY.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
55 changes: 55 additions & 0 deletions app/game/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
68 changes: 68 additions & 0 deletions app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
Empty file added app/page.module.css
Empty file.
Loading

0 comments on commit a4800cb

Please sign in to comment.