refactor: playground housekeeping (#719)

* refactor: playground housekeeping

* move single-use components into folders with their parent components
* add "Issues" category

* chore: run linter

---------

Co-authored-by: Alvaro Saburido <[email protected]>

playground/components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     LocalOrbitControls: typeof import('./src/components/LocalOrbitControls.vue')['default']
     Overlay: typeof import('./src/components/Overlay.vue')['default']
     OverlayInfo: typeof import('./src/components/OverlayInfo.vue')['default']
+    PbrSphere: typeof import('./src/components/PbrSphere.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TakeOverLoopExperience: typeof import('./src/components/TakeOverLoopExperience.vue')['default']

playground/src/components/AnimatedObjectUseUpdate.vue

@@ -53,33 +53,6 @@ watchEffect(() => {
     off()
   }
 })
-/* const anotherLog = useThrottleFn(() => console.log('after render'), 3000)
- */
-/* useUpdate(() => {
-  anotherLog()
-}, 1) */
-
-/* useUpdate(() => {
-  console.count('update loop 1')
-})
-
-useUpdate(() => {
-  console.count('update loop 2')
-}) */
-
-/* useUpdate(() => {
-  console.count('before renderer')
-}, -1)
-
-useUpdate(() => {
-  console.log('this should be just before render')
-})
-
-useUpdate((state) => {
-  if (!sphereRef.value) { return }
-  console.count('after renderer')
-  sphereRef.value.position.y += Math.sin(state.elapsed) * 0.01
-}, 2) */
 </script>
 
 <template>

playground/src/components/FBOCube.vue → playground/src/pages/advanced/fbo/FBOCube.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable no-console -->
 <script setup lang="ts">
-import { useFBO } from '../composables/useFBO'
+import { useFBO } from './useFBO'
 
 const fboTarget = useFBO({
   depth: true,

playground/src/pages/advanced/FBO.vue → playground/src/pages/advanced/fbo/index.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
-
 import { OrbitControls } from '@tresjs/cientos'
+import FBOCube from './FBOCube.vue'
 import '@tresjs/leches/styles'
 
 const gl = {