boss warning gen

public/blabla-npcs.json

@@ -0,0 +1,89 @@
+[
+    ["marian", "si_c013_00_s"],
+
+    ["male generic", "si_c911_00_s"],
+    ["female generic", "si_c912_00_s"],
+
+    ["male commander", "si_c916_00_s"],
+    ["female commander", "si_c917_00_s"],
+
+    ["andersen", "si_c903_00_s"],
+    ["andersen: soaky shower", "si_c903_01_00_s"],
+    ["shifty", "si_c907_00_s"],
+    ["shifty: old", "si_c907_01_00_s"],
+    ["ingrid", "si_c900_00_s"],
+    ["syuen", "si_c901_00_s"],
+    ["mustang", "si_c902_00_s"],
+
+    ["einkk", "si_c928_00_s"],
+    ["enikk", "si_c904_00_s"],
+
+    ["burningum", "si_c914_00_s"],
+    ["cecil", "si_c929_00_s"],
+    ["doban", "si_c939_00_s"],
+    ["e.h.", "si_c940_00_s"],
+    ["johan", "si_c925_00_s"],
+    ["legendary commander", "si_c942_00_s"],
+
+    ["ade", "si_c310_00_s"],
+    ["anachiro", "si_c944_00_s"],
+    ["cinderella", "si_c944_00_s"],
+    ["ein", "si_c391_00_s"],
+    ["indivilia", "si_c263_00_s"],
+    ["k", "si_c041_00_s"],
+    ["liberalio", "si_c262_00_s"],
+    ["liliweiss", "si_c943_00_s"],
+    ["mana", "si_c290_00_s"],
+    ["moran", "si_c281_00_s"],
+    ["papillion", "si_c908_00_s"],
+    ["pinne", "si_c941_00_s"],
+    ["rian", "si_c905_00_s"],
+    ["rouge", "si_c272_00_s"],
+    ["rumani", "si_c240_00_s"],
+    ["zwei", "si_c390_00_s"],
+
+    ["boss: blacksmith", "si_bbg003_00_s"],
+    ["boss: gravedigger", "si_mbg002_00_s"],
+    ["boss: alteisen", "si_mbg001_00_s"],
+    ["boss: chatterbox", "si_bbg002_00_s"],
+    ["boss: land eater", "si_ebg001_00_s"],
+    ["boss: modernia", "si_mbg004_00_s"],
+    ["boss: mother whale", "si_bba001_00_s"],
+    ["boss: harvester", "si_bbg001_00_s"],
+    ["boss: material h", "si_ebg002_00_s"],
+    ["boss: storm bringer", "si_eba001_00_s"],
+    ["boss: nihilister", "si_mba002_00_s"],
+    ["boss: gatekeeper red", "si_eba003_hsta_00_s"],
+    ["boss: gatekeeper green", "si_eba003_green_00_s"],
+    ["boss: gatekeeper blue", "si_eba003_00_s"],
+
+    ["angelina", "si_c934_00_s"],
+    ["joseph", "si_c935_00_s"],
+    ["beatrice", "si_c930_00_s"],
+    ["booboo", "si_c937_00_s"],
+    ["max", "si_c936_00_s"],
+
+    ["9s", "si_c813_00_s"],
+
+    ["aki hayakawa", "si_c804_00_s"],
+    ["denji", "si_c803_00_s"],
+    ["denji chainsaw man", "si_c803_01_00_s"],
+
+    ["oswald", "si_c961_00_s"],
+    ["ruru", "si_c946_00_s"],
+    ["bolt", "si_c933_00_s"],
+    ["bolt junior", "si_c932_00_s"],
+
+    ["mass produced red", "si_c250_00_s"],
+    ["mass produced blue", "si_c251_00_s"],
+    ["mass produced orange", "si_c252_00_s"],
+    ["mass produced green", "si_c253_00_s"],
+    ["mass produced purple", "si_c254_00_s"],
+    ["mass produced white", "si_c255_00_s"],
+
+    ["rose", "si_c971_00_s"],
+    ["mass produced melee old", "si_c974_00_s"],
+    ["mass produced melee", "si_c974_01_00_s"],
+
+    ["timi", "si_c975_00_s"]
+]

src/components/Credits.astro

@@ -7,10 +7,16 @@
         <b><a href="https://forms.gle/1vjafHbnhteQURTY7">Caught a bug? Report it here!</a></b>
     </p>
     <p>
-        <b>more tools: </b>  <a href="/nikke-font-generator/">logo generator</a> | <a href="/nikke-font-generator/dialogue">dialogue generator</a> | <a href="/nikke-font-generator/blabla">blabla generator</a>
+        <div class="toolbox">
+            <p style="opacity: 1;"><b>more tools:</b></p>
+            <a href="/nikke-font-generator/"><img class="pnglink" src="/nikke-font-generator/images/icon_logo.png" alt="Logo Generator" title="Logo Generator" /></a>
+            <a href="/nikke-font-generator/dialogue"><img class="pnglink" src="/nikke-font-generator/images/icon_dialogue.png" alt="Dialogue Generator" title="Dialogue Generator" /></a>
+            <a href="/nikke-font-generator/blabla"><img class="pnglink" src="/nikke-font-generator/images/icon_blabla.png" alt="Blabla Generator" title="Blabla Generator" /></a>
+            <a href="/nikke-font-generator/warning"><img class="pnglink" src="/nikke-font-generator/images/icon_boss.png" alt="Boss Warning Generator" title="Boss Warning Generator" /></a>
+        </div>
     </p>
     <p>
-        made by skuqre. more at <a href="https://skuqre.github.io">skuqre.github.io</a> | <a href="/nikke-font-generator/credits">credits</a> | <a href="/nikke-font-generator/usage">usage</a> | <a href="https://github.com/skuqre/nikke-font-generator">source code</a> | <a href="/nikke-font-generator/update-log">update log</a> | <a href="/nikke-font-generator/translation">translation notice</a>
+        made by skuqre. more at <a href="https://skuqre.github.io">skuqre.github.io</a> | <a href="/nikke-font-generator/credits">credits</a> | <a href="/nikke-font-generator/usage">usage</a> | <a href="https://github.com/skuqre/nikke-font-generator">source code</a> | <a href="/nikke-font-generator/update-log">update log</a>
     </p>
 </div>
 
@@ -25,4 +31,31 @@
         opacity: 1;
         transition: opacity 0.2s ease-in-out;
     }
+
+    div.toolbox {
+        display: flex;
+        margin: auto;
+        margin-top: 8px;
+        justify-content: center;
+        align-items: center;
+        gap: 16px;
+    }
+
+    img.pnglink {
+        filter: hue-rotate(355deg);
+        opacity: 0.5;
+        scale: 1;
+
+        transition-property: filter, opacity, scale;
+        transition: 0.2s ease-in-out;
+    }
+
+    img.pnglink:hover {
+        filter: brightness(0) saturate(100%) grayscale(0) invert(82%) sepia(19%) saturate(1288%) hue-rotate(355deg) brightness(105%) contrast(91%);
+        opacity: 1;
+        scale: 1.1;
+
+        transition-property: filter, opacity, scale;
+        transition: 0.2s ease-in-out;
+    }
 </style>

src/components/WarningDisplay.astro

@@ -0,0 +1,31 @@
+---
+
+---
+
+<div class='warning-display'>
+    <canvas id="warning-canvas" width="1920" height="1080"></canvas>
+</div>
+
+<script>
+    document.querySelectorAll('canvas#warning-canvas')[0].addEventListener('click', () => {
+        var link = document.createElement('a');
+        var canvas: HTMLCanvasElement = document.getElementById('warning-canvas') as HTMLCanvasElement
+        link.download = 'nikke-warning.png';
+        link.href = canvas.toDataURL()
+        link.click();
+    });
+</script>
+
+<style>
+    div.warning-display {
+        display: flex;
+        width: 100%;
+        margin: 0;
+    }
+
+    canvas#warning-canvas {
+        max-width: 90%;
+        max-height: 540px;
+        margin: auto;
+    }
+</style>