icons are now being defined directly in the HTML code instead of being injected via external javascript

This commit is contained in:
Tobias 2023-09-06 10:27:58 +02:00
parent 8ac965c30a
commit 342fd6108a

View File

@ -17,7 +17,6 @@
<link type="text/css" rel="stylesheet" href="css/sr2ini.scss"> <link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
<script type="module" src="js/sr2ini.js"></script> <script type="module" src="js/sr2ini.js"></script>
<script type="module" src="../node_modules/@iconfu/svg-inject/dist/svg-inject.js"></script>
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
@ -30,8 +29,7 @@
</head> </head>
<body> <body>
<img src="img/icons.svg" onload="SVGInject(this, {'makeIdsUnique': false})" /> <!-- navbar -->
<div class="container"> <div class="container">
<header class="navbar navbar-expand" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x both"> <header class="navbar navbar-expand" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x both">
<span class="navbar-brand ps-4">SR2 Initiative Tracker</span> <span class="navbar-brand ps-4">SR2 Initiative Tracker</span>
@ -44,9 +42,10 @@
</header> </header>
</div> </div>
<!-- combatants table -->
<div class="container"> <div class="container">
<main class="table-responsive overflow-visible"> <main class="table-responsive overflow-visible">
<table class="table table-sm table-borderless combatants-table"> <table class="table table-sm table-borderless" id="combatants-table">
<thead> <thead>
<tr data-augmented-ui="tl-2-clip-y r-clip-y"> <tr data-augmented-ui="tl-2-clip-y r-clip-y">
<th class="col th-name" data-augmented-ui="tl-2-clip-y both" title="Name">Name</th> <th class="col th-name" data-augmented-ui="tl-2-clip-y both" title="Name">Name</th>
@ -61,12 +60,7 @@
</main> </main>
</div> </div>
<div class="footer-container"> <!-- confirm modal -->
<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
<p>code & design by <a href="#" tabindex="-1" title="Eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
</footer>
</div>
<div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog"> <div class="modal fade" id="confirm-modal" tabindex="-2" role="dialog">
<div class="modal-dialog modal-sm" role="document"> <div class="modal-dialog modal-sm" role="document">
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border"> <div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
@ -86,6 +80,7 @@
</div> </div>
</div> </div>
<!-- combatant modal (add & edit) -->
<div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog"> <div class="modal fade" id="combatant-modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document"> <div class="modal-dialog modal-sm" role="document">
<div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border"> <div class="sr2-modal" data-augmented-ui="tl-2-clip-x tr-clip-y bl-clip-y br-2-clip-x b-scoop-x border">
@ -129,5 +124,78 @@
</div> </div>
</div> </div>
<!-- SVG icon <symbol> definitions (for later <use>)-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="d-none">
<defs>
<!-- add combatant -->
<symbol id="add" >
<path d="M 192 96 h -96 q 0 -96 96 -96 z" />
<rect height="96" width="64" x="224" y="0" />
<path d="M 320 96 h 96 q 0 -96 -96 -96 z" />
<path d="M 96 128 h 320 v 80 q 0 32 -32 32 h -256 q -32 0 -32 -32 z" />
<path d="M 128 272 q 64 32 128 32 v -32 Z" />
<path d="M 128 304 q 64 28 128 28 v 52 h -128 Z" />
<path d="M 96 416 h -96 q 0 -128 96 -128 z" />
<rect x="0" y="448" width="96" height="64" />
<path d="M 128 512 v -96 h 128 v 32 h -80 q -16 0 -16 16 v 48 Z" />
<rect x="192" y="480" width="64" height="32" />
<rect x="288" y="368" width="228" height="64" />
<rect x="368" y="288" width="64" height="228" />
</symbol>
<!-- new round -->
<symbol id="newround" >
<path d="M 464 512 h -160 q -48 0 -48 -48 v -160 q 0 -48 48 -48 h 160 q 48 0 48 48 v 160 q 0 48 -48 48 Z M 444 472 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m 0 -72 a 16 16 0 1 0 -1 0 Z m -112 0 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z m 0 72 a 16 16 0 1 0 -1 0 Z " fill-rule="evenodd" />
<path d="M 208 320 q -34 34 -68 0 l -113 -113 q -34 -34 0 -68 l 113 -113 q 34 -34 68 0 l 113 113 q 34 34 0 68 l -16 16 h -16 q -64 0 -64 64 v 16 z M 172 264 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z m 0 -80 a 16 16 0 1 0 -1 0 Z" fill-rule="evenodd" />
</symbol>
<!-- act (-10) -->
<symbol id="act" >
<rect x="0" y="272" height="64" width="96" />
<path d="M 160 64 h 64 v 384 h -64 v -296 l -64 64 l -40 -40 Z" />
<path d="M 352 64 h 96 l 64 64 v 256 l -64 64 h -96 l -64 -64 v -256 l 64 -64 l 32 64 h 32 l 32 32 v 192 l -32 32 h -32 l -32 -32 v -192 l 32 -32" fill-rule="evenodd" />
</symbol>
<!-- take damage -->
<symbol id="take-damage" >
<path d="M 0 288 L 144 224 L 64 32 L 224 128 L 272 0 L 336 144 L 480 96 L 400 224 L 512 304 L 384 352 L 432 512 L 272 416 L 128 512 L 160 352 L 0 288 L 166 267 L 222 290 L 211 346 L 262 312 L 318 346 L 301 290 L 346 273 L 306 245 L 334 200 L 284 217 L 262 166 L 245 211 L 189 178 L 217 245 L 166 267" fill-rule="evenodd" />
</symbol>
<!-- more actions -->
<symbol id="more-actions" >
<polygon points="32 32 480 32 256 480" />
</symbol>
<!-- edit combatant -->
<symbol id="edit" >
<polygon points="0 512 0 352 224 128 384 288 160 512" />
<polygon points="352 0 512 160 416 256 256 96" />
</symbol>
<!-- clone combatant -->
<symbol id="clone" >
<rect x="0" y="0" width="512" height="128" />
<rect x="0" y="384" width="512" height="128" />
<polygon points="128 192 384 192 256 320" />
</symbol>
<!-- delete combatant -->
<symbol id="delete" >
<polygon points="96 0 416 0 416 64 480 64 480 128 32 128 32 64 96 64" />
<path d="M 64 512 H 448 V 160 H 64 V 512 L 128 480 V 192 H 192 V 480 H 224 V 192 H 288 V 480 H 320 V 192 H 384 V 480 H 128" fill-rule="evenodd" />
</symbol>
<!-- K.O. -->
<symbol id="ko" >
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 376 240 512 64" />
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.8) translate(-160,328) rotate(-20)" />
<polygon points="512 0 288 0 288 64 424 64 288 240 288 304 512 304 512 240 372 240 512 64" transform="scale(.6) translate(-232,768) rotate(-35) " />
</symbol>
<!-- dead -->
<symbol id="dead" >
<rect x="208" y="0" width="96" height="512" />
<rect x="80" y="112" width="352" height="96" />
</symbol>
</defs>
</svg>
<!-- footer -->
<div class="footer-container">
<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
<p>code & design by <a href="#" tabindex="-1" title="Eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
</footer>
</div>
</body> </body>
</html> </html>