anuraghazra · mreinstein · Feb 10, 2024 · Feb 10, 2024
diff --git a/dist/verly.bundle.js b/dist/verly.bundle.js
diff --git a/dist/verly.bundle.js.map b/dist/verly.bundle.js.map
diff --git a/docs/styles/iframe.css b/docs/styles/iframe.css
@@ -0,0 +1,13 @@
+.bd__button {
+  padding: 10px 0;
+  text-align: right;
+}
+.bd__button > a{
+  font-weight: 100;
+  text-decoration: none;
+  color: #BDC3CB;
+  font-family: sans-serif;
+}
+.bd__button > a:hover {
+  color: #798897;
+}
diff --git a/docs/styles/reset.css b/docs/styles/reset.css
@@ -0,0 +1,44 @@
+/* reset css */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/examples/accessibility/index.html b/examples/accessibility/index.html
@@ -36,7 +36,7 @@
 
   <body>
     <canvas id="c"></canvas>
-    <script src="../../dist/verly.bundle.js"></script>
+    <script type="module" src="../../src/app.js"></script>
 
     <script>
       window.onload = function () {

diff --git a/examples/behavior.html b/examples/behavior.html
@@ -26,7 +26,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  <script src="../dist/verly.bundle.js"></script>
+  <script type="module" src="../src/app.js"></script>
   <script>
 
     window.onload = function () {

diff --git a/examples/behavior2.html b/examples/behavior2.html
@@ -25,7 +25,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  <script src="../dist/verly.bundle.js"></script>
+  <script type="module" src="../src/app.js"></script>
 
   <script>
     window.onload = function () {

diff --git a/examples/dynamicCustomMesh.html b/examples/dynamicCustomMesh.html
@@ -26,7 +26,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  <script src="../dist/verly.bundle.js"></script>
+  <script type="module" src="../src/app.js"></script>
 
   <script>
 

diff --git a/examples/fluidGyroscope.html b/examples/fluidGyroscope.html
@@ -26,7 +26,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  <script src="../dist/verly.bundle.js"></script>
+  <script type="module" src="../src/app.js"></script>
   <script>
 
     window.onload = function () {

diff --git a/examples/joinEntities.html b/examples/joinEntities.html
@@ -26,7 +26,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  <script src="../dist/verly.bundle.js"></script>
+  <script type="module" src="../src/app.js"></script>
   <script>
 
     window.onload = function () {

diff --git a/examples/ragdoll.html b/examples/ragdoll.html
@@ -26,7 +26,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  <script src="../dist/verly.bundle.js"></script>
+  <script type="module" src="../src/app.js"></script>
 
   <script>
 

diff --git a/examples/rotatingEntity.html b/examples/rotatingEntity.html
@@ -27,9 +27,9 @@
 
   <canvas id="c"></canvas>
 
-  <script src="../dist/verly.bundle.js"></script>
-  <script src="../src/Objects.js"></script>
-  <script>
+  <script type="module" src="../src/app.js"></script>
+  <script type="module">
+    import { Box } from "../src/Objects.js"
 
     window.onload = function () {
       let canvas = document.getElementById('c');
@@ -45,7 +45,7 @@
       b1.setGravity(new Vector())
       verly.addEntity(b1);
 
-      for (p of b1.points) {
+      for (const p of b1.points) {
         let absSize = new Vector(b1.width / 2, b1.height / 2);
         let boxcenter = new Vector(b1.x - absSize.x, b1.y - absSize.y);
         let rot = radians(25);
@@ -57,7 +57,7 @@
       b2.setGravity(new Vector())
       verly.addEntity(b2);
 
-      for (p of b2.points) {
+      for (const p of b2.points) {
         let absSize = new Vector(b2.width / 2, b2.height / 2);
         let boxcenter = new Vector(b2.x - absSize.x, b2.y - absSize.y);
         let rot = radians(-25);

diff --git a/examples/shadedCloth.html b/examples/shadedCloth.html
@@ -27,7 +27,7 @@
 
   <canvas id="c"></canvas>
 
-  <script src="../dist/verly.bundle.js"></script>
+  <script type="module" src="../src/app.js"></script>
 
   <script>
 

diff --git a/examples/ship/Ship.js b/examples/ship/Ship.js
@@ -82,3 +82,6 @@ class Ship extends Point {
     this.heading += this.rotation;
   };
 }
+
+export default Ship
+
diff --git a/examples/ship/index.html b/examples/ship/index.html
@@ -54,6 +54,8 @@
     gtag('js', new Date());
     gtag('config', 'UA-119972196-1');
   </script>
+
+  <script type="module" src="../../src/app.js"></script>
 </head>
 
 <body>
@@ -75,10 +77,8 @@
     <span>hit Q to disconnect</span>
   </div>
 
-  <script src="../../dist/verly.bundle.js"></script>
   <script src="../typography/Text.js"></script>
-  <script src="./Ship.js"></script>
-  <script src="./index.js"></script>
+  <script type="module" src="./index.js"></script>
 </body>
 
 </html>
diff --git a/examples/ship/index.js b/examples/ship/index.js
@@ -1,3 +1,5 @@
+import Ship from './Ship.js'
+
 
 window.onload = function () {
   let canvas = document.getElementById('c');

diff --git a/examples/text/index.html b/examples/text/index.html
@@ -36,7 +36,7 @@
     <canvas id="c"></canvas>
   </div>
 
-  <script src="../../dist/verly.bundle.js"></script>
+  <script type="module" src="../../src/app.js"></script>
   <script src="./index.js"></script>
 </body>
 

diff --git a/examples/typography/Text.js b/examples/typography/Text.js
@@ -1,3 +1,4 @@
+
 class Text {
   constructor(alphabets, x, y, fontsize, verlyInstance) {
     this.alphabets = alphabets.toUpperCase().split('');
@@ -39,4 +40,7 @@ class Text {
 
     return this; // return for chaining
   }
-}
+}
+
+
+export default Text;
diff --git a/examples/typography/index.html b/examples/typography/index.html
@@ -24,15 +24,68 @@
       /* outline: 1px solid black; */
     }
   </style>
+
+  <script type="module" src="../../src/app.js"></script>
 </head>
 
 <body>
 
   <canvas id="c"></canvas>
 
-  <script src="../../dist/verly.bundle.js"></script>
-  <script src="./Text.js"></script>
-  <script src="./index.js"></script>
+<script type="module">
+import Text from '/examples/typography/Text.js';
+
+
+/**
+ * Verlet Typography
+ * @author <hazru.anurag@gmail.com>
+ */
+
+window.onload = function () {
+  let canvas = document.getElementById('c');
+  let ctx = canvas.getContext('2d');
+  let width = clamp(window.innerWidth, 1200, Infinity);
+  let height = window.innerHeight;
+  canvas.width = width;
+  canvas.height = height;
+  let verly = new Verly(50, canvas, ctx);
+
+  // URL = undefined;
+
+  let urlText = 'HAPPY';
+  let urlText2 = 'HOLI';
+  // check support
+  if ('URL' in window && URL !== undefined) {
+    let url = new URL(window.location.href);
+    let query_string = url.search;
+    let search_params = new URLSearchParams(query_string);
+    urlText = search_params.get('text') || 'HAPPY';
+    urlText2 = search_params.get('text2') || 'HOLI';
+  }
+
+  let word = new Text(urlText, 50, 100, 25, verly);
+  let word2 = new Text(urlText2, 700, 100, 25, verly);
+
+  // let A = new TypoGraphy(offsetX, center, 20, 'A');
+
+  verly.addEntity(word.entity);
+  verly.addEntity(word2.entity);
+
+  function animate() {
+    ctx.clearRect(0, 0, width, height);
+
+    verly.update();
+    verly.render();
+    verly.interact();
+    // word.entity.renderPointsIndex()
+    // verly.renderPointIndex();
+    // word.entity.renderPointIndex();
+
+    requestAnimationFrame(animate);
+  }
+  animate();
+}
+  </script>
 </body>
 
 </html>
diff --git a/examples/typography/index.js b/examples/typography/index.js
diff --git a/experiments/additional_features/angleContraints.html b/experiments/additional_features/angleContraints.html
@@ -28,7 +28,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  <script src="../../dist/verly.bundle.js"></script>
+  <script type="module" src="../../src/app.js"></script>
 
 
   <script>

diff --git a/experiments/additional_features/pointAndStickSetters.html b/experiments/additional_features/pointAndStickSetters.html
@@ -28,7 +28,7 @@
 <body>
 
   <canvas id="c"></canvas>
-  <script src="../../dist/verly.bundle.js"></script>
+  <script type="module" src="../../src/app.js"></script>
 
 
   <script>

diff --git a/experiments/api_flexibility/index.html b/experiments/api_flexibility/index.html
@@ -29,7 +29,7 @@
 
   <canvas id="c"></canvas>
 
-  <script src="../../dist/verly.bundle.js"></script>
+  <script type="module" src="../../src/app.js"></script>
 
   <script src="./index.js"></script>
 </body>

diff --git a/experiments/multiple_instance/index.html b/experiments/multiple_instance/index.html
@@ -28,7 +28,7 @@
 <body>
 
 
-  <script src="../../dist/verly.bundle.js"></script>
+  <script type="module" src="../../src/app.js"></script>
 
   <script src="./index.js"></script>
 </body>

diff --git a/experiments/web_components/Component.js b/experiments/web_components/Component.js
@@ -1,3 +1,6 @@
+import Verly from '../../src/Verly.js';
+
+
 class VerlyCanvas extends HTMLCanvasElement {
   constructor() {
     super();