ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Don't use custom built-in elements because they are not supported in webkit

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-06-04 15:55:37 -07:00
parent 71f34e930c
commit 71f972142b
6 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/assets/css/damage_block.css
View File

@ -16,3 +16,8 @@
user-select: none; user-select: none;
font-family: monospace; font-family: monospace;
} }
span {
margin: 0;
font-size: smaller;
}

10
public/assets/css/soldier_record_block.css
View File

@ -1,5 +1,5 @@
span { span {
font-size: smaller; font-size: 10px;
font-family: monospace; font-family: monospace;
margin-right: 1em; margin-right: 1em;
} }
@ -8,18 +8,22 @@ span {
text-align: center; text-align: center;
} }
.physical-status-track span { .physical-status-track damage-block {
margin: 0; margin: 0;
padding: 0; padding: 0;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
.physical-status-track span[slot="block-number"] { .physical-status-track damage-block[slot="block-number"] {
font-family: serif; font-family: serif;
font-size: unset; font-size: unset;
} }
.physical-status-track damage-block span {
margin: 0;
}
ul { ul {
margin: 0; margin: 0;
padding: 0; padding: 0;

58
public/index.html
View File

@ -3,6 +3,11 @@
<head> <head>
<title>Infantry Combat Solo Basic</title> <title>Infantry Combat Solo Basic</title>
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/style.css">
<script>
const source = new EventSource('/esbuild');
source.addEventListener('change', () => location.reload());
// source.addEventListener('message', (e) => console.log(e));
</script>
</head> </head>
<body> <body>
<template id="damage-block"> <template id="damage-block">
@ -19,61 +24,61 @@
<link rel="stylesheet" href="assets/css/soldier_record_block.css"> <link rel="stylesheet" href="assets/css/soldier_record_block.css">
<p class="physical-status-track"> <p class="physical-status-track">
<span is="damage-block"> <damage-block>
<span slot="block-number">10</span> <span slot="block-number">10</span>
<span slot="movement-points">8</span> <span slot="movement-points">8</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">9</span> <span slot="block-number">9</span>
<span slot="movement-points">8</span> <span slot="movement-points">8</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">8</span> <span slot="block-number">8</span>
<span slot="movement-points">8</span> <span slot="movement-points">8</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">7</span> <span slot="block-number">7</span>
<span slot="movement-points">8</span> <span slot="movement-points">8</span>
<span slot="firing-modifier">+1</span> <span slot="firing-modifier">+1</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">6</span> <span slot="block-number">6</span>
<span slot="movement-points">7</span> <span slot="movement-points">7</span>
<span slot="firing-modifier">+1</span> <span slot="firing-modifier">+1</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">5</span> <span slot="block-number">5</span>
<span slot="movement-points">7</span> <span slot="movement-points">7</span>
<span slot="firing-modifier">+2</span> <span slot="firing-modifier">+2</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">4</span> <span slot="block-number">4</span>
<span slot="movement-points">6</span> <span slot="movement-points">6</span>
<span slot="firing-modifier">+2</span> <span slot="firing-modifier">+2</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">3</span> <span slot="block-number">3</span>
<span slot="movement-points">6</span> <span slot="movement-points">6</span>
<span slot="firing-modifier">+2</span> <span slot="firing-modifier">+2</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">2</span> <span slot="block-number">2</span>
<span slot="movement-points">5</span> <span slot="movement-points">5</span>
<span slot="firing-modifier">+3</span> <span slot="firing-modifier">+3</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">1</span> <span slot="block-number">1</span>
<span slot="movement-points">4</span> <span slot="movement-points">4</span>
<span slot="firing-modifier">+3</span> <span slot="firing-modifier">+3</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">0</span> <span slot="block-number">0</span>
<span slot="movement-points">None</span> <span slot="movement-points">None</span>
<span slot="firing-modifier">0</span> <span slot="firing-modifier">0</span>
</span> </damage-block>
<span is="damage-block"> <damage-block>
<span slot="block-number">DEAD</span> <span slot="block-number">DEAD</span>
</span> </damage-block>
</p> </p>
<p> <p>
@ -243,11 +248,6 @@
<input type="file" accept="image/svg+xml"/> <input type="file" accept="image/svg+xml"/>
<script>
const source = new EventSource('/esbuild');
source.addEventListener('change', () => location.reload());
// source.addEventListener('message', (e) => console.log(e));
</script>
<script src="index.js"></script> <script src="index.js"></script>
<script src="soldier_record_block.js"></script> <script src="soldier_record_block.js"></script>
</body> </body>

1
src/index.js
View File

@ -11,7 +11,6 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
distanceOutput = document.getElementById('status'), distanceOutput = document.getElementById('status'),
proneToggle = document.getElementById('toggle-prone-counter'), proneToggle = document.getElementById('toggle-prone-counter'),
contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'), contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
// fileName = localStorage.getItem('map') || (env === 'test' ? 'test_map' : 'map1'),
fileName = localStorage.getItem('map') || 'scenario-side_show', fileName = localStorage.getItem('map') || 'scenario-side_show',
map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`, map = scenarios[fileName]?.hashed || `assets/images/${fileName}.svg`,
fileInputEl = document.querySelector('input[type="file"]'), fileInputEl = document.querySelector('input[type="file"]'),

2
src/modules/record_sheet.js
View File

@ -82,7 +82,7 @@ function createRecord(unit) {
const { dataset: { allegiance, number, squad }} = unit, const { dataset: { allegiance, number, squad }} = unit,
primaryWeapon = unit.querySelector('.primary-weapon'), primaryWeapon = unit.querySelector('.primary-weapon'),
pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle', pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle',
div = document.createElement('div', { is: 'soldier-record-block' }), div = document.createElement('soldier-record-block'),
spans = Array(6).fill('span').map(t => document.createElement(t)), spans = Array(6).fill('span').map(t => document.createElement(t)),
[tn, sn, pwt, pwd, pwrs, pwrl] = spans; [tn, sn, pwt, pwd, pwrs, pwrl] = spans;

6
src/soldier_record_block.js
View File

@ -1,6 +1,6 @@
customElements.define( customElements.define(
'damage-block', 'damage-block',
class extends HTMLSpanElement { class extends HTMLElement {
constructor() { constructor() {
super(); super();
@ -32,12 +32,11 @@ customElements.define(
} }
} }
}, },
{ extends: 'span' }
); );
customElements.define( customElements.define(
'soldier-record-block', 'soldier-record-block',
class extends HTMLDivElement { class extends HTMLElement {
constructor() { constructor() {
super(); super();
@ -52,5 +51,4 @@ customElements.define(
this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation()); this.shadowRoot.querySelector('.grenades').addEventListener('click', e => e.stopPropagation());
} }
}, },
{ extends: 'div' }
); );