Initial commit
This commit is contained in:
commit
07c5428f7c
11 changed files with 1815 additions and 0 deletions
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
node_modules/
|
||||
dist/
|
||||
.DS_Store
|
||||
*.log
|
||||
deploy
|
||||
7
.prettierrc
Normal file
7
.prettierrc
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"arrowParens": "always",
|
||||
"endOfLine": "lf",
|
||||
"singleAttributePerLine": true
|
||||
}
|
||||
5
LICENSE.md
Normal file
5
LICENSE.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
15
README.md
Normal file
15
README.md
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
# Evolver
|
||||
|
||||
A WIP game for learning purpouses
|
||||
|
||||
## Libraries Used
|
||||
|
||||
- None at the moment, just rollup
|
||||
|
||||
## Credits
|
||||
|
||||
- Created by Juan Sebastián Montoya
|
||||
|
||||
## License
|
||||
|
||||
This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).
|
||||
27
package.json
Normal file
27
package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "evolver",
|
||||
"version": "1.0.0",
|
||||
"main": "src/index.js",
|
||||
"scripts": {
|
||||
"clean": "del-cli dist",
|
||||
"build": "yarn clean && rollup -c",
|
||||
"serve": "yarn clean && rollup -c --watch"
|
||||
},
|
||||
"repository": "git@git.jusemon.com:jusemon/evolver.git",
|
||||
"author": "Jusemon <juansmm@outlook.com>",
|
||||
"license": "MIT",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^26.0.1",
|
||||
"@rollup/plugin-image": "^3.0.3",
|
||||
"@rollup/plugin-json": "^6.1.0",
|
||||
"@rollup/plugin-node-resolve": "^15.2.3",
|
||||
"@rollup/plugin-terser": "^0.4.4",
|
||||
"@web/rollup-plugin-html": "^2.3.0",
|
||||
"chalk": "^5.2.0",
|
||||
"del-cli": "^5.1.0",
|
||||
"rollup": "^4.18.0",
|
||||
"rollup-plugin-serve": "^1.1.1",
|
||||
"rollup-plugin-zip": "^1.0.3"
|
||||
}
|
||||
}
|
||||
40
public/index.html
Normal file
40
public/index.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Evolver</title>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#game {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
canvas {
|
||||
background-color: #fbf7f3;
|
||||
border: 1px solid black;
|
||||
image-rendering: pixelated;
|
||||
image-rendering: crisp-edges;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="game">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
<script type="module" src="../src/index.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
51
rollup-plugins/bundle-size.mjs
Normal file
51
rollup-plugins/bundle-size.mjs
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import path from "path";
|
||||
import fs from "fs";
|
||||
import chalk from "chalk";
|
||||
|
||||
export default function bundleSize({ file, maxSize = 13 }) {
|
||||
return {
|
||||
name: "rollup-plugin-bundle-size",
|
||||
writeBundle: {
|
||||
secuential: true,
|
||||
order: "post",
|
||||
async handler(options, bundle) {
|
||||
let uncompressedSize = 0;
|
||||
console.log(
|
||||
chalk.green("Filename".padEnd(30, " ") + "\t Size (bytes).")
|
||||
);
|
||||
for (const file in bundle) {
|
||||
const { modules } = bundle[file];
|
||||
for (const moduleName in modules) {
|
||||
const module = modules[moduleName];
|
||||
const name = path.basename(moduleName);
|
||||
uncompressedSize += module.renderedLength;
|
||||
console.log(
|
||||
`${chalk.cyan(name.padEnd(30, " "))}\t ${chalk.cyan(
|
||||
module.renderedLength
|
||||
)}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(
|
||||
chalk.green(
|
||||
"Total before compression " +
|
||||
chalk.bold(chalk.green(uncompressedSize))
|
||||
)
|
||||
);
|
||||
|
||||
const asset = path.join(options.dir, file);
|
||||
const { size } = fs.statSync(asset);
|
||||
const percent = parseInt((size / (maxSize * 1024)) * 100, 10);
|
||||
const color =
|
||||
percent < 50 ? chalk.green : percent < 80 ? chalk.yellow : chalk.red;
|
||||
|
||||
console.log(
|
||||
`Created bundle ${chalk.cyan(asset)}: ${chalk.bold(
|
||||
chalk.cyan(size)
|
||||
)} bytes, ${color(percent + "%")} of total game size used.`
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
41
rollup.config.mjs
Normal file
41
rollup.config.mjs
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import json from "@rollup/plugin-json";
|
||||
import image from "@rollup/plugin-image";
|
||||
import terser from "@rollup/plugin-terser";
|
||||
import { rollupPluginHTML as html } from "@web/rollup-plugin-html";
|
||||
import zip from "rollup-plugin-zip";
|
||||
import serve from "rollup-plugin-serve";
|
||||
import { nodeResolve } from "@rollup/plugin-node-resolve";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import bundleSize from "./rollup-plugins/bundle-size.mjs";
|
||||
|
||||
const zipPlug = zip({ file: "game.zip" });
|
||||
zipPlug.writeBundle.sequential = true;
|
||||
|
||||
/**
|
||||
* @type {import('rollup').RollupOptions}
|
||||
*/
|
||||
export default {
|
||||
input: "public/index.html",
|
||||
output: [
|
||||
{
|
||||
inlineDynamicImports: true,
|
||||
dir: "dist",
|
||||
format: "iife",
|
||||
},
|
||||
{
|
||||
inlineDynamicImports: true,
|
||||
dir: "dist/min",
|
||||
format: "iife",
|
||||
name: "version",
|
||||
plugins: [terser(), zipPlug, bundleSize({ file: "game.zip", maxSize: 13 })],
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
html({ minify: true }),
|
||||
json(),
|
||||
image(),
|
||||
nodeResolve(),
|
||||
commonjs(),
|
||||
serve({ contentBase: "dist", port: 8080, verbose: true }),
|
||||
],
|
||||
};
|
||||
112
src/canvas-windows.js
Normal file
112
src/canvas-windows.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* Represents a canvas window that resizes to fit the screen while maintaining a native aspect ratio.
|
||||
*/
|
||||
export default class CanvasWindow {
|
||||
/**
|
||||
* Creates a new instance of the `CanvasWindow` class.
|
||||
* @param {Object} config - The configuration options for the canvas window.
|
||||
* @param {number} config.nativeWidth - The width of the native game size.
|
||||
* @param {number} config.nativeHeight - The height of the native game size.
|
||||
* @param {number} config.maxMultiplier - The maximum allowed size multiplier for the canvas window.
|
||||
* @param {number} config.windowPercentage - The percentage of the screen size to use for the canvas window.
|
||||
* @param {HTMLCanvasElement} config.canvas - The canvas element to resize.
|
||||
*/
|
||||
constructor(config) {
|
||||
/**
|
||||
* The width of the native game size.
|
||||
*
|
||||
* @member {number}
|
||||
*/
|
||||
this.nativeWidth = config.nativeWidth ?? 320;
|
||||
|
||||
/**
|
||||
* The height of the native game size.
|
||||
*
|
||||
* @member {number}
|
||||
*/
|
||||
this.nativeHeight = config.nativeHeight ?? 240;
|
||||
|
||||
/**
|
||||
* The max multiplier.
|
||||
*
|
||||
* @member {number}
|
||||
*/
|
||||
this.maxMultiplier = config.maxMultiplier ?? 1;
|
||||
|
||||
/**
|
||||
* The percentage of the window size to use for the canvas size.
|
||||
*
|
||||
* @member {number}
|
||||
*/
|
||||
this.windowPercentage = config.windowPercentage ?? 1;
|
||||
|
||||
/**
|
||||
* The canvas element to resize.
|
||||
*
|
||||
* @member {HTMLCanvasElement}
|
||||
*/
|
||||
this.canvas = config.canvas;
|
||||
|
||||
/**
|
||||
* The maximum width of the canvas.
|
||||
*
|
||||
* @member {number}
|
||||
*/
|
||||
this.maxWidth = this.nativeWidth * this.maxMultiplier;
|
||||
|
||||
/**
|
||||
* The maximum width of the canvas.
|
||||
*
|
||||
* @member {number}
|
||||
*/
|
||||
this.maxHeight = this.nativeHeight * this.maxMultiplier;
|
||||
|
||||
/**
|
||||
* The maximum width of the canvas.
|
||||
*
|
||||
* @member {number}
|
||||
*/
|
||||
this.canvasWidth = this.nativeWidth;
|
||||
|
||||
/**
|
||||
* The maximum width of the canvas.
|
||||
*
|
||||
* @member {number}
|
||||
*/
|
||||
this.canvasHeight = this.nativeHeight;
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.resize();
|
||||
});
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
// initialize native height/width
|
||||
console.log('load')
|
||||
this.canvas.width = this.canvasWidth;
|
||||
this.canvas.height = this.canvasHeight;
|
||||
this.resize();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Resizes the canvas window to fit the screen while maintaining the native aspect ratio.
|
||||
*/
|
||||
resize() {
|
||||
this.canvasWidth = window.innerWidth;
|
||||
this.canvasHeight = window.innerHeight;
|
||||
const nativeRatio = this.nativeWidth / this.nativeHeight;
|
||||
const browserWindowRatio = this.canvasWidth / this.canvasHeight;
|
||||
if (browserWindowRatio > nativeRatio) {
|
||||
this.canvasHeight = Math.floor(this.canvasHeight * this.windowPercentage);
|
||||
if (this.canvasHeight > this.maxHeight)
|
||||
this.canvasHeight = this.maxHeight;
|
||||
this.canvasWidth = Math.floor(this.canvasHeight * nativeRatio);
|
||||
} else {
|
||||
this.canvasWidth = Math.floor(this.canvasWidth * this.windowPercentage);
|
||||
if (this.canvasWidth > this.maxWidth) this.canvasWidth = this.maxWidth;
|
||||
this.canvasHeight = Math.floor(this.canvasWidth / nativeRatio);
|
||||
}
|
||||
this.canvas.style.width = `${this.canvasWidth}px`;
|
||||
this.canvas.style.height = `${this.canvasHeight}px`;
|
||||
}
|
||||
}
|
||||
7
src/index.js
Normal file
7
src/index.js
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import CanvasWindow from "./canvas-windows";
|
||||
const canvas = document.querySelector("canvas")
|
||||
new CanvasWindow({
|
||||
canvas,
|
||||
maxMultiplier: 5,
|
||||
windowPercentage: 0.9
|
||||
})
|
||||
Loading…
Reference in a new issue