Updated deps.

Fixed type errors.

package.json

@@ -11,22 +11,22 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "autoprefixer": "^10.4.17",
+    "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.39",
-    "prettier": "3.2.5",
+    "prettier": "3.3.3",
-    "prettier-plugin-tailwindcss": "^0.5.11",
+    "prettier-plugin-tailwindcss": "^0.6.5",
-    "tailwindcss": "^3.4.1",
+    "tailwindcss": "^3.4.6",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.3",
-    "vite": "^5.1.4",
+    "vite": "^5.3.4",
-    "vite-plugin-solid": "^2.10.1"
+    "vite-plugin-solid": "^2.10.2"
   },
   "dependencies": {
-    "@solidjs/router": "^0.12.4",
+    "@solidjs/router": "^0.14.1",
-    "@types/diff": "^5.0.9",
+    "@types/diff": "^5.2.1",
     "diff": "^5.2.0",
     "solid-headless": "^0.13.1",
     "solid-heroicons": "^3.2.4",
-    "solid-js": "^1.8.15",
+    "solid-js": "^1.8.18",
     "xlsx": "^0.18.5"
   }
 }

src/components/truth-table.tsx

@@ -3,7 +3,7 @@ import { For } from "solid-js/web"
 import { type Component } from "solid-js"
 
 interface TruthTableProps extends SimpleProps {
-  table?: Table
+  table?: TruthMatrix
   header?: string[]
 }
 
@@ -20,8 +20,7 @@ const TruthTable: Component<TruthTableProps> = ({ table, header, className, styl
             <th
               scope={"col"}
               class={
-                `sticky top-0 bg-default-bg text-center outline
+                `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 */
-                             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>
@@ -37,8 +36,7 @@ const TruthTable: Component<TruthTableProps> = ({ table, header, className, styl
             <For each={row}>
               {(value) => (
                 <td
-                  class={`border border-gray-500 text-center last:underline
+                  class={`border border-gray-500 text-center last:underline ${value ? "bg-green-700" : "bg-red-700"}`}
-                                            ${value ? "bg-green-700" : "bg-red-700"}`}
                 >
                   <p>{value ? "T" : "F"}</p>
                 </td>

src/pages/truth-table.tsx

@@ -25,18 +25,20 @@ type Option = {
 }
 
 const fetchUrls = [
-  "http://localhost:8080/simplify/table/",
+  "http://localhost:8000/simplify/table/",
-  "https://api.martials.no/simplify-truths/simplify/table/"
+  "https://api.martials.no/simplify-truths/v2/simplify/table/"
 ]
 
 // TODO move some code to new components
+// TODO option to ignore case
+// TODO more user friendly options
 const TruthTablePage: Component = () => {
   const [searchParams, setSearchParams] = useSearchParams()
-  let inputElement: HTMLInputElement | undefined = undefined
+  let inputElement!: HTMLInputElement
 
   let simplifyDefault = searchParams.simplify === undefined || searchParams.simplify === "true",
     inputContent = !!searchParams.exp,
-    hideIntermediate = searchParams.hideIntermediate === "true"
+    hideIntermediate = searchParams.hideIntermediateSteps === "true"
 
   const [simplifyEnabled, setSimplifyEnabled] = createSignal(simplifyDefault)
   const [fetchResult, setFetchResult] = createSignal<FetchResult | null>(null)
@@ -75,14 +77,14 @@ const TruthTablePage: Component = () => {
         simplify: simplifyEnabled(),
         hide: hideValues().value,
         sort: sortValues().value,
-        hideIntermediate: hideIntermediates()
+        hideIntermediateSteps: hideIntermediates()
       })
 
-      getFetchResult(exp)
+      void getFetchResult(exp)
     }
   }
 
-  function getFetchResult(exp: string | null): void {
+  async function getFetchResult(exp: string | null): Promise<void> {
     setFetchResult(null)
 
     if (exp && exp !== "") {
@@ -90,18 +92,30 @@ const TruthTablePage: Component = () => {
       setError(null)
       setIsLoaded(false)
 
-      fetch(`${fetchUrls[useLocalhost() ? 0 : 1]}${encodeURIComponent(exp)}?
+      try {
-simplify=${simplifyEnabled()}&hide=${hideValues().value}&sort=${sortValues().value}&caseSensitive=false&
+        const response =
-hideIntermediate=${hideIntermediates()}`)
+          await fetch(`${fetchUrls[useLocalhost() ? 0 : 1]}${encodeURIComponent(exp)}?
-        .then((res) => res.json())
+simplify=${simplifyEnabled()}&hide=${hideValues().value}&sort=${sortValues().value}&ignoreCase=false&
-        .then((res) => {
+hideIntermediateSteps=${hideIntermediates()}`)
-          if (res.status !== "OK" && !res.ok) {
+
-            return setError({ title: "Input error", message: res.message })
+        const body = await response.json()
-          }
+        if (!response.ok) {
-          return setFetchResult(res)
+          setError({
+            title: "Input error",
+            message: body.message
+          })
+        } else {
+          const fetchResult: FetchResult = body
+          setFetchResult(fetchResult)
+        }
+      } catch (e: any) {
+        setError({
+          title: "Error",
+          message: e.message
         })
-        .catch((err) => setError({ title: "Fetch error", message: err.toString() }))
+      } finally {
-        .finally(() => setIsLoaded(true))
+        setIsLoaded(true)
+      }
     }
   }
 
@@ -120,7 +134,7 @@ hideIntermediate=${hideIntermediates()}`)
         setSortValues(sortOptions.find((o) => o.value === sort) ?? sortOptions[0])
       }
 
-      getFetchResult(exp)
+      void getFetchResult(exp)
     }
 
     // Focuses searchbar on load
@@ -286,12 +300,12 @@ hideIntermediate=${hideIntermediates()}`)
             />
           </Show>
 
-          <Show when={simplifyEnabled() && (fetchResult()?.orderOperations?.length ?? 0) > 0} keyed>
+          <Show when={simplifyEnabled() && (fetchResult()?.operations?.length ?? 0) > 0} keyed>
             <ShowMeHow fetchResult={fetchResult} />
           </Show>
         </div>
 
-        <Show when={isLoaded() && error() === null} keyed>
+        <Show when={isLoaded() && error() === null && fetchResult()?.truthTable} keyed>
           <Show when={simplifyEnabled()} keyed>
             <InfoBox
               className={"mx-auto w-fit pb-1 text-center text-lg"}
@@ -305,8 +319,8 @@ hideIntermediate=${hideIntermediates()}`)
           <div class={"m-2 flex justify-center"}>
             <div id={"table"} class={"h-[45rem] overflow-auto"}>
               <TruthTable
-                header={fetchResult()?.header ?? undefined}
+                header={fetchResult()!.truthTable!.header}
-                table={fetchResult()?.table?.truthMatrix}
+                table={fetchResult()!.truthTable!.truthMatrix}
                 id={tableId}
               />
             </div>
@@ -354,7 +368,7 @@ const ShowMeHow: Component<ShowMeHowProps> = ({ fetchResult }) => (
     <MyDisclosure title={"Show me how it's done"}>
       <table class={"table"}>
         <tbody>
-          <For each={fetchResult()?.orderOperations}>{orderOperationRow()}</For>
+          <For each={fetchResult()?.operations}>{operationRow()}</For>
         </tbody>
       </table>
     </MyDisclosure>
@@ -372,7 +386,8 @@ const HowTo: Component = () => (
         Parentheses is also allowed.
       </p>
       <p>
-        API docs can be found <Link to={"https://api.martials.no/simplify-truths"}>here</Link>.
+        API docs can be found{" "}
+        <Link to={"https://api.martials.no/simplify-truths/v2/openapi"}>here</Link>.
       </p>
     </MyDisclosure>
 
@@ -380,7 +395,7 @@ const HowTo: Component = () => (
   </MyDisclosureContainer>
 )
 
-const orderOperationRow = () => (operation: OrderOfOperation, index: Accessor<number>) => (
+const operationRow = () => (operation: Operation, index: Accessor<number>) => (
   <tr class={"border-b border-dotted border-gray-500"}>
     <td>{index() + 1}:</td>
     <td class={"px-2"}>
@@ -437,7 +452,7 @@ const KeywordsDisclosure: Component = () => (
         </tr>
         <tr>
           <td class={"pr-2"}>Implication:</td>
-          <td>{"->"}</td>
+          <td>{"=>"}</td>
           <td class={"px-2"}>IMPLICATION</td>
           <td>IMP</td>
         </tr>

src/types/types.d.ts

@@ -37,34 +37,51 @@ interface CardProps extends LinkProps {
   title?: string
 }
 
-type Expression = {
+type AtomicExpression = {
-  leading: string
+  atomic: string
-  left: Expression | null
-  operator: Operator | null
-  right: Expression | null
-  trailing: string
-  atomic: string | null
 }
 
-type Operator = "AND" | "OR" | "NOT" | "IMPLICATION"
+type NotExpression = {
+  not: Expression
+}
 
-type Table = boolean[][]
+type BinaryExpression = {
+  left: Expression
+  operator: BinaryOperator
+  right: Expression
+}
 
-type OrderOfOperation = {
+type Expression = AtomicExpression | NotExpression | BinaryExpression
+
+type BinaryOperator = "AND" | "OR" | "IMPLICATION"
+
+type Law =
+  | "ELIMINATION_OF_IMPLICATION"
+  | "DE_MORGANS_LAWS"
+  | "ABSORPTION_LAW"
+  | "ASSOCIATIVE_LAW"
+  | "DISTRIBUTIVE_LAW"
+  | "DOUBLE_NEGATION_ELIMINATION"
+  | "COMMUTATIVE_LAW"
+
+type TruthMatrix = boolean[][]
+
+type Operation = {
   before: string
   after: string
-  law: string
+  law: Law
+}
+
+type Table = {
+  header: string[]
+  truthMatrix: TruthMatrix
 }
 
 type FetchResult = {
-  status: string
+  version: string
-  version: string | null
   before: string
   after: string
-  orderOperations: OrderOfOperation[] | null
+  operations: Operation[]
   expression: Expression | null
-  header: string[] | null
+  truthTable?: Table | null
-  table: {
-    truthMatrix: Table
-  } | null
 }

src/utils/expressionUtils.ts

@@ -7,8 +7,8 @@ export function replaceOperators(expression: string): string {
   return expression
     .replaceAll(/\//g, "|")
     .replaceAll(/¬/g, "!")
-    .replaceAll(/\sOR\s/gi, " | ")
+    .replaceAll(/\s(OR|⋁)\s/gi, " | ")
-    .replaceAll(/\sAND\s/gi, " & ")
+    .replaceAll(/\s(AND|⋀)\s/gi, " & ")
-    .replaceAll(/\s(IMPLICATION|IMP)\s/gi, " -> ")
+    .replaceAll(/\s(IMPLICATION|IMP|->)\s/gi, " => ")
     .replaceAll(/\sNOT\s/gi, " !")
 }