Create the GoBoard custom element
There's nothing in it, but it's still present
This commit is contained in:
parent
b321c03297
commit
0b0bd1e14b
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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: '/' });
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
|
|
@ -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" }
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue