<path d="M -150 1000 C 200 700 600 800 700 1200" fill="none"/>
      <p><br>I like:</p>
      </ul>
		int edgeIDNumber = 0;
	 * <p>
      <h2 style="margin-top: 7vw" class="right"> quiet places </h2>
      </div>
      <Route exact path="/login" component={LoginFormContainer} />
      <Route exact path="/events/:id" component={TicketListContainer} />
	}
  widths
		for (int i = 0; i < 5; i++) {
		}
  Promise.all(projectsList.map(p => 
import TicketDetailsContainer from './Ticket/TicketDetailsContainer';
	 * So then, you want to get the edges around it, you take this number -1 and the number itself.
    .get(require(`../assets/projects/${p.id}.md`))
| |  \/  ___ | |_    _ __    __ _ | |_ | |__  
 * and avoid walls in the process.
  projectDescriptions
  .then(res => dispatch(projectDescriptionsFetched(res)));
import SignUpFormContainer from './Users/SignUpFormContainer';
	/**
      <Route exact path="/signup" component={SignUpFormContainer} />
      <p style="font-size: 13px; line-height: 16px; margin-top: 50px"> This page is best viewed using a 16:9 screen using Google Chrome. Lots of proportion-based magic has been incorporated to make it usable at other aspect ratios (try resizing the window!), however I will have to admit that actually making this fully functional and aesthetically pleasing with text going around the objects is at this point too challenging for me. And also on some mobile browsers, something seems to break as a consequence of the Javascript-animation and I hate it and I can't find it :d </p>
        <a href="https://nl.linkedin.com/in/jiriswen" target="_blank"> <img src="images/linkedin.png" class="icon"> </a>
	 * @param Coordinates of the tile to calculate the path towards.
	protected LinkedList<Vertex> getShortestPath(int[] mapCoordinates) {
		return edgeIDList;
	 */
    <div id="triangle-section">
  if (!projectsList) 
      </div>
	/**
		// Creates all vertical edges
    <Switch>
	 * Get the most efficient path to a specified tile from the source tile 
| | | |           | |       | |                         | || |     
  type: UPDATE_WIDTHS,
	/**
    </div>
      </div>
        <li> Transgender / not yet medically transitioning but e.g. dressing girlily (yess that is correct English albeit rarely used), should not hinder communication </li>
    <div id="icon-jumble">
      <Route exact path="/events/:eventId/tickets/:id" component={TicketDetailsContainer} />
	protected void resetEdges() {
    }
		// Add the horizontal edges to the list
export function addLike(fromId, toId) {
 _| |_| | | || || |_ | || (_| || || |\__ \| (_| || |_ | || (_) || | | |
	 * Gets the ID values of the edges around a node in the network.
	protected void initialiseDijkstra() {
|  _  || | | |\ \/ /| || || | / _` || '__|| | | |
	 * Default constructor.
      <p>I am very much looking forward to getting to know all the intricacies and tools that go into webdev, and getting to work with talented people etc. etc. <br> I'm quite new to this web development thing, but have loved programming for some time now so yeah, I'm not going anywhere anytime soon :) </p>

	 * Run Dijkstra's algorithm (from {@link GameLogic}) based from a specified source tile.
        <path d="M -200 850 C 200 350 600 800 1200 1300" fill="none"/>
 * @see {@link Vertex.java}
  }
	 * @return The corresponding ID number.
	 * @return List of the horizontal/vertical edges adjacent to the tile.
    type: ADD_LIKE,
	}
		if (coordinate2 == 0) {
      <p style="margin-top: 20vw; text-align: right;"> The regular world/society/life is boring which is why <br>I'm extraordinarily inspired by worlds that are by today's standards impossible or unthinkable. </p>
    },

      </div>

        <a target="_blank"> <img src="images/deviantart.png" class="icon"> </a>
		}
 \___/ | .__/  \__,_| \__,_| \__|\___|    \_/\_/  \__,_||_||_||___/
		else {
        "out": false // set this to true to hide the "out" folder with the compiled JS files
      </div>
				   a directional graph and I want all connections to be bi-directional */
| |_\ \|  __/| |_   | |_) || (_| || |_ | | | |
	private List<Vertex> nodes;
	}
	 * to land at the edge number at the right (/ top) of the point [1,2] (/ [2,1])
	 * 
const jwtData = jwt => {
      <Route path="/signup" />
      <script src="scripts/main.js"></script>
 \____/ \___| \__|  | .__/  \__,_| \__||_| |_|

			}

      <div id="new-icons"></div>
	 * @return A list of the ID values of the wanted edges.
		}
	 */
		dijkstra.execute(nodes.get(mapCoordinatesToNodeID(mapCoordinates)));
	private DijkstraAlgorithm dijkstra;
}
	 * @param offset : The edge ID number at which to start 'counting'.

  type: PROJECT_DESCRIPTIONS_FETCHED,
/*
		return coordinates;
  <body>

        <img src="images/kawaiiSpul.jpg">
		if (coordinate2 == 0 || coordinate2 == 4) {
 _   _             _         _                           _  _      
      <p style="margin-top: 28vw/*540px*/;"> Hi, I'm Jiri! (*´ω`*) 宜しくお願いっす~~ </p>
function Routes(props) {
import {withRouter} from 'react-router';
	 * so that all have the same weight.
	// The class that computes it all using a graph
        <li> Has most keys on the keyboard in muscle memory. Useful! (like, actually) </li>
/ /_\ \ _   _ __  __ _ | | _   __ _  _ __  _   _ 
      <h2 style="margin-top: 9vw" class="right"> coding ;) </h2>
	private Graph graph;
/*
      <h2 style="margin-top: 7vw;" class="right"> music </h2>
      </svg>
    </div>
			for (int j = 0; j < 4; ++j) {
			edgeToRemove.setWeight(99999);
    payload: {
    <div id="facts">
	// The graph containing the nodes and the edges linking them
      <div class="social-media-plug">
		// Creates the 25 nodes of the network
| | | || |_| | >  < | || || || (_| || |   | |_| |
				addEdge("Edge_" + edgeIDNumber, i + j, i + j + 5);
	}
      </div>
    </div>
		graph = new Graph(nodes, edges);

                    | |                       
	}
			addObstacle(wallList.get(i));
 * 
	 */

export const updateWidths = (widths) => ({
    <link href="styles/style.css" rel="stylesheet" type="text/css">
		graph = new Graph(nodes, edges);



                                            __/ |
	 * Creates the network anew in order to stay up-to-date on where the walls (i.e. obstacles) are.
		edges = new ArrayList<Edge>();

      <Route path="/login" />
      <div class="social-media-plug">
        <path d="M -200 750 C 400 0 800 1300 1200 900" fill="none"/>
		edges.add(newEdge);
      <h2 style="margin-top: 5.5vw" class="left"> fashion </h2>
	 * Gives the edges that lie around a point in either horizontal or vertical direction.
  var base64 = base64Url.replace('-', '+').replace('_', '/')
  | |  _ __   _ | |_  _   __ _ | | _  ___   __ _ | |_  _   ___   _ __  
		/* Please look at the ordering as described above to understand the maths here: 
    </div>
<!DOCTYPE html>
        <path d="M -200 650 C 400 -200 800 1350 1200 700" fill="none"/>
	 */
	/**
import EventListContainer from './Events/EventListContainer';
        <img src="images/coding.jpg">
	 * The math:
		}
        <path d="M -150 1200 C 200 900 400 800 400 1200" fill="none"/>
        <img src="images/happouen.jpg">
      <div class="right-triangle" style="clip-path: polygon(100% 14%, 0 65%, 100% 94%); margin-top: -12vw;">

 * @see {@link DijkstraAlgorithm.java}
	public DijkstraOperations() {
	 */
      <p style="margin-top: 20vw; text-align: left;"> Avid fan of all kinds of different music though <br> mostly electronic genres. Also like to play piano and have dabbled into creating electronic music (: </p>
      <div class="fly-in">
        <p> <a target="_blank">Twitter</a> <br>(don't use, why am I even listing this here...) </p>
import React from 'react';
export const isExpired = jwt => jwtData(jwt).exp < (Date.now()/1000)
      <p style="margin-top: 25vw; text-align: right;"> Used to be more of a nerd than I am now, <br>but I still like my anime/games and do find things interesting that <br> are probably not supposed to be interesting (゚∀゚) </p>
	/**
      <h2 style="margin-top: -6vw" class="left"> cute stuff </h2>
		else {
import java.util.LinkedList;
                                           |___/ 
      <div class="left-triangle" style="clip-path: polygon(0 5%, 0 76%, 100% 15%); margin-top: 0vw; right: 50%;">
  return (<div>
public class DijkstraOperations {
      </div>
import java.util.List;
        <img src="images/geesen.jpg">
		int startI;
			for (int j = 0; j < 20; j += 5) {
        <img src="images/musicEquipment.jpg">
 */
      <h2 style="margin-top: 12vw" class="left"> nerdy things </h2>
    "typescript.tsc.autoDetect": "off"
  </head>
	}
    <div id="footer">
<html>
		nodes = new ArrayList<Vertex>();
	protected void executeDijkstra(int[] mapCoordinates) {
        <img src="images/japan.jpg">
 */
      <h2 class="normal" style="margin-top: 6vw;"> Random facts about me </h2>
				addEdge("Edge_" + edgeIDNumber, i + j + 1, i + j);
	 * it is this easy because of the order in which the edges where constructed.
	 * For the vertical values, the coordinates are swapped and the offset is increased to 40:
      <div class="left-triangle" style="clip-path: polygon(0 16%, 0 92%, 100% 56%); margin-top: -10vw;"> 
        <path d="M -200 200 C 400 -700 750 1800 1100 -400" fill="none"/>
    <div class="cool-animation">
        <path d="M -200 950 C 200 500 600 800 900 1200" fill="none"/>
       |_|                                                         
        <li> Used to go about the winter in shirts&shorts until the discovery of the fashion potential of long sleeves </li>
}
	/**
	 */
	}
	 * @param edgeID : The "name" for the new edge.
	/**
	 */
</html>
	protected void updateNetwork(List<Integer[]> wallList) {
 * @see {@link Edge.java}
});
	 * @param The coordinates of the obstacle to add.
    <Switch>
			Vertex location = new Vertex("" + i, "Node_" + i);
 \___/|_| |_||_| \__||_| \__,_||_||_||___/ \__,_| \__||_| \___/ |_| |_|
   * @return The corresponding Node ID.
});
        <p> <a target="_blank">SoundCloud</a> <br>(it's just 2 weird conglomerations of tunes but may be interesting to get insight into the inner workings of my brain or sth) </p>
      <div class="right-triangle" style="clip-path: polygon(100% 14%, 0 48%, 100% 94%); margin-top: -10vw;">
        <li> If something is little-known, there's an 28% increase in the chance that I will like it. </li>
			Edge edgeToRemove = edges.get(edgeIDs.get(i));
		int endI;
        <a target="_blank"> <img src="images/instagram.png" class="icon"> </a>
import java.util.ArrayList;
      <div class="social-media-plug">
    .then(res => res.text))
      <div class="social-media-plug">
	}
		for (int i = 0; i < edgeIDs.size(); ++i) {
import request from 'superagent';
      <div class="social-media-plug">
		}
		edgeIDList.addAll(addEdgesToList(coordinates[0], coordinates[1], 0));
        <li> Speaks English with some kind of weird made-up British accent </li>
    "search.exclude": {
  </div>);
      </div>
      
    </Switch>
import {Switch, Route, Redirect} from 'react-router-dom';
		List<Integer> edgeIDList = new ArrayList<Integer>();
		List<Integer> edgeIDs = getEdgeIDsAroundPoint(coordinates);
		return halfEdgeIDList;
   * @param Coordinates to convert.
 _____        _  _    _         _  _              _    _               
		// (Remember, there are 5 nodes in each row)
        <img src="images/fantasyWorld.jpg">

    </div>

		int[] coordinates = new int[] {nodeID / 5, nodeID % 5};
		for (int i = startI; i < endI; ++i) {
  )
				/* Edges are created back and forth because Dijkstra's algorithm uses
			nodes.add(location);
	 * @param destLocNo : The node to which the edge goes.
    <meta charset="utf-8">
	 * @param Coordinates of the tile from which to run Dijkstra.
      <svg height="85vh" width="100vw" viewBox="0 0 1000 1000" preserveAspectRatio="none" style="display: block; margin: auto;">
	 */
{
| |_| || |_) || (_| || (_| || |_|  __/   \ V  V /| (_| || || |\__ \
 */
        <li> Emilia is best grill, jk </li>
	 * Add and edge with weight 1 to the network.
      <div class="right-triangle" style="clip-path: polygon(100% 9%, 0 40%, 100% 90%); margin-top: -6vw;">
	 * (e.g. the point[3,1] gives edge 13, while edge 12 and 13 surround it).
	}
		}
/*
	 * 
| | __  / _ \| __|  | '_ \  / _` || __|| '_ \ 
	 */

      <img src="images/panorama-web-klein.jpg" class="fullscreen-width" style="margin: 0; clip-path: polygon(78% 0, 100% 0, 100% 100%, 0 100%, 0 0); position: absolute; top: 0;">
			halfEdgeIDList.add(offset + coordinate1 * 8 + coordinate2 * 2 + i);
	// The nodes of the network
import LoginFormContainer from './Users/LoginFormContainer';
      <div class="social-media-plug">
import LoginLogoutButton from './LoginLogoutButton';
	 * @param sourceLocNo : The node from which the edge comes.
      </div>
| | | || '_ \  / _` | / _` || __|/ _ \  \ \ /\ / // _` || || |/ __|
	 */
	 * @return The corresponding set of coordinates.
	 * https://github.com/vogellacompany/codeexamples-java/blob/master/de.vogella.algorithms.dijkstra/src/de/vogella/algorithms/dijkstra/test/TestDijkstraAlgorithm.java
export const PROJECT_DESCRIPTIONS_FETCHED = 'PROJECT_DESCRIPTIONS_FETCHED';
      <p style="margin-top: 17vw;"> Hardcore introvert here, so I really need my <br>recharging time in comfortable places like my home or nature <br>(particularly like the mountains and 庭園) </p>
      </div>
		List<Integer> halfEdgeIDList = new ArrayList<Integer>();
		}
	 * @param coordinate1 : The first coordinate (either horizontal or vertical).
	 * @param List of the coordinates of all the wall tiles in the 5x5 grid. Called from {@link Bot}
	}
			edges.set(edgeIDs.get(i), edgeToRemove);

    },
	 * And of course, if it is at an edge of the network, the left/right side would need to be excluded.
	private List<Edge> edges;
                    |_|                       
 * @see {@link Graph.java}
  /**
	 * If you think of the network as having 20 edges, you can do coordinate1 * 4 + coordinate2
	}
        <p> <a target="_blank">Instagram</a> <br>(don't post) </p>
        "out": true // set this to false to include "out" folder in search results
export const ADD_LIKE = 'ADD_LIKE';
|_   _|      (_)| |  (_)       | |(_)            | |  (_)              
	protected List<Integer> addEdgesToList(Integer coordinate1, Integer coordinate2, int offset) {
	 * <p>
export const fetchProjectDescriptions = () => (dispatch, getState) => {
		edgeIDList.addAll(addEdgesToList(coordinates[1], coordinates[0], 40));
 * in order to move towards the human player efficiently
      <p> Scroll down for some info about me. </p>
 */
      </div>
	 */
/*
\_| |_/ \__,_|/_/\_\|_||_||_| \__,_||_|    \__, |
        <path d="M -200 500 C 400 -300 800 1350 1200 500" fill="none"/>
      <p style="margin-top: 18vw;"> (Curious to see if Javascript is as abominable <br>a programming language as my Computer Science friends always say it is... <br>I mean I'm already liking that the syntax since ES6 sort-a resembles Java) </p>

      <p style="font-size: 11.5px; line-height: 12px; margin-top: -5px; color: #FFAACB"> (Explanation about "text going around objects": in order for "shape-outside" to work the object that uses it cannot be positioned "absolute"ly and I did actually get all this working using cool calc()s and stuff, but then the whole site got buggy and elements were shifting from the place where they are supposed to be in the flow of the page and just generally I never got the layout to look pleasing at all ratios, soooow yes it'd help to actually understand Javascript or sth.) <br></p>
    </Switch>
      <h2 style="margin-top: 10vw" class="left"> fantasy </h2>
	 * The same logic has been used, except all times 2.
 / _ \              (_)| |(_)                    
        <li> INFP through and through (though also a bit of INTP) ((use this information however you wish except if it is disadvantageous to me)) (((;゚Д゚))) </li>
	/**
        <path d="M -150 1100 C 200 800 500 800 500 1200" fill="none"/>
				edgeIDNumber ++;
			startI = 0;
      </div>
	 * Adds an 'obstacle' in the network by setting the weights of all the edges around it to a high value.
        <path d="M -200 400 C 400 -600 750 1650 1200 0" fill="none"/>
	 * 
      <Route exact path="/" render={() => <Redirect to="/events" />} />
 * to create a network for the 5x5 grid in the Bot's memory
		for (int i = 0; i < wallList.size(); ++i) {

*/

    <div id="introduction">
		// Add the vertical edges to the list
			// Makes the ID of the vertices just a number for easy conversion
        <li> Finished bachelor Architecture ¯\_(ツ)_/¯ </li>

	 * that was used when running executeDijkstra(). Run from {@link GameLogic}.
|  __ \      | |                  | |  | |    
		}
        <a target="_blank"> <img src="images/soundcloud.png" class="icon"> </a>
import TicketListContainer from './Event-Tickets/TicketListContainer';
      <Route path="" component={LoginLogoutButton} />
	 * @param Node (vertex) to get the ID number from.
		// Creates all horizontal edges
}
      <p style="margin-top: 17vw;"> I'm, like, a weeaboo... except that <br>I went to the point where I think it's no longer called that。 </p>
 * @release 15/12/2017
    <div id="links">
 * @see {@link Bot.java}

				edgeIDNumber ++;

| | | | _ __    __| |  __ _ | |_  ___   __      __ __ _ | || | ___ 
      <Route exact path="/events" component={EventListContainer} />
        <p> <a href="https://www.facebook.com/jiri.swen" target="_blank">Facebook</a> <br>(don't use, but sure go ahead and have a look at my embarrassing pictures from the past ~kyaaah~) </p>
		resetEdges();
      toId,
}
      <p style="margin-top: 14vw; text-align: right;"> This one doesn't really need explaining does it >:3 </p>
			endI = startI + 2;
	 * 
        <a target="_blank"> <img src="images/twitter.png" class="icon"> </a>
	protected static int vertexToNodeID(Vertex node) {
  return JSON.parse(window.atob(base64))
      <p style="margin-top: 12vw; text-align: right;"> Western fashion is mostly stupid and boring, <br> I'll pick the Asian perspective on clothing any day. <br>Also like to experiment with combining things that aren't "meant" to come together ^^ </p>
       | |                                                         
	protected static int mapCoordinatesToNodeID(int[] coordinates) {
const projectDescriptionsFetched = (projectDescriptions=[]) => ({
    request
				addEdge("Edge_" + edgeIDNumber, i + j + 5, i + j);
 * @version 1.0
	/**
  <head>
      <div class="right-triangle" style="clip-path: polygon(100% 14%, 0 48%, 100% 94%); margin-top: -8vw;">
		resetEdges();
			endI = startI + 4;
    "files.exclude": {
      </div>
	 * 
	 * @return A list of the vertices (nodes) to the target tile, starting at the source tile.
      <h2 class="normal" style="margin-top: 4vw"> Links </h2>
}
		initialiseDijkstra();
	 * Got this method from vogella:
      </div>
        <p> <a target="_blank">DeviantArt</a> <br>(sometimes like(d) to draw with my Wacom tablet) </p>
      fromId,
		dijkstra = new DijkstraAlgorithm(graph);
      <h2 style="margin-top: 7vw" class="right"> 日本 </h2>
		return (int) Integer.parseInt(node.getId());
			}

	protected void addEdge(String edgeID, int sourceLocNo, int destLocNo) {
export const userId = jwt => jwtData(jwt).id
		dijkstra = new DijkstraAlgorithm(graph);
        <h1>Jiri</h1>
        <a href="https://www.facebook.com/jiri.swen" target="_blank"> <img src="images/facebook.png" class="icon"> </a>
export default withRouter(Routes);
    </div>
	 * Creates all the edges (connections between nodes) of the network anew
				addEdge("Edge_" + edgeIDNumber, i + j, i + j + 1);
		return coordinates[0] * 5 + coordinates[1];
	protected static int[] nodeIDToMapCoordinates(int nodeID) {
		   an Edge is always created between two node ID numbers and there are 5 nodes in a row */
	 * IDs 0-39:  horizontal edges (and e.g. 0-7 for the top row)
	 * @param Coordinates of the point around which to take the edges.
		}
      <ul>
		for (int i = 0; i < 25; i += 5) {
// Place your settings in this file to overwrite default and user settings.
      <div class="left-triangle" style="clip-path: polygon(0 9%, 0 90%, 100% 30%); margin-top: -20vw;"> 
    <Route path="" render={() => <button onClick={() => props.history.push('/')}>Home</button>} />
      <div class="left-triangle" style="clip-path: polygon(0 16%, 0 92%, 100% 40%); margin-top: -10vw; right: 30%;"> 
  return {
    // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
 * @author Jiri Swen
 _____        _                    _    _     
/**
		for (int i = 0; i < 25; i++) {
    </div>    
  var base64Url = jwt.split('.')[1]
    return;
	protected void addObstacle(Integer[] coordinates) {
	 */
		Edge newEdge = new Edge(edgeID, nodes.get(sourceLocNo), nodes.get(destLocNo), 1);
	 * @param Node ID to convert.
	}
        <img src="images/streetFashion.jpeg">
				edgeIDNumber ++;
	 * IDs 40-79: vertical edges (and e.g. 40-47 for the leftmost column)
				edgeIDNumber ++;
  </body>
        <p> <a href="https://nl.linkedin.com/in/jiriswen" target="_blank">LinkedIn</a> <br> (behold, in how professional a manner I can present myself on a high-end platform like LinkedIn... yeah NOT xD) </p>
	 * Creates all the things necessary to run Dijkstra's algorithm.
}
      </div>
      <p style="font-size: 10px; position: absolute; margin-top: 40px;"> ©Jiri Swen, 2018 </p>
		return dijkstra.getPath(nodes.get(mapCoordinatesToNodeID(mapCoordinates)));
	 * @param coordinate2 : The second coordinate (either vertical or horizontal).
	/**
			startI = -2;
 * Makes use of some classes I found that implement Dijkstra's pathfinding algorithm
	// All the edges in the network
  const projectsList = getState().projects;
   */
    <title>侍鈴さんの名鑼儼</title>
	protected List<Integer> getEdgeIDsAroundPoint (Integer[] coordinates) {
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
		}
	/**
	 * The edges are ordered like this:
export const UPDATE_WIDTHS = 'UPDATE_WIDTHS';
  ___                _  _  _                     
	/**
  | | | '_ \ | || __|| | / _` || || |/ __| / _` || __|| | / _ \ | '_ \ 
	}
shining effectsunraysfloating head

ABOUT

landscape 1awards-cupfuture-buildinghobby-heap
jiri soul containerjiri soul pupils
octopus-treespiral-towertechnology-forest
bookbookbookbookbookbookbookbookbookbookbook
contact-details
osu! db manipulator