webpack
Alec
1
.gitignore
vendored
@@ -1,5 +1,6 @@
|
||||
.idea
|
||||
node_modules/*
|
||||
client/certs/
|
||||
client/dist/
|
||||
.vscode/launch.json
|
||||
package-lock.json
|
||||
|
||||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 274 B After Width: | Height: | Size: 274 B |
|
Before Width: | Height: | Size: 380 B After Width: | Height: | Size: 380 B |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 202 KiB After Width: | Height: | Size: 202 KiB |
|
Before Width: | Height: | Size: 162 KiB After Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 500 B After Width: | Height: | Size: 500 B |
|
Before Width: | Height: | Size: 3.9 KiB After Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 541 B After Width: | Height: | Size: 541 B |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 218 B After Width: | Height: | Size: 218 B |
|
Before Width: | Height: | Size: 844 B After Width: | Height: | Size: 844 B |
@@ -1,11 +1,9 @@
|
||||
import { defaultCards } from "../config/defaultCards.js";
|
||||
import { customCards } from "../config/customCards.js";
|
||||
import { DeckStateManager } from "../modules/DeckStateManager.js";
|
||||
import { XHRUtility } from "../modules/XHRUtility.js";
|
||||
import { Game } from "../model/Game.js";
|
||||
import { GameCreationStepManager } from "../modules/GameCreationStepManager.js";
|
||||
|
||||
export const create = () => {
|
||||
const create = () => {
|
||||
let deckManager = new DeckStateManager();
|
||||
let gameCreationStepManager = new GameCreationStepManager(deckManager);
|
||||
loadDefaultCards(deckManager);
|
||||
@@ -32,3 +30,9 @@ function loadCustomRoles(deckManager) {
|
||||
});
|
||||
deckManager.customRoleOptions = customCards;
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
module.exports = create;
|
||||
} else {
|
||||
create();
|
||||
}
|
||||
@@ -6,8 +6,9 @@ import {cancelCurrentToast, toast} from "../modules/Toast.js";
|
||||
import {GameTimerManager} from "../modules/GameTimerManager.js";
|
||||
import {ModalManager} from "../modules/ModalManager.js";
|
||||
import {stateBucket} from "../modules/StateBucket.js";
|
||||
import { io } from 'socket.io-client';
|
||||
|
||||
export const game = () => {
|
||||
const game = () => {
|
||||
let timerWorker;
|
||||
const socket = io('/in-game');
|
||||
socket.on('disconnect', () => {
|
||||
@@ -18,7 +19,7 @@ export const game = () => {
|
||||
});
|
||||
socket.on('connect', () => {
|
||||
socket.emit(globals.COMMANDS.GET_ENVIRONMENT, function(returnedEnvironment) {
|
||||
timerWorker = new Worker('../modules/Timer.js');
|
||||
timerWorker = new Worker(new URL('../modules/Timer.js', import.meta.url));
|
||||
prepareGamePage(returnedEnvironment, socket, timerWorker);
|
||||
});
|
||||
})
|
||||
@@ -366,3 +367,9 @@ function activateRoleInfoButton(deck) {
|
||||
ModalManager.displayModal('role-info-modal', 'role-info-modal-background', 'close-role-info-modal-button');
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
module.exports = game;
|
||||
} else {
|
||||
game();
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { XHRUtility } from "../modules/XHRUtility.js";
|
||||
import { toast } from "../modules/Toast.js";
|
||||
|
||||
export const home = () => {
|
||||
const home = () => {
|
||||
document.getElementById("join-form").onsubmit = (e) => {
|
||||
e.preventDefault();
|
||||
let userCode = document.getElementById("room-code").value;
|
||||
@@ -39,3 +39,9 @@ function attemptToJoinGame(code) {
|
||||
});
|
||||
}
|
||||
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||
module.exports = home;
|
||||
} else {
|
||||
home();
|
||||
}
|
||||
|
||||
@@ -533,7 +533,7 @@ label[for='moderator'] {
|
||||
|
||||
#game-link:hover {
|
||||
background-color: #26282a;
|
||||
border: 1px solid #d7d7d7;
|
||||
border: 2px solid #d7d7d7;
|
||||
}
|
||||
|
||||
.reveal-role-button {
|
||||
@@ -16,9 +16,6 @@
|
||||
<link rel="stylesheet" href="/styles/GLOBAL.css">
|
||||
<link rel="stylesheet" href="/styles/create.css">
|
||||
<link rel="stylesheet" href="/styles/modal.css">
|
||||
<link rel="stylesheet" href="/styles/third_party/dropdown.min.css">
|
||||
<link rel="stylesheet" href="/styles/third_party/transition.min.css">
|
||||
<link rel="stylesheet" href="/styles/third_party/search.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="navbar">
|
||||
@@ -88,10 +88,7 @@
|
||||
<!-- <input id="create-game" type="submit" value="Create"/>-->
|
||||
<!-- </form>-->
|
||||
</div>
|
||||
<script type="module">
|
||||
import { create } from "../scripts/create.js";
|
||||
create();
|
||||
</script>
|
||||
<script src="/dist/create-bundle.js"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script>
|
||||
const socket = io();
|
||||
@@ -69,11 +69,7 @@
|
||||
<p>Werewolf created by Andrew Plotkin</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module">
|
||||
import { game } from "../scripts/game.js";
|
||||
game();
|
||||
</script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/dist/game-bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -48,10 +48,7 @@
|
||||
<p>Werewolf created by Andrew Plotkin</p>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="module">
|
||||
import { home } from "./scripts/home.js";
|
||||
home();
|
||||
</script>
|
||||
<script src="/dist/home-bundle.js"></script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script>
|
||||
const socket = io();
|
||||
9
client/styles/third_party/dropdown.min.css
vendored
9
client/styles/third_party/search.min.css
vendored
9
client/styles/third_party/transition.min.css
vendored
33
client/webpack/webpack-dev.config.js
Normal file
@@ -0,0 +1,33 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
game: './client/src/scripts/game.js',
|
||||
home: './client/src/scripts/home.js',
|
||||
create: './client/src/scripts/create.js'
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../dist'),
|
||||
filename: "[name]-bundle.js"
|
||||
},
|
||||
mode: "development",
|
||||
node: false,
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.m?js$/,
|
||||
use: {
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: ["@babel/preset-env"], // ensure compatibility with older browsers
|
||||
plugins: ["@babel/plugin-transform-object-assign"], // ensure compatibility with IE 11
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: "webpack-remove-debug", // remove "debug" package
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
34
client/webpack/webpack-prod.config.js
Normal file
@@ -0,0 +1,34 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
game: './client/src/scripts/game.js',
|
||||
home: './client/src/scripts/home.js',
|
||||
create: './client/src/scripts/create.js'
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, '../dist'),
|
||||
filename: "[name]-bundle.js"
|
||||
},
|
||||
mode: "production",
|
||||
node: false,
|
||||
devtool: 'source-map',
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.m?js$/,
|
||||
use: {
|
||||
loader: "babel-loader",
|
||||
options: {
|
||||
presets: ["@babel/preset-env"], // ensure compatibility with older browsers
|
||||
plugins: ["@babel/plugin-transform-object-assign"], // ensure compatibility with IE 11
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: "webpack-remove-debug", // remove "debug" package
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
23
package.json
@@ -2,9 +2,14 @@
|
||||
"name": "werewolf_game",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "node server/main.js",
|
||||
"build:dev": "npx webpack --config client/webpack/webpack-dev.config.js --mode=development",
|
||||
"build:prod": "npx webpack --config client/webpack/webpack-prod.config.js --mode=production",
|
||||
"start:dev:linux": "NODE_ENV=development node server/main.js",
|
||||
"start:dev": "SET NODE_ENV=development && node server/main.js",
|
||||
"start:prod:linux": "NODE_ENV=production node server/main.js",
|
||||
"start:prod": "SET NODE_ENV=production && node server/main.js",
|
||||
"test": "jasmine && node browsertest.js openBrowser socket",
|
||||
"test:unit": "jasmine",
|
||||
"test:e2e": "node browsertest.js"
|
||||
@@ -15,9 +20,19 @@
|
||||
"express": "^4.17.1",
|
||||
"express-force-https": "^1.0.0",
|
||||
"jasmine": "^3.5.0",
|
||||
"socket.io": "^2.4.1"
|
||||
"socket.io": "^4.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"open": "^7.0.3"
|
||||
"@babel/core": "^7.16.5",
|
||||
"@babel/plugin-transform-object-assign": "^7.16.5",
|
||||
"@babel/preset-env": "^7.16.5",
|
||||
"babel-loader": "^8.2.3",
|
||||
"css-loader": "^6.5.1",
|
||||
"open": "^7.0.3",
|
||||
"socket.io-client": "^4.4.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"webpack": "^5.65.0",
|
||||
"webpack-cli": "^4.9.1",
|
||||
"webpack-remove-debug": "^0.1.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -92,18 +92,20 @@ app.use('/favicon.ico', (req, res) => {
|
||||
const router = require('./routes/router');
|
||||
app.use('', router);
|
||||
|
||||
app.use('/images', express.static(path.join(__dirname, '../client/images')));
|
||||
app.use('/scripts', express.static(path.join(__dirname, '../client/scripts')));
|
||||
app.use('/styles', express.static(path.join(__dirname, '../client/styles')));
|
||||
app.use('/styles/third-party', express.static(path.join(__dirname, '../client/styles/third_party')));
|
||||
app.use('/modules/third-party', express.static(path.join(__dirname, '../client/modules/third_party')))
|
||||
app.use('/modules', express.static(path.join(__dirname, '../client/modules')))
|
||||
app.use('/model', express.static(path.join(__dirname, '../client/model')))
|
||||
app.use('/config', express.static(path.join(__dirname, '../client/config')))
|
||||
app.use('/webfonts', express.static(path.join(__dirname, '../client/webfonts')));
|
||||
if (process.env.NODE_ENV.trim() === 'development') {
|
||||
app.use('/dist', express.static(path.join(__dirname, '../client/dist')));
|
||||
} else if (process.env.NODE_ENV.trim() === 'production') {
|
||||
app.use('/dist', express.static(path.join(__dirname, '../client/dist')));
|
||||
}
|
||||
|
||||
// set up routing for static content that isn't being bundled.
|
||||
app.use('/images', express.static(path.join(__dirname, '../client/src/images')));
|
||||
app.use('/styles', express.static(path.join(__dirname, '../client/src/styles')));
|
||||
app.use('/webfonts', express.static(path.join(__dirname, '../client/src/webfonts')));
|
||||
|
||||
|
||||
app.use(function (req, res) {
|
||||
res.sendFile(path.join(__dirname, '../client/views/404.html'));
|
||||
res.sendFile(path.join(__dirname, '../client/src/views/404.html'));
|
||||
});
|
||||
|
||||
inGame.on('connection', function (socket) {
|
||||
|
||||
@@ -3,15 +3,15 @@ const router = express.Router({ strict: true });
|
||||
const path = require('path');
|
||||
|
||||
router.get('/', function (request, response) {
|
||||
response.sendFile(path.join(__dirname, '../../client/views/home.html'));
|
||||
response.sendFile(path.join(__dirname, '../../client/src/views/home.html'));
|
||||
});
|
||||
|
||||
router.get('/create', function (request, response) {
|
||||
response.sendFile(path.join(__dirname, '../../client/views/create.html'));
|
||||
response.sendFile(path.join(__dirname, '../../client/src/views/create.html'));
|
||||
});
|
||||
|
||||
router.get('/game/:code', function (request, response) {
|
||||
response.sendFile(path.join(__dirname, '../../client/views/game.html'));
|
||||
response.sendFile(path.join(__dirname, '../../client/src/views/game.html'));
|
||||
});
|
||||
|
||||
|
||||
|
||||