Added bkg img

README.md

@@ -1,38 +1,35 @@
 # UNO game written in JavaScript
+I used:
+- js
+- webpack and loaders: to pack to one file
+- [Wallpaper Access](https://wallpaperaccess.com/): Background image
+
 
 
 ## For developers
 
+
 ### Install webpack
 This repo is compiled with `webpack`. So, first install webpack by
 ```
-npm install webpack webpack-cli
-```
-
-### Install style-loader and css-loader
-To handle css files, style-loader and css-loader are required.
-```
-npm install style-loader css-loader
+npm install webpack webpack-cli style-loader css-loader file-loader sass sass-loader --save-dev
 ```
+- `webpack`, `webpack-cli`: webpack
+- `style-loader`: Creates `style` nodes from JS strings
+- `css-loader`: Translates CSS into CommonJS
+- `file-loader`: copy image files to dist
+- `sass`, `sass-loader`: Compiles Sass to CSS
+- `--save-dev`: write dependencies in `devDependencies` instead of `dependencies` in `package.json`
 
 ### Config webpack
-Open `webpack.config.js` and edit
-```
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
-      },
-    ],
-  },
-};
-```
-to use style-loader and css-loader for .css files.
+Edit `webpack.config.js` to use webpack loaders
 
 ### Use webpack
 ```
 npx webpack
 ```
+or
+```
+npm run build
+```
 This command will generate `dist/main.js`

package.json

@@ -4,6 +4,7 @@
   "description": "Uno game",
   "private": true,
   "scripts": {
+    "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -21,8 +22,11 @@
     "url": "https://github.com/newini/uno-game-js/issues"
   },
   "homepage": "https://github.com/newini/uno-game-js#readme",
-  "dependencies": {
+  "devDependencies": {
     "css-loader": "^6.0.0",
+    "file-loader": "^6.2.0",
+    "sass": "^1.35.2",
+    "sass-loader": "^12.1.0",
     "style-loader": "^3.1.0",
     "webpack": "^5.45.1",
     "webpack-cli": "^4.7.2"

src/css/uno-game.css

@@ -1,5 +0,0 @@
-.uno-game {
-  width: 800px;
-  height: 450px;
-  background: red;
-}

src/index.js

@@ -1,9 +1,12 @@
 console.log('Uno Start')
 
-import './css/uno-game.css';
-import Card from './js/card.js';
-import Player from './js/player.js';
+/* Class */
 import Room from './js/room.js';
+/* SCSS */
+import './styles/uno-game.scss';
+/* Images */
+//import green_table from './images/green_table.jpg';
+
 
 document.addEventListener('DOMContentLoaded', () => {
   const div = document.getElementById('uno-game');

src/styles/uno-game.scss

@@ -0,0 +1,5 @@
+.uno-game {
+  width: 800px;
+  height: 450px;
+  background-image: url('../images/green_table.jpg');
+}

webpack.config.js

@@ -1,9 +1,33 @@
+var path = require('path');
+
 module.exports = {
+  mode: "development", // "production" | "development" | "none"
+  entry: "./src/index.js", // string | object | array
+  output: {
+    path: path.resolve(__dirname, "dist"), // string (default)
+    filename: "[name].js", // string (default)
+    //publicPath: "/assets/", // string
+    uniqueName: "uno-game", // (defaults to package.json "name")
+    // unique name for this build to avoid conflicts with other builds in the same HTML
+  },
   module: {
     rules: [
       {
-        test: /\.css$/i,
-        use: ["style-loader", "css-loader"],
+        test: /\.scss$/i,
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      },
+      {
+        test: /\.(png|svg|jpe?g|gif)$/i,
+        type: 'asset/resource',
+        //use: [
+        //  {
+        //    loader: 'file-loader',
+        //    options: {
+        //      name: '[name].[ext]',
+        //      outputPath : 'images/',
+        //    }
+        //  },
+        //],
       },
     ],
   },