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>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<link rel="stylesheet" href="converter.css">
|
||||
<title>Temperature converter</title>
|
||||
<link rel="stylesheet" href="kifu.css">
|
||||
<title>Kifu</title>
|
||||
<script type="module" src="kifu-bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1> Temperature Converter </h1>
|
||||
<form id="converter">
|
||||
<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>
|
||||
<h1> Kifu </h1>
|
||||
<div id="root"></div>
|
||||
<script>
|
||||
if('serviceWorker' in navigator) {
|
||||
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";
|
||||
|
||||
window.customElements.define("go-board", GoBoard, { extends: "canvas" });
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"go-board": GoBoard;
|
||||
}
|
||||
}
|
||||
|
||||
const main = async () => {
|
||||
let coreApi = await initCore();
|
||||
let response = await coreApi.playingField();
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ module.exports = {
|
|||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{ from: "src/index.html" },
|
||||
{ from: "src/converter.css" }
|
||||
{ from: "src/kifu.css" },
|
||||
{ from: "src/manifest.json" }
|
||||
]
|
||||
})
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in New Issue