Giter VIP home page Giter VIP logo

pixel-vg's People

Contributors

katieraby avatar marigameo avatar valeriavg avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

marigameo leandrodaher gi972

pixel-vg's Issues

Add ability to edit the palette

Currently, the only way to edit the palette is to hardcode colour values on a local copy.
Let's ability to add and remove colours from the palette.

Example implementation:

  • add a "+" button right after colours
  • when pressed, a prompt is shown
  • where user can enter HEX colour value (e.g. #ff0000 for red )
  • new colour is added to colours array
  • move the eraser ("X") button to the right

Add gallery with to showcase creations

Store creations along with user information to show on the website and in the repo.

One possible way to do it:

  • create routes/gallery/index.ts
  • add routes/gallery/images.json
  • add static/gallery folder
  • create some images
  • setup simple gallery viewer in routes/gallery/index.ts

Add ability to clear the drawing board

Currently, the only way to clean the whole board is to either reload the page or choose "Eraser" and clean all points one by one.

Let's add a "Clear" button, that would:

  • ask confirmation if the user really meant that
  • and then would clear the canvas

Add custom alerts

Currently, the editor uses default prompts, which are limited to only one text field.
In some cases, e.g. to save images without the grid, additional fields are required.

Let's create a custom Svelte component to be rendered atop of all content (position:fixed; z-index:N), that would have configurable slots for:

  • static content
  • form fields
  • buttons

And replace window.prompt etc with this new component.

Add cypress tests for mirror drawing

There is a visual image diff test in cypress/integration/drawing.spec.ts that draws a line and checks that it matches the screenshot.

Let's test that mirror functionality works correctly as well:

  • when x|x is activated
  • when y|y is activated
  • when both x|x and y|y are activated

Can't locally run the app

When I use npm run dev, I get:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
[email protected] D:\pixel-vg
+-- UNMET DEPENDENCY @sveltejs/adapter-static@^1.0.0-next.20
+-- UNMET DEPENDENCY @sveltejs/kit@next
+-- UNMET DEPENDENCY @testing-library/jest-dom@^5.14.1
+-- UNMET DEPENDENCY @testing-library/svelte@^3.0.3
+-- UNMET DEPENDENCY @types/jest@^27.0.2
+-- UNMET DEPENDENCY @typescript-eslint/eslint-plugin@^4.31.1
+-- UNMET DEPENDENCY @typescript-eslint/parser@^4.31.1
+-- UNMET DEPENDENCY canvas@^2.8.0
+-- UNMET DEPENDENCY cypress-img-snapshot@^1.0.0
+-- UNMET DEPENDENCY cypress@^8.5.0
+-- UNMET DEPENDENCY eslint-config-prettier@^8.3.0
+-- UNMET DEPENDENCY eslint-plugin-svelte3@^3.2.1
+-- UNMET DEPENDENCY eslint@^7.32.0
+-- UNMET DEPENDENCY jest@^27.2.4
+-- UNMET DEPENDENCY milligram@^1.4.1
+-- UNMET DEPENDENCY prettier-plugin-svelte@^2.4.0
+-- UNMET DEPENDENCY prettier@^2.4.1
+-- UNMET DEPENDENCY start-server-and-test@^1.14.0
+-- UNMET DEPENDENCY svelte-check@^2.2.6
+-- UNMET DEPENDENCY svelte-jester@^2.1.5
+-- UNMET DEPENDENCY svelte-preprocess@^4.9.4
+-- UNMET DEPENDENCY svelte@^3.44.0
+-- UNMET DEPENDENCY ts-jest@^27.0.5
+-- UNMET DEPENDENCY tslib@^2.3.1
`-- UNMET DEPENDENCY typescript@^4.4.3

npm ERR! code ELSPROBLEMS
npm ERR! missing: @sveltejs/adapter-static@^1.0.0-next.20, required by [email protected]
npm ERR! missing: @sveltejs/kit@next, required by [email protected]
npm ERR! missing: @testing-library/jest-dom@^5.14.1, required by [email protected]
npm ERR! missing: @testing-library/svelte@^3.0.3, required by [email protected]
npm ERR! missing: @types/jest@^27.0.2, required by [email protected]
npm ERR! missing: @typescript-eslint/eslint-plugin@^4.31.1, required by [email protected]
npm ERR! missing: @typescript-eslint/parser@^4.31.1, required by [email protected]
npm ERR! missing: canvas@^2.8.0, required by [email protected]
npm ERR! missing: cypress-img-snapshot@^1.0.0, required by [email protected]
npm ERR! missing: cypress@^8.5.0, required by [email protected]
npm ERR! missing: eslint-config-prettier@^8.3.0, required by [email protected]
npm ERR! missing: eslint-plugin-svelte3@^3.2.1, required by [email protected]
npm ERR! missing: eslint@^7.32.0, required by [email protected]
npm ERR! missing: jest@^27.2.4, required by [email protected]
npm ERR! missing: milligram@^1.4.1, required by [email protected]
npm ERR! missing: prettier-plugin-svelte@^2.4.0, required by [email protected]
npm ERR! missing: prettier@^2.4.1, required by [email protected]
npm ERR! missing: start-server-and-test@^1.14.0, required by [email protected]
npm ERR! missing: svelte-check@^2.2.6, required by [email protected]
npm ERR! missing: svelte-jester@^2.1.5, required by [email protected]
npm ERR! missing: svelte-preprocess@^4.9.4, required by [email protected]
npm ERR! missing: svelte@^3.44.0, required by [email protected]
npm ERR! missing: ts-jest@^27.0.5, required by [email protected]
npm ERR! missing: tslib@^2.3.1, required by [email protected]
npm ERR! missing: typescript@^4.4.3, required by [email protected]

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mikwee\AppData\Local\npm-cache\_logs\2022-10-11T15_45_59_623Z-debug-0.log

When I try to install all these packages, I get:

npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
npm WARN old lockfile
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile
npm notice
npm notice New minor version of npm available! 8.11.0 -> 8.19.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.19.2
npm notice Run npm install -g [email protected] to update!
npm notice
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @sveltejs/[email protected]
npm ERR! node_modules/@sveltejs/kit
npm ERR!   dev @sveltejs/kit@"1.0.0-next.513" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @sveltejs/kit@"1.0.0-next.513" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^3.1.0" from @sveltejs/[email protected]
npm ERR!   node_modules/@sveltejs/kit
npm ERR!     dev @sveltejs/kit@"1.0.0-next.513" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\mikwee\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\mikwee\AppData\Local\npm-cache\_logs\2022-10-11T15_51_48_465Z-debug-0.log

Why is that? I know this repository hasn't been active for a year, but I'm still trying my luck. Thank you!

Add some style ⭐️

Currently, the editor looks like it's still 1997.

Let make it look modern, by providing an src/routes/__layout.svelte file with styles & header/footer markup.
As a suggestion, Milligram CSS can be used to make it faster

Allow users to save images as SVG

I think it'll be nice to have pixel-art SVG icons and therefore, the editor should be able to:

  • group pixels into shapes
  • write shapes as SVG paths (e.g. <path d="M150 0 L75 200 L225 200 Z" />)
  • add proper colours to paths
  • wrap with SVG boilerplate
  • save as a file

Add ability to change the size of the drawing board

Currently, the only way to change the size of the drawing board is to change the hardcoded value on the local copy.

Let's add the ability to set the size variable via UI.

For example:

  • add <input type="number" />
  • bind it's value to size variable
  • ensure that canvas calls render() on size change

Add ability to save image as .png

Currently, the only way to save the drawing is to use browser built-in canvas "Save image as..."
It would be much more convenient to just click the "Save" button.

To save canvas contents using canvas.toDataURL one would need to create a new canvas with 2d context, as the main one will have 2d context always null

Optimise generated SVG

Currently, generated SVG draws each square separately, but it's possible to group pixels together into smaller paths.

  • Add compress function, that would turn pixel coordinates into 2D shapes vertices
  • Adjust SVG path calculation to draw vertices instead of squares
  • Optionally, use this function to optimise drawing on the board itself

Add option to hide grid

Currently, when the image is saved it's always saved with the grid, which may not be the intended behaviour.

  • add a checkbox to toggle grid
  • if unchecked, the grid should not be drawn

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.