what

framework/Cargo.toml

@@ -9,10 +9,16 @@ anyhow = "1.0.38"
 gfx-hal = "0.6.0"
 winit = { version = "0.24.0", features = ["web-sys"] }
 bass-sys = { path = "../bass-sys" }
-gfx-backend-vulkan = "0.6.5"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+gfx-backend-gl = "0.6.1"
+web-sys = "0.3.46"
 
 [target.'cfg(target_os = "macos")'.dependencies]
 gfx-backend-metal = "0.6.5"
 
 [target.'cfg(windows)'.dependencies]
 gfx-backend-dx12 = "0.6.13"
+
+[target.'cfg(not(any(window, target_os = "macos", target_arch = "wasm32")))'.dependencies]
+gfx-backend-vulkan = "0.6.5"

framework/src/game.rs

@@ -1,10 +1,22 @@
+#[cfg(windows)]
+pub use gfx_backend_dx12 as back;
+#[cfg(target_arch = "wasm32")]
+pub use gfx_backend_gl as back;
+#[cfg(target_os = "macos")]
+pub use gfx_backend_metal as back;
+#[cfg(not(any(windows, target_os = "macos", target_arch = "wasm32")))]
+pub use gfx_backend_vulkan as back;
+
 use anyhow::Result;
+use gfx_hal::Instance;
 use winit::{
     event::{Event, WindowEvent},
     event_loop::{ControlFlow, EventLoop},
     window::{Window, WindowBuilder},
 };
 
+use crate::graphics::Renderer;
+
 pub struct ObjectWrapper {
     id: usize,
     inner: Box<dyn Object>,
@@ -29,6 +41,27 @@ impl Game {
         let event_loop = EventLoop::new();
         let window = WindowBuilder::new().build(&event_loop)?;
 
+        #[cfg(target_arch = "wasm32")]
+        web_sys::window()
+            .unwrap()
+            .document()
+            .unwrap()
+            .body()
+            .unwrap()
+            .append_child(&winit::platform::web::WindowExtWebSys::canvas(&window))
+            .unwrap();
+
+        // let instance = back::Instance::create("osu", 1).unwrap();
+        // let surface = unsafe { instance.create_surface(&window) }?;
+        // let adapter = {
+        //     let mut adapters = instance.enumerate_adapters();
+        //     for adapter in adapters.iter() {
+        //         println!("{:?}", adapter.info);
+        //     }
+        //     adapters.remove(0)
+        // };
+        // let renderer = Renderer::new(instance, surface, adapter)?;
+
         Ok(Game {
             objects: vec![],
             event_loop,

framework/src/graphics.rs

@@ -1,10 +1,3 @@
-#[cfg(windows)]
-use gfx_backend_dx12 as back;
-#[cfg(target_os = "macos")]
-use gfx_backend_metal as back;
-#[cfg(not(any(windows, target_os = "macos")))]
-use gfx_backend_vulkan as back;
-
 use std::mem::ManuallyDrop;
 use std::ptr;
 

src/game/mod.rs

@@ -16,7 +16,8 @@ use anyhow::Result;
 use ggez::{
     event::{KeyCode, MouseButton},
     graphics::{
-        self, Color, DrawMode, DrawParam, FilterMode, Image, Mesh, Rect, StrokeOptions, Text, WHITE,
+        self, CanvasGeneric, Color, DrawMode, DrawParam, FilterMode, GlBackendSpec, Image, Mesh,
+        Rect, StrokeOptions, Text, WHITE,
     },
     Context,
 };
@@ -69,6 +70,7 @@ pub struct Game {
 
     frame: usize,
     slider_cache: SliderCache,
+    seeker_cache: Option<CanvasGeneric<GlBackendSpec>>,
     combo_colors: Vec<Color>,
     selected_objects: Vec<usize>,
     tool: Tool,
@@ -98,6 +100,7 @@ impl Game {
             skin,
             frame: 0,
             slider_cache: SliderCache::default(),
+            seeker_cache: None,
             combo_colors: DEFAULT_COLORS
                 .iter()
                 .map(|(r, g, b)| Color::new(*r, *g, *b, 1.0))

src/game/seeker.rs

@@ -1,6 +1,7 @@
 use anyhow::Result;
 use ggez::{
-    graphics::{self, Color, DrawMode, DrawParam, FillOptions, Mesh, Rect},
+    conf::NumSamples,
+    graphics::{self, Canvas, Color, DrawMode, DrawParam, FillOptions, Mesh, Rect},
     mint::Point2,
     Context,
 };
@@ -11,63 +12,80 @@ use super::Game;
 pub const BOUNDS: Rect = Rect::new(46.0, 732.0, 932.0, 36.0);
 
 impl Game {
-    pub(super) fn draw_seeker(&self, ctx: &mut Context) -> Result<()> {
+    pub(super) fn draw_seeker(&mut self, ctx: &mut Context) -> Result<()> {
-        let rect = Mesh::new_rectangle(
+        if self.seeker_cache.is_none() {
-            ctx,
+            println!("drawing seeker");
-            DrawMode::Fill(FillOptions::default()),
+            let format = graphics::get_window_color_format(ctx);
-            Rect::new(0.0, 732.0, 1024.0, 36.0),
+            let canvas = Canvas::new(
-            Color::new(0.0, 0.0, 0.0, 0.7),
+                ctx,
-        )?;
+                BOUNDS.w as u16,
-        graphics::draw(ctx, &rect, DrawParam::default())?;
+                BOUNDS.h as u16,
+                NumSamples::Sixteen,
+                format,
+            )?;
+            graphics::set_canvas(ctx, Some(&canvas));
 
-        let line_y = BOUNDS.y + BOUNDS.h / 2.0;
+            let rect = Mesh::new_rectangle(
-        let line = Mesh::new_line(
+                ctx,
-            ctx,
+                DrawMode::Fill(FillOptions::default()),
-            &[
+                Rect::new(0.0, 732.0, 1024.0, 36.0),
-                Point2::from([BOUNDS.x, line_y]),
+                Color::new(0.0, 0.0, 0.0, 0.7),
-                Point2::from([BOUNDS.x + BOUNDS.w, line_y]),
+            )?;
-            ],
+            graphics::draw(ctx, &rect, DrawParam::default())?;
-            1.0,
-            graphics::WHITE,
-        )?;
-        graphics::draw(ctx, &line, DrawParam::default())?;
 
-        if let Some(song) = &self.song {
+            let line_y = BOUNDS.h / 2.0;
-            let len = song.length()?;
+            let line = Mesh::new_line(
+                ctx,
+                &[
+                    Point2::from([0.0, line_y]),
+                    Point2::from([BOUNDS.w, line_y]),
+                ],
+                1.0,
+                graphics::WHITE,
+            )?;
+            graphics::draw(ctx, &line, DrawParam::default())?;
 
-            for timing_point in self.beatmap.inner.timing_points.iter() {
+            if let Some(song) = &self.song {
-                let color = match timing_point.kind {
+                let len = song.length()?;
-                    TimingPointKind::Inherited(_) => Color::new(0.0, 0.8, 0.0, 0.5),
-                    TimingPointKind::Uninherited(_) => Color::new(0.8, 0.0, 0.0, 0.5),
-                };
 
-                let percent = timing_point.time.as_seconds().0.into_inner() / len;
+                for timing_point in self.beatmap.inner.timing_points.iter() {
-                let x = BOUNDS.x + percent as f32 * BOUNDS.w;
+                    let color = match timing_point.kind {
+                        TimingPointKind::Inherited(_) => Color::new(0.0, 0.8, 0.0, 0.4),
+                        TimingPointKind::Uninherited(_) => Color::new(0.8, 0.0, 0.0, 0.6),
+                    };
 
+                    let percent = timing_point.time.as_seconds().0.into_inner() / len;
+                    let x = percent as f32 * BOUNDS.w;
+
+                    let line = Mesh::new_line(
+                        ctx,
+                        &[Point2::from([x, 0.0]), Point2::from([x, BOUNDS.h / 2.0])],
+                        1.0,
+                        color,
+                    )?;
+                    graphics::draw(ctx, &line, DrawParam::default())?;
+                }
+
+                let percent = song.position()? / len;
+                let x = percent as f32 * BOUNDS.w;
                 let line = Mesh::new_line(
                     ctx,
                     &[
-                        Point2::from([x, BOUNDS.y]),
+                        Point2::from([x, 0.2 * BOUNDS.h]),
-                        Point2::from([x, BOUNDS.y + BOUNDS.h]),
+                        Point2::from([x, 0.8 * BOUNDS.h]),
                     ],
-                    1.0,
+                    4.0,
-                    color,
+                    graphics::WHITE,
                 )?;
                 graphics::draw(ctx, &line, DrawParam::default())?;
             }
 
-            let percent = song.position()? / len;
+            graphics::set_canvas(ctx, None);
-            let x = BOUNDS.x + percent as f32 * BOUNDS.w;
+            self.seeker_cache = Some(canvas);
-            let line = Mesh::new_line(
+        };
-                ctx,
+
-                &[
+        if let Some(canvas) = &self.seeker_cache {
-                    Point2::from([x, BOUNDS.y + 0.2 * BOUNDS.h]),
+            graphics::draw(ctx, canvas, DrawParam::default().dest([BOUNDS.x, BOUNDS.y]).scale([1.0, 10.0]))?;
-                    Point2::from([x, BOUNDS.y + 0.8 * BOUNDS.h]),
-                ],
-                4.0,
-                graphics::WHITE,
-            )?;
-            graphics::draw(ctx, &line, DrawParam::default())?;
         }
         Ok(())
     }