From 10146073c8a1da2d4ec2abf568feffba81a86f32 Mon Sep 17 00:00:00 2001 From: Glen Whitney Date: Tue, 29 Aug 2023 01:29:08 +0000 Subject: [PATCH] feat: Allow civet code to modify DOM (#4) 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: https://code.studioinfinity.org/glen/archematics/pulls/4 Co-authored-by: Glen Whitney Co-committed-by: Glen Whitney --- .gitignore | 2 +- package.json5 | 6 +- public/index.html | 13 ++++ public/inscribed-modified.html | 129 +++++++++++++++++++++++++++++++++ src/adapptlet.civet | 2 + tsconfig.json | 16 ++++ 6 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 public/index.html create mode 100644 public/inscribed-modified.html create mode 100644 src/adapptlet.civet create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore index 13bde94..a7f1abe 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ # Object files -obj +public/js # Editor backups *~ diff --git a/package.json5 b/package.json5 index 510722a..312dcd9 100644 --- a/package.json5 +++ b/package.json5 @@ -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: [ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..b8332ea --- /dev/null +++ b/public/index.html @@ -0,0 +1,13 @@ + + + + + Archematics demo + + + + + diff --git a/public/inscribed-modified.html b/public/inscribed-modified.html new file mode 100644 index 0000000..c52e186 --- /dev/null +++ b/public/inscribed-modified.html @@ -0,0 +1,129 @@ + + + + + +An equilateral triangle inscribed in a rectangle + + + + + + +

An equilateral triangle inscribed in a rectangle

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +Slide the “@” up and down to change the geometry.
+Press “r” to reset the diagram to its initial state.
+Proposition: The blue area equals the sum of the two pink areas. + +
+ +

Problem statement

+ +

+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. + +

+Proposition + +The area of the blue triangle equals the sum +of the areas of the two pink triangles. + + +

+The trigonometric proof is quite straightforward. I don't +know of a classical proof a la Euclid. +(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. + +

+This problem appeared as a conjecture +in an article +in the geometry.puzzles newsgroup on March 15, 1997. + +

+Note added January 8, 2017: +Here is a +clever solution +that Peter Renz sent me a in December 2016. Thanks, Peter! + +

+

+This applet was created by +Rouben Rostamian +using +David Joyce's +Geometry +Applet +on July 2, 2010. + +

+ + + + + +
Go to Geometry Problems and Puzzles + +Valid HTML + +Valid CSS +
+ + + + diff --git a/src/adapptlet.civet b/src/adapptlet.civet new file mode 100644 index 0000000..a1f3082 --- /dev/null +++ b/src/adapptlet.civet @@ -0,0 +1,2 @@ +import https://code.jquery.com/jquery-3.7.1.slim.js +$('body').append '

Hello World
' diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..f5e6879 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "strict": true, + "lib": ["esnext"], + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "esModuleInterop": true + }, + "ts-node": { + "transpileOnly": true, + "compilerOptions": { + "module": "esnext" + } + } +} +}