tools
/
prime-map-generator
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Upgrade template to v3

This commit is contained in:
Florine W. Dekker 2022-11-21 23:26:44 +01:00
parent 2e6e885071
commit 8e2d2476ed
Signed by: FWDekker
GPG Key ID: D3DCFAA8A4560BE0
5 changed files with 39 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
package-lock.json generated
View File

Binary file not shown.

12
package.json
View File

@ -16,17 +16,17 @@
"deploy": "grunt deploy" "deploy": "grunt deploy"
}, },
"devDependencies": { "devDependencies": {
"grunt": "^1.4.1", "grunt": "^1.5.3",
"grunt-cli": "^1.4.3", "grunt-cli": "^1.4.3",
"grunt-contrib-clean": "^2.0.0", "grunt-contrib-clean": "^2.0.1",
"grunt-contrib-copy": "^1.0.0", "grunt-contrib-copy": "^1.0.0",
"grunt-contrib-watch": "^1.1.0", "grunt-contrib-watch": "^1.1.0",
"grunt-focus": "^1.0.0", "grunt-focus": "^1.0.0",
"grunt-text-replace": "^0.4.0", "grunt-text-replace": "^0.4.0",
"grunt-webpack": "^5.0.0", "grunt-webpack": "^5.0.0",
"ts-loader": "^9.2.8", "ts-loader": "^9.4.1",
"typescript": "^4.6.3", "typescript": "^4.9.3",
"webpack": "^5.72.0", "webpack": "^5.75.0",
"webpack-cli": "^4.9.2" "webpack-cli": "^5.0.0"
} }
} }

2
src/main/css/main.css
View File

@ -1,4 +1,4 @@
#canvasContainer { #canvas-container {
margin: 2em; margin: 2em;
height: 500px; height: 500px;
} }

50
src/main/index.html
View File

@ -8,18 +8,24 @@
<meta name="description" content="Visualizes prime numbers." /> <meta name="description" content="Visualizes prime numbers." />
<meta name="theme-color" content="#0033cc" /> <meta name="theme-color" content="#0033cc" />
<meta name="fwd:auto:show-main" />
<meta name="fwd:nav:target" content="#nav" />
<meta name="fwd:nav:highlight-path" content="/Tools/Prime Map Generator/" />
<meta name="fwd:footer:target" content="#footer" />
<meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/prime-map-generator/" />
<meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
<title>Prime Map Generator | FWDekker</title> <title>Prime Map Generator | FWDekker</title>
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
<link rel="stylesheet" href="https://static.fwdekker.com/fonts/fork-awesome/1.x.x/fork-awesome.css" /> <link rel="stylesheet" href="https://static.fwdekker.com/fonts/fork-awesome/1.x.x/fork-awesome.css" />
<link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" /> <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
<!--suppress HtmlUnknownTarget --> <!--suppress HtmlUnknownTarget -->
<link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" /> <link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
<script async src="https://stats.fwdekker.com/count.js" <script async src="https://stats.fwdekker.com/count.js"
data-goatcounter="https://stats.fwdekker.com/count"></script> data-goatcounter="https://stats.fwdekker.com/count"></script>
</head> </head>
<body> <body>
<noscript> <noscript class="fwd-js-notice">
<img src="https://stats.fwdekker.com/count?p=/tools/prime-map-generator/" alt="Counting pixel" /> <img src="https://stats.fwdekker.com/count?p=/tools/prime-map-generator/" alt="Counting pixel" />
<p> <p>
@ -28,32 +34,36 @@
instructions on how to enable JavaScript in your web browser</a>. instructions on how to enable JavaScript in your web browser</a>.
</p> </p>
</noscript> </noscript>
<main class="hidden"> <nav id="nav"></nav>
<div id="nav"></div> <main class="hidden"> <!-- No `container` class, to allow use of whole width -->
<div id="contents"> <div role="document">
<div id="header"></div>
<section class="container"> <section class="container">
<div class="row"> <header class="fwd-header">
<form id="gridSettings"> <hgroup>
<label for="gridCols">Columns</label> <h1><a href=".">Prime Map Generator</a></h1>
<input type="number" id="gridCols" min="1" value="100" /> <h2>Visualizes prime numbers.</h2>
</form> </hgroup>
</div> </header>
</section>
<section> <!-- No `container` class, to allow use of whole width --> <form id="grid-settings">
<div id="canvasContainer"> <label for="grid-cols">Columns</label>
<canvas id="canvas" class="invisible"> <input type="number" id="grid-cols" min="1" value="100" />
</form>
</section>
<section>
<div id="canvas-container">
<canvas id="canvas">
Your browser must support the &lt;canvas&gt; element to run this game. Your browser must support the &lt;canvas&gt; element to run this game.
</canvas> </canvas>
</div> </div>
</section> </section>
<section class="container">
<footer id="footer"></footer>
</section>
</div> </div>
<div id="footer"></div>
</main> </main>
<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script> <script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
<!--suppress HtmlUnknownTarget --> <!--suppress HtmlUnknownTarget -->
<script src="bundle.js?v=%%VERSION_NUMBER%%"></script> <script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
</body> </body>

20
src/main/js/Main.ts
View File

@ -1,28 +1,12 @@
// @ts-ignore // @ts-ignore
const {$, doAfterLoad, footer, header, nav} = window.fwdekker; const {$, doAfterLoad} = window.fwdekker;
import {GridModel} from "./Model"; import {GridModel} from "./Model";
import {Painter} from "./Painter"; import {Painter} from "./Painter";
// Set up template
doAfterLoad(() => {
$("#nav").appendChild(nav("/Tools/Prime Map Generator/"));
$("#header").appendChild(header({
title: "Prime Map Generator",
description: "Visualizes prime numbers"
}));
$("#footer").appendChild(footer({
vcsURL: "https://git.fwdekker.com/tools/prime-map-generator/",
version: "v%%VERSION_NUMBER%%"
}));
$("main").classList.remove("hidden");
});
doAfterLoad(async () => { doAfterLoad(async () => {
const canvas = $("#canvas"); const canvas = $("#canvas");
canvas.classList.remove("invisible");
const resize = () => { const resize = () => {
canvas.width = canvas.clientWidth; canvas.width = canvas.clientWidth;
@ -36,7 +20,7 @@ doAfterLoad(async () => {
painter.model = model; painter.model = model;
painter.startDrawLoop(); painter.startDrawLoop();
const gridCols = $("#gridCols"); const gridCols = $("#grid-cols");
gridCols.addEventListener("change", () => model.cols = parseInt(gridCols.value)); gridCols.addEventListener("change", () => model.cols = parseInt(gridCols.value));