New example tailored for JS backend (#152)

* New *fancy* example * backward compatibility
OCamlPro · Jun 14, 2024 · 23de080 · 23de080
1 parent 49987e1
commit 23de080
Show file tree

Hide file tree

Showing 5 changed files with 583 additions and 11 deletions.
diff --git a/examples/configure.ml b/examples/configure.ml
@@ -62,6 +62,7 @@ let () =
   add_executable "spritesheet" [ "spritesheet.png" ];
   add_executable "draw" [ "colors.png" ];
   add_executable "window_with_textbox" [];
+  add_executable "suncities" [];
 
   add_executable "demo1" [];
   add_executable "demo2" [];

diff --git a/examples/dune.inc b/examples/dune.inc
@@ -175,6 +175,14 @@
  (libraries ocaml-canvas react))
 
 
+(executable
+ (name suncities)
+ (public_name ocaml-canvas-suncities)
+ (modes byte_complete native js)
+ (modules suncities)
+ (libraries ocaml-canvas react))
+
+
 (executable
  (name demo1)
  (public_name ocaml-canvas-demo1)

diff --git a/examples/make_index/make_index.ml b/examples/make_index/make_index.ml
@@ -1,16 +1,18 @@
 
 let gen_sample_index file =
-  let tl = open_in "sample_template.html" in
-  let out = open_out (file ^ ".html") in
-  try
-    while true do
-      let l = input_line tl in
-      let l' = Str.global_replace (Str.regexp_string "%%FILE%%") file l in
-      Printf.fprintf out "%s\n" l'
-    done;
-  with End_of_file ->
-    close_in tl;
-    close_out out
+  let filename = file ^ ".html" in
+  if Sys.file_exists filename then () else
+    let tl = open_in "sample_template.html" in
+    let out = open_out filename in
+    try
+      while true do
+        let l = input_line tl in
+        let l' = Str.global_replace (Str.regexp_string "%%FILE%%") file l in
+        Printf.fprintf out "%s\n" l'
+      done;
+    with End_of_file ->
+      close_in tl;
+      close_out out
 
 let gen_global_index file files =
   let tl = open_in "global_template.html" in

diff --git a/examples/suncities.html b/examples/suncities.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Sun Empire</title>
+  <style>
+    canvas {image-rendering:auto;}
+  </style>
+</head>
+<body>
+  <noscript>Sorry, you need to enable JavaScript to see this page.</noscript>
+  <script type="text/javascript" defer="defer" src="suncities.bc.js"></script>
+  <div style="float:left">
+    <h1>Cities under the Sun</h1>
+  </div>
+  <div style="float:left">
+    <ul>
+      <li><b>Space</b> to change city</li>
+      <li><b>Left-click</b> drag to move viewpoint</li>
+      <li><b>Right-click</b> drag to change daytime</li>
+    </ul>
+  </div>
+  <div id="can"></div>
+</body>
+</html>