Giter VIP home page Giter VIP logo

hexapipes's Introduction

Jekyll Now

Jekyll is a static site generator that's perfect for GitHub hosted blogs (Jekyll Repository)

Jekyll Now makes it easier to create your Jekyll blog, by eliminating a lot of the up front setup.

  • You don't need to touch the command line
  • You don't need to install/configure ruby, rvm/rbenv, ruby gems ☺️
  • You don't need to install runtime dependancies like markdown processors, Pygments, etc
  • If you're on Windows, this will make setting up Jekyll a lot easier
  • It's easy to try out, you can just delete your forked repository if you don't like it

In a few minutes you'll be set up with a minimal, responsive blog like the one below giving you more time to spend on writing epic blog posts!

Jekyll Now Theme Screenshot

Quick Start

Step 1) Fork Jekyll Now to your User Repository

Fork this repo, then rename the repository to yourgithubusername.github.io.

Your Jekyll blog will often be viewable immediately at http://yourgithubusername.github.io (if it's not, you can often force it to build by completing step 2)

Step 1

Step 2) Customize and view your site

Enter your site name, description, avatar and many other options by editing the _config.yml file. You can easily turn on Google Analytics tracking, Disqus commenting and social icons here too.

Making a change to _config.yml (or any file in your repository) will force GitHub Pages to rebuild your site with jekyll. Your rebuilt site will be viewable a few seconds later at http://yourgithubusername.github.io - if not, give it ten minutes as GitHub suggests and it'll appear soon

There are 3 different ways that you can make changes to your blog's files:

  1. Edit files within your new username.github.io repository in the browser at GitHub.com (shown below).
  2. Use a third party GitHub content editor, like Prose by Development Seed. It's optimized for use with Jekyll making markdown editing, writing drafts, and uploading images really easy.
  3. Clone down your repository and make updates locally, then push them to your GitHub repository.

_config.yml

Step 3) Publish your first blog post

Edit /_posts/2014-3-3-Hello-World.md to publish your first blog post. This Markdown Cheatsheet might come in handy.

First Post

You can add additional posts in the browser on GitHub.com too! Just hit the + icon in /_posts/ to create new content. Just make sure to include the front-matter block at the top of each new blog post and make sure the post's filename is in this format: year-month-day-title.md

Local Development

  1. Install Jekyll and plug-ins in one fell swoop. gem install github-pages This mirrors the plug-ins used by GitHub Pages on your local machine including Jekyll, Sass, etc.
  2. Clone down your fork git clone [email protected]:yourusername/yourusername.github.io.git
  3. Serve the site and watch for markup/sass changes jekyll serve
  4. View your website at http://127.0.0.1:4000/
  5. Commit any changes and push everything to the master branch of your GitHub user repository. GitHub Pages will then rebuild and serve your website.

Moar!

I've created a more detailed walkthrough, Build A Blog With Jekyll And GitHub Pages over at the Smashing Magazine website. Check it out if you'd like a more detailed walkthrough and some background on Jekyll. 🀘

It covers:

  • A more detailed walkthrough of setting up your Jekyll blog
  • Common issues that you might encounter while using Jekyll
  • Importing from Wordpress, using your own domain name, and blogging in your favorite editor
  • Theming in Jekyll, with Liquid templating examples
  • A quick look at Jekyll 2.0’s new features, including Sass/Coffeescript support and Collections

Jekyll Now Features

βœ“ Command-line free fork-first workflow, using GitHub.com to create, customize and post to your blog
βœ“ Fully responsive and mobile optimized base theme (Theme Demo)
βœ“ Sass/Coffeescript support using Jekyll 2.0
βœ“ Free hosting on your GitHub Pages user site
βœ“ Markdown blogging
βœ“ Syntax highlighting
βœ“ Disqus commenting
βœ“ Google Analytics integration
βœ“ SVG social icons for your footer
βœ“ 3 http requests, including your avatar

✘ No installing dependancies
✘ No need to set up local development
✘ No configuring plugins
✘ No need to spend time on theming
✘ More time to code other things ... wait βœ“!

Questions?

Open an Issue and let's chat!

Other forkable themes

You can use the Quick Start workflow with other themes that are set up to be forked too! Here are some of my favorites:

Credits

Contributing

Issues and Pull Requests are greatly appreciated. If you've never contributed to an open source project before I'm more than happy to walk you through how to create a pull request.

You can start by opening an issue describing the problem that you're looking to resolve and we'll go from there.

I want to keep Jekyll Now as minimal as possible. Every line of code should be one that's useful to 90% of the people using it. Please bear that in mind when submitting feature requests. If it's not something that most people will use, it probably won't get merged. πŸ’‚β€β™‚οΈ

hexapipes's People

Contributors

adamburgess avatar gereleth avatar gordonwoodhull avatar joshwilsonvu avatar

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar  avatar

hexapipes's Issues

"Solved!" message appears prematurely

This was reported on daily puzzles 2023-03-23, 2023-03-22, 2023-03-19. They're from the same weekly series (large wrapping board with hourglass shape).
"Solved!" message appears when a few pieces are still not connected. Reports with screenshots: 1, 2.

I wasn't able to reproduce this so far. I'd appreciate a saved progress from a puzzle where this happens.

Replay button

Hi @gereleth! We were chatting about recording videos of solve strategies, so I started experimenting with a "replay" button. The advantage is it doesn't record the time spent thinking. (Also I think it's better not to record the panning and zooming.)

I was surprised how easy this was to implement.

Code on my replay branch is rather rough, but it basically works. Preview here: https://penrosepipes-git-replay-gordonwoodhull.vercel.app

Here is a video of a partial solve of a trihexa in "proofs mode":

https://www.youtube.com/watch?v=FS926PZWwPI

Here's a complete trihexa solve, recorded on my tablet, where I prefer to play:

https://youtu.be/hpJTyRG_Y2k?feature=shared

Would be glad to clean up this code you're interested.

Known bug: if you click replay twice it goes haywire replaying every move twice!

Make the Settings more obvious

The settings (which turned out very valuable to me!) are a small text line that are easily lost. Making them bigger (a button?) and centered somewhere might make folks notice them more.

Cube grid

Thanks to @gordonwoodhull we have an initial implementation of the cube grid. Its development was discussed in #83. I'm fixing the remaining issues in the cubes branch (preview link).

Here's what I changed so far.

1. Reduced puzzle sizes

Cube grid is based on hexagonal grid with every hexagon divided into three rhombic tiles. So the tile count for cube grid is 3x that of the hexagonal grid. And even the smallest 5x5 puzzle had 25*3=75 tiles originally. Or 19*3=57 if we use a hexagon-shaped board with the corners cut off.

I wanted to have puzzles with roughly the same tile counts as in the hexagonal/square sizes. Each next size is approximately double of the previous one there.

size Hex tile count Cube 3x (too many!) Cube downsized
5x5 25 75 21
7x7 49 147 57
10x10 100 300 111
15x15 225 675 225
20x20 400 1200 381
30x30 900 2700 900
40x40 1600 4800 1641

This example is how a 7x7 puzzle looks after the downsize. I don't know if we can find any 7s here... Maybe I should just call the sizes differently, still thinking about this.

cubes puzzle example

2. Refactored edgemark bends

See how connection marks bend in the image above. This is pretty tricky to implement as two halves of the mark should have different transforms applied to them.

I considered dropping transforms alltogether and just providing grid coordinates for the line segments. What stopped me was that the difference between wall marks and connection marks is a 90deg turn and that would not work for skewed tiles.

So far I made the TransformedPolygonTile provide grid coordinates of its connection mark's endpoint in addiition to the usual {x1, x2, y1, y2} output in polygon coordinates. That lets me display the reflected half in the correct location.

An open question is how we should determine if a bend is necessary. We could make this a grid property. But I can imagine, for example, a grid that mixes regular hexagons and cubes (wouldn't that be fun). Then some connections would need bends and some wouldn't. So maybe this should be decided locally - if two polygons sharing an edge are different and at least one of them is a transformed polygon then a bend is necessary. Again, still thinking about this.

Another question is how edgemark gestures should be handled when there's a bend. Currently you have to draw a connection mark as if living in the coordinates of the tile where you started the gesture. That may not be obvious)).

3. Zoom factor

The grid is scaled for hexagons so the cube tiles can look too small at their default size. I tried introducing a zoom factor (1.5) to pixels per grid unit calculations. That somewhat helped with initial scaling of the puzzle though smallest sizes now can look too zoomed in so this needs more work.

I also realized that some controls logic relies on grid units too - like panning starts when drag distance is greater than 1. In cube puzzles this seems to happen later than I expect - like I have to pass ~two tiles distance instead of one. So maybe I should scale grid coordinates instead?..

4. Other minor fixes

Fixed click to orient not working on touch screens, "Play" header item highlighting on cube pages.


Wow, I did not expect this list to turn out so long... πŸ˜…

Improved scrolling (plus panning?)

Hello! First: this is a wonderful game!

I'm writing to share some UX feedback on the wrap variant.

This mode really benefits from the edge marks to rule out certain edges. However, since the click target for the edge markers is so tiny, I like to zoom in quite a bit to make clicking easier. My first comment is that zooming is rather slow. For example, to zoom in from an overview (where there's only 1 or 2 tiles repeated on the edges) to a zoom that's comfortable to click edges takes about 5 seconds. This is something like ~10 full rotations of the scroll wheel on my mouse.

The second comment is related to the first -- since zooming is rather slow, I find myself wishing there was a way to pan around the zoomed-in tiles.

Rendering glitches

Starting this issue to keep track of the game's SVG rendering glitches.

One example is this screenshot from Safari on iPhone where connections between triangular tiles look wrong (source tweet). I don't really know how to fix this but at least I won't forget now.

image

Puzzle generation

Are the puzzle generation scripts open source? I was thinking about classifying puzzles based on their difficulty – eg distinguishing puzzles where you need to only lock known pieces from ones where you need to take notes about edges from ones where even more complex strategies are needed.

Placement of red and green bars is broken

Since the last update placement of the red and green bars is broken - for example, left-clicking and holding on the yellow X puts the red bar in the wrong location in the following screensnip:
image
It is pretty much random where the bars appear now - usually on the wrong edge of the current square/hex/whatever.
I'm seeing this on Chrome (Windows 10).

interesting and useful bug in etrat

Etrat is my go-to puzzle these days. I can reliably solve a 10x10 in "proofs mode", working from the edges in, until I only have to guess maybe 4x4, and I've kind of learned how to move the loose edges around (although I don't understand what I'm doing in a rational way).

I've noticed an interesting quirk. I think it only affects this grid, and only at the bottom. If you have the assistant on and you press and hold in order to start locking, and then keep dragging outside the grid, it will spin any adjacent tiles until they make sense, i.e. they will not point outside anymore.

This is actually super useful for those little triangular "v"s.

I kind of wish this worked everywhere. I haven't looked at the code to figure out why it's doing this, but I like it.

15x15 requires scrolling in the display window

In both Chrome and Firefox on a laptop with a good-sized screen, the 15x15 puzzle does not appear fully within the viewframe; scrolling by dragging is required. It would be great if there was a way to indicate that we would like a reduced-size puzzle so we don't have to drag while solving.

Start over / reset buttons

Start over = fully reset the puzzle to initial state

Maybe a separate button to randomize all cells except those currently locked.

Not an issue, just...

...thank you. This is exactly the right amount of effort to be entertaining without being addictive, at least for me.

Improve zoom/pan on Mac touchpads

There are some issues with how zoom and pan functions work on Mac devices. Some were described in issue #40 that resulted in a setting to disable zoom and pan.

The problems as I understand them:

  • pan direction is inverted
  • panning is too fast

No one complained about zoom strangely πŸ€”

I'd love to improve the situation but I'm flying blind here as I don't have any Macs at hand to test on.

For panning directions my mental model is that when I'm zoomed into a large puzzle then I'm looking at it through a small view box. I touch a touchpad with two fingers and this action "grabs" the view box and I move it around to see a different portion of the puzzle. So if I'm looking at the top of the puzzle and I want to see the bottom instead then I'll pull my fingers down on the touchpad.

When people say that the panning direction is inverted does that mean that their mental model is different (view box stays stationary and you drag the puzzle instead, so fingers move up to go from top of puzzle to bottom) or that the model is the same but the actual result is wrong?

If it's a mental model difference then I see two options for resolving this:

  1. (More manual) Add a setting that allows the user to invert panning direction
  2. (More automatic) Try to detect how wheel events correspond to scroll events. Like if you scroll down a page by moving fingers up on the touchpad then you probably want the inverted direction. I don't yet know how brittle a solution like this would be)).

As for panning sensitivity it might be that some event throttling could help. I'll try to make a REPL where we can find out how panning action events look across devices / browsers.

cc @Aaron-Rumpler who volunteered to provide feedback about this =).

Edge marks not working

Edit: Working as designed (edge marks drawn by gesture) - would be nice for this to be configurable. Clicking the edges was easier for me on non-mobile.

Edge marks seem not to be working in Chrome 104.0.5112.81 (and were working previously). Mousing over the edge between cells does not cause the cursor to change. Clicking the edge between cells causes cell rotation.

404 on daily

Went to check out the first puzzle of 2023 but I get a 404. Oh no!

96F78DE9-75DF-489F-BAAD-AAA5AF5CCED5

Make edgemarks easier to create

I can't always create an edgemark on the first try... Sometimes not even on the second one.

I've tried relaxing the conditions around placing an edgemark so that almost any small drag goes. This is both for mouse drags and touch drags.

A preview link to try it out: https://hexapipes-git-controls-fixes-gereleth.vercel.app/

Interested in feedback: are the edgemarks easier to create there? Do you make them by accident? Any marks appearing in the wrong place? And overall - is this an improvement over the current situation? =)

Option to disable panning/zooming

I was using this perfectly well with the browser zoom mode, and now with your browse/zoom update, that doesn't work very well. Can we please have an option to disable pan/zoom ?

Unexpected "improved average of 12"

I'm not sure why I got this "improved average of 12" when... I haven't solved 11 of the last 12 puzzles (so I shouldn't have an average at all), and definitely haven't solved any daily in under 5 minutes for a while.

image

After switching tabs and back the message disappeared.

toward P3

Hi @gereleth!

Since a couple months after you released hexapipes, I've been wondering what it would be like to play this game on Penrose tiles.

In particular, it looks like P3 with two different sizes of rhombuses would be a good match for this game.

image

Weird things about P3:

  • Every tile has four neighbors, but it's not a grid.
  • It is rotationally 5-fold symmetric around exactly one point, and is aperiodic - it doesn't wrap.
  • The number of tiles that meet at a corner is between 3 - 7.

I am hoping that gameplay will also be weird but not broken. It should work, just different maze walls right?

I can only work on this on nights and weekends, so it may take me a while to build this. So I will share my progress in this ticket, rebase regularly, and publish the results from my fork at penrosepipes.vercel.app.

I will of course contribute back once something works, assuming it's still maintainable and makes sense to you. I think it will still be comprehensible. There may be something like a graph abstraction above the grid, the game using the graph instead of the grid.

I've published the first change, which is subtle but important. To handle P3 and other tiles that are not rotationally symmetric, we can imagine arms of different lengths and different angles going to points on the edge of the tile which are on a straight line to the center of the neighboring tile. 1

Now instead of rotating the <g> using transform:rotate(...), we can bitwise rotate the tile, obtain its directions, and return the corresponding deltas.

We restore animation by applying the CSS transition to the path instead of the transform.

	.pipe path {
		transition: d 100ms;
	}

If you look closely, the animation is not as good, and we might consider adding keyframes so that the arms don't get as short during the animation. But I think it maintains the illusion well enough.

The transition only works on Chrome and Firefox; on WebKit Safari/iOS it degrades to no transition. I am sure there are workarounds for WebKit but I haven't looked into it yet.

grid.getDirections(...) already has an optional rotate parameter, but there is a wrinkle: we need the arms to always be listed in the same order for the animation to make sense. So we also rotate grid.DIRECTIONS by the same amount before filtering.

At the current commit (ac09e1c) I haven't yet implemented arm identity for the square grid, and you can see the bug that arises if arm directions are not returned in "original" order.

Here's a screen recording. Believe it or not, the tile is rotating clockwise, but the animation is deceptive: square arms rotating clockwise badly.

I'll publish the fix for this next week!

Footnotes

  1. I hope to find time to draw a diagram showing what arms will look like on P3. It will be weird, because the arms will rotate (and stretch) but the tile will not, but I think it will work. ↩

Should rotation animations be faster?

A speedster player told me that the current 100ms animations feel too sluggish.

I'm considering adding a setting for animation speed. Maybe with 3 levels: usual (100 ms), fast (30? ms) and instant (0 ms).

You can try out different durations by inspecting a pipe and editing this circled value in the browser.

image

Any thoughts on this? =)

Timer does not reset on start over

I think the β€œstart over” button used to reset the timer. IMO it should!

Love this game, totally addicted. The recent interface improvements are awesome!

New stat suggestion : Efficiency

Hi there.

I discovered pipes puzzles a couple days ago and i'm loving it.
I'm learning the ropes, sucessfully resolving my first puzzles. I like the idea of stats making you improve and being an incentive to be faster and faster.

Since i'm learning, i'm nowhere near to be super fast. So there is one more rule i try to follow : no wasted clicks.
As a minesweeper enthusiast, there is a stat that is also used to measure your skill : Efficiency.
The effeciency stat is not how fast you solve the puzzle, but how precise you are, with the less useless clicks.

I suppose you could track how many rotations you did to solve the puzzle and compare with how many rotations are truly needed (calculated while generating the puzzle). The closer you are to 100%, the more precise you are.

Combine this with the classic MO3, AO5 and AO12, and you can aim to be not only fast, but also super precise.

Thanks for reading :)

Performance issues on mobile device

I really like this game. Great execution and a great idea. Is it your idea originally?

It works great at 5x5, with no performance issues. At 10x10 it is lagging a little, and at 40x40 it is really slow. At 40 it takes about one second for the hex to turn every time I press.

I am using a Samsung Galaxy s20. It is a mid or high end phone, two years old.

I can't promise anything but do you want me to look into the code and see if it can be optimised?

Do you have any thoughts as to why it is slow?

Mobile device improvements ?

Hi thanks so much for this awesome game!
I’m playing on phone/tablet and it is impossible for me to use the gestures to lock tiles or to mark the walls (occasionally I will accidentally mark the walls but I can never seem to do it on purpose).

Perhaps there is some kind of gesture or double tap or mode or something to help with that? Also, I think it would be nice to just be able to reset the board to the starting point somehow.

A helper to find disconnected tiles

When I play a big puzzle on my phone and it's almost solved I sometimes spend a lot of time just scrolling around looking for that last disconnected piece. Some kind of help to find it would be nice.

Please add a "Reset timer" button

If you walk away from an incomplete puzzle, the "Start over" button will reset the puzzle but not the timer. I'd like to be able to reset both of them for such a case.

Undo/redo function

ctrl-z for undo
shift-ctrl-z for redo (?)

And two buttons too.

Should multiple rotations of the same tile be combined into one undo?

Change site layout and design

As of now the site is using just the default Svelte Kit skeleton project layout and design.

It would be nice to change the puzzle page layout so that the puzzle takes most of the page and the controls/navigation are somewhere in a top bar or a side bar. This would maximize available play area.

I'm lacking in design skills so glad to accept any help: ideas, references, examples of similar layouts elsewhere. Mockups or pull requests if you're feeling generous =).

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.