19 lines
5.5 KiB
JavaScript
19 lines
5.5 KiB
JavaScript
const preact = require('preact');
|
|
|
|
module.exports = function molecule(combatText) {
|
|
const text = combatText
|
|
? <text x="0" y="400" class="combat-text">
|
|
{combatText}
|
|
<animate attributeType="XML" attributeName="y" from="300" to="200" dur="2s" repeatCount="1"/>
|
|
<animate attributeType="XML" attributeName="opacity" from="1" to="0" dur="2s" repeatCount="1"/>
|
|
</text>
|
|
: '';
|
|
|
|
return (<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
|
|
<rect style="fill: none;"></rect>
|
|
<g transform="translate(-133.97462520598594, -116.025374794014) "><g><line x1="325.9602631261639" x2="296.95475676906796" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="433.01268739700697" y2="466.5063436985035" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="500" y2="466.5063436985035" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="383.9712758403558" y1="299.038062191021" y2="265.5444058895245" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="383.9712758403558" x2="383.9712758403558" y1="232.050749588028" y2="265.5444058895245" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="500" x2="470.994493642904" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #1FF01F; stroke-width: 3; stroke-linecap: butt;"></line><line x1="441.98898728580804" x2="470.994493642904" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="470.994493642904" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="500" x2="470.994493642904" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="325.9602631261639" x2="296.95475676906796" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: butt;"></line><line x1="267.949250411972" x2="296.95475676906796" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #1FF01F;"></line></g><g><line x1="383.9712758403558" x2="354.96576948325986" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="354.96576948325986" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="412.98013156308195" y1="332.53171849251754" y2="315.78489034176926" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="412.98013156308195" y1="299.038062191021" y2="315.78489034176926" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="325.9602631261639" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="325.9602631261639" x2="325.9602631261639" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="383.9712758403558" x2="412.98013156308195" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="412.98013156308195" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="325.9602631261639" x2="354.96576948325986" y1="399.5190310955105" y2="416.26585924625874" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="383.9712758403558" x2="354.96576948325986" y1="433.01268739700697" y2="416.26585924625874" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g><line x1="441.98898728580804" x2="441.98898728580804" y1="399.5190310955105" y2="366.02537479401406" transform="" style="stroke: #909090; stroke-width: 3; stroke-linecap: round;"></line><line x1="441.98898728580804" x2="441.98898728580804" y1="332.53171849251754" y2="366.02537479401406" transform="" style="stroke-width: 3; stroke: #909090;"></line></g><g class="atom" transform="translate(267.949250411972, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 500) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(383.9712758403558, 232.050749588028) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(500, 299.038062191021) "><circle r="8" style="fill: #1FF01F;"></circle></g><g class="atom" transform="translate(267.949250411972, 433.01268739700697) "><circle r="8" style="fill: #1FF01F;"></circle></g>
|
|
</g>
|
|
{text}
|
|
</svg>);
|
|
};
|