Skip to content

Commit 30daca9

Browse files
remo5000ning-y
remo5000
authored and
ning-y
committed
Add sound and runes support (#210)
* Add script to load all external libraries * Add runes externals * Add CanvasOutput class * use CanvasOutput class in REPL output * Update CanvasOutput documentation * Format files
1 parent ae26b0f commit 30daca9

File tree

5 files changed

+108
-5
lines changed

5 files changed

+108
-5
lines changed

‎public/externalLibs/index.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/**
2+
* Load a given external library, as a javascript file
3+
* to run in the global scope, by adding it to the DOM
4+
*/
5+
function dynamicallyLoadScript(url) {
6+
var script = document.createElement("script");
7+
script.src = url;
8+
/** Forces scripts to be loaded in order. */
9+
script.async = false
10+
script.defer = true
11+
document.head.appendChild(script);
12+
}
13+
14+
/**
15+
* Loads all the required libraries
16+
*/
17+
function loadLibs() {
18+
const files = [
19+
'/externalLibs/list.js',
20+
'/externalLibs/sound/sounds.js',
21+
'/externalLibs/sound/soundToneMatrix.js',
22+
'/externalLibs/sound/riffwave.js',
23+
'/externalLibs/graphics/gl-matrix.js',
24+
'/externalLibs/graphics/webGLcurve.js',
25+
'/externalLibs/graphics/webGLgraphics.js',
26+
'/externalLibs/graphics/webGLhi_graph.js',
27+
'/externalLibs/graphics/webGLinitCurve.js',
28+
'/externalLibs/graphics/webGLrune.js',
29+
'/externalLibs/graphics/webGLinit2D.js',
30+
'/externalLibs/graphics/webGLinit3D.js',
31+
'/externalLibs/visualizer/KineticJS.js',
32+
'/externalLibs/visualizer/visualizer.js',
33+
];
34+
35+
for (var i = 0; i < files.length; i++) {
36+
dynamicallyLoadScript(files[i]);
37+
}
38+
}
39+
40+
// loadLibs(dependencies);
41+
loadLibs();

‎public/index.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,7 @@
77
<meta name="theme-color" content="#000000">
88
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
99
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.0/TweenMax.min.js"></script>
10-
<script src="%PUBLIC_URL%/externalLibs/sound/sounds.js"></script>
11-
<script src="%PUBLIC_URL%/externalLibs/sound/riffwave.js"></script>
12-
<script src="%PUBLIC_URL%/externalLibs/sound/soundToneMatrix.js"></script>
10+
<script src="%PUBLIC_URL%/externalLibs/index.js"></script>
1311
<!--
1412
manifest.json provides metadata used when your web app is added to the
1513
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

‎src/components/workspace/CanvasOutput.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react'
2+
3+
/**
4+
* Takes the output of the rendered graphics (in a hidden canvas tag under <body>)
5+
* and makes it into a new <canvas> output for viewing.
6+
*/
7+
class CanvasOutput extends React.Component<{}, {}> {
8+
private $canvas: HTMLCanvasElement | null
9+
private $parent: HTMLElement | null
10+
11+
public componentDidMount() {
12+
const source = document.querySelector('.rune-canvas') as HTMLCanvasElement
13+
const context = (window as any).RUNE_CONTEXT || '2d'
14+
if (context === '2d') {
15+
const ctx = this.$canvas!.getContext(context)
16+
ctx!.drawImage(source, 0, 0)
17+
} else {
18+
this.$canvas!.hidden = true
19+
this.$parent!.appendChild(source)
20+
source.hidden = false
21+
}
22+
}
23+
24+
public render() {
25+
return (
26+
<div ref={r => (this.$parent = r)} className="canvas-container">
27+
<canvas width={512} height={512} ref={r => (this.$canvas = r)} />
28+
</div>
29+
)
30+
}
31+
}
32+
33+
export default CanvasOutput

‎src/components/workspace/Repl.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import * as React from 'react'
44
import { HotKeys } from 'react-hotkeys'
55

66
import { InterpreterOutput } from '../../reducers/states'
7+
import CanvasOutput from './CanvasOutput'
78
import ReplInput, { IReplInputProps } from './ReplInput'
89

910
export interface IReplProps {
@@ -54,14 +55,14 @@ export const Output: React.SFC<IOutputProps> = props => {
5455
if (props.output.consoleLogs.length === 0) {
5556
return (
5657
<Card>
57-
<pre className="resultOutput">{toString(props.output.value)}</pre>
58+
<pre className="resultOutput">{renderResult(props.output.value)}</pre>
5859
</Card>
5960
)
6061
} else {
6162
return (
6263
<Card>
6364
<pre className="logOutput">{props.output.consoleLogs.join('\n')}</pre>
64-
<pre className="resultOutput">{toString(props.output.value)}</pre>
65+
<pre className="resultOutput">{renderResult(props.output.value)}</pre>
6566
</Card>
6667
)
6768
}
@@ -86,6 +87,16 @@ export const Output: React.SFC<IOutputProps> = props => {
8687
}
8788
}
8889

90+
const renderResult = (value: any) => {
91+
/** A class which is the output of the show() function */
92+
const ShapeDrawn = (window as any).ShapeDrawn
93+
if (typeof ShapeDrawn !== 'undefined' && value instanceof ShapeDrawn) {
94+
return <CanvasOutput />
95+
} else {
96+
return toString(value)
97+
}
98+
}
99+
89100
/* Override handler, so does not trigger when focus is in editor */
90101
const handlers = {
91102
goGreen: () => {}

‎src/reducers/states.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,26 @@ const libEntries: Array<[string, string[]]> = [
169169
'consecutively',
170170
'simultaneously'
171171
]
172+
],
173+
[
174+
'runes',
175+
[
176+
'stack',
177+
'stack_frac',
178+
'quarter_turn_right • flip_horiz',
179+
'flip_vert',
180+
'turn_upside_down',
181+
'quarter_turn_left • beside',
182+
'make_cross',
183+
'repeat_pattern',
184+
'stackn',
185+
'heart_bb',
186+
'black_bb',
187+
'blank_bb',
188+
'circle_bb',
189+
'pentagram_bb',
190+
'show'
191+
]
172192
]
173193
]
174194
export const externalLibraries: Map<string, string[]> = new Map(libEntries)

0 commit comments

Comments
 (0)