savanni
/
monorepo
1
0
Fork 0
Code Issues 68 Pull Requests Projects 6 Releases Wiki Activity

Set up the Kifu PWA project with decent Makefiles #41

Merged
savanni merged 14 commits from kifu-pwa into main 2023-05-13 16:48:42 +00:00
Conversation 0 Commits 14 Files Changed 35 +62 -59
7 changed files with 62 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0b0bd1e14b - Show all commits

22
kifu/kifu-pwa/src/components/Board.ts Normal file
View File

@ -0,0 +1,22 @@
export class GoBoard extends HTMLCanvasElement {
static get observedAttributes() {
return [];
}
constructor() {
super();
console.log("Go Board constructor");
}
connectedCallback() {
console.log("connected callback");
const ctx = this.getContext("2d");
if (!ctx) {
alert("could not get the canvas context");
return;
}
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 150);
}
}

38
kifu/kifu-pwa/src/converter.css
View File

@ -1,38 +0,0 @@
html {
background: rgb(243, 243, 243);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 15pt;
}
html, body {
height: 100%;
margin: 0;
}
body {
display: grid;
place-items: center;
}
#converter {
width: 15rem;
padding: 2rem;
border-radius: .5rem;
box-shadow: 0 0 2rem 0 #0001;
display: flex;
flex-direction: column;
align-items: center;
}
#converter input, #converter select {
font-family: inherit;
font-size: inherit;
margin-block-end: 1rem;
text-align: center;
width: 10rem;
}
#converter #output-temp {
font-size: 2rem;
font-weight: bold;
}

24
kifu/kifu-pwa/src/index.html
View File

@ -3,29 +3,13 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="converter.css"> <link rel="stylesheet" href="kifu.css">
<title>Temperature converter</title> <title>Kifu</title>
<script type="module" src="kifu-bundle.js"></script> <script type="module" src="kifu-bundle.js"></script>
</head> </head>
<body> <body>
<h1> Temperature Converter </h1> <h1> Kifu </h1>
<form id="converter"> <div id="root"></div>
<label for="input-temp">temperature</label>
<input type="text" id="input-temp" name="input-temp" value="20" />
<label for="input-unit">from</label>
<select id="input-unit" name="input-unit">
<option value="c" selected>Celsius</option>
<option value="f">Fahrenheit</option>
<option value="k">Kelvin</option>
</select>
<label for="output-unit">to</label>
<select id="output-unit" name="output-unit">
<option value="c">Celsius</option>
<option value="f" selected>Fahrenheit</option>
<option value="k">Kelvin</option>
</select>
<output name="output-temp" id="output-temp" for="input-temp input-unit output-unit">68 F</output>
</form>
<script> <script>
if('serviceWorker' in navigator) { if('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js', { scope: '/' }); navigator.serviceWorker.register('/sw.js', { scope: '/' });

15
kifu/kifu-pwa/src/kifu.css Normal file
View File

@ -0,0 +1,15 @@
html {
background: rgb(243, 243, 243);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 15pt;
}
html, body {
height: 100%;
margin: 0;
}
body {
display: grid;
}

19
kifu/kifu-pwa/src/main.ts
View File

@ -1,9 +1,28 @@
import { GoBoard } from "./components/Board";
import { CoreApi, initCore } from "./coreApi"; import { CoreApi, initCore } from "./coreApi";
window.customElements.define("go-board", GoBoard, { extends: "canvas" });
declare global {
interface HTMLElementTagNameMap {
"go-board": GoBoard;
}
}
const main = async () => { const main = async () => {
let coreApi = await initCore(); let coreApi = await initCore();
let response = await coreApi.playingField(); let response = await coreApi.playingField();
console.log("playing field response: ", response); console.log("playing field response: ", response);
const root = document.getElementById("root");
if (!root) {
alert("could not retrieve the app root container");
return;
}
const board = document.createElement("canvas", { is: "go-board" });
console.log("constructed board: ", board);
root.appendChild(board);
}; };
main(); main();

0
kifu/kifu-pwa/manifest.json → kifu/kifu-pwa/src/manifest.json
View File

3
kifu/kifu-pwa/webpack.config.js
View File

@ -16,7 +16,8 @@ module.exports = {
new CopyWebpackPlugin({ new CopyWebpackPlugin({
patterns: [ patterns: [
{ from: "src/index.html" }, { from: "src/index.html" },
{ from: "src/converter.css" } { from: "src/kifu.css" },
{ from: "src/manifest.json" }
] ]
}) })
], ],