martials/old.martials.no
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated dependencies.

Browse Source 
Added prettier and formatted.
Fixed bug causing back button to not show at all times.
This commit is contained in:
Martin Berg Alstad 2024-02-25 00:18:02 +01:00
parent ecd9f50029
commit 0528645838
36 changed files with 2815 additions and 1938 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
.idea/codeStyles/Project.xml generated Normal file
View File

@ -0,0 +1,89 @@
<component name="ProjectCodeStyleConfiguration">
<code_scheme name="Project" version="173">
<HTMLCodeStyleSettings>
<option name="HTML_ALIGN_TEXT" value="true" />
<option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
<option name="HTML_DO_NOT_INDENT_CHILDREN_OF" value="" />
</HTMLCodeStyleSettings>
<JSCodeStyleSettings version="0">
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="Remove" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
<option name="SPACES_WITHIN_INTERPOLATION_EXPRESSIONS" value="true" />
</JSCodeStyleSettings>
<JetCodeStyleSettings>
<option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
</JetCodeStyleSettings>
<Objective-C>
<option name="KEEP_STRUCTURES_IN_ONE_LINE" value="true" />
<option name="KEEP_CASE_EXPRESSIONS_IN_ONE_LINE" value="true" />
</Objective-C>
<TypeScriptCodeStyleSettings version="0">
<option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
<option name="FORCE_SEMICOLON_STYLE" value="true" />
<option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
<option name="FORCE_QUOTE_STYlE" value="true" />
<option name="ENFORCE_TRAILING_COMMA" value="Remove" />
<option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
<option name="SPACES_WITHIN_IMPORTS" value="true" />
<option name="SPACES_WITHIN_INTERPOLATION_EXPRESSIONS" value="true" />
</TypeScriptCodeStyleSettings>
<VueCodeStyleSettings>
<option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
<option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
</VueCodeStyleSettings>
<codeStyleSettings language="HTML">
<option name="SOFT_MARGINS" value="100" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="JAVA">
<option name="ELSE_ON_NEW_LINE" value="true" />
<option name="CATCH_ON_NEW_LINE" value="true" />
<option name="FINALLY_ON_NEW_LINE" value="true" />
<option name="SPACE_BEFORE_ARRAY_INITIALIZER_LBRACE" value="true" />
<option name="KEEP_SIMPLE_METHODS_IN_ONE_LINE" value="true" />
<option name="KEEP_SIMPLE_LAMBDAS_IN_ONE_LINE" value="true" />
<option name="KEEP_SIMPLE_CLASSES_IN_ONE_LINE" value="true" />
</codeStyleSettings>
<codeStyleSettings language="JavaScript">
<option name="SOFT_MARGINS" value="100" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="ObjectiveC">
<option name="ELSE_ON_NEW_LINE" value="true" />
<option name="CATCH_ON_NEW_LINE" value="true" />
</codeStyleSettings>
<codeStyleSettings language="TypeScript">
<option name="ELSE_ON_NEW_LINE" value="true" />
<option name="CATCH_ON_NEW_LINE" value="true" />
<option name="FINALLY_ON_NEW_LINE" value="true" />
<option name="SOFT_MARGINS" value="100" />
<indentOptions>
<option name="INDENT_SIZE" value="2" />
<option name="CONTINUATION_INDENT_SIZE" value="2" />
<option name="TAB_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="Vue">
<option name="SOFT_MARGINS" value="100" />
<indentOptions>
<option name="CONTINUATION_INDENT_SIZE" value="2" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="kotlin">
<option name="CODE_STYLE_DEFAULTS" value="KOTLIN_OFFICIAL" />
</codeStyleSettings>
</code_scheme>
</component>

5
.idea/codeStyles/codeStyleConfig.xml generated Normal file
View File

@ -0,0 +1,5 @@
<component name="ProjectCodeStyleConfiguration">
<state>
<option name="USE_PER_PROJECT_SETTINGS" value="true" />
</state>
</component>

7
.idea/prettier.xml generated Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PrettierConfiguration">
<option name="myConfigurationMode" value="AUTOMATIC" />
<option name="myRunOnSave" value="true" />
</component>
</project>

7
.prettierrc Normal file
View File

@ -0,0 +1,7 @@
{
"semi": false,
"singleQuote": false,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-tailwindcss"]
}

6
index.html
View File

@ -1,12 +1,12 @@
<!DOCTYPE html> <!doctype html>
<html lang="nb"> <html lang="nb">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#181a1b" /> <meta name="theme-color" content="#181a1b" />
<title>Hjem | Martials.no</title> <title>Hjem | Martials.no</title>
<meta name="description" content="Hjemmeside for API og diverse"> <meta name="description" content="Hjemmeside for API og diverse" />
<link rel="icon" type="image/x-icon" href="resources/code.svg"> <link rel="icon" type="image/x-icon" href="resources/code.svg" />
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

25
package.json
View File

@ -6,24 +6,27 @@
"prestart": "npx only-allow pnpm", "prestart": "npx only-allow pnpm",
"dev": "vite", "dev": "vite",
"build": "vite build && sh build_extra.sh", "build": "vite build && sh build_extra.sh",
"serve": "vite preview" "serve": "vite preview",
"format": "prettier --write ."
}, },
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.17",
"postcss": "^8.4.27", "postcss": "^8.4.35",
"tailwindcss": "^3.3.3", "prettier": "3.2.5",
"typescript": "^5.1.6", "prettier-plugin-tailwindcss": "^0.5.11",
"vite": "^4.4.7", "tailwindcss": "^3.4.1",
"vite-plugin-solid": "^2.7.0" "typescript": "^5.3.3",
"vite": "^5.1.4",
"vite-plugin-solid": "^2.10.1"
}, },
"dependencies": { "dependencies": {
"@solidjs/router": "^0.8.2", "@solidjs/router": "^0.12.4",
"@types/diff": "^5.0.3", "@types/diff": "^5.0.9",
"diff": "^5.1.0", "diff": "^5.2.0",
"solid-headless": "^0.13.1", "solid-headless": "^0.13.1",
"solid-heroicons": "^3.2.4", "solid-heroicons": "^3.2.4",
"solid-js": "^1.7.8", "solid-js": "^1.8.15",
"xlsx": "^0.18.5" "xlsx": "^0.18.5"
} }
} }

2148
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

4
pnpm-workspace.yaml
View File

@ -1,6 +1,6 @@
packages: packages:
# include packages in subfolders (e.g. apps/ and packages/) # include packages in subfolders (e.g. apps/ and packages/)
- "apps/**" - "apps/**"
- 'packages/**' - "packages/**"
# if required, exclude some directories # if required, exclude some directories
- '!**/test/**' - "!**/test/**"

8
postcss.config.js
View File

@ -1,7 +1,7 @@
module.exports = { module.exports = {
purge: ['./*.html', './src/**/*.{vue,js,ts,jsx,tsx}'], purge: ["./*.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
plugins: { plugins: {
tailwindcss: {}, tailwindcss: {},
autoprefixer: {}, autoprefixer: {}
}, }
}; }

29
src/app.tsx
View File

@ -1,25 +1,18 @@
import { Route, Router, Routes } from "@solidjs/router"; import { Route, Router } from "@solidjs/router"
import HomePage from "./pages/home"; import HomePage from "./pages/home"
import TruthTablePage from "./pages/truth-table"; import TruthTablePage from "./pages/truth-table"
import PageNotFound from "./pages/404"; import PageNotFound from "./pages/404"
import { render } from "solid-js/web"; import { render } from "solid-js/web"
import { type Component } from "solid-js"; import FailureFunctionPage from "./pages/failureFunction"
import FailureFunctionPage from "./pages/failureFunction";
const App: Component = () => (
<Routes>
<Route path={ "/" } element={ <HomePage /> } />
<Route path={ "/simplify-truths" } element={ <TruthTablePage /> } />
<Route path={ "/failure-function" } element={ <FailureFunctionPage /> } />
<Route path={ "*" } element={ <PageNotFound /> } />
</Routes>
);
render( render(
() => ( () => (
<Router> <Router>
<App /> <Route path={"/"} component={HomePage} />
<Route path={"/simplify-truths"} component={TruthTablePage} />
<Route path={"/failure-function"} component={FailureFunctionPage} />
<Route path={"*"} component={PageNotFound} />
</Router> </Router>
), ),
document.getElementById("root") as HTMLElement document.getElementById("root") as HTMLElement
); )

54
src/components/button.tsx
View File

@ -1,13 +1,12 @@
/* @refresh reload */ /* @refresh reload */
import { type Component, createSignal } from "solid-js"; import { type Component, createSignal } from "solid-js"
interface SwitchProps extends TitleProps { interface SwitchProps extends TitleProps {
defaultValue?: boolean, defaultValue?: boolean
onChange?: (value: boolean) => void, onChange?: (value: boolean) => void
} }
export const MySwitch: Component<SwitchProps> = ( export const MySwitch: Component<SwitchProps> = ({
{
defaultValue = false, defaultValue = false,
title, title,
onChange, onChange,
@ -15,43 +14,46 @@ export const MySwitch: Component<SwitchProps> = (
name, name,
id id
}) => { }) => {
const [checked, setChecked] = createSignal(defaultValue)
const [checked, setChecked] = createSignal(defaultValue);
function handleChange() { function handleChange() {
const newChecked = !checked(); const newChecked = !checked()
setChecked(newChecked); setChecked(newChecked)
if (onChange) { if (onChange) {
onChange(newChecked); onChange(newChecked)
} }
} }
return ( return (
<button id={ id } <button
id={id}
onClick={handleChange} onClick={handleChange}
title={title} title={title}
class={ `${ checked() ? "bg-cyan-900" : "bg-gray-500" } class={`${checked() ? "bg-cyan-900" : "bg-gray-500"} relative my-2 inline-flex h-6 w-11 items-center rounded-full ${className}`}
relative inline-flex h-6 w-11 items-center rounded-full my-2 ${ className }` }> >
<span class={"sr-only"}>{name}</span> <span class={"sr-only"}>{name}</span>
<span class={ `${ checked() ? 'translate-x-6' : 'translate-x-1' } <span
inline-block h-4 w-4 transform rounded-full bg-white transition-all` } /> class={`${checked() ? "translate-x-6" : "translate-x-1"} inline-block h-4 w-4 transform rounded-full bg-white transition-all`}
/>
</button> </button>
); )
}; }
export const Button: Component<ButtonProps> = ( export const Button: Component<ButtonProps> = ({
{
className, className,
title, title,
children, children,
id, id,
onClick, onClick,
type = "button", type = "button"
} }) => (
) => ( <button
<button title={ title } id={ id } type={ type } title={title}
class={ `border-rounded bg-cyan-900 px-2 cursor-pointer ${ className }` } id={id}
onClick={ onClick }> type={type}
class={`border-rounded cursor-pointer bg-cyan-900 px-2 ${className}`}
onClick={onClick}
>
{children} {children}
</button> </button>
); )

23
src/components/card.tsx
View File

@ -1,23 +1,18 @@
/* @refresh reload */ /* @refresh reload */
import { type Component } from "solid-js"; import { type Component } from "solid-js"
import { Link } from "./link"; import { Link } from "./link"
const Card: Component<CardProps> = ( const Card: Component<CardProps> = ({ children, className, title, to, newTab = false }) => (
{ <div
children, class={`relative h-32 w-72 rounded-2xl bg-gradient-to-r from-cyan-600 to-cyan-500 ${className}`}
className, >
title,
to,
newTab = false
}) => (
<div class={ `relative bg-gradient-to-r from-cyan-600 to-cyan-500 h-32 w-72 rounded-2xl ${ className }` }>
<div class={"relative p-5"}> <div class={"relative p-5"}>
<Link className={"text-white"} to={to} newTab={newTab}> <Link className={"text-white"} to={to} newTab={newTab}>
<h3 class={ "text-center w-fit mx-auto before:content-['↗']" }>{ title }</h3> <h3 class={"mx-auto w-fit text-center before:content-['↗']"}>{title}</h3>
</Link> </Link>
{children} {children}
</div> </div>
</div> </div>
); )
export default Card; export default Card

86
src/components/dialog.tsx
View File

@ -1,23 +1,22 @@
/* @refresh reload */ /* @refresh reload */
import { Dialog, DialogDescription, DialogPanel, DialogTitle } from "solid-headless"; import { Dialog, DialogDescription, DialogPanel, DialogTitle } from "solid-headless"
import { Component, createEffect, createSignal, JSX } from "solid-js"; import { Component, createEffect, createSignal, JSX } from "solid-js"
import { Button } from "./button"; import { Button } from "./button"
import { Portal } from "solid-js/web"; import { Portal } from "solid-js/web"
import { getElementById } from "../utils/dom"; import { getElementById } from "../utils/dom"
interface MyDialog extends TitleProps { interface MyDialog extends TitleProps {
description?: string, description?: string
button?: JSX.Element, button?: JSX.Element
acceptButtonName?: string, acceptButtonName?: string
acceptButtonId?: string, acceptButtonId?: string
cancelButtonName?: string, cancelButtonName?: string
callback?: () => void, callback?: () => void
buttonClass?: string, buttonClass?: string
buttonTitle?: string | null, buttonTitle?: string | null
} }
const MyDialog: Component<MyDialog> = ( const MyDialog: Component<MyDialog> = ({
{
title, title,
description, description,
button, button,
@ -28,20 +27,17 @@ const MyDialog: Component<MyDialog> = (
className, className,
buttonClass, buttonClass,
buttonTitle, buttonTitle,
acceptButtonId, acceptButtonId
}) => { }) => {
const [isOpen, setIsOpen] = createSignal(false)
const [isOpen, setIsOpen] = createSignal(false);
function callbackAndClose(): void { function callbackAndClose(): void {
if (callback) { callback?.()
callback(); setIsOpen(false)
}
setIsOpen(false);
} }
function setupKeyPress(): () => void { function setupKeyPress(): () => void {
let isMounted = true; let isMounted = true
/** /**
* Pressing "Enter" when the modal is open, will click the accept button * Pressing "Enter" when the modal is open, will click the accept button
@ -49,56 +45,56 @@ const MyDialog: Component<MyDialog> = (
*/ */
function click(e: KeyboardEvent): void { function click(e: KeyboardEvent): void {
if (isMounted && e.key === "Enter" && acceptButtonId) { if (isMounted && e.key === "Enter" && acceptButtonId) {
getElementById<HTMLButtonElement>(acceptButtonId)?.click(); getElementById<HTMLButtonElement>(acceptButtonId)?.click()
} }
} }
if (isOpen()) { if (isOpen()) {
const id = "cl-6" const id = "cl-6"
const el = getElementById(id); const el = getElementById(id)
el?.addEventListener("keypress", click); el?.addEventListener("keypress", click)
return () => { return () => {
el?.removeEventListener("keypress", click); el?.removeEventListener("keypress", click)
isMounted = false; isMounted = false
} }
} } else return () => undefined
else return () => undefined;
} }
createEffect(setupKeyPress, isOpen()); createEffect(setupKeyPress, isOpen())
return ( return (
<div class={ "w-fit h-fit" }> <div class={"h-fit w-fit"}>
<button onClick={() => setIsOpen(true)} class={buttonClass} title={buttonTitle ?? undefined}> <button onClick={() => setIsOpen(true)} class={buttonClass} title={buttonTitle ?? undefined}>
{button} {button}
</button> </button>
<Portal> <Portal>
<Dialog isOpen={ isOpen() } onClose={ () => setIsOpen(false) } <Dialog
class={ `fixed inset-0 flex-row-center justify-center z-50 overflow-auto text-white ${ className }` }> isOpen={isOpen()}
onClose={() => setIsOpen(false)}
class={`flex-row-center fixed inset-0 z-50 justify-center overflow-auto text-white ${className}`}
>
<div class={"fixed inset-0 bg-black/40" /*Backdrop*/} aria-hidden={true} /> <div class={"fixed inset-0 bg-black/40" /*Backdrop*/} aria-hidden={true} />
<DialogPanel class={ "w-fit relative bg-default-bg border-rounded border-gray-500 p-2" }> <DialogPanel class={"border-rounded relative w-fit border-gray-500 bg-default-bg p-2"}>
<DialogTitle class={"border-b"}>{title}</DialogTitle> <DialogTitle class={"border-b"}>{title}</DialogTitle>
<DialogDescription class={"mb-4 mt-1"}>{description}</DialogDescription> <DialogDescription class={"mb-4 mt-1"}>{description}</DialogDescription>
{children} {children}
<div class={"my-3"}> <div class={"my-3"}>
<Button onClick={ callbackAndClose } className={ "h-10 mr-2" } <Button onClick={callbackAndClose} className={"mr-2 h-10"} id={acceptButtonId}>
id={ acceptButtonId }>{ acceptButtonName }</Button> {acceptButtonName}
<Button onClick={ () => setIsOpen(false) } </Button>
className={ "h-10" }>{ cancelButtonName }</Button> <Button onClick={() => setIsOpen(false)} className={"h-10"}>
{cancelButtonName}
</Button>
</div> </div>
</DialogPanel> </DialogPanel>
</Dialog> </Dialog>
</Portal> </Portal>
</div> </div>
); )
} }
export default MyDialog; export default MyDialog

14
src/components/footer.tsx
View File

@ -1,11 +1,13 @@
/* @refresh reload */ /* @refresh reload */
import { type Component } from "solid-js"; import { type Component } from "solid-js"
import { Link } from "./link"; import { Link } from "./link"
const Footer: Component<SimpleProps> = ({ className }) => ( const Footer: Component<SimpleProps> = ({ className }) => (
<footer class={ `text-center py-5 absolute bottom-0 container ${ className }` }> <footer class={`container absolute bottom-0 py-5 text-center ${className}`}>
<p>Kildekode på <Link to={ "https://github.com/h600878/martials.no" }>GitHub</Link></p> <p>
Kildekode på <Link to={"https://github.com/h600878/martials.no"}>GitHub</Link>
</p>
</footer> </footer>
); )
export default Footer; export default Footer

22
src/components/header.tsx
View File

@ -1,14 +1,17 @@
/* @refresh reload */ /* @refresh reload */
import { type Component, Show } from "solid-js"; import { type Component, Show } from "solid-js"
import { Icon } from "solid-heroicons"; import { Icon } from "solid-heroicons"
import { chevronLeft } from "solid-heroicons/solid"; import { chevronLeft } from "solid-heroicons/solid"
import { Link } from "./link"; import { Link } from "./link"
import { useLocation } from "@solidjs/router"
const Header: Component<TitleProps> = ({ className, title = "Title goes here" }) => ( const Header: Component<TitleProps> = ({ className, title = "Title goes here" }) => {
const location = useLocation()
return (
<header class={className}> <header class={className}>
<div class={"flex-row-center mx-auto w-fit"}> <div class={"flex-row-center mx-auto w-fit"}>
<Show when={location.pathname !== "/"} keyed>
<Show when={ typeof location !== "undefined" && location.pathname !== "/" } keyed>
<Link to={"/"} newTab={false} title={"Back to homepage"}> <Link to={"/"} newTab={false} title={"Back to homepage"}>
<Icon path={chevronLeft} class={"text-cyan-500"} /> <Icon path={chevronLeft} class={"text-cyan-500"} />
</Link> </Link>
@ -20,6 +23,7 @@ const Header: Component<TitleProps> = ({ className, title = "Title goes here" })
<p>Av Martin Berg Alstad</p> <p>Av Martin Berg Alstad</p>
</div> </div>
</header> </header>
); )
}
export default Header; export default Header

137
src/components/input.tsx
View File

@ -1,27 +1,27 @@
/* @refresh reload */ /* @refresh reload */
import { type Component, createSignal, JSX, onMount, Setter, Show } from "solid-js"; import { type Component, createSignal, JSX, onMount, Setter, Show } from "solid-js"
import Row from "./row"; import Row from "./row"
import { Icon } from "solid-heroicons"; import { Icon } from "solid-heroicons"
import { magnifyingGlass, xMark } from "solid-heroicons/solid"; import { magnifyingGlass, xMark } from "solid-heroicons/solid"
import { getElementById } from "../utils/dom"; import { getElementById } from "../utils/dom"
function setupEventListener(id: string, setIsHover: Setter<boolean>): () => void { function setupEventListener(id: string, setIsHover: Setter<boolean>): () => void {
let isMounted = true; let isMounted = true
function hover(hover: boolean): void { function hover(hover: boolean): void {
if (isMounted) { if (isMounted) {
setIsHover(hover); setIsHover(hover)
} }
} }
const el = getElementById(id); const el = getElementById(id)
el?.addEventListener("pointerenter", () => hover(true)); el?.addEventListener("pointerenter", () => hover(true))
el?.addEventListener("pointerleave", () => hover(false)); el?.addEventListener("pointerleave", () => hover(false))
return () => { return () => {
el?.removeEventListener("pointerenter", () => hover(true)); el?.removeEventListener("pointerenter", () => hover(true))
el?.removeEventListener("pointerleave", () => hover(false)); el?.removeEventListener("pointerleave", () => hover(false))
isMounted = false; isMounted = false
} }
} }
@ -31,21 +31,22 @@ function setupEventListener(id: string, setIsHover: Setter<boolean>): () => void
*/ */
function setSetIsText(id: string | undefined, isText: boolean, setIsText: Setter<boolean>): void { function setSetIsText(id: string | undefined, isText: boolean, setIsText: Setter<boolean>): void {
if (id) { if (id) {
const el = getElementById<HTMLInputElement | HTMLTextAreaElement>(id); const el = getElementById<HTMLInputElement | HTMLTextAreaElement>(id)
if (el && el.value !== "" !== isText) { if (el && (el.value !== "") !== isText) {
setIsText(el.value !== ""); setIsText(el.value !== "")
} }
} }
} }
interface Input<T extends HTMLElement> extends InputProps<T> { interface Input<T extends HTMLElement> extends InputProps<T> {
leading?: JSX.Element, leading?: JSX.Element
trailing?: JSX.Element, trailing?: JSX.Element
onChange?: () => void, onChange?: () => void
inputClass?: string, inputClass?: string
} }
export const Input: Component<Input<HTMLInputElement>> = ( // TODO remove leading and trailing from component export const Input: Component<Input<HTMLInputElement>> = (
// TODO remove leading and trailing from component
{ {
className, className,
id, id,
@ -59,34 +60,34 @@ export const Input: Component<Input<HTMLInputElement>> = ( // TODO remove leadin
trailing, trailing,
inputClass, inputClass,
ref ref
}): JSX.Element => { }
): JSX.Element => {
/** /**
* Is 'true' if the input element is in focus * Is 'true' if the input element is in focus
*/ */
const [isFocused, setIsFocused] = createSignal(false); const [isFocused, setIsFocused] = createSignal(false)
/** /**
* Is 'true' if the user is hovering over the input element * Is 'true' if the user is hovering over the input element
*/ */
const [isHover, setIsHover] = createSignal(false); const [isHover, setIsHover] = createSignal(false)
/** /**
* Is 'true' if the input element contains any characters * Is 'true' if the input element contains any characters
*/ */
const [isText, setIsText] = createSignal(false); const [isText, setIsText] = createSignal(false)
onMount(() => { onMount(() => {
if (id && title) { if (id && title) {
setupEventListener(id, setIsHover); setupEventListener(id, setIsHover)
} }
}); })
return ( return (
<Row className={`relative ${className}`}> <Row className={`relative ${className}`}>
{leading} {leading}
<HoverTitle title={title} isActive={isFocused() || isHover() || isText()} htmlFor={id} /> <HoverTitle title={title} isActive={isFocused() || isHover() || isText()} htmlFor={id} />
<input <input
class={ `bg-default-bg focus:border-cyan-500 outline-none border-2 border-gray-500 class={`border-2 border-gray-500 bg-default-bg outline-none hover:border-t-cyan-400
hover:border-t-cyan-400 ${ inputClass }` } focus:border-cyan-500 ${inputClass}`}
id={id} id={id}
ref={ref} ref={ref}
onFocus={() => setIsFocused(true)} onFocus={() => setIsFocused(true)}
@ -96,83 +97,85 @@ export const Input: Component<Input<HTMLInputElement>> = ( // TODO remove leadin
placeholder={placeholder ?? undefined} placeholder={placeholder ?? undefined}
required={required} required={required}
onInput={() => { onInput={() => {
setSetIsText(id, isText(), setIsText); setSetIsText(id, isText(), setIsText)
if (onChange) { if (onChange) {
onChange(); onChange()
} }
} } /> }}
/>
{trailing} {trailing}
</Row> </Row>
); )
} }
const HoverTitle: Component<{ title?: string, isActive?: boolean, htmlFor?: string }> = ( const HoverTitle: Component<{ title?: string; isActive?: boolean; htmlFor?: string }> = ({
{
title, title,
isActive = false, isActive = false,
htmlFor htmlFor
}) => ( }) => (
<label class={ `absolute pointer-events-none <label
${ isActive ? "-top-2 left-3 default-bg text-sm" : "left-2 top-1" } class={`pointer-events-none absolute
transition-all duration-150 text-gray-600 dark:text-gray-400` } ${isActive ? "default-bg -top-2 left-3 text-sm" : "left-2 top-1"}
for={ htmlFor }> text-gray-600 transition-all duration-150 dark:text-gray-400`}
<div class={ "z-50 relative" }>{ title }</div> for={htmlFor}
<div class={ "w-full h-2 default-bg absolute bottom-1/3 z-10" } /> >
<div class={"relative z-50"}>{title}</div>
<div class={"default-bg absolute bottom-1/3 z-10 h-2 w-full"} />
</label> </label>
); )
interface SearchProps extends InputProps<HTMLInputElement> { interface SearchProps extends InputProps {
typingDefault?: boolean typingDefault?: boolean
} }
export const Search: Component<SearchProps> = ( export const Search: Component<SearchProps> = ({
{
typingDefault = false, typingDefault = false,
id = "search", id = "search",
className, className,
ref ref
}) => { }) => {
const [typing, setTyping] = createSignal(typingDefault)
const [typing, setTyping] = createSignal(typingDefault);
function getInputElement() { function getInputElement() {
return getElementById<HTMLInputElement>(id); return getElementById<HTMLInputElement>(id)
} }
function clearSearch(): void { function clearSearch(): void {
const el = getInputElement(); const el = getInputElement()
if (el) { if (el) {
el.value = ""; el.value = ""
setTyping(false); setTyping(false)
history.replaceState(null, "", location.pathname); history.replaceState(null, "", location.pathname)
el.focus(); el.focus()
} }
} }
function onChange(): void { function onChange(): void {
const el = getInputElement(); const el = getInputElement()
if (el && (el.value !== "") !== typing()) { if (el && (el.value !== "") !== typing()) {
setTyping(el.value !== ""); setTyping(el.value !== "")
} }
} }
return ( return (
<Input inputClass={ `rounded-xl pl-7 h-10 w-full pr-8` } className={ `w-full ${ className }` } <Input
inputClass={`rounded-xl pl-7 h-10 w-full pr-8`}
className={`w-full ${className}`}
id={id} id={id}
ref={ref} ref={ref}
placeholder={"¬A & B -> C"} placeholder={"¬A & B -> C"}
type={"text"} type={"text"}
onChange={onChange} onChange={onChange}
leading={ <Icon path={ magnifyingGlass } aria-label={ "Magnifying glass" } leading={
class={ "pl-2 absolute" } /> } <Icon path={magnifyingGlass} aria-label={"Magnifying glass"} class={"absolute pl-2"} />
trailing={ <Show when={ typing() } keyed> }
<button class={ "absolute right-2" } trailing={
title={ "Clear" } <Show when={typing()} keyed>
type={ "reset" } <button class={"absolute right-2"} title={"Clear"} type={"reset"} onClick={clearSearch}>
onClick={ clearSearch }>
<Icon path={xMark} aria-label={"The letter X"} /> <Icon path={xMark} aria-label={"The letter X"} />
</button> </button>
</Show> } </Show>
/> }
); />
)
} }

19
src/components/layout.tsx
View File

@ -1,15 +1,10 @@
/* @refresh reload */ /* @refresh reload */
import { type Component } from "solid-js"; import { type Component } from "solid-js"
import Header from "./header"; import Header from "./header"
import Footer from "./footer"; import Footer from "./footer"
const Layout: Component<TitleProps> = ( const Layout: Component<TitleProps> = ({ children, title, className }) => (
{ <div class={`relative min-h-screen bg-default-bg font-mono text-white ${className}`}>
children,
title,
className
}) => (
<div class={ `bg-default-bg text-white min-h-screen relative font-mono ${ className }` }>
<div class="container mx-auto"> <div class="container mx-auto">
<Header className={"py-3"} title={title} /> <Header className={"py-3"} title={title} />
<main> <main>
@ -18,6 +13,6 @@ const Layout: Component<TitleProps> = (
</main> </main>
</div> </div>
</div> </div>
); )
export default Layout; export default Layout

23
src/components/link.tsx
View File

@ -1,20 +1,17 @@
/* @refresh reload */ /* @refresh reload */
import { type Component } from "solid-js"; import { type Component } from "solid-js"
export const Link: Component<LinkProps> = ( export const Link: Component<LinkProps> = (
{ { to, rel, children, className, id, newTab = true, title } // TODO <A/> throws exception
to, ) => (
rel, <a
children, href={to}
className, id={id}
id, title={title}
newTab = true,
title,
}) => ( // TODO <A/> throws exception
<a href={ to } id={ id } title={ title }
rel={`${rel} ${newTab ? "noreferrer" : undefined}`} rel={`${rel} ${newTab ? "noreferrer" : undefined}`}
target={newTab ? "_blank" : undefined} target={newTab ? "_blank" : undefined}
class={ `link ${ className }` }> class={`link ${className}`}
>
{children} {children}
</a> </a>
); )

56
src/components/menu.tsx
View File

@ -1,78 +1,72 @@
/* @refresh reload */ /* @refresh reload */
import { type Component, createEffect, createSignal, JSX, Show } from "solid-js"; import { type Component, createEffect, createSignal, JSX, Show } from "solid-js"
import { Button } from "./button"; import { Button } from "./button"
interface MenuProps extends TitleProps { interface MenuProps extends TitleProps {
button?: JSX.Element, button?: JSX.Element
buttonClassName?: string, buttonClassName?: string
itemsClassName?: string, itemsClassName?: string
} }
const MyMenu: Component<MenuProps> = ( const MyMenu: Component<MenuProps> = ({
{
title, title,
button, button,
children, children,
id, id,
className, className,
buttonClassName, buttonClassName,
itemsClassName, itemsClassName
}) => { }) => {
const [isOpen, setIsOpen] = createSignal(false)
const [isOpen, setIsOpen] = createSignal(false);
function closeMenu(): void { function closeMenu(): void {
setIsOpen(false); setIsOpen(false)
} }
function toggleMenu(): void { function toggleMenu(): void {
setIsOpen(!isOpen()); setIsOpen(!isOpen())
} }
createEffect(() => { createEffect(() => {
function click(e: MouseEvent): void { function click(e: MouseEvent): void {
if (e.target instanceof HTMLElement) { if (e.target instanceof HTMLElement) {
if (e.target.closest(`#${id}`) === null) { if (e.target.closest(`#${id}`) === null) {
closeMenu(); closeMenu()
} }
} }
} }
function keypress(e: KeyboardEvent): void { function keypress(e: KeyboardEvent): void {
if (e.key === "Escape") { if (e.key === "Escape") {
closeMenu(); closeMenu()
} }
} }
if (isOpen()) { if (isOpen()) {
document.addEventListener("click", click); document.addEventListener("click", click)
document.addEventListener("keyup", keypress); document.addEventListener("keyup", keypress)
} else {
document.removeEventListener("click", click)
document.removeEventListener("keyup", keypress)
} }
else { })
document.removeEventListener("click", click);
document.removeEventListener("keyup", keypress);
}
});
return ( // TODO transition return (
// TODO transition
<div class={`${className}`} id={id}> <div class={`${className}`} id={id}>
<Button title={title} onClick={toggleMenu} className={`flex-row-center ${buttonClassName}`}>
<Button title={ title }
onClick={ toggleMenu }
className={ `flex-row-center ${ buttonClassName }` }>
{button} {button}
</Button> </Button>
<Show when={isOpen()} keyed> <Show when={isOpen()} keyed>
<div <div
class={ `absolute bg-default-bg border border-gray-500 rounded-b-xl mt-1 w-max z-50 ${ itemsClassName }` }> class={`absolute z-50 mt-1 w-max rounded-b-xl border border-gray-500 bg-default-bg ${itemsClassName}`}
>
<div class={"mx-1"}>{children}</div> <div class={"mx-1"}>{children}</div>
</div> </div>
</Show> </Show>
</div> </div>
); )
} }
export default MyMenu; export default MyMenu

57
src/components/output.tsx
View File

@ -1,33 +1,26 @@
/* @refresh reload */ /* @refresh reload */
import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from "solid-headless"; import { Disclosure, DisclosureButton, DisclosurePanel, Transition } from "solid-headless"
import { Icon } from "solid-heroicons"; import { Icon } from "solid-heroicons"
import { type Component, JSX } from "solid-js"; import { type Component, JSX } from "solid-js"
import { chevronUp } from "solid-heroicons/solid"; import { chevronUp } from "solid-heroicons/solid"
interface InfoBoxProps extends TitleProps { interface InfoBoxProps extends TitleProps {
error?: boolean, error?: boolean
} }
export const InfoBox: Component<InfoBoxProps> = ( export const InfoBox: Component<InfoBoxProps> = ({ title, children, error = false, className }) => (
{
title,
children,
error = false,
className
}) => (
<div class={`border-rounded ${error ? "border-red-500" : "border-gray-500"} ${className}`}> <div class={`border-rounded ${error ? "border-red-500" : "border-gray-500"} ${className}`}>
<p class={`border-b px-2 ${error ? "border-red-500" : "border-gray-500"}`}>{title}</p> <p class={`border-b px-2 ${error ? "border-red-500" : "border-gray-500"}`}>{title}</p>
<div class={"mx-2"}>{children}</div> <div class={"mx-2"}>{children}</div>
</div> </div>
); )
interface MyDisclosureProps extends TitleProps { interface MyDisclosureProps extends TitleProps {
defaultOpen?: boolean, defaultOpen?: boolean
onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>, onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>
} }
export const MyDisclosure: Component<MyDisclosureProps> = ( export const MyDisclosure: Component<MyDisclosureProps> = ({
{
title, title,
children, children,
defaultOpen = false, defaultOpen = false,
@ -37,13 +30,11 @@ export const MyDisclosure: Component<MyDisclosureProps> = (
}): JSX.Element => ( }): JSX.Element => (
<div id={id} class={`border-rounded bg-default-bg ${className}`}> <div id={id} class={`border-rounded bg-default-bg ${className}`}>
<Disclosure defaultOpen={defaultOpen}> <Disclosure defaultOpen={defaultOpen}>
{ ({ isOpen }) => {({ isOpen }) => (
<> <>
<DisclosureButton onClick={ onClick } <DisclosureButton onClick={onClick} class={`flex-row-center w-full justify-between px-2`}>
class={ `flex-row-center w-full justify-between px-2` }>
<p class={`py-1`}>{title}</p> <p class={`py-1`}>{title}</p>
<Icon path={ chevronUp } <Icon path={chevronUp} class={`w-5 ${isOpen() && "rotate-180 transform"} transition`} />
class={ `w-5 ${ isOpen() && "transform rotate-180" } transition` } />
</DisclosureButton> </DisclosureButton>
<Transition <Transition
enter="transition duration-100 ease-out" enter="transition duration-100 ease-out"
@ -51,24 +42,24 @@ export const MyDisclosure: Component<MyDisclosureProps> = (
enterTo="transform scale-100 opacity-100" enterTo="transform scale-100 opacity-100"
leave="transition duration-75 ease-out" leave="transition duration-75 ease-out"
leaveFrom="transform scale-100 opacity-100" leaveFrom="transform scale-100 opacity-100"
leaveTo="transform scale-95 opacity-0" show> leaveTo="transform scale-95 opacity-0"
show
>
<DisclosurePanel> <DisclosurePanel>
<div class={"px-2 pb-2 text-gray-300"}>{children}</div> <div class={"px-2 pb-2 text-gray-300"}>{children}</div>
</DisclosurePanel> </DisclosurePanel>
</Transition> </Transition>
</> </>
} )}
</Disclosure> </Disclosure>
</div> </div>
); )
export const MyDisclosureContainer: Component<ChildProps> = ( export const MyDisclosureContainer: Component<ChildProps> = ({ children, className }) => (
{ <div
children, class={`border-rounded mb-2 flex flex-col gap-1
className bg-cyan-900 p-2 dark:border-gray-800 ${className}`}
}) => ( >
<div class={ `bg-cyan-900 border-rounded dark:border-gray-800 p-2 mb-2
flex flex-col gap-1 ${ className }` }>
{children} {children}
</div> </div>
); )

6
src/components/row.tsx
View File

@ -1,5 +1,5 @@
/* @refresh reload */ /* @refresh reload */
import { type Component } from "solid-js"; import { type Component } from "solid-js"
/** /**
* A row that centers its children * A row that centers its children
@ -9,6 +9,6 @@ import { type Component } from "solid-js";
*/ */
const Row: Component<ChildProps> = ({ children, className }) => ( const Row: Component<ChildProps> = ({ children, className }) => (
<div class={`flex-row-center ${className}`}>{children}</div> <div class={`flex-row-center ${className}`}>{children}</div>
); )
export default Row; export default Row

53
src/components/truth-table.tsx
View File

@ -1,29 +1,30 @@
/* @refresh reload */ /* @refresh reload */
import { For } from "solid-js/web"; import { For } from "solid-js/web"
import { type Component } from "solid-js"; import { type Component } from "solid-js"
interface TruthTableProps extends SimpleProps { interface TruthTableProps extends SimpleProps {
table?: Table, table?: Table
header?: string[], header?: string[]
} }
const TruthTable: Component<TruthTableProps> = ( const TruthTable: Component<TruthTableProps> = ({ table, header, className, style, id }) => (
{ <table
table, class={`z-10 table border-collapse border-2 border-gray-500 ${className}`}
header, id={id}
className, style={style}
style, >
id,
}) => (
<table class={ `border-2 border-gray-500 border-collapse table z-10 ${ className }` } id={ id } style={ style }>
<thead> <thead>
<tr> <tr>
<For each={header}> <For each={header}>
{(exp) => ( {(exp) => (
<th scope={ "col" } <th
class={ `bg-default-bg text-center sticky top-0 [position:-webkit-sticky;] scope={"col"}
outline outline-2 outline-offset-[-1px] outline-gray-500` /*TODO sticky header at the top of the screen */ }> class={
<p class={ "px-2 w-max" }>{ exp }</p> `sticky top-0 bg-default-bg text-center outline
outline-2 outline-offset-[-1px] outline-gray-500 [position:-webkit-sticky;]` /*TODO sticky header at the top of the screen */
}
>
<p class={"w-max px-2"}>{exp}</p>
</th> </th>
)} )}
</For> </For>
@ -31,21 +32,23 @@ const TruthTable: Component<TruthTableProps> = (
</thead> </thead>
<tbody> <tbody>
<For each={table}> <For each={table}>
{ (row) => {(row) => (
<tr class={"hover:text-black"}> <tr class={"hover:text-black"}>
<For each={row}> <For each={row}>
{ (value) => {(value) => (
<td class={ `text-center border border-gray-500 last:underline <td
${ value ? "bg-green-700" : "bg-red-700" }` }> class={`border border-gray-500 text-center last:underline
${value ? "bg-green-700" : "bg-red-700"}`}
>
<p>{value ? "T" : "F"}</p> <p>{value ? "T" : "F"}</p>
</td> </td>
} )}
</For> </For>
</tr> </tr>
} )}
</For> </For>
</tbody> </tbody>
</table> </table>
); )
export default TruthTable; export default TruthTable

10
src/index.css
View File

@ -3,10 +3,9 @@
@tailwind utilities; @tailwind utilities;
@layer components { @layer components {
.debug { .debug {
@apply border border-red-500; @apply border border-red-500;
@apply after:content-['DEBUG'] after:absolute; @apply after:absolute after:content-['DEBUG'];
} }
.flex-row-center { .flex-row-center {
@ -14,7 +13,7 @@
} }
.border-rounded { .border-rounded {
@apply border rounded-2xl border-gray-700; @apply rounded-2xl border border-gray-700;
} }
h1 { h1 {
@ -34,15 +33,14 @@
} }
a { a {
@apply hover:underline text-cyan-500; @apply text-cyan-500 hover:underline;
} }
li { li {
@apply list-disc ml-4; @apply ml-4 list-disc;
} }
svg { svg {
@apply pointer-events-none h-6 w-6; @apply pointer-events-none h-6 w-6;
} }
} }

14
src/pages/404.tsx
View File

@ -1,20 +1,20 @@
/* @refresh reload */ /* @refresh reload */
import { type Component } from "solid-js"; import { type Component } from "solid-js"
import { render } from "solid-js/web"; import { render } from "solid-js/web"
import Layout from "../components/layout"; import Layout from "../components/layout"
import { Link } from "../components/link"; import { Link } from "../components/link"
const PageNotFound: Component = () => ( const PageNotFound: Component = () => (
<Layout title={"Siden ble ikke funnet"}> <Layout title={"Siden ble ikke funnet"}>
<div class={"text-center"}> <div class={"text-center"}>
<h4>Error 404 - Siden ble ikke funnet</h4> <h4>Error 404 - Siden ble ikke funnet</h4>
<p> <p>
<Link to={ "/" } newTab={ false } className={ "mx-auto relative w-max" }> <Link to={"/"} newTab={false} className={"relative mx-auto w-max"}>
Gå tilbake til forsiden Gå tilbake til forsiden
</Link> </Link>
</p> </p>
</div> </div>
</Layout> </Layout>
); )
export default PageNotFound; export default PageNotFound

35
src/pages/failureFunction.tsx
View File

@ -1,32 +1,29 @@
/* @refresh reload */ /* @refresh reload */
import { Component, createSignal } from "solid-js"; import { Component, createSignal } from "solid-js"
import { Input } from "../components/input"; import { Input } from "../components/input"
import Layout from "../components/layout"; import Layout from "../components/layout"
import { failureFunction } from "../utils/failureFunction"; import { failureFunction } from "../utils/failureFunction"
import { For } from "solid-js/web"; import { For } from "solid-js/web"
type FFProps = { char: string, index: number } type FFProps = { char: string; index: number }
const FailureFunctionPage: Component = () => { const FailureFunctionPage: Component = () => {
let inputRef: HTMLInputElement | undefined = undefined; let inputRef: HTMLInputElement | undefined = undefined
const [result, setResult] = createSignal<ReadonlyArray<FFProps>>() const [result, setResult] = createSignal<ReadonlyArray<FFProps>>()
function onSubmit(e: Event) { function onSubmit(e: Event) {
e.preventDefault() e.preventDefault()
if (inputRef) { if (inputRef) {
const input = inputRef.value; const input = inputRef.value
const splitInput = input.split("") const splitInput = input.split("")
const output = failureFunction(input) const output = failureFunction(input)
if (output.length !== splitInput.length) { if (output.length !== splitInput.length) {
console.error("Something went wrong") console.error("Something went wrong")
} } else {
else { setResult(output.map((value, index) => ({ char: splitInput[index], index: value })))
setResult(output.map((value, index) => {
return { char: splitInput[index], index: value } as FFProps
}))
} }
} }
} }
@ -42,25 +39,21 @@ const FailureFunctionPage: Component = () => {
<thead> <thead>
<tr> <tr>
<For each={result()}> <For each={result()}>
{ ({ char }) => {({ char }) => <th class={"border border-black"}>{char}</th>}
<th class={ "border border-black" }>{ char }</th>
}
</For> </For>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<For each={result()}> <For each={result()}>
{ ({ index }) => {({ index }) => <td class={"border border-black"}>{index}</td>}
<td class={ "border border-black" }>{ index }</td>
}
</For> </For>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</Layout> </Layout>
); )
} }
export default FailureFunctionPage; export default FailureFunctionPage

38
src/pages/home.tsx
View File

@ -1,18 +1,19 @@
/* @refresh reload */ /* @refresh reload */
import { For } from "solid-js/web"; import { For } from "solid-js/web"
import "../index.css"; import "../index.css"
import { type Component } from "solid-js"; import { type Component } from "solid-js"
import Layout from "../components/layout"; import Layout from "../components/layout"
import Card from "../components/card"; import Card from "../components/card"
import { Link } from "../components/link"; import { Link } from "../components/link"
const apiRoot = "https://api.martials.no"; const apiRoot = "https://api.martials.no"
const cards = [ const cards = [
{ {
title: "API-er", title: "API-er",
children: <> children: (
<>
<p>Sjekk ut mine API-er</p> <p>Sjekk ut mine API-er</p>
<ul> <ul>
<li> <li>
@ -21,35 +22,36 @@ const cards = [
</Link> </Link>
</li> </li>
</ul> </ul>
</>, </>
),
to: apiRoot, to: apiRoot,
newTab: true, newTab: true
}, },
{ {
title: "Hjemmeside", title: "Hjemmeside",
children: <p>Sjekk ut mine andre prosjekter</p>, children: <p>Sjekk ut mine andre prosjekter</p>,
to: "https://emberal.github.io/", to: "https://emberal.github.io/",
newTab: true, newTab: true
}, },
{ {
title: "Forenkle sannhetsverdier", title: "Forenkle sannhetsverdier",
children: <p>Implementering av API</p>, children: <p>Implementering av API</p>,
to: `/simplify-truths`, to: `/simplify-truths`
} }
] satisfies CardProps[]; ] satisfies CardProps[]
const HomePage: Component = () => ( const HomePage: Component = () => (
<Layout title={"Velkommen!"}> <Layout title={"Velkommen!"}>
<div class={ "flex flex-wrap justify-center mt-10" }> <div class={"mt-10 flex flex-wrap justify-center"}>
<For each={cards}> <For each={cards}>
{ card => {(card) => (
<Card title={card.title} className={"m-4"} to={card.to} newTab={card.newTab}> <Card title={card.title} className={"m-4"} to={card.to} newTab={card.newTab}>
{card.children} {card.children}
</Card> </Card>
} )}
</For> </For>
</div> </div>
</Layout> </Layout>
); )
export default HomePage; export default HomePage

391
src/pages/truth-table.tsx
View File

@ -1,217 +1,206 @@
/* @refresh reload */ /* @refresh reload */
import Layout from "../components/layout"; import Layout from "../components/layout"
import { Input, Search } from "../components/input"; import { Input, Search } from "../components/input"
import { Icon } from "solid-heroicons"; import { Icon } from "solid-heroicons"
import TruthTable from "../components/truth-table"; import TruthTable from "../components/truth-table"
import { InfoBox, MyDisclosure, MyDisclosureContainer } from "../components/output"; import { InfoBox, MyDisclosure, MyDisclosureContainer } from "../components/output"
import { diffChars } from "diff"; import { diffChars } from "diff"
import MyMenu from "../components/menu"; import MyMenu from "../components/menu"
import { type Accessor, type Component, createSignal, JSX, onMount, Show } from "solid-js"; import { type Accessor, type Component, createSignal, JSX, onMount, Show } from "solid-js"
import { For } from "solid-js/web"; import { For } from "solid-js/web"
import Row from "../components/row"; import Row from "../components/row"
import { import { arrowDownTray, arrowPath, check, eye, eyeSlash, funnel } from "solid-heroicons/solid"
arrowDownTray, arrowPath, import { Button, MySwitch } from "../components/button"
check, import MyDialog from "../components/dialog"
eye, import { exportToExcel } from "../utils/export"
eyeSlash, import { Link } from "../components/link"
funnel import { isTouch } from "../utils/touch"
} from "solid-heroicons/solid"; import { replaceOperators } from "../utils/expressionUtils"
import { Button, MySwitch } from "../components/button"; import { getElementById } from "../utils/dom"
import MyDialog from "../components/dialog"; import { useSearchParams } from "@solidjs/router"
import { exportToExcel } from "../utils/export";
import { Link } from "../components/link";
import { isTouch } from "../utils/touch";
import { replaceOperators } from "../utils/expressionUtils";
import { getElementById } from "../utils/dom";
import { useSearchParams } from "@solidjs/router";
type Option = { name: string, value: "NONE" | "TRUE" | "FALSE" | "DEFAULT" | "TRUE_FIRST" | "FALSE_FIRST" }; type Option = {
name: string
value: "NONE" | "TRUE" | "FALSE" | "DEFAULT" | "TRUE_FIRST" | "FALSE_FIRST"
}
const fetchUrls = [ const fetchUrls = [
"http://localhost:8080/simplify/table/", "http://localhost:8080/simplify/table/",
"https://api.martials.no/simplify-truths/simplify/table/" "https://api.martials.no/simplify-truths/simplify/table/"
]; ]
// TODO move some code to new components // TODO move some code to new components
const TruthTablePage: Component = () => { const TruthTablePage: Component = () => {
const [searchParams, setSearchParams] = useSearchParams()
const [searchParams, setSearchParams] = useSearchParams(); let inputElement: HTMLInputElement | undefined = undefined
let inputElement: HTMLInputElement | undefined = undefined;
let simplifyDefault = searchParams.simplify === undefined || searchParams.simplify === "true", let simplifyDefault = searchParams.simplify === undefined || searchParams.simplify === "true",
inputContent = !!searchParams.exp, inputContent = !!searchParams.exp,
hideIntermediate = searchParams.hideIntermediate === "true"; hideIntermediate = searchParams.hideIntermediate === "true"
const [simplifyEnabled, setSimplifyEnabled] = createSignal(simplifyDefault); const [simplifyEnabled, setSimplifyEnabled] = createSignal(simplifyDefault)
const [fetchResult, setFetchResult] = createSignal<FetchResult | null>(null); const [fetchResult, setFetchResult] = createSignal<FetchResult | null>(null)
const hideOptions: Option[] = [ const hideOptions: Option[] = [
{ name: "Show all result", value: "NONE" }, { name: "Show all result", value: "NONE" },
{ name: "Hide true results", value: "TRUE" }, { name: "Hide true results", value: "TRUE" },
{ name: "Hide false results", value: "FALSE" }, { name: "Hide false results", value: "FALSE" }
]; ]
const [hideValues, setHideValues] = createSignal(hideOptions[0]); const [hideValues, setHideValues] = createSignal(hideOptions[0])
const sortOptions: Option[] = [ const sortOptions: Option[] = [
{ name: "Sort by default", value: "DEFAULT" }, { name: "Sort by default", value: "DEFAULT" },
{ name: "Sort by true first", value: "TRUE_FIRST" }, { name: "Sort by true first", value: "TRUE_FIRST" },
{ name: "Sort by false first", value: "FALSE_FIRST" }, { name: "Sort by false first", value: "FALSE_FIRST" }
]; ]
const [sortValues, setSortValues] = createSignal(sortOptions[0]); const [sortValues, setSortValues] = createSignal(sortOptions[0])
const [hideIntermediates, setHideIntermediates] = createSignal(hideIntermediate); const [hideIntermediates, setHideIntermediates] = createSignal(hideIntermediate)
const [isLoaded, setIsLoaded] = createSignal<boolean | null>(null); const [isLoaded, setIsLoaded] = createSignal<boolean | null>(null)
const [error, setError] = createSignal<{ title: string, message: string } | null>(null); const [error, setError] = createSignal<{ title: string; message: string } | null>(null)
const [useLocalhost, setUseLocalhost] = createSignal(false); const [useLocalhost, setUseLocalhost] = createSignal(false)
/** /**
* Updates the state of the current expression to the new search with all whitespace removed. * Updates the state of the current expression to the new search with all whitespace removed.
* If the element is not found, reset. * If the element is not found, reset.
*/ */
function onClick(e: Event): void { function onClick(e: Event): void {
e.preventDefault(); // Stops the page from reloading onClick e.preventDefault() // Stops the page from reloading onClick
const exp = inputElement?.value; const exp = inputElement?.value
if (exp) { if (exp) {
setSearchParams({ setSearchParams({
exp, exp,
simplify: simplifyEnabled(), simplify: simplifyEnabled(),
hide: hideValues().value, hide: hideValues().value,
sort: sortValues().value, sort: sortValues().value,
hideIntermediate: hideIntermediates() hideIntermediate: hideIntermediates()
}); })
getFetchResult(exp); getFetchResult(exp)
} }
} }
function getFetchResult(exp: string | null): void { function getFetchResult(exp: string | null): void {
setFetchResult(null); setFetchResult(null)
if (exp && exp !== "") { if (exp && exp !== "") {
exp = replaceOperators(exp); exp = replaceOperators(exp)
setError(null); setError(null)
setIsLoaded(false); setIsLoaded(false)
fetch(`${fetchUrls[useLocalhost() ? 0 : 1]}${encodeURIComponent(exp)}? fetch(`${fetchUrls[useLocalhost() ? 0 : 1]}${encodeURIComponent(exp)}?
simplify=${simplifyEnabled()}&hide=${hideValues().value}&sort=${sortValues().value}&caseSensitive=false& simplify=${simplifyEnabled()}&hide=${hideValues().value}&sort=${sortValues().value}&caseSensitive=false&
hideIntermediate=${hideIntermediates()}`) hideIntermediate=${hideIntermediates()}`)
.then(res => res.json()) .then((res) => res.json())
.then(res => { .then((res) => {
if (res.status !== "OK" && !res.ok) { if (res.status !== "OK" && !res.ok) {
return setError({ title: "Input error", message: res.message }); return setError({ title: "Input error", message: res.message })
} }
return setFetchResult(res); return setFetchResult(res)
}) })
.catch(err => setError({ title: "Fetch error", message: err.toString() })) .catch((err) => setError({ title: "Fetch error", message: err.toString() }))
.finally(() => setIsLoaded(true)); .finally(() => setIsLoaded(true))
} }
} }
onMount((): void => { onMount((): void => {
if (searchParams.exp) { if (searchParams.exp) {
const exp = searchParams.exp; const exp = searchParams.exp
if (exp && inputElement) { if (exp && inputElement) {
inputElement.value = exp; inputElement.value = exp
} }
const hide = searchParams.hide; const hide = searchParams.hide
if (hide) { if (hide) {
setHideValues(hideOptions.find(o => o.value === hide) ?? hideOptions[0]); setHideValues(hideOptions.find((o) => o.value === hide) ?? hideOptions[0])
} }
const sort = searchParams.sort; const sort = searchParams.sort
if (sort) { if (sort) {
setSortValues(sortOptions.find(o => o.value === sort) ?? sortOptions[0]); setSortValues(sortOptions.find((o) => o.value === sort) ?? sortOptions[0])
} }
getFetchResult(exp); getFetchResult(exp)
} }
// Focuses searchbar on load // Focuses searchbar on load
if (!isTouch()) { if (!isTouch()) {
inputElement?.focus(); inputElement?.focus()
} }
}); })
const tableId = "truth-table"; const tableId = "truth-table"
const filenameId = "excel-filename"; const filenameId = "excel-filename"
function _exportToExcel(): void { function _exportToExcel(): void {
const value = getElementById<HTMLInputElement>(filenameId)?.value; const value = getElementById<HTMLInputElement>(filenameId)?.value
exportToExcel({ exportToExcel({
name: value !== "" ? value : undefined, tableId name: value !== "" ? value : undefined,
}); tableId
})
} }
return ( return (
<Layout title={"Truth tables"}> <Layout title={"Truth tables"}>
<Show when={import.meta.env.DEV ?? false} keyed> <Show when={import.meta.env.DEV ?? false} keyed>
(DEV) Use localhost: (DEV) Use localhost:
<MySwitch title={ "Use localhost" } defaultValue={ false } <MySwitch title={"Use localhost"} defaultValue={false} onChange={setUseLocalhost} />
onChange={ setUseLocalhost } />
</Show> </Show>
<div id={"truth-content"}> <div id={"truth-content"}>
<div class={ "max-w-2xl mx-auto" }> <div class={"mx-auto max-w-2xl"}>
<HowTo /> <HowTo />
<form class={"flex-row-center"} onSubmit={onClick} autocomplete={"off"}> <form class={"flex-row-center"} onSubmit={onClick} autocomplete={"off"}>
<Search ref={inputElement} typingDefault={inputContent} /> <Search ref={inputElement} typingDefault={inputContent} />
<Button id={ "truth-input-button" } <Button
id={"truth-input-button"}
title={"Generate (Enter)"} title={"Generate (Enter)"}
type={"submit"} type={"submit"}
className={ "min-w-50px h-10 ml-2" } className={"min-w-50px ml-2 h-10"}
children={ "Generate" } /> children={"Generate"}
/>
</form> </form>
{/* Options row */} {/* Options row */}
<Row className={"my-1 gap-2"}> <Row className={"my-1 gap-2"}>
<span class={"h-min"}>{"Simplify"}: </span> <span class={"h-min"}>{"Simplify"}: </span>
<MySwitch onChange={ setSimplifyEnabled } defaultValue={ simplifyEnabled() } <MySwitch
onChange={setSimplifyEnabled}
defaultValue={simplifyEnabled()}
title={"Simplify"} title={"Simplify"}
name={ "Turn on/off simplify expressions" } className={ "mx-1" } /> name={"Turn on/off simplify expressions"}
className={"mx-1"}
/>
<div class={ "h-min relative" }> <div class={"relative h-min"}>
<MyMenu title={ "Filter results" } id={ "filter-results" } <MyMenu
title={"Filter results"}
id={"filter-results"}
button={ button={
<Show when={ hideValues().value !== "NONE" } children={ <Show
<Icon path={ eyeSlash } aria-label={ "An eye with a slash through it" } when={hideValues().value !== "NONE"}
class={ `mx-1 ${ hideValues().value === "TRUE" ? children={
"text-green-500" : "text-red-500" }` } /> <Icon
} fallback={ path={eyeSlash}
<Icon path={ eye } aria-label={ "An eye" } class={ "mx-1" } /> aria-label={"An eye with a slash through it"}
} keyed /> class={`mx-1 ${hideValues().value === "TRUE" ? "text-green-500" : "text-red-500"}`}
/>
}
fallback={<Icon path={eye} aria-label={"An eye"} class={"mx-1"} />}
keyed
/>
} }
children={ children={
<For each={hideOptions}> <For each={hideOptions}>
{(option) => ( {(option) => (
<SingleMenuItem onClick={ () => setHideValues(option) } <SingleMenuItem
onClick={() => setHideValues(option)}
option={option} option={option}
currentValue={ hideValues } /> currentValue={hideValues}
) }
</For>
} itemsClassName={ "right-0" }
/> />
</div>
<div class={ "h-min relative" }>
<MyMenu title={ "Sort results" } id={ "sort-results" }
button={ <Icon path={ funnel } aria-label={ "Filter" }
class={ `h-6 w-6 ${ sortValues().value === "TRUE_FIRST" ? "text-green-500" :
sortValues().value === "FALSE_FIRST" && "text-red-500" }` } /> }
children={
<For each={ sortOptions }>
{ (option) => (
<SingleMenuItem option={ option } currentValue={ sortValues }
onClick={ () => setSortValues(option) } />
)} )}
</For> </For>
} }
@ -219,107 +208,145 @@ hideIntermediate=${ hideIntermediates() }`)
/> />
</div> </div>
<MySwitch title={ "Hide intermediate values" } <div class={"relative h-min"}>
<MyMenu
title={"Sort results"}
id={"sort-results"}
button={
<Icon
path={funnel}
aria-label={"Filter"}
class={`h-6 w-6 ${
sortValues().value === "TRUE_FIRST"
? "text-green-500"
: sortValues().value === "FALSE_FIRST" && "text-red-500"
}`}
/>
}
children={
<For each={sortOptions}>
{(option) => (
<SingleMenuItem
option={option}
currentValue={sortValues}
onClick={() => setSortValues(option)}
/>
)}
</For>
}
itemsClassName={"right-0"}
/>
</div>
<MySwitch
title={"Hide intermediate values"}
onChange={setHideIntermediates} onChange={setHideIntermediates}
defaultValue={ hideIntermediates() } /> defaultValue={hideIntermediates()}
/>
<Show when={isLoaded() && error() === null} keyed> <Show when={isLoaded() && error() === null} keyed>
<MyDialog
<MyDialog title={ "Download" } title={"Download"}
description={"Export current table (.xlsx)"} description={"Export current table (.xlsx)"}
button={ <> button={
<>
<p class={"sr-only"}>{"Download"}</p> <p class={"sr-only"}>{"Download"}</p>
<Icon aria-label={"Download"} path={arrowDownTray} /> <Icon aria-label={"Download"} path={arrowDownTray} />
</> } </>
}
callback={_exportToExcel} callback={_exportToExcel}
acceptButtonName={"Download"} acceptButtonName={"Download"}
cancelButtonName={"Cancel"} cancelButtonName={"Cancel"}
buttonClass={`float-right`} buttonClass={`float-right`}
buttonTitle={"Export current table"} buttonTitle={"Export current table"}
acceptButtonId={ "download-accept" }> acceptButtonId={"download-accept"}
>
<p>{"Filename"}:</p> <p>{"Filename"}:</p>
<Input className={ "border-rounded h-10 px-2" } id={ filenameId } <Input
placeholder={ "Truth Table" } /> className={"border-rounded h-10 px-2"}
id={filenameId}
placeholder={"Truth Table"}
/>
</MyDialog> </MyDialog>
</Show> </Show>
</Row> </Row>
<Show when={error()} keyed> <Show when={error()} keyed>
<ErrorBox title={ error()?.title ?? "Error" } <ErrorBox
error={ error()?.message ?? "Something went wrong" } /> title={error()?.title ?? "Error"}
error={error()?.message ?? "Something went wrong"}
/>
</Show> </Show>
<Show when={isLoaded() === false} keyed> <Show when={isLoaded() === false} keyed>
<Icon path={ arrowPath } aria-label={ "Loading indicator" } class={ "animate-spin mx-auto" } /> <Icon
path={arrowPath}
aria-label={"Loading indicator"}
class={"mx-auto animate-spin"}
/>
</Show> </Show>
<Show when={simplifyEnabled() && (fetchResult()?.orderOperations?.length ?? 0) > 0} keyed> <Show when={simplifyEnabled() && (fetchResult()?.orderOperations?.length ?? 0) > 0} keyed>
<ShowMeHow fetchResult={fetchResult} /> <ShowMeHow fetchResult={fetchResult} />
</Show> </Show>
</div> </div>
<Show when={isLoaded() && error() === null} keyed> <Show when={isLoaded() && error() === null} keyed>
<Show when={simplifyEnabled()} keyed> <Show when={simplifyEnabled()} keyed>
<InfoBox className={ "w-fit mx-auto pb-1 text-lg text-center" } <InfoBox
title={ "Output:" } id={ "expression-output" }> className={"mx-auto w-fit pb-1 text-center text-lg"}
title={"Output:"}
id={"expression-output"}
>
<p>{fetchResult()?.after}</p> <p>{fetchResult()?.after}</p>
</InfoBox> </InfoBox>
</Show> </Show>
<div class={ "flex justify-center m-2" }> <div class={"m-2 flex justify-center"}>
<div id={"table"} class={"h-[45rem] overflow-auto"}> <div id={"table"} class={"h-[45rem] overflow-auto"}>
<TruthTable
<TruthTable header={ fetchResult()?.header ?? undefined } header={fetchResult()?.header ?? undefined}
table={ fetchResult()?.table?.truthMatrix } id={ tableId } /> table={fetchResult()?.table?.truthMatrix}
id={tableId}
/>
</div> </div>
</div> </div>
</Show> </Show>
</div> </div>
</Layout> </Layout>
); )
} }
export default TruthTablePage; export default TruthTablePage
interface SingleMenuItem { interface SingleMenuItem {
option: Option, option: Option
currentValue?: Accessor<Option>, currentValue?: Accessor<Option>
onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>, onClick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>
} }
const SingleMenuItem: Component<SingleMenuItem> = ( const SingleMenuItem: Component<SingleMenuItem> = ({ option, currentValue, onClick }) => {
{ const isSelected = () => currentValue?.().value === option.value
option,
currentValue,
onClick
}) => {
const isSelected = () => currentValue?.().value === option.value;
return ( return (
<button class={ `hover:underline cursor-pointer last:mb-1 flex-row-center` } <button class={`flex-row-center cursor-pointer last:mb-1 hover:underline`} onClick={onClick}>
onClick={ onClick }> <Icon
<Icon path={ check } aria-label={ isSelected() ? "A checkmark" : "Nothing" } path={check}
class={ `text-white ${ !isSelected() && "invisible" }` } /> aria-label={isSelected() ? "A checkmark" : "Nothing"}
class={`text-white ${!isSelected() && "invisible"}`}
/>
{option.name} {option.name}
</button> </button>
); )
} }
const ErrorBox: Component<{ title: string, error: string }> = ({ title, error }) => ( const ErrorBox: Component<{ title: string; error: string }> = ({ title, error }) => (
<InfoBox className={ "w-fit text-center mx-auto" } <InfoBox className={"mx-auto w-fit text-center"} title={title} error={true}>
title={ title }
error={ true }>
<p>{error}</p> <p>{error}</p>
</InfoBox> </InfoBox>
); )
interface ShowMeHowProps { interface ShowMeHowProps {
fetchResult: Accessor<FetchResult | null>, fetchResult: Accessor<FetchResult | null>
} }
const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => ( const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => (
@ -327,59 +354,59 @@ const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => (
<MyDisclosure title={"Show me how it's done"}> <MyDisclosure title={"Show me how it's done"}>
<table class={"table"}> <table class={"table"}>
<tbody> <tbody>
<For each={fetchResult()?.orderOperations}>{orderOperationRow()}</For>
<For each={ fetchResult()?.orderOperations }>
{ orderOperationRow() }
</For>
</tbody> </tbody>
</table> </table>
</MyDisclosure> </MyDisclosure>
</MyDisclosureContainer> </MyDisclosureContainer>
); )
const HowTo: Component = () => ( const HowTo: Component = () => (
<MyDisclosureContainer> <MyDisclosureContainer>
<MyDisclosure title={"How to"}> <MyDisclosure title={"How to"}>
<p>Fill in a truth expression and it will be simplified for you as much as possible. <p>
It will also genereate a truth table with all possible values. You can use a single Fill in a truth expression and it will be simplified for you as much as possible. It will
letter, also genereate a truth table with all possible values. You can use a single letter, word or
word or multiple words without spacing for each atomic value. multiple words without spacing for each atomic value. If you do not want to simplify the
If you do not want to simplify the expression, simply turn off the toggle. expression, simply turn off the toggle. Keywords for operators are defined below.
Keywords for operators are defined below. Parentheses is also allowed.</p> Parentheses is also allowed.
<p>API docs can be found <Link to={ "https://api.martials.no/simplify-truths" }>here</Link>. </p>
<p>
API docs can be found <Link to={"https://api.martials.no/simplify-truths"}>here</Link>.
</p> </p>
</MyDisclosure> </MyDisclosure>
<KeywordsDisclosure /> <KeywordsDisclosure />
</MyDisclosureContainer> </MyDisclosureContainer>
); )
const orderOperationRow = () => (operation: OrderOfOperation, index: Accessor<number>) => ( const orderOperationRow = () => (operation: OrderOfOperation, index: Accessor<number>) => (
<tr class={"border-b border-dotted border-gray-500"}> <tr class={"border-b border-dotted border-gray-500"}>
<td>{index() + 1}:</td> <td>{index() + 1}:</td>
<td class={ "px-2" }>{ <td class={"px-2"}>
{
<For each={diffChars(operation.before, operation.after)}> <For each={diffChars(operation.before, operation.after)}>
{(part) => ( {(part) => (
<span class={`${part.added && "bg-green-700"} ${part.removed && "bg-red-700"}`}> <span class={`${part.added && "bg-green-700"} ${part.removed && "bg-red-700"}`}>
{part.value} {part.value}
</span> </span>
)} )}
</For> } </For>
}
<Show when={typeof window !== "undefined" && window.outerWidth <= 640} keyed> <Show when={typeof window !== "undefined" && window.outerWidth <= 640} keyed>
<p>{ "using" }: { operation.law }</p> <p>
{"using"}: {operation.law}
</p>
</Show> </Show>
</td> </td>
<Show when={typeof window !== "undefined" && window.outerWidth > 640} keyed> <Show when={typeof window !== "undefined" && window.outerWidth > 640} keyed>
<td>{ "using" }: { operation.law }</td> <td>
{"using"}: {operation.law}
</td>
</Show> </Show>
</tr> </tr>
); )
const KeywordsDisclosure: Component = () => ( const KeywordsDisclosure: Component = () => (
<MyDisclosure title={"Keywords"}> <MyDisclosure title={"Keywords"}>
@ -417,4 +444,4 @@ const KeywordsDisclosure: Component = () => (
</tbody> </tbody>
</table> </table>
</MyDisclosure> </MyDisclosure>
); )

6
src/types/env.d.ts vendored
View File

@ -1,9 +1,9 @@
/// <reference types="vite/client" /> /// <reference types="vite/client" />
interface ImportMetaEnv { interface ImportMetaEnv {
readonly VITE_FETCH_URL: string, readonly VITE_FETCH_URL: string
readonly VITE_FETCH_PATH: string, readonly VITE_FETCH_PATH: string
readonly VITE_FETCH_FULL: string, readonly VITE_FETCH_FULL: string
} }
interface ImportMeta { interface ImportMeta {

82
src/types/types.d.ts vendored
View File

@ -1,70 +1,70 @@
interface SimpleProps<T extends HTMLElement = HTMLElement> { interface SimpleProps<T extends HTMLElement = HTMLElement> {
name?: string; name?: string
className?: string, className?: string
style?: import("solid-js").JSX.CSSProperties, style?: import("solid-js").JSX.CSSProperties
id?: string, id?: string
title?: string, title?: string
ref?: T, ref?: T
} }
interface ChildProps<T extends HTMLElement = HTMLInputElement> extends SimpleProps<T> { interface ChildProps<T extends HTMLElement = HTMLInputElement> extends SimpleProps<T> {
children?: import("solid-js").JSX.Element, children?: import("solid-js").JSX.Element
} }
interface LinkProps extends ChildProps { interface LinkProps extends ChildProps {
to?: string, to?: string
rel?: string, rel?: string
newTab?: boolean, newTab?: boolean
} }
interface TitleProps<T extends HTMLElement = HTMLElement> extends ChildProps<T> { interface TitleProps<T extends HTMLElement = HTMLElement> extends ChildProps<T> {
title?: string, title?: string
} }
interface ButtonProps extends TitleProps { interface ButtonProps extends TitleProps {
onClick?: import("solid-js").JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>, onClick?: import("solid-js").JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>
type?: "button" | "submit" | "reset", type?: "button" | "submit" | "reset"
} }
interface InputProps<T extends HTMLElement = HTMLInputElement> extends TitleProps<T> { interface InputProps<T extends HTMLElement = HTMLInputElement> extends TitleProps<T> {
onInput?: import("solid-js").JSX.EventHandlerUnion<T, Event>, onInput?: import("solid-js").JSX.EventHandlerUnion<T, Event>
placeholder?: string, placeholder?: string
required?: boolean, required?: boolean
type?: string, type?: string
} }
interface CardProps extends LinkProps { interface CardProps extends LinkProps {
title?: string; title?: string
} }
type Expression = { type Expression = {
leading: string, leading: string
left: Expression | null, left: Expression | null
operator: Operator | null, operator: Operator | null
right: Expression | null, right: Expression | null
trailing: string, trailing: string
atomic: string | null, atomic: string | null
}; }
type Operator = "AND" | "OR" | "NOT" | "IMPLICATION"; type Operator = "AND" | "OR" | "NOT" | "IMPLICATION"
type Table = boolean[][]; type Table = boolean[][]
type OrderOfOperation = { type OrderOfOperation = {
before: string, before: string
after: string, after: string
law: string, law: string
}; }
type FetchResult = { type FetchResult = {
status: string, status: string
version: string | null, version: string | null
before: string, before: string
after: string, after: string
orderOperations: OrderOfOperation[] | null, orderOperations: OrderOfOperation[] | null
expression: Expression | null, expression: Expression | null
header: string[] | null, header: string[] | null
table: { table: {
truthMatrix: Table, truthMatrix: Table
} | null, } | null
}; }

2
src/utils/dom.ts
View File

@ -5,5 +5,5 @@
* @returns The element with the given id, or null if it doesn't exist * @returns The element with the given id, or null if it doesn't exist
*/ */
export function getElementById<T extends HTMLElement = HTMLElement>(id: string): T | null { export function getElementById<T extends HTMLElement = HTMLElement>(id: string): T | null {
return <T>document.getElementById(id); return <T>document.getElementById(id)
} }

25
src/utils/export.ts
View File

@ -1,4 +1,4 @@
import { type BookType, utils, write, writeFile } from "xlsx"; import { type BookType, utils, write, writeFile } from "xlsx"
/** /**
* Exports the generated truth table to an excel (.xlsx) file * Exports the generated truth table to an excel (.xlsx) file
@ -27,17 +27,20 @@ import { type BookType, utils, write, writeFile } from "xlsx";
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
export function exportToExcel( export function exportToExcel({
{
type = "xlsx", type = "xlsx",
name = "Truth Table", name = "Truth Table",
dl = false, dl = false,
tableId, tableId
}: { type?: BookType, name?: string, dl?: boolean, tableId: string }): any { }: {
type?: BookType
const element = document.getElementById(tableId); name?: string
const wb = utils.table_to_book(element, { sheet: "sheet1" }); dl?: boolean
return dl ? tableId: string
write(wb, { bookType: type, bookSST: true, type: 'base64' }) : }): any {
writeFile(wb, name + "." + type); const element = document.getElementById(tableId)
const wb = utils.table_to_book(element, { sheet: "sheet1" })
return dl
? write(wb, { bookType: type, bookSST: true, type: "base64" })
: writeFile(wb, name + "." + type)
} }

2
src/utils/expressionUtils.ts
View File

@ -10,5 +10,5 @@ export function replaceOperators(expression: string): string {
.replaceAll(/\sOR\s/gi, " | ") .replaceAll(/\sOR\s/gi, " | ")
.replaceAll(/\sAND\s/gi, " & ") .replaceAll(/\sAND\s/gi, " & ")
.replaceAll(/\s(IMPLICATION|IMP)\s/gi, " -> ") .replaceAll(/\s(IMPLICATION|IMP)\s/gi, " -> ")
.replaceAll(/\sNOT\s/gi, " !"); .replaceAll(/\sNOT\s/gi, " !")
} }

5
src/utils/failureFunction.ts
View File

@ -1,13 +1,14 @@
export function failureFunction(P: String, m = P.length): number[] { export function failureFunction(P: String, m = P.length): number[] {
// No proper prefix for string of length 1: // No proper prefix for string of length 1:
const arr = [0] const arr = [0]
let i = 0, j = 1 let i = 0,
j = 1
while (j < m) { while (j < m) {
if (P[i] == P[j]) { if (P[i] == P[j]) {
i++ i++
arr.push(i) arr.push(i)
j++; j++
} }
// The first character didn't match: // The first character didn't match:
else if (i == 0) { else if (i == 0) {

2
src/utils/touch.ts
View File

@ -3,5 +3,5 @@
* @returns {boolean} True if the device is touch enabled, otherwise false * @returns {boolean} True if the device is touch enabled, otherwise false
*/ */
export function isTouch(): boolean { export function isTouch(): boolean {
return 'ontouchstart' in window || navigator.maxTouchPoints > 0; return "ontouchstart" in window || navigator.maxTouchPoints > 0
} }

15
tailwind.config.js
View File

@ -1,16 +1,13 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: ["./index.html", "./404.html", "./src/**/*.{js,ts,jsx,tsx,css,md,mdx,html,json,scss}"],
'./index.html', "./404.html", darkMode: "class",
'./src/**/*.{js,ts,jsx,tsx,css,md,mdx,html,json,scss}',
],
darkMode: 'class',
theme: { theme: {
extend: { extend: {
colors: { colors: {
"default-bg": "#181a1b", "default-bg": "#181a1b"
}
} }
}, },
}, plugins: []
plugins: [], }
};

14
vite.config.ts
View File

@ -1,17 +1,17 @@
import { defineConfig } from 'vite'; import { defineConfig } from "vite"
import solidPlugin from 'vite-plugin-solid'; import solidPlugin from "vite-plugin-solid"
export default defineConfig({ export default defineConfig({
plugins: [solidPlugin()], plugins: [solidPlugin()],
server: { server: {
port: 3000, port: 3000
}, },
build: { build: {
target: 'esnext', target: "esnext",
rollupOptions: { rollupOptions: {
input: { input: {
main: "index.html", main: "index.html"
} }
} }
}, }
}); })