Deno format

Author: iwoplaza

.gitignore

@@ -13,8 +13,6 @@ dist-ssr
 *.local
 
 # Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "emeraldwalk.runonsave"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[astro]": {
+    "editor.defaultFormatter": "astro-build.astro-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": null
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": null
+  },
+  "emeraldwalk.runonsave": {
+    "commands": [
+      {
+        "match": ".*",
+        "cmd": "echo \"Formatting ${relativeFile}\" && deno fmt ./${relativeFile}"
+      }
+    ]
+  },
+  "deno.enable": false,
+  "typescript.preferences.importModuleSpecifier": "relative"
+}

README.md

@@ -17,12 +17,15 @@ Ethical AI upscaling for games. _(formerly "mender")_
 
 ## What does it do?
 
-It upscales an image by a factor of $4$ (1K → 4K, etc.) with a minimal hit to performance.
-For the renderer implemented in the official example, it produces a $2024\times2024$ image ~12 times faster than targeting $2024\times2024$ directly.
+It upscales an image by a factor of $4$ (1K → 4K, etc.) with a minimal hit to
+performance. For the renderer implemented in the official example, it produces a
+$2024\times2024$ image ~12 times faster than targeting $2024\times2024$
+directly.
 
 ## Ethical?
 
-The dataset that was used to train the upscaling neural network was generated with Blender's Geometry Nodes. **No artist's work was used in the process**.
+The dataset that was used to train the upscaling neural network was generated
+with Blender's Geometry Nodes. **No artist's work was used in the process**.
 
 ## Roadmap
 
@@ -33,7 +36,8 @@ The dataset that was used to train the upscaling neural network was generated wi
 - [x] Implement inference on the WebGPU.
 - [ ] Use multisampling for render passes.
 - [ ] Create rasterizing renderer (polygonal geometry).
-- [ ] Extract into a separate package, to be used as an upscaling step in other WebGPU projects.
+- [ ] Extract into a separate package, to be used as an upscaling step in other
+      WebGPU projects.
 
 ## Development
 
@@ -42,4 +46,5 @@ The dataset that was used to train the upscaling neural network was generated wi
 - Install Node.js
 - Install pnpm
 - Run `pnpm install` to install all dependencies
-- Run `pnpm dev` to run the development server, making the web app available via the web browser.
+- Run `pnpm dev` to run the development server, making the web app available via
+  the web browser.

apps/phoure-www/README.md

@@ -15,7 +15,8 @@ npm create astro@latest -- --template starlight
 
 ## 🚀 Project Structure
 
-Inside of your Astro + Starlight project, you'll see the following folders and files:
+Inside of your Astro + Starlight project, you'll see the following folders and
+files:
 
 ```
 .
@@ -30,9 +31,11 @@ Inside of your Astro + Starlight project, you'll see the following folders and f
 └── tsconfig.json
 ```
 
-Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory. Each file is exposed as a route based on its file name.
+Starlight looks for `.md` or `.mdx` files in the `src/content/docs/` directory.
+Each file is exposed as a route based on its file name.
 
-Images can be added to `src/assets/` and embedded in Markdown with a relative link.
+Images can be added to `src/assets/` and embedded in Markdown with a relative
+link.
 
 Static assets, like favicons, can be placed in the `public/` directory.
 
@@ -51,4 +54,6 @@ All commands are run from the root of the project, from a terminal:
 
 ## 👀 Want to learn more?
 
-Check out [Starlight’s docs](https://starlight.astro.build/), read [the Astro documentation](https://docs.astro.build), or jump into the [Astro Discord server](https://astro.build/chat).
+Check out [Starlight’s docs](https://starlight.astro.build/), read
+[the Astro documentation](https://docs.astro.build), or jump into the
+[Astro Discord server](https://astro.build/chat).

apps/phoure-www/deno.json

@@ -0,0 +1,6 @@
+{
+  "fmt": {
+    "singleQuote": true,
+    "exclude": ["pnpm-lock.yaml"]
+  }
+}

apps/phoure-www/src/components/ControlsSidebar.tsx

@@ -1,6 +1,6 @@
 import type { CheckedState } from '@radix-ui/react-checkbox';
 import type { SliderProps } from '@radix-ui/react-slider';
-import { type WritableAtom, useAtom, useSetAtom } from 'jotai';
+import { useAtom, useSetAtom, type WritableAtom } from 'jotai';
 import { ChevronDown } from 'lucide-react';
 import { useCallback, useId } from 'react';
 
@@ -28,15 +28,15 @@ import {
 import { Slider } from 'src/components/ui/slider';
 import { accumulatedLayersAtom } from 'src/lib/GameEngine/sdfRenderer/sdfRenderer.ts';
 import {
-  type DisplayMode,
-  DisplayModes,
   autoRotateControlAtom,
   autoRotateSpeedAtom,
   cameraFovControlAtom,
   cameraOrientationControlAtom,
   cameraYControlAtom,
   cameraZoomControlAtom,
+  type DisplayMode,
   displayModeAtom,
+  DisplayModes,
   fixedTimestepAtom,
   fixedTimestepEnabledAtom,
   targetResolutionAtom,
@@ -45,8 +45,8 @@ import { Separator } from './ui/separator';
 
 function ControlLabel(props: { htmlFor: string; children: string }) {
   return (
-    <div className="min-h-[2rem] flex items-center">
-      <Label className="text-xs text-slate-500" htmlFor={props.htmlFor}>
+    <div className='min-h-[2rem] flex items-center'>
+      <Label className='text-xs text-slate-500' htmlFor={props.htmlFor}>
         {props.children}
       </Label>
     </div>
@@ -75,17 +75,17 @@ function SliderControl(
 
   return (
     <>
-      <div className="px-4 mt-2 mb-4">
+      <div className='px-4 mt-2 mb-4'>
         <ControlLabel htmlFor={id}>{label}</ControlLabel>
-        <div className="flex justify-self-stretch gap-2">
+        <div className='flex justify-self-stretch gap-2'>
           <Slider
             {...rest}
             value={[value]}
             onValueChange={onValueChange}
-            className="w-[180px]"
+            className='w-[180px]'
             id={id}
           />
-          <p className="min-w-12 text-right">{value}</p>
+          <p className='min-w-12 text-right'>{value}</p>
         </div>
       </div>
     </>
@@ -109,9 +109,9 @@ function CheckboxControl(props: {
   );
 
   return (
-    <div className="px-4 mt-4 flex items-center justify-between">
+    <div className='px-4 mt-4 flex items-center justify-between'>
       <ControlLabel htmlFor={id}>{label}</ControlLabel>
-      <Checkbox checked={checked} onCheckedChange={onCheckedChange} id="id" />
+      <Checkbox checked={checked} onCheckedChange={onCheckedChange} id='id' />
     </div>
   );
 }
@@ -129,11 +129,11 @@ function DisplayModeControl() {
   );
 
   return (
-    <div className="px-4 my-2">
-      <ControlLabel htmlFor="display-mode">Display mode</ControlLabel>
+    <div className='px-4 my-2'>
+      <ControlLabel htmlFor='display-mode'>Display mode</ControlLabel>
       <Select value={displayMode} onValueChange={onValueChange}>
-        <SelectTrigger className="w-[180px]" id="display-mode">
-          <SelectValue placeholder="Display mode" />
+        <SelectTrigger className='w-[180px]' id='display-mode'>
+          <SelectValue placeholder='Display mode' />
         </SelectTrigger>
         <SelectContent>
           {DisplayModes.map((mode) => (
@@ -160,11 +160,11 @@ function TargetResolutionControl() {
   );
 
   return (
-    <div className="px-4">
-      <ControlLabel htmlFor="target-resolution">Target resolution</ControlLabel>
+    <div className='px-4'>
+      <ControlLabel htmlFor='target-resolution'>Target resolution</ControlLabel>
       <Select value={String(targetResolution)} onValueChange={onValueChange}>
-        <SelectTrigger className="w-[180px]" id="target-resolution">
-          <SelectValue placeholder="Target resolution" />
+        <SelectTrigger className='w-[180px]' id='target-resolution'>
+          <SelectValue placeholder='Target resolution' />
         </SelectTrigger>
         <SelectContent>
           <SelectItem value={'256'}>256x256</SelectItem>
@@ -190,12 +190,12 @@ function ControlGroup(props: ControlGroupProps) {
   const { label, children } = props;
 
   return (
-    <Collapsible defaultOpen className="group/collapsible">
+    <Collapsible defaultOpen className='group/collapsible'>
       <SidebarGroup>
         <SidebarGroupLabel asChild>
           <CollapsibleTrigger>
             {label}
-            <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+            <ChevronDown className='ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180' />
           </CollapsibleTrigger>
         </SidebarGroupLabel>
         <CollapsibleContent>
@@ -208,60 +208,60 @@ function ControlGroup(props: ControlGroupProps) {
 
 export function ControlsSidebar() {
   return (
-    <Sidebar side="left" variant="sidebar">
+    <Sidebar side='left' variant='sidebar'>
       <SidebarContent>
-        <ControlGroup label="Rendering">
+        <ControlGroup label='Rendering'>
           <DisplayModeControl />
           <TargetResolutionControl />
         </ControlGroup>
         <Separator />
-        <ControlGroup label="Time">
+        <ControlGroup label='Time'>
           <CheckboxControl
-            label="Fixed timestep"
+            label='Fixed timestep'
             valueAtom={fixedTimestepEnabledAtom}
           />
           <SliderControl
-            label="Seconds per frame"
+            label='Seconds per frame'
             valueAtom={fixedTimestepAtom}
             min={0.1}
             step={0.1}
             max={2}
           />
         </ControlGroup>
         <Separator />
-        <ControlGroup label="Camera">
+        <ControlGroup label='Camera'>
           <SliderControl
-            label="Up/down position"
+            label='Up/down position'
             valueAtom={cameraYControlAtom}
             min={-0.2}
             step={0.01}
             max={1}
           />
           <SliderControl
-            label="Distance from origin"
+            label='Distance from origin'
             valueAtom={cameraZoomControlAtom}
             min={1}
             step={0.01}
             max={4}
           />
           <SliderControl
-            label="Field of view"
+            label='Field of view'
             valueAtom={cameraFovControlAtom}
             min={20}
             step={1}
             max={170}
           />
           <SliderControl
-            label="Yaw angle"
+            label='Yaw angle'
             valueAtom={cameraOrientationControlAtom}
             max={360}
           />
           <CheckboxControl
-            label="Auto rotate"
+            label='Auto rotate'
             valueAtom={autoRotateControlAtom}
           />
           <SliderControl
-            label="Auto rotate speed"
+            label='Auto rotate speed'
             valueAtom={autoRotateSpeedAtom}
             min={0.5}
             step={0.01}

apps/phoure-www/src/components/DemoApp.tsx

@@ -13,16 +13,16 @@ export function DemoApp() {
     <SidebarProvider defaultOpen>
       <Provider store={store}>
         <ControlsSidebar />
-        <main className="relative flex-1 flex bg-slate-200 min-h-screen justify-center items-center">
-          <header className="absolute top-2 inset-x-0 h-10 flex justify-center items-center">
+        <main className='relative flex-1 flex bg-slate-200 min-h-screen justify-center items-center'>
+          <header className='absolute top-2 inset-x-0 h-10 flex justify-center items-center'>
             <img
-              className="h-8"
-              src="/phoure/phoure-logo-light.svg"
-              alt="phoure logo"
+              className='h-8'
+              src='/phoure/phoure-logo-light.svg'
+              alt='phoure logo'
             />
-            <h1 className="hidden">phoure</h1>
+            <h1 className='hidden'>phoure</h1>
           </header>
-          <div className="absolute top-2 left-2">
+          <div className='absolute top-2 left-2'>
             <SidebarTrigger />
           </div>
           <div>
@@ -31,10 +31,10 @@ export function DemoApp() {
           </div>
         </main>
         <NavAside />
-        <footer className="absolute bottom-2 right-2 text-sm font-poppins">
-          <p className="whitespace-nowrap text-nowrap">
-            Made with <HeartIcon className="w-4 h-4 inline-block" /> by Iwo
-            Plaza
+        <footer className='absolute bottom-2 right-2 text-sm font-poppins'>
+          <p className='whitespace-nowrap text-nowrap'>
+            Made with <HeartIcon className='w-4 h-4 inline-block' />{' '}
+            by Iwo Plaza
           </p>
         </footer>
       </Provider>

apps/phoure-www/src/components/FpsCounter.tsx

@@ -60,8 +60,8 @@ function FPSCounter() {
   const fps = useSyncExternalStore(subscribe, getFPS);
 
   return (
-    <p className="text-xl text-white font-light">
-      <span className="text-white/70">FPS:</span> {fps}
+    <p className='text-xl text-white font-light'>
+      <span className='text-white/70'>FPS:</span> {fps}
     </p>
   );
 }

apps/phoure-www/src/components/NavAside.tsx

@@ -8,28 +8,28 @@ import {
 
 export function NavAside() {
   return (
-    <aside className="absolute top-2 right-2 text-black">
+    <aside className='absolute top-2 right-2 text-black'>
       <nav>
-        <ul className="flex flex-row gap-2">
+        <ul className='flex flex-row gap-2'>
           <li>
             <HoverCard openDelay={200} closeDelay={400}>
               <HoverCardTrigger>
                 <CircleHelpIcon />
               </HoverCardTrigger>
               <HoverCardContent>
-                <p className="text-sm text-justify">
-                  The goal of <strong>phoure</strong> is to be an upscaling
-                  solution that does not infringe on the rights of artists. Try
-                  it out in this live demo.
+                <p className='text-sm text-justify'>
+                  The goal of <strong>phoure</strong>{' '}
+                  is to be an upscaling solution that does not infringe on the
+                  rights of artists. Try it out in this live demo.
                 </p>
               </HoverCardContent>
             </HoverCard>
           </li>
           <li>
             <a
-              href="https://github.com/iwoplaza/phoure"
-              target="_blank"
-              rel="noreferrer noopener"
+              href='https://github.com/iwoplaza/phoure'
+              target='_blank'
+              rel='noreferrer noopener'
             >
               <GithubIcon />
             </a>