[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-75846":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":15,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":36,"lastSyncTime":37,"discoverSource":38},75846,"mykonos-island-voxels","boona13\u002Fmykonos-island-voxels","boona13","A browser-based isometric island builder with the soft, sun-bleached look of Mykonos. Vanilla ES modules, no bundler, mobile-friendly.","https:\u002F\u002Fmykonos-island-voxels.netlify.app",null,"JavaScript",803,189,5,1,0,12,629,4,68.84,"MIT License",false,"main",true,[26,27,28,29,30,31,32],"canvas2d","city-builder","html5-game","isometric-game","mobile-friendly","open-source","vanilla-js","2026-06-12 04:01:19","# Mykonos Island Voxels\n\nA browser-based isometric island builder with the soft, sun-bleached\nMediterranean look of Mykonos: cobalt-blue domes on whitewashed walls,\nbougainvillea spilling over stone, olive trees, windmills, narrow\ncobble paths, and a sea you can carve with a click.\n\nIt's a small, self-contained creative toy — drop blocks on a 14×14 grid\nand a tiny village builds itself in front of you. There's no goal,\nno resource grind, no scoring; just the puzzle-piece pleasure of\narranging things until they look right.\n\n**🌐 Play it: \u003Chttps:\u002F\u002Fmykonos-island-voxels.netlify.app>**\n\n![Mykonos Island Voxels — example scene](full%20city.png)\n\n---\n\n## Features\n\n- **Click-to-build isometric grid.** Pick an asset from the right-side\n  palette, click a cell, and it pops in with an elastic placement\n  animation.\n- **One-click \"Fill with grass\"** to carpet the island and start\n  arranging in seconds.\n- **75+ painterly assets** organised into terrain, nature, props, water,\n  and buildings — chapels, windmills, two-story villas, cypress, olive\n  trees, agave, wells, lanterns, fences, bridges, and more.\n- **Touch-first mobile UI.** Tap to place, long-press to erase, drag\n  to brush, two-finger pinch and pan. Layout adapts from desktop down\n  to small phones with safe-area insets for the iPhone notch.\n- **High-fidelity asset pipeline.** Source PNGs are pre-rendered at\n  6× display resolution at load time, baked into high-DPI cached\n  layers, then composited per frame so the canvas stays crisp at\n  every zoom on every screen density.\n- **Auto-save.** Your island is persisted to `localStorage` and\n  re-loaded on the next visit.\n- **Tasteful sound design.** Distinct placement sounds for water,\n  stone, wood, small vegetation, large vegetation, and UI clicks,\n  with debounced overlap so brush-painting doesn't flood the bus.\n- **Pure ES modules.** No bundler, no transpiler, no `node_modules` —\n  open `index.html` and it runs.\n\n## Controls\n\n### Mouse + keyboard\n\n| Input | Action |\n|---|---|\n| Click | Place selected asset |\n| Drag | Brush-place across cells |\n| Right click | Erase tile |\n| Right drag | Brush-erase |\n| Shift + drag | Pan camera |\n| Scroll wheel | Zoom |\n| `H` \u002F `V` | Flip the placement preview |\n| `E` | Toggle erase mode |\n| `G` | Toggle grid overlay |\n| `1`–`5` | Switch palette categories |\n| `S` \u002F `R` | Save \u002F reset |\n\n### Touch\n\n| Gesture | Action |\n|---|---|\n| Tap | Place selected asset |\n| Drag | Brush-place across cells |\n| Long-press (~420 ms) | Erase the tile under your finger |\n| Two-finger pinch | Zoom |\n| Two-finger drag | Pan camera |\n\n## Run it locally\n\nThe project is plain HTML \u002F CSS \u002F ES modules — there's no build step\nrequired to develop on it. Because browsers refuse to load ES modules\nfrom `file:\u002F\u002F` URLs, you do need to serve it over HTTP. Pick whichever\nof these is easiest:\n\n```bash\n# any one of these from the project root:\npython3 -m http.server 8000\nnpx serve .\nnpx http-server -c-1 .\n```\n\nThen open \u003Chttp:\u002F\u002Flocalhost:8000>.\n\n## Deploy\n\nThe site is deployed to Netlify. The included `netlify.toml` and\n`netlify-build.mjs` produce a clean `dist\u002F` folder containing only the\nruntime files (no design references, no `.DS_Store`, no `.webp`\nduplicates) and ship the right cache headers (immutable for assets,\nmust-revalidate for HTML\u002FCSS\u002FJS).\n\n```bash\nnetlify deploy --prod\n```\n\n## Project layout\n\n```\n.\n├── index.html               # entry point\n├── styles.css               # the entire UI (no framework)\n├── src\u002F\n│   ├── main.js              # boot, asset loading, starter scene\n│   ├── config.js            # grid size, tile dims, palette, debug flags\n│   ├── core\u002F\n│   │   ├── Game.js          # game state + tool dispatch\n│   │   ├── Camera.js        # pan \u002F zoom \u002F change notifications\n│   │   ├── Renderer.js      # layered canvas caching + animations\n│   │   └── InputManager.js  # mouse + touch + keyboard\n│   ├── grid\u002F\n│   │   ├── IsoGrid.js       # screen ↔ cell math\n│   │   └── TileMap.js       # terrain + objects, occupancy index\n│   ├── building\u002F\n│   │   └── PlacementSystem.js\n│   ├── assets\u002F\n│   │   ├── assetManifest.js # the 75+ asset definitions\n│   │   ├── assetLoader.js   # PNG → display canvas + shadow canvas\n│   │   ├── imageToAsset.js  # silhouette extraction, anchor inference\n│   │   └── voxelRenderer.js # procedural fallback when PNGs missing\n│   ├── ui\u002F\n│   │   ├── UIManager.js\n│   │   ├── Toolbar.js\n│   │   ├── AssetPalette.js\n│   │   ├── HUD.js\n│   │   └── Audio.js         # WebAudio clip routing + debouncing\n│   └── persistence\u002F\n│       └── SaveSystem.js\n├── assets\u002F                  # PNG asset pack (pre-generated)\n├── *.ogg                    # placement \u002F UI sound effects\n├── netlify.toml\n└── netlify-build.mjs\n```\n\n## Architecture notes\n\nA few choices worth flagging if you want to hack on the renderer:\n\n- **Layered cache rendering.** `Renderer.js` keeps four cache canvases:\n  a screen-space backdrop + vignette pair (rebuilt on resize), a\n  world-space platform (rebuilt on grid resize), a world-space terrain\n  layer (rebuilt when the terrain version counter changes), and a\n  world-space static-objects layer (rebuilt on add\u002Fremove). Each frame\n  the renderer composites these caches and overlays only the currently\n  animating tiles. Idle frames are essentially free.\n- **High-DPI cache canvases.** Cache canvases are sized at\n  `world × CACHE_SCALE` (2× on standard displays, 3× on retina) so\n  that even after the camera scales them up, the pixels are at or\n  near final on-screen resolution. The asset displayCanvases are\n  pre-rendered at up to 6× their reference size, so detail flows\n  through without any \"softening\" intermediate.\n- **Spatial occupancy index in `TileMap`.** Object lookup and free-cell\n  checks are O(1) per cell instead of O(N) over the object list.\n- **Dirty-flag rendering.** `markDirty()` is called from camera \u002F\n  input \u002F tool transitions; the loop early-exits when the scene is\n  static and no animations are pending.\n\n## Contributing\n\nPRs welcome. Please:\n\n- Keep it framework-free — no bundlers, no transpilers, no\n  `node_modules` for the runtime.\n- Keep the asset count modest and the visual style coherent\n  (cobalt-on-cream, soft shadows, gentle elastic motion).\n- Don't add per-frame `ctx.filter`, ImageBitmap shenanigans, or\n  anything that would re-introduce frame drops at heavy scenes.\n  The renderer's caching invariants are load-bearing.\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n\nThe PNG asset pack in `assets\u002F` is released under the same license,\ngenerated for this project. Audio clips were authored separately;\nsee file metadata if you need to attribute them.\n","Mykonos Island Voxels 是一个基于浏览器的等距视角岛屿构建器，具有柔和的地中海风格。用户可以在14×14的网格上放置75多种手绘资产，如建筑、自然景观和装饰物，创建出类似米科诺斯岛的美丽景色。该项目采用纯ES模块编写，无需打包工具，支持移动设备友好界面，包括触摸优先的UI设计和高保真度的资源管道处理技术。适合用于创意表达、游戏开发学习或简单的休闲娱乐场景。",2,"2026-06-11 03:53:30","CREATED_QUERY"]