Add colorful traingle example

gnuion · May 21, 2024 · 007254b · 007254b
1 parent c176afc
commit 007254b
Show file tree

Hide file tree

Showing 2 changed files with 160 additions and 58 deletions.
diff --git a/components/CodeMirror.vue b/components/CodeMirror.vue
@@ -1,28 +1,47 @@
 <template>
-  <div class="w-full gap-4 [&>*]:bg-orange bg-green flex ">
-    <div class="w-full h-[20rem] " ref="jsEditorContainer">
-      <span>JS</span>
+  <div class="gap-4 flex flex-col px-4 text-white">
+    <div class="w-full gap-4 flex">
+      <div v-for="editor, oKey in payload" ref="refs" :key="oKey"
+        :class="`${activeTab == oKey ? 'w-2/3  shrink-0' : 'w-1/3'} flex-auto overflow-hidden`" @click="activeTab = oKey">
+        <p class="my-3 uppercase">{{ oKey }}</p>
+      </div>
     </div>
-    <div class="w-full" ref="xmlEditorContainer">
-      <span>xml</span>
-    </div>
-    <div class="" ref="cssEditorContainer">
-      <span>css</span>
-    </div>
-  </div>
-  <!-- <div v-html="srcDoc"></div> -->
-  <div class="">
-    <iframe ref="iframe" class="h-full w-full" sandbox="allow-scripts" frameBorder="0" />
+    <iframe ref="iframe" sandbox="allow-scripts" frameBorder="0" class="h-[50vh] bg-white flex-grow" />
   </div>
 </template>
 
-<style scoped>
-.cm-editor {
-  height: h-full;
+<style>
+::-webkit-scrollbar {
+  width: 3px;
+  height: 3px;
+}
+
+::-webkit-scrollbar-track {
+  background: #575757;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
 }
+
+/* ::-webkit-scrollbar-thumb:hover {
+  background: #555;
+} */
 </style>
 
 <script lang="ts" setup>
+import { basicSetup } from 'codemirror';
+import { EditorView, keymap } from '@codemirror/view';
+import { indentWithTab } from '@codemirror/commands';
+import { javascript } from '@codemirror/lang-javascript'
+import { xml } from '@codemirror/lang-xml'
+import { css } from '@codemirror/lang-css'
+import { oneDark } from '@codemirror/theme-one-dark'
+
+const debounceUpdateIframe = useDebounce(() => {
+  iframe.value!.srcdoc = generateHTML(payload)
+}, 1000)
+
 function generateHTML(
   payload: Record<string, any>,
 ) {
@@ -38,35 +57,111 @@ function generateHTML(
         </body>
     </html`
 }
-
-const debounceUpdateIframe = useDebounce(() => {
-  iframe.value!.srcdoc = generateHTML(payload)
-}, 1000)
-
-const iframe = ref<HTMLIFrameElement>()
+const activeTab = ref('javascript');
+const refs = ref<Array<HTMLDivElement>>([]);
+const iframe = ref<HTMLIFrameElement>();
 const payload = reactive({
-  html: "<p>Hello</p>\n<p>World</p>",
-  css: "p {\ncolor: red\n}",
-  javascript: "document.querySelectorAll('p')[1].style.color='green'",
+  javascript: `
+const canvas = document.getElementById("canvas");
+const fragmentShaderText = document.getElementById('fragment').innerText;
+const vertexShaderText = document.getElementById('vertex').innerText;
+document.body.style.backgroundColor="black";
+document.body.style.color="white";
+canvas.style.backgroundColor="green";
+const gl = canvas.getContext("webgl")
+if (!gl) {
+  alert("WebGL not supported")
+}
+const canvasDim = [300, 300]
+canvas.width = canvasDim[0];
+canvas.height = canvasDim[1];
+gl.viewport(0,0, canvasDim[0], canvasDim[1]);
+gl.clearColor(0.8,0.8,0.8, 1.0);
+gl.clear(gl.COLOR_BUFFER_BIT);
+const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+gl.shaderSource(vertexShader, vertexShaderText);
+gl.shaderSource(fragmentShader, fragmentShaderText);
+gl.compileShader(vertexShader);
+if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+  console.log('Error compiling vertexShader', gl.getShaderInfoLog(vertexShader));
+}
+gl.compileShader(fragmentShader);
+if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+  console.log('Error compiling fragmentShader', gl.getShaderInfoLog(fragmentShader));
+}
+const program = gl.createProgram();
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+gl.linkProgram(program);
+if (!gl.getProgramParameter(program,gl.LINK_STATUS)) {
+  console.log("Error linking program", gl.getProgramInfoLog(program));
+}
+gl.validateProgram(program); 
+if (!gl.getProgramParameter(program,gl.VALIDATE_STATUS)) {
+  console.log("Error linking validating program", gl.getProgramInfoLog(program));
+}
+const triangleVertices = [
+  0.0, 0.5, 1.0, 0.0, 0.0,
+  -0.5, -0.5, 0.0, 1.0, 0.0,
+  0.5, -0.5, 0.0, 0.0, 1.0
+]
+
+const triangleVertexBufferObject = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
+const positionAttribLocation = gl.getAttribLocation(program, 'vertPosition');
+const colorAttribLocation = gl.getAttribLocation(program, 'vertColor');
+gl.vertexAttribPointer(
+  positionAttribLocation,
+  2,
+  gl.FLOAT,
+  gl.FALSE,
+  5 * Float32Array.BYTES_PER_ELEMENT,
+  0
+)
+gl.vertexAttribPointer(
+  colorAttribLocation,
+  3,
+  gl.FLOAT,
+  gl.FALSE,
+  5 * Float32Array.BYTES_PER_ELEMENT,
+  2 * Float32Array.BYTES_PER_ELEMENT, 
+)
+gl.enableVertexAttribArray(positionAttribLocation);
+gl.enableVertexAttribArray(colorAttribLocation);
+gl.useProgram(program);
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+`,
+  html: `
+<canvas id="canvas" width=300 height=300></canvas>
+<script id="vertex" type="notjs">
+precision mediump float;
+attribute vec2 vertPosition;
+attribute vec3 vertColor;
+varying vec3 fragColor;
+void main() {
+  fragColor = vertColor;
+  gl_Position = vec4(vertPosition, 0.0, 1.0);
+}
+</\script>
+<script id="fragment" type="notjs">
+precision mediump float;
+varying vec3 fragColor;
+void main() {
+  gl_FragColor = vec4(fragColor, 1.0);
+}
+</\script>
+`,
+  css: "",
 })
 
-const jsEditorContainer = ref<HTMLDivElement | null>(null)
-const cssEditorContainer = ref<HTMLDivElement | null>(null)
-const xmlEditorContainer = ref<HTMLDivElement | null>(null)
 
+onMounted(() => {
+  if (refs.value.length == 0 || !iframe.value) return;
 
-const content = ref('let a = 0;\n#hello world')
-import { basicSetup } from 'codemirror';
-import { EditorView, keymap } from '@codemirror/view';
-import { indentWithTab } from '@codemirror/commands';
-import { javascript } from '@codemirror/lang-javascript'
-import { xml } from '@codemirror/lang-xml'
-import { css } from '@codemirror/lang-css'
-import { oneDark } from '@codemirror/theme-one-dark'
 
-onMounted(() => {
-  if (!(jsEditorContainer.value && cssEditorContainer.value && xmlEditorContainer.value)) return;
-  iframe.value!.srcdoc = generateHTML(payload)
+  iframe.value.srcdoc = generateHTML(payload)
   const jsEditor = new EditorView({
     doc: payload.javascript,
     extensions: [
@@ -77,8 +172,13 @@ onMounted(() => {
       EditorView.updateListener.of((newState) => {
         payload.javascript = newState.state.doc.toString()
       }),
+      EditorView.theme({
+        '&': { height: '300px' },
+        '.cm-scroller::-webkit-scrollbar-thumb': { background: 'yellow' },
+        '.cm-scroller': { overflow: 'auto' },
+      })
     ],
-    parent: jsEditorContainer.value,
+    parent: refs.value[0],
   })
   const xmlEditor = new EditorView({
     doc: payload.html,
@@ -89,9 +189,15 @@ onMounted(() => {
       xml(),
       EditorView.updateListener.of((newState) => {
         payload.html = newState.state.doc.toString()
+      }),
+      EditorView.theme({
+        '&': { height: '300px' },
+        '.cm-scroller::-webkit-scrollbar-thumb': { background: 'red' },
+        '.cm-scroller': { overflow: 'auto' },
+
       })
     ],
-    parent: xmlEditorContainer.value,
+    parent: refs.value[1],
   })
   const cssEditor = new EditorView({
     doc: payload.css,
@@ -102,9 +208,15 @@ onMounted(() => {
       css(),
       EditorView.updateListener.of((newState) => {
         payload.css = newState.state.doc.toString()
+      }),
+      EditorView.theme({
+        '&': { height: '300px' },
+        '.cm-scroller::-webkit-scrollbar-thumb': { background: 'cyan' },
+        '.cm-scroller': { overflow: 'auto' },
+        // '::-webkit-scrollbar': {}
       })
     ],
-    parent: cssEditorContainer.value,
+    parent: refs.value[2],
   })
 
   watch(payload, () => {

diff --git a/layouts/vuenus.vue b/layouts/vuenus.vue
@@ -1,18 +1,8 @@
 <template>
-  <div class="min-h-[100vh] flex flex-col  bg-black">
-    <Header />
-    <main class="text-lg text-white w-full grow-1 max-w-6xl px-6 pt-20 mx-auto font-mono">
-      <slot />
-    </main>
-    <Footer />
-  </div>
+  <Header />
+  <main class="pt-14 pb-20 bg-black">
+    <slot />
+  </main>
+  <Footer />
 </template>
-<style lang="css">
-main a {
-  --at-apply: underline decoration-dotted text-inherit underline-offset-6;
-
-  &[disabled] {
-    --at-apply: text-gray-7;
-  }
-}
-</style>
+<style lang="css"></style>