Merge pull request #42 from itsdouges/add-triplex-config

Set up Triplex, the visual IDE for React Three Fiber

.triplex/config.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://triplex.dev/config.schema.json",
+  "components": ["../src/components/**/*.(j|t)sx"],
+  "files": ["../src/components/**/*.(j|t)sx"],
+  "provider": "./provider.tsx",
+  "assetsDir": "models"
+}

.triplex/provider.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Physics } from "@react-three/rapier";
+
+export default function Provider({
+  children,
+  physicsDisabled = true,
+}: {
+  children: React.ReactNode;
+  physicsDisabled?: boolean;
+}) {
+  return (
+    <Physics gravity={[0, -90, 0]} timeStep="vary" paused={physicsDisabled}>
+      {children}
+    </Physics>
+  );
+}

README.md

@@ -1,4 +1,5 @@
 # Mario Kart 3.js - JavaScript/WebGL Mario Kart
+
 [Link](https://mario-kart-3-js.vercel.app/)
 
 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/Lunakepio/Mario-Kart-3.js)
@@ -43,6 +44,16 @@ Start the dev server
 
 - Feel free to bring your ideas to the project even if you can't code them.
 
+## How to use (Editor)
+
+- [Download Triplex](https://triplex.dev/download)
+
+- Open this project in Triplex from the projects root directory
+
+- Iterate on individual components, set props, have some fun
+
+- [Learn more about Triplex](https://triplex.dev/docs/get-started/user-interface)
+
 ## TO - DO
 
 - [ ] Design Landing page
@@ -53,7 +64,7 @@ Start the dev server
 
 - [ ] Add curve/length modifiers to drift particles 3/4
 
-- [ ] Add Skid marks 
+- [ ] Add Skid marks
 
 - [x] Add smokes
 

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "incremental": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "lib": ["dom", "dom.iterable", "es2022"],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "types": ["@react-three/fiber"]
+  },
+  "exclude": ["node_modules"],
+  "include": ["."]
+}