Add types to components and remove unused components
This commit is contained in:
parent
0f17d49fae
commit
2e6c5f6215
@ -1,94 +0,0 @@
|
||||
<script>
|
||||
import {onMount, tick, beforeUpdate} from 'svelte' ;
|
||||
|
||||
let barcodeReady = false;
|
||||
let mounted = false;
|
||||
|
||||
onMount(() => {
|
||||
// The payment-form is ready.
|
||||
mounted = true;
|
||||
//if (barcodeReady) {
|
||||
loadBarcodeElements();
|
||||
//}
|
||||
});
|
||||
|
||||
//export const
|
||||
|
||||
const target = (bc) => bc.length < 9 ? 7 : 12;
|
||||
|
||||
let error;
|
||||
|
||||
$: format = barcode.length < 9 ? "EAN8" : "EAN13";
|
||||
|
||||
|
||||
function padBarcode(bc, length, pad = 0) {
|
||||
return bc;
|
||||
while (bc.length < length) {
|
||||
bc = pad + bc.toString();
|
||||
}
|
||||
|
||||
return bc;
|
||||
}
|
||||
|
||||
const loadBarcodeElements = () => {
|
||||
clearCanvas(document.getElementById("barcode").getContext("2d"));
|
||||
error = null;
|
||||
if (barcode != null && barcode.length > 0) {
|
||||
//bwipjs.toCanvas("barcode", {bcid:format, text: padBarcode(barcode, target(barcode))});
|
||||
try {
|
||||
|
||||
const x = JsBarcode("#barcode", padBarcode(barcode, target(barcode)), {format: format});
|
||||
console.log(x);
|
||||
} catch {
|
||||
error = "Invalid barcode"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export let barcode = "";
|
||||
|
||||
beforeUpdate(async () => {
|
||||
if (mounted) {
|
||||
loadBarcodeElements();
|
||||
}
|
||||
await tick();
|
||||
});
|
||||
|
||||
export const appendCheckDigit = () => {
|
||||
if (barcode.length === 7 || barcode.length === 12) {
|
||||
const check = eanCheckDigit(barcode);
|
||||
//if (barcode[barcode.length-1] !== check)
|
||||
//{
|
||||
barcode += check;
|
||||
//}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function clearCanvas(context, canvas = context.canvas) {
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
const w = canvas.width;
|
||||
canvas.width = 1;
|
||||
canvas.width = w;
|
||||
}
|
||||
|
||||
// definitely a hack.
|
||||
export const eanCheckDigit = (s) => {
|
||||
let x = JsBarcode("#barcode", s, {format: format});
|
||||
|
||||
//EAN barcodes by default have 5 parts (prefix -> left part -> middle seperator -> right part -> suffix)
|
||||
// we only want left & right part (which contain a text
|
||||
let calculated = "";
|
||||
x._encodings[0].filter(e => e.text !== "").forEach(e => calculated += e.text);
|
||||
console.log(calculated);
|
||||
return calculated[calculated.length - 1];
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<canvas id="barcode" width="50%" height="100%"></canvas>
|
||||
{#if error}
|
||||
<p>Error: {error}</p>
|
||||
{/if}
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
<script>
|
||||
import {getContext} from 'svelte';
|
||||
import {writable} from 'svelte/store';
|
||||
|
||||
const navigate = getContext('navigate');
|
||||
const navaid = getContext('navaid');
|
||||
|
||||
const base = navaid && navaid.base || writable('/');
|
||||
const library = navaid && navaid.library || writable(null);
|
||||
let props;
|
||||
let href;
|
||||
|
||||
export let append;
|
||||
|
||||
$: {
|
||||
props = {...$$props};
|
||||
href = props.href;
|
||||
delete props.href;
|
||||
href = ($library && $library.prefix ? $library.prefix : '') + (!append ? $base : '') + href.replace(/^\//, '');
|
||||
}
|
||||
|
||||
const click = () => {
|
||||
navigate(href);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
span {
|
||||
text-decoration: none;
|
||||
padding: 1rem 0.5rem;
|
||||
display: block;
|
||||
color: #005de6;
|
||||
}
|
||||
</style>
|
||||
|
||||
<span {...props} on:click={click}><slot></slot></span>
|
||||
@ -1,19 +1,24 @@
|
||||
<script>
|
||||
import {setContext as baseSetContext, createEventDispatcher} from 'svelte';
|
||||
import {fade} from 'svelte/transition';
|
||||
<script lang="ts">
|
||||
//@ts-nocheck
|
||||
import {
|
||||
setContext as baseSetContext,
|
||||
createEventDispatcher,
|
||||
} from "svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
|
||||
export let key = 'simple-modal';
|
||||
export let key = "simple-modal";
|
||||
export let closeButton = true;
|
||||
export let closeOnEsc = true;
|
||||
export let closeOnOuterClick = true;
|
||||
export let transitionBg = fade;
|
||||
export let transitionBgProps = {duration: 250};
|
||||
export let transitionBgProps = { duration: 250 };
|
||||
export let transitionWindow = transitionBg;
|
||||
export let transitionWindowProps = transitionBgProps;
|
||||
export let styleBg = {top: 0, left: 0};
|
||||
export let styleBg = { top: 0, left: 0 };
|
||||
export let styleWindow = {};
|
||||
export let styleContent = {};
|
||||
export let setContext = baseSetContext;
|
||||
export let show: boolean = false;
|
||||
|
||||
let Component = null;
|
||||
let props = null;
|
||||
@ -24,23 +29,38 @@
|
||||
let customStyleWindow = {};
|
||||
let customStyleContent = {};
|
||||
|
||||
let Callback = (props) => {
|
||||
};
|
||||
let Callback = (props) => {};
|
||||
|
||||
$: Component,
|
||||
() => {
|
||||
show = !!Component;
|
||||
};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const camelCaseToDash = str => str
|
||||
.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase();
|
||||
const camelCaseToDash = (str) =>
|
||||
str.replace(/([a-zA-Z])(?=[A-Z])/g, "$1-").toLowerCase();
|
||||
|
||||
const toCssString = (props) => Object.keys(props)
|
||||
.reduce((str, key) => `${str}; ${camelCaseToDash(key)}: ${props[key]}`, '');
|
||||
const toCssString = (props) =>
|
||||
Object.keys(props).reduce(
|
||||
(str, key) => `${str}; ${camelCaseToDash(key)}: ${props[key]}`,
|
||||
""
|
||||
);
|
||||
|
||||
$: cssBg = toCssString(Object.assign({}, styleBg, customStyleBg));
|
||||
$: cssWindow = toCssString(Object.assign({}, styleWindow, customStyleWindow));
|
||||
$: cssContent = toCssString(Object.assign({}, styleContent, customStyleContent));
|
||||
$: cssWindow = toCssString(
|
||||
Object.assign({}, styleWindow, customStyleWindow)
|
||||
);
|
||||
$: cssContent = toCssString(
|
||||
Object.assign({}, styleContent, customStyleContent)
|
||||
);
|
||||
|
||||
const open = (NewComponent, newProps = {}, style = {bg: {}, window: {}, content: {}}, newCallback = () => {
|
||||
}) => {
|
||||
const open = (
|
||||
NewComponent,
|
||||
newProps = {},
|
||||
style = { bg: {}, window: {}, content: {} },
|
||||
newCallback = () => {}
|
||||
) => {
|
||||
Component = NewComponent;
|
||||
props = newProps;
|
||||
Callback = newCallback;
|
||||
@ -58,8 +78,8 @@
|
||||
customStyleContent = {};
|
||||
};
|
||||
|
||||
const handleKeyup = ({key}) => {
|
||||
if (closeOnEsc && Component && key === 'Escape') {
|
||||
const handleKeyup = ({ key }) => {
|
||||
if (closeOnEsc && Component && key === "Escape") {
|
||||
event.preventDefault();
|
||||
close();
|
||||
}
|
||||
@ -67,18 +87,47 @@
|
||||
|
||||
const handleOuterClick = (event) => {
|
||||
if (
|
||||
closeOnOuterClick && (
|
||||
event.target === background || event.target === wrap
|
||||
)
|
||||
closeOnOuterClick &&
|
||||
(event.target === background || event.target === wrap)
|
||||
) {
|
||||
event.preventDefault();
|
||||
close();
|
||||
}
|
||||
};
|
||||
|
||||
setContext(key, {open, close});
|
||||
setContext(key, { open: show, close });
|
||||
</script>
|
||||
|
||||
<svelte:window on:keyup={handleKeyup} />
|
||||
|
||||
<div>
|
||||
{#if Component}
|
||||
<div
|
||||
class="bg"
|
||||
on:click={handleOuterClick}
|
||||
bind:this={background}
|
||||
transition:transitionBg={transitionBgProps}
|
||||
style={cssBg}
|
||||
>
|
||||
<div class="window-wrap" bind:this={wrap}>
|
||||
<div
|
||||
class="window"
|
||||
transition:transitionWindow={transitionWindowProps}
|
||||
style={cssWindow}
|
||||
>
|
||||
{#if closeButton}
|
||||
<button on:click={close} class="close" />
|
||||
{/if}
|
||||
<div class="content" style={cssContent}>
|
||||
<Component {...props} {close} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<!--
|
||||
|
||||
** LICENSE **
|
||||
@ -165,12 +214,13 @@ https://github.com/flekschas/svelte-simple-moda
|
||||
background: white;
|
||||
box-shadow: 0 0 0 1px black;
|
||||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.close:before, .close:after {
|
||||
content: '';
|
||||
.close:before,
|
||||
.close:after {
|
||||
content: "";
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
@ -180,7 +230,7 @@ https://github.com/flekschas/svelte-simple-moda
|
||||
background: black;
|
||||
transform-origin: center;
|
||||
transition: height 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
||||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
||||
}
|
||||
|
||||
.close:before {
|
||||
@ -201,7 +251,8 @@ https://github.com/flekschas/svelte-simple-moda
|
||||
background: black;
|
||||
}
|
||||
|
||||
.close:hover:before, .close:hover:after {
|
||||
.close:hover:before,
|
||||
.close:hover:after {
|
||||
height: 2px;
|
||||
background: white;
|
||||
}
|
||||
@ -215,35 +266,9 @@ https://github.com/flekschas/svelte-simple-moda
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.close:hover, .close:focus, .close:active {
|
||||
.close:hover,
|
||||
.close:focus,
|
||||
.close:active {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:keyup={handleKeyup}/>
|
||||
|
||||
<div>
|
||||
{#if Component}
|
||||
<div
|
||||
class="bg"
|
||||
on:click={handleOuterClick}
|
||||
bind:this={background}
|
||||
transition:transitionBg={transitionBgProps}
|
||||
style={cssBg}>
|
||||
<div class="window-wrap" bind:this={wrap}>
|
||||
<div
|
||||
class="window"
|
||||
transition:transitionWindow={transitionWindowProps}
|
||||
style={cssWindow}>
|
||||
{#if closeButton}
|
||||
<button on:click={close} class="close"></button>
|
||||
{/if}
|
||||
<div class="content" style={cssContent}>
|
||||
<Component {...props} {close}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,24 @@
|
||||
<script lang="ts">
|
||||
import { fly } from "svelte/transition";
|
||||
import Modal from "./Modal.svelte";
|
||||
|
||||
const click = () => {
|
||||
modal_show = true;
|
||||
show = false;
|
||||
};
|
||||
|
||||
function overlay_click(e: MouseEvent) {
|
||||
//@ts-ignore
|
||||
if ("close" in e.target.dataset) show = false;
|
||||
}
|
||||
|
||||
export let show = false;
|
||||
let modal_show = false;
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="overlay" data-close on:click={overlay_click}>
|
||||
<nav transition:fly={{x: -250, opacity: 1}}>
|
||||
<nav transition:fly={{ x: -250, opacity: 1 }}>
|
||||
<slot>
|
||||
<button on:click={click}>About</button>
|
||||
</slot>
|
||||
@ -8,25 +26,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Modal bind:show={modal_show}/>
|
||||
|
||||
<script>
|
||||
import {fly} from 'svelte/transition';
|
||||
import Modal from './Modal.svelte';
|
||||
|
||||
const click = () => {
|
||||
modal_show = true;
|
||||
show = false;
|
||||
};
|
||||
|
||||
function overlay_click(e) {
|
||||
if ('close' in e.target.dataset)
|
||||
show = false;
|
||||
}
|
||||
|
||||
export let show = false;
|
||||
let modal_show = false;
|
||||
</script>
|
||||
<Modal bind:show={modal_show} />
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
@ -53,4 +53,4 @@
|
||||
overflow-y: auto;
|
||||
width: 20rem;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -1,23 +1,23 @@
|
||||
<script>
|
||||
|
||||
import {quintOut} from "svelte/easing";
|
||||
import {crossfade} from "svelte/transition";
|
||||
import {flip} from "svelte/animate";
|
||||
<script lang="ts">
|
||||
//@ts-nocheck
|
||||
import { quintOut } from "svelte/easing";
|
||||
import { crossfade } from "svelte/transition";
|
||||
import { flip } from "svelte/animate";
|
||||
// FLIP ANIMATION
|
||||
const [send, receive] = crossfade({
|
||||
duration: d => Math.sqrt(d * 200),
|
||||
duration: (d) => Math.sqrt(d * 200),
|
||||
fallback(node, params) {
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === "none" ? "" : style.transform;
|
||||
return {
|
||||
duration: 600,
|
||||
easing: quintOut,
|
||||
css: t => `
|
||||
css: (t) => `
|
||||
transform: ${transform} scale(${t});
|
||||
opacity: ${t}
|
||||
`
|
||||
`,
|
||||
};
|
||||
}
|
||||
},
|
||||
});
|
||||
// DRAG AND DROP
|
||||
let isOver = false;
|
||||
@ -25,56 +25,68 @@
|
||||
const getDraggedParent = (node) => {
|
||||
return node.dataset && node.dataset.index
|
||||
? node.dataset
|
||||
: getDraggedParent(node.parentNode)
|
||||
: getDraggedParent(node.parentNode);
|
||||
};
|
||||
const click = ev => {
|
||||
const click = (ev) => {
|
||||
dispatch("slotclick", {
|
||||
source: ev.target.parentElement.dataset.index,
|
||||
sourceItem: list[ev.target.parentElement.dataset.index]
|
||||
sourceItem: list[ev.target.parentElement.dataset.index],
|
||||
});
|
||||
};
|
||||
const start = ev => {
|
||||
const start = (ev) => {
|
||||
isDragging = true;
|
||||
ev.dataTransfer.setData("source", ev.target.dataset.index);
|
||||
};
|
||||
const over = ev => {
|
||||
const over = (ev) => {
|
||||
ev.preventDefault();
|
||||
let dragged = getDraggedParent(ev.target);
|
||||
if (isOver !== dragged.id) isOver = JSON.parse(dragged.id);
|
||||
};
|
||||
const leave = ev => {
|
||||
const leave = (ev) => {
|
||||
let dragged = getDraggedParent(ev.target);
|
||||
if (isOver === dragged.id) isOver = false;
|
||||
};
|
||||
const drop = ev => {
|
||||
const drop = (ev) => {
|
||||
isOver = false;
|
||||
ev.preventDefault();
|
||||
let dragged = getDraggedParent(ev.target);
|
||||
let from = ev.dataTransfer.getData("source");
|
||||
let to = dragged.index;
|
||||
reorder({from, to});
|
||||
reorder({ from, to });
|
||||
isDragging = false;
|
||||
};
|
||||
// DISPATCH REORDER
|
||||
import {createEventDispatcher, onMount, afterUpdate, beforeUpdate, tick} from "svelte";
|
||||
import {
|
||||
createEventDispatcher,
|
||||
onMount,
|
||||
afterUpdate,
|
||||
beforeUpdate,
|
||||
tick,
|
||||
} from "svelte";
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const reorder = ({from, to}) => {
|
||||
const reorder = ({ from, to }) => {
|
||||
let newList = [...list];
|
||||
let temp = newList[from];
|
||||
newList[from] = newList[to];
|
||||
newList[to] = temp;
|
||||
//newList[from] = [newList[to], (newList[to] = newList[from])][0];
|
||||
dispatch("sort", {data: newList, from: from, to: to});
|
||||
dispatch("sort", { data: newList, from: from, to: to });
|
||||
};
|
||||
// UTILS
|
||||
const getKey = item => (key ? item[key] : item);
|
||||
const getKey = (item) => (key ? item[key] : item);
|
||||
|
||||
type ListItem = {
|
||||
displayTileSize: number;
|
||||
endsGroup: boolean;
|
||||
startsNewGroup: boolean;
|
||||
};
|
||||
// PROPS
|
||||
export let list;
|
||||
export let list: ListItem[][];
|
||||
export let key;
|
||||
export let ulclass;
|
||||
|
||||
export let breakon;
|
||||
export let breakon: string | null = null;
|
||||
|
||||
export let breakComponent;
|
||||
// return `<><li class='${breakClass}' style='height:100%; grid-column: span 5;'><div style='width:100%;height:inherit;'></li>`;
|
||||
@ -113,16 +125,16 @@
|
||||
let carry = 0;
|
||||
let elements = Elements();
|
||||
|
||||
|
||||
for (let x = 0; x < list.length; x++) {
|
||||
|
||||
if (last != null) {
|
||||
if (list[x][breakon] > last) {
|
||||
|
||||
if (elements.length) {
|
||||
let targetIndex = x + breaks;
|
||||
|
||||
if (list.length !== elements[0].children.length - breaks) {
|
||||
if (
|
||||
list.length !==
|
||||
elements[0].children.length - breaks
|
||||
) {
|
||||
if (lastCollection)
|
||||
if (lastCollection.length)
|
||||
targetIndex += lastCollection.length;
|
||||
@ -159,23 +171,49 @@
|
||||
updateBreak();
|
||||
|
||||
updating = false;
|
||||
|
||||
});
|
||||
|
||||
const getClass = () => {
|
||||
let ret = "";
|
||||
if (key)
|
||||
ret += ` ${key}`;
|
||||
if (ulclass)
|
||||
ret += ` ${ulclass}`;
|
||||
if (key) ret += ` ${key}`;
|
||||
if (ulclass) ret += ` ${ulclass}`;
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
{#if list && list.length}
|
||||
<ul class={getClass()}>
|
||||
{#each list as item, index (getKey(item))}
|
||||
<li
|
||||
class:small={item.displayTileSize === 2}
|
||||
class:medium={item.displayTileSize === 3}
|
||||
class:large={item.displayTileSize === 4}
|
||||
class:startsNewGroup={item.startsNewGroup}
|
||||
class:endsGroup={item.endsGroup}
|
||||
data-index={index}
|
||||
data-item={JSON.stringify(item)}
|
||||
data-id={JSON.stringify(getKey(item))}
|
||||
draggable="true"
|
||||
on:dragstart={start}
|
||||
on:dragover={over}
|
||||
on:dragleave={leave}
|
||||
on:drop={drop}
|
||||
on:click={click}
|
||||
in:receive={{ key: getKey(item) }}
|
||||
out:send={{ key: getKey(item) }}
|
||||
animate:flip={{ duration: 300 }}
|
||||
class:over={getKey(item) === isOver}
|
||||
>
|
||||
<slot {item} {index}>
|
||||
<p>{getKey(item)}</p>
|
||||
</slot>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
ul {
|
||||
display: inline-grid;
|
||||
list-style: none;
|
||||
@ -189,7 +227,7 @@
|
||||
transition: border 0.1s linear;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: .5%;
|
||||
margin: 0.5%;
|
||||
}
|
||||
|
||||
.startsNewGroup {
|
||||
@ -215,35 +253,3 @@
|
||||
border-color: rgba(48, 12, 200, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if list && list.length}
|
||||
<ul class={getClass()}>
|
||||
{#each list as item, index (getKey(item))}
|
||||
<li
|
||||
class:small={item.displayTileSize === 2}
|
||||
class:medium={item.displayTileSize === 3}
|
||||
class:large={item.displayTileSize === 4}
|
||||
class:startsNewGroup={item.startsNewGroup}
|
||||
class:endsGroup={item.endsGroup}
|
||||
data-index={index}
|
||||
data-item={JSON.stringify(item)}
|
||||
data-id={JSON.stringify(getKey(item))}
|
||||
draggable="true"
|
||||
on:dragstart={start}
|
||||
on:dragover={over}
|
||||
on:dragleave={leave}
|
||||
on:drop={drop}
|
||||
on:click={click}
|
||||
in:receive={{ key: getKey(item) }}
|
||||
out:send={{ key: getKey(item) }}
|
||||
animate:flip={{ duration: 300 }}
|
||||
class:over={getKey(item) === isOver}>
|
||||
|
||||
<slot {item} {index}>
|
||||
<p>{getKey(item)}</p>
|
||||
</slot>
|
||||
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
@ -1,11 +1,24 @@
|
||||
<script>
|
||||
export let name;
|
||||
export let link;
|
||||
<script lang="ts">
|
||||
export let name: string;
|
||||
export let link: string;
|
||||
export let img = "https://placehold.it/600x300";
|
||||
export let size = { width: 600, height: 300 };
|
||||
export let description;
|
||||
export let description: string;
|
||||
</script>
|
||||
|
||||
<div class="card">
|
||||
<div class="back">
|
||||
<a href={link}>
|
||||
<img src={img} alt={name} width={size.width} height={size.height} />
|
||||
</a>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h2>{name}</h2>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<style>
|
||||
.card {
|
||||
display: flex;
|
||||
@ -28,16 +41,3 @@
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="card">
|
||||
<div class="back">
|
||||
<a href="{link}">
|
||||
<img src={img} alt={name} width={size.width} height={size.height}>
|
||||
</a>
|
||||
</div>
|
||||
<div class="description">
|
||||
<h2>{name}</h2>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
<script>
|
||||
import {onMount} from 'svelte'
|
||||
import Banner from '../components/Banner.svelte'
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Banner from "../components/Banner.svelte";
|
||||
|
||||
export let status;
|
||||
export let error;
|
||||
export let status: string;
|
||||
export let error: Error;
|
||||
|
||||
const dev = process.env.NODE_ENV === 'development';
|
||||
const dev = process.env.NODE_ENV === "development";
|
||||
|
||||
var appa = ` .,-:;//;:=,
|
||||
var appa = ` .,-:;//;:=,
|
||||
. :H@@@MM@M#H/.,+%;,
|
||||
,/X+ +M@@M@MM%=,-%HMMM@X/,
|
||||
-+@MM; $M@@MH+-,;XMMMM@MMMM@+-
|
||||
@ -28,7 +28,7 @@
|
||||
,:+$+-,/H#MMMMMMM@- -,
|
||||
=++%%%%+/:-.`;
|
||||
|
||||
var nuke = ` =+$HM####@H%;,
|
||||
var nuke = ` =+$HM####@H%;,
|
||||
/H###############M$,
|
||||
,@################+
|
||||
.H##############+
|
||||
@ -49,7 +49,7 @@ X##############%, ,+##############X
|
||||
.+M###@, ,@###M+.
|
||||
:XH. .HX:`;
|
||||
|
||||
var atom = ` =/;;/-
|
||||
var atom = ` =/;;/-
|
||||
+: //
|
||||
/; /;
|
||||
-X H.
|
||||
@ -70,7 +70,7 @@ M- ,=;;;#:, ,:#;;:=, ,@
|
||||
// +;
|
||||
,////,`;
|
||||
|
||||
var heart = ` .,---.
|
||||
var heart = ` .,---.
|
||||
,/XM#MMMX;,
|
||||
-%##########M%,
|
||||
-@######% $###@=
|
||||
@ -91,7 +91,7 @@ X################, -$=X#######@:
|
||||
.,/X$; .::,
|
||||
., ..`;
|
||||
|
||||
var fire = ` -$-
|
||||
var fire = ` -$-
|
||||
.H##H,
|
||||
+######+
|
||||
.+#########H.
|
||||
@ -112,7 +112,7 @@ X################, -$=X#######@:
|
||||
/XHX%:#####MH%= ,---:;;;;/&&XHM,:###$
|
||||
$@#MX %+;- .`;
|
||||
|
||||
var tick = ` :X-
|
||||
var tick = ` :X-
|
||||
:X###
|
||||
;@####@
|
||||
;M######X
|
||||
@ -133,7 +133,7 @@ $@#MX %+;- .`;
|
||||
+####:
|
||||
,$M-`;
|
||||
|
||||
var bang = ` .+
|
||||
var bang = ` .+
|
||||
/M;
|
||||
H#@: ;,
|
||||
-###H- -@/
|
||||
@ -154,7 +154,7 @@ $@#MX %+;- .`;
|
||||
.#H, :XH,
|
||||
+ .;-`;
|
||||
|
||||
var mesa = ` .-;+$XHHHHHHX$+;-.
|
||||
var mesa = ` .-;+$XHHHHHHX$+;-.
|
||||
,;X@@X%/;=----=:/%X@@X/,
|
||||
=$@@%=. .=+H@X:
|
||||
-XMX: =XMX=
|
||||
@ -175,7 +175,7 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
|
||||
,;$@@@@@@@@@@@@@@@@@@X/-
|
||||
.-;+$XXHHHHHX$+;-.`;
|
||||
|
||||
var cube = ` #+ @ # # M#@
|
||||
var cube = ` #+ @ # # M#@
|
||||
. .X X.%##@;# # +@#######X. @H%
|
||||
,==. ,######M+ -#####%M####M- #
|
||||
:H##M%:=##+ .M##M,;#####/+#######% ,M#
|
||||
@ -196,7 +196,7 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
|
||||
H#M /@####/ ,++. / ==-,
|
||||
,=/:, .+X@MMH@#H #####$=`;
|
||||
|
||||
var cake = ` ,:/+/-
|
||||
var cake = ` ,:/+/-
|
||||
/M/ .,-=;//;-
|
||||
.:/= ;MH/, ,=/+%$XH@MM#@:
|
||||
-$##@+$###@H@MMM#######H:. -/H#
|
||||
@ -217,23 +217,70 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
|
||||
,:/%XM####H/.
|
||||
,.:=-.`;
|
||||
|
||||
// appa, atom, nuke
|
||||
var options = [cake, heart, fire, tick, bang, mesa, cube];
|
||||
let active = cake
|
||||
// appa, atom, nuke
|
||||
var options = [cake, heart, fire, tick, bang, mesa, cube];
|
||||
let active = cake;
|
||||
|
||||
function updateView() {
|
||||
active = options[Math.floor((Math.random() * options.length))];
|
||||
setTimeout(updateView, 5000);
|
||||
}
|
||||
function updateView() {
|
||||
active = options[Math.floor(Math.random() * options.length)];
|
||||
setTimeout(updateView, 5000);
|
||||
}
|
||||
|
||||
onMount(() => updateView());
|
||||
onMount(() => updateView());
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartnzet - {status}</title>
|
||||
</svelte:head>
|
||||
|
||||
<Banner title={status} />
|
||||
|
||||
<main class="container">
|
||||
<p>{error.message}</p>
|
||||
|
||||
{#if dev && error.stack}
|
||||
<pre>{error.stack}</pre>
|
||||
{:else}
|
||||
<audio controls autoplay>
|
||||
<track kind="captions" />
|
||||
<source src="http://quartznet.info/alive.ogg" type="audio/wav" />
|
||||
</audio>
|
||||
<div class="ascii">
|
||||
<div>
|
||||
<pre><br />{active}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
<p class="info">
|
||||
This was a triumph! I'm making a note here: Huge success! It's hard to
|
||||
overstate my satisfaction. Aperture Science: We do what we must because we
|
||||
can For the good of all of us. Except the ones who are dead. But there's
|
||||
no sense crying over every mistake. You just keep on trying 'til you run
|
||||
out of cake. And the science gets done. And you make a neat gun for the
|
||||
people who are still alive. I'm not even angry... I'm being so sincere
|
||||
right now. Even though you broke my heart, and killed me. And tore me to
|
||||
pieces. And threw every piece into a fire. As they burned it hurt because
|
||||
I was so happy for you! Now, these points of data make a beautiful line.
|
||||
And we're out of beta. We're releasing on time! So I'm GLaD I got burned!
|
||||
Think of all the things we learned! for the people who are still alive. Go
|
||||
ahead and leave me... I think I'd prefer to stay inside... Maybe you'll
|
||||
find someone else to help you. Maybe Black Mesa? That was a joke. Ha Ha.
|
||||
Fat Chance! Anyway this cake is great! It's so delicious and moist! Look
|
||||
at me: still talking when there's science to do! When I look out there, it
|
||||
makes me glad I'm not you. I've experiments to run. There is research to
|
||||
be done. On the people who are still alive. And believe me I am still
|
||||
alive. I'm doing science and I'm still alive. I feel fantastic and I'm
|
||||
still alive. While you're dying I'll be still alive. And when you're dead
|
||||
I will be still alive Still alive. Still alive.
|
||||
</p>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<style>
|
||||
* {
|
||||
color: white !important;
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
color: white !important;
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.ascii {
|
||||
@ -249,109 +296,8 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0 auto;
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
margin: 0 auto;
|
||||
font-family: monospace;
|
||||
white-space: pre;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:head>
|
||||
<title>Quartnzet - {status}</title>
|
||||
</svelte:head>
|
||||
|
||||
<Banner title="{status}"/>
|
||||
|
||||
<main class="container">
|
||||
<p>{error.message}</p>
|
||||
|
||||
{#if dev && error.stack}
|
||||
<pre>{error.stack}</pre>
|
||||
{:else}
|
||||
<audio controls autoplay>
|
||||
<track kind="captions"/>
|
||||
<source src="http://quartznet.info/alive.ogg" type="audio/wav">
|
||||
</audio>
|
||||
<div class="ascii">
|
||||
<div>
|
||||
<pre><br>{active}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<p class="info">
|
||||
This was a triumph!
|
||||
I'm making a note here:
|
||||
Huge success!
|
||||
|
||||
It's hard to overstate
|
||||
my satisfaction.
|
||||
|
||||
Aperture Science:
|
||||
We do what we must
|
||||
because we can
|
||||
For the good of all of us.
|
||||
Except the ones who are dead.
|
||||
|
||||
But there's no sense crying
|
||||
over every mistake.
|
||||
You just keep on trying
|
||||
'til you run out of cake.
|
||||
And the science gets done.
|
||||
And you make a neat gun
|
||||
for the people who are
|
||||
still alive.
|
||||
|
||||
I'm not even angry...
|
||||
I'm being so sincere right now.
|
||||
Even though you broke my heart,
|
||||
and killed me.
|
||||
|
||||
And tore me to pieces.
|
||||
And threw every piece into a fire.
|
||||
As they burned it hurt because
|
||||
I was so happy for you!
|
||||
|
||||
Now, these points of data
|
||||
make a beautiful line.
|
||||
And we're out of beta.
|
||||
We're releasing on time!
|
||||
So I'm GLaD I got burned!
|
||||
Think of all the things we learned!
|
||||
for the people who are
|
||||
still alive.
|
||||
|
||||
Go ahead and leave me...
|
||||
I think I'd prefer to stay inside...
|
||||
Maybe you'll find someone else
|
||||
to help you.
|
||||
Maybe Black Mesa?
|
||||
That was a joke. Ha Ha. Fat Chance!
|
||||
|
||||
Anyway this cake is great!
|
||||
It's so delicious and moist!
|
||||
|
||||
Look at me: still talking
|
||||
when there's science to do!
|
||||
When I look out there,
|
||||
it makes me glad I'm not you.
|
||||
|
||||
I've experiments to run.
|
||||
There is research to be done.
|
||||
On the people who are
|
||||
still alive.
|
||||
And believe me I am
|
||||
still alive.
|
||||
I'm doing science and I'm
|
||||
still alive.
|
||||
I feel fantastic and I'm
|
||||
still alive.
|
||||
While you're dying I'll be
|
||||
still alive.
|
||||
And when you're dead I will be
|
||||
still alive
|
||||
|
||||
Still alive.
|
||||
|
||||
Still alive.
|
||||
</p>
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user