Skip to content

Commit 9d75a8f

Browse files
tomhsiao1260PWhiddy
tomhsiao1260
authored and
PWhiddy
committed
using double quotes for string
1 parent 55a815d commit 9d75a8f

File tree

3 files changed

+70
-70
lines changed

3 files changed

+70
-70
lines changed

‎index.js

+20-20
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import { Scene, PerspectiveCamera, WebGLRenderer, Color, SphereGeometry, TorusKnotGeometry, TextBufferGeometry } from 'three';
2-
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
3-
import { createSculptureWithGeometry, sculptToThreeJSMaterial } from 'shader-park-core';
4-
import { spCode } from './src/spCode.js';
5-
import { initUIInteractions } from './src/ui.js';
6-
import { createEditor } from './src/editor.js';
7-
import { Pane } from 'tweakpane';
8-
9-
// import { font } from './src/helvetiker_regular1.typeface.json';
1+
import { Scene, PerspectiveCamera, WebGLRenderer, Color, SphereGeometry, TorusKnotGeometry, TextBufferGeometry } from "three";
2+
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
3+
import { createSculptureWithGeometry, sculptToThreeJSMaterial } from "shader-park-core";
4+
import { spCode } from "./src/spCode.js";
5+
import { initUIInteractions } from "./src/ui.js";
6+
import { createEditor } from "./src/editor.js";
7+
import { Pane } from "tweakpane";
8+
9+
// import { font } from "./src/helvetiker_regular1.typeface.json";
1010
// const fonts = JSON.parse(font);
1111

1212
// query parameters
1313
const urlSearchParams = new URLSearchParams(window.location.search);
1414
const qParams = Object.fromEntries(urlSearchParams.entries());
1515

1616
// starter code and its UI init
17-
const startCode = ('code' in qParams) ? decodeURI(qParams['code']) : spCode();
17+
const startCode = ("code" in qParams) ? decodeURI(qParams["code"]) : spCode();
1818
const state = { code: startCode };
1919
initUIInteractions(state);
2020

@@ -24,7 +24,7 @@ const sizes = {
2424
height: window.innerHeight
2525
}
2626

27-
window.addEventListener('resize', () =>
27+
window.addEventListener("resize", () =>
2828
{
2929
sizes.width = window.innerWidth;
3030
sizes.height = window.innerHeight;
@@ -64,14 +64,14 @@ const torusGeometry = new TorusKnotGeometry(2, .3, 100, 40);
6464
torusGeometry.computeBoundingSphere();
6565
torusGeometry.center();
6666

67-
const geometry = ('torus' in qParams) ? torusGeometry : sphereGeometry;
67+
const geometry = ("torus" in qParams) ? torusGeometry : sphereGeometry;
6868

6969
// Shader Park Setup
7070
const params = {};
7171

7272
params.time = 0;
73-
params.test = { 'x':.2, 'y': .4 };
74-
params.scale = ('scale' in qParams) ? qParams['scale'] : 1.0;
73+
params.test = { "x":.2, "y": .4 };
74+
params.scale = ("scale" in qParams) ? qParams["scale"] : 1.0;
7575

7676
const mesh = createSculptureWithGeometry(geometry, state.code, () => ( {
7777
time: params.time,
@@ -83,16 +83,16 @@ scene.add(mesh);
8383

8484
// const pane = new Pane();
8585
// pane.addInput(
86-
// params, 'test',
86+
// params, "test",
8787
// {min: 0, max: 2 }
8888
// );
8989

90-
if('text' in qParams) {
90+
if("text" in qParams) {
9191
const loader = new FontLoader();
9292
const mesh = state.mesh;
9393

94-
loader.load( './helvetiker_regular1.typeface.json', function ( font ) {
95-
mesh.geometry = new TextBufferGeometry( qParams['text'], {
94+
loader.load( "./helvetiker_regular1.typeface.json", function ( font ) {
95+
mesh.geometry = new TextBufferGeometry( qParams["text"], {
9696
font: font,
9797
size: 2,
9898
height: .1,
@@ -108,7 +108,7 @@ if('text' in qParams) {
108108
});
109109
}
110110

111-
const uniformsToExclude = { 'sculptureCenter': 0, 'msdf': 0, 'opacity': 0, 'time': 0, 'stepSize': 0, '_scale' : 1, 'resolution': 0};
111+
const uniformsToExclude = { "sculptureCenter": 0, "msdf": 0, "opacity": 0, "time": 0, "stepSize": 0, "_scale" : 1, "resolution": 0};
112112

113113
const onCodeChange = (code) => {
114114
state.code = code;
@@ -133,7 +133,7 @@ const onCodeChange = (code) => {
133133

134134
// Editor
135135
const editor = createEditor(state.code, onCodeChange);
136-
const codeContainer = document.querySelector('.code-container');
136+
const codeContainer = document.querySelector(".code-container");
137137
codeContainer.appendChild(editor.dom);
138138

139139
// Add parameters to window

‎src/editor.js

+26-26
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
1-
import { EditorState, basicSetup } from '@codemirror/basic-setup'
2-
import { EditorView, keymap } from '@codemirror/view'
3-
import { indentWithTab } from '@codemirror/commands'
4-
import { javascript } from '@codemirror/lang-javascript'
1+
import { EditorState, basicSetup } from "@codemirror/basic-setup";
2+
import { EditorView, keymap } from "@codemirror/view";
3+
import { indentWithTab } from "@codemirror/commands";
4+
import { javascript } from "@codemirror/lang-javascript";
55

66
export function createEditor(startCode, codeChangeCallback) {
77
let baseTheme = EditorView.theme({
8-
'&': {
9-
fontSize: '20pt',
10-
color: 'white',
11-
backgroundColor: 'transparent',
12-
height: '80vh',
8+
"&": {
9+
fontSize: "20pt",
10+
color: "white",
11+
backgroundColor: "transparent",
12+
height: "80vh",
1313
},
14-
'.cm-editor, .cm-editor:focused': {
15-
outline: '0 !important'
14+
".cm-editor, .cm-editor:focused": {
15+
outline: "0 !important"
1616
},
17-
'.cm-content ': {
18-
caretColor: '#0e9'
17+
".cm-content ": {
18+
caretColor: "#0e9"
1919
},
20-
'.cm-scroller': {
21-
overflow: 'scroll',
22-
border: 'none',
20+
".cm-scroller": {
21+
overflow: "scroll",
22+
border: "none",
2323
},
24-
'&.cm-focused ': {
24+
"&.cm-focused ": {
2525
outline: 0
2626
},
27-
'&.cm-focused .cm-cursor': {
28-
borderLeftColor: '#0e9'
27+
"&.cm-focused .cm-cursor": {
28+
borderLeftColor: "#0e9"
2929
},
30-
'&.cm-focused .cm-selectionBackground, ::selection': {
31-
backgroundColor: '#074',
30+
"&.cm-focused .cm-selectionBackground, ::selection": {
31+
backgroundColor: "#074",
3232
},
33-
'.cm-gutters': {
34-
backgroundColor: 'transparent',
35-
color: '#ddd',
36-
border: 'none',
37-
outline: 'none'
33+
".cm-gutters": {
34+
backgroundColor: "transparent",
35+
color: "#ddd",
36+
border: "none",
37+
outline: "none"
3838
}
3939
}, {dark: true});
4040

‎src/ui.js

+24-24
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,52 @@
11
const toggleButton = (className, callback) => {
22
let button = document.querySelector(className);
3-
button.addEventListener('click', (el) => {
4-
if(button.classList.contains('active')) {
5-
button.classList.remove('active');
3+
button.addEventListener("click", (el) => {
4+
if(button.classList.contains("active")) {
5+
button.classList.remove("active");
66
callback(true);
77
} else {
8-
button.classList.add('active');
8+
button.classList.add("active");
99
callback(false);
1010
}
1111
}, false);
1212
}
1313

1414
const createPermaLink = (state) => {
15-
let button = document.querySelector('.permalink');
15+
let button = document.querySelector(".permalink");
1616

1717

18-
button.addEventListener('click', () => {
18+
button.addEventListener("click", () => {
1919
let urlSearchParams = new URLSearchParams(window.location.search);
20-
urlSearchParams.set('code', encodeURI(state.code));
20+
urlSearchParams.set("code", encodeURI(state.code));
2121
window.location.search = urlSearchParams.toString();
2222
}, false);
2323
}
2424

2525
const showHideButtonInteraction = () => {
26-
let codeContainer = document.querySelector('.code-container');
27-
let logo = document.querySelector('.logo');
28-
let permalink = document.querySelector('.permalink');
26+
let codeContainer = document.querySelector(".code-container");
27+
let logo = document.querySelector(".logo");
28+
let permalink = document.querySelector(".permalink");
2929
let elements = [codeContainer, logo];
3030

31-
let showHideButton = document.querySelector('.show-hide-editor');
32-
toggleButton('.show-hide-editor', (active) => {
31+
let showHideButton = document.querySelector(".show-hide-editor");
32+
toggleButton(".show-hide-editor", (active) => {
3333
if(active) {
34-
showHideButton.innerHTML= 'Hide Code';
35-
elements.forEach(el => el.style.display = 'block');
34+
showHideButton.innerHTML= "Hide Code";
35+
elements.forEach(el => el.style.display = "block");
3636
} else {
37-
showHideButton.innerHTML= 'Show Code';
38-
elements.forEach(el => el.style.display = 'none');
37+
showHideButton.innerHTML= "Show Code";
38+
elements.forEach(el => el.style.display = "none");
3939
}
4040
});
41-
// showHideButton.addEventListener('click', (el) => {
42-
// if(showHideButton.classList.contains('show')) {
43-
// showHideButton.classList.remove('show');
44-
// showHideButton.innerHTML= '>';
45-
// codeContainer.style.display = 'block';
41+
// showHideButton.addEventListener("click", (el) => {
42+
// if(showHideButton.classList.contains("show")) {
43+
// showHideButton.classList.remove("show");
44+
// showHideButton.innerHTML= ">";
45+
// codeContainer.style.display = "block";
4646
// } else {
47-
// showHideButton.classList.add('show')
48-
// showHideButton.innerHTML= '^';
49-
// codeContainer.style.display = 'none';
47+
// showHideButton.classList.add("show")
48+
// showHideButton.innerHTML= "^";
49+
// codeContainer.style.display = "none";
5050
// }
5151
// }, false);
5252
}

0 commit comments

Comments
 (0)