Create basic website (#2)

* Update index.html

* Update index.html

* Change site system. REQUIRES GITHUB REPO CHANGES.

* Create node.js.yml

* Small fixups

* Update gitignore

* Fix gitignore

* Fix index.html

* index.html: Remove invalid CSS link in body

* Change initialization code

* Add description and change text in play button

* Add styles to git

* Fix typo

* Use rel="noopener" in hyperlinks

SONARCLOUD: https://sonarcloud.io/organizations/pawteam/rules?open=Web%3AS5148&rule_key=Web%3AS5148

* Change development scripts

* Add images

* Update styles

* Add styles/_values.css

* Add alt attributes to images

SONARCLOUD: https://sonarcloud.io/organizations/pawteam/rules?open=Web%3AImgWithoutAltCheck&rule_key=Web%3AImgWithoutAltCheck

* Update styles

* Add more styles

* Disable some user-select

* Change border colors

* Use itch.io instead of gd.games

.github/workflows/node.js.yml

@@ -0,0 +1,30 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x, 16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'yarn'
+    - run: yarn install
+    - run: yarn test

.gitignore

@@ -0,0 +1,135 @@
+/www/js
+/www/css
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.vercel

package.json

@@ -0,0 +1,31 @@
+{
+	"name": "pay-and-wash",
+	"main": "index.js",
+	"repository": "https://github.com/pawteam/pay-and-wash.git",
+	"author": "iuevix",
+	"contributors": [
+		"romw314 <106016361+romw314@users.noreply.github.com>"
+	],
+	"license": "MIT",
+	"scripts": {
+		"import-page-scripts": "copyfiles -f -e \"**/*.test.js\" \"./web-scripts/**/*\" www/js",
+		"build-css": "sass ./styles:./www/css --no-source-map",
+		"build": "yarn build:yarn",
+		"build:yarn": "yarn import-page-scripts && yarn build-css",
+		"build:npm": "npm run import-page-scripts && npm run build-css",
+		"dev-server": "live-server www",
+		"dev": "yarn dev:yarn",
+		"dev:yarn": "concurrently -n SERVER,SASS -c cyan,green \"yarn dev-server\" \"yarn build-css --watch\"",
+		"dev:npm": "concurrently -n SERVER,SASS \"npm run dev-server\" \"npm run build-css --watch\"",
+		"test": "jest --roots web-scripts"
+	},
+	"devDependencies": {
+		"browser-env": "^3.3.0",
+		"concurrently": "^8.2.2",
+		"copyfiles": "^2.4.1",
+		"jest": "^29.7.0",
+		"live-server": "^1.2.2",
+		"node-fetch-commonjs": "^3.3.2",
+		"sass": "^1.69.5"
+	}
+}

styles/_headers.sass

@@ -0,0 +1,14 @@
+h1
+	font-size: $h1_size
+	&.title
+		font-size: $title_size
+h2
+	font-size: $h2_size
+h3
+	font-size: $h3_size
+h4
+	font-size: $h4_size
+h5
+	font-size: $h5_size
+h6
+	font-size: $h6_size

styles/_values.scss

@@ -0,0 +1,32 @@
+// text
+$title_size: 5em;
+$h1_size: 4em; // this is not used in this site
+$h2_size: 3em;
+$h3_size: default;
+$h4_size: default;
+$h5_size: default;
+$h6_size: default;
+$text_size: 1.5em;
+
+// images
+$img_height: 250px;
+
+// website
+$back_color: black;
+$color: lightgreen;
+
+// hyperlinks
+$link_color: red;
+
+// buttons
+$button_color: red;
+$button_border_color: darkred;
+$button_hover_color: lightblue;
+$button_hover_border_color: blue;
+$button_active_color: $button_hover_color;
+$button_active_border_color: $button_hover_border_color;
+$button_border_width: 10px;
+$button_active_border_width: 3px;
+$button_width: 100px;
+$button_height: 50px;
+$button_text_size: 0.6em;

styles/app.scss

@@ -0,0 +1,79 @@
+@import 'values';
+
+body.enabled {
+	font-family: "Courier New", Helvtica, Arial, Verdata, Tahoma, serif;
+	font-size: $text_size;
+	background-color: $back_color;
+	color: $color;
+
+	@import 'headers';
+
+	*::selection {
+		background-color: $color;
+		color: $back_color;
+	}
+
+	a {
+		color: $link_color;
+		text-decoration: none;
+		&:hover {
+			text-decoration: underline;
+		}
+
+		&::selection {
+			background-color: $link_color;
+		}
+	}
+
+	button {
+		border: $button_active_border_width solid $button_color;
+		border-top: $button_border_width solid $button_border_color;
+		border-right: $button_border_width solid $button_border_color;
+		background-color: inherit;
+		color: $button_color;
+		user-select: none;
+		width: $button_width + $button_border_width - $button_active_border_width;
+		height: $button_height + $button_border_width - $button_active_border_width;
+		font-size: $button_text_size;
+
+		&:hover {
+			border: $button_active_border_width solid $button_hover_color;
+			border-top: $button_border_width solid $button_hover_border_color;
+			border-right: $button_border_width solid $button_hover_border_color;
+			color: $button_hover_color;
+		}
+
+		&:active {
+			border: $button_active_border_width solid $button_active_color;
+			border-top: $button_active_border_width solid $button_active_border_color;
+			border-right: $button_active_border_width solid $button_active_border_color;
+			color: $button_active_color;
+			width: $button_width;
+			height: $button_height;
+			margin-left: $button_border_width - $button_active_border_width;
+		}
+	}
+
+	.bottom-row {
+		display: inline-block;
+		position: absolute;
+		bottom: 20px;
+		left: 50%;
+		width: auto;
+		height: $img_height;
+		transform: translateX(-50%);
+		user-select: none;
+
+		img {
+			position: relative;
+			height: $img_height;
+			width: auto;
+			float: left bottom;
+			user-select: none;
+
+			&.machine {
+				height: calc($img_height / 2);
+			}
+		}
+	}
+}

web-scripts/site-wrap.js

@@ -0,0 +1,6 @@
+if (!window.__PAW)
+	window.__PAW = {};
+
+window.__PAW.getDescription = () => {
+	return fetch('/description.html').then(res => res.text());
+};

web-scripts/site-wrap.test.js

@@ -0,0 +1,46 @@
+const path = require('path');
+const fs = require('fs');
+const nodeFetch = require('node-fetch-commonjs');
+const url = require('url');
+
+require('browser-env')();
+require('./site-wrap.js');
+
+test('Sanity check', () => {
+	expect().toBeUndefined();
+	expect(null).toBeNull();
+	expect(true).toBeTruthy();
+	expect(true).toBe(true);
+	expect(false).toBeFalsy();
+	expect(false).toBe(false);
+	expect(1 + 1).toBe(2);
+});
+
+describe('getDescription', () => {
+	test('Should be a function', () => {
+		expect(typeof(window.__PAW.getDescription)).toBe('function');
+	});
+
+	test('Should call fetch', done => {
+		window.fetch = global.fetch = () => {
+			done();
+			return Promise.resolve({ text: () => '' });
+		};
+		window.__PAW.getDescription();
+	}, 2000);
+
+	test('Should return the description', done => {
+		window.fetch = global.fetch = (fetchUrl, ...etc) => {
+			if (fetchUrl.startsWith('http'))
+				return nodeFetch(url);
+			else if (fetchUrl.startsWith('/'))
+				return Promise.resolve({ text: () => Promise.resolve(fs.readFileSync(path.resolve(__dirname, '../www') + fetchUrl, 'utf8')) });
+			else
+				return Promise.resolve({ text: () => Promise.resolve(fs.readFileSync(path.resolve(__dirname, '../www') + '/' + fetchUrl, 'utf8')) });
+		};
+		window.__PAW.getDescription().then(res => {
+			expect(res).toBe(fs.readFileSync(path.resolve(__dirname, '../www/description.html'), 'utf8'));
+			done();
+		});
+	}, 5000);
+});

www/description.html

@@ -0,0 +1,4 @@
+<p>Pay and Wash is a platformer game created by <a href="https://github.com/iuevix" target="_blank" rel="noopener">@iuevix</a>, <a href="https://github.com/romw314" target="_blank" rel="noopener">@romw314</a> and <a href="https://github.com/marw0" target="_blank" rel="noopener">@marw</a>.</p>
+
+<h2>Story</h2>
+<p>You are on a vacation. You are going home today. But you need to wash your clothes here. This is easy at home, where you have a washing machine. But on this vacation you live in an apartment where you don't have a washing machine! And you don't want to travel with wet clothes, you also need to dry your clothes. But you are going home today! You need to dry your clothes rapidly in a dryer. But where to find a washing machine and a dryer. You can't purchase a new washing machine because you can't travel with a washing machine. But in your hotel there is a laundry...</p>