glen/archematics
1
0
Fork 0
Code Issues 17 Pull Requests Packages Projects 1 Releases 2 Wiki Activity

feat: Allow civet code to modify DOM (#4)

Browse Source 
This commit uses the jQuery package for DOM manipulation. So far, it
  performs just a toy modification, on a page modified to include the
  object javascript. For this purpose the build script was modified
  to place object files in `public/js`. Adds a script to build and
  serve the resulting code.

  Resolves #2.

Reviewed-on: #4
Co-authored-by: Glen Whitney <glen@studioinfinity.org>
Co-committed-by: Glen Whitney <glen@studioinfinity.org>
This commit is contained in:
Glen Whitney 2023-08-29 01:29:08 +00:00 committed by Glen Whitney
parent 16f38e769e
commit 10146073c8
6 changed files with 164 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,5 +1,5 @@
# Object files
obj
public/js
# Editor backups
*~

6
package.json5
View File

@ -4,10 +4,10 @@
description: 'Uncovering lost digital mathematical treasures',
scripts: {
test: 'echo "Error: no test specified" && exit 1',
build: 'civet --js -c src/*.civet -o obj/.js',
start: 'node obj',
build: 'civet --js -c src/*.civet -o public/js/.js',
start: 'node public/js',
go: 'pnpm --sequential "/build|start/"',
serve: 'http-server',
serve: 'pnpm build && http-server',
},
packageManager: 'pnpm',
keywords: [

13
public/index.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Archematics demo</title>
</head>
<body>
<ul>
<li> <a href="inscribed-equilateral.html">Before</a> </li>
<li> <a href="inscribed-modified.html">After</a> </li>
</ul>
</body>
</html>

129
public/inscribed-modified.html Normal file
View File

@ -0,0 +1,129 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>An equilateral triangle inscribed in a rectangle</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<script src="js/adapptlet.js" type="module"></script>
</head>
<body>
<h1>An equilateral triangle inscribed in a rectangle</h1>
<table class="centered">
<tr><td align="center">
<applet code="Geometry" archive="Geometry.zip" width="410" height="370">
<param name="background" value="ffffff">
<param name="title" value="An equilateral triangle inscribed in a rectangle">
<!-- the moving mechanism -->
<param name="e[1]" value="O;point;fixed;290,320;0;0;0;0">
<param name="e[2]" value="U1;point;fixed;510,320;0;0;0;0">
<param name="e[3]" value="V1;point;perpendicular;O,U1;0;0;0;0">
<param name="e[4]" value="U;point;angleDivider;U1,O,V1,3;0;0;0;0">
<param name="e[5]" value="V;point;angleDivider;V1,O,U1,3;0;0;0;0">
<param name="e[6]" value="circ1;circle;radius;O,U;0;0;0;0">
<param name="e[7]" value="li1;line;parallel;U,O,U1;0;0;0;0">
<param name="e[8]" value="li2;line;parallel;V,O,V1;0;0;0;0">
<param name="e[9]" value="W;point;intersection;li1,li2;0;0;0;0">
<param name="e[10]" value="VW;line;connect;V,W;0;0;lightGray">
<param name="e[11]" value="@;point;lineSegmentSlider;V,W,0,220;red;red">
<param name="e[12]" value="li3;line;parallel;@,O,U1;0;0;0;0">
<param name="e[13]" value="li4;line;chord;circ1,li3;0;0;0;0">
<param name="e[14]" value="X1;point;first;li4;0;0;0;0">
<!-- the triangle -->
<param name="e[15]" value="A;point;fixed;50,320">
<param name="e[16]" value="V2;point;perpendicular;A,U1;0;0;0;0">
<param name="e[17]" value="li5;line;parallel;A,O,X1;0;0;0;0">
<param name="e[18]" value="X2;point;last;li5;0;0;0;0">
<param name="e[19]" value="X;point;extend;A,X2,A,X2;0;0;0;0">
<param name="e[20]" value="tri1;polygon;equilateralTriangle;X,A;0;0;0;0">
<param name="e[21]" value="Y;point;vertex;tri1,3;0;0;0;0">
<param name="e[22]" value="B;point;midpoint;X,Y">
<param name="e[23]" value="ABC;polygon;equilateralTriangle;A,B">
<param name="e[24]" value="C;point;vertex;ABC,3">
<!-- the rectangle -->
<param name="e[25]" value="D;point;foot;B,A,U1">
<param name="e[26]" value="F;point;foot;C,A,V2">
<param name="e[27]" value="FE;line;parallel;F,A,D;0;0;0;0">
<param name="e[28]" value="E;point;last;FE">
<param name="e[29]" value="rect;polygon;quadrilateral;A,D,E,F;0;0;black;0">
<param name="e[30]" value="ADB;polygon;triangle;A,D,B;0;0;0;pink">
<param name="e[31]" value="ACF;polygon;triangle;A,C,F;0;0;0;pink">
<param name="e[32]" value="BCE;polygon;triangle;B,C,E;0;0;0;cyan">
</applet>
</td></tr>
<tr><td>
<b>
Slide the &ldquo;@&rdquo; up and down to change the geometry.<br>
Press &ldquo;r&rdquo; to reset the diagram to its initial state.<br>
Proposition: The blue area equals the sum of the two pink areas.
</b>
</td></tr></table>
<h2>Problem statement</h2>
<p>
The diagram above shows an equilateral triangle inscribed in a rectangle
in such a way that the two have a vertex in common. This subdivides the
rectangle into four disjoint triangles.
The original equilateral triangle is shown in white
in the diagram; the other three are shown in color.
<p>
<b>Proposition</b>
<em>
The area of the blue triangle equals the sum
of the areas of the two pink triangles.
</em>
<p>
The trigonometric proof is quite straightforward. I don't
know of a classical proof <i>a la</i> <span class="name">Euclid</span>.
(Well, actually I haven't tried much.)
If you can think of a neat non-trigonometric proof, let me know. I will
put it here with due credit.
<p>
This problem appeared as a conjecture
<a href="http://mathforum.org/kb/thread.jspa?forumID=129&amp;messageID=1083967">in an article</a>
in the <code>geometry.puzzles</code> newsgroup on March 15, 1997.
<p>
<b>Note added January 8, 2017:</b>
Here is a
<a href="inscribed-equilateral-solution.html">clever solution</a>
that <b>Peter Renz</b> sent me a in December 2016. Thanks, Peter!
<hr width="60%">
<p>
<em>This applet was created by
<a href="http://userpages.umbc.edu/~rostamia">Rouben Rostamian</a>
using
<a href="http://aleph0.clarku.edu/~djoyce/home.html">David Joyce</a>'s
<a href="http://aleph0.clarkU.edu/~djoyce/java/Geometry/Geometry.html">Geometry
Applet</a>
on July 2, 2010.
</em>
<p>
<table width="100%">
<tr>
<td valign="top">Go to <a href="index.html">Geometry Problems and Puzzles</a></td>
<td align="right" style="width:200px;">
<a href="http://validator.w3.org/check?uri=referer">
<img src="/~rostamia/images/valid-html401.png" class="noborder" width="88" height="31" alt="Valid HTML"></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img src="/~rostamia/images/valid-css.png" class="noborder" width="88" height="31" alt="Valid CSS"></a>
</td></tr>
</table>
</body>
</html>

2
src/adapptlet.civet Normal file
View File

@ -0,0 +1,2 @@
import https://code.jquery.com/jquery-3.7.1.slim.js
$('body').append '<div id="helloDiv">Hello World</div>'

16
tsconfig.json Normal file
View File

@ -0,0 +1,16 @@
{
"compilerOptions": {
"strict": true,
"lib": ["esnext"],
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"esModuleInterop": true
},
"ts-node": {
"transpileOnly": true,
"compilerOptions": {
"module": "esnext"
}
}
}
}