diff --git a/404.html b/404.html
index 44c1e44..d1dc390 100644
--- a/404.html
+++ b/404.html
@@ -64,21 +64,21 @@
 		<link href="./_app/immutable/assets/Socials.90829a02.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/_error.e3eb7d9c.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Button.df0e54d0.css" rel="stylesheet">
-		<link rel="modulepreload" href="./_app/immutable/entry/start.e776f058.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.889feda2.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.c7d83eca.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/app.bbae1d65.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.1c576aae.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/start.b02acea1.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.963f39ba.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.71f580a9.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/app.19a18c5b.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.926ef413.js">
 		<link rel="modulepreload" href="./_app/immutable/entry/_layout.ts.984db11e.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/_layout.da46b06b.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-layout.svelte.df021916.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.d6dce7f9.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.3c8c0927.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-layout.svelte.ae1baf34.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.86072d99.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.51dbce5a.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/meta.65863fbf.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-404-page.svelte.d095cb8f.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Button.835f3106.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-404-page.svelte.36f41b4b.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Button.c88cc32a.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/regex.7dfa9b23.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/error.715343d6.js"><title>Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-12ekxku_START --><link rel="“canonical”" href="https://punnlert.github.io/"><meta name="keywords" content="Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio"><meta name="description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta name="twitter:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta name="twitter:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta property="og:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:card" content="summary_large_image"><!-- HEAD_svelte-12ekxku_END -->
+		<link rel="modulepreload" href="./_app/immutable/chunks/error.88d56f25.js"><title>Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-12ekxku_START --><link rel="“canonical”" href="https://punnlert.github.io/"><meta name="keywords" content="Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio"><meta name="description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta name="twitter:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta name="twitter:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta property="og:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:card" content="summary_large_image"><!-- HEAD_svelte-12ekxku_END -->
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div id="svelte-root">
@@ -177,7 +177,7 @@
 			
 			<script>
 				{
-					__sveltekit_10x07x1 = {
+					__sveltekit_3lmy3c = {
 						env: {},
 						base: new URL(".", location).pathname.slice(0, -1),
 						element: document.currentScript.parentElement
@@ -186,10 +186,10 @@
 					const data = [null,null,null];
 
 					Promise.all([
-						import("./_app/immutable/entry/start.e776f058.js"),
-						import("./_app/immutable/entry/app.bbae1d65.js")
+						import("./_app/immutable/entry/start.b02acea1.js"),
+						import("./_app/immutable/entry/app.19a18c5b.js")
 					]).then(([kit, app]) => {
-						kit.start(app, __sveltekit_10x07x1.element, {
+						kit.start(app, __sveltekit_3lmy3c.element, {
 							node_ids: [0, 3, 10],
 							data,
 							form: null,
diff --git a/__data.json b/__data.json
index 9f685d9..b1ac5f5 100644
--- a/__data.json
+++ b/__data.json
@@ -1 +1 @@
-{"type":"data","nodes":[null,null,{"type":"data","data":[{"features":1,"posts":38},[2,9,19,23,30,34],{"name":3,"description":4,"image":5,"tags":6},"Markdown Support","Blog posts are written in Markdown, a simple and nearly-universal format. This means you can bring over your posts from other platforms, and easily export to another if you want to.","images\u002Ffeatures\u002Fmarkdown.jpg",[7],{"label":8},"Powered by MDsveX",{"name":10,"description":11,"image":12,"tags":13},"Themeable","You can easily theme the entire website by changing just a few colors in the _themes.scss file.","images\u002Ffeatures\u002Fthemeable.jpg",[14,16],{"label":15},"Primary Color",{"label":17,"color":18},"Secondary Color","secondary",{"name":20,"description":21,"image":22},"Extensible","Components are built to be reused, and you can build new pages and layouts without much CSS knowledge. You can see all components in Histoire by running \"npm run story:dev\"","images\u002Ffeatures\u002Fextensible.jpg",{"name":24,"description":25,"image":26,"tags":27},"Well Optimized","Images are automatically optimized and lazy loaded, to ensure the website loads as fast as possible regardless of connection speed.","images\u002Ffeatures\u002Foptimized.jpg",[28],{"label":29},"Powered by Image Transmutation",{"name":31,"description":32,"image":33},"Light and Dark Modes","This template was built with dark mode in mind. It can swap between themes automatically (based on system settings) or manually. Both themes can be tweaked in the _themes.scss file.","images\u002Ffeatures\u002Flight-dark.jpg",{"name":35,"description":36,"image":37},"Open Source","All code is open source, which means you can copy and modify it to your heart's content. All I ask is that you make your code open too so that knowledge can be passed on.","images\u002Ffeatures\u002Fopen-source.jpg",[39,64],{"slug":40,"title":41,"date":42,"excerpt":43,"coverImage":44,"tags":45,"hidden":49,"html":50,"readingTime":51,"relatedPosts":52},"roger-roger","Roger, Roger","2023-05-18T21:55:27.000Z","Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!","\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",[46,47,48],"Coding","Javascript","Game Design",false,"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E","4 min read",[53],{"slug":54,"title":55,"date":56,"excerpt":57,"coverImage":58,"tags":59,"hidden":49,"html":62,"readingTime":63},"oink","Oink","2023-04-22T21:55:27.154Z","Reshaping digital financial experience for kids and preteens by introducing tangible interface.","\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",[60,61],"UX Design","UI Design","\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E","5 min read",{"slug":54,"title":55,"date":56,"excerpt":57,"coverImage":58,"tags":59,"hidden":49,"html":62,"readingTime":63,"relatedPosts":65},[66],{"slug":40,"title":41,"date":42,"excerpt":43,"coverImage":44,"tags":45,"hidden":49,"html":50,"readingTime":51}],"uses":{"url":1}}]}
+{"type":"data","nodes":[null,null,{"type":"data","data":[{"features":1,"posts":38},[2,9,19,23,30,34],{"name":3,"description":4,"image":5,"tags":6},"Markdown Support","Blog posts are written in Markdown, a simple and nearly-universal format. This means you can bring over your posts from other platforms, and easily export to another if you want to.","images\u002Ffeatures\u002Fmarkdown.jpg",[7],{"label":8},"Powered by MDsveX",{"name":10,"description":11,"image":12,"tags":13},"Themeable","You can easily theme the entire website by changing just a few colors in the _themes.scss file.","images\u002Ffeatures\u002Fthemeable.jpg",[14,16],{"label":15},"Primary Color",{"label":17,"color":18},"Secondary Color","secondary",{"name":20,"description":21,"image":22},"Extensible","Components are built to be reused, and you can build new pages and layouts without much CSS knowledge. You can see all components in Histoire by running \"npm run story:dev\"","images\u002Ffeatures\u002Fextensible.jpg",{"name":24,"description":25,"image":26,"tags":27},"Well Optimized","Images are automatically optimized and lazy loaded, to ensure the website loads as fast as possible regardless of connection speed.","images\u002Ffeatures\u002Foptimized.jpg",[28],{"label":29},"Powered by Image Transmutation",{"name":31,"description":32,"image":33},"Light and Dark Modes","This template was built with dark mode in mind. It can swap between themes automatically (based on system settings) or manually. Both themes can be tweaked in the _themes.scss file.","images\u002Ffeatures\u002Flight-dark.jpg",{"name":35,"description":36,"image":37},"Open Source","All code is open source, which means you can copy and modify it to your heart's content. All I ask is that you make your code open too so that knowledge can be passed on.","images\u002Ffeatures\u002Fopen-source.jpg",[39,64],{"slug":40,"title":41,"date":42,"excerpt":43,"coverImage":44,"tags":45,"hidden":49,"html":50,"readingTime":51,"relatedPosts":52},"roger-roger","Roger, Roger","2023-05-18T21:55:27.000Z","Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!","\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",[46,47,48],"Coding","Javascript","Game Design",false,"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E","4 min read",[53],{"slug":54,"title":55,"date":56,"excerpt":57,"coverImage":58,"tags":59,"hidden":49,"html":62,"readingTime":63},"oink","Oink","2023-04-22T21:55:27.154Z","Reshaping digital financial experience for kids and preteens by introducing tangible interface.","\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",[60,61],"UI Design","UX Design","\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E","5 min read",{"slug":54,"title":55,"date":56,"excerpt":57,"coverImage":58,"tags":59,"hidden":49,"html":62,"readingTime":63,"relatedPosts":65},[66],{"slug":40,"title":41,"date":42,"excerpt":43,"coverImage":44,"tags":45,"hidden":49,"html":50,"readingTime":51}],"uses":{"url":1}}]}
diff --git a/_app/immutable/assets/SparklingHighlight.65de18f8.css b/_app/immutable/assets/SparklingHighlight.65de18f8.css
new file mode 100644
index 0000000..fdce20e
--- /dev/null
+++ b/_app/immutable/assets/SparklingHighlight.65de18f8.css
@@ -0,0 +1 @@
+.wrapper.svelte-sixv8c.svelte-sixv8c{position:absolute;pointer-events:none;display:flex;z-index:2;animation:svelte-sixv8c-grow-and-shrink .9s ease-in-out forwards}.wrapper.svelte-sixv8c svg.svelte-sixv8c{animation:svelte-sixv8c-spin .9s linear forwards}@keyframes svelte-sixv8c-grow-and-shrink{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}@keyframes svelte-sixv8c-spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}.sparkle-wrapper.svelte-exdx8u.svelte-exdx8u{position:relative;display:inline-block}.sparkle-wrapper.svelte-exdx8u .slot-wrapper.svelte-exdx8u{position:relative;z-index:1}strong.primary.svelte-8f8x6d{color:var(--color--primary)}strong.secondary.svelte-8f8x6d{color:var(--color--secondary)}
diff --git a/_app/immutable/assets/SparklingHighlight.c0b76d91.css b/_app/immutable/assets/SparklingHighlight.c0b76d91.css
new file mode 100644
index 0000000..521323c
--- /dev/null
+++ b/_app/immutable/assets/SparklingHighlight.c0b76d91.css
@@ -0,0 +1 @@
+.wrapper.svelte-sixv8c.svelte-sixv8c{position:absolute;pointer-events:none;display:flex;z-index:2;animation:svelte-sixv8c-grow-and-shrink 900ms ease-in-out forwards}.wrapper.svelte-sixv8c svg.svelte-sixv8c{animation:svelte-sixv8c-spin 900ms linear forwards}@keyframes svelte-sixv8c-grow-and-shrink{0%{transform:scale(0)}50%{transform:scale(1)}100%{transform:scale(0)}}@keyframes svelte-sixv8c-spin{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}.sparkle-wrapper.svelte-exdx8u.svelte-exdx8u{position:relative;display:inline-block}.sparkle-wrapper.svelte-exdx8u .slot-wrapper.svelte-exdx8u{position:relative;z-index:1}strong.primary.svelte-8f8x6d{color:var(--color--primary)}strong.secondary.svelte-8f8x6d{color:var(--color--secondary)}
\ No newline at end of file
diff --git a/_app/immutable/assets/_page.28a24b29.css b/_app/immutable/assets/_page.28a24b29.css
deleted file mode 100644
index 8eb39fb..0000000
--- a/_app/immutable/assets/_page.28a24b29.css
+++ /dev/null
@@ -1 +0,0 @@
-.drawing_container.svelte-1kwwrxy{width:100%;display:grid;align-items:end;grid-template-columns:1fr 1fr;grid-gap:10px}
\ No newline at end of file
diff --git a/_app/immutable/assets/_page.31d4c0f8.css b/_app/immutable/assets/_page.31d4c0f8.css
new file mode 100644
index 0000000..7938fff
--- /dev/null
+++ b/_app/immutable/assets/_page.31d4c0f8.css
@@ -0,0 +1 @@
+#hero.svelte-kryipj.svelte-kryipj{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:0px;position:relative;padding:100px 0}@media(max-width: 767px){#hero.svelte-kryipj.svelte-kryipj{padding:40px 0 50px}}#hero.svelte-kryipj .name.svelte-kryipj{margin-bottom:1.5em}#hero.svelte-kryipj .name h1.svelte-kryipj{text-align:center;line-height:1}#hero.svelte-kryipj .hello.svelte-kryipj{font-family:var(--font--special);text-align:center;line-height:1}@media(max-width: 767px){}#about.svelte-15nehu9.svelte-15nehu9{position:relative;display:grid;grid-template-columns:500px 400px;align-items:center;justify-content:space-between;padding-bottom:50px}@media(max-width: 1000px){#about.svelte-15nehu9.svelte-15nehu9{grid-template-columns:1fr;justify-items:center;gap:20px}}@media(max-width: 767px){#about.svelte-15nehu9.svelte-15nehu9{grid-template-columns:1fr;justify-items:center;gap:20px}}#about.svelte-15nehu9 .info.svelte-15nehu9{display:flex;flex-direction:column;gap:10px}@media(max-width: 767px){#about.svelte-15nehu9 .info h2.svelte-15nehu9{text-align:center}}@media(max-width: 767px){#about.svelte-15nehu9 .info p.svelte-15nehu9{text-align:justify}}@media(max-width: 767px){#about.svelte-15nehu9 .info.svelte-15nehu9{gap:20px}}#about.svelte-15nehu9 .socials.svelte-15nehu9{display:flex;align-items:center;gap:15px}@media(max-width: 767px){#about.svelte-15nehu9 .socials.svelte-15nehu9{justify-content:center;margin-bottom:10px}#about.svelte-15nehu9 .socials span.svelte-15nehu9{display:none}}#about.svelte-15nehu9 .image.svelte-15nehu9{margin:0 auto;max-height:400px;border-radius:12px;border-style:solid;border-width:3px;overflow:hidden}.grid.svelte-8prerd{width:100%;display:grid;grid-template-columns:1fr;grid-gap:20px}@media(max-width: 767px){.grid.svelte-8prerd{grid-template-columns:1fr}}.content.svelte-x9191d{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.title.svelte-x9191d{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:1.2rem;font-family:var(--font--title);font-weight:700}.tags.svelte-x9191d{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.footer.svelte-x9191d{margin-top:20px}.feature-card .image img{object-fit:cover}.features-container.svelte-9ei89p{width:100%;display:grid;grid-template-columns:1fr;grid-gap:20px}.three-group-grid.svelte-9ei89p{width:100%;display:grid;grid-template-columns:2fr 1fr;grid-gap:20px}@media(max-width: 1085px){.three-group-grid.svelte-9ei89p{grid-template-columns:1fr 1fr}}@media(max-width: 767px){.three-group-grid.svelte-9ei89p{grid-template-columns:1fr}}@media(min-width: 1086px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 2){grid-row:span 2}}@media(max-width: 1085px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 1){grid-column:span 2}}@media(max-width: 900px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 1){grid-template-columns:1fr;grid-column:unset}}
\ No newline at end of file
diff --git a/_app/immutable/assets/_page.a6e66b51.css b/_app/immutable/assets/_page.a6e66b51.css
deleted file mode 100644
index 2c3ed3a..0000000
--- a/_app/immutable/assets/_page.a6e66b51.css
+++ /dev/null
@@ -1 +0,0 @@
-.wrapper.svelte-sixv8c.svelte-sixv8c{position:absolute;pointer-events:none;display:flex;z-index:2;animation:svelte-sixv8c-grow-and-shrink .9s ease-in-out forwards}.wrapper.svelte-sixv8c svg.svelte-sixv8c{animation:svelte-sixv8c-spin .9s linear forwards}@keyframes svelte-sixv8c-grow-and-shrink{0%{transform:scale(0)}50%{transform:scale(1)}to{transform:scale(0)}}@keyframes svelte-sixv8c-spin{0%{transform:rotate(0)}to{transform:rotate(180deg)}}.sparkle-wrapper.svelte-exdx8u.svelte-exdx8u{position:relative;display:inline-block}.sparkle-wrapper.svelte-exdx8u .slot-wrapper.svelte-exdx8u{position:relative;z-index:1}#hero.svelte-kryipj.svelte-kryipj{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:0px;position:relative;padding:100px 0}@media (max-width: 767px){#hero.svelte-kryipj.svelte-kryipj{padding:40px 0 50px}}#hero.svelte-kryipj .name.svelte-kryipj{margin-bottom:1.5em}#hero.svelte-kryipj .name h1.svelte-kryipj{text-align:center;line-height:1}#hero.svelte-kryipj .hello.svelte-kryipj{font-family:var(--font--special);text-align:center;line-height:1}strong.primary.svelte-8f8x6d{color:var(--color--primary)}strong.secondary.svelte-8f8x6d{color:var(--color--secondary)}#about.svelte-15nehu9.svelte-15nehu9{position:relative;display:grid;grid-template-columns:500px 400px;align-items:center;justify-content:space-between;padding-bottom:50px}@media (max-width: 1000px){#about.svelte-15nehu9.svelte-15nehu9{grid-template-columns:1fr;justify-items:center;gap:20px}}@media (max-width: 767px){#about.svelte-15nehu9.svelte-15nehu9{grid-template-columns:1fr;justify-items:center;gap:20px}}#about.svelte-15nehu9 .info.svelte-15nehu9{display:flex;flex-direction:column;gap:10px}@media (max-width: 767px){#about.svelte-15nehu9 .info h2.svelte-15nehu9{text-align:center}}@media (max-width: 767px){#about.svelte-15nehu9 .info p.svelte-15nehu9{text-align:justify}}@media (max-width: 767px){#about.svelte-15nehu9 .info.svelte-15nehu9{gap:20px}}#about.svelte-15nehu9 .socials.svelte-15nehu9{display:flex;align-items:center;gap:15px}@media (max-width: 767px){#about.svelte-15nehu9 .socials.svelte-15nehu9{justify-content:center;margin-bottom:10px}#about.svelte-15nehu9 .socials span.svelte-15nehu9{display:none}}#about.svelte-15nehu9 .image.svelte-15nehu9{margin:0 auto;max-height:400px;border-radius:12px;border-style:solid;border-width:3px;overflow:hidden}.grid.svelte-8prerd{width:100%;display:grid;grid-template-columns:1fr;grid-gap:20px}@media (max-width: 767px){.grid.svelte-8prerd{grid-template-columns:1fr}}.content.svelte-x9191d{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.title.svelte-x9191d{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:1.2rem;font-family:var(--font--title);font-weight:700}.tags.svelte-x9191d{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.footer.svelte-x9191d{margin-top:20px}.feature-card .image img{object-fit:cover}.features-container.svelte-9ei89p{width:100%;display:grid;grid-template-columns:1fr;grid-gap:20px}.three-group-grid.svelte-9ei89p{width:100%;display:grid;grid-template-columns:2fr 1fr;grid-gap:20px}@media (max-width: 1085px){.three-group-grid.svelte-9ei89p{grid-template-columns:1fr 1fr}}@media (max-width: 767px){.three-group-grid.svelte-9ei89p{grid-template-columns:1fr}}@media (min-width: 1086px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 2){grid-row:span 2}}@media (max-width: 1085px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 1){grid-column:span 2}}@media (max-width: 900px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 1){grid-template-columns:1fr;grid-column:unset}}
diff --git a/_app/immutable/assets/_page.aed9cb66.css b/_app/immutable/assets/_page.aed9cb66.css
new file mode 100644
index 0000000..6380d1b
--- /dev/null
+++ b/_app/immutable/assets/_page.aed9cb66.css
@@ -0,0 +1 @@
+mark.svelte-ki0izd{--mark-color:transparent;margin-inline:-.1em;padding-inline:.1em;background-color:transparent;background-image:linear-gradient(to bottom,transparent 60%,var(--mark-color) 60%);color:inherit}mark.svelte-1600vgs{--mark-color:transparent;margin-inline:-.3em;padding-inline:.3em;background-color:transparent;background-image:linear-gradient(to bottom right,transparent 50%,var(--mark-color) 50%),linear-gradient(var(--mark-color),var(--mark-color)),linear-gradient(to top left,transparent 50%,var(--mark-color) 50%);background-size:.25em 1em,calc(100% - .5em + 1px) 1em,.25em 1em;background-position:left center,center,right center;background-repeat:no-repeat;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}mark.primary.svelte-1600vgs{--mark-color:var(--color--primary-shade)}mark.secondary.svelte-1600vgs{--mark-color:var(--color--secondary-shade)}.drawing_container.svelte-1kwwrxy{width:100%;display:grid;align-items:end;grid-template-columns:1fr 1fr;grid-gap:10px}
diff --git a/_app/immutable/assets/_page.ba1a06a2.css b/_app/immutable/assets/_page.ba1a06a2.css
deleted file mode 100644
index aaf3c50..0000000
--- a/_app/immutable/assets/_page.ba1a06a2.css
+++ /dev/null
@@ -1 +0,0 @@
-.drawing_container.svelte-1kwwrxy{width:100%;display:grid;align-items:end;grid-template-columns:1fr 1fr;grid-gap:10px}
diff --git a/_app/immutable/assets/_page.e551a152.css b/_app/immutable/assets/_page.e551a152.css
deleted file mode 100644
index 21d3539..0000000
--- a/_app/immutable/assets/_page.e551a152.css
+++ /dev/null
@@ -1 +0,0 @@
-.wrapper.svelte-sixv8c.svelte-sixv8c{position:absolute;pointer-events:none;display:flex;z-index:2;animation:svelte-sixv8c-grow-and-shrink 900ms ease-in-out forwards}.wrapper.svelte-sixv8c svg.svelte-sixv8c{animation:svelte-sixv8c-spin 900ms linear forwards}@keyframes svelte-sixv8c-grow-and-shrink{0%{transform:scale(0)}50%{transform:scale(1)}100%{transform:scale(0)}}@keyframes svelte-sixv8c-spin{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}.sparkle-wrapper.svelte-exdx8u.svelte-exdx8u{position:relative;display:inline-block}.sparkle-wrapper.svelte-exdx8u .slot-wrapper.svelte-exdx8u{position:relative;z-index:1}#hero.svelte-kryipj.svelte-kryipj{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:0px;position:relative;padding:100px 0}@media(max-width: 767px){#hero.svelte-kryipj.svelte-kryipj{padding:40px 0 50px}}#hero.svelte-kryipj .name.svelte-kryipj{margin-bottom:1.5em}#hero.svelte-kryipj .name h1.svelte-kryipj{text-align:center;line-height:1}#hero.svelte-kryipj .hello.svelte-kryipj{font-family:var(--font--special);text-align:center;line-height:1}@media(max-width: 767px){}strong.primary.svelte-8f8x6d{color:var(--color--primary)}strong.secondary.svelte-8f8x6d{color:var(--color--secondary)}#about.svelte-15nehu9.svelte-15nehu9{position:relative;display:grid;grid-template-columns:500px 400px;align-items:center;justify-content:space-between;padding-bottom:50px}@media(max-width: 1000px){#about.svelte-15nehu9.svelte-15nehu9{grid-template-columns:1fr;justify-items:center;gap:20px}}@media(max-width: 767px){#about.svelte-15nehu9.svelte-15nehu9{grid-template-columns:1fr;justify-items:center;gap:20px}}#about.svelte-15nehu9 .info.svelte-15nehu9{display:flex;flex-direction:column;gap:10px}@media(max-width: 767px){#about.svelte-15nehu9 .info h2.svelte-15nehu9{text-align:center}}@media(max-width: 767px){#about.svelte-15nehu9 .info p.svelte-15nehu9{text-align:justify}}@media(max-width: 767px){#about.svelte-15nehu9 .info.svelte-15nehu9{gap:20px}}#about.svelte-15nehu9 .socials.svelte-15nehu9{display:flex;align-items:center;gap:15px}@media(max-width: 767px){#about.svelte-15nehu9 .socials.svelte-15nehu9{justify-content:center;margin-bottom:10px}#about.svelte-15nehu9 .socials span.svelte-15nehu9{display:none}}#about.svelte-15nehu9 .image.svelte-15nehu9{margin:0 auto;max-height:400px;border-radius:12px;border-style:solid;border-width:3px;overflow:hidden}.grid.svelte-8prerd{width:100%;display:grid;grid-template-columns:1fr;grid-gap:20px}@media(max-width: 767px){.grid.svelte-8prerd{grid-template-columns:1fr}}.content.svelte-x9191d{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.title.svelte-x9191d{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:1.2rem;font-family:var(--font--title);font-weight:700}.tags.svelte-x9191d{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.footer.svelte-x9191d{margin-top:20px}.feature-card .image img{object-fit:cover}.features-container.svelte-9ei89p{width:100%;display:grid;grid-template-columns:1fr;grid-gap:20px}.three-group-grid.svelte-9ei89p{width:100%;display:grid;grid-template-columns:2fr 1fr;grid-gap:20px}@media(max-width: 1085px){.three-group-grid.svelte-9ei89p{grid-template-columns:1fr 1fr}}@media(max-width: 767px){.three-group-grid.svelte-9ei89p{grid-template-columns:1fr}}@media(min-width: 1086px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 2){grid-row:span 2}}@media(max-width: 1085px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 1){grid-column:span 2}}@media(max-width: 900px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 1){grid-template-columns:1fr;grid-column:unset}}
\ No newline at end of file
diff --git a/_app/immutable/assets/_page.ebe08205.css b/_app/immutable/assets/_page.ebe08205.css
new file mode 100644
index 0000000..20c5fa6
--- /dev/null
+++ b/_app/immutable/assets/_page.ebe08205.css
@@ -0,0 +1 @@
+#hero.svelte-kryipj.svelte-kryipj{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:0px;position:relative;padding:100px 0}@media (max-width: 767px){#hero.svelte-kryipj.svelte-kryipj{padding:40px 0 50px}}#hero.svelte-kryipj .name.svelte-kryipj{margin-bottom:1.5em}#hero.svelte-kryipj .name h1.svelte-kryipj{text-align:center;line-height:1}#hero.svelte-kryipj .hello.svelte-kryipj{font-family:var(--font--special);text-align:center;line-height:1}#about.svelte-15nehu9.svelte-15nehu9{position:relative;display:grid;grid-template-columns:500px 400px;align-items:center;justify-content:space-between;padding-bottom:50px}@media (max-width: 1000px){#about.svelte-15nehu9.svelte-15nehu9{grid-template-columns:1fr;justify-items:center;gap:20px}}@media (max-width: 767px){#about.svelte-15nehu9.svelte-15nehu9{grid-template-columns:1fr;justify-items:center;gap:20px}}#about.svelte-15nehu9 .info.svelte-15nehu9{display:flex;flex-direction:column;gap:10px}@media (max-width: 767px){#about.svelte-15nehu9 .info h2.svelte-15nehu9{text-align:center}}@media (max-width: 767px){#about.svelte-15nehu9 .info p.svelte-15nehu9{text-align:justify}}@media (max-width: 767px){#about.svelte-15nehu9 .info.svelte-15nehu9{gap:20px}}#about.svelte-15nehu9 .socials.svelte-15nehu9{display:flex;align-items:center;gap:15px}@media (max-width: 767px){#about.svelte-15nehu9 .socials.svelte-15nehu9{justify-content:center;margin-bottom:10px}#about.svelte-15nehu9 .socials span.svelte-15nehu9{display:none}}#about.svelte-15nehu9 .image.svelte-15nehu9{margin:0 auto;max-height:400px;border-radius:12px;border-style:solid;border-width:3px;overflow:hidden}.grid.svelte-8prerd{width:100%;display:grid;grid-template-columns:1fr;grid-gap:20px}@media (max-width: 767px){.grid.svelte-8prerd{grid-template-columns:1fr}}.content.svelte-x9191d{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.title.svelte-x9191d{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:1.2rem;font-family:var(--font--title);font-weight:700}.tags.svelte-x9191d{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.footer.svelte-x9191d{margin-top:20px}.feature-card .image img{object-fit:cover}.features-container.svelte-9ei89p{width:100%;display:grid;grid-template-columns:1fr;grid-gap:20px}.three-group-grid.svelte-9ei89p{width:100%;display:grid;grid-template-columns:2fr 1fr;grid-gap:20px}@media (max-width: 1085px){.three-group-grid.svelte-9ei89p{grid-template-columns:1fr 1fr}}@media (max-width: 767px){.three-group-grid.svelte-9ei89p{grid-template-columns:1fr}}@media (min-width: 1086px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 2){grid-row:span 2}}@media (max-width: 1085px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 1){grid-column:span 2}}@media (max-width: 900px){.three-group-grid.svelte-9ei89p>:nth-child(3n + 1){grid-template-columns:1fr;grid-column:unset}}
diff --git a/_app/immutable/assets/_page.f5761c27.css b/_app/immutable/assets/_page.f5761c27.css
new file mode 100644
index 0000000..6463d69
--- /dev/null
+++ b/_app/immutable/assets/_page.f5761c27.css
@@ -0,0 +1 @@
+mark.svelte-ki0izd{--mark-color:transparent;margin-inline:-0.1em;padding-inline:0.1em;background-color:transparent;background-image:linear-gradient(to bottom, transparent 60%, var(--mark-color) 60%);color:inherit}mark.svelte-1600vgs{--mark-color:transparent;margin-inline:-0.3em;padding-inline:0.3em;background-color:transparent;background-image:linear-gradient(to bottom right, transparent 50%, var(--mark-color) 50%), linear-gradient(var(--mark-color), var(--mark-color)), linear-gradient(to top left, transparent 50%, var(--mark-color) 50%);background-size:0.25em 1em, calc(100% - 0.5em + 1px) 1em, 0.25em 1em;background-position:left center, center, right center;background-repeat:no-repeat;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}mark.primary.svelte-1600vgs{--mark-color:var(--color--primary-shade)}mark.secondary.svelte-1600vgs{--mark-color:var(--color--secondary-shade)}.drawing_container.svelte-1kwwrxy{width:100%;display:grid;align-items:end;grid-template-columns:1fr 1fr;grid-gap:10px}
\ No newline at end of file
diff --git a/_app/immutable/chunks/0.63da0304.js b/_app/immutable/chunks/0.135b2290.js
similarity index 55%
rename from _app/immutable/chunks/0.63da0304.js
rename to _app/immutable/chunks/0.135b2290.js
index eadc218..24072fb 100644
--- a/_app/immutable/chunks/0.63da0304.js
+++ b/_app/immutable/chunks/0.135b2290.js
@@ -1 +1 @@
-import{_ as r}from"./_layout.da46b06b.js";import{default as t}from"../entry/_layout.svelte.1c576aae.js";export{t as component,r as universal};
+import{_ as r}from"./_layout.da46b06b.js";import{default as t}from"../entry/_layout.svelte.926ef413.js";export{t as component,r as universal};
diff --git a/_app/immutable/chunks/1.c8f78756.js b/_app/immutable/chunks/1.c8f78756.js
new file mode 100644
index 0000000..e318baa
--- /dev/null
+++ b/_app/immutable/chunks/1.c8f78756.js
@@ -0,0 +1 @@
+import{default as t}from"../entry/_error.svelte.491781ac.js";export{t as component};
diff --git a/_app/immutable/chunks/1.e780d3fa.js b/_app/immutable/chunks/1.e780d3fa.js
deleted file mode 100644
index 1134aa3..0000000
--- a/_app/immutable/chunks/1.e780d3fa.js
+++ /dev/null
@@ -1 +0,0 @@
-import{default as t}from"../entry/_error.svelte.2317c20f.js";export{t as component};
diff --git a/_app/immutable/chunks/10.83e7b329.js b/_app/immutable/chunks/10.83e7b329.js
deleted file mode 100644
index b5c55a9..0000000
--- a/_app/immutable/chunks/10.83e7b329.js
+++ /dev/null
@@ -1 +0,0 @@
-import{default as t}from"../entry/(waves)-404-page.svelte.d095cb8f.js";export{t as component};
diff --git a/_app/immutable/chunks/10.b05caa6a.js b/_app/immutable/chunks/10.b05caa6a.js
new file mode 100644
index 0000000..a68699e
--- /dev/null
+++ b/_app/immutable/chunks/10.b05caa6a.js
@@ -0,0 +1 @@
+import{default as t}from"../entry/(waves)-404-page.svelte.36f41b4b.js";export{t as component};
diff --git a/_app/immutable/chunks/11.3ffd4d86.js b/_app/immutable/chunks/11.3ffd4d86.js
deleted file mode 100644
index de69b70..0000000
--- a/_app/immutable/chunks/11.3ffd4d86.js
+++ /dev/null
@@ -1 +0,0 @@
-import{default as t}from"../entry/(waves)-projects-page.svelte.10a8cb7a.js";export{t as component};
diff --git a/_app/immutable/chunks/11.e7616845.js b/_app/immutable/chunks/11.e7616845.js
new file mode 100644
index 0000000..d291b01
--- /dev/null
+++ b/_app/immutable/chunks/11.e7616845.js
@@ -0,0 +1 @@
+import{default as t}from"../entry/(waves)-projects-page.svelte.fb2960c1.js";export{t as component};
diff --git a/_app/immutable/chunks/2.643e0c8e.js b/_app/immutable/chunks/2.643e0c8e.js
new file mode 100644
index 0000000..bdadc9d
--- /dev/null
+++ b/_app/immutable/chunks/2.643e0c8e.js
@@ -0,0 +1 @@
+import{default as t}from"../entry/(blog-article)-layout.svelte.552a7089.js";export{t as component};
diff --git a/_app/immutable/chunks/2.b6cd7b50.js b/_app/immutable/chunks/2.b6cd7b50.js
deleted file mode 100644
index 5e5e15f..0000000
--- a/_app/immutable/chunks/2.b6cd7b50.js
+++ /dev/null
@@ -1 +0,0 @@
-import{default as t}from"../entry/(blog-article)-layout.svelte.88b989a1.js";export{t as component};
diff --git a/_app/immutable/chunks/3.306cd432.js b/_app/immutable/chunks/3.306cd432.js
new file mode 100644
index 0000000..f0d7a42
--- /dev/null
+++ b/_app/immutable/chunks/3.306cd432.js
@@ -0,0 +1 @@
+import{default as t}from"../entry/(waves)-layout.svelte.ae1baf34.js";export{t as component};
diff --git a/_app/immutable/chunks/3.74580eb5.js b/_app/immutable/chunks/3.74580eb5.js
deleted file mode 100644
index e0f585b..0000000
--- a/_app/immutable/chunks/3.74580eb5.js
+++ /dev/null
@@ -1 +0,0 @@
-import{default as t}from"../entry/(waves)-layout.svelte.df021916.js";export{t as component};
diff --git a/_app/immutable/chunks/4.bc993682.js b/_app/immutable/chunks/4.70707f12.js
similarity index 60%
rename from _app/immutable/chunks/4.bc993682.js
rename to _app/immutable/chunks/4.70707f12.js
index aaa13e6..cc46e53 100644
--- a/_app/immutable/chunks/4.bc993682.js
+++ b/_app/immutable/chunks/4.70707f12.js
@@ -1 +1 @@
-import{default as t}from"../entry/(blog-article)-blog-posts-page.md.f55da5c2.js";export{t as component};
+import{default as t}from"../entry/(blog-article)-blog-posts-page.md.f351eda0.js";export{t as component};
diff --git a/_app/immutable/chunks/5.8f6f8431.js b/_app/immutable/chunks/5.203ce0e8.js
similarity index 59%
rename from _app/immutable/chunks/5.8f6f8431.js
rename to _app/immutable/chunks/5.203ce0e8.js
index 5313def..97bae67 100644
--- a/_app/immutable/chunks/5.8f6f8431.js
+++ b/_app/immutable/chunks/5.203ce0e8.js
@@ -1 +1 @@
-import{default as t}from"../entry/(blog-article)-customization-page.md.8c33bc0d.js";export{t as component};
+import{default as t}from"../entry/(blog-article)-customization-page.md.3533e19a.js";export{t as component};
diff --git a/_app/immutable/chunks/6.8e9b0f95.js b/_app/immutable/chunks/6.8e9b0f95.js
deleted file mode 100644
index f5cbc5b..0000000
--- a/_app/immutable/chunks/6.8e9b0f95.js
+++ /dev/null
@@ -1 +0,0 @@
-import{default as t}from"../entry/(blog-article)-oink-page.md.729a927f.js";export{t as component};
diff --git a/_app/immutable/chunks/6.95213c83.js b/_app/immutable/chunks/6.95213c83.js
new file mode 100644
index 0000000..716605f
--- /dev/null
+++ b/_app/immutable/chunks/6.95213c83.js
@@ -0,0 +1 @@
+import{default as t}from"../entry/(blog-article)-oink-page.md.3d4e3640.js";export{t as component};
diff --git a/_app/immutable/chunks/7.3df68369.js b/_app/immutable/chunks/7.8a13cb78.js
similarity index 57%
rename from _app/immutable/chunks/7.3df68369.js
rename to _app/immutable/chunks/7.8a13cb78.js
index 2f7beb1..402bcde 100644
--- a/_app/immutable/chunks/7.3df68369.js
+++ b/_app/immutable/chunks/7.8a13cb78.js
@@ -1 +1 @@
-import{default as t}from"../entry/(blog-article)-project-structure-page.md.42e0c5de.js";export{t as component};
+import{default as t}from"../entry/(blog-article)-project-structure-page.md.a69c3ea5.js";export{t as component};
diff --git a/_app/immutable/chunks/8.bfd2ded3.js b/_app/immutable/chunks/8.73bf2ff5.js
similarity index 60%
rename from _app/immutable/chunks/8.bfd2ded3.js
rename to _app/immutable/chunks/8.73bf2ff5.js
index f23f1e8..4e79d48 100644
--- a/_app/immutable/chunks/8.bfd2ded3.js
+++ b/_app/immutable/chunks/8.73bf2ff5.js
@@ -1 +1 @@
-import{default as t}from"../entry/(blog-article)-roger-roger-page.md.467361a8.js";export{t as component};
+import{default as t}from"../entry/(blog-article)-roger-roger-page.md.b45ea0c5.js";export{t as component};
diff --git a/_app/immutable/chunks/9.63a6fb74.js b/_app/immutable/chunks/9.63a6fb74.js
new file mode 100644
index 0000000..1f0520e
--- /dev/null
+++ b/_app/immutable/chunks/9.63a6fb74.js
@@ -0,0 +1 @@
+import{default as t}from"../entry/(waves)-page.svelte.7e8e6d6a.js";export{t as component};
diff --git a/_app/immutable/chunks/9.eadbd323.js b/_app/immutable/chunks/9.eadbd323.js
deleted file mode 100644
index c9c1399..0000000
--- a/_app/immutable/chunks/9.eadbd323.js
+++ /dev/null
@@ -1 +0,0 @@
-import{default as t}from"../entry/(waves)-page.svelte.a78471c3.js";export{t as component};
diff --git a/_app/immutable/chunks/Button.835f3106.js b/_app/immutable/chunks/Button.835f3106.js
deleted file mode 100644
index b6c924f..0000000
--- a/_app/immutable/chunks/Button.835f3106.js
+++ /dev/null
@@ -1 +0,0 @@
-import{S as Q,i as T,s as R,e as N,b as z,g as h,d as g,h as v,N as P,O as A,P as C,Q as J,C as S,k as U,a as K,l as V,m as q,c as M,R as j,L as D,G as W,T as X,v as Y,f as Z,D as F,E as G,F as I,U as p,V as w,n as x}from"./index.889feda2.js";import{H as $}from"./regex.7dfa9b23.js";const ee=s=>({}),H=s=>({});function L(s){let l,a;const u=s[12].icon,e=S(u,s,s[11],H);return{c(){l=U("div"),e&&e.c(),this.h()},l(t){l=V(t,"DIV",{class:!0});var f=q(l);e&&e.l(f),f.forEach(v),this.h()},h(){x(l,"class","icon svelte-o0yy46")},m(t,f){z(t,l,f),e&&e.m(l,null),a=!0},p(t,f){e&&e.p&&(!a||f&2048)&&F(e,u,t,t[11],a?I(u,t[11],f,ee):G(t[11]),H)},i(t){a||(h(e,t),a=!0)},o(t){g(e,t),a=!1},d(t){t&&v(l),e&&e.d(t)}}}function b(s){let l,a,u,e,t,f,o=s[7].icon&&L(s);const d=s[12].default,_=S(d,s,s[11],null);let m=[s[4],{class:u=["button",`style--${s[1]}`,`size--${s[2]}`,`color--${s[0]}`,s[3]].join(" ")},{"data-sveltekit-preload-data":""},s[6]],c={};for(let i=0;i<m.length;i+=1)c=C(c,m[i]);return{c(){l=U(s[5]),o&&o.c(),a=K(),_&&_.c(),this.h()},l(i){l=V(i,(s[5]||"null").toUpperCase(),{class:!0,"data-sveltekit-preload-data":!0});var n=q(l);o&&o.l(n),a=M(n),_&&_.l(n),n.forEach(v),this.h()},h(){j(s[5])(l,c),D(l,"svelte-o0yy46",!0)},m(i,n){z(i,l,n),o&&o.m(l,null),W(l,a),_&&_.m(l,null),e=!0,t||(f=X(l,"click",s[13]),t=!0)},p(i,n){i[7].icon?o?(o.p(i,n),n&128&&h(o,1)):(o=L(i),o.c(),h(o,1),o.m(l,a)):o&&(Y(),g(o,1,1,()=>{o=null}),Z()),_&&_.p&&(!e||n&2048)&&F(_,d,i,i[11],e?I(d,i[11],n,null):G(i[11]),null),j(i[5])(l,c=p(m,[n&16&&i[4],(!e||n&15&&u!==(u=["button",`style--${i[1]}`,`size--${i[2]}`,`color--${i[0]}`,i[3]].join(" ")))&&{class:u},{"data-sveltekit-preload-data":""},n&64&&i[6]])),D(l,"svelte-o0yy46",!0)},i(i){e||(h(o),h(_,i),e=!0)},o(i){g(o),g(_,i),e=!1},d(i){i&&v(l),o&&o.d(),_&&_.d(i),t=!1,f()}}}function le(s){let l=s[5],a,u,e=s[5]&&b(s);return{c(){e&&e.c(),a=N()},l(t){e&&e.l(t),a=N()},m(t,f){e&&e.m(t,f),z(t,a,f),u=!0},p(t,[f]){t[5]?l?R(l,t[5])?(e.d(1),e=b(t),l=t[5],e.c(),e.m(a.parentNode,a)):e.p(t,f):(e=b(t),l=t[5],e.c(),e.m(a.parentNode,a)):l&&(e.d(1),e=null,l=t[5])},i(t){u||(h(e),u=!0)},o(t){g(e),u=!1},d(t){t&&v(a),e&&e.d(t)}}}function te(s,l,a){let u,e;const t=["color","style","size","href","additionalClass","target","rel"];let f=P(l,t),{$$slots:o={},$$scope:d}=l;const _=A(o);let{color:m="primary"}=l,{style:c="solid"}=l,{size:i="medium"}=l,{href:n=void 0}=l,{additionalClass:E=void 0}=l;const B=!!n&&$.test(n);let{target:y=B?"_blank":"_self"}=l,{rel:k=B?"noopener noreferrer":void 0}=l;function O(r){w.call(this,s,r)}return s.$$set=r=>{l=C(C({},l),J(r)),a(6,f=P(l,t)),"color"in r&&a(0,m=r.color),"style"in r&&a(1,c=r.style),"size"in r&&a(2,i=r.size),"href"in r&&a(8,n=r.href),"additionalClass"in r&&a(3,E=r.additionalClass),"target"in r&&a(9,y=r.target),"rel"in r&&a(10,k=r.rel),"$$scope"in r&&a(11,d=r.$$scope)},s.$$.update=()=>{s.$$.dirty&256&&a(5,u=n?"a":"button"),s.$$.dirty&1792&&a(4,e={href:n,target:y,rel:k})},[m,c,i,E,e,u,f,_,n,y,k,d,o,O]}class ie extends Q{constructor(l){super(),T(this,l,te,le,R,{color:0,style:1,size:2,href:8,additionalClass:3,target:9,rel:10})}}export{ie as B};
diff --git a/_app/immutable/chunks/Button.c88cc32a.js b/_app/immutable/chunks/Button.c88cc32a.js
new file mode 100644
index 0000000..290e59c
--- /dev/null
+++ b/_app/immutable/chunks/Button.c88cc32a.js
@@ -0,0 +1 @@
+import{S as W,i as X,s as R,e as j,b as z,g as h,d as g,h as v,R as D,T as Y,U as C,V as Z,C as S,k as U,a as A,l as V,m as q,c as J,W as H,L,G as K,X as M,v as O,f as Q,D as F,E as G,F as I,Y as p,Z as w,n as x}from"./index.963f39ba.js";import{H as $}from"./regex.7dfa9b23.js";const ee=s=>({}),N=s=>({});function P(s){let l,a;const u=s[12].icon,e=S(u,s,s[11],N);return{c(){l=U("div"),e&&e.c(),this.h()},l(t){l=V(t,"DIV",{class:!0});var f=q(l);e&&e.l(f),f.forEach(v),this.h()},h(){x(l,"class","icon svelte-o0yy46")},m(t,f){z(t,l,f),e&&e.m(l,null),a=!0},p(t,f){e&&e.p&&(!a||f&2048)&&F(e,u,t,t[11],a?I(u,t[11],f,ee):G(t[11]),N)},i(t){a||(h(e,t),a=!0)},o(t){g(e,t),a=!1},d(t){t&&v(l),e&&e.d(t)}}}function b(s){let l,a,u,e,t,f,o=s[7].icon&&P(s);const d=s[12].default,_=S(d,s,s[11],null);let m=[s[4],{class:u=["button",`style--${s[1]}`,`size--${s[2]}`,`color--${s[0]}`,s[3]].join(" ")},{"data-sveltekit-preload-data":""},s[6]],c={};for(let i=0;i<m.length;i+=1)c=C(c,m[i]);return{c(){l=U(s[5]),o&&o.c(),a=A(),_&&_.c(),this.h()},l(i){l=V(i,(s[5]||"null").toUpperCase(),{class:!0,"data-sveltekit-preload-data":!0});var n=q(l);o&&o.l(n),a=J(n),_&&_.l(n),n.forEach(v),this.h()},h(){H(s[5])(l,c),L(l,"svelte-o0yy46",!0)},m(i,n){z(i,l,n),o&&o.m(l,null),K(l,a),_&&_.m(l,null),e=!0,t||(f=M(l,"click",s[13]),t=!0)},p(i,n){i[7].icon?o?(o.p(i,n),n&128&&h(o,1)):(o=P(i),o.c(),h(o,1),o.m(l,a)):o&&(O(),g(o,1,1,()=>{o=null}),Q()),_&&_.p&&(!e||n&2048)&&F(_,d,i,i[11],e?I(d,i[11],n,null):G(i[11]),null),H(i[5])(l,c=p(m,[n&16&&i[4],(!e||n&15&&u!==(u=["button",`style--${i[1]}`,`size--${i[2]}`,`color--${i[0]}`,i[3]].join(" ")))&&{class:u},{"data-sveltekit-preload-data":""},n&64&&i[6]])),L(l,"svelte-o0yy46",!0)},i(i){e||(h(o),h(_,i),e=!0)},o(i){g(o),g(_,i),e=!1},d(i){i&&v(l),o&&o.d(),_&&_.d(i),t=!1,f()}}}function le(s){let l=s[5],a,u,e=s[5]&&b(s);return{c(){e&&e.c(),a=j()},l(t){e&&e.l(t),a=j()},m(t,f){e&&e.m(t,f),z(t,a,f),u=!0},p(t,[f]){t[5]?l?R(l,t[5])?(e.d(1),e=b(t),l=t[5],e.c(),e.m(a.parentNode,a)):e.p(t,f):(e=b(t),l=t[5],e.c(),e.m(a.parentNode,a)):l&&(e.d(1),e=null,l=t[5])},i(t){u||(h(e),u=!0)},o(t){g(e),u=!1},d(t){t&&v(a),e&&e.d(t)}}}function te(s,l,a){let u,e;const t=["color","style","size","href","additionalClass","target","rel"];let f=D(l,t),{$$slots:o={},$$scope:d}=l;const _=Y(o);let{color:m="primary"}=l,{style:c="solid"}=l,{size:i="medium"}=l,{href:n=void 0}=l,{additionalClass:E=void 0}=l;const B=!!n&&$.test(n);let{target:y=B?"_blank":"_self"}=l,{rel:k=B?"noopener noreferrer":void 0}=l;function T(r){w.call(this,s,r)}return s.$$set=r=>{l=C(C({},l),Z(r)),a(6,f=D(l,t)),"color"in r&&a(0,m=r.color),"style"in r&&a(1,c=r.style),"size"in r&&a(2,i=r.size),"href"in r&&a(8,n=r.href),"additionalClass"in r&&a(3,E=r.additionalClass),"target"in r&&a(9,y=r.target),"rel"in r&&a(10,k=r.rel),"$$scope"in r&&a(11,d=r.$$scope)},s.$$.update=()=>{s.$$.dirty&256&&a(5,u=n?"a":"button"),s.$$.dirty&1792&&a(4,e={href:n,target:y,rel:k})},[m,c,i,E,e,u,f,_,n,y,k,d,o,T]}class ie extends W{constructor(l){super(),X(this,l,te,le,R,{color:0,style:1,size:2,href:8,additionalClass:3,target:9,rel:10})}}export{ie as B};
diff --git a/_app/immutable/chunks/CodeBlock.280f02c3.js b/_app/immutable/chunks/CodeBlock.d6ac5a85.js
similarity index 96%
rename from _app/immutable/chunks/CodeBlock.280f02c3.js
rename to _app/immutable/chunks/CodeBlock.d6ac5a85.js
index c8d59e8..c4deff4 100644
--- a/_app/immutable/chunks/CodeBlock.280f02c3.js
+++ b/_app/immutable/chunks/CodeBlock.d6ac5a85.js
@@ -1 +1 @@
-import{S as V,i as q,s as S,C as F,k as c,a as k,l as m,m as h,c as b,h as r,n as g,L as p,b as v,G as _,D as G,E as L,F as j,g as w,d as z,q as D,r as E,u as I}from"./index.889feda2.js";/* empty css                                                */function B(o){let e,t;return{c(){e=c("div"),t=D(o[0]),this.h()},l(s){e=m(s,"DIV",{class:!0});var l=h(e);t=E(l,o[0]),l.forEach(r),this.h()},h(){g(e,"class","filename svelte-1pkpsrg")},m(s,l){v(s,e,l),_(e,t)},p(s,l){l&1&&I(t,s[0])},d(s){s&&r(e)}}}function C(o){let e,t;return{c(){e=c("div"),t=D(o[1]),this.h()},l(s){e=m(s,"DIV",{class:!0});var l=h(e);t=E(l,o[1]),l.forEach(r),this.h()},h(){g(e,"class","lang svelte-1pkpsrg")},m(s,l){v(s,e,l),_(e,t)},p(s,l){l&2&&I(t,s[1])},d(s){s&&r(e)}}}function A(o){let e,t,s,l,f=o[0]&&B(o),n=o[1]&&C(o);const d=o[4].default,i=F(d,o,o[3],null);return{c(){e=c("div"),f&&f.c(),t=k(),n&&n.c(),s=k(),i&&i.c(),this.h()},l(a){e=m(a,"DIV",{class:!0});var u=h(e);f&&f.l(u),t=b(u),n&&n.l(u),s=b(u),i&&i.l(u),u.forEach(r),this.h()},h(){g(e,"class","code-block svelte-1pkpsrg"),p(e,"full-bleed",o[2])},m(a,u){v(a,e,u),f&&f.m(e,null),_(e,t),n&&n.m(e,null),_(e,s),i&&i.m(e,null),l=!0},p(a,[u]){a[0]?f?f.p(a,u):(f=B(a),f.c(),f.m(e,t)):f&&(f.d(1),f=null),a[1]?n?n.p(a,u):(n=C(a),n.c(),n.m(e,s)):n&&(n.d(1),n=null),i&&i.p&&(!l||u&8)&&G(i,d,a,a[3],l?j(d,a[3],u,null):L(a[3]),null),(!l||u&4)&&p(e,"full-bleed",a[2])},i(a){l||(w(i,a),l=!0)},o(a){z(i,a),l=!1},d(a){a&&r(e),f&&f.d(),n&&n.d(),i&&i.d(a)}}}function H(o,e,t){let{$$slots:s={},$$scope:l}=e,{filename:f}=e,{lang:n}=e,{fullBleed:d=void 0}=e;return o.$$set=i=>{"filename"in i&&t(0,f=i.filename),"lang"in i&&t(1,n=i.lang),"fullBleed"in i&&t(2,d=i.fullBleed),"$$scope"in i&&t(3,l=i.$$scope)},[f,n,d,l,s]}class M extends V{constructor(e){super(),q(this,e,H,A,S,{filename:0,lang:1,fullBleed:2})}}export{M as C};
+import{S as V,i as q,s as S,C as F,k as c,a as k,l as m,m as h,c as b,h as r,n as g,L as p,b as v,G as _,D as G,E as L,F as j,g as w,d as z,q as D,r as E,u as I}from"./index.963f39ba.js";/* empty css                                                */function B(o){let e,t;return{c(){e=c("div"),t=D(o[0]),this.h()},l(s){e=m(s,"DIV",{class:!0});var l=h(e);t=E(l,o[0]),l.forEach(r),this.h()},h(){g(e,"class","filename svelte-1pkpsrg")},m(s,l){v(s,e,l),_(e,t)},p(s,l){l&1&&I(t,s[0])},d(s){s&&r(e)}}}function C(o){let e,t;return{c(){e=c("div"),t=D(o[1]),this.h()},l(s){e=m(s,"DIV",{class:!0});var l=h(e);t=E(l,o[1]),l.forEach(r),this.h()},h(){g(e,"class","lang svelte-1pkpsrg")},m(s,l){v(s,e,l),_(e,t)},p(s,l){l&2&&I(t,s[1])},d(s){s&&r(e)}}}function A(o){let e,t,s,l,f=o[0]&&B(o),n=o[1]&&C(o);const d=o[4].default,i=F(d,o,o[3],null);return{c(){e=c("div"),f&&f.c(),t=k(),n&&n.c(),s=k(),i&&i.c(),this.h()},l(a){e=m(a,"DIV",{class:!0});var u=h(e);f&&f.l(u),t=b(u),n&&n.l(u),s=b(u),i&&i.l(u),u.forEach(r),this.h()},h(){g(e,"class","code-block svelte-1pkpsrg"),p(e,"full-bleed",o[2])},m(a,u){v(a,e,u),f&&f.m(e,null),_(e,t),n&&n.m(e,null),_(e,s),i&&i.m(e,null),l=!0},p(a,[u]){a[0]?f?f.p(a,u):(f=B(a),f.c(),f.m(e,t)):f&&(f.d(1),f=null),a[1]?n?n.p(a,u):(n=C(a),n.c(),n.m(e,s)):n&&(n.d(1),n=null),i&&i.p&&(!l||u&8)&&G(i,d,a,a[3],l?j(d,a[3],u,null):L(a[3]),null),(!l||u&4)&&p(e,"full-bleed",a[2])},i(a){l||(w(i,a),l=!0)},o(a){z(i,a),l=!1},d(a){a&&r(e),f&&f.d(),n&&n.d(),i&&i.d(a)}}}function H(o,e,t){let{$$slots:s={},$$scope:l}=e,{filename:f}=e,{lang:n}=e,{fullBleed:d=void 0}=e;return o.$$set=i=>{"filename"in i&&t(0,f=i.filename),"lang"in i&&t(1,n=i.lang),"fullBleed"in i&&t(2,d=i.fullBleed),"$$scope"in i&&t(3,l=i.$$scope)},[f,n,d,l,s]}class M extends V{constructor(e){super(),q(this,e,H,A,S,{filename:0,lang:1,fullBleed:2})}}export{M as C};
diff --git a/_app/immutable/chunks/ContentSection.a48a4166.js b/_app/immutable/chunks/ContentSection.e661d46d.js
similarity index 73%
rename from _app/immutable/chunks/ContentSection.a48a4166.js
rename to _app/immutable/chunks/ContentSection.e661d46d.js
index c3c7f3b..9d00c2f 100644
--- a/_app/immutable/chunks/ContentSection.a48a4166.js
+++ b/_app/immutable/chunks/ContentSection.e661d46d.js
@@ -1 +1 @@
-import{S as U,i as A,s as O,C as j,k as p,l as I,m as E,h as d,n as v,b as D,D as B,E as S,F as H,g,d as b,e as X,N as Y,O as de,P as G,Q as me,a as V,c as z,R as Z,L as w,G as C,v as P,f as T,U as he,y as Q,z as J,A as K,B as M,q as N,r as q,u as L,H as ge}from"./index.889feda2.js";import{H as ve}from"./regex.7dfa9b23.js";import{I as ke}from"./Image.9fd0349e.js";function be(o){let e,i,t;const l=o[2].default,s=j(l,o,o[1],null);return{c(){e=p("div"),s&&s.c(),this.h()},l(n){e=I(n,"DIV",{class:!0});var f=E(e);s&&s.l(f),f.forEach(d),this.h()},h(){v(e,"class",i="tag "+o[0]+" svelte-12gzt4c")},m(n,f){D(n,e,f),s&&s.m(e,null),t=!0},p(n,[f]){s&&s.p&&(!t||f&2)&&B(s,l,n,n[1],t?H(l,n[1],f,null):S(n[1]),null),(!t||f&1&&i!==(i="tag "+n[0]+" svelte-12gzt4c"))&&v(e,"class",i)},i(n){t||(g(s,n),t=!0)},o(n){b(s,n),t=!1},d(n){n&&d(e),s&&s.d(n)}}}function pe(o,e,i){let{$$slots:t={},$$scope:l}=e,{color:s="primary"}=e;return o.$$set=n=>{"color"in n&&i(0,s=n.color),"$$scope"in n&&i(1,l=n.$$scope)},[s,l,t]}class Ie extends U{constructor(e){super(),A(this,e,pe,be,O,{color:0})}}const Ee=o=>({}),y=o=>({}),Ce=o=>({}),$=o=>({}),De=o=>({}),x=o=>({});function ee(o){let e,i;const t=o[9].image,l=j(t,o,o[8],x);return{c(){e=p("div"),l&&l.c(),this.h()},l(s){e=I(s,"DIV",{class:!0});var n=E(e);l&&l.l(n),n.forEach(d),this.h()},h(){v(e,"class","image svelte-1kz16cj")},m(s,n){D(s,e,n),l&&l.m(e,null),i=!0},p(s,n){l&&l.p&&(!i||n&256)&&B(l,t,s,s[8],i?H(t,s[8],n,De):S(s[8]),x)},i(s){i||(g(l,s),i=!0)},o(s){b(l,s),i=!1},d(s){s&&d(e),l&&l.d(s)}}}function te(o){let e,i;const t=o[9].footer,l=j(t,o,o[8],y);return{c(){e=p("div"),l&&l.c(),this.h()},l(s){e=I(s,"DIV",{class:!0});var n=E(e);l&&l.l(n),n.forEach(d),this.h()},h(){v(e,"class","footer")},m(s,n){D(s,e,n),l&&l.m(e,null),i=!0},p(s,n){l&&l.p&&(!i||n&256)&&B(l,t,s,s[8],i?H(t,s[8],n,Ee):S(s[8]),y)},i(s){i||(g(l,s),i=!0)},o(s){b(l,s),i=!1},d(s){s&&d(e),l&&l.d(s)}}}function F(o){let e,i,t,l,s,n,f,a=o[4].image&&ee(o);const c=o[9].content,r=j(c,o,o[8],$);let u=o[4].footer&&te(o),m=[{class:n="card "+o[0]},o[1],{"data-sveltekit-preload-data":""},o[3]],k={};for(let _=0;_<m.length;_+=1)k=G(k,m[_]);return{c(){e=p(o[2]),a&&a.c(),i=V(),t=p("div"),l=p("div"),r&&r.c(),s=V(),u&&u.c(),this.h()},l(_){e=I(_,(o[2]||"null").toUpperCase(),{class:!0,"data-sveltekit-preload-data":!0});var h=E(e);a&&a.l(h),i=z(h),t=I(h,"DIV",{class:!0});var R=E(t);l=I(R,"DIV",{class:!0});var W=E(l);r&&r.l(W),W.forEach(d),s=z(R),u&&u.l(R),R.forEach(d),h.forEach(d),this.h()},h(){v(l,"class","content svelte-1kz16cj"),v(t,"class","body svelte-1kz16cj"),Z(o[2])(e,k),w(e,"svelte-1kz16cj",!0)},m(_,h){D(_,e,h),a&&a.m(e,null),C(e,i),C(e,t),C(t,l),r&&r.m(l,null),C(t,s),u&&u.m(t,null),f=!0},p(_,h){_[4].image?a?(a.p(_,h),h&16&&g(a,1)):(a=ee(_),a.c(),g(a,1),a.m(e,i)):a&&(P(),b(a,1,1,()=>{a=null}),T()),r&&r.p&&(!f||h&256)&&B(r,c,_,_[8],f?H(c,_[8],h,Ce):S(_[8]),$),_[4].footer?u?(u.p(_,h),h&16&&g(u,1)):(u=te(_),u.c(),g(u,1),u.m(t,null)):u&&(P(),b(u,1,1,()=>{u=null}),T()),Z(_[2])(e,k=he(m,[(!f||h&1&&n!==(n="card "+_[0]))&&{class:n},h&2&&_[1],{"data-sveltekit-preload-data":""},h&8&&_[3]])),w(e,"svelte-1kz16cj",!0)},i(_){f||(g(a),g(r,_),g(u),f=!0)},o(_){b(a),b(r,_),b(u),f=!1},d(_){_&&d(e),a&&a.d(),r&&r.d(_),u&&u.d()}}}function Ve(o){let e=o[2],i,t,l=o[2]&&F(o);return{c(){l&&l.c(),i=X()},l(s){l&&l.l(s),i=X()},m(s,n){l&&l.m(s,n),D(s,i,n),t=!0},p(s,[n]){s[2]?e?O(e,s[2])?(l.d(1),l=F(s),e=s[2],l.c(),l.m(i.parentNode,i)):l.p(s,n):(l=F(s),e=s[2],l.c(),l.m(i.parentNode,i)):e&&(l.d(1),l=null,e=s[2])},i(s){t||(g(l),t=!0)},o(s){b(l),t=!1},d(s){s&&d(i),l&&l.d(s)}}}function ze(o,e,i){let t,l;const s=["additionalClass","href","target","rel"];let n=Y(e,s),{$$slots:f={},$$scope:a}=e;const c=de(f);let{additionalClass:r=void 0}=e,{href:u=void 0}=e;const m=!!u&&ve.test(u);let{target:k=m?"_blank":"_self"}=e,{rel:_=m?"noopener noreferrer":void 0}=e;return o.$$set=h=>{e=G(G({},e),me(h)),i(3,n=Y(e,s)),"additionalClass"in h&&i(0,r=h.additionalClass),"href"in h&&i(5,u=h.href),"target"in h&&i(6,k=h.target),"rel"in h&&i(7,_=h.rel),"$$scope"in h&&i(8,a=h.$$scope)},o.$$.update=()=>{o.$$.dirty&32&&i(2,t=u?"a":"article"),o.$$.dirty&224&&i(1,l={href:u,target:k,rel:_})},[r,l,t,n,c,u,k,_,a,f]}class Pe extends U{constructor(e){super(),A(this,e,ze,Ve,O,{additionalClass:0,href:5,target:6,rel:7})}}function le(o,e,i){const t=o.slice();return t[7]=e[i],t}function se(o){let e,i;return e=new ke({props:{src:o[1],alt:"Cover image of this blog post"}}),{c(){Q(e.$$.fragment)},l(t){J(e.$$.fragment,t)},m(t,l){K(e,t,l),i=!0},p(t,l){const s={};l&2&&(s.src=t[1]),e.$set(s)},i(t){i||(g(e.$$.fragment,t),i=!0)},o(t){b(e.$$.fragment,t),i=!1},d(t){M(e,t)}}}function Te(o){let e,i,t=o[1]&&se(o);return{c(){e=p("div"),t&&t.c(),this.h()},l(l){e=I(l,"DIV",{class:!0,slot:!0});var s=E(e);t&&t.l(s),s.forEach(d),this.h()},h(){v(e,"class","image"),v(e,"slot","image")},m(l,s){D(l,e,s),t&&t.m(e,null),i=!0},p(l,s){l[1]?t?(t.p(l,s),s&2&&g(t,1)):(t=se(l),t.c(),g(t,1),t.m(e,null)):t&&(P(),b(t,1,1,()=>{t=null}),T())},i(l){i||(g(t),i=!0)},o(l){b(t),i=!1},d(l){l&&d(e),t&&t.d()}}}function ie(o){let e,i;return{c(){e=p("div"),i=N(o[5]),this.h()},l(t){e=I(t,"DIV",{class:!0});var l=E(e);i=q(l,o[5]),l.forEach(d),this.h()},h(){v(e,"class","note svelte-1okvg2o")},m(t,l){D(t,e,l),C(e,i)},p(t,l){l&32&&L(i,t[5])},d(t){t&&d(e)}}}function ne(o){let e,i;return{c(){e=p("p"),i=N(o[2]),this.h()},l(t){e=I(t,"P",{class:!0});var l=E(e);i=q(l,o[2]),l.forEach(d),this.h()},h(){v(e,"class","text svelte-1okvg2o")},m(t,l){D(t,e,l),C(e,i)},p(t,l){l&4&&L(i,t[2])},d(t){t&&d(e)}}}function je(o){let e,i,t,l,s,n=o[5]&&ie(o),f=o[2]&&ne(o);return{c(){e=p("div"),i=p("p"),t=N(o[0]),l=V(),n&&n.c(),s=V(),f&&f.c(),this.h()},l(a){e=I(a,"DIV",{class:!0,slot:!0});var c=E(e);i=I(c,"P",{class:!0});var r=E(i);t=q(r,o[0]),r.forEach(d),l=z(c),n&&n.l(c),s=z(c),f&&f.l(c),c.forEach(d),this.h()},h(){v(i,"class","title svelte-1okvg2o"),v(e,"class","content svelte-1okvg2o"),v(e,"slot","content")},m(a,c){D(a,e,c),C(e,i),C(i,t),C(e,l),n&&n.m(e,null),C(e,s),f&&f.m(e,null)},p(a,c){c&1&&L(t,a[0]),a[5]?n?n.p(a,c):(n=ie(a),n.c(),n.m(e,s)):n&&(n.d(1),n=null),a[2]?f?f.p(a,c):(f=ne(a),f.c(),f.m(e,null)):f&&(f.d(1),f=null)},d(a){a&&d(e),n&&n.d(),f&&f.d()}}}function oe(o){let e,i,t=o[4].slice(0,2),l=[];for(let n=0;n<t.length;n+=1)l[n]=ae(le(o,t,n));const s=n=>b(l[n],1,1,()=>{l[n]=null});return{c(){e=p("div");for(let n=0;n<l.length;n+=1)l[n].c();this.h()},l(n){e=I(n,"DIV",{class:!0});var f=E(e);for(let a=0;a<l.length;a+=1)l[a].l(f);f.forEach(d),this.h()},h(){v(e,"class","tags svelte-1okvg2o")},m(n,f){D(n,e,f);for(let a=0;a<l.length;a+=1)l[a]&&l[a].m(e,null);i=!0},p(n,f){if(f&16){t=n[4].slice(0,2);let a;for(a=0;a<t.length;a+=1){const c=le(n,t,a);l[a]?(l[a].p(c,f),g(l[a],1)):(l[a]=ae(c),l[a].c(),g(l[a],1),l[a].m(e,null))}for(P(),a=t.length;a<l.length;a+=1)s(a);T()}},i(n){if(!i){for(let f=0;f<t.length;f+=1)g(l[f]);i=!0}},o(n){l=l.filter(Boolean);for(let f=0;f<l.length;f+=1)b(l[f]);i=!1},d(n){n&&d(e),ge(l,n)}}}function Be(o){let e=o[7]+"",i;return{c(){i=N(e)},l(t){i=q(t,e)},m(t,l){D(t,i,l)},p(t,l){l&16&&e!==(e=t[7]+"")&&L(i,e)},d(t){t&&d(i)}}}function ae(o){let e,i;return e=new Ie({props:{$$slots:{default:[Be]},$$scope:{ctx:o}}}),{c(){Q(e.$$.fragment)},l(t){J(e.$$.fragment,t)},m(t,l){K(e,t,l),i=!0},p(t,l){const s={};l&1040&&(s.$$scope={dirty:l,ctx:t}),e.$set(s)},i(t){i||(g(e.$$.fragment,t),i=!0)},o(t){b(e.$$.fragment,t),i=!1},d(t){M(e,t)}}}function Se(o){var l;let e,i,t=((l=o[4])==null?void 0:l.length)&&oe(o);return{c(){e=p("div"),t&&t.c(),this.h()},l(s){e=I(s,"DIV",{class:!0,slot:!0});var n=E(e);t&&t.l(n),n.forEach(d),this.h()},h(){v(e,"class","footer svelte-1okvg2o"),v(e,"slot","footer")},m(s,n){D(s,e,n),t&&t.m(e,null),i=!0},p(s,n){var f;(f=s[4])!=null&&f.length?t?(t.p(s,n),n&16&&g(t,1)):(t=oe(s),t.c(),g(t,1),t.m(e,null)):t&&(P(),b(t,1,1,()=>{t=null}),T())},i(s){i||(g(t),i=!0)},o(s){b(t),i=!1},d(s){s&&d(e),t&&t.d()}}}function He(o){let e,i;return e=new Pe({props:{href:"/"+o[3],target:"_self",additionalClass:"blog-post-card "+(!o[6]||!o[1]?"no-image":""),$$slots:{footer:[Se],content:[je],image:[Te]},$$scope:{ctx:o}}}),{c(){Q(e.$$.fragment)},l(t){J(e.$$.fragment,t)},m(t,l){K(e,t,l),i=!0},p(t,[l]){const s={};l&8&&(s.href="/"+t[3]),l&66&&(s.additionalClass="blog-post-card "+(!t[6]||!t[1]?"no-image":"")),l&1079&&(s.$$scope={dirty:l,ctx:t}),e.$set(s)},i(t){i||(g(e.$$.fragment,t),i=!0)},o(t){b(e.$$.fragment,t),i=!1},d(t){M(e,t)}}}function Ne(o,e,i){let{title:t}=e,{coverImage:l=void 0}=e,{excerpt:s}=e,{slug:n}=e,{tags:f}=e,{readingTime:a=void 0}=e,{showImage:c=!0}=e;return o.$$set=r=>{"title"in r&&i(0,t=r.title),"coverImage"in r&&i(1,l=r.coverImage),"excerpt"in r&&i(2,s=r.excerpt),"slug"in r&&i(3,n=r.slug),"tags"in r&&i(4,f=r.tags),"readingTime"in r&&i(5,a=r.readingTime),"showImage"in r&&i(6,c=r.showImage)},[t,l,s,n,f,a,c]}class Fe extends U{constructor(e){super(),A(this,e,Ne,He,O,{title:0,coverImage:1,excerpt:2,slug:3,tags:4,readingTime:5,showImage:6})}}const qe=o=>({}),fe=o=>({});function re(o){let e,i,t=o[1]&&ce(o),l=o[2]&&ue(o);return{c(){e=p("div"),t&&t.c(),i=V(),l&&l.c(),this.h()},l(s){e=I(s,"DIV",{class:!0});var n=E(e);t&&t.l(n),i=z(n),l&&l.l(n),n.forEach(d),this.h()},h(){v(e,"class","text svelte-emrvls")},m(s,n){D(s,e,n),t&&t.m(e,null),C(e,i),l&&l.m(e,null)},p(s,n){s[1]?t?t.p(s,n):(t=ce(s),t.c(),t.m(e,i)):t&&(t.d(1),t=null),s[2]?l?l.p(s,n):(l=ue(s),l.c(),l.m(e,null)):l&&(l.d(1),l=null)},d(s){s&&d(e),t&&t.d(),l&&l.d()}}}function ce(o){let e,i;return{c(){e=p("h2"),i=N(o[1])},l(t){e=I(t,"H2",{});var l=E(e);i=q(l,o[1]),l.forEach(d)},m(t,l){D(t,e,l),C(e,i)},p(t,l){l&2&&L(i,t[1])},d(t){t&&d(e)}}}function ue(o){let e,i;return{c(){e=p("p"),i=N(o[2])},l(t){e=I(t,"P",{});var l=E(e);i=q(l,o[2]),l.forEach(d)},m(t,l){D(t,e,l),C(e,i)},p(t,l){l&4&&L(i,t[2])},d(t){t&&d(e)}}}function _e(o){let e,i;const t=o[6].button,l=j(t,o,o[5],fe);return{c(){e=p("div"),l&&l.c(),this.h()},l(s){e=I(s,"DIV",{class:!0});var n=E(e);l&&l.l(n),n.forEach(d),this.h()},h(){v(e,"class","button")},m(s,n){D(s,e,n),l&&l.m(e,null),i=!0},p(s,n){l&&l.p&&(!i||n&32)&&B(l,t,s,s[5],i?H(t,s[5],n,qe):S(s[5]),fe)},i(s){i||(g(l,s),i=!0)},o(s){b(l,s),i=!1},d(s){s&&d(e),l&&l.d(s)}}}function Le(o){let e,i,t,l,s,n,f,a=(o[1]||o[2])&&re(o),c=o[4].button&&_e(o);const r=o[6].default,u=j(r,o,o[5],null);return{c(){e=p("section"),i=p("div"),a&&a.c(),t=V(),c&&c.c(),l=V(),s=p("div"),u&&u.c(),this.h()},l(m){e=I(m,"SECTION",{id:!0,class:!0});var k=E(e);i=I(k,"DIV",{class:!0});var _=E(i);a&&a.l(_),t=z(_),c&&c.l(_),_.forEach(d),l=z(k),s=I(k,"DIV",{class:!0});var h=E(s);u&&u.l(h),h.forEach(d),k.forEach(d),this.h()},h(){v(i,"class","title-area svelte-emrvls"),v(s,"class","content-area svelte-emrvls"),v(e,"id",o[0]),v(e,"class",n="content-section "+o[3]+" svelte-emrvls")},m(m,k){D(m,e,k),C(e,i),a&&a.m(i,null),C(i,t),c&&c.m(i,null),C(e,l),C(e,s),u&&u.m(s,null),f=!0},p(m,[k]){m[1]||m[2]?a?a.p(m,k):(a=re(m),a.c(),a.m(i,t)):a&&(a.d(1),a=null),m[4].button?c?(c.p(m,k),k&16&&g(c,1)):(c=_e(m),c.c(),g(c,1),c.m(i,null)):c&&(P(),b(c,1,1,()=>{c=null}),T()),u&&u.p&&(!f||k&32)&&B(u,r,m,m[5],f?H(r,m[5],k,null):S(m[5]),null),(!f||k&1)&&v(e,"id",m[0]),(!f||k&8&&n!==(n="content-section "+m[3]+" svelte-emrvls"))&&v(e,"class",n)},i(m){f||(g(c),g(u,m),f=!0)},o(m){b(c),b(u,m),f=!1},d(m){m&&d(e),a&&a.d(),c&&c.d(),u&&u.d(m)}}}function Oe(o,e,i){let{$$slots:t={},$$scope:l}=e;const s=de(t);let{id:n=void 0}=e,{title:f=void 0}=e,{description:a=void 0}=e,{align:c="top"}=e;return o.$$set=r=>{"id"in r&&i(0,n=r.id),"title"in r&&i(1,f=r.title),"description"in r&&i(2,a=r.description),"align"in r&&i(3,c=r.align),"$$scope"in r&&i(5,l=r.$$scope)},[n,f,a,c,s,l,t]}class Ge extends U{constructor(e){super(),A(this,e,Oe,Le,O,{id:0,title:1,description:2,align:3})}}export{Fe as B,Ge as C,Ie as T};
+import{S as A,i as F,s as R,C as j,k as p,l as I,m as E,h as d,n as v,b as D,D as B,E as S,F as H,g,d as b,e as Q,R as X,T as de,U as O,V as me,a as V,c as T,W as Z,L as w,G as C,v as z,f as P,Y as he,y as W,z as Y,A as J,B as K,q as N,r as q,u as L,H as ge}from"./index.963f39ba.js";import{H as ve}from"./regex.7dfa9b23.js";import{I as ke}from"./Image.a2141873.js";function be(o){let e,i,t;const l=o[2].default,s=j(l,o,o[1],null);return{c(){e=p("div"),s&&s.c(),this.h()},l(n){e=I(n,"DIV",{class:!0});var f=E(e);s&&s.l(f),f.forEach(d),this.h()},h(){v(e,"class",i="tag "+o[0]+" svelte-12gzt4c")},m(n,f){D(n,e,f),s&&s.m(e,null),t=!0},p(n,[f]){s&&s.p&&(!t||f&2)&&B(s,l,n,n[1],t?H(l,n[1],f,null):S(n[1]),null),(!t||f&1&&i!==(i="tag "+n[0]+" svelte-12gzt4c"))&&v(e,"class",i)},i(n){t||(g(s,n),t=!0)},o(n){b(s,n),t=!1},d(n){n&&d(e),s&&s.d(n)}}}function pe(o,e,i){let{$$slots:t={},$$scope:l}=e,{color:s="primary"}=e;return o.$$set=n=>{"color"in n&&i(0,s=n.color),"$$scope"in n&&i(1,l=n.$$scope)},[s,l,t]}class Ie extends A{constructor(e){super(),F(this,e,pe,be,R,{color:0})}}const Ee=o=>({}),y=o=>({}),Ce=o=>({}),$=o=>({}),De=o=>({}),x=o=>({});function ee(o){let e,i;const t=o[9].image,l=j(t,o,o[8],x);return{c(){e=p("div"),l&&l.c(),this.h()},l(s){e=I(s,"DIV",{class:!0});var n=E(e);l&&l.l(n),n.forEach(d),this.h()},h(){v(e,"class","image svelte-1kz16cj")},m(s,n){D(s,e,n),l&&l.m(e,null),i=!0},p(s,n){l&&l.p&&(!i||n&256)&&B(l,t,s,s[8],i?H(t,s[8],n,De):S(s[8]),x)},i(s){i||(g(l,s),i=!0)},o(s){b(l,s),i=!1},d(s){s&&d(e),l&&l.d(s)}}}function te(o){let e,i;const t=o[9].footer,l=j(t,o,o[8],y);return{c(){e=p("div"),l&&l.c(),this.h()},l(s){e=I(s,"DIV",{class:!0});var n=E(e);l&&l.l(n),n.forEach(d),this.h()},h(){v(e,"class","footer")},m(s,n){D(s,e,n),l&&l.m(e,null),i=!0},p(s,n){l&&l.p&&(!i||n&256)&&B(l,t,s,s[8],i?H(t,s[8],n,Ee):S(s[8]),y)},i(s){i||(g(l,s),i=!0)},o(s){b(l,s),i=!1},d(s){s&&d(e),l&&l.d(s)}}}function G(o){let e,i,t,l,s,n,f,a=o[4].image&&ee(o);const c=o[9].content,r=j(c,o,o[8],$);let u=o[4].footer&&te(o),m=[{class:n="card "+o[0]},o[1],{"data-sveltekit-preload-data":""},o[3]],k={};for(let _=0;_<m.length;_+=1)k=O(k,m[_]);return{c(){e=p(o[2]),a&&a.c(),i=V(),t=p("div"),l=p("div"),r&&r.c(),s=V(),u&&u.c(),this.h()},l(_){e=I(_,(o[2]||"null").toUpperCase(),{class:!0,"data-sveltekit-preload-data":!0});var h=E(e);a&&a.l(h),i=T(h),t=I(h,"DIV",{class:!0});var U=E(t);l=I(U,"DIV",{class:!0});var M=E(l);r&&r.l(M),M.forEach(d),s=T(U),u&&u.l(U),U.forEach(d),h.forEach(d),this.h()},h(){v(l,"class","content svelte-1kz16cj"),v(t,"class","body svelte-1kz16cj"),Z(o[2])(e,k),w(e,"svelte-1kz16cj",!0)},m(_,h){D(_,e,h),a&&a.m(e,null),C(e,i),C(e,t),C(t,l),r&&r.m(l,null),C(t,s),u&&u.m(t,null),f=!0},p(_,h){_[4].image?a?(a.p(_,h),h&16&&g(a,1)):(a=ee(_),a.c(),g(a,1),a.m(e,i)):a&&(z(),b(a,1,1,()=>{a=null}),P()),r&&r.p&&(!f||h&256)&&B(r,c,_,_[8],f?H(c,_[8],h,Ce):S(_[8]),$),_[4].footer?u?(u.p(_,h),h&16&&g(u,1)):(u=te(_),u.c(),g(u,1),u.m(t,null)):u&&(z(),b(u,1,1,()=>{u=null}),P()),Z(_[2])(e,k=he(m,[(!f||h&1&&n!==(n="card "+_[0]))&&{class:n},h&2&&_[1],{"data-sveltekit-preload-data":""},h&8&&_[3]])),w(e,"svelte-1kz16cj",!0)},i(_){f||(g(a),g(r,_),g(u),f=!0)},o(_){b(a),b(r,_),b(u),f=!1},d(_){_&&d(e),a&&a.d(),r&&r.d(_),u&&u.d()}}}function Ve(o){let e=o[2],i,t,l=o[2]&&G(o);return{c(){l&&l.c(),i=Q()},l(s){l&&l.l(s),i=Q()},m(s,n){l&&l.m(s,n),D(s,i,n),t=!0},p(s,[n]){s[2]?e?R(e,s[2])?(l.d(1),l=G(s),e=s[2],l.c(),l.m(i.parentNode,i)):l.p(s,n):(l=G(s),e=s[2],l.c(),l.m(i.parentNode,i)):e&&(l.d(1),l=null,e=s[2])},i(s){t||(g(l),t=!0)},o(s){b(l),t=!1},d(s){s&&d(i),l&&l.d(s)}}}function Te(o,e,i){let t,l;const s=["additionalClass","href","target","rel"];let n=X(e,s),{$$slots:f={},$$scope:a}=e;const c=de(f);let{additionalClass:r=void 0}=e,{href:u=void 0}=e;const m=!!u&&ve.test(u);let{target:k=m?"_blank":"_self"}=e,{rel:_=m?"noopener noreferrer":void 0}=e;return o.$$set=h=>{e=O(O({},e),me(h)),i(3,n=X(e,s)),"additionalClass"in h&&i(0,r=h.additionalClass),"href"in h&&i(5,u=h.href),"target"in h&&i(6,k=h.target),"rel"in h&&i(7,_=h.rel),"$$scope"in h&&i(8,a=h.$$scope)},o.$$.update=()=>{o.$$.dirty&32&&i(2,t=u?"a":"article"),o.$$.dirty&224&&i(1,l={href:u,target:k,rel:_})},[r,l,t,n,c,u,k,_,a,f]}class ze extends A{constructor(e){super(),F(this,e,Te,Ve,R,{additionalClass:0,href:5,target:6,rel:7})}}function le(o,e,i){const t=o.slice();return t[7]=e[i],t}function se(o){let e,i;return e=new ke({props:{src:o[1],alt:"Cover image of this blog post"}}),{c(){W(e.$$.fragment)},l(t){Y(e.$$.fragment,t)},m(t,l){J(e,t,l),i=!0},p(t,l){const s={};l&2&&(s.src=t[1]),e.$set(s)},i(t){i||(g(e.$$.fragment,t),i=!0)},o(t){b(e.$$.fragment,t),i=!1},d(t){K(e,t)}}}function Pe(o){let e,i,t=o[1]&&se(o);return{c(){e=p("div"),t&&t.c(),this.h()},l(l){e=I(l,"DIV",{class:!0,slot:!0});var s=E(e);t&&t.l(s),s.forEach(d),this.h()},h(){v(e,"class","image"),v(e,"slot","image")},m(l,s){D(l,e,s),t&&t.m(e,null),i=!0},p(l,s){l[1]?t?(t.p(l,s),s&2&&g(t,1)):(t=se(l),t.c(),g(t,1),t.m(e,null)):t&&(z(),b(t,1,1,()=>{t=null}),P())},i(l){i||(g(t),i=!0)},o(l){b(t),i=!1},d(l){l&&d(e),t&&t.d()}}}function ie(o){let e,i;return{c(){e=p("div"),i=N(o[5]),this.h()},l(t){e=I(t,"DIV",{class:!0});var l=E(e);i=q(l,o[5]),l.forEach(d),this.h()},h(){v(e,"class","note svelte-1okvg2o")},m(t,l){D(t,e,l),C(e,i)},p(t,l){l&32&&L(i,t[5])},d(t){t&&d(e)}}}function ne(o){let e,i;return{c(){e=p("p"),i=N(o[2]),this.h()},l(t){e=I(t,"P",{class:!0});var l=E(e);i=q(l,o[2]),l.forEach(d),this.h()},h(){v(e,"class","text svelte-1okvg2o")},m(t,l){D(t,e,l),C(e,i)},p(t,l){l&4&&L(i,t[2])},d(t){t&&d(e)}}}function je(o){let e,i,t,l,s,n=o[5]&&ie(o),f=o[2]&&ne(o);return{c(){e=p("div"),i=p("p"),t=N(o[0]),l=V(),n&&n.c(),s=V(),f&&f.c(),this.h()},l(a){e=I(a,"DIV",{class:!0,slot:!0});var c=E(e);i=I(c,"P",{class:!0});var r=E(i);t=q(r,o[0]),r.forEach(d),l=T(c),n&&n.l(c),s=T(c),f&&f.l(c),c.forEach(d),this.h()},h(){v(i,"class","title svelte-1okvg2o"),v(e,"class","content svelte-1okvg2o"),v(e,"slot","content")},m(a,c){D(a,e,c),C(e,i),C(i,t),C(e,l),n&&n.m(e,null),C(e,s),f&&f.m(e,null)},p(a,c){c&1&&L(t,a[0]),a[5]?n?n.p(a,c):(n=ie(a),n.c(),n.m(e,s)):n&&(n.d(1),n=null),a[2]?f?f.p(a,c):(f=ne(a),f.c(),f.m(e,null)):f&&(f.d(1),f=null)},d(a){a&&d(e),n&&n.d(),f&&f.d()}}}function oe(o){let e,i,t=o[4].slice(0,2),l=[];for(let n=0;n<t.length;n+=1)l[n]=ae(le(o,t,n));const s=n=>b(l[n],1,1,()=>{l[n]=null});return{c(){e=p("div");for(let n=0;n<l.length;n+=1)l[n].c();this.h()},l(n){e=I(n,"DIV",{class:!0});var f=E(e);for(let a=0;a<l.length;a+=1)l[a].l(f);f.forEach(d),this.h()},h(){v(e,"class","tags svelte-1okvg2o")},m(n,f){D(n,e,f);for(let a=0;a<l.length;a+=1)l[a]&&l[a].m(e,null);i=!0},p(n,f){if(f&16){t=n[4].slice(0,2);let a;for(a=0;a<t.length;a+=1){const c=le(n,t,a);l[a]?(l[a].p(c,f),g(l[a],1)):(l[a]=ae(c),l[a].c(),g(l[a],1),l[a].m(e,null))}for(z(),a=t.length;a<l.length;a+=1)s(a);P()}},i(n){if(!i){for(let f=0;f<t.length;f+=1)g(l[f]);i=!0}},o(n){l=l.filter(Boolean);for(let f=0;f<l.length;f+=1)b(l[f]);i=!1},d(n){n&&d(e),ge(l,n)}}}function Be(o){let e=o[7]+"",i;return{c(){i=N(e)},l(t){i=q(t,e)},m(t,l){D(t,i,l)},p(t,l){l&16&&e!==(e=t[7]+"")&&L(i,e)},d(t){t&&d(i)}}}function ae(o){let e,i;return e=new Ie({props:{$$slots:{default:[Be]},$$scope:{ctx:o}}}),{c(){W(e.$$.fragment)},l(t){Y(e.$$.fragment,t)},m(t,l){J(e,t,l),i=!0},p(t,l){const s={};l&1040&&(s.$$scope={dirty:l,ctx:t}),e.$set(s)},i(t){i||(g(e.$$.fragment,t),i=!0)},o(t){b(e.$$.fragment,t),i=!1},d(t){K(e,t)}}}function Se(o){var l;let e,i,t=((l=o[4])==null?void 0:l.length)&&oe(o);return{c(){e=p("div"),t&&t.c(),this.h()},l(s){e=I(s,"DIV",{class:!0,slot:!0});var n=E(e);t&&t.l(n),n.forEach(d),this.h()},h(){v(e,"class","footer svelte-1okvg2o"),v(e,"slot","footer")},m(s,n){D(s,e,n),t&&t.m(e,null),i=!0},p(s,n){var f;(f=s[4])!=null&&f.length?t?(t.p(s,n),n&16&&g(t,1)):(t=oe(s),t.c(),g(t,1),t.m(e,null)):t&&(z(),b(t,1,1,()=>{t=null}),P())},i(s){i||(g(t),i=!0)},o(s){b(t),i=!1},d(s){s&&d(e),t&&t.d()}}}function He(o){let e,i;return e=new ze({props:{href:"/"+o[3],target:"_self",additionalClass:"blog-post-card "+(!o[6]||!o[1]?"no-image":""),$$slots:{footer:[Se],content:[je],image:[Pe]},$$scope:{ctx:o}}}),{c(){W(e.$$.fragment)},l(t){Y(e.$$.fragment,t)},m(t,l){J(e,t,l),i=!0},p(t,[l]){const s={};l&8&&(s.href="/"+t[3]),l&66&&(s.additionalClass="blog-post-card "+(!t[6]||!t[1]?"no-image":"")),l&1079&&(s.$$scope={dirty:l,ctx:t}),e.$set(s)},i(t){i||(g(e.$$.fragment,t),i=!0)},o(t){b(e.$$.fragment,t),i=!1},d(t){K(e,t)}}}function Ne(o,e,i){let{title:t}=e,{coverImage:l=void 0}=e,{excerpt:s}=e,{slug:n}=e,{tags:f}=e,{readingTime:a=void 0}=e,{showImage:c=!0}=e;return o.$$set=r=>{"title"in r&&i(0,t=r.title),"coverImage"in r&&i(1,l=r.coverImage),"excerpt"in r&&i(2,s=r.excerpt),"slug"in r&&i(3,n=r.slug),"tags"in r&&i(4,f=r.tags),"readingTime"in r&&i(5,a=r.readingTime),"showImage"in r&&i(6,c=r.showImage)},[t,l,s,n,f,a,c]}class Ge extends A{constructor(e){super(),F(this,e,Ne,He,R,{title:0,coverImage:1,excerpt:2,slug:3,tags:4,readingTime:5,showImage:6})}}const qe=o=>({}),fe=o=>({});function re(o){let e,i,t=o[1]&&ce(o),l=o[2]&&ue(o);return{c(){e=p("div"),t&&t.c(),i=V(),l&&l.c(),this.h()},l(s){e=I(s,"DIV",{class:!0});var n=E(e);t&&t.l(n),i=T(n),l&&l.l(n),n.forEach(d),this.h()},h(){v(e,"class","text svelte-emrvls")},m(s,n){D(s,e,n),t&&t.m(e,null),C(e,i),l&&l.m(e,null)},p(s,n){s[1]?t?t.p(s,n):(t=ce(s),t.c(),t.m(e,i)):t&&(t.d(1),t=null),s[2]?l?l.p(s,n):(l=ue(s),l.c(),l.m(e,null)):l&&(l.d(1),l=null)},d(s){s&&d(e),t&&t.d(),l&&l.d()}}}function ce(o){let e,i;return{c(){e=p("h2"),i=N(o[1])},l(t){e=I(t,"H2",{});var l=E(e);i=q(l,o[1]),l.forEach(d)},m(t,l){D(t,e,l),C(e,i)},p(t,l){l&2&&L(i,t[1])},d(t){t&&d(e)}}}function ue(o){let e,i;return{c(){e=p("p"),i=N(o[2])},l(t){e=I(t,"P",{});var l=E(e);i=q(l,o[2]),l.forEach(d)},m(t,l){D(t,e,l),C(e,i)},p(t,l){l&4&&L(i,t[2])},d(t){t&&d(e)}}}function _e(o){let e,i;const t=o[6].button,l=j(t,o,o[5],fe);return{c(){e=p("div"),l&&l.c(),this.h()},l(s){e=I(s,"DIV",{class:!0});var n=E(e);l&&l.l(n),n.forEach(d),this.h()},h(){v(e,"class","button")},m(s,n){D(s,e,n),l&&l.m(e,null),i=!0},p(s,n){l&&l.p&&(!i||n&32)&&B(l,t,s,s[5],i?H(t,s[5],n,qe):S(s[5]),fe)},i(s){i||(g(l,s),i=!0)},o(s){b(l,s),i=!1},d(s){s&&d(e),l&&l.d(s)}}}function Le(o){let e,i,t,l,s,n,f,a=(o[1]||o[2])&&re(o),c=o[4].button&&_e(o);const r=o[6].default,u=j(r,o,o[5],null);return{c(){e=p("section"),i=p("div"),a&&a.c(),t=V(),c&&c.c(),l=V(),s=p("div"),u&&u.c(),this.h()},l(m){e=I(m,"SECTION",{id:!0,class:!0});var k=E(e);i=I(k,"DIV",{class:!0});var _=E(i);a&&a.l(_),t=T(_),c&&c.l(_),_.forEach(d),l=T(k),s=I(k,"DIV",{class:!0});var h=E(s);u&&u.l(h),h.forEach(d),k.forEach(d),this.h()},h(){v(i,"class","title-area svelte-emrvls"),v(s,"class","content-area svelte-emrvls"),v(e,"id",o[0]),v(e,"class",n="content-section "+o[3]+" svelte-emrvls")},m(m,k){D(m,e,k),C(e,i),a&&a.m(i,null),C(i,t),c&&c.m(i,null),C(e,l),C(e,s),u&&u.m(s,null),f=!0},p(m,[k]){m[1]||m[2]?a?a.p(m,k):(a=re(m),a.c(),a.m(i,t)):a&&(a.d(1),a=null),m[4].button?c?(c.p(m,k),k&16&&g(c,1)):(c=_e(m),c.c(),g(c,1),c.m(i,null)):c&&(z(),b(c,1,1,()=>{c=null}),P()),u&&u.p&&(!f||k&32)&&B(u,r,m,m[5],f?H(r,m[5],k,null):S(m[5]),null),(!f||k&1)&&v(e,"id",m[0]),(!f||k&8&&n!==(n="content-section "+m[3]+" svelte-emrvls"))&&v(e,"class",n)},i(m){f||(g(c),g(u,m),f=!0)},o(m){b(c),b(u,m),f=!1},d(m){m&&d(e),a&&a.d(),c&&c.d(),u&&u.d(m)}}}function Re(o,e,i){let{$$slots:t={},$$scope:l}=e;const s=de(t);let{id:n=void 0}=e,{title:f=void 0}=e,{description:a=void 0}=e,{align:c="top"}=e;return o.$$set=r=>{"id"in r&&i(0,n=r.id),"title"in r&&i(1,f=r.title),"description"in r&&i(2,a=r.description),"align"in r&&i(3,c=r.align),"$$scope"in r&&i(5,l=r.$$scope)},[n,f,a,c,s,l,t]}class Oe extends A{constructor(e){super(),F(this,e,Re,Le,R,{id:0,title:1,description:2,align:3})}}export{Ge as B,Oe as C,Ie as T};
diff --git a/_app/immutable/chunks/Footer.d6dce7f9.js b/_app/immutable/chunks/Footer.86072d99.js
similarity index 98%
rename from _app/immutable/chunks/Footer.d6dce7f9.js
rename to _app/immutable/chunks/Footer.86072d99.js
index 1599625..9a1829e 100644
--- a/_app/immutable/chunks/Footer.d6dce7f9.js
+++ b/_app/immutable/chunks/Footer.86072d99.js
@@ -1,4 +1,4 @@
-import{S as K,i as L,s as C,k as f,J as R,q as w,l as v,m as n,K as H,r as $,h as c,n as e,L as M,b as O,G as a,M as P,y as Z,a as V,z as Q,c as F,A as U,g as W,d as X,B as Y}from"./index.889feda2.js";import{S as e1}from"./Socials.3c8c0927.js";import{w as t1}from"./index.c7d83eca.js";function s1(g){let t,s,r,l,h,o;return{c(){t=f("div"),s=R("svg"),r=R("defs"),l=R("style"),h=w(`.cls-1 {
+import{S as K,i as L,s as C,k as f,J as R,q as w,l as v,m as n,K as H,r as $,h as c,n as e,L as M,b as O,G as a,M as P,y as Z,a as V,z as Q,c as F,A as U,g as W,d as X,B as Y}from"./index.963f39ba.js";import{S as e1}from"./Socials.51dbce5a.js";import{w as t1}from"./index.71f580a9.js";function s1(g){let t,s,r,l,h,o;return{c(){t=f("div"),s=R("svg"),r=R("defs"),l=R("style"),h=w(`.cls-1 {
 					fill: var(--color--text);
 				}
 			`),o=R("path"),this.h()},l(i){t=v(i,"DIV",{class:!0});var p=n(t);s=H(p,"svg",{id:!0,width:!0,height:!0,viewBox:!0,xmlns:!0,class:!0});var u=n(s);r=H(u,"defs",{});var _=n(r);l=H(_,"style",{});var d=n(l);h=$(d,`.cls-1 {
diff --git a/_app/immutable/chunks/Image.9fd0349e.js b/_app/immutable/chunks/Image.a2141873.js
similarity index 89%
rename from _app/immutable/chunks/Image.9fd0349e.js
rename to _app/immutable/chunks/Image.a2141873.js
index 6946fc1..c9aae43 100644
--- a/_app/immutable/chunks/Image.9fd0349e.js
+++ b/_app/immutable/chunks/Image.a2141873.js
@@ -1 +1 @@
-import{S as _,i as w,s as b,k as y,l as v,n as f,W as g,L as m,b as B,M as h,h as I}from"./index.889feda2.js";function S(a){let e,s;return{c(){e=y("img"),this.h()},l(l){e=v(l,"IMG",{srcset:!0,src:!0,alt:!0,loading:!0,decoding:!0,class:!0}),this.h()},h(){f(e,"srcset",a[3]()),g(e.src,s=a[0])||f(e,"src",s),f(e,"alt",a[1]),f(e,"loading","lazy"),f(e,"decoding","async"),f(e,"class","svelte-1ykl0dj"),m(e,"full-bleed",a[2])},m(l,n){B(l,e,n)},p(l,[n]){n&1&&!g(e.src,s=l[0])&&f(e,"src",s),n&2&&f(e,"alt",l[1]),n&4&&m(e,"full-bleed",l[2])},i:h,o:h,d(l){l&&I(e)}}}function k(a,e,s){let l,{src:n}=e,{alt:u}=e,{fullBleed:d=void 0}=e,{formats:c=["avif","webp","png"]}=e,{widths:r=void 0}=e;function o(){let t="";if(r)for(let i=0;i<r.length;i++)t+=`${l}-${r[i]}.${c[0]} ${r[i]}w`,i<r.length-1&&(t+=", ");else for(let i=0;i<c.length;i++)t+=`${l}.${c[i]}`,i<c.length-1&&(t+=", ");return t}return a.$$set=t=>{"src"in t&&s(0,n=t.src),"alt"in t&&s(1,u=t.alt),"fullBleed"in t&&s(2,d=t.fullBleed),"formats"in t&&s(4,c=t.formats),"widths"in t&&s(5,r=t.widths)},a.$$.update=()=>{a.$$.dirty&1&&(l=n.split(".")[0])},[n,u,d,o,c,r]}class M extends _{constructor(e){super(),w(this,e,k,S,b,{src:0,alt:1,fullBleed:2,formats:4,widths:5})}}export{M as I};
+import{S as _,i as w,s as b,k as y,l as v,n as f,_ as g,L as m,b as B,M as h,h as I}from"./index.963f39ba.js";function S(a){let e,s;return{c(){e=y("img"),this.h()},l(l){e=v(l,"IMG",{srcset:!0,src:!0,alt:!0,loading:!0,decoding:!0,class:!0}),this.h()},h(){f(e,"srcset",a[3]()),g(e.src,s=a[0])||f(e,"src",s),f(e,"alt",a[1]),f(e,"loading","lazy"),f(e,"decoding","async"),f(e,"class","svelte-1ykl0dj"),m(e,"full-bleed",a[2])},m(l,n){B(l,e,n)},p(l,[n]){n&1&&!g(e.src,s=l[0])&&f(e,"src",s),n&2&&f(e,"alt",l[1]),n&4&&m(e,"full-bleed",l[2])},i:h,o:h,d(l){l&&I(e)}}}function k(a,e,s){let l,{src:n}=e,{alt:u}=e,{fullBleed:d=void 0}=e,{formats:c=["avif","webp","png"]}=e,{widths:r=void 0}=e;function o(){let t="";if(r)for(let i=0;i<r.length;i++)t+=`${l}-${r[i]}.${c[0]} ${r[i]}w`,i<r.length-1&&(t+=", ");else for(let i=0;i<c.length;i++)t+=`${l}.${c[i]}`,i<c.length-1&&(t+=", ");return t}return a.$$set=t=>{"src"in t&&s(0,n=t.src),"alt"in t&&s(1,u=t.alt),"fullBleed"in t&&s(2,d=t.fullBleed),"formats"in t&&s(4,c=t.formats),"widths"in t&&s(5,r=t.widths)},a.$$.update=()=>{a.$$.dirty&1&&(l=n.split(".")[0])},[n,u,d,o,c,r]}class M extends _{constructor(e){super(),w(this,e,k,S,b,{src:0,alt:1,fullBleed:2,formats:4,widths:5})}}export{M as I};
diff --git a/_app/immutable/chunks/Socials.3c8c0927.js b/_app/immutable/chunks/Socials.51dbce5a.js
similarity index 98%
rename from _app/immutable/chunks/Socials.3c8c0927.js
rename to _app/immutable/chunks/Socials.51dbce5a.js
index 0df6caa..c574f87 100644
--- a/_app/immutable/chunks/Socials.3c8c0927.js
+++ b/_app/immutable/chunks/Socials.51dbce5a.js
@@ -1 +1 @@
-import{S as $,i as x,s as j,J as d,K as p,m as l,h as a,n as e,b as E,G as h,M as f,k as w,y as V,a as A,l as C,z as M,c as G,A as q,g as y,d as b,B}from"./index.889feda2.js";function I(m){let t,r,n;return{c(){t=d("svg"),r=d("path"),n=d("path"),this.h()},l(s){t=p(s,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var o=l(t);r=p(o,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(r).forEach(a),n=p(o,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(n).forEach(a),o.forEach(a),this.h()},h(){e(r,"d","M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268"),e(r,"stroke","currentColor"),e(r,"stroke-linecap","round"),e(r,"stroke-linejoin","round"),e(n,"d","M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267"),e(n,"stroke","currentColor"),e(n,"stroke-linecap","round"),e(n,"stroke-linejoin","round"),e(t,"width","100%"),e(t,"height","100%"),e(t,"stroke-width","1.5"),e(t,"viewBox","0 0 24 24"),e(t,"fill","none"),e(t,"xmlns","http://www.w3.org/2000/svg")},m(s,o){E(s,t,o),h(t,r),h(t,n)},p:f,i:f,o:f,d(s){s&&a(t)}}}class Z extends ${constructor(t){super(),x(this,t,null,I,j,{})}}function z(m){let t,r,n,s,o;return{c(){t=d("svg"),r=d("path"),n=d("path"),s=d("path"),o=d("path"),this.h()},l(i){t=p(i,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var c=l(t);r=p(c,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(r).forEach(a),n=p(c,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(n).forEach(a),s=p(c,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(s).forEach(a),o=p(c,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(o).forEach(a),c.forEach(a),this.h()},h(){e(r,"d","M21 8V16C21 18.7614 18.7614 21 16 21H8C5.23858 21 3 18.7614 3 16V8C3 5.23858 5.23858 3 8 3H16C18.7614 3 21 5.23858 21 8Z"),e(r,"stroke","currentColor"),e(r,"stroke-linecap","round"),e(r,"stroke-linejoin","round"),e(n,"d","M7 17V13.5V10"),e(n,"stroke","currentColor"),e(n,"stroke-linecap","round"),e(n,"stroke-linejoin","round"),e(s,"d","M11 17V13.75M11 10V13.75M11 13.75C11 10 17 10 17 13.75V17"),e(s,"stroke","currentColor"),e(s,"stroke-linecap","round"),e(s,"stroke-linejoin","round"),e(o,"d","M7 7.01L7.01 6.99889"),e(o,"stroke","currentColor"),e(o,"stroke-linecap","round"),e(o,"stroke-linejoin","round"),e(t,"width","100%"),e(t,"height","100%"),e(t,"stroke-width","1.5"),e(t,"viewBox","0 0 24 24"),e(t,"fill","none"),e(t,"xmlns","http://www.w3.org/2000/svg")},m(i,c){E(i,t,c),h(t,r),h(t,n),h(t,s),h(t,o)},p:f,i:f,o:f,d(i){i&&a(t)}}}class D extends ${constructor(t){super(),x(this,t,null,z,j,{})}}function J(m){let t,r,n;return{c(){t=d("svg"),r=d("path"),n=d("path"),this.h()},l(s){t=p(s,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var o=l(t);r=p(o,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(r).forEach(a),n=p(o,"path",{d:!0,stroke:!0,"stroke-width":!0}),l(n).forEach(a),o.forEach(a),this.h()},h(){e(r,"d","M7 9L12 12.5L17 9"),e(r,"stroke","currentColor"),e(r,"stroke-linecap","round"),e(r,"stroke-linejoin","round"),e(n,"d","M2 17V7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17Z"),e(n,"stroke","currentColor"),e(n,"stroke-width","1.5"),e(t,"width","100%"),e(t,"height","100%"),e(t,"stroke-width","1.5"),e(t,"viewBox","0 0 24 24"),e(t,"fill","none"),e(t,"xmlns","http://www.w3.org/2000/svg")},m(s,o){E(s,t,o),h(t,r),h(t,n)},p:f,i:f,o:f,d(s){s&&a(t)}}}class K extends ${constructor(t){super(),x(this,t,null,J,j,{})}}function F(m){let t,r,n,s,o,i,c,k,v,_;return n=new Z({}),i=new D({}),v=new K({}),{c(){t=w("div"),r=w("a"),V(n.$$.fragment),s=A(),o=w("a"),V(i.$$.fragment),c=A(),k=w("a"),V(v.$$.fragment),this.h()},l(u){t=C(u,"DIV",{class:!0});var g=l(t);r=C(g,"A",{href:!0,target:!0,rel:!0,title:!0,class:!0});var S=l(r);M(n.$$.fragment,S),S.forEach(a),s=G(g),o=C(g,"A",{href:!0,target:!0,rel:!0,title:!0,class:!0});var L=l(o);M(i.$$.fragment,L),L.forEach(a),c=G(g),k=C(g,"A",{href:!0,target:!0,rel:!0,title:!0,class:!0});var H=l(k);M(v.$$.fragment,H),H.forEach(a),g.forEach(a),this.h()},h(){e(r,"href","https://github.com/punnlert"),e(r,"target","_blank"),e(r,"rel","noopener noreferrer"),e(r,"title","See my GitHub profile"),e(r,"class","svelte-t4kqcq"),e(o,"href","https://www.linkedin.com/in/punn-lertjaturaphat/"),e(o,"target","_blank"),e(o,"rel","noopener noreferrer"),e(o,"title","Connect on LinkedIn"),e(o,"class","svelte-t4kqcq"),e(k,"href","mailto: punnlertjaturaphat@gmail.com"),e(k,"target","_blank"),e(k,"rel","noopener noreferrer"),e(k,"title","Send an email"),e(k,"class","svelte-t4kqcq"),e(t,"class","socials svelte-t4kqcq")},m(u,g){E(u,t,g),h(t,r),q(n,r,null),h(t,s),h(t,o),q(i,o,null),h(t,c),h(t,k),q(v,k,null),_=!0},p:f,i(u){_||(y(n.$$.fragment,u),y(i.$$.fragment,u),y(v.$$.fragment,u),_=!0)},o(u){b(n.$$.fragment,u),b(i.$$.fragment,u),b(v.$$.fragment,u),_=!1},d(u){u&&a(t),B(n),B(i),B(v)}}}class O extends ${constructor(t){super(),x(this,t,null,F,j,{})}}export{O as S};
+import{S as $,i as x,s as j,J as d,K as p,m as l,h as a,n as e,b as E,G as h,M as f,k as w,y as V,a as A,l as C,z as M,c as G,A as q,g as y,d as b,B}from"./index.963f39ba.js";function I(m){let t,r,n;return{c(){t=d("svg"),r=d("path"),n=d("path"),this.h()},l(s){t=p(s,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var o=l(t);r=p(o,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(r).forEach(a),n=p(o,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(n).forEach(a),o.forEach(a),this.h()},h(){e(r,"d","M16 22.0268V19.1568C16.0375 18.68 15.9731 18.2006 15.811 17.7506C15.6489 17.3006 15.3929 16.8902 15.06 16.5468C18.2 16.1968 21.5 15.0068 21.5 9.54679C21.4997 8.15062 20.9627 6.80799 20 5.79679C20.4558 4.5753 20.4236 3.22514 19.91 2.02679C19.91 2.02679 18.73 1.67679 16 3.50679C13.708 2.88561 11.292 2.88561 8.99999 3.50679C6.26999 1.67679 5.08999 2.02679 5.08999 2.02679C4.57636 3.22514 4.54413 4.5753 4.99999 5.79679C4.03011 6.81549 3.49251 8.17026 3.49999 9.57679C3.49999 14.9968 6.79998 16.1868 9.93998 16.5768C9.61098 16.9168 9.35725 17.3222 9.19529 17.7667C9.03334 18.2112 8.96679 18.6849 8.99999 19.1568V22.0268"),e(r,"stroke","currentColor"),e(r,"stroke-linecap","round"),e(r,"stroke-linejoin","round"),e(n,"d","M9 20.0267C6 20.9999 3.5 20.0267 2 17.0267"),e(n,"stroke","currentColor"),e(n,"stroke-linecap","round"),e(n,"stroke-linejoin","round"),e(t,"width","100%"),e(t,"height","100%"),e(t,"stroke-width","1.5"),e(t,"viewBox","0 0 24 24"),e(t,"fill","none"),e(t,"xmlns","http://www.w3.org/2000/svg")},m(s,o){E(s,t,o),h(t,r),h(t,n)},p:f,i:f,o:f,d(s){s&&a(t)}}}class Z extends ${constructor(t){super(),x(this,t,null,I,j,{})}}function z(m){let t,r,n,s,o;return{c(){t=d("svg"),r=d("path"),n=d("path"),s=d("path"),o=d("path"),this.h()},l(i){t=p(i,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var c=l(t);r=p(c,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(r).forEach(a),n=p(c,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(n).forEach(a),s=p(c,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(s).forEach(a),o=p(c,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(o).forEach(a),c.forEach(a),this.h()},h(){e(r,"d","M21 8V16C21 18.7614 18.7614 21 16 21H8C5.23858 21 3 18.7614 3 16V8C3 5.23858 5.23858 3 8 3H16C18.7614 3 21 5.23858 21 8Z"),e(r,"stroke","currentColor"),e(r,"stroke-linecap","round"),e(r,"stroke-linejoin","round"),e(n,"d","M7 17V13.5V10"),e(n,"stroke","currentColor"),e(n,"stroke-linecap","round"),e(n,"stroke-linejoin","round"),e(s,"d","M11 17V13.75M11 10V13.75M11 13.75C11 10 17 10 17 13.75V17"),e(s,"stroke","currentColor"),e(s,"stroke-linecap","round"),e(s,"stroke-linejoin","round"),e(o,"d","M7 7.01L7.01 6.99889"),e(o,"stroke","currentColor"),e(o,"stroke-linecap","round"),e(o,"stroke-linejoin","round"),e(t,"width","100%"),e(t,"height","100%"),e(t,"stroke-width","1.5"),e(t,"viewBox","0 0 24 24"),e(t,"fill","none"),e(t,"xmlns","http://www.w3.org/2000/svg")},m(i,c){E(i,t,c),h(t,r),h(t,n),h(t,s),h(t,o)},p:f,i:f,o:f,d(i){i&&a(t)}}}class D extends ${constructor(t){super(),x(this,t,null,z,j,{})}}function J(m){let t,r,n;return{c(){t=d("svg"),r=d("path"),n=d("path"),this.h()},l(s){t=p(s,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var o=l(t);r=p(o,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),l(r).forEach(a),n=p(o,"path",{d:!0,stroke:!0,"stroke-width":!0}),l(n).forEach(a),o.forEach(a),this.h()},h(){e(r,"d","M7 9L12 12.5L17 9"),e(r,"stroke","currentColor"),e(r,"stroke-linecap","round"),e(r,"stroke-linejoin","round"),e(n,"d","M2 17V7C2 5.89543 2.89543 5 4 5H20C21.1046 5 22 5.89543 22 7V17C22 18.1046 21.1046 19 20 19H4C2.89543 19 2 18.1046 2 17Z"),e(n,"stroke","currentColor"),e(n,"stroke-width","1.5"),e(t,"width","100%"),e(t,"height","100%"),e(t,"stroke-width","1.5"),e(t,"viewBox","0 0 24 24"),e(t,"fill","none"),e(t,"xmlns","http://www.w3.org/2000/svg")},m(s,o){E(s,t,o),h(t,r),h(t,n)},p:f,i:f,o:f,d(s){s&&a(t)}}}class K extends ${constructor(t){super(),x(this,t,null,J,j,{})}}function F(m){let t,r,n,s,o,i,c,k,v,_;return n=new Z({}),i=new D({}),v=new K({}),{c(){t=w("div"),r=w("a"),V(n.$$.fragment),s=A(),o=w("a"),V(i.$$.fragment),c=A(),k=w("a"),V(v.$$.fragment),this.h()},l(u){t=C(u,"DIV",{class:!0});var g=l(t);r=C(g,"A",{href:!0,target:!0,rel:!0,title:!0,class:!0});var S=l(r);M(n.$$.fragment,S),S.forEach(a),s=G(g),o=C(g,"A",{href:!0,target:!0,rel:!0,title:!0,class:!0});var L=l(o);M(i.$$.fragment,L),L.forEach(a),c=G(g),k=C(g,"A",{href:!0,target:!0,rel:!0,title:!0,class:!0});var H=l(k);M(v.$$.fragment,H),H.forEach(a),g.forEach(a),this.h()},h(){e(r,"href","https://github.com/punnlert"),e(r,"target","_blank"),e(r,"rel","noopener noreferrer"),e(r,"title","See my GitHub profile"),e(r,"class","svelte-t4kqcq"),e(o,"href","https://www.linkedin.com/in/punn-lertjaturaphat/"),e(o,"target","_blank"),e(o,"rel","noopener noreferrer"),e(o,"title","Connect on LinkedIn"),e(o,"class","svelte-t4kqcq"),e(k,"href","mailto: punnlertjaturaphat@gmail.com"),e(k,"target","_blank"),e(k,"rel","noopener noreferrer"),e(k,"title","Send an email"),e(k,"class","svelte-t4kqcq"),e(t,"class","socials svelte-t4kqcq")},m(u,g){E(u,t,g),h(t,r),q(n,r,null),h(t,s),h(t,o),q(i,o,null),h(t,c),h(t,k),q(v,k,null),_=!0},p:f,i(u){_||(y(n.$$.fragment,u),y(i.$$.fragment,u),y(v.$$.fragment,u),_=!0)},o(u){b(n.$$.fragment,u),b(i.$$.fragment,u),b(v.$$.fragment,u),_=!1},d(u){u&&a(t),B(n),B(i),B(v)}}}class O extends ${constructor(t){super(),x(this,t,null,F,j,{})}}export{O as S};
diff --git a/_app/immutable/chunks/error.715343d6.js b/_app/immutable/chunks/error.88d56f25.js
similarity index 99%
rename from _app/immutable/chunks/error.715343d6.js
rename to _app/immutable/chunks/error.88d56f25.js
index 046c442..752222d 100644
--- a/_app/immutable/chunks/error.715343d6.js
+++ b/_app/immutable/chunks/error.88d56f25.js
@@ -1,4 +1,4 @@
-import{S as Q,i as R,s as T,J as s,q as U,K as a,m as c,r as V,h as l,n as t,b as W,G as e,M as z}from"./index.889feda2.js";function X(O){let h,u,B,j,d,p,m,x,y,n,E,i,o,g,v,_,M,w,Z,k,S,P,f,L,b,q,A;return{c(){h=s("svg"),u=s("defs"),B=s("style"),j=U(`.cls-1,
+import{S as Q,i as R,s as T,J as s,q as U,K as a,m as c,r as V,h as l,n as t,b as W,G as e,M as z}from"./index.963f39ba.js";function X(O){let h,u,B,j,d,p,m,x,y,n,E,i,o,g,v,_,M,w,Z,k,S,P,f,L,b,q,A;return{c(){h=s("svg"),u=s("defs"),B=s("style"),j=U(`.cls-1,
 			.cls-7 {
 				fill: #c7dcf9;
 			}
diff --git a/_app/immutable/chunks/index.c7d83eca.js b/_app/immutable/chunks/index.71f580a9.js
similarity index 85%
rename from _app/immutable/chunks/index.c7d83eca.js
rename to _app/immutable/chunks/index.71f580a9.js
index 359d93e..2c31c5e 100644
--- a/_app/immutable/chunks/index.c7d83eca.js
+++ b/_app/immutable/chunks/index.71f580a9.js
@@ -1 +1 @@
-import{M as f,s as l}from"./index.889feda2.js";const e=[];function h(n,u=f){let i;const o=new Set;function r(t){if(l(n,t)&&(n=t,i)){const c=!e.length;for(const s of o)s[1](),e.push(s,n);if(c){for(let s=0;s<e.length;s+=2)e[s][0](e[s+1]);e.length=0}}}function b(t){r(t(n))}function p(t,c=f){const s=[t,c];return o.add(s),o.size===1&&(i=u(r)||f),t(n),()=>{o.delete(s),o.size===0&&i&&(i(),i=null)}}return{set:r,update:b,subscribe:p}}export{h as w};
+import{M as f,s as l}from"./index.963f39ba.js";const e=[];function h(n,u=f){let i;const o=new Set;function r(t){if(l(n,t)&&(n=t,i)){const c=!e.length;for(const s of o)s[1](),e.push(s,n);if(c){for(let s=0;s<e.length;s+=2)e[s][0](e[s+1]);e.length=0}}}function b(t){r(t(n))}function p(t,c=f){const s=[t,c];return o.add(s),o.size===1&&(i=u(r)||f),t(n),()=>{o.delete(s),o.size===0&&i&&(i(),i=null)}}return{set:r,update:b,subscribe:p}}export{h as w};
diff --git a/_app/immutable/chunks/index.889feda2.js b/_app/immutable/chunks/index.889feda2.js
deleted file mode 100644
index c1c2e7a..0000000
--- a/_app/immutable/chunks/index.889feda2.js
+++ /dev/null
@@ -1 +0,0 @@
-function v(){}function W(t,e){for(const n in e)t[n]=e[n];return t}function D(t){return t()}function O(){return Object.create(null)}function g(t){t.forEach(D)}function M(t){return typeof t=="function"}function at(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}let $;function _t(t,e){return $||($=document.createElement("a")),$.href=e,t===$.href}function G(t){return Object.keys(t).length===0}function dt(t,e,n,i){if(t){const r=L(t,e,n,i);return t[0](r)}}function L(t,e,n,i){return t[1]&&i?W(n.ctx.slice(),t[1](i(e))):n.ctx}function ht(t,e,n,i){if(t[2]&&i){const r=t[2](i(n));if(e.dirty===void 0)return r;if(typeof r=="object"){const u=[],s=Math.max(e.dirty.length,r.length);for(let o=0;o<s;o+=1)u[o]=e.dirty[o]|r[o];return u}return e.dirty|r}return e.dirty}function mt(t,e,n,i,r,u){if(r){const s=L(e,n,i,u);t.p(s,r)}}function pt(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let i=0;i<n;i++)e[i]=-1;return e}return-1}function yt(t){const e={};for(const n in t)n[0]!=="$"&&(e[n]=t[n]);return e}function gt(t,e){const n={};e=new Set(e);for(const i in t)!e.has(i)&&i[0]!=="$"&&(n[i]=t[i]);return n}function xt(t){const e={};for(const n in t)e[n]=!0;return e}let w=!1;function I(){w=!0}function J(){w=!1}function K(t,e,n,i){for(;t<e;){const r=t+(e-t>>1);n(r)<=i?t=r+1:e=r}return t}function Q(t){if(t.hydrate_init)return;t.hydrate_init=!0;let e=t.childNodes;if(t.nodeName==="HEAD"){const c=[];for(let l=0;l<e.length;l++){const a=e[l];a.claim_order!==void 0&&c.push(a)}e=c}const n=new Int32Array(e.length+1),i=new Int32Array(e.length);n[0]=-1;let r=0;for(let c=0;c<e.length;c++){const l=e[c].claim_order,a=(r>0&&e[n[r]].claim_order<=l?r+1:K(1,r,x=>e[n[x]].claim_order,l))-1;i[c]=n[a]+1;const f=a+1;n[f]=c,r=Math.max(f,r)}const u=[],s=[];let o=e.length-1;for(let c=n[r]+1;c!=0;c=i[c-1]){for(u.push(e[c-1]);o>=c;o--)s.push(e[o]);o--}for(;o>=0;o--)s.push(e[o]);u.reverse(),s.sort((c,l)=>c.claim_order-l.claim_order);for(let c=0,l=0;c<s.length;c++){for(;l<u.length&&s[c].claim_order>=u[l].claim_order;)l++;const a=l<u.length?u[l]:null;t.insertBefore(s[c],a)}}function U(t,e){if(w){for(Q(t),(t.actual_end_child===void 0||t.actual_end_child!==null&&t.actual_end_child.parentNode!==t)&&(t.actual_end_child=t.firstChild);t.actual_end_child!==null&&t.actual_end_child.claim_order===void 0;)t.actual_end_child=t.actual_end_child.nextSibling;e!==t.actual_end_child?(e.claim_order!==void 0||e.parentNode!==t)&&t.insertBefore(e,t.actual_end_child):t.actual_end_child=e.nextSibling}else(e.parentNode!==t||e.nextSibling!==null)&&t.appendChild(e)}function $t(t,e,n){w&&!n?U(t,e):(e.parentNode!==t||e.nextSibling!=n)&&t.insertBefore(e,n||null)}function V(t){t.parentNode&&t.parentNode.removeChild(t)}function bt(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}function X(t){return document.createElement(t)}function Y(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function A(t){return document.createTextNode(t)}function wt(){return A(" ")}function Et(){return A("")}function vt(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function P(t,e,n){n==null?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function Z(t,e){const n=Object.getOwnPropertyDescriptors(t.__proto__);for(const i in e)e[i]==null?t.removeAttribute(i):i==="style"?t.style.cssText=e[i]:i==="__value"?t.value=t[i]=e[i]:n[i]&&n[i].set?t[i]=e[i]:P(t,i,e[i])}function tt(t,e){Object.keys(e).forEach(n=>{et(t,n,e[n])})}function et(t,e,n){e in t?t[e]=typeof t[e]=="boolean"&&n===""?!0:n:P(t,e,n)}function Nt(t){return/-/.test(t)?tt:Z}function nt(t){return Array.from(t.childNodes)}function it(t){t.claim_info===void 0&&(t.claim_info={last_index:0,total_claimed:0})}function q(t,e,n,i,r=!1){it(t);const u=(()=>{for(let s=t.claim_info.last_index;s<t.length;s++){const o=t[s];if(e(o)){const c=n(o);return c===void 0?t.splice(s,1):t[s]=c,r||(t.claim_info.last_index=s),o}}for(let s=t.claim_info.last_index-1;s>=0;s--){const o=t[s];if(e(o)){const c=n(o);return c===void 0?t.splice(s,1):t[s]=c,r?c===void 0&&t.claim_info.last_index--:t.claim_info.last_index=s,o}}return i()})();return u.claim_order=t.claim_info.total_claimed,t.claim_info.total_claimed+=1,u}function B(t,e,n,i){return q(t,r=>r.nodeName===e,r=>{const u=[];for(let s=0;s<r.attributes.length;s++){const o=r.attributes[s];n[o.name]||u.push(o.name)}u.forEach(s=>r.removeAttribute(s))},()=>i(e))}function kt(t,e,n){return B(t,e,n,X)}function At(t,e,n){return B(t,e,n,Y)}function rt(t,e){return q(t,n=>n.nodeType===3,n=>{const i=""+e;if(n.data.startsWith(i)){if(n.data.length!==i.length)return n.splitText(i.length)}else n.data=i},()=>A(e),!0)}function St(t){return rt(t," ")}function jt(t,e){e=""+e,t.data!==e&&(t.data=e)}function Ot(t,e,n,i){n===null?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function Tt(t,e,n){t.classList[n?"add":"remove"](e)}function Ct(t,e){const n=[];let i=0;for(const r of e.childNodes)if(r.nodeType===8){const u=r.textContent.trim();u===`HEAD_${t}_END`?(i-=1,n.push(r)):u===`HEAD_${t}_START`&&(i+=1,n.push(r))}else i>0&&n.push(r);return n}function Dt(t,e){return new t(e)}let y;function p(t){y=t}function H(){if(!y)throw new Error("Function called outside component initialization");return y}function Mt(t){H().$$.on_mount.push(t)}function Lt(t){H().$$.after_update.push(t)}function Pt(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach(i=>i.call(this,e))}const h=[],T=[];let m=[];const C=[],z=Promise.resolve();let N=!1;function F(){N||(N=!0,z.then(R))}function qt(){return F(),z}function k(t){m.push(t)}const E=new Set;let d=0;function R(){if(d!==0)return;const t=y;do{try{for(;d<h.length;){const e=h[d];d++,p(e),ct(e.$$)}}catch(e){throw h.length=0,d=0,e}for(p(null),h.length=0,d=0;T.length;)T.pop()();for(let e=0;e<m.length;e+=1){const n=m[e];E.has(n)||(E.add(n),n())}m.length=0}while(h.length);for(;C.length;)C.pop()();N=!1,E.clear(),p(t)}function ct(t){if(t.fragment!==null){t.update(),g(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(k)}}function st(t){const e=[],n=[];m.forEach(i=>t.indexOf(i)===-1?e.push(i):n.push(i)),n.forEach(i=>i()),m=e}const b=new Set;let _;function Bt(){_={r:0,c:[],p:_}}function Ht(){_.r||g(_.c),_=_.p}function ot(t,e){t&&t.i&&(b.delete(t),t.i(e))}function zt(t,e,n,i){if(t&&t.o){if(b.has(t))return;b.add(t),_.c.push(()=>{b.delete(t),i&&(n&&t.d(1),i())}),t.o(e)}else i&&i()}function Ft(t,e){const n={},i={},r={$$scope:1};let u=t.length;for(;u--;){const s=t[u],o=e[u];if(o){for(const c in s)c in o||(i[c]=1);for(const c in o)r[c]||(n[c]=o[c],r[c]=1);t[u]=o}else for(const c in s)r[c]=1}for(const s in i)s in n||(n[s]=void 0);return n}function Rt(t){t&&t.c()}function Wt(t,e){t&&t.l(e)}function lt(t,e,n,i){const{fragment:r,after_update:u}=t.$$;r&&r.m(e,n),i||k(()=>{const s=t.$$.on_mount.map(D).filter(M);t.$$.on_destroy?t.$$.on_destroy.push(...s):g(s),t.$$.on_mount=[]}),u.forEach(k)}function ut(t,e){const n=t.$$;n.fragment!==null&&(st(n.after_update),g(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function ft(t,e){t.$$.dirty[0]===-1&&(h.push(t),F(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function Gt(t,e,n,i,r,u,s,o=[-1]){const c=y;p(t);const l=t.$$={fragment:null,ctx:[],props:u,update:v,not_equal:r,bound:O(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(c?c.$$.context:[])),callbacks:O(),dirty:o,skip_bound:!1,root:e.target||c.$$.root};s&&s(l.root);let a=!1;if(l.ctx=n?n(t,e.props||{},(f,x,...S)=>{const j=S.length?S[0]:x;return l.ctx&&r(l.ctx[f],l.ctx[f]=j)&&(!l.skip_bound&&l.bound[f]&&l.bound[f](j),a&&ft(t,f)),x}):[],l.update(),a=!0,g(l.before_update),l.fragment=i?i(l.ctx):!1,e.target){if(e.hydrate){I();const f=nt(e.target);l.fragment&&l.fragment.l(f),f.forEach(V)}else l.fragment&&l.fragment.c();e.intro&&ot(t.$$.fragment),lt(t,e.target,e.anchor,e.customElement),J(),R()}p(c)}class It{$destroy(){ut(this,1),this.$destroy=v}$on(e,n){if(!M(n))return v;const i=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return i.push(n),()=>{const r=i.indexOf(n);r!==-1&&i.splice(r,1)}}$set(e){this.$$set&&!G(e)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}export{lt as A,ut as B,dt as C,mt as D,pt as E,ht as F,U as G,bt as H,Ct as I,Y as J,At as K,Tt as L,v as M,gt as N,xt as O,W as P,yt as Q,Nt as R,It as S,vt as T,Ft as U,Pt as V,_t as W,wt as a,$t as b,St as c,zt as d,Et as e,Ht as f,ot as g,V as h,Gt as i,Lt as j,X as k,kt as l,nt as m,P as n,Mt as o,Ot as p,A as q,rt as r,at as s,qt as t,jt as u,Bt as v,T as w,Dt as x,Rt as y,Wt as z};
diff --git a/_app/immutable/chunks/index.963f39ba.js b/_app/immutable/chunks/index.963f39ba.js
new file mode 100644
index 0000000..dae8eb3
--- /dev/null
+++ b/_app/immutable/chunks/index.963f39ba.js
@@ -0,0 +1 @@
+function L(){}function nt(t,e){for(const n in e)t[n]=e[n];return t}function J(t){return t()}function W(){return Object.create(null)}function b(t){t.forEach(J)}function K(t){return typeof t=="function"}function kt(t,e){return t!=t?e==e:t!==e||t&&typeof t=="object"||typeof t=="function"}let S;function vt(t,e){return S||(S=document.createElement("a")),S.href=e,t===S.href}function it(t){return Object.keys(t).length===0}function Nt(t,e,n,i){if(t){const r=Q(t,e,n,i);return t[0](r)}}function Q(t,e,n,i){return t[1]&&i?nt(n.ctx.slice(),t[1](i(e))):n.ctx}function St(t,e,n,i){if(t[2]&&i){const r=t[2](i(n));if(e.dirty===void 0)return r;if(typeof r=="object"){const u=[],s=Math.max(e.dirty.length,r.length);for(let o=0;o<s;o+=1)u[o]=e.dirty[o]|r[o];return u}return e.dirty|r}return e.dirty}function At(t,e,n,i,r,u){if(r){const s=Q(e,n,i,u);t.p(s,r)}}function jt(t){if(t.ctx.length>32){const e=[],n=t.ctx.length/32;for(let i=0;i<n;i++)e[i]=-1;return e}return-1}function Mt(t){const e={};for(const n in t)n[0]!=="$"&&(e[n]=t[n]);return e}function Ot(t,e){const n={};e=new Set(e);for(const i in t)!e.has(i)&&i[0]!=="$"&&(n[i]=t[i]);return n}function Tt(t){const e={};for(const n in t)e[n]=!0;return e}function Ct(t){return t??""}let j=!1;function rt(){j=!0}function st(){j=!1}function ct(t,e,n,i){for(;t<e;){const r=t+(e-t>>1);n(r)<=i?t=r+1:e=r}return t}function ot(t){if(t.hydrate_init)return;t.hydrate_init=!0;let e=t.childNodes;if(t.nodeName==="HEAD"){const c=[];for(let l=0;l<e.length;l++){const a=e[l];a.claim_order!==void 0&&c.push(a)}e=c}const n=new Int32Array(e.length+1),i=new Int32Array(e.length);n[0]=-1;let r=0;for(let c=0;c<e.length;c++){const l=e[c].claim_order,a=(r>0&&e[n[r]].claim_order<=l?r+1:ct(1,r,_=>e[n[_]].claim_order,l))-1;i[c]=n[a]+1;const d=a+1;n[d]=c,r=Math.max(d,r)}const u=[],s=[];let o=e.length-1;for(let c=n[r]+1;c!=0;c=i[c-1]){for(u.push(e[c-1]);o>=c;o--)s.push(e[o]);o--}for(;o>=0;o--)s.push(e[o]);u.reverse(),s.sort((c,l)=>c.claim_order-l.claim_order);for(let c=0,l=0;c<s.length;c++){for(;l<u.length&&s[c].claim_order>=u[l].claim_order;)l++;const a=l<u.length?u[l]:null;t.insertBefore(s[c],a)}}function lt(t,e){if(j){for(ot(t),(t.actual_end_child===void 0||t.actual_end_child!==null&&t.actual_end_child.parentNode!==t)&&(t.actual_end_child=t.firstChild);t.actual_end_child!==null&&t.actual_end_child.claim_order===void 0;)t.actual_end_child=t.actual_end_child.nextSibling;e!==t.actual_end_child?(e.claim_order!==void 0||e.parentNode!==t)&&t.insertBefore(e,t.actual_end_child):t.actual_end_child=e.nextSibling}else(e.parentNode!==t||e.nextSibling!==null)&&t.appendChild(e)}function Dt(t,e,n){j&&!n?lt(t,e):(e.parentNode!==t||e.nextSibling!=n)&&t.insertBefore(e,n||null)}function ut(t){t.parentNode&&t.parentNode.removeChild(t)}function Lt(t,e){for(let n=0;n<t.length;n+=1)t[n]&&t[n].d(e)}function ft(t){return document.createElement(t)}function at(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function B(t){return document.createTextNode(t)}function Pt(){return B(" ")}function qt(){return B("")}function Bt(t,e,n,i){return t.addEventListener(e,n,i),()=>t.removeEventListener(e,n,i)}function U(t,e,n){n==null?t.removeAttribute(e):t.getAttribute(e)!==n&&t.setAttribute(e,n)}function _t(t,e){const n=Object.getOwnPropertyDescriptors(t.__proto__);for(const i in e)e[i]==null?t.removeAttribute(i):i==="style"?t.style.cssText=e[i]:i==="__value"?t.value=t[i]=e[i]:n[i]&&n[i].set?t[i]=e[i]:U(t,i,e[i])}function dt(t,e){Object.keys(e).forEach(n=>{ht(t,n,e[n])})}function ht(t,e,n){e in t?t[e]=typeof t[e]=="boolean"&&n===""?!0:n:U(t,e,n)}function Ht(t){return/-/.test(t)?dt:_t}function mt(t){return Array.from(t.childNodes)}function pt(t){t.claim_info===void 0&&(t.claim_info={last_index:0,total_claimed:0})}function V(t,e,n,i,r=!1){pt(t);const u=(()=>{for(let s=t.claim_info.last_index;s<t.length;s++){const o=t[s];if(e(o)){const c=n(o);return c===void 0?t.splice(s,1):t[s]=c,r||(t.claim_info.last_index=s),o}}for(let s=t.claim_info.last_index-1;s>=0;s--){const o=t[s];if(e(o)){const c=n(o);return c===void 0?t.splice(s,1):t[s]=c,r?c===void 0&&t.claim_info.last_index--:t.claim_info.last_index=s,o}}return i()})();return u.claim_order=t.claim_info.total_claimed,t.claim_info.total_claimed+=1,u}function X(t,e,n,i){return V(t,r=>r.nodeName===e,r=>{const u=[];for(let s=0;s<r.attributes.length;s++){const o=r.attributes[s];n[o.name]||u.push(o.name)}u.forEach(s=>r.removeAttribute(s))},()=>i(e))}function zt(t,e,n){return X(t,e,n,ft)}function Ft(t,e,n){return X(t,e,n,at)}function yt(t,e){return V(t,n=>n.nodeType===3,n=>{const i=""+e;if(n.data.startsWith(i)){if(n.data.length!==i.length)return n.splitText(i.length)}else n.data=i},()=>B(e),!0)}function Rt(t){return yt(t," ")}function Wt(t,e){e=""+e,t.data!==e&&(t.data=e)}function Gt(t,e,n,i){n===null?t.style.removeProperty(e):t.style.setProperty(e,n,i?"important":"")}function It(t,e,n){t.classList[n?"add":"remove"](e)}function Jt(t,e){const n=[];let i=0;for(const r of e.childNodes)if(r.nodeType===8){const u=r.textContent.trim();u===`HEAD_${t}_END`?(i-=1,n.push(r)):u===`HEAD_${t}_START`&&(i+=1,n.push(r))}else i>0&&n.push(r);return n}function Kt(t,e){return new t(e)}let k;function E(t){k=t}function H(){if(!k)throw new Error("Function called outside component initialization");return k}function Qt(t){H().$$.on_mount.push(t)}function Ut(t){H().$$.after_update.push(t)}function Vt(t){H().$$.on_destroy.push(t)}function Xt(t,e){const n=t.$$.callbacks[e.type];n&&n.slice().forEach(i=>i.call(this,e))}const w=[],G=[];let $=[];const I=[],Y=Promise.resolve();let P=!1;function Z(){P||(P=!0,Y.then(tt))}function Yt(){return Z(),Y}function q(t){$.push(t)}const D=new Set;let x=0;function tt(){if(x!==0)return;const t=k;do{try{for(;x<w.length;){const e=w[x];x++,E(e),gt(e.$$)}}catch(e){throw w.length=0,x=0,e}for(E(null),w.length=0,x=0;G.length;)G.pop()();for(let e=0;e<$.length;e+=1){const n=$[e];D.has(n)||(D.add(n),n())}$.length=0}while(w.length);for(;I.length;)I.pop()();P=!1,D.clear(),E(t)}function gt(t){if(t.fragment!==null){t.update(),b(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(q)}}function xt(t){const e=[],n=[];$.forEach(i=>t.indexOf(i)===-1?e.push(i):n.push(i)),n.forEach(i=>i()),$=e}const A=new Set;let g;function Zt(){g={r:0,c:[],p:g}}function te(){g.r||b(g.c),g=g.p}function et(t,e){t&&t.i&&(A.delete(t),t.i(e))}function wt(t,e,n,i){if(t&&t.o){if(A.has(t))return;A.add(t),g.c.push(()=>{A.delete(t),i&&(n&&t.d(1),i())}),t.o(e)}else i&&i()}function ee(t,e){wt(t,1,1,()=>{e.delete(t.key)})}function ne(t,e,n,i,r,u,s,o,c,l,a,d){let _=t.length,m=u.length,h=_;const M={};for(;h--;)M[t[h].key]=h;const v=[],O=new Map,T=new Map,z=[];for(h=m;h--;){const f=d(r,u,h),p=n(f);let y=s.get(p);y?i&&z.push(()=>y.p(f,e)):(y=l(p,f),y.c()),O.set(p,v[h]=y),p in M&&T.set(p,Math.abs(h-M[p]))}const F=new Set,R=new Set;function C(f){et(f,1),f.m(o,a),s.set(f.key,f),a=f.first,m--}for(;_&&m;){const f=v[m-1],p=t[_-1],y=f.key,N=p.key;f===p?(a=f.first,_--,m--):O.has(N)?!s.has(y)||F.has(y)?C(f):R.has(N)?_--:T.get(y)>T.get(N)?(R.add(y),C(f)):(F.add(N),_--):(c(p,s),_--)}for(;_--;){const f=t[_];O.has(f.key)||c(f,s)}for(;m;)C(v[m-1]);return b(z),v}function ie(t,e){const n={},i={},r={$$scope:1};let u=t.length;for(;u--;){const s=t[u],o=e[u];if(o){for(const c in s)c in o||(i[c]=1);for(const c in o)r[c]||(n[c]=o[c],r[c]=1);t[u]=o}else for(const c in s)r[c]=1}for(const s in i)s in n||(n[s]=void 0);return n}function re(t){t&&t.c()}function se(t,e){t&&t.l(e)}function $t(t,e,n,i){const{fragment:r,after_update:u}=t.$$;r&&r.m(e,n),i||q(()=>{const s=t.$$.on_mount.map(J).filter(K);t.$$.on_destroy?t.$$.on_destroy.push(...s):b(s),t.$$.on_mount=[]}),u.forEach(q)}function bt(t,e){const n=t.$$;n.fragment!==null&&(xt(n.after_update),b(n.on_destroy),n.fragment&&n.fragment.d(e),n.on_destroy=n.fragment=null,n.ctx=[])}function Et(t,e){t.$$.dirty[0]===-1&&(w.push(t),Z(),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function ce(t,e,n,i,r,u,s,o=[-1]){const c=k;E(t);const l=t.$$={fragment:null,ctx:[],props:u,update:L,not_equal:r,bound:W(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(e.context||(c?c.$$.context:[])),callbacks:W(),dirty:o,skip_bound:!1,root:e.target||c.$$.root};s&&s(l.root);let a=!1;if(l.ctx=n?n(t,e.props||{},(d,_,...m)=>{const h=m.length?m[0]:_;return l.ctx&&r(l.ctx[d],l.ctx[d]=h)&&(!l.skip_bound&&l.bound[d]&&l.bound[d](h),a&&Et(t,d)),_}):[],l.update(),a=!0,b(l.before_update),l.fragment=i?i(l.ctx):!1,e.target){if(e.hydrate){rt();const d=mt(e.target);l.fragment&&l.fragment.l(d),d.forEach(ut)}else l.fragment&&l.fragment.c();e.intro&&et(t.$$.fragment),$t(t,e.target,e.anchor,e.customElement),st(),tt()}E(c)}class oe{$destroy(){bt(this,1),this.$destroy=L}$on(e,n){if(!K(n))return L;const i=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return i.push(n),()=>{const r=i.indexOf(n);r!==-1&&i.splice(r,1)}}$set(e){this.$$set&&!it(e)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}export{$t as A,bt as B,Nt as C,At as D,jt as E,St as F,lt as G,Lt as H,Jt as I,at as J,Ft as K,It as L,L as M,ne as N,Vt as O,ee as P,Ct as Q,Ot as R,oe as S,Tt as T,nt as U,Mt as V,Ht as W,Bt as X,ie as Y,Xt as Z,vt as _,Pt as a,Dt as b,Rt as c,wt as d,qt as e,te as f,et as g,ut as h,ce as i,Ut as j,ft as k,zt as l,mt as m,U as n,Qt as o,Gt as p,B as q,yt as r,kt as s,Yt as t,Wt as u,Zt as v,G as w,Kt as x,re as y,se as z};
diff --git a/_app/immutable/entry/(blog-article)-blog-posts-page.md.f55da5c2.js b/_app/immutable/entry/(blog-article)-blog-posts-page.md.f351eda0.js
similarity index 98%
rename from _app/immutable/entry/(blog-article)-blog-posts-page.md.f55da5c2.js
rename to _app/immutable/entry/(blog-article)-blog-posts-page.md.f351eda0.js
index 0b8be1e..c59a7d5 100644
--- a/_app/immutable/entry/(blog-article)-blog-posts-page.md.f55da5c2.js
+++ b/_app/immutable/entry/(blog-article)-blog-posts-page.md.f351eda0.js
@@ -1,4 +1,4 @@
-import{S as Me,i as Pe,s as Se,J as x,K as M,m as c,h as s,n as l,b as g,G as r,M as I,C as vo,k as p,a as b,l as u,c as $,g as y,v as _o,d as C,f as ko,D as bo,E as $o,F as Eo,y as K,z as W,A as Q,B as ee,q as n,r as f}from"../chunks/index.889feda2.js";/* empty css                                                      */import{C as yo}from"../chunks/CodeBlock.280f02c3.js";import{I as go}from"../chunks/Image.9fd0349e.js";function Co(_){let e,a,o,i;return{c(){e=x("svg"),a=x("path"),o=x("path"),i=x("path"),this.h()},l(h){e=M(h,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var w=c(e);a=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(a).forEach(s),o=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(o).forEach(s),i=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(i).forEach(s),w.forEach(s),this.h()},h(){l(a,"d","M12 7L12 13"),l(a,"stroke","currentColor"),l(a,"stroke-linecap","round"),l(a,"stroke-linejoin","round"),l(o,"d","M12 17.01L12.01 16.9989"),l(o,"stroke","currentColor"),l(o,"stroke-linecap","round"),l(o,"stroke-linejoin","round"),l(i,"d","M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"),l(i,"stroke","currentColor"),l(i,"stroke-linecap","round"),l(i,"stroke-linejoin","round"),l(e,"width","100%"),l(e,"height","100%"),l(e,"stroke-width","1.5"),l(e,"viewBox","0 0 24 24"),l(e,"fill","none"),l(e,"xmlns","http://www.w3.org/2000/svg")},m(h,w){g(h,e,w),r(e,a),r(e,o),r(e,i)},p:I,i:I,o:I,d(h){h&&s(e)}}}class xo extends Me{constructor(e){super(),Pe(this,e,null,Co,Se,{})}}function Mo(_){let e,a,o;return{c(){e=x("svg"),a=x("path"),o=x("path"),this.h()},l(i){e=M(i,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var h=c(e);a=M(h,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(a).forEach(s),o=M(h,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(o).forEach(s),h.forEach(s),this.h()},h(){l(a,"d","M7 12.5L10 15.5L17 8.5"),l(a,"stroke","currentColor"),l(a,"stroke-linecap","round"),l(a,"stroke-linejoin","round"),l(o,"d","M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"),l(o,"stroke","currentColor"),l(o,"stroke-linecap","round"),l(o,"stroke-linejoin","round"),l(e,"width","100%"),l(e,"height","100%"),l(e,"stroke-width","1.5"),l(e,"viewBox","0 0 24 24"),l(e,"fill","none"),l(e,"xmlns","http://www.w3.org/2000/svg")},m(i,h){g(i,e,h),r(e,a),r(e,o)},p:I,i:I,o:I,d(i){i&&s(e)}}}class Po extends Me{constructor(e){super(),Pe(this,e,null,Mo,Se,{})}}function So(_){let e,a,o,i;return{c(){e=x("svg"),a=x("path"),o=x("path"),i=x("path"),this.h()},l(h){e=M(h,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var w=c(e);a=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(a).forEach(s),o=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(o).forEach(s),i=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(i).forEach(s),w.forEach(s),this.h()},h(){l(a,"d","M12 11.5V16.5"),l(a,"stroke","currentColor"),l(a,"stroke-linecap","round"),l(a,"stroke-linejoin","round"),l(o,"d","M12 7.51L12.01 7.49889"),l(o,"stroke","currentColor"),l(o,"stroke-linecap","round"),l(o,"stroke-linejoin","round"),l(i,"d","M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"),l(i,"stroke","currentColor"),l(i,"stroke-linecap","round"),l(i,"stroke-linejoin","round"),l(e,"width","100%"),l(e,"height","100%"),l(e,"stroke-width","1.5"),l(e,"viewBox","0 0 24 24"),l(e,"fill","none"),l(e,"xmlns","http://www.w3.org/2000/svg")},m(h,w){g(h,e,w),r(e,a),r(e,o),r(e,i)},p:I,i:I,o:I,d(h){h&&s(e)}}}class To extends Me{constructor(e){super(),Pe(this,e,null,So,Se,{})}}function wo(_){let e,a,o,i;const h=[Do,jo,Ao],w=[];function v(m,k){return m[0]=="info"?0:m[0]=="warning"||m[0]=="error"?1:m[0]=="success"?2:-1}return~(a=v(_))&&(o=w[a]=h[a](_)),{c(){e=p("div"),o&&o.c(),this.h()},l(m){e=u(m,"DIV",{class:!0});var k=c(e);o&&o.l(k),k.forEach(s),this.h()},h(){l(e,"class","icon-wrapper svelte-sxx0n0")},m(m,k){g(m,e,k),~a&&w[a].m(e,null),i=!0},p(m,k){let E=a;a=v(m),a!==E&&(o&&(_o(),C(w[E],1,1,()=>{w[E]=null}),ko()),~a?(o=w[a],o||(o=w[a]=h[a](m),o.c()),y(o,1),o.m(e,null)):o=null)},i(m){i||(y(o),i=!0)},o(m){C(o),i=!1},d(m){m&&s(e),~a&&w[a].d()}}}function Ao(_){let e,a;return e=new Po({}),{c(){K(e.$$.fragment)},l(o){W(e.$$.fragment,o)},m(o,i){Q(e,o,i),a=!0},i(o){a||(y(e.$$.fragment,o),a=!0)},o(o){C(e.$$.fragment,o),a=!1},d(o){ee(e,o)}}}function jo(_){let e,a;return e=new xo({}),{c(){K(e.$$.fragment)},l(o){W(e.$$.fragment,o)},m(o,i){Q(e,o,i),a=!0},i(o){a||(y(e.$$.fragment,o),a=!0)},o(o){C(e.$$.fragment,o),a=!1},d(o){ee(e,o)}}}function Do(_){let e,a;return e=new To({}),{c(){K(e.$$.fragment)},l(o){W(e.$$.fragment,o)},m(o,i){Q(e,o,i),a=!0},i(o){a||(y(e.$$.fragment,o),a=!0)},o(o){C(e.$$.fragment,o),a=!1},d(o){ee(e,o)}}}function Io(_){let e,a,o,i,h=_[0]&&wo(_);const w=_[2].default,v=vo(w,_,_[1],null);return{c(){e=p("div"),h&&h.c(),a=b(),v&&v.c(),this.h()},l(m){e=u(m,"DIV",{class:!0});var k=c(e);h&&h.l(k),a=$(k),v&&v.l(k),k.forEach(s),this.h()},h(){l(e,"class",o="callout-block "+(_[0]??"")+" svelte-sxx0n0")},m(m,k){g(m,e,k),h&&h.m(e,null),r(e,a),v&&v.m(e,null),i=!0},p(m,[k]){m[0]?h?(h.p(m,k),k&1&&y(h,1)):(h=wo(m),h.c(),y(h,1),h.m(e,a)):h&&(_o(),C(h,1,1,()=>{h=null}),ko()),v&&v.p&&(!i||k&2)&&bo(v,w,m,m[1],i?Eo(w,m[1],k,null):$o(m[1]),null),(!i||k&1&&o!==(o="callout-block "+(m[0]??"")+" svelte-sxx0n0"))&&l(e,"class",o)},i(m){i||(y(h),y(v,m),i=!0)},o(m){C(h),C(v,m),i=!1},d(m){m&&s(e),h&&h.d(),v&&v.d(m)}}}function Lo(_,e,a){let{$$slots:o={},$$scope:i}=e,{type:h=void 0}=e;return _.$$set=w=>{"type"in w&&a(0,h=w.type),"$$scope"in w&&a(1,i=w.$$scope)},[h,i,o]}class Ro extends Me{constructor(e){super(),Pe(this,e,Lo,Io,Se,{type:0})}}function Bo(_){let e;return{c(){e=n("This is a Svelte component inside a Markdown file!")},l(a){e=f(a,"This is a Svelte component inside a Markdown file!")},m(a,o){g(a,e,o)},d(a){a&&s(e)}}}function Oo(_){let e,a=`<code class="language-md"><span class="token front-matter-block"><span class="token punctuation">---</span>
+import{S as Me,i as Pe,s as Se,J as x,K as M,m as c,h as s,n as l,b as g,G as r,M as I,C as vo,k as p,a as b,l as u,c as $,g as y,v as _o,d as C,f as ko,D as bo,E as $o,F as Eo,y as K,z as W,A as Q,B as ee,q as n,r as f}from"../chunks/index.963f39ba.js";/* empty css                                                      */import{C as yo}from"../chunks/CodeBlock.d6ac5a85.js";import{I as go}from"../chunks/Image.a2141873.js";function Co(_){let e,a,o,i;return{c(){e=x("svg"),a=x("path"),o=x("path"),i=x("path"),this.h()},l(h){e=M(h,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var w=c(e);a=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(a).forEach(s),o=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(o).forEach(s),i=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(i).forEach(s),w.forEach(s),this.h()},h(){l(a,"d","M12 7L12 13"),l(a,"stroke","currentColor"),l(a,"stroke-linecap","round"),l(a,"stroke-linejoin","round"),l(o,"d","M12 17.01L12.01 16.9989"),l(o,"stroke","currentColor"),l(o,"stroke-linecap","round"),l(o,"stroke-linejoin","round"),l(i,"d","M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"),l(i,"stroke","currentColor"),l(i,"stroke-linecap","round"),l(i,"stroke-linejoin","round"),l(e,"width","100%"),l(e,"height","100%"),l(e,"stroke-width","1.5"),l(e,"viewBox","0 0 24 24"),l(e,"fill","none"),l(e,"xmlns","http://www.w3.org/2000/svg")},m(h,w){g(h,e,w),r(e,a),r(e,o),r(e,i)},p:I,i:I,o:I,d(h){h&&s(e)}}}class xo extends Me{constructor(e){super(),Pe(this,e,null,Co,Se,{})}}function Mo(_){let e,a,o;return{c(){e=x("svg"),a=x("path"),o=x("path"),this.h()},l(i){e=M(i,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var h=c(e);a=M(h,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(a).forEach(s),o=M(h,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(o).forEach(s),h.forEach(s),this.h()},h(){l(a,"d","M7 12.5L10 15.5L17 8.5"),l(a,"stroke","currentColor"),l(a,"stroke-linecap","round"),l(a,"stroke-linejoin","round"),l(o,"d","M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"),l(o,"stroke","currentColor"),l(o,"stroke-linecap","round"),l(o,"stroke-linejoin","round"),l(e,"width","100%"),l(e,"height","100%"),l(e,"stroke-width","1.5"),l(e,"viewBox","0 0 24 24"),l(e,"fill","none"),l(e,"xmlns","http://www.w3.org/2000/svg")},m(i,h){g(i,e,h),r(e,a),r(e,o)},p:I,i:I,o:I,d(i){i&&s(e)}}}class Po extends Me{constructor(e){super(),Pe(this,e,null,Mo,Se,{})}}function So(_){let e,a,o,i;return{c(){e=x("svg"),a=x("path"),o=x("path"),i=x("path"),this.h()},l(h){e=M(h,"svg",{width:!0,height:!0,"stroke-width":!0,viewBox:!0,fill:!0,xmlns:!0});var w=c(e);a=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(a).forEach(s),o=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(o).forEach(s),i=M(w,"path",{d:!0,stroke:!0,"stroke-linecap":!0,"stroke-linejoin":!0}),c(i).forEach(s),w.forEach(s),this.h()},h(){l(a,"d","M12 11.5V16.5"),l(a,"stroke","currentColor"),l(a,"stroke-linecap","round"),l(a,"stroke-linejoin","round"),l(o,"d","M12 7.51L12.01 7.49889"),l(o,"stroke","currentColor"),l(o,"stroke-linecap","round"),l(o,"stroke-linejoin","round"),l(i,"d","M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"),l(i,"stroke","currentColor"),l(i,"stroke-linecap","round"),l(i,"stroke-linejoin","round"),l(e,"width","100%"),l(e,"height","100%"),l(e,"stroke-width","1.5"),l(e,"viewBox","0 0 24 24"),l(e,"fill","none"),l(e,"xmlns","http://www.w3.org/2000/svg")},m(h,w){g(h,e,w),r(e,a),r(e,o),r(e,i)},p:I,i:I,o:I,d(h){h&&s(e)}}}class To extends Me{constructor(e){super(),Pe(this,e,null,So,Se,{})}}function wo(_){let e,a,o,i;const h=[Do,jo,Ao],w=[];function v(m,k){return m[0]=="info"?0:m[0]=="warning"||m[0]=="error"?1:m[0]=="success"?2:-1}return~(a=v(_))&&(o=w[a]=h[a](_)),{c(){e=p("div"),o&&o.c(),this.h()},l(m){e=u(m,"DIV",{class:!0});var k=c(e);o&&o.l(k),k.forEach(s),this.h()},h(){l(e,"class","icon-wrapper svelte-sxx0n0")},m(m,k){g(m,e,k),~a&&w[a].m(e,null),i=!0},p(m,k){let E=a;a=v(m),a!==E&&(o&&(_o(),C(w[E],1,1,()=>{w[E]=null}),ko()),~a?(o=w[a],o||(o=w[a]=h[a](m),o.c()),y(o,1),o.m(e,null)):o=null)},i(m){i||(y(o),i=!0)},o(m){C(o),i=!1},d(m){m&&s(e),~a&&w[a].d()}}}function Ao(_){let e,a;return e=new Po({}),{c(){K(e.$$.fragment)},l(o){W(e.$$.fragment,o)},m(o,i){Q(e,o,i),a=!0},i(o){a||(y(e.$$.fragment,o),a=!0)},o(o){C(e.$$.fragment,o),a=!1},d(o){ee(e,o)}}}function jo(_){let e,a;return e=new xo({}),{c(){K(e.$$.fragment)},l(o){W(e.$$.fragment,o)},m(o,i){Q(e,o,i),a=!0},i(o){a||(y(e.$$.fragment,o),a=!0)},o(o){C(e.$$.fragment,o),a=!1},d(o){ee(e,o)}}}function Do(_){let e,a;return e=new To({}),{c(){K(e.$$.fragment)},l(o){W(e.$$.fragment,o)},m(o,i){Q(e,o,i),a=!0},i(o){a||(y(e.$$.fragment,o),a=!0)},o(o){C(e.$$.fragment,o),a=!1},d(o){ee(e,o)}}}function Io(_){let e,a,o,i,h=_[0]&&wo(_);const w=_[2].default,v=vo(w,_,_[1],null);return{c(){e=p("div"),h&&h.c(),a=b(),v&&v.c(),this.h()},l(m){e=u(m,"DIV",{class:!0});var k=c(e);h&&h.l(k),a=$(k),v&&v.l(k),k.forEach(s),this.h()},h(){l(e,"class",o="callout-block "+(_[0]??"")+" svelte-sxx0n0")},m(m,k){g(m,e,k),h&&h.m(e,null),r(e,a),v&&v.m(e,null),i=!0},p(m,[k]){m[0]?h?(h.p(m,k),k&1&&y(h,1)):(h=wo(m),h.c(),y(h,1),h.m(e,a)):h&&(_o(),C(h,1,1,()=>{h=null}),ko()),v&&v.p&&(!i||k&2)&&bo(v,w,m,m[1],i?Eo(w,m[1],k,null):$o(m[1]),null),(!i||k&1&&o!==(o="callout-block "+(m[0]??"")+" svelte-sxx0n0"))&&l(e,"class",o)},i(m){i||(y(h),y(v,m),i=!0)},o(m){C(h),C(v,m),i=!1},d(m){m&&s(e),h&&h.d(),v&&v.d(m)}}}function Lo(_,e,a){let{$$slots:o={},$$scope:i}=e,{type:h=void 0}=e;return _.$$set=w=>{"type"in w&&a(0,h=w.type),"$$scope"in w&&a(1,i=w.$$scope)},[h,i,o]}class Ro extends Me{constructor(e){super(),Pe(this,e,Lo,Io,Se,{type:0})}}function Bo(_){let e;return{c(){e=n("This is a Svelte component inside a Markdown file!")},l(a){e=f(a,"This is a Svelte component inside a Markdown file!")},m(a,o){g(a,e,o)},d(a){a&&s(e)}}}function Oo(_){let e,a=`<code class="language-md"><span class="token front-matter-block"><span class="token punctuation">---</span>
 <span class="token front-matter yaml language-yaml">slug: my-new-blog-post
 title: My New Blog Post
 date: 2023-04-22T20:45:25.350Z
diff --git a/_app/immutable/entry/(blog-article)-customization-page.md.8c33bc0d.js b/_app/immutable/entry/(blog-article)-customization-page.md.3533e19a.js
similarity index 99%
rename from _app/immutable/entry/(blog-article)-customization-page.md.8c33bc0d.js
rename to _app/immutable/entry/(blog-article)-customization-page.md.3533e19a.js
index 13416da..0c6dfdf 100644
--- a/_app/immutable/entry/(blog-article)-customization-page.md.8c33bc0d.js
+++ b/_app/immutable/entry/(blog-article)-customization-page.md.3533e19a.js
@@ -1 +1 @@
-import{S as Ga,i as Ya,s as ja,k as s,q as a,a as c,l,m as r,r as i,h as o,c as f,n,b as d,G as t,M as Vo}from"../chunks/index.889feda2.js";function qa(Ba){let m,ft,se,ut,pt,xe,I,_,le,mt,vt,Le,$,yt,Ne,D,p,Et,re,_t,bt,ne,kt,wt,he,Tt,Pt,At,b,gt,de,Ht,Ct,ce,St,It,Re,F,k,fe,Dt,Ft,Me,O,Ot,ue,xt,Lt,Ue,x,Nt,pe,Rt,Mt,ze,L,w,me,Ut,zt,Be,v,Bt,ve,Gt,Yt,ye,jt,qt,Ge,N,T,Ee,Zt,Jt,Ye,R,Kt,_e,Qt,Vt,je,M,P,be,Wt,Xt,qe,U,$t,ke,eo,to,Ze,z,A,we,oo,ao,Je,B,io,Te,so,lo,Ke,G,g,Pe,ro,no,Qe,y,ho,Ae,co,fo,ge,uo,po,Ve,ee,mo,We,Y,H,He,vo,yo,Xe,j,Eo,Ce,_o,bo,$e,E,ko,V,wo,To,Se,Po,Ao,et,q,C,Ie,go,Ho,tt,u,Co,De,So,Io,W,Do,Fo,X,Oo,xo,ot,Z,S,Fe,Lo,No,at,J,Ro,Oe,Mo,Uo;return{c(){m=s("p"),ft=a("In general, content can be modified by editing the "),se=s("strong"),ut=a("organisms"),pt=a(" and the pages themselves. Below is a list of the most common changes that you may want to make."),xe=c(),I=s("h2"),_=s("a"),le=s("span"),mt=a("#"),vt=a("Domain/site URL"),Le=c(),$=s("p"),yt=a("The first thing you might want to do is replace the domain of of the site with your own. There are two places where you need to do that:"),Ne=c(),D=s("ul"),p=s("li"),Et=a("In the "),re=s("code"),_t=a("package.json"),bt=a(" file, check the "),ne=s("code"),kt=a("postbuild"),wt=a(" script. Change the domain there to your own, so it ends up like this: "),he=s("code"),Tt=a("svelte-sitemap --domain https://your-domain.com"),Pt=a(". This is used to generate the sitemap of your website, which is used by search engines to index your site."),At=c(),b=s("li"),gt=a("In the "),de=s("code"),Ht=a("src/lib/data/meta.ts"),Ct=a(" file, change the "),ce=s("code"),St=a("siteBaseUrl"),It=a(" property to your own domain. This is used in multiple parts of the app wherever the site needs to link to itself."),Re=c(),F=s("h2"),k=s("a"),fe=s("span"),Dt=a("#"),Ft=a("Header/site logo"),Me=c(),O=s("p"),Ot=a("To replace the logo that appears in the header, modify or replace the contents of the "),ue=s("code"),xt=a("Logo.svelte"),Lt=a(" atom."),Ue=c(),x=s("p"),Nt=a("The links that appear on the header can be modified directly in the "),pe=s("code"),Rt=a("Header.svelte"),Mt=a(" organism."),ze=c(),L=s("h2"),w=s("a"),me=s("span"),Ut=a("#"),zt=a("Hero section"),Be=c(),v=s("p"),Bt=a("The hero section is the first section of the site’s home page. It is composed of a Heading, the "),ve=s("em"),Gt=a("intro"),Yt=a(" text, and a list of buttons/CTAs. The contents of this section can be modified directly in the "),ye=s("code"),jt=a("Hero.svelte"),qt=a(" organism."),Ge=c(),N=s("h2"),T=s("a"),Ee=s("span"),Zt=a("#"),Jt=a("About section"),Ye=c(),R=s("p"),Kt=a("The about section contains another headline, a paragraph of text, some social media links, and optionally an image. The contents of this section can be modified directly in the "),_e=s("code"),Qt=a("About.svelte"),Vt=a(" organism."),je=c(),M=s("h2"),P=s("a"),be=s("span"),Wt=a("#"),Xt=a("Social Links"),qe=c(),U=s("p"),$t=a("The social links are contained in the "),ke=s("code"),eo=a("Socials.svelte"),to=a(" molecule and can be used in any page. This template shows them on the About section and in the Footer."),Ze=c(),z=s("h2"),A=s("a"),we=s("span"),oo=a("#"),ao=a("Footer"),Je=c(),B=s("p"),io=a("The footer contains some credits, a list of social links, and the RSS/Theme toggle. The contents of this section can be modified directly in the "),Te=s("code"),so=a("Footer.svelte"),lo=a(" organism."),Ke=c(),G=s("h2"),g=s("a"),Pe=s("span"),ro=a("#"),no=a("Colors"),Qe=c(),y=s("p"),ho=a("You can change the color palette of the website just by tweaking the "),Ae=s("code"),co=a("_themes.scss"),fo=a(" file. The file uses the "),ge=s("code"),uo=a("define-color"),po=a(" scss function to automatically set the color variables in Hex, RGB and HSL formats, so you can choose whichever format you need."),Ve=c(),ee=s("p"),mo=a("The main theme colors (primary and secondary) have two variants: shade and tint. The shade is a lighter version of the color (darker in dark mode), and the tint should almost match the page’s background, so that in light mode, it’s really bright, and in dark mode, it’s really dark."),We=c(),Y=s("h2"),H=s("a"),He=s("span"),vo=a("#"),yo=a("Fonts"),Xe=c(),j=s("p"),Eo=a("This template uses the Inter, Merriweather and Ubuntu Mono font families. You can change the font family by editing the "),Ce=s("code"),_o=a("_variables.scss"),bo=a(" file, and the code is already set up to accept a default font, a heading font, and a monospace font."),$e=c(),E=s("p"),ko=a("I recommend using "),V=s("a"),wo=a("Fontsource"),To=a(" to import the fonts you need, or self-hosting them. In case you’re using Fontsource, you can import the fonts in "),Se=s("code"),Po=a("global.scss"),Ao=a(" file to make sure they’re available in the entire site."),et=c(),q=s("h2"),C=s("a"),Ie=s("span"),go=a("#"),Ho=a("Favicon"),tt=c(),u=s("p"),Co=a("Favicons are located in the "),De=s("code"),So=a("static/favicons"),Io=a(" folder. I like to use "),W=s("a"),Do=a("Real Favicon Generator"),Fo=a(" to generate mine, but you can use any other tool you like. I wrote "),X=s("a"),Oo=a("a blog post about Favicons"),xo=a(" in case you want to learn more about them."),ot=c(),Z=s("h2"),S=s("a"),Fe=s("span"),Lo=a("#"),No=a("Social Media Link Preview"),at=c(),J=s("p"),Ro=a("You probably want to customize how links to your website look when posted on social media/messaging apps. To do that, you can edit the info in "),Oe=s("code"),Mo=a("src/lib/data/meta.ts"),Uo=a(". There, you can edit the site’s title, description, tags (used by search engines) and the image that appears when sharing a link."),this.h()},l(e){m=l(e,"P",{});var h=r(m);ft=i(h,"In general, content can be modified by editing the "),se=l(h,"STRONG",{});var Wo=r(se);ut=i(Wo,"organisms"),Wo.forEach(o),pt=i(h," and the pages themselves. Below is a list of the most common changes that you may want to make."),h.forEach(o),xe=f(e),I=l(e,"H2",{id:!0});var zo=r(I);_=l(zo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Xo=r(_);le=l(Xo,"SPAN",{});var $o=r(le);mt=i($o,"#"),$o.forEach(o),Xo.forEach(o),vt=i(zo,"Domain/site URL"),zo.forEach(o),Le=f(e),$=l(e,"P",{});var ea=r($);yt=i(ea,"The first thing you might want to do is replace the domain of of the site with your own. There are two places where you need to do that:"),ea.forEach(o),Ne=f(e),D=l(e,"UL",{});var it=r(D);p=l(it,"LI",{});var K=r(p);Et=i(K,"In the "),re=l(K,"CODE",{});var ta=r(re);_t=i(ta,"package.json"),ta.forEach(o),bt=i(K," file, check the "),ne=l(K,"CODE",{});var oa=r(ne);kt=i(oa,"postbuild"),oa.forEach(o),wt=i(K," script. Change the domain there to your own, so it ends up like this: "),he=l(K,"CODE",{});var aa=r(he);Tt=i(aa,"svelte-sitemap --domain https://your-domain.com"),aa.forEach(o),Pt=i(K,". This is used to generate the sitemap of your website, which is used by search engines to index your site."),K.forEach(o),At=f(it),b=l(it,"LI",{});var te=r(b);gt=i(te,"In the "),de=l(te,"CODE",{});var ia=r(de);Ht=i(ia,"src/lib/data/meta.ts"),ia.forEach(o),Ct=i(te," file, change the "),ce=l(te,"CODE",{});var sa=r(ce);St=i(sa,"siteBaseUrl"),sa.forEach(o),It=i(te," property to your own domain. This is used in multiple parts of the app wherever the site needs to link to itself."),te.forEach(o),it.forEach(o),Re=f(e),F=l(e,"H2",{id:!0});var Bo=r(F);k=l(Bo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var la=r(k);fe=l(la,"SPAN",{});var ra=r(fe);Dt=i(ra,"#"),ra.forEach(o),la.forEach(o),Ft=i(Bo,"Header/site logo"),Bo.forEach(o),Me=f(e),O=l(e,"P",{});var st=r(O);Ot=i(st,"To replace the logo that appears in the header, modify or replace the contents of the "),ue=l(st,"CODE",{});var na=r(ue);xt=i(na,"Logo.svelte"),na.forEach(o),Lt=i(st," atom."),st.forEach(o),Ue=f(e),x=l(e,"P",{});var lt=r(x);Nt=i(lt,"The links that appear on the header can be modified directly in the "),pe=l(lt,"CODE",{});var ha=r(pe);Rt=i(ha,"Header.svelte"),ha.forEach(o),Mt=i(lt," organism."),lt.forEach(o),ze=f(e),L=l(e,"H2",{id:!0});var Go=r(L);w=l(Go,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var da=r(w);me=l(da,"SPAN",{});var ca=r(me);Ut=i(ca,"#"),ca.forEach(o),da.forEach(o),zt=i(Go,"Hero section"),Go.forEach(o),Be=f(e),v=l(e,"P",{});var oe=r(v);Bt=i(oe,"The hero section is the first section of the site’s home page. It is composed of a Heading, the "),ve=l(oe,"EM",{});var fa=r(ve);Gt=i(fa,"intro"),fa.forEach(o),Yt=i(oe," text, and a list of buttons/CTAs. The contents of this section can be modified directly in the "),ye=l(oe,"CODE",{});var ua=r(ye);jt=i(ua,"Hero.svelte"),ua.forEach(o),qt=i(oe," organism."),oe.forEach(o),Ge=f(e),N=l(e,"H2",{id:!0});var Yo=r(N);T=l(Yo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var pa=r(T);Ee=l(pa,"SPAN",{});var ma=r(Ee);Zt=i(ma,"#"),ma.forEach(o),pa.forEach(o),Jt=i(Yo,"About section"),Yo.forEach(o),Ye=f(e),R=l(e,"P",{});var rt=r(R);Kt=i(rt,"The about section contains another headline, a paragraph of text, some social media links, and optionally an image. The contents of this section can be modified directly in the "),_e=l(rt,"CODE",{});var va=r(_e);Qt=i(va,"About.svelte"),va.forEach(o),Vt=i(rt," organism."),rt.forEach(o),je=f(e),M=l(e,"H2",{id:!0});var jo=r(M);P=l(jo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var ya=r(P);be=l(ya,"SPAN",{});var Ea=r(be);Wt=i(Ea,"#"),Ea.forEach(o),ya.forEach(o),Xt=i(jo,"Social Links"),jo.forEach(o),qe=f(e),U=l(e,"P",{});var nt=r(U);$t=i(nt,"The social links are contained in the "),ke=l(nt,"CODE",{});var _a=r(ke);eo=i(_a,"Socials.svelte"),_a.forEach(o),to=i(nt," molecule and can be used in any page. This template shows them on the About section and in the Footer."),nt.forEach(o),Ze=f(e),z=l(e,"H2",{id:!0});var qo=r(z);A=l(qo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var ba=r(A);we=l(ba,"SPAN",{});var ka=r(we);oo=i(ka,"#"),ka.forEach(o),ba.forEach(o),ao=i(qo,"Footer"),qo.forEach(o),Je=f(e),B=l(e,"P",{});var ht=r(B);io=i(ht,"The footer contains some credits, a list of social links, and the RSS/Theme toggle. The contents of this section can be modified directly in the "),Te=l(ht,"CODE",{});var wa=r(Te);so=i(wa,"Footer.svelte"),wa.forEach(o),lo=i(ht," organism."),ht.forEach(o),Ke=f(e),G=l(e,"H2",{id:!0});var Zo=r(G);g=l(Zo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ta=r(g);Pe=l(Ta,"SPAN",{});var Pa=r(Pe);ro=i(Pa,"#"),Pa.forEach(o),Ta.forEach(o),no=i(Zo,"Colors"),Zo.forEach(o),Qe=f(e),y=l(e,"P",{});var ae=r(y);ho=i(ae,"You can change the color palette of the website just by tweaking the "),Ae=l(ae,"CODE",{});var Aa=r(Ae);co=i(Aa,"_themes.scss"),Aa.forEach(o),fo=i(ae," file. The file uses the "),ge=l(ae,"CODE",{});var ga=r(ge);uo=i(ga,"define-color"),ga.forEach(o),po=i(ae," scss function to automatically set the color variables in Hex, RGB and HSL formats, so you can choose whichever format you need."),ae.forEach(o),Ve=f(e),ee=l(e,"P",{});var Ha=r(ee);mo=i(Ha,"The main theme colors (primary and secondary) have two variants: shade and tint. The shade is a lighter version of the color (darker in dark mode), and the tint should almost match the page’s background, so that in light mode, it’s really bright, and in dark mode, it’s really dark."),Ha.forEach(o),We=f(e),Y=l(e,"H2",{id:!0});var Jo=r(Y);H=l(Jo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ca=r(H);He=l(Ca,"SPAN",{});var Sa=r(He);vo=i(Sa,"#"),Sa.forEach(o),Ca.forEach(o),yo=i(Jo,"Fonts"),Jo.forEach(o),Xe=f(e),j=l(e,"P",{});var dt=r(j);Eo=i(dt,"This template uses the Inter, Merriweather and Ubuntu Mono font families. You can change the font family by editing the "),Ce=l(dt,"CODE",{});var Ia=r(Ce);_o=i(Ia,"_variables.scss"),Ia.forEach(o),bo=i(dt," file, and the code is already set up to accept a default font, a heading font, and a monospace font."),dt.forEach(o),$e=f(e),E=l(e,"P",{});var ie=r(E);ko=i(ie,"I recommend using "),V=l(ie,"A",{href:!0,rel:!0});var Da=r(V);wo=i(Da,"Fontsource"),Da.forEach(o),To=i(ie," to import the fonts you need, or self-hosting them. In case you’re using Fontsource, you can import the fonts in "),Se=l(ie,"CODE",{});var Fa=r(Se);Po=i(Fa,"global.scss"),Fa.forEach(o),Ao=i(ie," file to make sure they’re available in the entire site."),ie.forEach(o),et=f(e),q=l(e,"H2",{id:!0});var Ko=r(q);C=l(Ko,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Oa=r(C);Ie=l(Oa,"SPAN",{});var xa=r(Ie);go=i(xa,"#"),xa.forEach(o),Oa.forEach(o),Ho=i(Ko,"Favicon"),Ko.forEach(o),tt=f(e),u=l(e,"P",{});var Q=r(u);Co=i(Q,"Favicons are located in the "),De=l(Q,"CODE",{});var La=r(De);So=i(La,"static/favicons"),La.forEach(o),Io=i(Q," folder. I like to use "),W=l(Q,"A",{href:!0,rel:!0});var Na=r(W);Do=i(Na,"Real Favicon Generator"),Na.forEach(o),Fo=i(Q," to generate mine, but you can use any other tool you like. I wrote "),X=l(Q,"A",{href:!0,rel:!0});var Ra=r(X);Oo=i(Ra,"a blog post about Favicons"),Ra.forEach(o),xo=i(Q," in case you want to learn more about them."),Q.forEach(o),ot=f(e),Z=l(e,"H2",{id:!0});var Qo=r(Z);S=l(Qo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ma=r(S);Fe=l(Ma,"SPAN",{});var Ua=r(Fe);Lo=i(Ua,"#"),Ua.forEach(o),Ma.forEach(o),No=i(Qo,"Social Media Link Preview"),Qo.forEach(o),at=f(e),J=l(e,"P",{});var ct=r(J);Ro=i(ct,"You probably want to customize how links to your website look when posted on social media/messaging apps. To do that, you can edit the info in "),Oe=l(ct,"CODE",{});var za=r(Oe);Mo=i(za,"src/lib/data/meta.ts"),za.forEach(o),Uo=i(ct,". There, you can edit the site’s title, description, tags (used by search engines) and the image that appears when sharing a link."),ct.forEach(o),this.h()},h(){n(_,"class","heading-link"),n(_,"title","Permalink"),n(_,"aria-hidden","true"),n(_,"href","#domainsite-url"),n(I,"id","domainsite-url"),n(k,"class","heading-link"),n(k,"title","Permalink"),n(k,"aria-hidden","true"),n(k,"href","#headersite-logo"),n(F,"id","headersite-logo"),n(w,"class","heading-link"),n(w,"title","Permalink"),n(w,"aria-hidden","true"),n(w,"href","#hero-section"),n(L,"id","hero-section"),n(T,"class","heading-link"),n(T,"title","Permalink"),n(T,"aria-hidden","true"),n(T,"href","#about-section"),n(N,"id","about-section"),n(P,"class","heading-link"),n(P,"title","Permalink"),n(P,"aria-hidden","true"),n(P,"href","#social-links"),n(M,"id","social-links"),n(A,"class","heading-link"),n(A,"title","Permalink"),n(A,"aria-hidden","true"),n(A,"href","#footer"),n(z,"id","footer"),n(g,"class","heading-link"),n(g,"title","Permalink"),n(g,"aria-hidden","true"),n(g,"href","#colors"),n(G,"id","colors"),n(H,"class","heading-link"),n(H,"title","Permalink"),n(H,"aria-hidden","true"),n(H,"href","#fonts"),n(Y,"id","fonts"),n(V,"href","https://fontsource.org/"),n(V,"rel","nofollow"),n(C,"class","heading-link"),n(C,"title","Permalink"),n(C,"aria-hidden","true"),n(C,"href","#favicon"),n(q,"id","favicon"),n(W,"href","https://realfavicongenerator.net"),n(W,"rel","nofollow"),n(X,"href","https://fantinel.dev/fixing-favicons"),n(X,"rel","nofollow"),n(S,"class","heading-link"),n(S,"title","Permalink"),n(S,"aria-hidden","true"),n(S,"href","#social-media-link-preview"),n(Z,"id","social-media-link-preview")},m(e,h){d(e,m,h),t(m,ft),t(m,se),t(se,ut),t(m,pt),d(e,xe,h),d(e,I,h),t(I,_),t(_,le),t(le,mt),t(I,vt),d(e,Le,h),d(e,$,h),t($,yt),d(e,Ne,h),d(e,D,h),t(D,p),t(p,Et),t(p,re),t(re,_t),t(p,bt),t(p,ne),t(ne,kt),t(p,wt),t(p,he),t(he,Tt),t(p,Pt),t(D,At),t(D,b),t(b,gt),t(b,de),t(de,Ht),t(b,Ct),t(b,ce),t(ce,St),t(b,It),d(e,Re,h),d(e,F,h),t(F,k),t(k,fe),t(fe,Dt),t(F,Ft),d(e,Me,h),d(e,O,h),t(O,Ot),t(O,ue),t(ue,xt),t(O,Lt),d(e,Ue,h),d(e,x,h),t(x,Nt),t(x,pe),t(pe,Rt),t(x,Mt),d(e,ze,h),d(e,L,h),t(L,w),t(w,me),t(me,Ut),t(L,zt),d(e,Be,h),d(e,v,h),t(v,Bt),t(v,ve),t(ve,Gt),t(v,Yt),t(v,ye),t(ye,jt),t(v,qt),d(e,Ge,h),d(e,N,h),t(N,T),t(T,Ee),t(Ee,Zt),t(N,Jt),d(e,Ye,h),d(e,R,h),t(R,Kt),t(R,_e),t(_e,Qt),t(R,Vt),d(e,je,h),d(e,M,h),t(M,P),t(P,be),t(be,Wt),t(M,Xt),d(e,qe,h),d(e,U,h),t(U,$t),t(U,ke),t(ke,eo),t(U,to),d(e,Ze,h),d(e,z,h),t(z,A),t(A,we),t(we,oo),t(z,ao),d(e,Je,h),d(e,B,h),t(B,io),t(B,Te),t(Te,so),t(B,lo),d(e,Ke,h),d(e,G,h),t(G,g),t(g,Pe),t(Pe,ro),t(G,no),d(e,Qe,h),d(e,y,h),t(y,ho),t(y,Ae),t(Ae,co),t(y,fo),t(y,ge),t(ge,uo),t(y,po),d(e,Ve,h),d(e,ee,h),t(ee,mo),d(e,We,h),d(e,Y,h),t(Y,H),t(H,He),t(He,vo),t(Y,yo),d(e,Xe,h),d(e,j,h),t(j,Eo),t(j,Ce),t(Ce,_o),t(j,bo),d(e,$e,h),d(e,E,h),t(E,ko),t(E,V),t(V,wo),t(E,To),t(E,Se),t(Se,Po),t(E,Ao),d(e,et,h),d(e,q,h),t(q,C),t(C,Ie),t(Ie,go),t(q,Ho),d(e,tt,h),d(e,u,h),t(u,Co),t(u,De),t(De,So),t(u,Io),t(u,W),t(W,Do),t(u,Fo),t(u,X),t(X,Oo),t(u,xo),d(e,ot,h),d(e,Z,h),t(Z,S),t(S,Fe),t(Fe,Lo),t(Z,No),d(e,at,h),d(e,J,h),t(J,Ro),t(J,Oe),t(Oe,Mo),t(J,Uo)},p:Vo,i:Vo,o:Vo,d(e){e&&o(m),e&&o(xe),e&&o(I),e&&o(Le),e&&o($),e&&o(Ne),e&&o(D),e&&o(Re),e&&o(F),e&&o(Me),e&&o(O),e&&o(Ue),e&&o(x),e&&o(ze),e&&o(L),e&&o(Be),e&&o(v),e&&o(Ge),e&&o(N),e&&o(Ye),e&&o(R),e&&o(je),e&&o(M),e&&o(qe),e&&o(U),e&&o(Ze),e&&o(z),e&&o(Je),e&&o(B),e&&o(Ke),e&&o(G),e&&o(Qe),e&&o(y),e&&o(Ve),e&&o(ee),e&&o(We),e&&o(Y),e&&o(Xe),e&&o(j),e&&o($e),e&&o(E),e&&o(et),e&&o(q),e&&o(tt),e&&o(u),e&&o(ot),e&&o(Z),e&&o(at),e&&o(J)}}}const Ja={hidden:!0,slug:"customization",title:"How to Customize this Template",date:"2023-04-22T21:55:27.154Z",excerpt:"How to customize what you're seeing here and make it your own.",coverImage:"/images/posts/customization.jpg",tags:["Documentation"]};class Ka extends Ga{constructor(m){super(),Ya(this,m,null,qa,ja,{})}}export{Ka as default,Ja as metadata};
+import{S as Ga,i as Ya,s as ja,k as s,q as a,a as c,l,m as r,r as i,h as o,c as f,n,b as d,G as t,M as Vo}from"../chunks/index.963f39ba.js";function qa(Ba){let m,ft,se,ut,pt,xe,I,_,le,mt,vt,Le,$,yt,Ne,D,p,Et,re,_t,bt,ne,kt,wt,he,Tt,Pt,At,b,gt,de,Ht,Ct,ce,St,It,Re,F,k,fe,Dt,Ft,Me,O,Ot,ue,xt,Lt,Ue,x,Nt,pe,Rt,Mt,ze,L,w,me,Ut,zt,Be,v,Bt,ve,Gt,Yt,ye,jt,qt,Ge,N,T,Ee,Zt,Jt,Ye,R,Kt,_e,Qt,Vt,je,M,P,be,Wt,Xt,qe,U,$t,ke,eo,to,Ze,z,A,we,oo,ao,Je,B,io,Te,so,lo,Ke,G,g,Pe,ro,no,Qe,y,ho,Ae,co,fo,ge,uo,po,Ve,ee,mo,We,Y,H,He,vo,yo,Xe,j,Eo,Ce,_o,bo,$e,E,ko,V,wo,To,Se,Po,Ao,et,q,C,Ie,go,Ho,tt,u,Co,De,So,Io,W,Do,Fo,X,Oo,xo,ot,Z,S,Fe,Lo,No,at,J,Ro,Oe,Mo,Uo;return{c(){m=s("p"),ft=a("In general, content can be modified by editing the "),se=s("strong"),ut=a("organisms"),pt=a(" and the pages themselves. Below is a list of the most common changes that you may want to make."),xe=c(),I=s("h2"),_=s("a"),le=s("span"),mt=a("#"),vt=a("Domain/site URL"),Le=c(),$=s("p"),yt=a("The first thing you might want to do is replace the domain of of the site with your own. There are two places where you need to do that:"),Ne=c(),D=s("ul"),p=s("li"),Et=a("In the "),re=s("code"),_t=a("package.json"),bt=a(" file, check the "),ne=s("code"),kt=a("postbuild"),wt=a(" script. Change the domain there to your own, so it ends up like this: "),he=s("code"),Tt=a("svelte-sitemap --domain https://your-domain.com"),Pt=a(". This is used to generate the sitemap of your website, which is used by search engines to index your site."),At=c(),b=s("li"),gt=a("In the "),de=s("code"),Ht=a("src/lib/data/meta.ts"),Ct=a(" file, change the "),ce=s("code"),St=a("siteBaseUrl"),It=a(" property to your own domain. This is used in multiple parts of the app wherever the site needs to link to itself."),Re=c(),F=s("h2"),k=s("a"),fe=s("span"),Dt=a("#"),Ft=a("Header/site logo"),Me=c(),O=s("p"),Ot=a("To replace the logo that appears in the header, modify or replace the contents of the "),ue=s("code"),xt=a("Logo.svelte"),Lt=a(" atom."),Ue=c(),x=s("p"),Nt=a("The links that appear on the header can be modified directly in the "),pe=s("code"),Rt=a("Header.svelte"),Mt=a(" organism."),ze=c(),L=s("h2"),w=s("a"),me=s("span"),Ut=a("#"),zt=a("Hero section"),Be=c(),v=s("p"),Bt=a("The hero section is the first section of the site’s home page. It is composed of a Heading, the "),ve=s("em"),Gt=a("intro"),Yt=a(" text, and a list of buttons/CTAs. The contents of this section can be modified directly in the "),ye=s("code"),jt=a("Hero.svelte"),qt=a(" organism."),Ge=c(),N=s("h2"),T=s("a"),Ee=s("span"),Zt=a("#"),Jt=a("About section"),Ye=c(),R=s("p"),Kt=a("The about section contains another headline, a paragraph of text, some social media links, and optionally an image. The contents of this section can be modified directly in the "),_e=s("code"),Qt=a("About.svelte"),Vt=a(" organism."),je=c(),M=s("h2"),P=s("a"),be=s("span"),Wt=a("#"),Xt=a("Social Links"),qe=c(),U=s("p"),$t=a("The social links are contained in the "),ke=s("code"),eo=a("Socials.svelte"),to=a(" molecule and can be used in any page. This template shows them on the About section and in the Footer."),Ze=c(),z=s("h2"),A=s("a"),we=s("span"),oo=a("#"),ao=a("Footer"),Je=c(),B=s("p"),io=a("The footer contains some credits, a list of social links, and the RSS/Theme toggle. The contents of this section can be modified directly in the "),Te=s("code"),so=a("Footer.svelte"),lo=a(" organism."),Ke=c(),G=s("h2"),g=s("a"),Pe=s("span"),ro=a("#"),no=a("Colors"),Qe=c(),y=s("p"),ho=a("You can change the color palette of the website just by tweaking the "),Ae=s("code"),co=a("_themes.scss"),fo=a(" file. The file uses the "),ge=s("code"),uo=a("define-color"),po=a(" scss function to automatically set the color variables in Hex, RGB and HSL formats, so you can choose whichever format you need."),Ve=c(),ee=s("p"),mo=a("The main theme colors (primary and secondary) have two variants: shade and tint. The shade is a lighter version of the color (darker in dark mode), and the tint should almost match the page’s background, so that in light mode, it’s really bright, and in dark mode, it’s really dark."),We=c(),Y=s("h2"),H=s("a"),He=s("span"),vo=a("#"),yo=a("Fonts"),Xe=c(),j=s("p"),Eo=a("This template uses the Inter, Merriweather and Ubuntu Mono font families. You can change the font family by editing the "),Ce=s("code"),_o=a("_variables.scss"),bo=a(" file, and the code is already set up to accept a default font, a heading font, and a monospace font."),$e=c(),E=s("p"),ko=a("I recommend using "),V=s("a"),wo=a("Fontsource"),To=a(" to import the fonts you need, or self-hosting them. In case you’re using Fontsource, you can import the fonts in "),Se=s("code"),Po=a("global.scss"),Ao=a(" file to make sure they’re available in the entire site."),et=c(),q=s("h2"),C=s("a"),Ie=s("span"),go=a("#"),Ho=a("Favicon"),tt=c(),u=s("p"),Co=a("Favicons are located in the "),De=s("code"),So=a("static/favicons"),Io=a(" folder. I like to use "),W=s("a"),Do=a("Real Favicon Generator"),Fo=a(" to generate mine, but you can use any other tool you like. I wrote "),X=s("a"),Oo=a("a blog post about Favicons"),xo=a(" in case you want to learn more about them."),ot=c(),Z=s("h2"),S=s("a"),Fe=s("span"),Lo=a("#"),No=a("Social Media Link Preview"),at=c(),J=s("p"),Ro=a("You probably want to customize how links to your website look when posted on social media/messaging apps. To do that, you can edit the info in "),Oe=s("code"),Mo=a("src/lib/data/meta.ts"),Uo=a(". There, you can edit the site’s title, description, tags (used by search engines) and the image that appears when sharing a link."),this.h()},l(e){m=l(e,"P",{});var h=r(m);ft=i(h,"In general, content can be modified by editing the "),se=l(h,"STRONG",{});var Wo=r(se);ut=i(Wo,"organisms"),Wo.forEach(o),pt=i(h," and the pages themselves. Below is a list of the most common changes that you may want to make."),h.forEach(o),xe=f(e),I=l(e,"H2",{id:!0});var zo=r(I);_=l(zo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Xo=r(_);le=l(Xo,"SPAN",{});var $o=r(le);mt=i($o,"#"),$o.forEach(o),Xo.forEach(o),vt=i(zo,"Domain/site URL"),zo.forEach(o),Le=f(e),$=l(e,"P",{});var ea=r($);yt=i(ea,"The first thing you might want to do is replace the domain of of the site with your own. There are two places where you need to do that:"),ea.forEach(o),Ne=f(e),D=l(e,"UL",{});var it=r(D);p=l(it,"LI",{});var K=r(p);Et=i(K,"In the "),re=l(K,"CODE",{});var ta=r(re);_t=i(ta,"package.json"),ta.forEach(o),bt=i(K," file, check the "),ne=l(K,"CODE",{});var oa=r(ne);kt=i(oa,"postbuild"),oa.forEach(o),wt=i(K," script. Change the domain there to your own, so it ends up like this: "),he=l(K,"CODE",{});var aa=r(he);Tt=i(aa,"svelte-sitemap --domain https://your-domain.com"),aa.forEach(o),Pt=i(K,". This is used to generate the sitemap of your website, which is used by search engines to index your site."),K.forEach(o),At=f(it),b=l(it,"LI",{});var te=r(b);gt=i(te,"In the "),de=l(te,"CODE",{});var ia=r(de);Ht=i(ia,"src/lib/data/meta.ts"),ia.forEach(o),Ct=i(te," file, change the "),ce=l(te,"CODE",{});var sa=r(ce);St=i(sa,"siteBaseUrl"),sa.forEach(o),It=i(te," property to your own domain. This is used in multiple parts of the app wherever the site needs to link to itself."),te.forEach(o),it.forEach(o),Re=f(e),F=l(e,"H2",{id:!0});var Bo=r(F);k=l(Bo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var la=r(k);fe=l(la,"SPAN",{});var ra=r(fe);Dt=i(ra,"#"),ra.forEach(o),la.forEach(o),Ft=i(Bo,"Header/site logo"),Bo.forEach(o),Me=f(e),O=l(e,"P",{});var st=r(O);Ot=i(st,"To replace the logo that appears in the header, modify or replace the contents of the "),ue=l(st,"CODE",{});var na=r(ue);xt=i(na,"Logo.svelte"),na.forEach(o),Lt=i(st," atom."),st.forEach(o),Ue=f(e),x=l(e,"P",{});var lt=r(x);Nt=i(lt,"The links that appear on the header can be modified directly in the "),pe=l(lt,"CODE",{});var ha=r(pe);Rt=i(ha,"Header.svelte"),ha.forEach(o),Mt=i(lt," organism."),lt.forEach(o),ze=f(e),L=l(e,"H2",{id:!0});var Go=r(L);w=l(Go,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var da=r(w);me=l(da,"SPAN",{});var ca=r(me);Ut=i(ca,"#"),ca.forEach(o),da.forEach(o),zt=i(Go,"Hero section"),Go.forEach(o),Be=f(e),v=l(e,"P",{});var oe=r(v);Bt=i(oe,"The hero section is the first section of the site’s home page. It is composed of a Heading, the "),ve=l(oe,"EM",{});var fa=r(ve);Gt=i(fa,"intro"),fa.forEach(o),Yt=i(oe," text, and a list of buttons/CTAs. The contents of this section can be modified directly in the "),ye=l(oe,"CODE",{});var ua=r(ye);jt=i(ua,"Hero.svelte"),ua.forEach(o),qt=i(oe," organism."),oe.forEach(o),Ge=f(e),N=l(e,"H2",{id:!0});var Yo=r(N);T=l(Yo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var pa=r(T);Ee=l(pa,"SPAN",{});var ma=r(Ee);Zt=i(ma,"#"),ma.forEach(o),pa.forEach(o),Jt=i(Yo,"About section"),Yo.forEach(o),Ye=f(e),R=l(e,"P",{});var rt=r(R);Kt=i(rt,"The about section contains another headline, a paragraph of text, some social media links, and optionally an image. The contents of this section can be modified directly in the "),_e=l(rt,"CODE",{});var va=r(_e);Qt=i(va,"About.svelte"),va.forEach(o),Vt=i(rt," organism."),rt.forEach(o),je=f(e),M=l(e,"H2",{id:!0});var jo=r(M);P=l(jo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var ya=r(P);be=l(ya,"SPAN",{});var Ea=r(be);Wt=i(Ea,"#"),Ea.forEach(o),ya.forEach(o),Xt=i(jo,"Social Links"),jo.forEach(o),qe=f(e),U=l(e,"P",{});var nt=r(U);$t=i(nt,"The social links are contained in the "),ke=l(nt,"CODE",{});var _a=r(ke);eo=i(_a,"Socials.svelte"),_a.forEach(o),to=i(nt," molecule and can be used in any page. This template shows them on the About section and in the Footer."),nt.forEach(o),Ze=f(e),z=l(e,"H2",{id:!0});var qo=r(z);A=l(qo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var ba=r(A);we=l(ba,"SPAN",{});var ka=r(we);oo=i(ka,"#"),ka.forEach(o),ba.forEach(o),ao=i(qo,"Footer"),qo.forEach(o),Je=f(e),B=l(e,"P",{});var ht=r(B);io=i(ht,"The footer contains some credits, a list of social links, and the RSS/Theme toggle. The contents of this section can be modified directly in the "),Te=l(ht,"CODE",{});var wa=r(Te);so=i(wa,"Footer.svelte"),wa.forEach(o),lo=i(ht," organism."),ht.forEach(o),Ke=f(e),G=l(e,"H2",{id:!0});var Zo=r(G);g=l(Zo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ta=r(g);Pe=l(Ta,"SPAN",{});var Pa=r(Pe);ro=i(Pa,"#"),Pa.forEach(o),Ta.forEach(o),no=i(Zo,"Colors"),Zo.forEach(o),Qe=f(e),y=l(e,"P",{});var ae=r(y);ho=i(ae,"You can change the color palette of the website just by tweaking the "),Ae=l(ae,"CODE",{});var Aa=r(Ae);co=i(Aa,"_themes.scss"),Aa.forEach(o),fo=i(ae," file. The file uses the "),ge=l(ae,"CODE",{});var ga=r(ge);uo=i(ga,"define-color"),ga.forEach(o),po=i(ae," scss function to automatically set the color variables in Hex, RGB and HSL formats, so you can choose whichever format you need."),ae.forEach(o),Ve=f(e),ee=l(e,"P",{});var Ha=r(ee);mo=i(Ha,"The main theme colors (primary and secondary) have two variants: shade and tint. The shade is a lighter version of the color (darker in dark mode), and the tint should almost match the page’s background, so that in light mode, it’s really bright, and in dark mode, it’s really dark."),Ha.forEach(o),We=f(e),Y=l(e,"H2",{id:!0});var Jo=r(Y);H=l(Jo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ca=r(H);He=l(Ca,"SPAN",{});var Sa=r(He);vo=i(Sa,"#"),Sa.forEach(o),Ca.forEach(o),yo=i(Jo,"Fonts"),Jo.forEach(o),Xe=f(e),j=l(e,"P",{});var dt=r(j);Eo=i(dt,"This template uses the Inter, Merriweather and Ubuntu Mono font families. You can change the font family by editing the "),Ce=l(dt,"CODE",{});var Ia=r(Ce);_o=i(Ia,"_variables.scss"),Ia.forEach(o),bo=i(dt," file, and the code is already set up to accept a default font, a heading font, and a monospace font."),dt.forEach(o),$e=f(e),E=l(e,"P",{});var ie=r(E);ko=i(ie,"I recommend using "),V=l(ie,"A",{href:!0,rel:!0});var Da=r(V);wo=i(Da,"Fontsource"),Da.forEach(o),To=i(ie," to import the fonts you need, or self-hosting them. In case you’re using Fontsource, you can import the fonts in "),Se=l(ie,"CODE",{});var Fa=r(Se);Po=i(Fa,"global.scss"),Fa.forEach(o),Ao=i(ie," file to make sure they’re available in the entire site."),ie.forEach(o),et=f(e),q=l(e,"H2",{id:!0});var Ko=r(q);C=l(Ko,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Oa=r(C);Ie=l(Oa,"SPAN",{});var xa=r(Ie);go=i(xa,"#"),xa.forEach(o),Oa.forEach(o),Ho=i(Ko,"Favicon"),Ko.forEach(o),tt=f(e),u=l(e,"P",{});var Q=r(u);Co=i(Q,"Favicons are located in the "),De=l(Q,"CODE",{});var La=r(De);So=i(La,"static/favicons"),La.forEach(o),Io=i(Q," folder. I like to use "),W=l(Q,"A",{href:!0,rel:!0});var Na=r(W);Do=i(Na,"Real Favicon Generator"),Na.forEach(o),Fo=i(Q," to generate mine, but you can use any other tool you like. I wrote "),X=l(Q,"A",{href:!0,rel:!0});var Ra=r(X);Oo=i(Ra,"a blog post about Favicons"),Ra.forEach(o),xo=i(Q," in case you want to learn more about them."),Q.forEach(o),ot=f(e),Z=l(e,"H2",{id:!0});var Qo=r(Z);S=l(Qo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ma=r(S);Fe=l(Ma,"SPAN",{});var Ua=r(Fe);Lo=i(Ua,"#"),Ua.forEach(o),Ma.forEach(o),No=i(Qo,"Social Media Link Preview"),Qo.forEach(o),at=f(e),J=l(e,"P",{});var ct=r(J);Ro=i(ct,"You probably want to customize how links to your website look when posted on social media/messaging apps. To do that, you can edit the info in "),Oe=l(ct,"CODE",{});var za=r(Oe);Mo=i(za,"src/lib/data/meta.ts"),za.forEach(o),Uo=i(ct,". There, you can edit the site’s title, description, tags (used by search engines) and the image that appears when sharing a link."),ct.forEach(o),this.h()},h(){n(_,"class","heading-link"),n(_,"title","Permalink"),n(_,"aria-hidden","true"),n(_,"href","#domainsite-url"),n(I,"id","domainsite-url"),n(k,"class","heading-link"),n(k,"title","Permalink"),n(k,"aria-hidden","true"),n(k,"href","#headersite-logo"),n(F,"id","headersite-logo"),n(w,"class","heading-link"),n(w,"title","Permalink"),n(w,"aria-hidden","true"),n(w,"href","#hero-section"),n(L,"id","hero-section"),n(T,"class","heading-link"),n(T,"title","Permalink"),n(T,"aria-hidden","true"),n(T,"href","#about-section"),n(N,"id","about-section"),n(P,"class","heading-link"),n(P,"title","Permalink"),n(P,"aria-hidden","true"),n(P,"href","#social-links"),n(M,"id","social-links"),n(A,"class","heading-link"),n(A,"title","Permalink"),n(A,"aria-hidden","true"),n(A,"href","#footer"),n(z,"id","footer"),n(g,"class","heading-link"),n(g,"title","Permalink"),n(g,"aria-hidden","true"),n(g,"href","#colors"),n(G,"id","colors"),n(H,"class","heading-link"),n(H,"title","Permalink"),n(H,"aria-hidden","true"),n(H,"href","#fonts"),n(Y,"id","fonts"),n(V,"href","https://fontsource.org/"),n(V,"rel","nofollow"),n(C,"class","heading-link"),n(C,"title","Permalink"),n(C,"aria-hidden","true"),n(C,"href","#favicon"),n(q,"id","favicon"),n(W,"href","https://realfavicongenerator.net"),n(W,"rel","nofollow"),n(X,"href","https://fantinel.dev/fixing-favicons"),n(X,"rel","nofollow"),n(S,"class","heading-link"),n(S,"title","Permalink"),n(S,"aria-hidden","true"),n(S,"href","#social-media-link-preview"),n(Z,"id","social-media-link-preview")},m(e,h){d(e,m,h),t(m,ft),t(m,se),t(se,ut),t(m,pt),d(e,xe,h),d(e,I,h),t(I,_),t(_,le),t(le,mt),t(I,vt),d(e,Le,h),d(e,$,h),t($,yt),d(e,Ne,h),d(e,D,h),t(D,p),t(p,Et),t(p,re),t(re,_t),t(p,bt),t(p,ne),t(ne,kt),t(p,wt),t(p,he),t(he,Tt),t(p,Pt),t(D,At),t(D,b),t(b,gt),t(b,de),t(de,Ht),t(b,Ct),t(b,ce),t(ce,St),t(b,It),d(e,Re,h),d(e,F,h),t(F,k),t(k,fe),t(fe,Dt),t(F,Ft),d(e,Me,h),d(e,O,h),t(O,Ot),t(O,ue),t(ue,xt),t(O,Lt),d(e,Ue,h),d(e,x,h),t(x,Nt),t(x,pe),t(pe,Rt),t(x,Mt),d(e,ze,h),d(e,L,h),t(L,w),t(w,me),t(me,Ut),t(L,zt),d(e,Be,h),d(e,v,h),t(v,Bt),t(v,ve),t(ve,Gt),t(v,Yt),t(v,ye),t(ye,jt),t(v,qt),d(e,Ge,h),d(e,N,h),t(N,T),t(T,Ee),t(Ee,Zt),t(N,Jt),d(e,Ye,h),d(e,R,h),t(R,Kt),t(R,_e),t(_e,Qt),t(R,Vt),d(e,je,h),d(e,M,h),t(M,P),t(P,be),t(be,Wt),t(M,Xt),d(e,qe,h),d(e,U,h),t(U,$t),t(U,ke),t(ke,eo),t(U,to),d(e,Ze,h),d(e,z,h),t(z,A),t(A,we),t(we,oo),t(z,ao),d(e,Je,h),d(e,B,h),t(B,io),t(B,Te),t(Te,so),t(B,lo),d(e,Ke,h),d(e,G,h),t(G,g),t(g,Pe),t(Pe,ro),t(G,no),d(e,Qe,h),d(e,y,h),t(y,ho),t(y,Ae),t(Ae,co),t(y,fo),t(y,ge),t(ge,uo),t(y,po),d(e,Ve,h),d(e,ee,h),t(ee,mo),d(e,We,h),d(e,Y,h),t(Y,H),t(H,He),t(He,vo),t(Y,yo),d(e,Xe,h),d(e,j,h),t(j,Eo),t(j,Ce),t(Ce,_o),t(j,bo),d(e,$e,h),d(e,E,h),t(E,ko),t(E,V),t(V,wo),t(E,To),t(E,Se),t(Se,Po),t(E,Ao),d(e,et,h),d(e,q,h),t(q,C),t(C,Ie),t(Ie,go),t(q,Ho),d(e,tt,h),d(e,u,h),t(u,Co),t(u,De),t(De,So),t(u,Io),t(u,W),t(W,Do),t(u,Fo),t(u,X),t(X,Oo),t(u,xo),d(e,ot,h),d(e,Z,h),t(Z,S),t(S,Fe),t(Fe,Lo),t(Z,No),d(e,at,h),d(e,J,h),t(J,Ro),t(J,Oe),t(Oe,Mo),t(J,Uo)},p:Vo,i:Vo,o:Vo,d(e){e&&o(m),e&&o(xe),e&&o(I),e&&o(Le),e&&o($),e&&o(Ne),e&&o(D),e&&o(Re),e&&o(F),e&&o(Me),e&&o(O),e&&o(Ue),e&&o(x),e&&o(ze),e&&o(L),e&&o(Be),e&&o(v),e&&o(Ge),e&&o(N),e&&o(Ye),e&&o(R),e&&o(je),e&&o(M),e&&o(qe),e&&o(U),e&&o(Ze),e&&o(z),e&&o(Je),e&&o(B),e&&o(Ke),e&&o(G),e&&o(Qe),e&&o(y),e&&o(Ve),e&&o(ee),e&&o(We),e&&o(Y),e&&o(Xe),e&&o(j),e&&o($e),e&&o(E),e&&o(et),e&&o(q),e&&o(tt),e&&o(u),e&&o(ot),e&&o(Z),e&&o(at),e&&o(J)}}}const Ja={hidden:!0,slug:"customization",title:"How to Customize this Template",date:"2023-04-22T21:55:27.154Z",excerpt:"How to customize what you're seeing here and make it your own.",coverImage:"/images/posts/customization.jpg",tags:["Documentation"]};class Ka extends Ga{constructor(m){super(),Ya(this,m,null,qa,ja,{})}}export{Ka as default,Ja as metadata};
diff --git a/_app/immutable/entry/(blog-article)-layout.svelte.88b989a1.js b/_app/immutable/entry/(blog-article)-layout.svelte.552a7089.js
similarity index 97%
rename from _app/immutable/entry/(blog-article)-layout.svelte.88b989a1.js
rename to _app/immutable/entry/(blog-article)-layout.svelte.552a7089.js
index 9b10bbf..d664aa4 100644
--- a/_app/immutable/entry/(blog-article)-layout.svelte.88b989a1.js
+++ b/_app/immutable/entry/(blog-article)-layout.svelte.552a7089.js
@@ -1 +1 @@
-import{S as ve,i as ye,s as pe,y as O,z as B,A as J,g as N,d as C,B as G,k as I,l as H,m as z,h as m,n as _,b as p,v as q,f as K,H as he,C as ge,e as Q,a as P,I as $e,c as F,G as W,D as Te,E as De,F as Me,q as L,r as Y,u as X}from"../chunks/index.889feda2.js";import{H as ke,F as be}from"../chunks/Footer.d6dce7f9.js";import{C as Ne,B as we,T as Ie}from"../chunks/ContentSection.a48a4166.js";import{t as R,s as j,k as He}from"../chunks/meta.65863fbf.js";import{I as Ee}from"../chunks/Image.9fd0349e.js";var Ae=/d{1,4}|D{3,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|W{1,2}|[LlopSZN]|"[^"]*"|'[^']*'/g,Se=/\b(?:[A-Z]{1,3}[A-Z][TC])(?:[-+]\d{4})?|((?:Australian )?(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time)\b/g,Ce=/[^-+\dA-Z]/g;function x(i,t,l,n){if(arguments.length===1&&typeof i=="string"&&!/\d/.test(i)&&(t=i,i=void 0),i=i||i===0?i:new Date,i instanceof Date||(i=new Date(i)),isNaN(i))throw TypeError("Invalid date");t=String(te[t]||t||te.default);var e=t.slice(0,4);(e==="UTC:"||e==="GMT:")&&(t=t.slice(4),l=!0,e==="GMT:"&&(n=!0));var o=function(){return l?"getUTC":"get"},a=function(){return i[o()+"Date"]()},f=function(){return i[o()+"Day"]()},s=function(){return i[o()+"Month"]()},T=function(){return i[o()+"FullYear"]()},h=function(){return i[o()+"Hours"]()},k=function(){return i[o()+"Minutes"]()},A=function(){return i[o()+"Seconds"]()},w=function(){return i[o()+"Milliseconds"]()},v=function(){return l?0:i.getTimezoneOffset()},g=function(){return Pe(i)},c=function(){return Fe(i)},$={d:function(){return a()},dd:function(){return Z(a())},ddd:function(){return U.dayNames[f()]},DDD:function(){return ne({y:T(),m:s(),d:a(),_:o(),dayName:U.dayNames[f()],short:!0})},dddd:function(){return U.dayNames[f()+7]},DDDD:function(){return ne({y:T(),m:s(),d:a(),_:o(),dayName:U.dayNames[f()+7]})},m:function(){return s()+1},mm:function(){return Z(s()+1)},mmm:function(){return U.monthNames[s()]},mmmm:function(){return U.monthNames[s()+12]},yy:function(){return String(T()).slice(2)},yyyy:function(){return Z(T(),4)},h:function(){return h()%12||12},hh:function(){return Z(h()%12||12)},H:function(){return h()},HH:function(){return Z(h())},M:function(){return k()},MM:function(){return Z(k())},s:function(){return A()},ss:function(){return Z(A())},l:function(){return Z(w(),3)},L:function(){return Z(Math.floor(w()/10))},t:function(){return h()<12?U.timeNames[0]:U.timeNames[1]},tt:function(){return h()<12?U.timeNames[2]:U.timeNames[3]},T:function(){return h()<12?U.timeNames[4]:U.timeNames[5]},TT:function(){return h()<12?U.timeNames[6]:U.timeNames[7]},Z:function(){return n?"GMT":l?"UTC":We(i)},o:function(){return(v()>0?"-":"+")+Z(Math.floor(Math.abs(v())/60)*100+Math.abs(v())%60,4)},p:function(){return(v()>0?"-":"+")+Z(Math.floor(Math.abs(v())/60),2)+":"+Z(Math.floor(Math.abs(v())%60),2)},S:function(){return["th","st","nd","rd"][a()%10>3?0:(a()%100-a()%10!=10)*a()%10]},W:function(){return g()},WW:function(){return Z(g())},N:function(){return c()}};return t.replace(Ae,function(r){return r in $?$[r]():r.slice(1,r.length-1)})}var te={default:"ddd mmm dd yyyy HH:MM:ss",shortDate:"m/d/yy",paddedShortDate:"mm/dd/yyyy",mediumDate:"mmm d, yyyy",longDate:"mmmm d, yyyy",fullDate:"dddd, mmmm d, yyyy",shortTime:"h:MM TT",mediumTime:"h:MM:ss TT",longTime:"h:MM:ss TT Z",isoDate:"yyyy-mm-dd",isoTime:"HH:MM:ss",isoDateTime:"yyyy-mm-dd'T'HH:MM:sso",isoUtcDateTime:"UTC:yyyy-mm-dd'T'HH:MM:ss'Z'",expiresHeaderFormat:"ddd, dd mmm yyyy HH:MM:ss Z"},U={dayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","January","February","March","April","May","June","July","August","September","October","November","December"],timeNames:["a","p","am","pm","A","P","AM","PM"]},Z=function(t){var l=arguments.length>1&&arguments[1]!==void 0?arguments[1]:2;return String(t).padStart(l,"0")},ne=function(t){var l=t.y,n=t.m,e=t.d,o=t._,a=t.dayName,f=t.short,s=f===void 0?!1:f,T=new Date,h=new Date;h.setDate(h[o+"Date"]()-1);var k=new Date;k.setDate(k[o+"Date"]()+1);var A=function(){return T[o+"Date"]()},w=function(){return T[o+"Month"]()},v=function(){return T[o+"FullYear"]()},g=function(){return h[o+"Date"]()},c=function(){return h[o+"Month"]()},$=function(){return h[o+"FullYear"]()},r=function(){return k[o+"Date"]()},D=function(){return k[o+"Month"]()},b=function(){return k[o+"FullYear"]()};return v()===l&&w()===n&&A()===e?s?"Tdy":"Today":$()===l&&c()===n&&g()===e?s?"Ysd":"Yesterday":b()===l&&D()===n&&r()===e?s?"Tmw":"Tomorrow":a},Pe=function(t){var l=new Date(t.getFullYear(),t.getMonth(),t.getDate());l.setDate(l.getDate()-(l.getDay()+6)%7+3);var n=new Date(l.getFullYear(),0,4);n.setDate(n.getDate()-(n.getDay()+6)%7+3);var e=l.getTimezoneOffset()-n.getTimezoneOffset();l.setHours(l.getHours()-e);var o=(l-n)/(864e5*7);return 1+Math.floor(o)},Fe=function(t){var l=t.getDay();return l===0&&(l=7),l},We=function(t){return(String(t).match(Se)||[""]).pop().replace(Ce,"").replace(/GMT\+0000/g,"UTC")};function re(i,t,l){const n=i.slice();return n[1]=t[l],n}function le(i){let t,l;return t=new we({props:{slug:i[1].slug,title:i[1].title,excerpt:i[1].excerpt,tags:i[1].tags,readingTime:i[1].readingTime,showImage:!1}}),{c(){O(t.$$.fragment)},l(n){B(t.$$.fragment,n)},m(n,e){J(t,n,e),l=!0},p(n,e){const o={};e&1&&(o.slug=n[1].slug),e&1&&(o.title=n[1].title),e&1&&(o.excerpt=n[1].excerpt),e&1&&(o.tags=n[1].tags),e&1&&(o.readingTime=n[1].readingTime),t.$set(o)},i(n){l||(N(t.$$.fragment,n),l=!0)},o(n){C(t.$$.fragment,n),l=!1},d(n){G(t,n)}}}function Ue(i){let t,l,n=i[0],e=[];for(let a=0;a<n.length;a+=1)e[a]=le(re(i,n,a));const o=a=>C(e[a],1,1,()=>{e[a]=null});return{c(){t=I("div");for(let a=0;a<e.length;a+=1)e[a].c();this.h()},l(a){t=H(a,"DIV",{class:!0});var f=z(t);for(let s=0;s<e.length;s+=1)e[s].l(f);f.forEach(m),this.h()},h(){_(t,"class","simple-grid svelte-ypk0wh")},m(a,f){p(a,t,f);for(let s=0;s<e.length;s+=1)e[s]&&e[s].m(t,null);l=!0},p(a,f){if(f&1){n=a[0];let s;for(s=0;s<n.length;s+=1){const T=re(a,n,s);e[s]?(e[s].p(T,f),N(e[s],1)):(e[s]=le(T),e[s].c(),N(e[s],1),e[s].m(t,null))}for(q(),s=n.length;s<e.length;s+=1)o(s);K()}},i(a){if(!l){for(let f=0;f<n.length;f+=1)N(e[f]);l=!0}},o(a){e=e.filter(Boolean);for(let f=0;f<e.length;f+=1)C(e[f]);l=!1},d(a){a&&m(t),he(e,a)}}}function Ve(i){let t,l;return t=new Ne({props:{id:"related-posts",title:"Related Posts",$$slots:{default:[Ue]},$$scope:{ctx:i}}}),{c(){O(t.$$.fragment)},l(n){B(t.$$.fragment,n)},m(n,e){J(t,n,e),l=!0},p(n,[e]){const o={};e&17&&(o.$$scope={dirty:e,ctx:n}),t.$set(o)},i(n){l||(N(t.$$.fragment,n),l=!0)},o(n){C(t.$$.fragment,n),l=!1},d(n){G(t,n)}}}function Ze(i,t,l){let{posts:n}=t;return i.$$set=e=>{"posts"in e&&l(0,n=e.posts)},[n]}class ze extends ve{constructor(t){super(),ye(this,t,Ze,Ve,pe,{posts:0})}}function ae(i,t,l){const n=i.slice();return n[5]=t[l],n}function ie(i){let t,l,n,e,o,a,f,s,T,h,k,A,w,v,g,c,$,r,D,b,y,d,S,V;document.title=c=i[1].title+" - "+R;let E=i[1].coverImage&&oe(i);return{c(){t=I("meta"),n=P(),e=I("meta"),a=P(),f=I("meta"),T=P(),h=I("meta"),A=P(),w=I("link"),g=P(),$=P(),r=I("meta"),b=P(),y=I("meta"),S=P(),E&&E.c(),V=Q(),this.h()},l(u){t=H(u,"META",{name:!0,content:!0}),n=F(u),e=H(u,"META",{name:!0,content:!0}),a=F(u),f=H(u,"META",{property:!0,content:!0}),T=F(u),h=H(u,"META",{name:!0,content:!0}),A=F(u),w=H(u,"LINK",{rel:!0,href:!0}),g=F(u),$=F(u),r=H(u,"META",{property:!0,content:!0}),b=F(u),y=H(u,"META",{name:!0,content:!0}),S=F(u),E&&E.l(u),V=Q(),this.h()},h(){_(t,"name","keywords"),_(t,"content",l=i[0].join(", ")),_(e,"name","description"),_(e,"content",o=i[1].excerpt),_(f,"property","og:description"),_(f,"content",s=i[1].excerpt),_(h,"name","twitter:description"),_(h,"content",k=i[1].excerpt),_(w,"rel","canonical"),_(w,"href",v=j+"/"+i[1].slug),_(r,"property","og:title"),_(r,"content",D=i[1].title+" - "+R),_(y,"name","twitter:title"),_(y,"content",d=i[1].title+" - "+R)},m(u,M){p(u,t,M),p(u,n,M),p(u,e,M),p(u,a,M),p(u,f,M),p(u,T,M),p(u,h,M),p(u,A,M),p(u,w,M),p(u,g,M),p(u,$,M),p(u,r,M),p(u,b,M),p(u,y,M),p(u,S,M),E&&E.m(u,M),p(u,V,M)},p(u,M){M&1&&l!==(l=u[0].join(", "))&&_(t,"content",l),M&2&&o!==(o=u[1].excerpt)&&_(e,"content",o),M&2&&s!==(s=u[1].excerpt)&&_(f,"content",s),M&2&&k!==(k=u[1].excerpt)&&_(h,"content",k),M&2&&v!==(v=j+"/"+u[1].slug)&&_(w,"href",v),M&2&&c!==(c=u[1].title+" - "+R)&&(document.title=c),M&2&&D!==(D=u[1].title+" - "+R)&&_(r,"content",D),M&2&&d!==(d=u[1].title+" - "+R)&&_(y,"content",d),u[1].coverImage?E?E.p(u,M):(E=oe(u),E.c(),E.m(V.parentNode,V)):E&&(E.d(1),E=null)},d(u){u&&m(t),u&&m(n),u&&m(e),u&&m(a),u&&m(f),u&&m(T),u&&m(h),u&&m(A),u&&m(w),u&&m(g),u&&m($),u&&m(r),u&&m(b),u&&m(y),u&&m(S),E&&E.d(u),u&&m(V)}}}function oe(i){let t,l,n,e,o;return{c(){t=I("meta"),n=P(),e=I("meta"),this.h()},l(a){t=H(a,"META",{property:!0,content:!0}),n=F(a),e=H(a,"META",{name:!0,content:!0}),this.h()},h(){_(t,"property","og:image"),_(t,"content",l=""+(j+i[1].coverImage)),_(e,"name","twitter:image"),_(e,"content",o=""+(j+i[1].coverImage))},m(a,f){p(a,t,f),p(a,n,f),p(a,e,f)},p(a,f){f&2&&l!==(l=""+(j+a[1].coverImage))&&_(t,"content",l),f&2&&o!==(o=""+(j+a[1].coverImage))&&_(e,"content",o)},d(a){a&&m(t),a&&m(n),a&&m(e)}}}function se(i){var $;let t,l=i[1].title+"",n,e,o,a,f=x(i[1].date,"UTC:dd mmmm yyyy")+"",s,T,h,k,A,w,v=i[1].updated&&fe(i),g=i[1].readingTime&&ue(i),c=(($=i[1].tags)==null?void 0:$.length)&&me(i);return{c(){t=I("h1"),n=L(l),e=P(),o=I("div"),a=L("Published on "),s=L(f),T=P(),v&&v.c(),h=P(),g&&g.c(),k=P(),c&&c.c(),A=Q(),this.h()},l(r){t=H(r,"H1",{});var D=z(t);n=Y(D,l),D.forEach(m),e=F(r),o=H(r,"DIV",{class:!0});var b=z(o);a=Y(b,"Published on "),s=Y(b,f),b.forEach(m),T=F(r),v&&v.l(r),h=F(r),g&&g.l(r),k=F(r),c&&c.l(r),A=Q(),this.h()},h(){_(o,"class","note svelte-6vak74")},m(r,D){p(r,t,D),W(t,n),p(r,e,D),p(r,o,D),W(o,a),W(o,s),p(r,T,D),v&&v.m(r,D),p(r,h,D),g&&g.m(r,D),p(r,k,D),c&&c.m(r,D),p(r,A,D),w=!0},p(r,D){var b;(!w||D&2)&&l!==(l=r[1].title+"")&&X(n,l),(!w||D&2)&&f!==(f=x(r[1].date,"UTC:dd mmmm yyyy")+"")&&X(s,f),r[1].updated?v?v.p(r,D):(v=fe(r),v.c(),v.m(h.parentNode,h)):v&&(v.d(1),v=null),r[1].readingTime?g?g.p(r,D):(g=ue(r),g.c(),g.m(k.parentNode,k)):g&&(g.d(1),g=null),(b=r[1].tags)!=null&&b.length?c?(c.p(r,D),D&2&&N(c,1)):(c=me(r),c.c(),N(c,1),c.m(A.parentNode,A)):c&&(q(),C(c,1,1,()=>{c=null}),K())},i(r){w||(N(c),w=!0)},o(r){C(c),w=!1},d(r){r&&m(t),r&&m(e),r&&m(o),r&&m(T),v&&v.d(r),r&&m(h),g&&g.d(r),r&&m(k),c&&c.d(r),r&&m(A)}}}function fe(i){let t,l,n=x(i[1].updated,"UTC:dd mmmm yyyy")+"",e;return{c(){t=I("div"),l=L("Updated on "),e=L(n),this.h()},l(o){t=H(o,"DIV",{class:!0});var a=z(t);l=Y(a,"Updated on "),e=Y(a,n),a.forEach(m),this.h()},h(){_(t,"class","note svelte-6vak74")},m(o,a){p(o,t,a),W(t,l),W(t,e)},p(o,a){a&2&&n!==(n=x(o[1].updated,"UTC:dd mmmm yyyy")+"")&&X(e,n)},d(o){o&&m(t)}}}function ue(i){let t,l=i[1].readingTime+"",n;return{c(){t=I("div"),n=L(l),this.h()},l(e){t=H(e,"DIV",{class:!0});var o=z(t);n=Y(o,l),o.forEach(m),this.h()},h(){_(t,"class","note svelte-6vak74")},m(e,o){p(e,t,o),W(t,n)},p(e,o){o&2&&l!==(l=e[1].readingTime+"")&&X(n,l)},d(e){e&&m(t)}}}function me(i){let t,l,n=i[1].tags,e=[];for(let a=0;a<n.length;a+=1)e[a]=ce(ae(i,n,a));const o=a=>C(e[a],1,1,()=>{e[a]=null});return{c(){t=I("div");for(let a=0;a<e.length;a+=1)e[a].c();this.h()},l(a){t=H(a,"DIV",{class:!0});var f=z(t);for(let s=0;s<e.length;s+=1)e[s].l(f);f.forEach(m),this.h()},h(){_(t,"class","tags svelte-6vak74")},m(a,f){p(a,t,f);for(let s=0;s<e.length;s+=1)e[s]&&e[s].m(t,null);l=!0},p(a,f){if(f&2){n=a[1].tags;let s;for(s=0;s<n.length;s+=1){const T=ae(a,n,s);e[s]?(e[s].p(T,f),N(e[s],1)):(e[s]=ce(T),e[s].c(),N(e[s],1),e[s].m(t,null))}for(q(),s=n.length;s<e.length;s+=1)o(s);K()}},i(a){if(!l){for(let f=0;f<n.length;f+=1)N(e[f]);l=!0}},o(a){e=e.filter(Boolean);for(let f=0;f<e.length;f+=1)C(e[f]);l=!1},d(a){a&&m(t),he(e,a)}}}function Le(i){let t=i[5]+"",l;return{c(){l=L(t)},l(n){l=Y(n,t)},m(n,e){p(n,l,e)},p(n,e){e&2&&t!==(t=n[5]+"")&&X(l,t)},d(n){n&&m(l)}}}function ce(i){let t,l;return t=new Ie({props:{$$slots:{default:[Le]},$$scope:{ctx:i}}}),{c(){O(t.$$.fragment)},l(n){B(t.$$.fragment,n)},m(n,e){J(t,n,e),l=!0},p(n,e){const o={};e&18&&(o.$$scope={dirty:e,ctx:n}),t.$set(o)},i(n){l||(N(t.$$.fragment,n),l=!0)},o(n){C(t.$$.fragment,n),l=!1},d(n){G(t,n)}}}function de(i){let t,l,n;return l=new Ee({props:{src:i[1].coverImage,alt:i[1].title}}),{c(){t=I("div"),O(l.$$.fragment),this.h()},l(e){t=H(e,"DIV",{class:!0});var o=z(t);B(l.$$.fragment,o),o.forEach(m),this.h()},h(){_(t,"class","cover-image svelte-6vak74")},m(e,o){p(e,t,o),J(l,t,null),n=!0},p(e,o){const a={};o&2&&(a.src=e[1].coverImage),o&2&&(a.alt=e[1].title),l.$set(a)},i(e){n||(N(l.$$.fragment,e),n=!0)},o(e){C(l.$$.fragment,e),n=!1},d(e){e&&m(t),G(l)}}}function _e(i){let t,l,n;return l=new ze({props:{posts:i[1].relatedPosts}}),{c(){t=I("div"),O(l.$$.fragment),this.h()},l(e){t=H(e,"DIV",{class:!0});var o=z(t);B(l.$$.fragment,o),o.forEach(m),this.h()},h(){_(t,"class","container")},m(e,o){p(e,t,o),J(l,t,null),n=!0},p(e,o){const a={};o&2&&(a.posts=e[1].relatedPosts),l.$set(a)},i(e){n||(N(l.$$.fragment,e),n=!0)},o(e){C(l.$$.fragment,e),n=!1},d(e){e&&m(t),G(l)}}}function Ye(i){let t,l,n,e,o,a,f,s,T,h,k,A,w,v,g,c=i[1]&&ie(i);e=new ke({});let $=i[1]&&se(i),r=i[1]&&i[1].coverImage&&de(i);const D=i[3].default,b=ge(D,i,i[4],null);let y=i[1].relatedPosts&&i[1].relatedPosts.length>0&&_e(i);return v=new be({}),{c(){c&&c.c(),t=Q(),l=P(),n=I("div"),O(e.$$.fragment),o=P(),a=I("main"),f=I("article"),s=I("div"),$&&$.c(),T=P(),r&&r.c(),h=P(),k=I("div"),b&&b.c(),A=P(),y&&y.c(),w=P(),O(v.$$.fragment),this.h()},l(d){const S=$e("svelte-1ylu8nc",document.head);c&&c.l(S),t=Q(),S.forEach(m),l=F(d),n=H(d,"DIV",{class:!0});var V=z(n);B(e.$$.fragment,V),o=F(V),a=H(V,"MAIN",{});var E=z(a);f=H(E,"ARTICLE",{id:!0,class:!0});var u=z(f);s=H(u,"DIV",{class:!0});var M=z(s);$&&$.l(M),M.forEach(m),T=F(u),r&&r.l(u),h=F(u),k=H(u,"DIV",{class:!0});var ee=z(k);b&&b.l(ee),ee.forEach(m),u.forEach(m),A=F(E),y&&y.l(E),E.forEach(m),w=F(V),B(v.$$.fragment,V),V.forEach(m),this.h()},h(){_(s,"class","header svelte-6vak74"),_(k,"class","content svelte-6vak74"),_(f,"id","article-content"),_(f,"class","svelte-6vak74"),_(n,"class","article-layout svelte-6vak74")},m(d,S){c&&c.m(document.head,null),W(document.head,t),p(d,l,S),p(d,n,S),J(e,n,null),W(n,o),W(n,a),W(a,f),W(f,s),$&&$.m(s,null),W(f,T),r&&r.m(f,null),W(f,h),W(f,k),b&&b.m(k,null),W(a,A),y&&y.m(a,null),W(n,w),J(v,n,null),g=!0},p(d,[S]){d[1]?c?c.p(d,S):(c=ie(d),c.c(),c.m(t.parentNode,t)):c&&(c.d(1),c=null),d[1]?$?($.p(d,S),S&2&&N($,1)):($=se(d),$.c(),N($,1),$.m(s,null)):$&&(q(),C($,1,1,()=>{$=null}),K()),d[1]&&d[1].coverImage?r?(r.p(d,S),S&2&&N(r,1)):(r=de(d),r.c(),N(r,1),r.m(f,h)):r&&(q(),C(r,1,1,()=>{r=null}),K()),b&&b.p&&(!g||S&16)&&Te(b,D,d,d[4],g?Me(D,d[4],S,null):De(d[4]),null),d[1].relatedPosts&&d[1].relatedPosts.length>0?y?(y.p(d,S),S&2&&N(y,1)):(y=_e(d),y.c(),N(y,1),y.m(a,null)):y&&(q(),C(y,1,1,()=>{y=null}),K())},i(d){g||(N(e.$$.fragment,d),N($),N(r),N(b,d),N(y),N(v.$$.fragment,d),g=!0)},o(d){C(e.$$.fragment,d),C($),C(r),C(b,d),C(y),C(v.$$.fragment,d),g=!1},d(d){c&&c.d(d),m(t),d&&m(l),d&&m(n),G(e),$&&$.d(),r&&r.d(),b&&b.d(d),y&&y.d(),G(v)}}}function Oe(i,t,l){let n,{$$slots:e={},$$scope:o}=t,{data:a}=t,f=He;return i.$$set=s=>{"data"in s&&l(2,a=s.data),"$$scope"in s&&l(4,o=s.$$scope)},i.$$.update=()=>{var s,T;i.$$.dirty&4&&l(1,{post:n}=a,n),i.$$.dirty&3&&((s=n==null?void 0:n.tags)!=null&&s.length&&l(0,f=n.tags.concat(f)),(T=n==null?void 0:n.keywords)!=null&&T.length&&l(0,f=n.keywords.concat(f)))},[f,n,a,e,o]}class qe extends ve{constructor(t){super(),ye(this,t,Oe,Ye,pe,{data:2})}}export{qe as default};
+import{S as ve,i as ye,s as pe,y as O,z as B,A as J,g as N,d as C,B as G,k as I,l as H,m as z,h as m,n as _,b as p,v as q,f as K,H as he,C as ge,e as Q,a as P,I as $e,c as F,G as W,D as Te,E as De,F as Me,q as L,r as Y,u as X}from"../chunks/index.963f39ba.js";import{H as ke,F as be}from"../chunks/Footer.86072d99.js";import{C as Ne,B as we,T as Ie}from"../chunks/ContentSection.e661d46d.js";import{t as R,s as j,k as He}from"../chunks/meta.65863fbf.js";import{I as Ee}from"../chunks/Image.a2141873.js";var Ae=/d{1,4}|D{3,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|W{1,2}|[LlopSZN]|"[^"]*"|'[^']*'/g,Se=/\b(?:[A-Z]{1,3}[A-Z][TC])(?:[-+]\d{4})?|((?:Australian )?(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time)\b/g,Ce=/[^-+\dA-Z]/g;function x(i,t,l,n){if(arguments.length===1&&typeof i=="string"&&!/\d/.test(i)&&(t=i,i=void 0),i=i||i===0?i:new Date,i instanceof Date||(i=new Date(i)),isNaN(i))throw TypeError("Invalid date");t=String(te[t]||t||te.default);var e=t.slice(0,4);(e==="UTC:"||e==="GMT:")&&(t=t.slice(4),l=!0,e==="GMT:"&&(n=!0));var o=function(){return l?"getUTC":"get"},a=function(){return i[o()+"Date"]()},f=function(){return i[o()+"Day"]()},s=function(){return i[o()+"Month"]()},T=function(){return i[o()+"FullYear"]()},h=function(){return i[o()+"Hours"]()},k=function(){return i[o()+"Minutes"]()},A=function(){return i[o()+"Seconds"]()},w=function(){return i[o()+"Milliseconds"]()},v=function(){return l?0:i.getTimezoneOffset()},g=function(){return Pe(i)},c=function(){return Fe(i)},$={d:function(){return a()},dd:function(){return Z(a())},ddd:function(){return U.dayNames[f()]},DDD:function(){return ne({y:T(),m:s(),d:a(),_:o(),dayName:U.dayNames[f()],short:!0})},dddd:function(){return U.dayNames[f()+7]},DDDD:function(){return ne({y:T(),m:s(),d:a(),_:o(),dayName:U.dayNames[f()+7]})},m:function(){return s()+1},mm:function(){return Z(s()+1)},mmm:function(){return U.monthNames[s()]},mmmm:function(){return U.monthNames[s()+12]},yy:function(){return String(T()).slice(2)},yyyy:function(){return Z(T(),4)},h:function(){return h()%12||12},hh:function(){return Z(h()%12||12)},H:function(){return h()},HH:function(){return Z(h())},M:function(){return k()},MM:function(){return Z(k())},s:function(){return A()},ss:function(){return Z(A())},l:function(){return Z(w(),3)},L:function(){return Z(Math.floor(w()/10))},t:function(){return h()<12?U.timeNames[0]:U.timeNames[1]},tt:function(){return h()<12?U.timeNames[2]:U.timeNames[3]},T:function(){return h()<12?U.timeNames[4]:U.timeNames[5]},TT:function(){return h()<12?U.timeNames[6]:U.timeNames[7]},Z:function(){return n?"GMT":l?"UTC":We(i)},o:function(){return(v()>0?"-":"+")+Z(Math.floor(Math.abs(v())/60)*100+Math.abs(v())%60,4)},p:function(){return(v()>0?"-":"+")+Z(Math.floor(Math.abs(v())/60),2)+":"+Z(Math.floor(Math.abs(v())%60),2)},S:function(){return["th","st","nd","rd"][a()%10>3?0:(a()%100-a()%10!=10)*a()%10]},W:function(){return g()},WW:function(){return Z(g())},N:function(){return c()}};return t.replace(Ae,function(r){return r in $?$[r]():r.slice(1,r.length-1)})}var te={default:"ddd mmm dd yyyy HH:MM:ss",shortDate:"m/d/yy",paddedShortDate:"mm/dd/yyyy",mediumDate:"mmm d, yyyy",longDate:"mmmm d, yyyy",fullDate:"dddd, mmmm d, yyyy",shortTime:"h:MM TT",mediumTime:"h:MM:ss TT",longTime:"h:MM:ss TT Z",isoDate:"yyyy-mm-dd",isoTime:"HH:MM:ss",isoDateTime:"yyyy-mm-dd'T'HH:MM:sso",isoUtcDateTime:"UTC:yyyy-mm-dd'T'HH:MM:ss'Z'",expiresHeaderFormat:"ddd, dd mmm yyyy HH:MM:ss Z"},U={dayNames:["Sun","Mon","Tue","Wed","Thu","Fri","Sat","Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec","January","February","March","April","May","June","July","August","September","October","November","December"],timeNames:["a","p","am","pm","A","P","AM","PM"]},Z=function(t){var l=arguments.length>1&&arguments[1]!==void 0?arguments[1]:2;return String(t).padStart(l,"0")},ne=function(t){var l=t.y,n=t.m,e=t.d,o=t._,a=t.dayName,f=t.short,s=f===void 0?!1:f,T=new Date,h=new Date;h.setDate(h[o+"Date"]()-1);var k=new Date;k.setDate(k[o+"Date"]()+1);var A=function(){return T[o+"Date"]()},w=function(){return T[o+"Month"]()},v=function(){return T[o+"FullYear"]()},g=function(){return h[o+"Date"]()},c=function(){return h[o+"Month"]()},$=function(){return h[o+"FullYear"]()},r=function(){return k[o+"Date"]()},D=function(){return k[o+"Month"]()},b=function(){return k[o+"FullYear"]()};return v()===l&&w()===n&&A()===e?s?"Tdy":"Today":$()===l&&c()===n&&g()===e?s?"Ysd":"Yesterday":b()===l&&D()===n&&r()===e?s?"Tmw":"Tomorrow":a},Pe=function(t){var l=new Date(t.getFullYear(),t.getMonth(),t.getDate());l.setDate(l.getDate()-(l.getDay()+6)%7+3);var n=new Date(l.getFullYear(),0,4);n.setDate(n.getDate()-(n.getDay()+6)%7+3);var e=l.getTimezoneOffset()-n.getTimezoneOffset();l.setHours(l.getHours()-e);var o=(l-n)/(864e5*7);return 1+Math.floor(o)},Fe=function(t){var l=t.getDay();return l===0&&(l=7),l},We=function(t){return(String(t).match(Se)||[""]).pop().replace(Ce,"").replace(/GMT\+0000/g,"UTC")};function re(i,t,l){const n=i.slice();return n[1]=t[l],n}function le(i){let t,l;return t=new we({props:{slug:i[1].slug,title:i[1].title,excerpt:i[1].excerpt,tags:i[1].tags,readingTime:i[1].readingTime,showImage:!1}}),{c(){O(t.$$.fragment)},l(n){B(t.$$.fragment,n)},m(n,e){J(t,n,e),l=!0},p(n,e){const o={};e&1&&(o.slug=n[1].slug),e&1&&(o.title=n[1].title),e&1&&(o.excerpt=n[1].excerpt),e&1&&(o.tags=n[1].tags),e&1&&(o.readingTime=n[1].readingTime),t.$set(o)},i(n){l||(N(t.$$.fragment,n),l=!0)},o(n){C(t.$$.fragment,n),l=!1},d(n){G(t,n)}}}function Ue(i){let t,l,n=i[0],e=[];for(let a=0;a<n.length;a+=1)e[a]=le(re(i,n,a));const o=a=>C(e[a],1,1,()=>{e[a]=null});return{c(){t=I("div");for(let a=0;a<e.length;a+=1)e[a].c();this.h()},l(a){t=H(a,"DIV",{class:!0});var f=z(t);for(let s=0;s<e.length;s+=1)e[s].l(f);f.forEach(m),this.h()},h(){_(t,"class","simple-grid svelte-ypk0wh")},m(a,f){p(a,t,f);for(let s=0;s<e.length;s+=1)e[s]&&e[s].m(t,null);l=!0},p(a,f){if(f&1){n=a[0];let s;for(s=0;s<n.length;s+=1){const T=re(a,n,s);e[s]?(e[s].p(T,f),N(e[s],1)):(e[s]=le(T),e[s].c(),N(e[s],1),e[s].m(t,null))}for(q(),s=n.length;s<e.length;s+=1)o(s);K()}},i(a){if(!l){for(let f=0;f<n.length;f+=1)N(e[f]);l=!0}},o(a){e=e.filter(Boolean);for(let f=0;f<e.length;f+=1)C(e[f]);l=!1},d(a){a&&m(t),he(e,a)}}}function Ve(i){let t,l;return t=new Ne({props:{id:"related-posts",title:"Related Posts",$$slots:{default:[Ue]},$$scope:{ctx:i}}}),{c(){O(t.$$.fragment)},l(n){B(t.$$.fragment,n)},m(n,e){J(t,n,e),l=!0},p(n,[e]){const o={};e&17&&(o.$$scope={dirty:e,ctx:n}),t.$set(o)},i(n){l||(N(t.$$.fragment,n),l=!0)},o(n){C(t.$$.fragment,n),l=!1},d(n){G(t,n)}}}function Ze(i,t,l){let{posts:n}=t;return i.$$set=e=>{"posts"in e&&l(0,n=e.posts)},[n]}class ze extends ve{constructor(t){super(),ye(this,t,Ze,Ve,pe,{posts:0})}}function ae(i,t,l){const n=i.slice();return n[5]=t[l],n}function ie(i){let t,l,n,e,o,a,f,s,T,h,k,A,w,v,g,c,$,r,D,b,y,d,S,V;document.title=c=i[1].title+" - "+R;let E=i[1].coverImage&&oe(i);return{c(){t=I("meta"),n=P(),e=I("meta"),a=P(),f=I("meta"),T=P(),h=I("meta"),A=P(),w=I("link"),g=P(),$=P(),r=I("meta"),b=P(),y=I("meta"),S=P(),E&&E.c(),V=Q(),this.h()},l(u){t=H(u,"META",{name:!0,content:!0}),n=F(u),e=H(u,"META",{name:!0,content:!0}),a=F(u),f=H(u,"META",{property:!0,content:!0}),T=F(u),h=H(u,"META",{name:!0,content:!0}),A=F(u),w=H(u,"LINK",{rel:!0,href:!0}),g=F(u),$=F(u),r=H(u,"META",{property:!0,content:!0}),b=F(u),y=H(u,"META",{name:!0,content:!0}),S=F(u),E&&E.l(u),V=Q(),this.h()},h(){_(t,"name","keywords"),_(t,"content",l=i[0].join(", ")),_(e,"name","description"),_(e,"content",o=i[1].excerpt),_(f,"property","og:description"),_(f,"content",s=i[1].excerpt),_(h,"name","twitter:description"),_(h,"content",k=i[1].excerpt),_(w,"rel","canonical"),_(w,"href",v=j+"/"+i[1].slug),_(r,"property","og:title"),_(r,"content",D=i[1].title+" - "+R),_(y,"name","twitter:title"),_(y,"content",d=i[1].title+" - "+R)},m(u,M){p(u,t,M),p(u,n,M),p(u,e,M),p(u,a,M),p(u,f,M),p(u,T,M),p(u,h,M),p(u,A,M),p(u,w,M),p(u,g,M),p(u,$,M),p(u,r,M),p(u,b,M),p(u,y,M),p(u,S,M),E&&E.m(u,M),p(u,V,M)},p(u,M){M&1&&l!==(l=u[0].join(", "))&&_(t,"content",l),M&2&&o!==(o=u[1].excerpt)&&_(e,"content",o),M&2&&s!==(s=u[1].excerpt)&&_(f,"content",s),M&2&&k!==(k=u[1].excerpt)&&_(h,"content",k),M&2&&v!==(v=j+"/"+u[1].slug)&&_(w,"href",v),M&2&&c!==(c=u[1].title+" - "+R)&&(document.title=c),M&2&&D!==(D=u[1].title+" - "+R)&&_(r,"content",D),M&2&&d!==(d=u[1].title+" - "+R)&&_(y,"content",d),u[1].coverImage?E?E.p(u,M):(E=oe(u),E.c(),E.m(V.parentNode,V)):E&&(E.d(1),E=null)},d(u){u&&m(t),u&&m(n),u&&m(e),u&&m(a),u&&m(f),u&&m(T),u&&m(h),u&&m(A),u&&m(w),u&&m(g),u&&m($),u&&m(r),u&&m(b),u&&m(y),u&&m(S),E&&E.d(u),u&&m(V)}}}function oe(i){let t,l,n,e,o;return{c(){t=I("meta"),n=P(),e=I("meta"),this.h()},l(a){t=H(a,"META",{property:!0,content:!0}),n=F(a),e=H(a,"META",{name:!0,content:!0}),this.h()},h(){_(t,"property","og:image"),_(t,"content",l=""+(j+i[1].coverImage)),_(e,"name","twitter:image"),_(e,"content",o=""+(j+i[1].coverImage))},m(a,f){p(a,t,f),p(a,n,f),p(a,e,f)},p(a,f){f&2&&l!==(l=""+(j+a[1].coverImage))&&_(t,"content",l),f&2&&o!==(o=""+(j+a[1].coverImage))&&_(e,"content",o)},d(a){a&&m(t),a&&m(n),a&&m(e)}}}function se(i){var $;let t,l=i[1].title+"",n,e,o,a,f=x(i[1].date,"UTC:dd mmmm yyyy")+"",s,T,h,k,A,w,v=i[1].updated&&fe(i),g=i[1].readingTime&&ue(i),c=(($=i[1].tags)==null?void 0:$.length)&&me(i);return{c(){t=I("h1"),n=L(l),e=P(),o=I("div"),a=L("Published on "),s=L(f),T=P(),v&&v.c(),h=P(),g&&g.c(),k=P(),c&&c.c(),A=Q(),this.h()},l(r){t=H(r,"H1",{});var D=z(t);n=Y(D,l),D.forEach(m),e=F(r),o=H(r,"DIV",{class:!0});var b=z(o);a=Y(b,"Published on "),s=Y(b,f),b.forEach(m),T=F(r),v&&v.l(r),h=F(r),g&&g.l(r),k=F(r),c&&c.l(r),A=Q(),this.h()},h(){_(o,"class","note svelte-6vak74")},m(r,D){p(r,t,D),W(t,n),p(r,e,D),p(r,o,D),W(o,a),W(o,s),p(r,T,D),v&&v.m(r,D),p(r,h,D),g&&g.m(r,D),p(r,k,D),c&&c.m(r,D),p(r,A,D),w=!0},p(r,D){var b;(!w||D&2)&&l!==(l=r[1].title+"")&&X(n,l),(!w||D&2)&&f!==(f=x(r[1].date,"UTC:dd mmmm yyyy")+"")&&X(s,f),r[1].updated?v?v.p(r,D):(v=fe(r),v.c(),v.m(h.parentNode,h)):v&&(v.d(1),v=null),r[1].readingTime?g?g.p(r,D):(g=ue(r),g.c(),g.m(k.parentNode,k)):g&&(g.d(1),g=null),(b=r[1].tags)!=null&&b.length?c?(c.p(r,D),D&2&&N(c,1)):(c=me(r),c.c(),N(c,1),c.m(A.parentNode,A)):c&&(q(),C(c,1,1,()=>{c=null}),K())},i(r){w||(N(c),w=!0)},o(r){C(c),w=!1},d(r){r&&m(t),r&&m(e),r&&m(o),r&&m(T),v&&v.d(r),r&&m(h),g&&g.d(r),r&&m(k),c&&c.d(r),r&&m(A)}}}function fe(i){let t,l,n=x(i[1].updated,"UTC:dd mmmm yyyy")+"",e;return{c(){t=I("div"),l=L("Updated on "),e=L(n),this.h()},l(o){t=H(o,"DIV",{class:!0});var a=z(t);l=Y(a,"Updated on "),e=Y(a,n),a.forEach(m),this.h()},h(){_(t,"class","note svelte-6vak74")},m(o,a){p(o,t,a),W(t,l),W(t,e)},p(o,a){a&2&&n!==(n=x(o[1].updated,"UTC:dd mmmm yyyy")+"")&&X(e,n)},d(o){o&&m(t)}}}function ue(i){let t,l=i[1].readingTime+"",n;return{c(){t=I("div"),n=L(l),this.h()},l(e){t=H(e,"DIV",{class:!0});var o=z(t);n=Y(o,l),o.forEach(m),this.h()},h(){_(t,"class","note svelte-6vak74")},m(e,o){p(e,t,o),W(t,n)},p(e,o){o&2&&l!==(l=e[1].readingTime+"")&&X(n,l)},d(e){e&&m(t)}}}function me(i){let t,l,n=i[1].tags,e=[];for(let a=0;a<n.length;a+=1)e[a]=ce(ae(i,n,a));const o=a=>C(e[a],1,1,()=>{e[a]=null});return{c(){t=I("div");for(let a=0;a<e.length;a+=1)e[a].c();this.h()},l(a){t=H(a,"DIV",{class:!0});var f=z(t);for(let s=0;s<e.length;s+=1)e[s].l(f);f.forEach(m),this.h()},h(){_(t,"class","tags svelte-6vak74")},m(a,f){p(a,t,f);for(let s=0;s<e.length;s+=1)e[s]&&e[s].m(t,null);l=!0},p(a,f){if(f&2){n=a[1].tags;let s;for(s=0;s<n.length;s+=1){const T=ae(a,n,s);e[s]?(e[s].p(T,f),N(e[s],1)):(e[s]=ce(T),e[s].c(),N(e[s],1),e[s].m(t,null))}for(q(),s=n.length;s<e.length;s+=1)o(s);K()}},i(a){if(!l){for(let f=0;f<n.length;f+=1)N(e[f]);l=!0}},o(a){e=e.filter(Boolean);for(let f=0;f<e.length;f+=1)C(e[f]);l=!1},d(a){a&&m(t),he(e,a)}}}function Le(i){let t=i[5]+"",l;return{c(){l=L(t)},l(n){l=Y(n,t)},m(n,e){p(n,l,e)},p(n,e){e&2&&t!==(t=n[5]+"")&&X(l,t)},d(n){n&&m(l)}}}function ce(i){let t,l;return t=new Ie({props:{$$slots:{default:[Le]},$$scope:{ctx:i}}}),{c(){O(t.$$.fragment)},l(n){B(t.$$.fragment,n)},m(n,e){J(t,n,e),l=!0},p(n,e){const o={};e&18&&(o.$$scope={dirty:e,ctx:n}),t.$set(o)},i(n){l||(N(t.$$.fragment,n),l=!0)},o(n){C(t.$$.fragment,n),l=!1},d(n){G(t,n)}}}function de(i){let t,l,n;return l=new Ee({props:{src:i[1].coverImage,alt:i[1].title}}),{c(){t=I("div"),O(l.$$.fragment),this.h()},l(e){t=H(e,"DIV",{class:!0});var o=z(t);B(l.$$.fragment,o),o.forEach(m),this.h()},h(){_(t,"class","cover-image svelte-6vak74")},m(e,o){p(e,t,o),J(l,t,null),n=!0},p(e,o){const a={};o&2&&(a.src=e[1].coverImage),o&2&&(a.alt=e[1].title),l.$set(a)},i(e){n||(N(l.$$.fragment,e),n=!0)},o(e){C(l.$$.fragment,e),n=!1},d(e){e&&m(t),G(l)}}}function _e(i){let t,l,n;return l=new ze({props:{posts:i[1].relatedPosts}}),{c(){t=I("div"),O(l.$$.fragment),this.h()},l(e){t=H(e,"DIV",{class:!0});var o=z(t);B(l.$$.fragment,o),o.forEach(m),this.h()},h(){_(t,"class","container")},m(e,o){p(e,t,o),J(l,t,null),n=!0},p(e,o){const a={};o&2&&(a.posts=e[1].relatedPosts),l.$set(a)},i(e){n||(N(l.$$.fragment,e),n=!0)},o(e){C(l.$$.fragment,e),n=!1},d(e){e&&m(t),G(l)}}}function Ye(i){let t,l,n,e,o,a,f,s,T,h,k,A,w,v,g,c=i[1]&&ie(i);e=new ke({});let $=i[1]&&se(i),r=i[1]&&i[1].coverImage&&de(i);const D=i[3].default,b=ge(D,i,i[4],null);let y=i[1].relatedPosts&&i[1].relatedPosts.length>0&&_e(i);return v=new be({}),{c(){c&&c.c(),t=Q(),l=P(),n=I("div"),O(e.$$.fragment),o=P(),a=I("main"),f=I("article"),s=I("div"),$&&$.c(),T=P(),r&&r.c(),h=P(),k=I("div"),b&&b.c(),A=P(),y&&y.c(),w=P(),O(v.$$.fragment),this.h()},l(d){const S=$e("svelte-1ylu8nc",document.head);c&&c.l(S),t=Q(),S.forEach(m),l=F(d),n=H(d,"DIV",{class:!0});var V=z(n);B(e.$$.fragment,V),o=F(V),a=H(V,"MAIN",{});var E=z(a);f=H(E,"ARTICLE",{id:!0,class:!0});var u=z(f);s=H(u,"DIV",{class:!0});var M=z(s);$&&$.l(M),M.forEach(m),T=F(u),r&&r.l(u),h=F(u),k=H(u,"DIV",{class:!0});var ee=z(k);b&&b.l(ee),ee.forEach(m),u.forEach(m),A=F(E),y&&y.l(E),E.forEach(m),w=F(V),B(v.$$.fragment,V),V.forEach(m),this.h()},h(){_(s,"class","header svelte-6vak74"),_(k,"class","content svelte-6vak74"),_(f,"id","article-content"),_(f,"class","svelte-6vak74"),_(n,"class","article-layout svelte-6vak74")},m(d,S){c&&c.m(document.head,null),W(document.head,t),p(d,l,S),p(d,n,S),J(e,n,null),W(n,o),W(n,a),W(a,f),W(f,s),$&&$.m(s,null),W(f,T),r&&r.m(f,null),W(f,h),W(f,k),b&&b.m(k,null),W(a,A),y&&y.m(a,null),W(n,w),J(v,n,null),g=!0},p(d,[S]){d[1]?c?c.p(d,S):(c=ie(d),c.c(),c.m(t.parentNode,t)):c&&(c.d(1),c=null),d[1]?$?($.p(d,S),S&2&&N($,1)):($=se(d),$.c(),N($,1),$.m(s,null)):$&&(q(),C($,1,1,()=>{$=null}),K()),d[1]&&d[1].coverImage?r?(r.p(d,S),S&2&&N(r,1)):(r=de(d),r.c(),N(r,1),r.m(f,h)):r&&(q(),C(r,1,1,()=>{r=null}),K()),b&&b.p&&(!g||S&16)&&Te(b,D,d,d[4],g?Me(D,d[4],S,null):De(d[4]),null),d[1].relatedPosts&&d[1].relatedPosts.length>0?y?(y.p(d,S),S&2&&N(y,1)):(y=_e(d),y.c(),N(y,1),y.m(a,null)):y&&(q(),C(y,1,1,()=>{y=null}),K())},i(d){g||(N(e.$$.fragment,d),N($),N(r),N(b,d),N(y),N(v.$$.fragment,d),g=!0)},o(d){C(e.$$.fragment,d),C($),C(r),C(b,d),C(y),C(v.$$.fragment,d),g=!1},d(d){c&&c.d(d),m(t),d&&m(l),d&&m(n),G(e),$&&$.d(),r&&r.d(),b&&b.d(d),y&&y.d(),G(v)}}}function Oe(i,t,l){let n,{$$slots:e={},$$scope:o}=t,{data:a}=t,f=He;return i.$$set=s=>{"data"in s&&l(2,a=s.data),"$$scope"in s&&l(4,o=s.$$scope)},i.$$.update=()=>{var s,T;i.$$.dirty&4&&l(1,{post:n}=a,n),i.$$.dirty&3&&((s=n==null?void 0:n.tags)!=null&&s.length&&l(0,f=n.tags.concat(f)),(T=n==null?void 0:n.keywords)!=null&&T.length&&l(0,f=n.keywords.concat(f)))},[f,n,a,e,o]}class qe extends ve{constructor(t){super(),ye(this,t,Oe,Ye,pe,{data:2})}}export{qe as default};
diff --git a/_app/immutable/entry/(blog-article)-oink-page.md.3d4e3640.js b/_app/immutable/entry/(blog-article)-oink-page.md.3d4e3640.js
new file mode 100644
index 0000000..923b1f1
--- /dev/null
+++ b/_app/immutable/entry/(blog-article)-oink-page.md.3d4e3640.js
@@ -0,0 +1,17 @@
+import{S as ga,i as wa,s as ba,k as r,J as tl,l as s,m as o,K as il,h as t,n as h,p as va,b as l,G as i,M as al,C as nl,a as u,c as m,v as ul,N as ml,f as dl,D as fl,E as pl,F as hl,g as E,d as P,o as cl,O as vl,e as rl,y as I,z as A,A as T,B as S,P as gl,Q as sl,q as n,r as f}from"../chunks/index.963f39ba.js";/* empty css                                                      *//* empty css                                                        */import{I as N}from"../chunks/Image.a2141873.js";/* empty css                                                                 */function wl(k){let p,d,v;return{c(){p=r("div"),d=tl("svg"),v=tl("path"),this.h()},l(w){p=s(w,"DIV",{class:!0,style:!0});var c=o(p);d=il(c,"svg",{width:!0,height:!0,viewBox:!0,fill:!0,xmlns:!0,class:!0});var g=o(d);v=il(g,"path",{d:!0,fill:!0}),o(v).forEach(t),g.forEach(t),c.forEach(t),this.h()},h(){h(v,"d","M80 0C80 0 84.2846 41.2925 101.496 58.504C118.707 75.7154 160 80 160 80C160 80 118.707 84.2846 101.496 101.496C84.2846 118.707 80 160 80 160C80 160 75.7154 118.707 58.504 101.496C41.2925 84.2846 0 80 0 80C0 80 41.2925 75.7154 58.504 58.504C75.7154 41.2925 80 0 80 0Z"),h(v,"fill",k[0]),h(d,"width",k[1]),h(d,"height",k[1]),h(d,"viewBox","0 0 160 160"),h(d,"fill","none"),h(d,"xmlns","http://www.w3.org/2000/svg"),h(d,"class","svelte-sixv8c"),h(p,"class","wrapper svelte-sixv8c"),va(p,"top",k[2].top),va(p,"left",k[2].left)},m(w,c){l(w,p,c),i(p,d),i(d,v)},p(w,[c]){c&1&&h(v,"fill",w[0]),c&2&&h(d,"width",w[1]),c&2&&h(d,"height",w[1]),c&4&&va(p,"top",w[2].top),c&4&&va(p,"left",w[2].left)},i:al,o:al,d(w){w&&t(p)}}}function bl(k,p,d){let{color:v}=p,{size:w}=p,{style:c}=p;return k.$$set=g=>{"color"in g&&d(0,v=g.color),"size"in g&&d(1,w=g.size),"style"in g&&d(2,c=g.style)},[v,w,c]}class _l extends ga{constructor(p){super(),wa(this,p,bl,wl,ba,{color:0,size:1,style:2})}}function ol(k,p,d){const v=k.slice();return v[7]=p[d],v}function ll(k,p){let d,v,w;return v=new _l({props:{color:p[7].color,size:p[7].size,style:p[7].style}}),{key:k,first:null,c(){d=rl(),I(v.$$.fragment),this.h()},l(c){d=rl(),A(v.$$.fragment,c),this.h()},h(){this.first=d},m(c,g){l(c,d,g),T(v,c,g),w=!0},p(c,g){p=c;const _={};g&1&&(_.color=p[7].color),g&1&&(_.size=p[7].size),g&1&&(_.style=p[7].style),v.$set(_)},i(c){w||(E(v.$$.fragment,c),w=!0)},o(c){P(v.$$.fragment,c),w=!1},d(c){c&&t(d),S(v,c)}}}function yl(k){let p,d=[],v=new Map,w,c,g,_=k[0];const O=y=>y[7].id;for(let y=0;y<_.length;y+=1){let b=ol(k,_,y),C=O(b);v.set(C,d[y]=ll(C,b))}const G=k[3].default,$=nl(G,k,k[2],null);return{c(){p=r("div");for(let y=0;y<d.length;y+=1)d[y].c();w=u(),c=r("span"),$&&$.c(),this.h()},l(y){p=s(y,"DIV",{class:!0});var b=o(p);for(let R=0;R<d.length;R+=1)d[R].l(b);w=m(b),c=s(b,"SPAN",{class:!0});var C=o(c);$&&$.l(C),C.forEach(t),b.forEach(t),this.h()},h(){h(c,"class","slot-wrapper svelte-exdx8u"),h(p,"class","sparkle-wrapper svelte-exdx8u")},m(y,b){l(y,p,b);for(let C=0;C<d.length;C+=1)d[C]&&d[C].m(p,null);i(p,w),i(p,c),$&&$.m(c,null),g=!0},p(y,[b]){b&1&&(_=y[0],ul(),d=ml(d,b,O,1,y,_,v,p,gl,ll,w,ol),dl()),$&&$.p&&(!g||b&4)&&fl($,G,y,y[2],g?hl(G,y[2],b,null):pl(y[2]),null)},i(y){if(!g){for(let b=0;b<_.length;b+=1)E(d[b]);E($,y),g=!0}},o(y){for(let b=0;b<d.length;b+=1)P(d[b]);P($,y),g=!1},d(y){y&&t(p);for(let b=0;b<d.length;b+=1)d[b].d();$&&$.d(y)}}}function kl(k,p,d){let{$$slots:v={},$$scope:w}=p;const c=($,y)=>Math.floor(Math.random()*(y-$))+$;let{color:g="default"}=p;const _=()=>({id:String(c(1e4,99999)),createdAt:Date.now(),color:g==="primary"?"var(--color--primary)":g==="secondary"?"var(--color--secondary)":"var(--color--yellow",size:c(10,20),style:{top:c(-10,80)+"%",left:c(0,100)+"%"}});let O=[],G;return cl(()=>{G=setInterval(()=>{const $=Date.now(),y=_(),b=O.filter(C=>$-C.createdAt<1500);b.push(y),d(0,O=b)},400)}),vl(()=>{clearInterval(G)}),k.$$set=$=>{"color"in $&&d(1,g=$.color),"$$scope"in $&&d(2,w=$.$$scope)},[O,g,w,v]}class $l extends ga{constructor(p){super(),wa(this,p,kl,yl,ba,{color:1})}}function El(k){let p,d,v;const w=k[2].default,c=nl(w,k,k[3],null);return{c(){p=r("strong"),c&&c.c(),this.h()},l(g){p=s(g,"STRONG",{class:!0});var _=o(p);c&&c.l(_),_.forEach(t),this.h()},h(){h(p,"class",d=sl(k[0])+" svelte-8f8x6d")},m(g,_){l(g,p,_),c&&c.m(p,null),v=!0},p(g,_){c&&c.p&&(!v||_&8)&&fl(c,w,g,g[3],v?hl(w,g[3],_,null):pl(g[3]),null),(!v||_&1&&d!==(d=sl(g[0])+" svelte-8f8x6d"))&&h(p,"class",d)},i(g){v||(E(c,g),v=!0)},o(g){P(c,g),v=!1},d(g){g&&t(p),c&&c.d(g)}}}function Pl(k){let p,d;return p=new $l({props:{color:k[1],$$slots:{default:[El]},$$scope:{ctx:k}}}),{c(){I(p.$$.fragment)},l(v){A(p.$$.fragment,v)},m(v,w){T(p,v,w),d=!0},p(v,[w]){const c={};w&2&&(c.color=v[1]),w&9&&(c.$$scope={dirty:w,ctx:v}),p.$set(c)},i(v){d||(E(p.$$.fragment,v),d=!0)},o(v){P(p.$$.fragment,v),d=!1},d(v){S(p,v)}}}function Il(k,p,d){let{$$slots:v={},$$scope:w}=p,{color:c="default"}=p,{sparkleColor:g="default"}=p;return k.$$set=_=>{"color"in _&&d(0,c=_.color),"sparkleColor"in _&&d(1,g=_.sparkleColor),"$$scope"in _&&d(3,w=_.$$scope)},[c,g,v,w]}class Al extends ga{constructor(p){super(),wa(this,p,Il,Pl,ba,{color:0,sparkleColor:1})}}function Tl(k){let p;return{c(){p=n("Oink!")},l(d){p=f(d,"Oink!")},m(d,v){l(d,p,v)},d(d){d&&t(p)}}}function Sl(k){let p,d,v,w,c,g,_,O,G,$,y,b,C,R,_a,ya,dt,ka,$a,ai,De,Ea,ri,Q,B,ct,Pa,Ia,si,X,vt,Aa,Ta,Sa,oi,ee,gt,wt,Ca,Na,je,bt,Oa,Ga,li,_e,ni,te,_t,Ra,La,za,fi,ye,pi,Fe,Ma,hi,ke,ui,ie,Wa,yt,kt,xa,Ba,mi,Ze,Ha,di,ae,H,$t,Da,ja,ci,re,Fa,Et,Za,Ua,vi,Ue,qa,gi,$e,wi,qe,Ka,bi,Ee,_i,Ke,Va,yi,se,D,Pt,Ja,Ya,ki,Ve,Qa,$i,oe,It,L,At,Xa,er,tr,Pe,Tt,ir,ar,rr,sr,St,z,Ct,or,lr,nr,Ie,Nt,fr,pr,hr,Ei,Ae,Pi,le,j,Ot,ur,mr,Ii,Je,dr,Ai,M,ne,Gt,cr,vr,gr,F,Rt,wr,br,Lt,_r,yr,zt,kr,$r,fe,Mt,Er,Pr,Ir,Te,Wt,Ar,Tr,xt,Sr,Cr,Ye,Bt,Nr,Ht,Dt,Or,Ti,pe,Z,jt,Gr,Rr,Si,Qe,Lr,Ci,Xe,zr,Ni,et,Mr,Oi,W,Ft,Wr,xr,Zt,Br,Hr,Ut,Dr,Gi,Se,Ri,tt,jr,Li,Ce,zi,x,Fr,qt,Zr,Ur,Kt,qr,Kr,Mi,Ne,Wi,it,Vr,xi,U,Oe,Jr,Ge,Bi,Re,Hi,he,Yr,at,Qr,Xr,Di,rt,es,ji,ue,q,Vt,ts,is,Fi,st,as,Zi,Le,Ui,ze,qi,ot,rs,Ki,Me,Vi,lt,ss,Ji,nt,os,Yi,We,Qi,me,K,Jt,ls,ns,Xi,de,fs,ce,ps,ea,ve,hs,xe,us,ms,ta,ge,V,Yt,ds,cs,ia,we,J,Qt,vs,gs,aa,be,Y,Xt,ws,bs,ra;return _e=new N({props:{src:"/images/posts/oink/research.png",alt:"Claims supporting our two observations"}}),ye=new N({props:{src:"/images/posts/oink/survey-design.png",alt:"Claims supporting our two observations"}}),ke=new N({props:{src:"/images/posts/oink/survey.png",alt:"Claims supporting our two observations"}}),$e=new N({props:{src:"/images/posts/oink/problem-1.png",alt:"Claims supporting our two observations"}}),Ee=new N({props:{src:"/images/posts/oink/problem-2.png",alt:"Claims supporting our two observations"}}),Ae=new N({props:{src:"/images/posts/oink/target.png",alt:"Claims supporting our two observations"}}),Se=new N({props:{src:"/images/posts/oink/ideation-1.png",alt:"Claims supporting our two observations"}}),Ce=new N({props:{src:"/images/posts/oink/ideation-2.png",alt:"Claims supporting our two observations"}}),Ne=new N({props:{src:"/images/posts/oink/ideation-3.png",alt:"Claims supporting our two observations"}}),Oe=new N({props:{src:"/images/posts/oink/ideation-4.png",alt:"Claims supporting our two observations"}}),Ge=new N({props:{src:"/images/posts/oink/beer-app.jpeg",alt:"Claims supporting our two observations"}}),Re=new N({props:{src:"/images/posts/oink/ideation-5.png",alt:"Claims supporting our two observations"}}),Le=new N({props:{src:"/images/posts/oink/design-1.png",alt:"Claims supporting our two observations"}}),ze=new N({props:{src:"/images/posts/oink/design-2.png",alt:"Claims supporting our two observations"}}),Me=new N({props:{src:"/images/posts/oink/design-3.png",alt:"Claims supporting our two observations"}}),We=new N({props:{src:"/images/posts/oink/design-4.png",alt:"Claims supporting our two observations"}}),ce=new Al({props:{$$slots:{default:[Tl]},$$scope:{ctx:k}}}),{c(){p=r("p"),d=n("If you want a bite-sized summary, check out this "),v=r("a"),w=n("video"),c=u(),g=r("h2"),_=r("a"),O=r("span"),G=n("#"),$=n("Context"),y=u(),b=r("p"),C=n("Oink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… "),R=r("em"),_a=n("in the air"),ya=n(", in a sense that you cannot really touch it; the money you have is just "),dt=r("em"),ka=n("numbers"),$a=n(" on the screen."),ai=u(),De=r("p"),Ea=n("It may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children."),ri=u(),Q=r("h2"),B=r("a"),ct=r("span"),Pa=n("#"),Ia=n("Overview and Background"),si=u(),X=r("p"),vt=r("strong"),Aa=n("Primary Research"),Ta=r("br"),Sa=n(`
+After our initial research, we came to realize this problem from the two observations`),oi=u(),ee=r("ol"),gt=r("li"),wt=r("strong"),Ca=n("Financial experimenting during childhood is important"),Na=u(),je=r("li"),bt=r("strong"),Oa=n("The financial literacy in Korea is low"),Ga=n(" (and I believe it can also be said for the most part of the world)"),li=u(),I(_e.$$.fragment),ni=u(),te=r("p"),_t=r("strong"),Ra=n("Surveys & Interview"),La=r("br"),za=n(`
+After we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.`),fi=u(),I(ye.$$.fragment),pi=u(),Fe=r("p"),Ma=n("The result is them compiled and analyze into more digestible presentation."),hi=u(),I(ke.$$.fragment),ui=u(),ie=r("p"),Wa=n("We found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of "),yt=r("strong"),kt=r("em"),xa=n("convenience"),Ba=n(" (which, i know, is obvious but we like to make sure)."),mi=u(),Ze=r("p"),Ha=n("The interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning."),di=u(),ae=r("h2"),H=r("a"),$t=r("span"),Da=n("#"),ja=n("Problem"),ci=u(),re=r("p"),Fa=n("The problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can "),Et=r("strong"),Za=n("see"),Ua=n(", reduced to just a numerical representation on a screen."),vi=u(),Ue=r("p"),qa=n("In order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world."),gi=u(),I($e.$$.fragment),wi=u(),qe=r("p"),Ka=n("Another problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents."),bi=u(),I(Ee.$$.fragment),_i=u(),Ke=r("p"),Va=n("And that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”"),yi=u(),se=r("h2"),D=r("a"),Pt=r("span"),Ja=n("#"),Ya=n("Target User"),ki=u(),Ve=r("p"),Qa=n("So, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be"),$i=u(),oe=r("ul"),It=r("li"),L=r("p"),At=r("strong"),Xa=n("Kids"),er=r("br"),tr=u(),Pe=r("a"),Tt=r("em"),ir=n("Alpha Generation"),ar=r("br"),rr=n(`
+The biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.`),sr=u(),St=r("li"),z=r("p"),Ct=r("strong"),or=n("Parents"),lr=r("br"),nr=u(),Ie=r("a"),Nt=r("em"),fr=n("MZ Generation"),pr=r("br"),hr=n(`
+Generation MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.`),Ei=u(),I(Ae.$$.fragment),Pi=u(),le=r("h2"),j=r("a"),Ot=r("span"),ur=n("#"),mr=n("Goals"),Ii=u(),Je=r("p"),dr=n("We set some goals and objective for each goal so we have a common understanding among members and other stakeholders."),Ai=u(),M=r("ol"),ne=r("li"),Gt=r("strong"),cr=n("create a seamless transition from physical to digital money"),vr=r("br"),gr=n(`
+to achieve this we need to`),F=r("ul"),Rt=r("li"),wr=n("Help them understand the value of digital money"),br=u(),Lt=r("li"),_r=n("Visualize digital money"),yr=u(),zt=r("li"),kr=n("Simulate the physical manipulation of digital money"),$r=u(),fe=r("li"),Mt=r("strong"),Er=n("Form good money management habits"),Pr=r("br"),Ir=n(`
+to encourage good habits we need to`),Te=r("ul"),Wt=r("li"),Ar=n("Make savings appealing"),Tr=u(),xt=r("li"),Sr=n("Foster thoughtful spending and saving"),Cr=u(),Ye=r("li"),Bt=r("strong"),Nr=n("Encourage conversations about money between kids and parents"),Ht=r("ul"),Dt=r("li"),Or=n("Provide talking topic and common place to talk"),Ti=u(),pe=r("h2"),Z=r("a"),jt=r("span"),Gr=n("#"),Rr=n("Ideation"),Si=u(),Qe=r("p"),Lr=n("Ok. Now we have our goals and objectives, let’s think about how to achieve them."),Ci=u(),Xe=r("p"),zr=n("To better formulate and shape the solution, we tried to draw inspiration from the problems."),Ni=u(),et=r("p"),Mr=n("With the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:"),Oi=u(),W=r("ol"),Ft=r("li"),Wr=n("Earning"),xr=u(),Zt=r("li"),Br=n("Spending"),Hr=u(),Ut=r("li"),Dr=n("Savings"),Gi=u(),I(Se.$$.fragment),Ri=u(),tt=r("p"),jr=n("Then we create an affinity diagram of the painpoints."),Li=u(),I(Ce.$$.fragment),zi=u(),x=r("p"),Fr=n("The recurring theme found in the post-its are that digital money sometimes are too "),qt=r("em"),Zr=n("abstract"),Ur=n(". So, after some weeks of researching, we came upon a promising solution; "),Kt=r("strong"),qr=n("“Tangible User Interface”"),Kr=n("."),Mi=u(),I(Ne.$$.fragment),Wi=u(),it=r("p"),Vr=n("The initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)"),xi=u(),U=r("div"),I(Oe.$$.fragment),Jr=u(),I(Ge.$$.fragment),Bi=u(),I(Re.$$.fragment),Hi=u(),he=r("p"),Yr=n("Which is cute but it didn’t fully answers all of our "),at=r("a"),Qr=n("goals"),Xr=n(". But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it."),Di=u(),rt=r("p"),es=n("What if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?"),ji=u(),ue=r("h2"),q=r("a"),Vt=r("span"),ts=n("#"),is=n("Design"),Fi=u(),st=r("p"),as=n("With that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards."),Zi=u(),I(Le.$$.fragment),Ui=u(),I(ze.$$.fragment),qi=u(),ot=r("p"),rs=n("Then we started to design and iterate through the interface. This is how one iteration looks like."),Ki=u(),I(Me.$$.fragment),Vi=u(),lt=r("p"),ss=n("After each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process"),Ji=u(),nt=r("p"),os=n("because we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design."),Yi=u(),I(We.$$.fragment),Qi=u(),me=r("h2"),K=r("a"),Jt=r("span"),ls=n("#"),ns=n("Final Product"),Xi=u(),de=r("p"),fs=n(`And after a month of iterations discussion, out of our blood, sweat, and tears came
+`),I(ce.$$.fragment),ps=n(`
+ :D`),ea=u(),ve=r("p"),hs=n("It might be better for your experience if you see this "),xe=r("a"),us=n("video"),ms=n(" before we dive into the product."),ta=u(),ge=r("h2"),V=r("a"),Yt=r("span"),ds=n("#"),cs=n("Impacts"),ia=u(),we=r("h2"),J=r("a"),Qt=r("span"),vs=n("#"),gs=n("What I learned"),aa=u(),be=r("h2"),Y=r("a"),Xt=r("span"),ws=n("#"),bs=n("What I wish were more explored"),this.h()},l(e){p=s(e,"P",{});var a=o(p);d=f(a,"If you want a bite-sized summary, check out this "),v=s(a,"A",{href:!0,rel:!0});var ei=o(v);w=f(ei,"video"),ei.forEach(t),a.forEach(t),c=m(e),g=s(e,"H2",{id:!0});var _s=o(g);_=s(_s,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Gs=o(_);O=s(Gs,"SPAN",{});var Rs=o(O);G=f(Rs,"#"),Rs.forEach(t),Gs.forEach(t),$=f(_s,"Context"),_s.forEach(t),y=m(e),b=s(e,"P",{});var ft=o(b);C=f(ft,"Oink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… "),R=s(ft,"EM",{});var Ls=o(R);_a=f(Ls,"in the air"),Ls.forEach(t),ya=f(ft,", in a sense that you cannot really touch it; the money you have is just "),dt=s(ft,"EM",{});var zs=o(dt);ka=f(zs,"numbers"),zs.forEach(t),$a=f(ft," on the screen."),ft.forEach(t),ai=m(e),De=s(e,"P",{});var Ms=o(De);Ea=f(Ms,"It may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children."),Ms.forEach(t),ri=m(e),Q=s(e,"H2",{id:!0});var ys=o(Q);B=s(ys,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ws=o(B);ct=s(Ws,"SPAN",{});var xs=o(ct);Pa=f(xs,"#"),xs.forEach(t),Ws.forEach(t),Ia=f(ys,"Overview and Background"),ys.forEach(t),si=m(e),X=s(e,"P",{});var sa=o(X);vt=s(sa,"STRONG",{});var Bs=o(vt);Aa=f(Bs,"Primary Research"),Bs.forEach(t),Ta=s(sa,"BR",{}),Sa=f(sa,`
+After our initial research, we came to realize this problem from the two observations`),sa.forEach(t),oi=m(e),ee=s(e,"OL",{});var oa=o(ee);gt=s(oa,"LI",{});var Hs=o(gt);wt=s(Hs,"STRONG",{});var Ds=o(wt);Ca=f(Ds,"Financial experimenting during childhood is important"),Ds.forEach(t),Hs.forEach(t),Na=m(oa),je=s(oa,"LI",{});var ks=o(je);bt=s(ks,"STRONG",{});var js=o(bt);Oa=f(js,"The financial literacy in Korea is low"),js.forEach(t),Ga=f(ks," (and I believe it can also be said for the most part of the world)"),ks.forEach(t),oa.forEach(t),li=m(e),A(_e.$$.fragment,e),ni=m(e),te=s(e,"P",{});var la=o(te);_t=s(la,"STRONG",{});var Fs=o(_t);Ra=f(Fs,"Surveys & Interview"),Fs.forEach(t),La=s(la,"BR",{}),za=f(la,`
+After we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.`),la.forEach(t),fi=m(e),A(ye.$$.fragment,e),pi=m(e),Fe=s(e,"P",{});var Zs=o(Fe);Ma=f(Zs,"The result is them compiled and analyze into more digestible presentation."),Zs.forEach(t),hi=m(e),A(ke.$$.fragment,e),ui=m(e),ie=s(e,"P",{});var na=o(ie);Wa=f(na,"We found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of "),yt=s(na,"STRONG",{});var Us=o(yt);kt=s(Us,"EM",{});var qs=o(kt);xa=f(qs,"convenience"),qs.forEach(t),Us.forEach(t),Ba=f(na," (which, i know, is obvious but we like to make sure)."),na.forEach(t),mi=m(e),Ze=s(e,"P",{});var Ks=o(Ze);Ha=f(Ks,"The interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning."),Ks.forEach(t),di=m(e),ae=s(e,"H2",{id:!0});var $s=o(ae);H=s($s,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Vs=o(H);$t=s(Vs,"SPAN",{});var Js=o($t);Da=f(Js,"#"),Js.forEach(t),Vs.forEach(t),ja=f($s,"Problem"),$s.forEach(t),ci=m(e),re=s(e,"P",{});var fa=o(re);Fa=f(fa,"The problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can "),Et=s(fa,"STRONG",{});var Ys=o(Et);Za=f(Ys,"see"),Ys.forEach(t),Ua=f(fa,", reduced to just a numerical representation on a screen."),fa.forEach(t),vi=m(e),Ue=s(e,"P",{});var Qs=o(Ue);qa=f(Qs,"In order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world."),Qs.forEach(t),gi=m(e),A($e.$$.fragment,e),wi=m(e),qe=s(e,"P",{});var Xs=o(qe);Ka=f(Xs,"Another problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents."),Xs.forEach(t),bi=m(e),A(Ee.$$.fragment,e),_i=m(e),Ke=s(e,"P",{});var eo=o(Ke);Va=f(eo,"And that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”"),eo.forEach(t),yi=m(e),se=s(e,"H2",{id:!0});var Es=o(se);D=s(Es,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var to=o(D);Pt=s(to,"SPAN",{});var io=o(Pt);Ja=f(io,"#"),io.forEach(t),to.forEach(t),Ya=f(Es,"Target User"),Es.forEach(t),ki=m(e),Ve=s(e,"P",{});var ao=o(Ve);Qa=f(ao,"So, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be"),ao.forEach(t),$i=m(e),oe=s(e,"UL",{});var pa=o(oe);It=s(pa,"LI",{});var ro=o(It);L=s(ro,"P",{});var Be=o(L);At=s(Be,"STRONG",{});var so=o(At);Xa=f(so,"Kids"),so.forEach(t),er=s(Be,"BR",{}),tr=m(Be),Pe=s(Be,"A",{href:!0,rel:!0});var oo=o(Pe);Tt=s(oo,"EM",{});var lo=o(Tt);ir=f(lo,"Alpha Generation"),lo.forEach(t),oo.forEach(t),ar=s(Be,"BR",{}),rr=f(Be,`
+The biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.`),Be.forEach(t),ro.forEach(t),sr=m(pa),St=s(pa,"LI",{});var no=o(St);z=s(no,"P",{});var He=o(z);Ct=s(He,"STRONG",{});var fo=o(Ct);or=f(fo,"Parents"),fo.forEach(t),lr=s(He,"BR",{}),nr=m(He),Ie=s(He,"A",{href:!0,rel:!0});var po=o(Ie);Nt=s(po,"EM",{});var ho=o(Nt);fr=f(ho,"MZ Generation"),ho.forEach(t),po.forEach(t),pr=s(He,"BR",{}),hr=f(He,`
+Generation MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.`),He.forEach(t),no.forEach(t),pa.forEach(t),Ei=m(e),A(Ae.$$.fragment,e),Pi=m(e),le=s(e,"H2",{id:!0});var Ps=o(le);j=s(Ps,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var uo=o(j);Ot=s(uo,"SPAN",{});var mo=o(Ot);ur=f(mo,"#"),mo.forEach(t),uo.forEach(t),mr=f(Ps,"Goals"),Ps.forEach(t),Ii=m(e),Je=s(e,"P",{});var co=o(Je);dr=f(co,"We set some goals and objective for each goal so we have a common understanding among members and other stakeholders."),co.forEach(t),Ai=m(e),M=s(e,"OL",{});var pt=o(M);ne=s(pt,"LI",{});var ti=o(ne);Gt=s(ti,"STRONG",{});var vo=o(Gt);cr=f(vo,"create a seamless transition from physical to digital money"),vo.forEach(t),vr=s(ti,"BR",{}),gr=f(ti,`
+to achieve this we need to`),F=s(ti,"UL",{});var ht=o(F);Rt=s(ht,"LI",{});var go=o(Rt);wr=f(go,"Help them understand the value of digital money"),go.forEach(t),br=m(ht),Lt=s(ht,"LI",{});var wo=o(Lt);_r=f(wo,"Visualize digital money"),wo.forEach(t),yr=m(ht),zt=s(ht,"LI",{});var bo=o(zt);kr=f(bo,"Simulate the physical manipulation of digital money"),bo.forEach(t),ht.forEach(t),ti.forEach(t),$r=m(pt),fe=s(pt,"LI",{});var ii=o(fe);Mt=s(ii,"STRONG",{});var _o=o(Mt);Er=f(_o,"Form good money management habits"),_o.forEach(t),Pr=s(ii,"BR",{}),Ir=f(ii,`
+to encourage good habits we need to`),Te=s(ii,"UL",{});var ha=o(Te);Wt=s(ha,"LI",{});var yo=o(Wt);Ar=f(yo,"Make savings appealing"),yo.forEach(t),Tr=m(ha),xt=s(ha,"LI",{});var ko=o(xt);Sr=f(ko,"Foster thoughtful spending and saving"),ko.forEach(t),ha.forEach(t),ii.forEach(t),Cr=m(pt),Ye=s(pt,"LI",{});var Is=o(Ye);Bt=s(Is,"STRONG",{});var $o=o(Bt);Nr=f($o,"Encourage conversations about money between kids and parents"),$o.forEach(t),Ht=s(Is,"UL",{});var Eo=o(Ht);Dt=s(Eo,"LI",{});var Po=o(Dt);Or=f(Po,"Provide talking topic and common place to talk"),Po.forEach(t),Eo.forEach(t),Is.forEach(t),pt.forEach(t),Ti=m(e),pe=s(e,"H2",{id:!0});var As=o(pe);Z=s(As,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Io=o(Z);jt=s(Io,"SPAN",{});var Ao=o(jt);Gr=f(Ao,"#"),Ao.forEach(t),Io.forEach(t),Rr=f(As,"Ideation"),As.forEach(t),Si=m(e),Qe=s(e,"P",{});var To=o(Qe);Lr=f(To,"Ok. Now we have our goals and objectives, let’s think about how to achieve them."),To.forEach(t),Ci=m(e),Xe=s(e,"P",{});var So=o(Xe);zr=f(So,"To better formulate and shape the solution, we tried to draw inspiration from the problems."),So.forEach(t),Ni=m(e),et=s(e,"P",{});var Co=o(et);Mr=f(Co,"With the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:"),Co.forEach(t),Oi=m(e),W=s(e,"OL",{});var ut=o(W);Ft=s(ut,"LI",{});var No=o(Ft);Wr=f(No,"Earning"),No.forEach(t),xr=m(ut),Zt=s(ut,"LI",{});var Oo=o(Zt);Br=f(Oo,"Spending"),Oo.forEach(t),Hr=m(ut),Ut=s(ut,"LI",{});var Go=o(Ut);Dr=f(Go,"Savings"),Go.forEach(t),ut.forEach(t),Gi=m(e),A(Se.$$.fragment,e),Ri=m(e),tt=s(e,"P",{});var Ro=o(tt);jr=f(Ro,"Then we create an affinity diagram of the painpoints."),Ro.forEach(t),Li=m(e),A(Ce.$$.fragment,e),zi=m(e),x=s(e,"P",{});var mt=o(x);Fr=f(mt,"The recurring theme found in the post-its are that digital money sometimes are too "),qt=s(mt,"EM",{});var Lo=o(qt);Zr=f(Lo,"abstract"),Lo.forEach(t),Ur=f(mt,". So, after some weeks of researching, we came upon a promising solution; "),Kt=s(mt,"STRONG",{});var zo=o(Kt);qr=f(zo,"“Tangible User Interface”"),zo.forEach(t),Kr=f(mt,"."),mt.forEach(t),Mi=m(e),A(Ne.$$.fragment,e),Wi=m(e),it=s(e,"P",{});var Mo=o(it);Vr=f(Mo,"The initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)"),Mo.forEach(t),xi=m(e),U=s(e,"DIV",{class:!0});var ua=o(U);A(Oe.$$.fragment,ua),Jr=m(ua),A(Ge.$$.fragment,ua),ua.forEach(t),Bi=m(e),A(Re.$$.fragment,e),Hi=m(e),he=s(e,"P",{});var ma=o(he);Yr=f(ma,"Which is cute but it didn’t fully answers all of our "),at=s(ma,"A",{href:!0});var Wo=o(at);Qr=f(Wo,"goals"),Wo.forEach(t),Xr=f(ma,". But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it."),ma.forEach(t),Di=m(e),rt=s(e,"P",{});var xo=o(rt);es=f(xo,"What if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?"),xo.forEach(t),ji=m(e),ue=s(e,"H2",{id:!0});var Ts=o(ue);q=s(Ts,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Bo=o(q);Vt=s(Bo,"SPAN",{});var Ho=o(Vt);ts=f(Ho,"#"),Ho.forEach(t),Bo.forEach(t),is=f(Ts,"Design"),Ts.forEach(t),Fi=m(e),st=s(e,"P",{});var Do=o(st);as=f(Do,"With that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards."),Do.forEach(t),Zi=m(e),A(Le.$$.fragment,e),Ui=m(e),A(ze.$$.fragment,e),qi=m(e),ot=s(e,"P",{});var jo=o(ot);rs=f(jo,"Then we started to design and iterate through the interface. This is how one iteration looks like."),jo.forEach(t),Ki=m(e),A(Me.$$.fragment,e),Vi=m(e),lt=s(e,"P",{});var Fo=o(lt);ss=f(Fo,"After each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process"),Fo.forEach(t),Ji=m(e),nt=s(e,"P",{});var Zo=o(nt);os=f(Zo,"because we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design."),Zo.forEach(t),Yi=m(e),A(We.$$.fragment,e),Qi=m(e),me=s(e,"H2",{id:!0});var Ss=o(me);K=s(Ss,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Uo=o(K);Jt=s(Uo,"SPAN",{});var qo=o(Jt);ls=f(qo,"#"),qo.forEach(t),Uo.forEach(t),ns=f(Ss,"Final Product"),Ss.forEach(t),Xi=m(e),de=s(e,"P",{});var da=o(de);fs=f(da,`And after a month of iterations discussion, out of our blood, sweat, and tears came
+`),A(ce.$$.fragment,da),ps=f(da,`
+ :D`),da.forEach(t),ea=m(e),ve=s(e,"P",{});var ca=o(ve);hs=f(ca,"It might be better for your experience if you see this "),xe=s(ca,"A",{href:!0,rel:!0});var Ko=o(xe);us=f(Ko,"video"),Ko.forEach(t),ms=f(ca," before we dive into the product."),ca.forEach(t),ta=m(e),ge=s(e,"H2",{id:!0});var Cs=o(ge);V=s(Cs,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Vo=o(V);Yt=s(Vo,"SPAN",{});var Jo=o(Yt);ds=f(Jo,"#"),Jo.forEach(t),Vo.forEach(t),cs=f(Cs,"Impacts"),Cs.forEach(t),ia=m(e),we=s(e,"H2",{id:!0});var Ns=o(we);J=s(Ns,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Yo=o(J);Qt=s(Yo,"SPAN",{});var Qo=o(Qt);vs=f(Qo,"#"),Qo.forEach(t),Yo.forEach(t),gs=f(Ns,"What I learned"),Ns.forEach(t),aa=m(e),be=s(e,"H2",{id:!0});var Os=o(be);Y=s(Os,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Xo=o(Y);Xt=s(Xo,"SPAN",{});var el=o(Xt);ws=f(el,"#"),el.forEach(t),Xo.forEach(t),bs=f(Os,"What I wish were more explored"),Os.forEach(t),this.h()},h(){h(v,"href","https://youtu.be/I8RZJOs1q6Y"),h(v,"rel","nofollow"),h(_,"class","heading-link"),h(_,"title","Permalink"),h(_,"aria-hidden","true"),h(_,"href","#context"),h(g,"id","context"),h(B,"class","heading-link"),h(B,"title","Permalink"),h(B,"aria-hidden","true"),h(B,"href","#overview-and-background"),h(Q,"id","overview-and-background"),h(H,"class","heading-link"),h(H,"title","Permalink"),h(H,"aria-hidden","true"),h(H,"href","#problem"),h(ae,"id","problem"),h(D,"class","heading-link"),h(D,"title","Permalink"),h(D,"aria-hidden","true"),h(D,"href","#target-user"),h(se,"id","target-user"),h(Pe,"href","https://en.wikipedia.org/wiki/Generation_Alpha"),h(Pe,"rel","nofollow"),h(Ie,"href","https://en.namu.wiki/w/MZ%EC%84%B8%EB%8C%80"),h(Ie,"rel","nofollow"),h(j,"class","heading-link"),h(j,"title","Permalink"),h(j,"aria-hidden","true"),h(j,"href","#goals"),h(le,"id","goals"),h(Z,"class","heading-link"),h(Z,"title","Permalink"),h(Z,"aria-hidden","true"),h(Z,"href","#ideation"),h(pe,"id","ideation"),h(U,"class","drawing_container svelte-1kwwrxy"),h(at,"href","#goals"),h(q,"class","heading-link"),h(q,"title","Permalink"),h(q,"aria-hidden","true"),h(q,"href","#design"),h(ue,"id","design"),h(K,"class","heading-link"),h(K,"title","Permalink"),h(K,"aria-hidden","true"),h(K,"href","#final-product"),h(me,"id","final-product"),h(xe,"href","https://youtu.be/I8RZJOs1q6Y"),h(xe,"rel","nofollow"),h(V,"class","heading-link"),h(V,"title","Permalink"),h(V,"aria-hidden","true"),h(V,"href","#impacts"),h(ge,"id","impacts"),h(J,"class","heading-link"),h(J,"title","Permalink"),h(J,"aria-hidden","true"),h(J,"href","#what-i-learned"),h(we,"id","what-i-learned"),h(Y,"class","heading-link"),h(Y,"title","Permalink"),h(Y,"aria-hidden","true"),h(Y,"href","#what-i-wish-were-more-explored"),h(be,"id","what-i-wish-were-more-explored")},m(e,a){l(e,p,a),i(p,d),i(p,v),i(v,w),l(e,c,a),l(e,g,a),i(g,_),i(_,O),i(O,G),i(g,$),l(e,y,a),l(e,b,a),i(b,C),i(b,R),i(R,_a),i(b,ya),i(b,dt),i(dt,ka),i(b,$a),l(e,ai,a),l(e,De,a),i(De,Ea),l(e,ri,a),l(e,Q,a),i(Q,B),i(B,ct),i(ct,Pa),i(Q,Ia),l(e,si,a),l(e,X,a),i(X,vt),i(vt,Aa),i(X,Ta),i(X,Sa),l(e,oi,a),l(e,ee,a),i(ee,gt),i(gt,wt),i(wt,Ca),i(ee,Na),i(ee,je),i(je,bt),i(bt,Oa),i(je,Ga),l(e,li,a),T(_e,e,a),l(e,ni,a),l(e,te,a),i(te,_t),i(_t,Ra),i(te,La),i(te,za),l(e,fi,a),T(ye,e,a),l(e,pi,a),l(e,Fe,a),i(Fe,Ma),l(e,hi,a),T(ke,e,a),l(e,ui,a),l(e,ie,a),i(ie,Wa),i(ie,yt),i(yt,kt),i(kt,xa),i(ie,Ba),l(e,mi,a),l(e,Ze,a),i(Ze,Ha),l(e,di,a),l(e,ae,a),i(ae,H),i(H,$t),i($t,Da),i(ae,ja),l(e,ci,a),l(e,re,a),i(re,Fa),i(re,Et),i(Et,Za),i(re,Ua),l(e,vi,a),l(e,Ue,a),i(Ue,qa),l(e,gi,a),T($e,e,a),l(e,wi,a),l(e,qe,a),i(qe,Ka),l(e,bi,a),T(Ee,e,a),l(e,_i,a),l(e,Ke,a),i(Ke,Va),l(e,yi,a),l(e,se,a),i(se,D),i(D,Pt),i(Pt,Ja),i(se,Ya),l(e,ki,a),l(e,Ve,a),i(Ve,Qa),l(e,$i,a),l(e,oe,a),i(oe,It),i(It,L),i(L,At),i(At,Xa),i(L,er),i(L,tr),i(L,Pe),i(Pe,Tt),i(Tt,ir),i(L,ar),i(L,rr),i(oe,sr),i(oe,St),i(St,z),i(z,Ct),i(Ct,or),i(z,lr),i(z,nr),i(z,Ie),i(Ie,Nt),i(Nt,fr),i(z,pr),i(z,hr),l(e,Ei,a),T(Ae,e,a),l(e,Pi,a),l(e,le,a),i(le,j),i(j,Ot),i(Ot,ur),i(le,mr),l(e,Ii,a),l(e,Je,a),i(Je,dr),l(e,Ai,a),l(e,M,a),i(M,ne),i(ne,Gt),i(Gt,cr),i(ne,vr),i(ne,gr),i(ne,F),i(F,Rt),i(Rt,wr),i(F,br),i(F,Lt),i(Lt,_r),i(F,yr),i(F,zt),i(zt,kr),i(M,$r),i(M,fe),i(fe,Mt),i(Mt,Er),i(fe,Pr),i(fe,Ir),i(fe,Te),i(Te,Wt),i(Wt,Ar),i(Te,Tr),i(Te,xt),i(xt,Sr),i(M,Cr),i(M,Ye),i(Ye,Bt),i(Bt,Nr),i(Ye,Ht),i(Ht,Dt),i(Dt,Or),l(e,Ti,a),l(e,pe,a),i(pe,Z),i(Z,jt),i(jt,Gr),i(pe,Rr),l(e,Si,a),l(e,Qe,a),i(Qe,Lr),l(e,Ci,a),l(e,Xe,a),i(Xe,zr),l(e,Ni,a),l(e,et,a),i(et,Mr),l(e,Oi,a),l(e,W,a),i(W,Ft),i(Ft,Wr),i(W,xr),i(W,Zt),i(Zt,Br),i(W,Hr),i(W,Ut),i(Ut,Dr),l(e,Gi,a),T(Se,e,a),l(e,Ri,a),l(e,tt,a),i(tt,jr),l(e,Li,a),T(Ce,e,a),l(e,zi,a),l(e,x,a),i(x,Fr),i(x,qt),i(qt,Zr),i(x,Ur),i(x,Kt),i(Kt,qr),i(x,Kr),l(e,Mi,a),T(Ne,e,a),l(e,Wi,a),l(e,it,a),i(it,Vr),l(e,xi,a),l(e,U,a),T(Oe,U,null),i(U,Jr),T(Ge,U,null),l(e,Bi,a),T(Re,e,a),l(e,Hi,a),l(e,he,a),i(he,Yr),i(he,at),i(at,Qr),i(he,Xr),l(e,Di,a),l(e,rt,a),i(rt,es),l(e,ji,a),l(e,ue,a),i(ue,q),i(q,Vt),i(Vt,ts),i(ue,is),l(e,Fi,a),l(e,st,a),i(st,as),l(e,Zi,a),T(Le,e,a),l(e,Ui,a),T(ze,e,a),l(e,qi,a),l(e,ot,a),i(ot,rs),l(e,Ki,a),T(Me,e,a),l(e,Vi,a),l(e,lt,a),i(lt,ss),l(e,Ji,a),l(e,nt,a),i(nt,os),l(e,Yi,a),T(We,e,a),l(e,Qi,a),l(e,me,a),i(me,K),i(K,Jt),i(Jt,ls),i(me,ns),l(e,Xi,a),l(e,de,a),i(de,fs),T(ce,de,null),i(de,ps),l(e,ea,a),l(e,ve,a),i(ve,hs),i(ve,xe),i(xe,us),i(ve,ms),l(e,ta,a),l(e,ge,a),i(ge,V),i(V,Yt),i(Yt,ds),i(ge,cs),l(e,ia,a),l(e,we,a),i(we,J),i(J,Qt),i(Qt,vs),i(we,gs),l(e,aa,a),l(e,be,a),i(be,Y),i(Y,Xt),i(Xt,ws),i(be,bs),ra=!0},p(e,[a]){const ei={};a&1&&(ei.$$scope={dirty:a,ctx:e}),ce.$set(ei)},i(e){ra||(E(_e.$$.fragment,e),E(ye.$$.fragment,e),E(ke.$$.fragment,e),E($e.$$.fragment,e),E(Ee.$$.fragment,e),E(Ae.$$.fragment,e),E(Se.$$.fragment,e),E(Ce.$$.fragment,e),E(Ne.$$.fragment,e),E(Oe.$$.fragment,e),E(Ge.$$.fragment,e),E(Re.$$.fragment,e),E(Le.$$.fragment,e),E(ze.$$.fragment,e),E(Me.$$.fragment,e),E(We.$$.fragment,e),E(ce.$$.fragment,e),ra=!0)},o(e){P(_e.$$.fragment,e),P(ye.$$.fragment,e),P(ke.$$.fragment,e),P($e.$$.fragment,e),P(Ee.$$.fragment,e),P(Ae.$$.fragment,e),P(Se.$$.fragment,e),P(Ce.$$.fragment,e),P(Ne.$$.fragment,e),P(Oe.$$.fragment,e),P(Ge.$$.fragment,e),P(Re.$$.fragment,e),P(Le.$$.fragment,e),P(ze.$$.fragment,e),P(Me.$$.fragment,e),P(We.$$.fragment,e),P(ce.$$.fragment,e),ra=!1},d(e){e&&t(p),e&&t(c),e&&t(g),e&&t(y),e&&t(b),e&&t(ai),e&&t(De),e&&t(ri),e&&t(Q),e&&t(si),e&&t(X),e&&t(oi),e&&t(ee),e&&t(li),S(_e,e),e&&t(ni),e&&t(te),e&&t(fi),S(ye,e),e&&t(pi),e&&t(Fe),e&&t(hi),S(ke,e),e&&t(ui),e&&t(ie),e&&t(mi),e&&t(Ze),e&&t(di),e&&t(ae),e&&t(ci),e&&t(re),e&&t(vi),e&&t(Ue),e&&t(gi),S($e,e),e&&t(wi),e&&t(qe),e&&t(bi),S(Ee,e),e&&t(_i),e&&t(Ke),e&&t(yi),e&&t(se),e&&t(ki),e&&t(Ve),e&&t($i),e&&t(oe),e&&t(Ei),S(Ae,e),e&&t(Pi),e&&t(le),e&&t(Ii),e&&t(Je),e&&t(Ai),e&&t(M),e&&t(Ti),e&&t(pe),e&&t(Si),e&&t(Qe),e&&t(Ci),e&&t(Xe),e&&t(Ni),e&&t(et),e&&t(Oi),e&&t(W),e&&t(Gi),S(Se,e),e&&t(Ri),e&&t(tt),e&&t(Li),S(Ce,e),e&&t(zi),e&&t(x),e&&t(Mi),S(Ne,e),e&&t(Wi),e&&t(it),e&&t(xi),e&&t(U),S(Oe),S(Ge),e&&t(Bi),S(Re,e),e&&t(Hi),e&&t(he),e&&t(Di),e&&t(rt),e&&t(ji),e&&t(ue),e&&t(Fi),e&&t(st),e&&t(Zi),S(Le,e),e&&t(Ui),S(ze,e),e&&t(qi),e&&t(ot),e&&t(Ki),S(Me,e),e&&t(Vi),e&&t(lt),e&&t(Ji),e&&t(nt),e&&t(Yi),S(We,e),e&&t(Qi),e&&t(me),e&&t(Xi),e&&t(de),S(ce),e&&t(ea),e&&t(ve),e&&t(ta),e&&t(ge),e&&t(ia),e&&t(we),e&&t(aa),e&&t(be)}}}const Ll={slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"/images/posts/oink/cover.png",tags:["UI Design","UX Design"],hidden:!1};class zl extends ga{constructor(p){super(),wa(this,p,null,Sl,ba,{})}}export{zl as default,Ll as metadata};
diff --git a/_app/immutable/entry/(blog-article)-oink-page.md.729a927f.js b/_app/immutable/entry/(blog-article)-oink-page.md.729a927f.js
deleted file mode 100644
index 4bc9765..0000000
--- a/_app/immutable/entry/(blog-article)-oink-page.md.729a927f.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import{S as Fo,i as qo,s as Do,k as r,q as l,a as p,y as u,l as o,m as s,r as f,h as t,c as m,z as d,n as h,b as n,G as i,A as v,M as Ko,g,d as b,B as c}from"../chunks/index.889feda2.js";/* empty css                                                      *//* empty css                                                        */import{I as w}from"../chunks/Image.9fd0349e.js";function Vo(Zo){let T,Ri,Y,Oi,At,N,I,He,Ci,Ni,Gt,y,Mi,Ze,Bi,Wi,Fe,ji,zi,Lt,we,Ui,xt,M,S,qe,Hi,Zi,Rt,B,De,Fi,qi,Di,Ot,W,Ke,Ve,Ki,Vi,ye,Je,Ji,Xi,Ct,Q,Nt,j,Xe,Yi,Qi,ea,Mt,ee,Bt,$e,ta,Wt,te,jt,z,ia,Ye,Qe,aa,ra,zt,ke,oa,Ut,U,A,et,sa,na,Ht,H,la,tt,fa,pa,Zt,_e,ma,Ft,ie,qt,Ee,ha,Dt,ae,Kt,Pe,ua,Vt,Z,G,it,da,va,Jt,Te,ga,Xt,F,at,$,rt,ba,ca,wa,re,ot,ya,$a,ka,_a,st,k,nt,Ea,Pa,Ta,oe,lt,Ia,Sa,Aa,Yt,se,Qt,q,L,ft,Ga,La,ei,Ie,xa,ti,_,D,pt,Ra,Oa,Ca,x,mt,Na,Ma,ht,Ba,Wa,ut,ja,za,K,dt,Ua,Ha,Za,ne,vt,Fa,qa,gt,Da,Ka,Se,bt,Va,ct,wt,Ja,ii,V,R,yt,Xa,Ya,ai,Ae,Qa,ri,Ge,er,oi,Le,tr,si,E,$t,ir,ar,kt,rr,or,_t,sr,ni,le,li,xe,nr,fi,fe,pi,P,lr,Et,fr,pr,Pt,mr,hr,mi,pe,hi,Re,ur,ui,O,me,dr,he,di,ue,vi,J,vr,Oe,gr,br,gi,Ce,cr,bi,X,C,Tt,wr,yr,ci,Ne,$r,wi,de,yi,ve,$i,Me,kr,ki,ge,_i;return Q=new w({props:{src:"/images/posts/oink/research.png",alt:"Claims supporting our two observations"}}),ee=new w({props:{src:"/images/posts/oink/survey-design.png",alt:"Claims supporting our two observations"}}),te=new w({props:{src:"/images/posts/oink/survey.png",alt:"Claims supporting our two observations"}}),ie=new w({props:{src:"/images/posts/oink/problem-1.png",alt:"Claims supporting our two observations"}}),ae=new w({props:{src:"/images/posts/oink/problem-2.png",alt:"Claims supporting our two observations"}}),se=new w({props:{src:"/images/posts/oink/target.png",alt:"Claims supporting our two observations"}}),le=new w({props:{src:"/images/posts/oink/ideation-1.png",alt:"Claims supporting our two observations"}}),fe=new w({props:{src:"/images/posts/oink/ideation-2.png",alt:"Claims supporting our two observations"}}),pe=new w({props:{src:"/images/posts/oink/ideation-3.png",alt:"Claims supporting our two observations"}}),me=new w({props:{src:"/images/posts/oink/ideation-4.png",alt:"Claims supporting our two observations"}}),he=new w({props:{src:"/images/posts/oink/beer-app.jpeg",alt:"Claims supporting our two observations"}}),ue=new w({props:{src:"/images/posts/oink/ideation-5.png",alt:"Claims supporting our two observations"}}),de=new w({props:{src:"/images/posts/oink/design-1.png",alt:"Claims supporting our two observations"}}),ve=new w({props:{src:"/images/posts/oink/design-2.png",alt:"Claims supporting our two observations"}}),ge=new w({props:{src:"/images/posts/oink/design-3.png",alt:"Claims supporting our two observations"}}),{c(){T=r("p"),Ri=l("If you want a bite-sized summary, check out this "),Y=r("a"),Oi=l("video"),At=p(),N=r("h2"),I=r("a"),He=r("span"),Ci=l("#"),Ni=l("Context"),Gt=p(),y=r("p"),Mi=l("Oink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… "),Ze=r("em"),Bi=l("in the air"),Wi=l(", in a sense that you cannot really touch it; the money you have is just "),Fe=r("em"),ji=l("numbers"),zi=l(" on the screen."),Lt=p(),we=r("p"),Ui=l("It may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children."),xt=p(),M=r("h2"),S=r("a"),qe=r("span"),Hi=l("#"),Zi=l("Overview and Background"),Rt=p(),B=r("p"),De=r("strong"),Fi=l("Primary Research"),qi=r("br"),Di=l(`
-After our initial research, we came to realize this problem from the two observations`),Ot=p(),W=r("ol"),Ke=r("li"),Ve=r("strong"),Ki=l("Financial experimenting during childhood is important"),Vi=p(),ye=r("li"),Je=r("strong"),Ji=l("The financial literacy in Korea is low"),Xi=l(" (and I believe it can also be said for the most part of the world)"),Ct=p(),u(Q.$$.fragment),Nt=p(),j=r("p"),Xe=r("strong"),Yi=l("Surveys & Interview"),Qi=r("br"),ea=l(`
-After we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.`),Mt=p(),u(ee.$$.fragment),Bt=p(),$e=r("p"),ta=l("The result is them compiled and analyze into more digestible presentation."),Wt=p(),u(te.$$.fragment),jt=p(),z=r("p"),ia=l("We found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of "),Ye=r("strong"),Qe=r("em"),aa=l("convenience"),ra=l(" (which, i know, is obvious but we like to make sure)."),zt=p(),ke=r("p"),oa=l("The interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning."),Ut=p(),U=r("h2"),A=r("a"),et=r("span"),sa=l("#"),na=l("Problem"),Ht=p(),H=r("p"),la=l("The problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can "),tt=r("strong"),fa=l("see"),pa=l(", reduced to just a numerical representation on a screen."),Zt=p(),_e=r("p"),ma=l("In order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world."),Ft=p(),u(ie.$$.fragment),qt=p(),Ee=r("p"),ha=l("Another problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents."),Dt=p(),u(ae.$$.fragment),Kt=p(),Pe=r("p"),ua=l("And that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”"),Vt=p(),Z=r("h2"),G=r("a"),it=r("span"),da=l("#"),va=l("Target User"),Jt=p(),Te=r("p"),ga=l("So, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be"),Xt=p(),F=r("ul"),at=r("li"),$=r("p"),rt=r("strong"),ba=l("Kids"),ca=r("br"),wa=p(),re=r("a"),ot=r("em"),ya=l("Alpha Generation"),$a=r("br"),ka=l(`
-The biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.`),_a=p(),st=r("li"),k=r("p"),nt=r("strong"),Ea=l("Parents"),Pa=r("br"),Ta=p(),oe=r("a"),lt=r("em"),Ia=l("MZ Generation"),Sa=r("br"),Aa=l(`
-Generation MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.`),Yt=p(),u(se.$$.fragment),Qt=p(),q=r("h2"),L=r("a"),ft=r("span"),Ga=l("#"),La=l("Goals"),ei=p(),Ie=r("p"),xa=l("We set some goals and objective for each goal so we have a common understanding among members and other stakeholders."),ti=p(),_=r("ol"),D=r("li"),pt=r("strong"),Ra=l("create a seamless transition from physical to digital money"),Oa=r("br"),Ca=l(`
-to achieve this we need to`),x=r("ul"),mt=r("li"),Na=l("Help them understand the value of digital money"),Ma=p(),ht=r("li"),Ba=l("Visualize digital money"),Wa=p(),ut=r("li"),ja=l("Simulate the physical manipulation of digital money"),za=p(),K=r("li"),dt=r("strong"),Ua=l("Form good money management habits"),Ha=r("br"),Za=l(`
-to encourage good habits we need to`),ne=r("ul"),vt=r("li"),Fa=l("Make savings appealing"),qa=p(),gt=r("li"),Da=l("Foster thoughtful spending and saving"),Ka=p(),Se=r("li"),bt=r("strong"),Va=l("Encourage conversations about money between kids and parents"),ct=r("ul"),wt=r("li"),Ja=l("Provide talking topic and common place to talk"),ii=p(),V=r("h2"),R=r("a"),yt=r("span"),Xa=l("#"),Ya=l("Ideation"),ai=p(),Ae=r("p"),Qa=l("Ok. Now we have our goals and objectives, let’s think about how to achieve them."),ri=p(),Ge=r("p"),er=l("To better formulate and shape the solution, we tried to draw inspiration from the problems."),oi=p(),Le=r("p"),tr=l("With the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:"),si=p(),E=r("ol"),$t=r("li"),ir=l("Earning"),ar=p(),kt=r("li"),rr=l("Spending"),or=p(),_t=r("li"),sr=l("Savings"),ni=p(),u(le.$$.fragment),li=p(),xe=r("p"),nr=l("Then we create an affinity diagram of the painpoints."),fi=p(),u(fe.$$.fragment),pi=p(),P=r("p"),lr=l("The recurring theme found in the post-its are that digital money sometimes are too "),Et=r("em"),fr=l("abstract"),pr=l(". So, after some weeks of researching, we came upon a promising solution; "),Pt=r("strong"),mr=l("“Tangible User Interface”"),hr=l("."),mi=p(),u(pe.$$.fragment),hi=p(),Re=r("p"),ur=l("The initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)"),ui=p(),O=r("div"),u(me.$$.fragment),dr=p(),u(he.$$.fragment),di=p(),u(ue.$$.fragment),vi=p(),J=r("p"),vr=l("Which is cute but it didn’t fully answers all of our "),Oe=r("a"),gr=l("goals"),br=l(". But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it."),gi=p(),Ce=r("p"),cr=l("What if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?"),bi=p(),X=r("h2"),C=r("a"),Tt=r("span"),wr=l("#"),yr=l("Design"),ci=p(),Ne=r("p"),$r=l("With that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards."),wi=p(),u(de.$$.fragment),yi=p(),u(ve.$$.fragment),$i=p(),Me=r("p"),kr=l("Then we started to design and iterate through the interface. This is how one iteration looks like."),ki=p(),u(ge.$$.fragment),this.h()},l(e){T=o(e,"P",{});var a=s(T);Ri=f(a,"If you want a bite-sized summary, check out this "),Y=o(a,"A",{href:!0,rel:!0});var xr=s(Y);Oi=f(xr,"video"),xr.forEach(t),a.forEach(t),At=m(e),N=o(e,"H2",{id:!0});var _r=s(N);I=o(_r,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Rr=s(I);He=o(Rr,"SPAN",{});var Or=s(He);Ci=f(Or,"#"),Or.forEach(t),Rr.forEach(t),Ni=f(_r,"Context"),_r.forEach(t),Gt=m(e),y=o(e,"P",{});var Be=s(y);Mi=f(Be,"Oink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… "),Ze=o(Be,"EM",{});var Cr=s(Ze);Bi=f(Cr,"in the air"),Cr.forEach(t),Wi=f(Be,", in a sense that you cannot really touch it; the money you have is just "),Fe=o(Be,"EM",{});var Nr=s(Fe);ji=f(Nr,"numbers"),Nr.forEach(t),zi=f(Be," on the screen."),Be.forEach(t),Lt=m(e),we=o(e,"P",{});var Mr=s(we);Ui=f(Mr,"It may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children."),Mr.forEach(t),xt=m(e),M=o(e,"H2",{id:!0});var Er=s(M);S=o(Er,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Br=s(S);qe=o(Br,"SPAN",{});var Wr=s(qe);Hi=f(Wr,"#"),Wr.forEach(t),Br.forEach(t),Zi=f(Er,"Overview and Background"),Er.forEach(t),Rt=m(e),B=o(e,"P",{});var Ei=s(B);De=o(Ei,"STRONG",{});var jr=s(De);Fi=f(jr,"Primary Research"),jr.forEach(t),qi=o(Ei,"BR",{}),Di=f(Ei,`
-After our initial research, we came to realize this problem from the two observations`),Ei.forEach(t),Ot=m(e),W=o(e,"OL",{});var Pi=s(W);Ke=o(Pi,"LI",{});var zr=s(Ke);Ve=o(zr,"STRONG",{});var Ur=s(Ve);Ki=f(Ur,"Financial experimenting during childhood is important"),Ur.forEach(t),zr.forEach(t),Vi=m(Pi),ye=o(Pi,"LI",{});var Pr=s(ye);Je=o(Pr,"STRONG",{});var Hr=s(Je);Ji=f(Hr,"The financial literacy in Korea is low"),Hr.forEach(t),Xi=f(Pr," (and I believe it can also be said for the most part of the world)"),Pr.forEach(t),Pi.forEach(t),Ct=m(e),d(Q.$$.fragment,e),Nt=m(e),j=o(e,"P",{});var Ti=s(j);Xe=o(Ti,"STRONG",{});var Zr=s(Xe);Yi=f(Zr,"Surveys & Interview"),Zr.forEach(t),Qi=o(Ti,"BR",{}),ea=f(Ti,`
-After we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.`),Ti.forEach(t),Mt=m(e),d(ee.$$.fragment,e),Bt=m(e),$e=o(e,"P",{});var Fr=s($e);ta=f(Fr,"The result is them compiled and analyze into more digestible presentation."),Fr.forEach(t),Wt=m(e),d(te.$$.fragment,e),jt=m(e),z=o(e,"P",{});var Ii=s(z);ia=f(Ii,"We found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of "),Ye=o(Ii,"STRONG",{});var qr=s(Ye);Qe=o(qr,"EM",{});var Dr=s(Qe);aa=f(Dr,"convenience"),Dr.forEach(t),qr.forEach(t),ra=f(Ii," (which, i know, is obvious but we like to make sure)."),Ii.forEach(t),zt=m(e),ke=o(e,"P",{});var Kr=s(ke);oa=f(Kr,"The interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning."),Kr.forEach(t),Ut=m(e),U=o(e,"H2",{id:!0});var Tr=s(U);A=o(Tr,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Vr=s(A);et=o(Vr,"SPAN",{});var Jr=s(et);sa=f(Jr,"#"),Jr.forEach(t),Vr.forEach(t),na=f(Tr,"Problem"),Tr.forEach(t),Ht=m(e),H=o(e,"P",{});var Si=s(H);la=f(Si,"The problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can "),tt=o(Si,"STRONG",{});var Xr=s(tt);fa=f(Xr,"see"),Xr.forEach(t),pa=f(Si,", reduced to just a numerical representation on a screen."),Si.forEach(t),Zt=m(e),_e=o(e,"P",{});var Yr=s(_e);ma=f(Yr,"In order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world."),Yr.forEach(t),Ft=m(e),d(ie.$$.fragment,e),qt=m(e),Ee=o(e,"P",{});var Qr=s(Ee);ha=f(Qr,"Another problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents."),Qr.forEach(t),Dt=m(e),d(ae.$$.fragment,e),Kt=m(e),Pe=o(e,"P",{});var eo=s(Pe);ua=f(eo,"And that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”"),eo.forEach(t),Vt=m(e),Z=o(e,"H2",{id:!0});var Ir=s(Z);G=o(Ir,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var to=s(G);it=o(to,"SPAN",{});var io=s(it);da=f(io,"#"),io.forEach(t),to.forEach(t),va=f(Ir,"Target User"),Ir.forEach(t),Jt=m(e),Te=o(e,"P",{});var ao=s(Te);ga=f(ao,"So, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be"),ao.forEach(t),Xt=m(e),F=o(e,"UL",{});var Ai=s(F);at=o(Ai,"LI",{});var ro=s(at);$=o(ro,"P",{});var be=s($);rt=o(be,"STRONG",{});var oo=s(rt);ba=f(oo,"Kids"),oo.forEach(t),ca=o(be,"BR",{}),wa=m(be),re=o(be,"A",{href:!0,rel:!0});var so=s(re);ot=o(so,"EM",{});var no=s(ot);ya=f(no,"Alpha Generation"),no.forEach(t),so.forEach(t),$a=o(be,"BR",{}),ka=f(be,`
-The biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.`),be.forEach(t),ro.forEach(t),_a=m(Ai),st=o(Ai,"LI",{});var lo=s(st);k=o(lo,"P",{});var ce=s(k);nt=o(ce,"STRONG",{});var fo=s(nt);Ea=f(fo,"Parents"),fo.forEach(t),Pa=o(ce,"BR",{}),Ta=m(ce),oe=o(ce,"A",{href:!0,rel:!0});var po=s(oe);lt=o(po,"EM",{});var mo=s(lt);Ia=f(mo,"MZ Generation"),mo.forEach(t),po.forEach(t),Sa=o(ce,"BR",{}),Aa=f(ce,`
-Generation MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.`),ce.forEach(t),lo.forEach(t),Ai.forEach(t),Yt=m(e),d(se.$$.fragment,e),Qt=m(e),q=o(e,"H2",{id:!0});var Sr=s(q);L=o(Sr,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var ho=s(L);ft=o(ho,"SPAN",{});var uo=s(ft);Ga=f(uo,"#"),uo.forEach(t),ho.forEach(t),La=f(Sr,"Goals"),Sr.forEach(t),ei=m(e),Ie=o(e,"P",{});var vo=s(Ie);xa=f(vo,"We set some goals and objective for each goal so we have a common understanding among members and other stakeholders."),vo.forEach(t),ti=m(e),_=o(e,"OL",{});var We=s(_);D=o(We,"LI",{});var It=s(D);pt=o(It,"STRONG",{});var go=s(pt);Ra=f(go,"create a seamless transition from physical to digital money"),go.forEach(t),Oa=o(It,"BR",{}),Ca=f(It,`
-to achieve this we need to`),x=o(It,"UL",{});var je=s(x);mt=o(je,"LI",{});var bo=s(mt);Na=f(bo,"Help them understand the value of digital money"),bo.forEach(t),Ma=m(je),ht=o(je,"LI",{});var co=s(ht);Ba=f(co,"Visualize digital money"),co.forEach(t),Wa=m(je),ut=o(je,"LI",{});var wo=s(ut);ja=f(wo,"Simulate the physical manipulation of digital money"),wo.forEach(t),je.forEach(t),It.forEach(t),za=m(We),K=o(We,"LI",{});var St=s(K);dt=o(St,"STRONG",{});var yo=s(dt);Ua=f(yo,"Form good money management habits"),yo.forEach(t),Ha=o(St,"BR",{}),Za=f(St,`
-to encourage good habits we need to`),ne=o(St,"UL",{});var Gi=s(ne);vt=o(Gi,"LI",{});var $o=s(vt);Fa=f($o,"Make savings appealing"),$o.forEach(t),qa=m(Gi),gt=o(Gi,"LI",{});var ko=s(gt);Da=f(ko,"Foster thoughtful spending and saving"),ko.forEach(t),Gi.forEach(t),St.forEach(t),Ka=m(We),Se=o(We,"LI",{});var Ar=s(Se);bt=o(Ar,"STRONG",{});var _o=s(bt);Va=f(_o,"Encourage conversations about money between kids and parents"),_o.forEach(t),ct=o(Ar,"UL",{});var Eo=s(ct);wt=o(Eo,"LI",{});var Po=s(wt);Ja=f(Po,"Provide talking topic and common place to talk"),Po.forEach(t),Eo.forEach(t),Ar.forEach(t),We.forEach(t),ii=m(e),V=o(e,"H2",{id:!0});var Gr=s(V);R=o(Gr,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var To=s(R);yt=o(To,"SPAN",{});var Io=s(yt);Xa=f(Io,"#"),Io.forEach(t),To.forEach(t),Ya=f(Gr,"Ideation"),Gr.forEach(t),ai=m(e),Ae=o(e,"P",{});var So=s(Ae);Qa=f(So,"Ok. Now we have our goals and objectives, let’s think about how to achieve them."),So.forEach(t),ri=m(e),Ge=o(e,"P",{});var Ao=s(Ge);er=f(Ao,"To better formulate and shape the solution, we tried to draw inspiration from the problems."),Ao.forEach(t),oi=m(e),Le=o(e,"P",{});var Go=s(Le);tr=f(Go,"With the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:"),Go.forEach(t),si=m(e),E=o(e,"OL",{});var ze=s(E);$t=o(ze,"LI",{});var Lo=s($t);ir=f(Lo,"Earning"),Lo.forEach(t),ar=m(ze),kt=o(ze,"LI",{});var xo=s(kt);rr=f(xo,"Spending"),xo.forEach(t),or=m(ze),_t=o(ze,"LI",{});var Ro=s(_t);sr=f(Ro,"Savings"),Ro.forEach(t),ze.forEach(t),ni=m(e),d(le.$$.fragment,e),li=m(e),xe=o(e,"P",{});var Oo=s(xe);nr=f(Oo,"Then we create an affinity diagram of the painpoints."),Oo.forEach(t),fi=m(e),d(fe.$$.fragment,e),pi=m(e),P=o(e,"P",{});var Ue=s(P);lr=f(Ue,"The recurring theme found in the post-its are that digital money sometimes are too "),Et=o(Ue,"EM",{});var Co=s(Et);fr=f(Co,"abstract"),Co.forEach(t),pr=f(Ue,". So, after some weeks of researching, we came upon a promising solution; "),Pt=o(Ue,"STRONG",{});var No=s(Pt);mr=f(No,"“Tangible User Interface”"),No.forEach(t),hr=f(Ue,"."),Ue.forEach(t),mi=m(e),d(pe.$$.fragment,e),hi=m(e),Re=o(e,"P",{});var Mo=s(Re);ur=f(Mo,"The initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)"),Mo.forEach(t),ui=m(e),O=o(e,"DIV",{class:!0});var Li=s(O);d(me.$$.fragment,Li),dr=m(Li),d(he.$$.fragment,Li),Li.forEach(t),di=m(e),d(ue.$$.fragment,e),vi=m(e),J=o(e,"P",{});var xi=s(J);vr=f(xi,"Which is cute but it didn’t fully answers all of our "),Oe=o(xi,"A",{href:!0});var Bo=s(Oe);gr=f(Bo,"goals"),Bo.forEach(t),br=f(xi,". But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it."),xi.forEach(t),gi=m(e),Ce=o(e,"P",{});var Wo=s(Ce);cr=f(Wo,"What if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?"),Wo.forEach(t),bi=m(e),X=o(e,"H2",{id:!0});var Lr=s(X);C=o(Lr,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var jo=s(C);Tt=o(jo,"SPAN",{});var zo=s(Tt);wr=f(zo,"#"),zo.forEach(t),jo.forEach(t),yr=f(Lr,"Design"),Lr.forEach(t),ci=m(e),Ne=o(e,"P",{});var Uo=s(Ne);$r=f(Uo,"With that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards."),Uo.forEach(t),wi=m(e),d(de.$$.fragment,e),yi=m(e),d(ve.$$.fragment,e),$i=m(e),Me=o(e,"P",{});var Ho=s(Me);kr=f(Ho,"Then we started to design and iterate through the interface. This is how one iteration looks like."),Ho.forEach(t),ki=m(e),d(ge.$$.fragment,e),this.h()},h(){h(Y,"href","https://youtu.be/I8RZJOs1q6Y"),h(Y,"rel","nofollow"),h(I,"class","heading-link"),h(I,"title","Permalink"),h(I,"aria-hidden","true"),h(I,"href","#context"),h(N,"id","context"),h(S,"class","heading-link"),h(S,"title","Permalink"),h(S,"aria-hidden","true"),h(S,"href","#overview-and-background"),h(M,"id","overview-and-background"),h(A,"class","heading-link"),h(A,"title","Permalink"),h(A,"aria-hidden","true"),h(A,"href","#problem"),h(U,"id","problem"),h(G,"class","heading-link"),h(G,"title","Permalink"),h(G,"aria-hidden","true"),h(G,"href","#target-user"),h(Z,"id","target-user"),h(re,"href","https://en.wikipedia.org/wiki/Generation_Alpha"),h(re,"rel","nofollow"),h(oe,"href","https://en.namu.wiki/w/MZ%EC%84%B8%EB%8C%80"),h(oe,"rel","nofollow"),h(L,"class","heading-link"),h(L,"title","Permalink"),h(L,"aria-hidden","true"),h(L,"href","#goals"),h(q,"id","goals"),h(R,"class","heading-link"),h(R,"title","Permalink"),h(R,"aria-hidden","true"),h(R,"href","#ideation"),h(V,"id","ideation"),h(O,"class","drawing_container svelte-1kwwrxy"),h(Oe,"href","#goals"),h(C,"class","heading-link"),h(C,"title","Permalink"),h(C,"aria-hidden","true"),h(C,"href","#design"),h(X,"id","design")},m(e,a){n(e,T,a),i(T,Ri),i(T,Y),i(Y,Oi),n(e,At,a),n(e,N,a),i(N,I),i(I,He),i(He,Ci),i(N,Ni),n(e,Gt,a),n(e,y,a),i(y,Mi),i(y,Ze),i(Ze,Bi),i(y,Wi),i(y,Fe),i(Fe,ji),i(y,zi),n(e,Lt,a),n(e,we,a),i(we,Ui),n(e,xt,a),n(e,M,a),i(M,S),i(S,qe),i(qe,Hi),i(M,Zi),n(e,Rt,a),n(e,B,a),i(B,De),i(De,Fi),i(B,qi),i(B,Di),n(e,Ot,a),n(e,W,a),i(W,Ke),i(Ke,Ve),i(Ve,Ki),i(W,Vi),i(W,ye),i(ye,Je),i(Je,Ji),i(ye,Xi),n(e,Ct,a),v(Q,e,a),n(e,Nt,a),n(e,j,a),i(j,Xe),i(Xe,Yi),i(j,Qi),i(j,ea),n(e,Mt,a),v(ee,e,a),n(e,Bt,a),n(e,$e,a),i($e,ta),n(e,Wt,a),v(te,e,a),n(e,jt,a),n(e,z,a),i(z,ia),i(z,Ye),i(Ye,Qe),i(Qe,aa),i(z,ra),n(e,zt,a),n(e,ke,a),i(ke,oa),n(e,Ut,a),n(e,U,a),i(U,A),i(A,et),i(et,sa),i(U,na),n(e,Ht,a),n(e,H,a),i(H,la),i(H,tt),i(tt,fa),i(H,pa),n(e,Zt,a),n(e,_e,a),i(_e,ma),n(e,Ft,a),v(ie,e,a),n(e,qt,a),n(e,Ee,a),i(Ee,ha),n(e,Dt,a),v(ae,e,a),n(e,Kt,a),n(e,Pe,a),i(Pe,ua),n(e,Vt,a),n(e,Z,a),i(Z,G),i(G,it),i(it,da),i(Z,va),n(e,Jt,a),n(e,Te,a),i(Te,ga),n(e,Xt,a),n(e,F,a),i(F,at),i(at,$),i($,rt),i(rt,ba),i($,ca),i($,wa),i($,re),i(re,ot),i(ot,ya),i($,$a),i($,ka),i(F,_a),i(F,st),i(st,k),i(k,nt),i(nt,Ea),i(k,Pa),i(k,Ta),i(k,oe),i(oe,lt),i(lt,Ia),i(k,Sa),i(k,Aa),n(e,Yt,a),v(se,e,a),n(e,Qt,a),n(e,q,a),i(q,L),i(L,ft),i(ft,Ga),i(q,La),n(e,ei,a),n(e,Ie,a),i(Ie,xa),n(e,ti,a),n(e,_,a),i(_,D),i(D,pt),i(pt,Ra),i(D,Oa),i(D,Ca),i(D,x),i(x,mt),i(mt,Na),i(x,Ma),i(x,ht),i(ht,Ba),i(x,Wa),i(x,ut),i(ut,ja),i(_,za),i(_,K),i(K,dt),i(dt,Ua),i(K,Ha),i(K,Za),i(K,ne),i(ne,vt),i(vt,Fa),i(ne,qa),i(ne,gt),i(gt,Da),i(_,Ka),i(_,Se),i(Se,bt),i(bt,Va),i(Se,ct),i(ct,wt),i(wt,Ja),n(e,ii,a),n(e,V,a),i(V,R),i(R,yt),i(yt,Xa),i(V,Ya),n(e,ai,a),n(e,Ae,a),i(Ae,Qa),n(e,ri,a),n(e,Ge,a),i(Ge,er),n(e,oi,a),n(e,Le,a),i(Le,tr),n(e,si,a),n(e,E,a),i(E,$t),i($t,ir),i(E,ar),i(E,kt),i(kt,rr),i(E,or),i(E,_t),i(_t,sr),n(e,ni,a),v(le,e,a),n(e,li,a),n(e,xe,a),i(xe,nr),n(e,fi,a),v(fe,e,a),n(e,pi,a),n(e,P,a),i(P,lr),i(P,Et),i(Et,fr),i(P,pr),i(P,Pt),i(Pt,mr),i(P,hr),n(e,mi,a),v(pe,e,a),n(e,hi,a),n(e,Re,a),i(Re,ur),n(e,ui,a),n(e,O,a),v(me,O,null),i(O,dr),v(he,O,null),n(e,di,a),v(ue,e,a),n(e,vi,a),n(e,J,a),i(J,vr),i(J,Oe),i(Oe,gr),i(J,br),n(e,gi,a),n(e,Ce,a),i(Ce,cr),n(e,bi,a),n(e,X,a),i(X,C),i(C,Tt),i(Tt,wr),i(X,yr),n(e,ci,a),n(e,Ne,a),i(Ne,$r),n(e,wi,a),v(de,e,a),n(e,yi,a),v(ve,e,a),n(e,$i,a),n(e,Me,a),i(Me,kr),n(e,ki,a),v(ge,e,a),_i=!0},p:Ko,i(e){_i||(g(Q.$$.fragment,e),g(ee.$$.fragment,e),g(te.$$.fragment,e),g(ie.$$.fragment,e),g(ae.$$.fragment,e),g(se.$$.fragment,e),g(le.$$.fragment,e),g(fe.$$.fragment,e),g(pe.$$.fragment,e),g(me.$$.fragment,e),g(he.$$.fragment,e),g(ue.$$.fragment,e),g(de.$$.fragment,e),g(ve.$$.fragment,e),g(ge.$$.fragment,e),_i=!0)},o(e){b(Q.$$.fragment,e),b(ee.$$.fragment,e),b(te.$$.fragment,e),b(ie.$$.fragment,e),b(ae.$$.fragment,e),b(se.$$.fragment,e),b(le.$$.fragment,e),b(fe.$$.fragment,e),b(pe.$$.fragment,e),b(me.$$.fragment,e),b(he.$$.fragment,e),b(ue.$$.fragment,e),b(de.$$.fragment,e),b(ve.$$.fragment,e),b(ge.$$.fragment,e),_i=!1},d(e){e&&t(T),e&&t(At),e&&t(N),e&&t(Gt),e&&t(y),e&&t(Lt),e&&t(we),e&&t(xt),e&&t(M),e&&t(Rt),e&&t(B),e&&t(Ot),e&&t(W),e&&t(Ct),c(Q,e),e&&t(Nt),e&&t(j),e&&t(Mt),c(ee,e),e&&t(Bt),e&&t($e),e&&t(Wt),c(te,e),e&&t(jt),e&&t(z),e&&t(zt),e&&t(ke),e&&t(Ut),e&&t(U),e&&t(Ht),e&&t(H),e&&t(Zt),e&&t(_e),e&&t(Ft),c(ie,e),e&&t(qt),e&&t(Ee),e&&t(Dt),c(ae,e),e&&t(Kt),e&&t(Pe),e&&t(Vt),e&&t(Z),e&&t(Jt),e&&t(Te),e&&t(Xt),e&&t(F),e&&t(Yt),c(se,e),e&&t(Qt),e&&t(q),e&&t(ei),e&&t(Ie),e&&t(ti),e&&t(_),e&&t(ii),e&&t(V),e&&t(ai),e&&t(Ae),e&&t(ri),e&&t(Ge),e&&t(oi),e&&t(Le),e&&t(si),e&&t(E),e&&t(ni),c(le,e),e&&t(li),e&&t(xe),e&&t(fi),c(fe,e),e&&t(pi),e&&t(P),e&&t(mi),c(pe,e),e&&t(hi),e&&t(Re),e&&t(ui),e&&t(O),c(me),c(he),e&&t(di),c(ue,e),e&&t(vi),e&&t(J),e&&t(gi),e&&t(Ce),e&&t(bi),e&&t(X),e&&t(ci),e&&t(Ne),e&&t(wi),c(de,e),e&&t(yi),c(ve,e),e&&t($i),e&&t(Me),e&&t(ki),c(ge,e)}}}const es={slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"/images/posts/oink/cover.png",tags:["UX Design","UI Design"],hidden:!1};class ts extends Fo{constructor(T){super(),qo(this,T,null,Vo,Do,{})}}export{ts as default,es as metadata};
diff --git a/_app/immutable/entry/(blog-article)-project-structure-page.md.42e0c5de.js b/_app/immutable/entry/(blog-article)-project-structure-page.md.a69c3ea5.js
similarity index 98%
rename from _app/immutable/entry/(blog-article)-project-structure-page.md.42e0c5de.js
rename to _app/immutable/entry/(blog-article)-project-structure-page.md.a69c3ea5.js
index 0c36262..c2d7e6d 100644
--- a/_app/immutable/entry/(blog-article)-project-structure-page.md.42e0c5de.js
+++ b/_app/immutable/entry/(blog-article)-project-structure-page.md.a69c3ea5.js
@@ -1,4 +1,4 @@
-import{S as Xt,i as Yt,s as ea,k as l,q as s,a as h,y as ta,l as r,m as n,r as o,h as t,c as f,z as aa,n as i,b as c,G as a,A as sa,g as oa,d as la,B as ra,M as na}from"../chunks/index.889feda2.js";import{C as ia}from"../chunks/CodeBlock.280f02c3.js";function pa(He){let u,Z=`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Header</span> <span class="token punctuation">/></span></span>
+import{S as Xt,i as Yt,s as ea,k as l,q as s,a as h,y as ta,l as r,m as n,r as o,h as t,c as f,z as aa,n as i,b as c,G as a,A as sa,g as oa,d as la,B as ra,M as na}from"../chunks/index.963f39ba.js";import{C as ia}from"../chunks/CodeBlock.d6ac5a85.js";function pa(He){let u,Z=`<code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Header</span> <span class="token punctuation">/></span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Hero</span> <span class="token punctuation">/></span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>About</span> <span class="token punctuation">/></span></span>
 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Footer</span> <span class="token punctuation">/></span></span></code>`;return{c(){u=l("pre"),this.h()},l(d){u=r(d,"PRE",{class:!0});var B=n(u);B.forEach(t),this.h()},h(){i(u,"class","language-html")},m(d,B){c(d,u,B),u.innerHTML=Z},p:na,d(d){d&&t(u)}}}function ca(He){let u,Z,d,B,$e,pe,T,w,J,Se,xe,ce,m,ze,M,je,Oe,Q,De,Be,ue,C,_,V,Me,Ne,he,L,Le,fe,H,b,X,We,Ke,de,W,Ge,me,$,k,Y,Ie,qe,ve,K,Fe,we,S,_e,x,E,ee,Re,Ue,be,v,Ze,N,Je,Qe,te,Ve,Xe,ke,z,g,ae,Ye,et,Ee,G,tt,ge,j,y,at,se,st,ot,oe,lt,rt,nt,P,it,le,pt,ct,re,ut,ht,ye,O,A,ne,ft,dt,Pe,D,mt,I,vt,wt,Ae;return S=new ia({props:{lang:"html",filename:"+page.svelte",$$slots:{default:[pa]},$$scope:{ctx:He}}}),{c(){u=l("p"),Z=s("This project follows the basic "),d=l("a"),B=s("SvelteKit structure"),$e=s(", with some added conventions to make customization a post-management easier."),pe=h(),T=l("h2"),w=l("a"),J=l("span"),Se=s("#"),xe=s("Components"),ce=h(),m=l("p"),ze=s("The components are organized following the "),M=l("a"),je=s("Atomic Design"),Oe=s(" principles, albeit somewhat simplified. Components are in the "),Q=l("code"),De=s("src/lib/components"),Be=s(" folder, and are organized in the following way:"),ue=h(),C=l("h3"),_=l("a"),V=l("span"),Me=s("#"),Ne=s("Atoms"),he=h(),L=l("p"),Le=s("Atoms are the most basic components, which can be seen as building blocks for other components. They’re small and self-contained, and do only one thing. Examples of atoms are buttons, inputs, and tags."),fe=h(),H=l("h3"),b=l("a"),X=l("span"),We=s("#"),Ke=s("Molecules"),de=h(),W=l("p"),Ge=s("Molecules are groups of atoms that work together to form a more complex component. Examples of molecules are cards, groups of links, or an alert callout."),me=h(),$=l("h3"),k=l("a"),Y=l("span"),Ie=s("#"),qe=s("Organisms"),ve=h(),K=l("p"),Fe=s("Organisms, in this project, are code blocks that represent a section of a page, such as the header, footer and hero section. They can be used directly in a page as a sort of building block, so the page’s code can be as simple as this:"),we=h(),ta(S.$$.fragment),_e=h(),x=l("h2"),E=l("a"),ee=l("span"),Re=s("#"),Ue=s("Component Gallery"),be=h(),v=l("p"),Ze=s("This project uses "),N=l("a"),Je=s("Histoire"),Qe=s(" to be able to see and develop components in isolation. To open it, run "),te=l("code"),Ve=s("npm run story:dev"),Xe=s(". This way you can customize and build new components with placeholder content and without worrying about where to put them in a page."),ke=h(),z=l("h2"),g=l("a"),ae=l("span"),Ye=s("#"),et=s("Pages"),Ee=h(),G=l("p"),tt=s("Pages obey the default SvelteKit structure, but can be summarized as follows:"),ge=h(),j=l("ul"),y=l("li"),at=s("There are two different file types: the pages ("),se=l("code"),st=s("+page.svelte"),ot=s(") and the layouts ("),oe=l("code"),lt=s("+layout.svelte"),rt=s("). Layouts are a way to reuse the same structure between different pages without having to duplicate code;"),nt=h(),P=l("li"),it=s("There are two different page layouts in this site: the “Waves” layout, which all pages inside the "),le=l("code"),pt=s("(waves)"),ct=s(" folder use, and the “Blog Article” layout, which all pages inside the "),re=l("code"),ut=s("(blog-article)"),ht=s(" folder use;"),ye=h(),O=l("h2"),A=l("a"),ne=l("span"),ft=s("#"),dt=s("Blog Posts"),Pe=h(),D=l("p"),mt=s("To know how blog posts work and how to create new ones, check out "),I=l("a"),vt=s("How Blog Posts Work"),wt=s("."),this.h()},l(e){u=r(e,"P",{});var p=n(u);Z=o(p,"This project follows the basic "),d=r(p,"A",{href:!0,rel:!0});var ie=n(d);B=o(ie,"SvelteKit structure"),ie.forEach(t),$e=o(p,", with some added conventions to make customization a post-management easier."),p.forEach(t),pe=f(e),T=r(e,"H2",{id:!0});var _t=n(T);w=r(_t,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var At=n(w);J=r(At,"SPAN",{});var Tt=n(J);Se=o(Tt,"#"),Tt.forEach(t),At.forEach(t),xe=o(_t,"Components"),_t.forEach(t),ce=f(e),m=r(e,"P",{});var q=n(m);ze=o(q,"The components are organized following the "),M=r(q,"A",{href:!0,rel:!0});var Ct=n(M);je=o(Ct,"Atomic Design"),Ct.forEach(t),Oe=o(q," principles, albeit somewhat simplified. Components are in the "),Q=r(q,"CODE",{});var Ht=n(Q);De=o(Ht,"src/lib/components"),Ht.forEach(t),Be=o(q," folder, and are organized in the following way:"),q.forEach(t),ue=f(e),C=r(e,"H3",{id:!0});var bt=n(C);_=r(bt,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var $t=n(_);V=r($t,"SPAN",{});var St=n(V);Me=o(St,"#"),St.forEach(t),$t.forEach(t),Ne=o(bt,"Atoms"),bt.forEach(t),he=f(e),L=r(e,"P",{});var xt=n(L);Le=o(xt,"Atoms are the most basic components, which can be seen as building blocks for other components. They’re small and self-contained, and do only one thing. Examples of atoms are buttons, inputs, and tags."),xt.forEach(t),fe=f(e),H=r(e,"H3",{id:!0});var kt=n(H);b=r(kt,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var zt=n(b);X=r(zt,"SPAN",{});var jt=n(X);We=o(jt,"#"),jt.forEach(t),zt.forEach(t),Ke=o(kt,"Molecules"),kt.forEach(t),de=f(e),W=r(e,"P",{});var Ot=n(W);Ge=o(Ot,"Molecules are groups of atoms that work together to form a more complex component. Examples of molecules are cards, groups of links, or an alert callout."),Ot.forEach(t),me=f(e),$=r(e,"H3",{id:!0});var Et=n($);k=r(Et,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Dt=n(k);Y=r(Dt,"SPAN",{});var Bt=n(Y);Ie=o(Bt,"#"),Bt.forEach(t),Dt.forEach(t),qe=o(Et,"Organisms"),Et.forEach(t),ve=f(e),K=r(e,"P",{});var Mt=n(K);Fe=o(Mt,"Organisms, in this project, are code blocks that represent a section of a page, such as the header, footer and hero section. They can be used directly in a page as a sort of building block, so the page’s code can be as simple as this:"),Mt.forEach(t),we=f(e),aa(S.$$.fragment,e),_e=f(e),x=r(e,"H2",{id:!0});var gt=n(x);E=r(gt,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Nt=n(E);ee=r(Nt,"SPAN",{});var Lt=n(ee);Re=o(Lt,"#"),Lt.forEach(t),Nt.forEach(t),Ue=o(gt,"Component Gallery"),gt.forEach(t),be=f(e),v=r(e,"P",{});var F=n(v);Ze=o(F,"This project uses "),N=r(F,"A",{href:!0,rel:!0});var Wt=n(N);Je=o(Wt,"Histoire"),Wt.forEach(t),Qe=o(F," to be able to see and develop components in isolation. To open it, run "),te=r(F,"CODE",{});var Kt=n(te);Ve=o(Kt,"npm run story:dev"),Kt.forEach(t),Xe=o(F,". This way you can customize and build new components with placeholder content and without worrying about where to put them in a page."),F.forEach(t),ke=f(e),z=r(e,"H2",{id:!0});var yt=n(z);g=r(yt,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Gt=n(g);ae=r(Gt,"SPAN",{});var It=n(ae);Ye=o(It,"#"),It.forEach(t),Gt.forEach(t),et=o(yt,"Pages"),yt.forEach(t),Ee=f(e),G=r(e,"P",{});var qt=n(G);tt=o(qt,"Pages obey the default SvelteKit structure, but can be summarized as follows:"),qt.forEach(t),ge=f(e),j=r(e,"UL",{});var Te=n(j);y=r(Te,"LI",{});var R=n(y);at=o(R,"There are two different file types: the pages ("),se=r(R,"CODE",{});var Ft=n(se);st=o(Ft,"+page.svelte"),Ft.forEach(t),ot=o(R,") and the layouts ("),oe=r(R,"CODE",{});var Rt=n(oe);lt=o(Rt,"+layout.svelte"),Rt.forEach(t),rt=o(R,"). Layouts are a way to reuse the same structure between different pages without having to duplicate code;"),R.forEach(t),nt=f(Te),P=r(Te,"LI",{});var U=n(P);it=o(U,"There are two different page layouts in this site: the “Waves” layout, which all pages inside the "),le=r(U,"CODE",{});var Ut=n(le);pt=o(Ut,"(waves)"),Ut.forEach(t),ct=o(U," folder use, and the “Blog Article” layout, which all pages inside the "),re=r(U,"CODE",{});var Zt=n(re);ut=o(Zt,"(blog-article)"),Zt.forEach(t),ht=o(U," folder use;"),U.forEach(t),Te.forEach(t),ye=f(e),O=r(e,"H2",{id:!0});var Pt=n(O);A=r(Pt,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Jt=n(A);ne=r(Jt,"SPAN",{});var Qt=n(ne);ft=o(Qt,"#"),Qt.forEach(t),Jt.forEach(t),dt=o(Pt,"Blog Posts"),Pt.forEach(t),Pe=f(e),D=r(e,"P",{});var Ce=n(D);mt=o(Ce,"To know how blog posts work and how to create new ones, check out "),I=r(Ce,"A",{href:!0});var Vt=n(I);vt=o(Vt,"How Blog Posts Work"),Vt.forEach(t),wt=o(Ce,"."),Ce.forEach(t),this.h()},h(){i(d,"href","https://kit.svelte.dev/docs/project-structure"),i(d,"rel","nofollow"),i(w,"class","heading-link"),i(w,"title","Permalink"),i(w,"aria-hidden","true"),i(w,"href","#components"),i(T,"id","components"),i(M,"href","https://medium.com/@WeAreMobile1st/atomic-design-getting-started-916bc81bad0e"),i(M,"rel","nofollow"),i(_,"class","heading-link"),i(_,"title","Permalink"),i(_,"aria-hidden","true"),i(_,"href","#atoms"),i(C,"id","atoms"),i(b,"class","heading-link"),i(b,"title","Permalink"),i(b,"aria-hidden","true"),i(b,"href","#molecules"),i(H,"id","molecules"),i(k,"class","heading-link"),i(k,"title","Permalink"),i(k,"aria-hidden","true"),i(k,"href","#organisms"),i($,"id","organisms"),i(E,"class","heading-link"),i(E,"title","Permalink"),i(E,"aria-hidden","true"),i(E,"href","#component-gallery"),i(x,"id","component-gallery"),i(N,"href","https://histoire.dev"),i(N,"rel","nofollow"),i(g,"class","heading-link"),i(g,"title","Permalink"),i(g,"aria-hidden","true"),i(g,"href","#pages"),i(z,"id","pages"),i(A,"class","heading-link"),i(A,"title","Permalink"),i(A,"aria-hidden","true"),i(A,"href","#blog-posts"),i(O,"id","blog-posts"),i(I,"href","/blog-posts")},m(e,p){c(e,u,p),a(u,Z),a(u,d),a(d,B),a(u,$e),c(e,pe,p),c(e,T,p),a(T,w),a(w,J),a(J,Se),a(T,xe),c(e,ce,p),c(e,m,p),a(m,ze),a(m,M),a(M,je),a(m,Oe),a(m,Q),a(Q,De),a(m,Be),c(e,ue,p),c(e,C,p),a(C,_),a(_,V),a(V,Me),a(C,Ne),c(e,he,p),c(e,L,p),a(L,Le),c(e,fe,p),c(e,H,p),a(H,b),a(b,X),a(X,We),a(H,Ke),c(e,de,p),c(e,W,p),a(W,Ge),c(e,me,p),c(e,$,p),a($,k),a(k,Y),a(Y,Ie),a($,qe),c(e,ve,p),c(e,K,p),a(K,Fe),c(e,we,p),sa(S,e,p),c(e,_e,p),c(e,x,p),a(x,E),a(E,ee),a(ee,Re),a(x,Ue),c(e,be,p),c(e,v,p),a(v,Ze),a(v,N),a(N,Je),a(v,Qe),a(v,te),a(te,Ve),a(v,Xe),c(e,ke,p),c(e,z,p),a(z,g),a(g,ae),a(ae,Ye),a(z,et),c(e,Ee,p),c(e,G,p),a(G,tt),c(e,ge,p),c(e,j,p),a(j,y),a(y,at),a(y,se),a(se,st),a(y,ot),a(y,oe),a(oe,lt),a(y,rt),a(j,nt),a(j,P),a(P,it),a(P,le),a(le,pt),a(P,ct),a(P,re),a(re,ut),a(P,ht),c(e,ye,p),c(e,O,p),a(O,A),a(A,ne),a(ne,ft),a(O,dt),c(e,Pe,p),c(e,D,p),a(D,mt),a(D,I),a(I,vt),a(D,wt),Ae=!0},p(e,[p]){const ie={};p&1&&(ie.$$scope={dirty:p,ctx:e}),S.$set(ie)},i(e){Ae||(oa(S.$$.fragment,e),Ae=!0)},o(e){la(S.$$.fragment,e),Ae=!1},d(e){e&&t(u),e&&t(pe),e&&t(T),e&&t(ce),e&&t(m),e&&t(ue),e&&t(C),e&&t(he),e&&t(L),e&&t(fe),e&&t(H),e&&t(de),e&&t(W),e&&t(me),e&&t($),e&&t(ve),e&&t(K),e&&t(we),ra(S,e),e&&t(_e),e&&t(x),e&&t(be),e&&t(v),e&&t(ke),e&&t(z),e&&t(Ee),e&&t(G),e&&t(ge),e&&t(j),e&&t(ye),e&&t(O),e&&t(Pe),e&&t(D)}}}const fa={hidden:!0,slug:"project-structure",title:"Project Structure",date:"2023-04-22T21:55:21.800Z",excerpt:"How code and structure are organized.",coverImage:"/images/posts/project-structure.jpg",tags:["Documentation"]};class da extends Xt{constructor(u){super(),Yt(this,u,null,ca,ea,{})}}export{da as default,fa as metadata};
diff --git a/_app/immutable/entry/(blog-article)-roger-roger-page.md.467361a8.js b/_app/immutable/entry/(blog-article)-roger-roger-page.md.b45ea0c5.js
similarity index 99%
rename from _app/immutable/entry/(blog-article)-roger-roger-page.md.467361a8.js
rename to _app/immutable/entry/(blog-article)-roger-roger-page.md.b45ea0c5.js
index 02bea86..f951ee7 100644
--- a/_app/immutable/entry/(blog-article)-roger-roger-page.md.467361a8.js
+++ b/_app/immutable/entry/(blog-article)-roger-roger-page.md.b45ea0c5.js
@@ -1 +1 @@
-import{S as Ha,i as Ga,s as Na,k as s,y as m,a as p,q as n,l,m as i,z as v,c as u,h as t,r as f,n as h,b as a,A as $,G as o,g as y,d as g,B as _}from"../chunks/index.889feda2.js";import{I as w}from"../chunks/Image.9fd0349e.js";import{B as xa}from"../chunks/Button.835f3106.js";function ja(Be){let c;return{c(){c=n("Github")},l(d){c=f(d,"Github")},m(d,te){a(d,c,te)},d(d){d&&t(c)}}}function Ca(Be){let c;return{c(){c=n("YouTube")},l(d){c=f(d,"YouTube")},m(d,te){a(d,c,te)},d(d){d&&t(c)}}}function Da(Be){let c,d,te,B,nt,re,ft,O,E,Oe,nr,fr,ht,ge,hr,pt,oe,ut,ae,ct,z,b,ze,pr,ur,dt,Y,cr,_e,dr,mr,mt,se,vt,we,vr,$t,le,yt,Pe,$r,gt,ie,_t,Ee,yr,wt,ne,Pt,fe,Et,L,k,Ye,gr,_r,bt,be,wr,kt,ke,Pr,It,he,Tt,M,I,Le,Er,br,St,Ie,kr,At,pe,xt,U,T,Me,Ir,Tr,Ht,Te,Sr,Gt,ue,Nt,q,S,Ue,Ar,xr,jt,Se,Hr,Ct,ce,Dt,V,A,qe,Gr,Nr,Rt,Ae,jr,Bt,de,Cr,me,Dr,Ot,J,x,Ve,Rr,Br,zt,P,Or,Je,zr,Yr,Fe,Lr,Mr,We,Ur,qr,Yt,F,Vr,Ze,Jr,Fr,Lt,H,Wr,Ke,Zr,Kr,Qe,Qr,Mt,G,Xr,Xe,eo,to,et,ro,Ut,xe,oo,qt,W,N,tt,ao,so,Vt,He,lo,Jt,j,ve,io,$e,Ft,Z,no,Ge,fo,ho,Wt,K,C,rt,po,uo,Zt,Ne,co,Kt,Q,D,ot,mo,vo,Qt,je,$o,Xt,ye,er,X,R,at,yo,go,tr,Ce,_o,rr,De,wo,or;return d=new xa({props:{href:"https://github.com/punnlert/RogerRoger-ID311-Individual-Project",$$slots:{default:[ja]},$$scope:{ctx:Be}}}),B=new xa({props:{href:"https://youtu.be/GxBwiM4es7w",$$slots:{default:[Ca]},$$scope:{ctx:Be}}}),re=new w({props:{src:"/images/posts/roger-roger/start_page.png",alt:"Start Page"}}),oe=new w({props:{src:"/images/posts/roger-roger/gameplay_1.png",alt:"Picture showing gameplay while the rocket shoots the asteroid"}}),ae=new w({props:{src:"/images/posts/roger-roger/gameplay_2.png",alt:"Start Page"}}),se=new w({props:{src:"/images/posts/roger-roger/start_page.png",alt:"Start Page"}}),le=new w({props:{src:"/images/posts/roger-roger/score_and_info.png",alt:"Start Page"}}),ie=new w({props:{src:"/images/posts/roger-roger/asteroid_streaming.png",alt:"Start Page"}}),ne=new w({props:{src:"/images/posts/roger-roger/gameplay_2.png",alt:"Start Page"}}),fe=new w({props:{src:"/images/posts/roger-roger/new_highscore.png",alt:"Start Page"}}),he=new w({props:{src:"/images/posts/roger-roger/IP_input.jpg",alt:"Start Page"}}),pe=new w({props:{src:"/images/posts/roger-roger/gun_control.PNG",alt:"Start Page"}}),ue=new w({props:{src:"/images/posts/roger-roger/trajectory_control.PNG",alt:"Start Page"}}),ce=new w({props:{src:"/images/posts/roger-roger/acceleration.PNG",alt:"Start Page"}}),ve=new w({props:{src:"/images/posts/roger-roger/astronaut.png",alt:"Start Page"}}),$e=new w({props:{src:"/images/posts/roger-roger/asteroid.png",alt:"Start Page"}}),ye=new w({props:{src:"/images/posts/roger-roger/RogerRogerUML.drawio.png",alt:"Start Page"}}),{c(){c=s("div"),m(d.$$.fragment),te=p(),m(B.$$.fragment),nt=p(),m(re.$$.fragment),ft=p(),O=s("h2"),E=s("a"),Oe=s("span"),nr=n("#"),fr=n("Introduction"),ht=p(),ge=s("p"),hr=n("“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots."),pt=p(),m(oe.$$.fragment),ut=p(),m(ae.$$.fragment),ct=p(),z=s("h2"),b=s("a"),ze=s("span"),pr=n("#"),ur=n("The main screen"),dt=p(),Y=s("p"),cr=n("Upon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in "),_e=s("a"),dr=n("the control screen"),mr=n(" section."),mt=p(),m(se.$$.fragment),vt=p(),we=s("p"),vr=n("After all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left."),$t=p(),m(le.$$.fragment),yt=p(),Pe=s("p"),$r=n("Group of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on."),gt=p(),m(ie.$$.fragment),_t=p(),Ee=s("p"),yr=n("If the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore."),wt=p(),m(ne.$$.fragment),Pt=p(),m(fe.$$.fragment),Et=p(),L=s("h2"),k=s("a"),Ye=s("span"),gr=n("#"),_r=n("The control screen"),bt=p(),be=s("p"),wr=n("The control screen consisted of two parts: socket connection input and the control."),kt=p(),ke=s("p"),Pr=n("Socket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned."),It=p(),m(he.$$.fragment),Tt=p(),M=s("h3"),I=s("a"),Le=s("span"),Er=n("#"),br=n("Gun controls"),St=p(),Ie=s("p"),kr=n("lets the player controls the gun. There is a two seconds cooldown period for gun firing."),At=p(),m(pe.$$.fragment),xt=p(),U=s("h3"),T=s("a"),Me=s("span"),Ir=n("#"),Tr=n("Trajectory control"),Ht=p(),Te=s("p"),Sr=n("lets the player controls the up-down movement of the spaceship"),Gt=p(),m(ue.$$.fragment),Nt=p(),q=s("h3"),S=s("a"),Ue=s("span"),Ar=n("#"),xr=n("Acceleration"),jt=p(),Se=s("p"),Hr=n("lets the player controls the left-right of the spaceship"),Ct=p(),m(ce.$$.fragment),Dt=p(),V=s("h2"),A=s("a"),qe=s("span"),Gr=n("#"),Nr=n("The game mechanics"),Rt=p(),Ae=s("p"),jr=n("Player navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear."),Bt=p(),de=s("p"),Cr=n("To see a clearer picture, you can check my demo on "),me=s("a"),Dr=n("YouTube"),Ot=p(),J=s("h2"),x=s("a"),Ve=s("span"),Rr=n("#"),Br=n("How to start?"),zt=p(),P=s("p"),Or=n("After you clone the repository, you have to go into every folder "),Je=s("code"),zr=n("/client/display; gun-control; horizontal control; vertical control"),Yr=n(" and "),Fe=s("code"),Lr=n("/server"),Mr=n(" then run "),We=s("code"),Ur=n("npm install"),qr=n(" for each one of them."),Yt=p(),F=s("p"),Vr=n("If you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into "),Ze=s("code"),Jr=n("/client"),Fr=n(" then click go live."),Lt=p(),H=s("p"),Wr=n("For the display of the main screen, go into "),Ke=s("code"),Zr=n("/client/display"),Kr=n(" directory and run "),Qe=s("code"),Qr=n("npm run dev"),Mt=p(),G=s("p"),Xr=n("To initiate the server, go into"),Xe=s("code"),eo=n("/server"),to=n(" then run "),et=s("code"),ro=n("npx nodemon 'index.js'"),Ut=p(),xe=s("p"),oo=n("If there is an IP address appearing on your ‘display’ screen, you are ready to play!"),qt=p(),W=s("h2"),N=s("a"),tt=s("span"),ao=n("#"),so=n("Highlight"),Vt=p(),He=s("p"),lo=n("After finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid."),Jt=p(),j=s("div"),m(ve.$$.fragment),io=p(),m($e.$$.fragment),Ft=p(),Z=s("p"),no=n("I also learned to postpone the socket.io connection and connect to the input IP (in the "),Ge=s("a"),fo=n("control sections"),ho=n(") and I am really proud of it."),Wt=p(),K=s("h2"),C=s("a"),rt=s("span"),po=n("#"),uo=n("Software"),Zt=p(),Ne=s("p"),co=n("The game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices."),Kt=p(),Q=s("h2"),D=s("a"),ot=s("span"),mo=n("#"),vo=n("The architecture"),Qt=p(),je=s("p"),$o=n("This is the UML of the game code."),Xt=p(),m(ye.$$.fragment),er=p(),X=s("h2"),R=s("a"),at=s("span"),yo=n("#"),go=n("What I would do to make it better"),tr=p(),Ce=s("p"),_o=n("Right now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there."),rr=p(),De=s("p"),wo=n("I would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired."),this.h()},l(e){c=l(e,"DIV",{class:!0});var r=i(c);v(d.$$.fragment,r),te=u(r),v(B.$$.fragment,r),r.forEach(t),nt=u(e),v(re.$$.fragment,e),ft=u(e),O=l(e,"H2",{id:!0});var Re=i(O);E=l(Re,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var st=i(E);Oe=l(st,"SPAN",{});var jo=i(Oe);nr=f(jo,"#"),jo.forEach(t),st.forEach(t),fr=f(Re,"Introduction"),Re.forEach(t),ht=u(e),ge=l(e,"P",{});var Co=i(ge);hr=f(Co,"“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots."),Co.forEach(t),pt=u(e),v(oe.$$.fragment,e),ut=u(e),v(ae.$$.fragment,e),ct=u(e),z=l(e,"H2",{id:!0});var Po=i(z);b=l(Po,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Do=i(b);ze=l(Do,"SPAN",{});var Ro=i(ze);pr=f(Ro,"#"),Ro.forEach(t),Do.forEach(t),ur=f(Po,"The main screen"),Po.forEach(t),dt=u(e),Y=l(e,"P",{});var ar=i(Y);cr=f(ar,"Upon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in "),_e=l(ar,"A",{href:!0});var Bo=i(_e);dr=f(Bo,"the control screen"),Bo.forEach(t),mr=f(ar," section."),ar.forEach(t),mt=u(e),v(se.$$.fragment,e),vt=u(e),we=l(e,"P",{});var Oo=i(we);vr=f(Oo,"After all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left."),Oo.forEach(t),$t=u(e),v(le.$$.fragment,e),yt=u(e),Pe=l(e,"P",{});var zo=i(Pe);$r=f(zo,"Group of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on."),zo.forEach(t),gt=u(e),v(ie.$$.fragment,e),_t=u(e),Ee=l(e,"P",{});var Yo=i(Ee);yr=f(Yo,"If the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore."),Yo.forEach(t),wt=u(e),v(ne.$$.fragment,e),Pt=u(e),v(fe.$$.fragment,e),Et=u(e),L=l(e,"H2",{id:!0});var Eo=i(L);k=l(Eo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Lo=i(k);Ye=l(Lo,"SPAN",{});var Mo=i(Ye);gr=f(Mo,"#"),Mo.forEach(t),Lo.forEach(t),_r=f(Eo,"The control screen"),Eo.forEach(t),bt=u(e),be=l(e,"P",{});var Uo=i(be);wr=f(Uo,"The control screen consisted of two parts: socket connection input and the control."),Uo.forEach(t),kt=u(e),ke=l(e,"P",{});var qo=i(ke);Pr=f(qo,"Socket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned."),qo.forEach(t),It=u(e),v(he.$$.fragment,e),Tt=u(e),M=l(e,"H3",{id:!0});var bo=i(M);I=l(bo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Vo=i(I);Le=l(Vo,"SPAN",{});var Jo=i(Le);Er=f(Jo,"#"),Jo.forEach(t),Vo.forEach(t),br=f(bo,"Gun controls"),bo.forEach(t),St=u(e),Ie=l(e,"P",{});var Fo=i(Ie);kr=f(Fo,"lets the player controls the gun. There is a two seconds cooldown period for gun firing."),Fo.forEach(t),At=u(e),v(pe.$$.fragment,e),xt=u(e),U=l(e,"H3",{id:!0});var ko=i(U);T=l(ko,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Wo=i(T);Me=l(Wo,"SPAN",{});var Zo=i(Me);Ir=f(Zo,"#"),Zo.forEach(t),Wo.forEach(t),Tr=f(ko,"Trajectory control"),ko.forEach(t),Ht=u(e),Te=l(e,"P",{});var Ko=i(Te);Sr=f(Ko,"lets the player controls the up-down movement of the spaceship"),Ko.forEach(t),Gt=u(e),v(ue.$$.fragment,e),Nt=u(e),q=l(e,"H3",{id:!0});var Io=i(q);S=l(Io,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Qo=i(S);Ue=l(Qo,"SPAN",{});var Xo=i(Ue);Ar=f(Xo,"#"),Xo.forEach(t),Qo.forEach(t),xr=f(Io,"Acceleration"),Io.forEach(t),jt=u(e),Se=l(e,"P",{});var ea=i(Se);Hr=f(ea,"lets the player controls the left-right of the spaceship"),ea.forEach(t),Ct=u(e),v(ce.$$.fragment,e),Dt=u(e),V=l(e,"H2",{id:!0});var To=i(V);A=l(To,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var ta=i(A);qe=l(ta,"SPAN",{});var ra=i(qe);Gr=f(ra,"#"),ra.forEach(t),ta.forEach(t),Nr=f(To,"The game mechanics"),To.forEach(t),Rt=u(e),Ae=l(e,"P",{});var oa=i(Ae);jr=f(oa,"Player navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear."),oa.forEach(t),Bt=u(e),de=l(e,"P",{});var So=i(de);Cr=f(So,"To see a clearer picture, you can check my demo on "),me=l(So,"A",{href:!0,rel:!0});var aa=i(me);Dr=f(aa,"YouTube"),aa.forEach(t),So.forEach(t),Ot=u(e),J=l(e,"H2",{id:!0});var Ao=i(J);x=l(Ao,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var sa=i(x);Ve=l(sa,"SPAN",{});var la=i(Ve);Rr=f(la,"#"),la.forEach(t),sa.forEach(t),Br=f(Ao,"How to start?"),Ao.forEach(t),zt=u(e),P=l(e,"P",{});var ee=i(P);Or=f(ee,"After you clone the repository, you have to go into every folder "),Je=l(ee,"CODE",{});var ia=i(Je);zr=f(ia,"/client/display; gun-control; horizontal control; vertical control"),ia.forEach(t),Yr=f(ee," and "),Fe=l(ee,"CODE",{});var na=i(Fe);Lr=f(na,"/server"),na.forEach(t),Mr=f(ee," then run "),We=l(ee,"CODE",{});var fa=i(We);Ur=f(fa,"npm install"),fa.forEach(t),qr=f(ee," for each one of them."),ee.forEach(t),Yt=u(e),F=l(e,"P",{});var sr=i(F);Vr=f(sr,"If you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into "),Ze=l(sr,"CODE",{});var ha=i(Ze);Jr=f(ha,"/client"),ha.forEach(t),Fr=f(sr," then click go live."),sr.forEach(t),Lt=u(e),H=l(e,"P",{});var lt=i(H);Wr=f(lt,"For the display of the main screen, go into "),Ke=l(lt,"CODE",{});var pa=i(Ke);Zr=f(pa,"/client/display"),pa.forEach(t),Kr=f(lt," directory and run "),Qe=l(lt,"CODE",{});var ua=i(Qe);Qr=f(ua,"npm run dev"),ua.forEach(t),lt.forEach(t),Mt=u(e),G=l(e,"P",{});var it=i(G);Xr=f(it,"To initiate the server, go into"),Xe=l(it,"CODE",{});var ca=i(Xe);eo=f(ca,"/server"),ca.forEach(t),to=f(it," then run "),et=l(it,"CODE",{});var da=i(et);ro=f(da,"npx nodemon 'index.js'"),da.forEach(t),it.forEach(t),Ut=u(e),xe=l(e,"P",{});var ma=i(xe);oo=f(ma,"If there is an IP address appearing on your ‘display’ screen, you are ready to play!"),ma.forEach(t),qt=u(e),W=l(e,"H2",{id:!0});var xo=i(W);N=l(xo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var va=i(N);tt=l(va,"SPAN",{});var $a=i(tt);ao=f($a,"#"),$a.forEach(t),va.forEach(t),so=f(xo,"Highlight"),xo.forEach(t),Vt=u(e),He=l(e,"P",{});var ya=i(He);lo=f(ya,"After finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid."),ya.forEach(t),Jt=u(e),j=l(e,"DIV",{class:!0});var lr=i(j);v(ve.$$.fragment,lr),io=u(lr),v($e.$$.fragment,lr),lr.forEach(t),Ft=u(e),Z=l(e,"P",{});var ir=i(Z);no=f(ir,"I also learned to postpone the socket.io connection and connect to the input IP (in the "),Ge=l(ir,"A",{href:!0});var ga=i(Ge);fo=f(ga,"control sections"),ga.forEach(t),ho=f(ir,") and I am really proud of it."),ir.forEach(t),Wt=u(e),K=l(e,"H2",{id:!0});var Ho=i(K);C=l(Ho,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var _a=i(C);rt=l(_a,"SPAN",{});var wa=i(rt);po=f(wa,"#"),wa.forEach(t),_a.forEach(t),uo=f(Ho,"Software"),Ho.forEach(t),Zt=u(e),Ne=l(e,"P",{});var Pa=i(Ne);co=f(Pa,"The game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices."),Pa.forEach(t),Kt=u(e),Q=l(e,"H2",{id:!0});var Go=i(Q);D=l(Go,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ea=i(D);ot=l(Ea,"SPAN",{});var ba=i(ot);mo=f(ba,"#"),ba.forEach(t),Ea.forEach(t),vo=f(Go,"The architecture"),Go.forEach(t),Qt=u(e),je=l(e,"P",{});var ka=i(je);$o=f(ka,"This is the UML of the game code."),ka.forEach(t),Xt=u(e),v(ye.$$.fragment,e),er=u(e),X=l(e,"H2",{id:!0});var No=i(X);R=l(No,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ia=i(R);at=l(Ia,"SPAN",{});var Ta=i(at);yo=f(Ta,"#"),Ta.forEach(t),Ia.forEach(t),go=f(No,"What I would do to make it better"),No.forEach(t),tr=u(e),Ce=l(e,"P",{});var Sa=i(Ce);_o=f(Sa,"Right now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there."),Sa.forEach(t),rr=u(e),De=l(e,"P",{});var Aa=i(De);wo=f(Aa,"I would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired."),Aa.forEach(t),this.h()},h(){h(c,"class","button_container svelte-1biqf0s"),h(E,"class","heading-link"),h(E,"title","Permalink"),h(E,"aria-hidden","true"),h(E,"href","#introduction"),h(O,"id","introduction"),h(b,"class","heading-link"),h(b,"title","Permalink"),h(b,"aria-hidden","true"),h(b,"href","#the-main-screen"),h(z,"id","the-main-screen"),h(_e,"href","#the-control-screen"),h(k,"class","heading-link"),h(k,"title","Permalink"),h(k,"aria-hidden","true"),h(k,"href","#the-control-screen"),h(L,"id","the-control-screen"),h(I,"class","heading-link"),h(I,"title","Permalink"),h(I,"aria-hidden","true"),h(I,"href","#gun-controls"),h(M,"id","gun-controls"),h(T,"class","heading-link"),h(T,"title","Permalink"),h(T,"aria-hidden","true"),h(T,"href","#trajectory-control"),h(U,"id","trajectory-control"),h(S,"class","heading-link"),h(S,"title","Permalink"),h(S,"aria-hidden","true"),h(S,"href","#acceleration"),h(q,"id","acceleration"),h(A,"class","heading-link"),h(A,"title","Permalink"),h(A,"aria-hidden","true"),h(A,"href","#the-game-mechanics"),h(V,"id","the-game-mechanics"),h(me,"href","https://youtu.be/GxBwiM4es7w"),h(me,"rel","nofollow"),h(x,"class","heading-link"),h(x,"title","Permalink"),h(x,"aria-hidden","true"),h(x,"href","#how-to-start"),h(J,"id","how-to-start"),h(N,"class","heading-link"),h(N,"title","Permalink"),h(N,"aria-hidden","true"),h(N,"href","#highlight"),h(W,"id","highlight"),h(j,"class","drawing_container svelte-1biqf0s"),h(Ge,"href","#the-control-screen"),h(C,"class","heading-link"),h(C,"title","Permalink"),h(C,"aria-hidden","true"),h(C,"href","#software"),h(K,"id","software"),h(D,"class","heading-link"),h(D,"title","Permalink"),h(D,"aria-hidden","true"),h(D,"href","#the-architecture"),h(Q,"id","the-architecture"),h(R,"class","heading-link"),h(R,"title","Permalink"),h(R,"aria-hidden","true"),h(R,"href","#what-i-would-do-to-make-it-better"),h(X,"id","what-i-would-do-to-make-it-better")},m(e,r){a(e,c,r),$(d,c,null),o(c,te),$(B,c,null),a(e,nt,r),$(re,e,r),a(e,ft,r),a(e,O,r),o(O,E),o(E,Oe),o(Oe,nr),o(O,fr),a(e,ht,r),a(e,ge,r),o(ge,hr),a(e,pt,r),$(oe,e,r),a(e,ut,r),$(ae,e,r),a(e,ct,r),a(e,z,r),o(z,b),o(b,ze),o(ze,pr),o(z,ur),a(e,dt,r),a(e,Y,r),o(Y,cr),o(Y,_e),o(_e,dr),o(Y,mr),a(e,mt,r),$(se,e,r),a(e,vt,r),a(e,we,r),o(we,vr),a(e,$t,r),$(le,e,r),a(e,yt,r),a(e,Pe,r),o(Pe,$r),a(e,gt,r),$(ie,e,r),a(e,_t,r),a(e,Ee,r),o(Ee,yr),a(e,wt,r),$(ne,e,r),a(e,Pt,r),$(fe,e,r),a(e,Et,r),a(e,L,r),o(L,k),o(k,Ye),o(Ye,gr),o(L,_r),a(e,bt,r),a(e,be,r),o(be,wr),a(e,kt,r),a(e,ke,r),o(ke,Pr),a(e,It,r),$(he,e,r),a(e,Tt,r),a(e,M,r),o(M,I),o(I,Le),o(Le,Er),o(M,br),a(e,St,r),a(e,Ie,r),o(Ie,kr),a(e,At,r),$(pe,e,r),a(e,xt,r),a(e,U,r),o(U,T),o(T,Me),o(Me,Ir),o(U,Tr),a(e,Ht,r),a(e,Te,r),o(Te,Sr),a(e,Gt,r),$(ue,e,r),a(e,Nt,r),a(e,q,r),o(q,S),o(S,Ue),o(Ue,Ar),o(q,xr),a(e,jt,r),a(e,Se,r),o(Se,Hr),a(e,Ct,r),$(ce,e,r),a(e,Dt,r),a(e,V,r),o(V,A),o(A,qe),o(qe,Gr),o(V,Nr),a(e,Rt,r),a(e,Ae,r),o(Ae,jr),a(e,Bt,r),a(e,de,r),o(de,Cr),o(de,me),o(me,Dr),a(e,Ot,r),a(e,J,r),o(J,x),o(x,Ve),o(Ve,Rr),o(J,Br),a(e,zt,r),a(e,P,r),o(P,Or),o(P,Je),o(Je,zr),o(P,Yr),o(P,Fe),o(Fe,Lr),o(P,Mr),o(P,We),o(We,Ur),o(P,qr),a(e,Yt,r),a(e,F,r),o(F,Vr),o(F,Ze),o(Ze,Jr),o(F,Fr),a(e,Lt,r),a(e,H,r),o(H,Wr),o(H,Ke),o(Ke,Zr),o(H,Kr),o(H,Qe),o(Qe,Qr),a(e,Mt,r),a(e,G,r),o(G,Xr),o(G,Xe),o(Xe,eo),o(G,to),o(G,et),o(et,ro),a(e,Ut,r),a(e,xe,r),o(xe,oo),a(e,qt,r),a(e,W,r),o(W,N),o(N,tt),o(tt,ao),o(W,so),a(e,Vt,r),a(e,He,r),o(He,lo),a(e,Jt,r),a(e,j,r),$(ve,j,null),o(j,io),$($e,j,null),a(e,Ft,r),a(e,Z,r),o(Z,no),o(Z,Ge),o(Ge,fo),o(Z,ho),a(e,Wt,r),a(e,K,r),o(K,C),o(C,rt),o(rt,po),o(K,uo),a(e,Zt,r),a(e,Ne,r),o(Ne,co),a(e,Kt,r),a(e,Q,r),o(Q,D),o(D,ot),o(ot,mo),o(Q,vo),a(e,Qt,r),a(e,je,r),o(je,$o),a(e,Xt,r),$(ye,e,r),a(e,er,r),a(e,X,r),o(X,R),o(R,at),o(at,yo),o(X,go),a(e,tr,r),a(e,Ce,r),o(Ce,_o),a(e,rr,r),a(e,De,r),o(De,wo),or=!0},p(e,[r]){const Re={};r&1&&(Re.$$scope={dirty:r,ctx:e}),d.$set(Re);const st={};r&1&&(st.$$scope={dirty:r,ctx:e}),B.$set(st)},i(e){or||(y(d.$$.fragment,e),y(B.$$.fragment,e),y(re.$$.fragment,e),y(oe.$$.fragment,e),y(ae.$$.fragment,e),y(se.$$.fragment,e),y(le.$$.fragment,e),y(ie.$$.fragment,e),y(ne.$$.fragment,e),y(fe.$$.fragment,e),y(he.$$.fragment,e),y(pe.$$.fragment,e),y(ue.$$.fragment,e),y(ce.$$.fragment,e),y(ve.$$.fragment,e),y($e.$$.fragment,e),y(ye.$$.fragment,e),or=!0)},o(e){g(d.$$.fragment,e),g(B.$$.fragment,e),g(re.$$.fragment,e),g(oe.$$.fragment,e),g(ae.$$.fragment,e),g(se.$$.fragment,e),g(le.$$.fragment,e),g(ie.$$.fragment,e),g(ne.$$.fragment,e),g(fe.$$.fragment,e),g(he.$$.fragment,e),g(pe.$$.fragment,e),g(ue.$$.fragment,e),g(ce.$$.fragment,e),g(ve.$$.fragment,e),g($e.$$.fragment,e),g(ye.$$.fragment,e),or=!1},d(e){e&&t(c),_(d),_(B),e&&t(nt),_(re,e),e&&t(ft),e&&t(O),e&&t(ht),e&&t(ge),e&&t(pt),_(oe,e),e&&t(ut),_(ae,e),e&&t(ct),e&&t(z),e&&t(dt),e&&t(Y),e&&t(mt),_(se,e),e&&t(vt),e&&t(we),e&&t($t),_(le,e),e&&t(yt),e&&t(Pe),e&&t(gt),_(ie,e),e&&t(_t),e&&t(Ee),e&&t(wt),_(ne,e),e&&t(Pt),_(fe,e),e&&t(Et),e&&t(L),e&&t(bt),e&&t(be),e&&t(kt),e&&t(ke),e&&t(It),_(he,e),e&&t(Tt),e&&t(M),e&&t(St),e&&t(Ie),e&&t(At),_(pe,e),e&&t(xt),e&&t(U),e&&t(Ht),e&&t(Te),e&&t(Gt),_(ue,e),e&&t(Nt),e&&t(q),e&&t(jt),e&&t(Se),e&&t(Ct),_(ce,e),e&&t(Dt),e&&t(V),e&&t(Rt),e&&t(Ae),e&&t(Bt),e&&t(de),e&&t(Ot),e&&t(J),e&&t(zt),e&&t(P),e&&t(Yt),e&&t(F),e&&t(Lt),e&&t(H),e&&t(Mt),e&&t(G),e&&t(Ut),e&&t(xe),e&&t(qt),e&&t(W),e&&t(Vt),e&&t(He),e&&t(Jt),e&&t(j),_(ve),_($e),e&&t(Ft),e&&t(Z),e&&t(Wt),e&&t(K),e&&t(Zt),e&&t(Ne),e&&t(Kt),e&&t(Q),e&&t(Qt),e&&t(je),e&&t(Xt),_(ye,e),e&&t(er),e&&t(X),e&&t(tr),e&&t(Ce),e&&t(rr),e&&t(De)}}}const za={slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"/images/posts/roger-roger/cover.png",tags:["Coding","Javascript","Game Design"],hidden:!1};class Ya extends Ha{constructor(c){super(),Ga(this,c,null,Da,Na,{})}}export{Ya as default,za as metadata};
+import{S as Ha,i as Ga,s as Na,k as s,y as m,a as p,q as n,l,m as i,z as v,c as u,h as t,r as f,n as h,b as a,A as $,G as o,g as y,d as g,B as _}from"../chunks/index.963f39ba.js";import{I as w}from"../chunks/Image.a2141873.js";import{B as xa}from"../chunks/Button.c88cc32a.js";function ja(Be){let c;return{c(){c=n("Github")},l(d){c=f(d,"Github")},m(d,te){a(d,c,te)},d(d){d&&t(c)}}}function Ca(Be){let c;return{c(){c=n("YouTube")},l(d){c=f(d,"YouTube")},m(d,te){a(d,c,te)},d(d){d&&t(c)}}}function Da(Be){let c,d,te,B,nt,re,ft,O,E,Oe,nr,fr,ht,ge,hr,pt,oe,ut,ae,ct,z,b,ze,pr,ur,dt,Y,cr,_e,dr,mr,mt,se,vt,we,vr,$t,le,yt,Pe,$r,gt,ie,_t,Ee,yr,wt,ne,Pt,fe,Et,L,k,Ye,gr,_r,bt,be,wr,kt,ke,Pr,It,he,Tt,M,I,Le,Er,br,St,Ie,kr,At,pe,xt,U,T,Me,Ir,Tr,Ht,Te,Sr,Gt,ue,Nt,q,S,Ue,Ar,xr,jt,Se,Hr,Ct,ce,Dt,V,A,qe,Gr,Nr,Rt,Ae,jr,Bt,de,Cr,me,Dr,Ot,J,x,Ve,Rr,Br,zt,P,Or,Je,zr,Yr,Fe,Lr,Mr,We,Ur,qr,Yt,F,Vr,Ze,Jr,Fr,Lt,H,Wr,Ke,Zr,Kr,Qe,Qr,Mt,G,Xr,Xe,eo,to,et,ro,Ut,xe,oo,qt,W,N,tt,ao,so,Vt,He,lo,Jt,j,ve,io,$e,Ft,Z,no,Ge,fo,ho,Wt,K,C,rt,po,uo,Zt,Ne,co,Kt,Q,D,ot,mo,vo,Qt,je,$o,Xt,ye,er,X,R,at,yo,go,tr,Ce,_o,rr,De,wo,or;return d=new xa({props:{href:"https://github.com/punnlert/RogerRoger-ID311-Individual-Project",$$slots:{default:[ja]},$$scope:{ctx:Be}}}),B=new xa({props:{href:"https://youtu.be/GxBwiM4es7w",$$slots:{default:[Ca]},$$scope:{ctx:Be}}}),re=new w({props:{src:"/images/posts/roger-roger/start_page.png",alt:"Start Page"}}),oe=new w({props:{src:"/images/posts/roger-roger/gameplay_1.png",alt:"Picture showing gameplay while the rocket shoots the asteroid"}}),ae=new w({props:{src:"/images/posts/roger-roger/gameplay_2.png",alt:"Start Page"}}),se=new w({props:{src:"/images/posts/roger-roger/start_page.png",alt:"Start Page"}}),le=new w({props:{src:"/images/posts/roger-roger/score_and_info.png",alt:"Start Page"}}),ie=new w({props:{src:"/images/posts/roger-roger/asteroid_streaming.png",alt:"Start Page"}}),ne=new w({props:{src:"/images/posts/roger-roger/gameplay_2.png",alt:"Start Page"}}),fe=new w({props:{src:"/images/posts/roger-roger/new_highscore.png",alt:"Start Page"}}),he=new w({props:{src:"/images/posts/roger-roger/IP_input.jpg",alt:"Start Page"}}),pe=new w({props:{src:"/images/posts/roger-roger/gun_control.PNG",alt:"Start Page"}}),ue=new w({props:{src:"/images/posts/roger-roger/trajectory_control.PNG",alt:"Start Page"}}),ce=new w({props:{src:"/images/posts/roger-roger/acceleration.PNG",alt:"Start Page"}}),ve=new w({props:{src:"/images/posts/roger-roger/astronaut.png",alt:"Start Page"}}),$e=new w({props:{src:"/images/posts/roger-roger/asteroid.png",alt:"Start Page"}}),ye=new w({props:{src:"/images/posts/roger-roger/RogerRogerUML.drawio.png",alt:"Start Page"}}),{c(){c=s("div"),m(d.$$.fragment),te=p(),m(B.$$.fragment),nt=p(),m(re.$$.fragment),ft=p(),O=s("h2"),E=s("a"),Oe=s("span"),nr=n("#"),fr=n("Introduction"),ht=p(),ge=s("p"),hr=n("“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots."),pt=p(),m(oe.$$.fragment),ut=p(),m(ae.$$.fragment),ct=p(),z=s("h2"),b=s("a"),ze=s("span"),pr=n("#"),ur=n("The main screen"),dt=p(),Y=s("p"),cr=n("Upon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in "),_e=s("a"),dr=n("the control screen"),mr=n(" section."),mt=p(),m(se.$$.fragment),vt=p(),we=s("p"),vr=n("After all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left."),$t=p(),m(le.$$.fragment),yt=p(),Pe=s("p"),$r=n("Group of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on."),gt=p(),m(ie.$$.fragment),_t=p(),Ee=s("p"),yr=n("If the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore."),wt=p(),m(ne.$$.fragment),Pt=p(),m(fe.$$.fragment),Et=p(),L=s("h2"),k=s("a"),Ye=s("span"),gr=n("#"),_r=n("The control screen"),bt=p(),be=s("p"),wr=n("The control screen consisted of two parts: socket connection input and the control."),kt=p(),ke=s("p"),Pr=n("Socket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned."),It=p(),m(he.$$.fragment),Tt=p(),M=s("h3"),I=s("a"),Le=s("span"),Er=n("#"),br=n("Gun controls"),St=p(),Ie=s("p"),kr=n("lets the player controls the gun. There is a two seconds cooldown period for gun firing."),At=p(),m(pe.$$.fragment),xt=p(),U=s("h3"),T=s("a"),Me=s("span"),Ir=n("#"),Tr=n("Trajectory control"),Ht=p(),Te=s("p"),Sr=n("lets the player controls the up-down movement of the spaceship"),Gt=p(),m(ue.$$.fragment),Nt=p(),q=s("h3"),S=s("a"),Ue=s("span"),Ar=n("#"),xr=n("Acceleration"),jt=p(),Se=s("p"),Hr=n("lets the player controls the left-right of the spaceship"),Ct=p(),m(ce.$$.fragment),Dt=p(),V=s("h2"),A=s("a"),qe=s("span"),Gr=n("#"),Nr=n("The game mechanics"),Rt=p(),Ae=s("p"),jr=n("Player navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear."),Bt=p(),de=s("p"),Cr=n("To see a clearer picture, you can check my demo on "),me=s("a"),Dr=n("YouTube"),Ot=p(),J=s("h2"),x=s("a"),Ve=s("span"),Rr=n("#"),Br=n("How to start?"),zt=p(),P=s("p"),Or=n("After you clone the repository, you have to go into every folder "),Je=s("code"),zr=n("/client/display; gun-control; horizontal control; vertical control"),Yr=n(" and "),Fe=s("code"),Lr=n("/server"),Mr=n(" then run "),We=s("code"),Ur=n("npm install"),qr=n(" for each one of them."),Yt=p(),F=s("p"),Vr=n("If you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into "),Ze=s("code"),Jr=n("/client"),Fr=n(" then click go live."),Lt=p(),H=s("p"),Wr=n("For the display of the main screen, go into "),Ke=s("code"),Zr=n("/client/display"),Kr=n(" directory and run "),Qe=s("code"),Qr=n("npm run dev"),Mt=p(),G=s("p"),Xr=n("To initiate the server, go into"),Xe=s("code"),eo=n("/server"),to=n(" then run "),et=s("code"),ro=n("npx nodemon 'index.js'"),Ut=p(),xe=s("p"),oo=n("If there is an IP address appearing on your ‘display’ screen, you are ready to play!"),qt=p(),W=s("h2"),N=s("a"),tt=s("span"),ao=n("#"),so=n("Highlight"),Vt=p(),He=s("p"),lo=n("After finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid."),Jt=p(),j=s("div"),m(ve.$$.fragment),io=p(),m($e.$$.fragment),Ft=p(),Z=s("p"),no=n("I also learned to postpone the socket.io connection and connect to the input IP (in the "),Ge=s("a"),fo=n("control sections"),ho=n(") and I am really proud of it."),Wt=p(),K=s("h2"),C=s("a"),rt=s("span"),po=n("#"),uo=n("Software"),Zt=p(),Ne=s("p"),co=n("The game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices."),Kt=p(),Q=s("h2"),D=s("a"),ot=s("span"),mo=n("#"),vo=n("The architecture"),Qt=p(),je=s("p"),$o=n("This is the UML of the game code."),Xt=p(),m(ye.$$.fragment),er=p(),X=s("h2"),R=s("a"),at=s("span"),yo=n("#"),go=n("What I would do to make it better"),tr=p(),Ce=s("p"),_o=n("Right now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there."),rr=p(),De=s("p"),wo=n("I would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired."),this.h()},l(e){c=l(e,"DIV",{class:!0});var r=i(c);v(d.$$.fragment,r),te=u(r),v(B.$$.fragment,r),r.forEach(t),nt=u(e),v(re.$$.fragment,e),ft=u(e),O=l(e,"H2",{id:!0});var Re=i(O);E=l(Re,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var st=i(E);Oe=l(st,"SPAN",{});var jo=i(Oe);nr=f(jo,"#"),jo.forEach(t),st.forEach(t),fr=f(Re,"Introduction"),Re.forEach(t),ht=u(e),ge=l(e,"P",{});var Co=i(ge);hr=f(Co,"“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots."),Co.forEach(t),pt=u(e),v(oe.$$.fragment,e),ut=u(e),v(ae.$$.fragment,e),ct=u(e),z=l(e,"H2",{id:!0});var Po=i(z);b=l(Po,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Do=i(b);ze=l(Do,"SPAN",{});var Ro=i(ze);pr=f(Ro,"#"),Ro.forEach(t),Do.forEach(t),ur=f(Po,"The main screen"),Po.forEach(t),dt=u(e),Y=l(e,"P",{});var ar=i(Y);cr=f(ar,"Upon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in "),_e=l(ar,"A",{href:!0});var Bo=i(_e);dr=f(Bo,"the control screen"),Bo.forEach(t),mr=f(ar," section."),ar.forEach(t),mt=u(e),v(se.$$.fragment,e),vt=u(e),we=l(e,"P",{});var Oo=i(we);vr=f(Oo,"After all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left."),Oo.forEach(t),$t=u(e),v(le.$$.fragment,e),yt=u(e),Pe=l(e,"P",{});var zo=i(Pe);$r=f(zo,"Group of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on."),zo.forEach(t),gt=u(e),v(ie.$$.fragment,e),_t=u(e),Ee=l(e,"P",{});var Yo=i(Ee);yr=f(Yo,"If the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore."),Yo.forEach(t),wt=u(e),v(ne.$$.fragment,e),Pt=u(e),v(fe.$$.fragment,e),Et=u(e),L=l(e,"H2",{id:!0});var Eo=i(L);k=l(Eo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Lo=i(k);Ye=l(Lo,"SPAN",{});var Mo=i(Ye);gr=f(Mo,"#"),Mo.forEach(t),Lo.forEach(t),_r=f(Eo,"The control screen"),Eo.forEach(t),bt=u(e),be=l(e,"P",{});var Uo=i(be);wr=f(Uo,"The control screen consisted of two parts: socket connection input and the control."),Uo.forEach(t),kt=u(e),ke=l(e,"P",{});var qo=i(ke);Pr=f(qo,"Socket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned."),qo.forEach(t),It=u(e),v(he.$$.fragment,e),Tt=u(e),M=l(e,"H3",{id:!0});var bo=i(M);I=l(bo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Vo=i(I);Le=l(Vo,"SPAN",{});var Jo=i(Le);Er=f(Jo,"#"),Jo.forEach(t),Vo.forEach(t),br=f(bo,"Gun controls"),bo.forEach(t),St=u(e),Ie=l(e,"P",{});var Fo=i(Ie);kr=f(Fo,"lets the player controls the gun. There is a two seconds cooldown period for gun firing."),Fo.forEach(t),At=u(e),v(pe.$$.fragment,e),xt=u(e),U=l(e,"H3",{id:!0});var ko=i(U);T=l(ko,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Wo=i(T);Me=l(Wo,"SPAN",{});var Zo=i(Me);Ir=f(Zo,"#"),Zo.forEach(t),Wo.forEach(t),Tr=f(ko,"Trajectory control"),ko.forEach(t),Ht=u(e),Te=l(e,"P",{});var Ko=i(Te);Sr=f(Ko,"lets the player controls the up-down movement of the spaceship"),Ko.forEach(t),Gt=u(e),v(ue.$$.fragment,e),Nt=u(e),q=l(e,"H3",{id:!0});var Io=i(q);S=l(Io,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Qo=i(S);Ue=l(Qo,"SPAN",{});var Xo=i(Ue);Ar=f(Xo,"#"),Xo.forEach(t),Qo.forEach(t),xr=f(Io,"Acceleration"),Io.forEach(t),jt=u(e),Se=l(e,"P",{});var ea=i(Se);Hr=f(ea,"lets the player controls the left-right of the spaceship"),ea.forEach(t),Ct=u(e),v(ce.$$.fragment,e),Dt=u(e),V=l(e,"H2",{id:!0});var To=i(V);A=l(To,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var ta=i(A);qe=l(ta,"SPAN",{});var ra=i(qe);Gr=f(ra,"#"),ra.forEach(t),ta.forEach(t),Nr=f(To,"The game mechanics"),To.forEach(t),Rt=u(e),Ae=l(e,"P",{});var oa=i(Ae);jr=f(oa,"Player navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear."),oa.forEach(t),Bt=u(e),de=l(e,"P",{});var So=i(de);Cr=f(So,"To see a clearer picture, you can check my demo on "),me=l(So,"A",{href:!0,rel:!0});var aa=i(me);Dr=f(aa,"YouTube"),aa.forEach(t),So.forEach(t),Ot=u(e),J=l(e,"H2",{id:!0});var Ao=i(J);x=l(Ao,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var sa=i(x);Ve=l(sa,"SPAN",{});var la=i(Ve);Rr=f(la,"#"),la.forEach(t),sa.forEach(t),Br=f(Ao,"How to start?"),Ao.forEach(t),zt=u(e),P=l(e,"P",{});var ee=i(P);Or=f(ee,"After you clone the repository, you have to go into every folder "),Je=l(ee,"CODE",{});var ia=i(Je);zr=f(ia,"/client/display; gun-control; horizontal control; vertical control"),ia.forEach(t),Yr=f(ee," and "),Fe=l(ee,"CODE",{});var na=i(Fe);Lr=f(na,"/server"),na.forEach(t),Mr=f(ee," then run "),We=l(ee,"CODE",{});var fa=i(We);Ur=f(fa,"npm install"),fa.forEach(t),qr=f(ee," for each one of them."),ee.forEach(t),Yt=u(e),F=l(e,"P",{});var sr=i(F);Vr=f(sr,"If you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into "),Ze=l(sr,"CODE",{});var ha=i(Ze);Jr=f(ha,"/client"),ha.forEach(t),Fr=f(sr," then click go live."),sr.forEach(t),Lt=u(e),H=l(e,"P",{});var lt=i(H);Wr=f(lt,"For the display of the main screen, go into "),Ke=l(lt,"CODE",{});var pa=i(Ke);Zr=f(pa,"/client/display"),pa.forEach(t),Kr=f(lt," directory and run "),Qe=l(lt,"CODE",{});var ua=i(Qe);Qr=f(ua,"npm run dev"),ua.forEach(t),lt.forEach(t),Mt=u(e),G=l(e,"P",{});var it=i(G);Xr=f(it,"To initiate the server, go into"),Xe=l(it,"CODE",{});var ca=i(Xe);eo=f(ca,"/server"),ca.forEach(t),to=f(it," then run "),et=l(it,"CODE",{});var da=i(et);ro=f(da,"npx nodemon 'index.js'"),da.forEach(t),it.forEach(t),Ut=u(e),xe=l(e,"P",{});var ma=i(xe);oo=f(ma,"If there is an IP address appearing on your ‘display’ screen, you are ready to play!"),ma.forEach(t),qt=u(e),W=l(e,"H2",{id:!0});var xo=i(W);N=l(xo,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var va=i(N);tt=l(va,"SPAN",{});var $a=i(tt);ao=f($a,"#"),$a.forEach(t),va.forEach(t),so=f(xo,"Highlight"),xo.forEach(t),Vt=u(e),He=l(e,"P",{});var ya=i(He);lo=f(ya,"After finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid."),ya.forEach(t),Jt=u(e),j=l(e,"DIV",{class:!0});var lr=i(j);v(ve.$$.fragment,lr),io=u(lr),v($e.$$.fragment,lr),lr.forEach(t),Ft=u(e),Z=l(e,"P",{});var ir=i(Z);no=f(ir,"I also learned to postpone the socket.io connection and connect to the input IP (in the "),Ge=l(ir,"A",{href:!0});var ga=i(Ge);fo=f(ga,"control sections"),ga.forEach(t),ho=f(ir,") and I am really proud of it."),ir.forEach(t),Wt=u(e),K=l(e,"H2",{id:!0});var Ho=i(K);C=l(Ho,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var _a=i(C);rt=l(_a,"SPAN",{});var wa=i(rt);po=f(wa,"#"),wa.forEach(t),_a.forEach(t),uo=f(Ho,"Software"),Ho.forEach(t),Zt=u(e),Ne=l(e,"P",{});var Pa=i(Ne);co=f(Pa,"The game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices."),Pa.forEach(t),Kt=u(e),Q=l(e,"H2",{id:!0});var Go=i(Q);D=l(Go,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ea=i(D);ot=l(Ea,"SPAN",{});var ba=i(ot);mo=f(ba,"#"),ba.forEach(t),Ea.forEach(t),vo=f(Go,"The architecture"),Go.forEach(t),Qt=u(e),je=l(e,"P",{});var ka=i(je);$o=f(ka,"This is the UML of the game code."),ka.forEach(t),Xt=u(e),v(ye.$$.fragment,e),er=u(e),X=l(e,"H2",{id:!0});var No=i(X);R=l(No,"A",{class:!0,title:!0,"aria-hidden":!0,href:!0});var Ia=i(R);at=l(Ia,"SPAN",{});var Ta=i(at);yo=f(Ta,"#"),Ta.forEach(t),Ia.forEach(t),go=f(No,"What I would do to make it better"),No.forEach(t),tr=u(e),Ce=l(e,"P",{});var Sa=i(Ce);_o=f(Sa,"Right now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there."),Sa.forEach(t),rr=u(e),De=l(e,"P",{});var Aa=i(De);wo=f(Aa,"I would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired."),Aa.forEach(t),this.h()},h(){h(c,"class","button_container svelte-1biqf0s"),h(E,"class","heading-link"),h(E,"title","Permalink"),h(E,"aria-hidden","true"),h(E,"href","#introduction"),h(O,"id","introduction"),h(b,"class","heading-link"),h(b,"title","Permalink"),h(b,"aria-hidden","true"),h(b,"href","#the-main-screen"),h(z,"id","the-main-screen"),h(_e,"href","#the-control-screen"),h(k,"class","heading-link"),h(k,"title","Permalink"),h(k,"aria-hidden","true"),h(k,"href","#the-control-screen"),h(L,"id","the-control-screen"),h(I,"class","heading-link"),h(I,"title","Permalink"),h(I,"aria-hidden","true"),h(I,"href","#gun-controls"),h(M,"id","gun-controls"),h(T,"class","heading-link"),h(T,"title","Permalink"),h(T,"aria-hidden","true"),h(T,"href","#trajectory-control"),h(U,"id","trajectory-control"),h(S,"class","heading-link"),h(S,"title","Permalink"),h(S,"aria-hidden","true"),h(S,"href","#acceleration"),h(q,"id","acceleration"),h(A,"class","heading-link"),h(A,"title","Permalink"),h(A,"aria-hidden","true"),h(A,"href","#the-game-mechanics"),h(V,"id","the-game-mechanics"),h(me,"href","https://youtu.be/GxBwiM4es7w"),h(me,"rel","nofollow"),h(x,"class","heading-link"),h(x,"title","Permalink"),h(x,"aria-hidden","true"),h(x,"href","#how-to-start"),h(J,"id","how-to-start"),h(N,"class","heading-link"),h(N,"title","Permalink"),h(N,"aria-hidden","true"),h(N,"href","#highlight"),h(W,"id","highlight"),h(j,"class","drawing_container svelte-1biqf0s"),h(Ge,"href","#the-control-screen"),h(C,"class","heading-link"),h(C,"title","Permalink"),h(C,"aria-hidden","true"),h(C,"href","#software"),h(K,"id","software"),h(D,"class","heading-link"),h(D,"title","Permalink"),h(D,"aria-hidden","true"),h(D,"href","#the-architecture"),h(Q,"id","the-architecture"),h(R,"class","heading-link"),h(R,"title","Permalink"),h(R,"aria-hidden","true"),h(R,"href","#what-i-would-do-to-make-it-better"),h(X,"id","what-i-would-do-to-make-it-better")},m(e,r){a(e,c,r),$(d,c,null),o(c,te),$(B,c,null),a(e,nt,r),$(re,e,r),a(e,ft,r),a(e,O,r),o(O,E),o(E,Oe),o(Oe,nr),o(O,fr),a(e,ht,r),a(e,ge,r),o(ge,hr),a(e,pt,r),$(oe,e,r),a(e,ut,r),$(ae,e,r),a(e,ct,r),a(e,z,r),o(z,b),o(b,ze),o(ze,pr),o(z,ur),a(e,dt,r),a(e,Y,r),o(Y,cr),o(Y,_e),o(_e,dr),o(Y,mr),a(e,mt,r),$(se,e,r),a(e,vt,r),a(e,we,r),o(we,vr),a(e,$t,r),$(le,e,r),a(e,yt,r),a(e,Pe,r),o(Pe,$r),a(e,gt,r),$(ie,e,r),a(e,_t,r),a(e,Ee,r),o(Ee,yr),a(e,wt,r),$(ne,e,r),a(e,Pt,r),$(fe,e,r),a(e,Et,r),a(e,L,r),o(L,k),o(k,Ye),o(Ye,gr),o(L,_r),a(e,bt,r),a(e,be,r),o(be,wr),a(e,kt,r),a(e,ke,r),o(ke,Pr),a(e,It,r),$(he,e,r),a(e,Tt,r),a(e,M,r),o(M,I),o(I,Le),o(Le,Er),o(M,br),a(e,St,r),a(e,Ie,r),o(Ie,kr),a(e,At,r),$(pe,e,r),a(e,xt,r),a(e,U,r),o(U,T),o(T,Me),o(Me,Ir),o(U,Tr),a(e,Ht,r),a(e,Te,r),o(Te,Sr),a(e,Gt,r),$(ue,e,r),a(e,Nt,r),a(e,q,r),o(q,S),o(S,Ue),o(Ue,Ar),o(q,xr),a(e,jt,r),a(e,Se,r),o(Se,Hr),a(e,Ct,r),$(ce,e,r),a(e,Dt,r),a(e,V,r),o(V,A),o(A,qe),o(qe,Gr),o(V,Nr),a(e,Rt,r),a(e,Ae,r),o(Ae,jr),a(e,Bt,r),a(e,de,r),o(de,Cr),o(de,me),o(me,Dr),a(e,Ot,r),a(e,J,r),o(J,x),o(x,Ve),o(Ve,Rr),o(J,Br),a(e,zt,r),a(e,P,r),o(P,Or),o(P,Je),o(Je,zr),o(P,Yr),o(P,Fe),o(Fe,Lr),o(P,Mr),o(P,We),o(We,Ur),o(P,qr),a(e,Yt,r),a(e,F,r),o(F,Vr),o(F,Ze),o(Ze,Jr),o(F,Fr),a(e,Lt,r),a(e,H,r),o(H,Wr),o(H,Ke),o(Ke,Zr),o(H,Kr),o(H,Qe),o(Qe,Qr),a(e,Mt,r),a(e,G,r),o(G,Xr),o(G,Xe),o(Xe,eo),o(G,to),o(G,et),o(et,ro),a(e,Ut,r),a(e,xe,r),o(xe,oo),a(e,qt,r),a(e,W,r),o(W,N),o(N,tt),o(tt,ao),o(W,so),a(e,Vt,r),a(e,He,r),o(He,lo),a(e,Jt,r),a(e,j,r),$(ve,j,null),o(j,io),$($e,j,null),a(e,Ft,r),a(e,Z,r),o(Z,no),o(Z,Ge),o(Ge,fo),o(Z,ho),a(e,Wt,r),a(e,K,r),o(K,C),o(C,rt),o(rt,po),o(K,uo),a(e,Zt,r),a(e,Ne,r),o(Ne,co),a(e,Kt,r),a(e,Q,r),o(Q,D),o(D,ot),o(ot,mo),o(Q,vo),a(e,Qt,r),a(e,je,r),o(je,$o),a(e,Xt,r),$(ye,e,r),a(e,er,r),a(e,X,r),o(X,R),o(R,at),o(at,yo),o(X,go),a(e,tr,r),a(e,Ce,r),o(Ce,_o),a(e,rr,r),a(e,De,r),o(De,wo),or=!0},p(e,[r]){const Re={};r&1&&(Re.$$scope={dirty:r,ctx:e}),d.$set(Re);const st={};r&1&&(st.$$scope={dirty:r,ctx:e}),B.$set(st)},i(e){or||(y(d.$$.fragment,e),y(B.$$.fragment,e),y(re.$$.fragment,e),y(oe.$$.fragment,e),y(ae.$$.fragment,e),y(se.$$.fragment,e),y(le.$$.fragment,e),y(ie.$$.fragment,e),y(ne.$$.fragment,e),y(fe.$$.fragment,e),y(he.$$.fragment,e),y(pe.$$.fragment,e),y(ue.$$.fragment,e),y(ce.$$.fragment,e),y(ve.$$.fragment,e),y($e.$$.fragment,e),y(ye.$$.fragment,e),or=!0)},o(e){g(d.$$.fragment,e),g(B.$$.fragment,e),g(re.$$.fragment,e),g(oe.$$.fragment,e),g(ae.$$.fragment,e),g(se.$$.fragment,e),g(le.$$.fragment,e),g(ie.$$.fragment,e),g(ne.$$.fragment,e),g(fe.$$.fragment,e),g(he.$$.fragment,e),g(pe.$$.fragment,e),g(ue.$$.fragment,e),g(ce.$$.fragment,e),g(ve.$$.fragment,e),g($e.$$.fragment,e),g(ye.$$.fragment,e),or=!1},d(e){e&&t(c),_(d),_(B),e&&t(nt),_(re,e),e&&t(ft),e&&t(O),e&&t(ht),e&&t(ge),e&&t(pt),_(oe,e),e&&t(ut),_(ae,e),e&&t(ct),e&&t(z),e&&t(dt),e&&t(Y),e&&t(mt),_(se,e),e&&t(vt),e&&t(we),e&&t($t),_(le,e),e&&t(yt),e&&t(Pe),e&&t(gt),_(ie,e),e&&t(_t),e&&t(Ee),e&&t(wt),_(ne,e),e&&t(Pt),_(fe,e),e&&t(Et),e&&t(L),e&&t(bt),e&&t(be),e&&t(kt),e&&t(ke),e&&t(It),_(he,e),e&&t(Tt),e&&t(M),e&&t(St),e&&t(Ie),e&&t(At),_(pe,e),e&&t(xt),e&&t(U),e&&t(Ht),e&&t(Te),e&&t(Gt),_(ue,e),e&&t(Nt),e&&t(q),e&&t(jt),e&&t(Se),e&&t(Ct),_(ce,e),e&&t(Dt),e&&t(V),e&&t(Rt),e&&t(Ae),e&&t(Bt),e&&t(de),e&&t(Ot),e&&t(J),e&&t(zt),e&&t(P),e&&t(Yt),e&&t(F),e&&t(Lt),e&&t(H),e&&t(Mt),e&&t(G),e&&t(Ut),e&&t(xe),e&&t(qt),e&&t(W),e&&t(Vt),e&&t(He),e&&t(Jt),e&&t(j),_(ve),_($e),e&&t(Ft),e&&t(Z),e&&t(Wt),e&&t(K),e&&t(Zt),e&&t(Ne),e&&t(Kt),e&&t(Q),e&&t(Qt),e&&t(je),e&&t(Xt),_(ye,e),e&&t(er),e&&t(X),e&&t(tr),e&&t(Ce),e&&t(rr),e&&t(De)}}}const za={slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"/images/posts/roger-roger/cover.png",tags:["Coding","Javascript","Game Design"],hidden:!1};class Ya extends Ha{constructor(c){super(),Ga(this,c,null,Da,Na,{})}}export{Ya as default,za as metadata};
diff --git a/_app/immutable/entry/(waves)-404-page.svelte.d095cb8f.js b/_app/immutable/entry/(waves)-404-page.svelte.36f41b4b.js
similarity index 88%
rename from _app/immutable/entry/(waves)-404-page.svelte.d095cb8f.js
rename to _app/immutable/entry/(waves)-404-page.svelte.36f41b4b.js
index 67ca3af..6debbd2 100644
--- a/_app/immutable/entry/(waves)-404-page.svelte.d095cb8f.js
+++ b/_app/immutable/entry/(waves)-404-page.svelte.36f41b4b.js
@@ -1 +1 @@
-import{S as R,i as j,s as F,k as p,q as B,a as u,y as q,l as d,m as _,r as S,h as c,c as v,z as O,n as z,b as H,G as r,A as P,g as A,d as C,B as G}from"../chunks/index.889feda2.js";import{B as J}from"../chunks/Button.835f3106.js";import{E as K}from"../chunks/error.715343d6.js";function L($){let t;return{c(){t=B("Start over")},l(e){t=S(e,"Start over")},m(e,l){H(e,t,l)},d(e){e&&c(t)}}}function M($){let t,e,l,g,b,f,o,w,m,y,E,x,I,n,h;return o=new K({}),n=new J({props:{href:"/",$$slots:{default:[L]},$$scope:{ctx:$}}}),{c(){t=p("div"),e=p("div"),l=p("h1"),g=B("Oh no! 404!"),b=u(),f=p("div"),q(o.$$.fragment),w=u(),m=p("p"),y=B("It seems like coffee was spilled all over this page, and now it can't be displayed."),E=u(),x=p("br"),I=u(),q(n.$$.fragment),this.h()},l(a){t=d(a,"DIV",{class:!0});var i=_(t);e=d(i,"DIV",{class:!0});var s=_(e);l=d(s,"H1",{});var k=_(l);g=S(k,"Oh no! 404!"),k.forEach(c),b=v(s),f=d(s,"DIV",{class:!0});var D=_(f);O(o.$$.fragment,D),D.forEach(c),w=v(s),m=d(s,"P",{});var V=_(m);y=S(V,"It seems like coffee was spilled all over this page, and now it can't be displayed."),V.forEach(c),E=v(s),x=d(s,"BR",{}),I=v(s),O(n.$$.fragment,s),s.forEach(c),i.forEach(c),this.h()},h(){z(f,"class","svg-wrapper svelte-1ezp2f5"),z(e,"class","container svelte-1ezp2f5"),z(t,"class","error-page svelte-1ezp2f5")},m(a,i){H(a,t,i),r(t,e),r(e,l),r(l,g),r(e,b),r(e,f),P(o,f,null),r(e,w),r(e,m),r(m,y),r(e,E),r(e,x),r(e,I),P(n,e,null),h=!0},p(a,[i]){const s={};i&1&&(s.$$scope={dirty:i,ctx:a}),n.$set(s)},i(a){h||(A(o.$$.fragment,a),A(n.$$.fragment,a),h=!0)},o(a){C(o.$$.fragment,a),C(n.$$.fragment,a),h=!1},d(a){a&&c(t),G(o),G(n)}}}class U extends R{constructor(t){super(),j(this,t,null,M,F,{})}}export{U as default};
+import{S as R,i as j,s as F,k as p,q as B,a as u,y as q,l as d,m as _,r as S,h as c,c as v,z as O,n as z,b as H,G as r,A as P,g as A,d as C,B as G}from"../chunks/index.963f39ba.js";import{B as J}from"../chunks/Button.c88cc32a.js";import{E as K}from"../chunks/error.88d56f25.js";function L($){let t;return{c(){t=B("Start over")},l(e){t=S(e,"Start over")},m(e,l){H(e,t,l)},d(e){e&&c(t)}}}function M($){let t,e,l,g,b,f,o,w,m,y,E,x,I,n,h;return o=new K({}),n=new J({props:{href:"/",$$slots:{default:[L]},$$scope:{ctx:$}}}),{c(){t=p("div"),e=p("div"),l=p("h1"),g=B("Oh no! 404!"),b=u(),f=p("div"),q(o.$$.fragment),w=u(),m=p("p"),y=B("It seems like coffee was spilled all over this page, and now it can't be displayed."),E=u(),x=p("br"),I=u(),q(n.$$.fragment),this.h()},l(a){t=d(a,"DIV",{class:!0});var i=_(t);e=d(i,"DIV",{class:!0});var s=_(e);l=d(s,"H1",{});var k=_(l);g=S(k,"Oh no! 404!"),k.forEach(c),b=v(s),f=d(s,"DIV",{class:!0});var D=_(f);O(o.$$.fragment,D),D.forEach(c),w=v(s),m=d(s,"P",{});var V=_(m);y=S(V,"It seems like coffee was spilled all over this page, and now it can't be displayed."),V.forEach(c),E=v(s),x=d(s,"BR",{}),I=v(s),O(n.$$.fragment,s),s.forEach(c),i.forEach(c),this.h()},h(){z(f,"class","svg-wrapper svelte-1ezp2f5"),z(e,"class","container svelte-1ezp2f5"),z(t,"class","error-page svelte-1ezp2f5")},m(a,i){H(a,t,i),r(t,e),r(e,l),r(l,g),r(e,b),r(e,f),P(o,f,null),r(e,w),r(e,m),r(m,y),r(e,E),r(e,x),r(e,I),P(n,e,null),h=!0},p(a,[i]){const s={};i&1&&(s.$$scope={dirty:i,ctx:a}),n.$set(s)},i(a){h||(A(o.$$.fragment,a),A(n.$$.fragment,a),h=!0)},o(a){C(o.$$.fragment,a),C(n.$$.fragment,a),h=!1},d(a){a&&c(t),G(o),G(n)}}}class U extends R{constructor(t){super(),j(this,t,null,M,F,{})}}export{U as default};
diff --git a/_app/immutable/entry/(waves)-layout.svelte.df021916.js b/_app/immutable/entry/(waves)-layout.svelte.ae1baf34.js
similarity index 94%
rename from _app/immutable/entry/(waves)-layout.svelte.df021916.js
rename to _app/immutable/entry/(waves)-layout.svelte.ae1baf34.js
index 36900fb..6e21169 100644
--- a/_app/immutable/entry/(waves)-layout.svelte.df021916.js
+++ b/_app/immutable/entry/(waves)-layout.svelte.ae1baf34.js
@@ -1 +1 @@
-import{S as K,i as U,s as W,C as J,k as r,a as B,y as j,I as O,l as m,h as a,c as C,z as q,m as P,n,G as l,b as F,A as z,D as Q,E as R,F as V,g as H,d as L,B as D}from"../chunks/index.889feda2.js";import{H as X,F as Y}from"../chunks/Footer.d6dce7f9.js";import{t as I,k as Z,s as x,d as N,i as G}from"../chunks/meta.65863fbf.js";function ee($){let s,c,d,i,u,T,h,y,E,g,A,k,f,w,M,v,p,_;document.title=T=I,f=new X({});const b=$[1].default,o=J(b,$,$[0],null);return p=new Y({}),{c(){s=r("link"),c=r("meta"),d=r("meta"),i=r("meta"),u=r("meta"),h=r("meta"),y=r("meta"),E=r("meta"),g=r("meta"),A=r("meta"),k=B(),j(f.$$.fragment),w=B(),M=r("main"),o&&o.c(),v=B(),j(p.$$.fragment),this.h()},l(e){const t=O("svelte-12ekxku",document.head);s=m(t,"LINK",{rel:!0,href:!0}),c=m(t,"META",{name:!0,content:!0}),d=m(t,"META",{name:!0,content:!0}),i=m(t,"META",{property:!0,content:!0}),u=m(t,"META",{name:!0,content:!0}),h=m(t,"META",{property:!0,content:!0}),y=m(t,"META",{name:!0,content:!0}),E=m(t,"META",{property:!0,content:!0}),g=m(t,"META",{name:!0,content:!0}),A=m(t,"META",{name:!0,content:!0}),t.forEach(a),k=C(e),q(f.$$.fragment,e),w=C(e),M=m(e,"MAIN",{});var S=P(M);o&&o.l(S),S.forEach(a),v=C(e),q(p.$$.fragment,e),this.h()},h(){n(s,"rel","“canonical”"),n(s,"href",x),n(c,"name","keywords"),n(c,"content",Z.join(", ")),n(d,"name","description"),n(d,"content",N),n(i,"property","og:description"),n(i,"content",N),n(u,"name","twitter:description"),n(u,"content",N),n(h,"property","og:title"),n(h,"content",I),n(y,"name","twitter:title"),n(y,"content",I),n(E,"property","og:image"),n(E,"content",G),n(g,"name","twitter:image"),n(g,"content",G),n(A,"name","twitter:card"),n(A,"content","summary_large_image")},m(e,t){l(document.head,s),l(document.head,c),l(document.head,d),l(document.head,i),l(document.head,u),l(document.head,h),l(document.head,y),l(document.head,E),l(document.head,g),l(document.head,A),F(e,k,t),z(f,e,t),F(e,w,t),F(e,M,t),o&&o.m(M,null),F(e,v,t),z(p,e,t),_=!0},p(e,[t]){(!_||t&0)&&T!==(T=I)&&(document.title=T),o&&o.p&&(!_||t&1)&&Q(o,b,e,e[0],_?V(b,e[0],t,null):R(e[0]),null)},i(e){_||(H(f.$$.fragment,e),H(o,e),H(p.$$.fragment,e),_=!0)},o(e){L(f.$$.fragment,e),L(o,e),L(p.$$.fragment,e),_=!1},d(e){a(s),a(c),a(d),a(i),a(u),a(h),a(y),a(E),a(g),a(A),e&&a(k),D(f,e),e&&a(w),e&&a(M),o&&o.d(e),e&&a(v),D(p,e)}}}function te($,s,c){let{$$slots:d={},$$scope:i}=s;return $.$$set=u=>{"$$scope"in u&&c(0,i=u.$$scope)},[i,d]}class re extends K{constructor(s){super(),U(this,s,te,ee,W,{})}}export{re as default};
+import{S as K,i as U,s as W,C as J,k as r,a as B,y as j,I as O,l as m,h as a,c as C,z as q,m as P,n,G as l,b as F,A as z,D as Q,E as R,F as V,g as H,d as L,B as D}from"../chunks/index.963f39ba.js";import{H as X,F as Y}from"../chunks/Footer.86072d99.js";import{t as I,k as Z,s as x,d as N,i as G}from"../chunks/meta.65863fbf.js";function ee($){let s,c,d,i,u,T,h,y,E,g,A,k,f,w,M,v,p,_;document.title=T=I,f=new X({});const b=$[1].default,o=J(b,$,$[0],null);return p=new Y({}),{c(){s=r("link"),c=r("meta"),d=r("meta"),i=r("meta"),u=r("meta"),h=r("meta"),y=r("meta"),E=r("meta"),g=r("meta"),A=r("meta"),k=B(),j(f.$$.fragment),w=B(),M=r("main"),o&&o.c(),v=B(),j(p.$$.fragment),this.h()},l(e){const t=O("svelte-12ekxku",document.head);s=m(t,"LINK",{rel:!0,href:!0}),c=m(t,"META",{name:!0,content:!0}),d=m(t,"META",{name:!0,content:!0}),i=m(t,"META",{property:!0,content:!0}),u=m(t,"META",{name:!0,content:!0}),h=m(t,"META",{property:!0,content:!0}),y=m(t,"META",{name:!0,content:!0}),E=m(t,"META",{property:!0,content:!0}),g=m(t,"META",{name:!0,content:!0}),A=m(t,"META",{name:!0,content:!0}),t.forEach(a),k=C(e),q(f.$$.fragment,e),w=C(e),M=m(e,"MAIN",{});var S=P(M);o&&o.l(S),S.forEach(a),v=C(e),q(p.$$.fragment,e),this.h()},h(){n(s,"rel","“canonical”"),n(s,"href",x),n(c,"name","keywords"),n(c,"content",Z.join(", ")),n(d,"name","description"),n(d,"content",N),n(i,"property","og:description"),n(i,"content",N),n(u,"name","twitter:description"),n(u,"content",N),n(h,"property","og:title"),n(h,"content",I),n(y,"name","twitter:title"),n(y,"content",I),n(E,"property","og:image"),n(E,"content",G),n(g,"name","twitter:image"),n(g,"content",G),n(A,"name","twitter:card"),n(A,"content","summary_large_image")},m(e,t){l(document.head,s),l(document.head,c),l(document.head,d),l(document.head,i),l(document.head,u),l(document.head,h),l(document.head,y),l(document.head,E),l(document.head,g),l(document.head,A),F(e,k,t),z(f,e,t),F(e,w,t),F(e,M,t),o&&o.m(M,null),F(e,v,t),z(p,e,t),_=!0},p(e,[t]){(!_||t&0)&&T!==(T=I)&&(document.title=T),o&&o.p&&(!_||t&1)&&Q(o,b,e,e[0],_?V(b,e[0],t,null):R(e[0]),null)},i(e){_||(H(f.$$.fragment,e),H(o,e),H(p.$$.fragment,e),_=!0)},o(e){L(f.$$.fragment,e),L(o,e),L(p.$$.fragment,e),_=!1},d(e){a(s),a(c),a(d),a(i),a(u),a(h),a(y),a(E),a(g),a(A),e&&a(k),D(f,e),e&&a(w),e&&a(M),o&&o.d(e),e&&a(v),D(p,e)}}}function te($,s,c){let{$$slots:d={},$$scope:i}=s;return $.$$set=u=>{"$$scope"in u&&c(0,i=u.$$scope)},[i,d]}class re extends K{constructor(s){super(),U(this,s,te,ee,W,{})}}export{re as default};
diff --git a/_app/immutable/entry/(waves)-page.svelte.7e8e6d6a.js b/_app/immutable/entry/(waves)-page.svelte.7e8e6d6a.js
new file mode 100644
index 0000000..6ba5616
--- /dev/null
+++ b/_app/immutable/entry/(waves)-page.svelte.7e8e6d6a.js
@@ -0,0 +1,5 @@
+import{S as O,i as R,s as z,k as m,q as j,a as I,l as g,m as p,r as H,h as u,c as E,n as h,b as L,G as f,M as N,y as S,z as V,A,g as $,d as y,B as C,v as Z,f as ee,H as te}from"../chunks/index.963f39ba.js";import{B as se}from"../chunks/Button.c88cc32a.js";/* empty css                                                                 */import{S as ne}from"../chunks/Socials.51dbce5a.js";import{I as ae}from"../chunks/Image.a2141873.js";import{C as re,B as le}from"../chunks/ContentSection.e661d46d.js";function oe(i){let e,n,t,s,l,a,o,r,c,D;return{c(){e=m("section"),n=m("div"),t=m("h1"),s=j("Punn"),l=I(),a=m("h1"),o=j("Lertjaturphat's"),r=I(),c=m("h2"),D=j("Portfolio"),this.h()},l(w){e=g(w,"SECTION",{id:!0,class:!0});var d=p(e);n=g(d,"DIV",{class:!0});var b=p(n);t=g(b,"H1",{class:!0});var T=p(t);s=H(T,"Punn"),T.forEach(u),l=E(b),a=g(b,"H1",{class:!0});var _=p(a);o=H(_,"Lertjaturphat's"),_.forEach(u),b.forEach(u),r=E(d),c=g(d,"H2",{class:!0});var k=p(c);D=H(k,"Portfolio"),k.forEach(u),d.forEach(u),this.h()},h(){h(t,"class","svelte-kryipj"),h(a,"class","svelte-kryipj"),h(n,"class","name svelte-kryipj"),h(c,"class","hello svelte-kryipj"),h(e,"id","hero"),h(e,"class","svelte-kryipj")},m(w,d){L(w,e,d),f(e,n),f(n,t),f(t,s),f(n,l),f(n,a),f(a,o),f(e,r),f(e,c),f(c,D)},p:N,i:N,o:N,d(w){w&&u(e)}}}class ie extends O{constructor(e){super(),R(this,e,null,oe,z,{})}}function ce(i){let e,n,t,s,l,a,o,r,c,D,w,d,b,T,_,k,G,M,B,q;return t=new ae({props:{src:"/images/profile.jpeg",alt:"Punn with a cat"}}),B=new ne({}),{c(){e=m("section"),n=m("div"),S(t.$$.fragment),s=I(),l=m("div"),a=m("h2"),o=j("Hi! I'm Punn Lertjaturaphat."),r=I(),c=m("p"),D=j(`A designer who loves to create meaningful interaction. I always keep looking for a way to mix
+			fun physical experience into an otherwise mundane digital task we perform everyday.`),w=I(),d=m("p"),b=j(`I keep my days going with small talks with cafeteria ladies, songs on cracked speakers, and
+			the romance of handwritten letters.`),T=I(),_=m("div"),k=m("span"),G=j("Socials:"),M=I(),S(B.$$.fragment),this.h()},l(v){e=g(v,"SECTION",{id:!0,class:!0});var x=p(e);n=g(x,"DIV",{class:!0});var J=p(n);V(t.$$.fragment,J),J.forEach(u),s=E(x),l=g(x,"DIV",{class:!0});var P=p(l);a=g(P,"H2",{class:!0});var K=p(a);o=H(K,"Hi! I'm Punn Lertjaturaphat."),K.forEach(u),r=E(P),c=g(P,"P",{class:!0});var Q=p(c);D=H(Q,`A designer who loves to create meaningful interaction. I always keep looking for a way to mix
+			fun physical experience into an otherwise mundane digital task we perform everyday.`),Q.forEach(u),w=E(P),d=g(P,"P",{class:!0});var U=p(d);b=H(U,`I keep my days going with small talks with cafeteria ladies, songs on cracked speakers, and
+			the romance of handwritten letters.`),U.forEach(u),T=E(P),_=g(P,"DIV",{class:!0});var F=p(_);k=g(F,"SPAN",{class:!0});var W=p(k);G=H(W,"Socials:"),W.forEach(u),M=E(F),V(B.$$.fragment,F),F.forEach(u),P.forEach(u),x.forEach(u),this.h()},h(){h(n,"class","image svelte-15nehu9"),h(a,"class","svelte-15nehu9"),h(c,"class","svelte-15nehu9"),h(d,"class","svelte-15nehu9"),h(k,"class","svelte-15nehu9"),h(_,"class","socials svelte-15nehu9"),h(l,"class","info svelte-15nehu9"),h(e,"id","about"),h(e,"class","svelte-15nehu9")},m(v,x){L(v,e,x),f(e,n),A(t,n,null),f(e,s),f(e,l),f(l,a),f(a,o),f(l,r),f(l,c),f(c,D),f(l,w),f(l,d),f(d,b),f(l,T),f(l,_),f(_,k),f(k,G),f(_,M),A(B,_,null),q=!0},p:N,i(v){q||($(t.$$.fragment,v),$(B.$$.fragment,v),q=!0)},o(v){y(t.$$.fragment,v),y(B.$$.fragment,v),q=!1},d(v){v&&u(e),C(t),C(B)}}}class fe extends O{constructor(e){super(),R(this,e,null,ce,z,{})}}function X(i,e,n){const t=i.slice();return t[1]=e[n],t}function Y(i){let e,n;return e=new le({props:{slug:i[1].slug,title:i[1].title,excerpt:i[1].excerpt,tags:i[1].tags,readingTime:i[1].readingTime,coverImage:i[1].coverImage}}),{c(){S(e.$$.fragment)},l(t){V(e.$$.fragment,t)},m(t,s){A(e,t,s),n=!0},p(t,s){const l={};s&1&&(l.slug=t[1].slug),s&1&&(l.title=t[1].title),s&1&&(l.excerpt=t[1].excerpt),s&1&&(l.tags=t[1].tags),s&1&&(l.readingTime=t[1].readingTime),s&1&&(l.coverImage=t[1].coverImage),e.$set(l)},i(t){n||($(e.$$.fragment,t),n=!0)},o(t){y(e.$$.fragment,t),n=!1},d(t){C(e,t)}}}function ue(i){let e,n,t=i[0],s=[];for(let a=0;a<t.length;a+=1)s[a]=Y(X(i,t,a));const l=a=>y(s[a],1,1,()=>{s[a]=null});return{c(){e=m("div");for(let a=0;a<s.length;a+=1)s[a].c();this.h()},l(a){e=g(a,"DIV",{class:!0});var o=p(e);for(let r=0;r<s.length;r+=1)s[r].l(o);o.forEach(u),this.h()},h(){h(e,"class","grid svelte-8prerd")},m(a,o){L(a,e,o);for(let r=0;r<s.length;r+=1)s[r]&&s[r].m(e,null);n=!0},p(a,o){if(o&1){t=a[0];let r;for(r=0;r<t.length;r+=1){const c=X(a,t,r);s[r]?(s[r].p(c,o),$(s[r],1)):(s[r]=Y(c),s[r].c(),$(s[r],1),s[r].m(e,null))}for(Z(),r=t.length;r<s.length;r+=1)l(r);ee()}},i(a){if(!n){for(let o=0;o<t.length;o+=1)$(s[o]);n=!0}},o(a){s=s.filter(Boolean);for(let o=0;o<s.length;o+=1)y(s[o]);n=!1},d(a){a&&u(e),te(s,a)}}}function he(i){let e;return{c(){e=j("View All")},l(n){e=H(n,"View All")},m(n,t){L(n,e,t)},d(n){n&&u(e)}}}function me(i){let e,n,t;return n=new se({props:{href:"/projects",$$slots:{default:[he]},$$scope:{ctx:i}}}),{c(){e=m("div"),S(n.$$.fragment),this.h()},l(s){e=g(s,"DIV",{slot:!0});var l=p(e);V(n.$$.fragment,l),l.forEach(u),this.h()},h(){h(e,"slot","button")},m(s,l){L(s,e,l),A(n,e,null),t=!0},p(s,l){const a={};l&16&&(a.$$scope={dirty:l,ctx:s}),n.$set(a)},i(s){t||($(n.$$.fragment,s),t=!0)},o(s){y(n.$$.fragment,s),t=!1},d(s){s&&u(e),C(n)}}}function ge(i){let e,n;return e=new re({props:{id:"recent-posts",title:"Proudly Presents",description:"Here are some of the highlights of my projects.",align:"top",$$slots:{button:[me],default:[ue]},$$scope:{ctx:i}}}),{c(){S(e.$$.fragment)},l(t){V(e.$$.fragment,t)},m(t,s){A(e,t,s),n=!0},p(t,[s]){const l={};s&17&&(l.$$scope={dirty:s,ctx:t}),e.$set(l)},i(t){n||($(e.$$.fragment,t),n=!0)},o(t){y(e.$$.fragment,t),n=!1},d(t){C(e,t)}}}function pe(i,e,n){let{posts:t}=e;return i.$$set=s=>{"posts"in s&&n(0,t=s.posts)},[t]}class de extends O{constructor(e){super(),R(this,e,pe,ge,z,{posts:0})}}function $e(i){let e,n;return e=new de({props:{posts:i[0]}}),{c(){S(e.$$.fragment)},l(t){V(e.$$.fragment,t)},m(t,s){A(e,t,s),n=!0},p:N,i(t){n||($(e.$$.fragment,t),n=!0)},o(t){y(e.$$.fragment,t),n=!1},d(t){C(e,t)}}}function _e(i){let e,n,t,s,l,a;n=new ie({}),s=new fe({});let o=i[0]&&i[0].length>0&&$e(i);return{c(){e=m("div"),S(n.$$.fragment),t=I(),S(s.$$.fragment),l=I(),o&&o.c(),this.h()},l(r){e=g(r,"DIV",{class:!0});var c=p(e);V(n.$$.fragment,c),t=E(c),V(s.$$.fragment,c),l=E(c),o&&o.l(c),c.forEach(u),this.h()},h(){h(e,"class","container")},m(r,c){L(r,e,c),A(n,e,null),f(e,t),A(s,e,null),f(e,l),o&&o.m(e,null),a=!0},p(r,[c]){r[0]&&r[0].length>0&&o.p(r,c)},i(r){a||($(n.$$.fragment,r),$(s.$$.fragment,r),$(o),a=!0)},o(r){y(n.$$.fragment,r),y(s.$$.fragment,r),y(o),a=!1},d(r){r&&u(e),C(n),C(s),o&&o.d()}}}function ve(i,e,n){let{data:t}=e,{features:s,posts:l}=t;return i.$$set=a=>{"data"in a&&n(1,t=a.data)},[l,t]}class Pe extends O{constructor(e){super(),R(this,e,ve,_e,z,{data:1})}}export{Pe as default};
diff --git a/_app/immutable/entry/(waves)-page.svelte.a78471c3.js b/_app/immutable/entry/(waves)-page.svelte.a78471c3.js
deleted file mode 100644
index 3547ddc..0000000
--- a/_app/immutable/entry/(waves)-page.svelte.a78471c3.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import{S as O,i as R,s as z,k as g,q as S,a as I,l as p,m,r as j,h as u,c as E,n as h,b as L,G as f,M as N,y as H,z as V,A,g as d,d as y,B as C,v as Z,f as ee,H as te}from"../chunks/index.889feda2.js";import{B as se}from"../chunks/Button.835f3106.js";import{S as ne}from"../chunks/Socials.3c8c0927.js";import{I as ae}from"../chunks/Image.9fd0349e.js";import{C as re,B as le}from"../chunks/ContentSection.a48a4166.js";function oe(i){let e,n,t,s,l,a,o,r,c,D;return{c(){e=g("section"),n=g("div"),t=g("h1"),s=S("Punn"),l=I(),a=g("h1"),o=S("Lertjaturphat's"),r=I(),c=g("h2"),D=S("Portfolio"),this.h()},l(k){e=p(k,"SECTION",{id:!0,class:!0});var _=m(e);n=p(_,"DIV",{class:!0});var b=m(n);t=p(b,"H1",{class:!0});var T=m(t);s=j(T,"Punn"),T.forEach(u),l=E(b),a=p(b,"H1",{class:!0});var $=m(a);o=j($,"Lertjaturphat's"),$.forEach(u),b.forEach(u),r=E(_),c=p(_,"H2",{class:!0});var w=m(c);D=j(w,"Portfolio"),w.forEach(u),_.forEach(u),this.h()},h(){h(t,"class","svelte-kryipj"),h(a,"class","svelte-kryipj"),h(n,"class","name svelte-kryipj"),h(c,"class","hello svelte-kryipj"),h(e,"id","hero"),h(e,"class","svelte-kryipj")},m(k,_){L(k,e,_),f(e,n),f(n,t),f(t,s),f(n,l),f(n,a),f(a,o),f(e,r),f(e,c),f(c,D)},p:N,i:N,o:N,d(k){k&&u(e)}}}class ie extends O{constructor(e){super(),R(this,e,null,oe,z,{})}}function ce(i){let e,n,t,s,l,a,o,r,c,D,k,_,b,T,$,w,G,M,B,q;return t=new ae({props:{src:"/images/profile.jpeg",alt:"Punn with a cat"}}),B=new ne({}),{c(){e=g("section"),n=g("div"),H(t.$$.fragment),s=I(),l=g("div"),a=g("h2"),o=S("Hi! I'm Punn Lertjaturaphat."),r=I(),c=g("p"),D=S(`A designer who loves to create meaningful interaction. I always keep looking for a way to mix
-			fun physical experience into an otherwise mundane digital task we perform everyday.`),k=I(),_=g("p"),b=S(`I keep my days going with small talks with cafeteria ladies, songs on cracked speakers, and
-			the romance of handwritten letters.`),T=I(),$=g("div"),w=g("span"),G=S("Socials:"),M=I(),H(B.$$.fragment),this.h()},l(v){e=p(v,"SECTION",{id:!0,class:!0});var x=m(e);n=p(x,"DIV",{class:!0});var J=m(n);V(t.$$.fragment,J),J.forEach(u),s=E(x),l=p(x,"DIV",{class:!0});var P=m(l);a=p(P,"H2",{class:!0});var K=m(a);o=j(K,"Hi! I'm Punn Lertjaturaphat."),K.forEach(u),r=E(P),c=p(P,"P",{class:!0});var Q=m(c);D=j(Q,`A designer who loves to create meaningful interaction. I always keep looking for a way to mix
-			fun physical experience into an otherwise mundane digital task we perform everyday.`),Q.forEach(u),k=E(P),_=p(P,"P",{class:!0});var U=m(_);b=j(U,`I keep my days going with small talks with cafeteria ladies, songs on cracked speakers, and
-			the romance of handwritten letters.`),U.forEach(u),T=E(P),$=p(P,"DIV",{class:!0});var F=m($);w=p(F,"SPAN",{class:!0});var W=m(w);G=j(W,"Socials:"),W.forEach(u),M=E(F),V(B.$$.fragment,F),F.forEach(u),P.forEach(u),x.forEach(u),this.h()},h(){h(n,"class","image svelte-15nehu9"),h(a,"class","svelte-15nehu9"),h(c,"class","svelte-15nehu9"),h(_,"class","svelte-15nehu9"),h(w,"class","svelte-15nehu9"),h($,"class","socials svelte-15nehu9"),h(l,"class","info svelte-15nehu9"),h(e,"id","about"),h(e,"class","svelte-15nehu9")},m(v,x){L(v,e,x),f(e,n),A(t,n,null),f(e,s),f(e,l),f(l,a),f(a,o),f(l,r),f(l,c),f(c,D),f(l,k),f(l,_),f(_,b),f(l,T),f(l,$),f($,w),f(w,G),f($,M),A(B,$,null),q=!0},p:N,i(v){q||(d(t.$$.fragment,v),d(B.$$.fragment,v),q=!0)},o(v){y(t.$$.fragment,v),y(B.$$.fragment,v),q=!1},d(v){v&&u(e),C(t),C(B)}}}class fe extends O{constructor(e){super(),R(this,e,null,ce,z,{})}}function X(i,e,n){const t=i.slice();return t[1]=e[n],t}function Y(i){let e,n;return e=new le({props:{slug:i[1].slug,title:i[1].title,excerpt:i[1].excerpt,tags:i[1].tags,readingTime:i[1].readingTime,coverImage:i[1].coverImage}}),{c(){H(e.$$.fragment)},l(t){V(e.$$.fragment,t)},m(t,s){A(e,t,s),n=!0},p(t,s){const l={};s&1&&(l.slug=t[1].slug),s&1&&(l.title=t[1].title),s&1&&(l.excerpt=t[1].excerpt),s&1&&(l.tags=t[1].tags),s&1&&(l.readingTime=t[1].readingTime),s&1&&(l.coverImage=t[1].coverImage),e.$set(l)},i(t){n||(d(e.$$.fragment,t),n=!0)},o(t){y(e.$$.fragment,t),n=!1},d(t){C(e,t)}}}function ue(i){let e,n,t=i[0],s=[];for(let a=0;a<t.length;a+=1)s[a]=Y(X(i,t,a));const l=a=>y(s[a],1,1,()=>{s[a]=null});return{c(){e=g("div");for(let a=0;a<s.length;a+=1)s[a].c();this.h()},l(a){e=p(a,"DIV",{class:!0});var o=m(e);for(let r=0;r<s.length;r+=1)s[r].l(o);o.forEach(u),this.h()},h(){h(e,"class","grid svelte-8prerd")},m(a,o){L(a,e,o);for(let r=0;r<s.length;r+=1)s[r]&&s[r].m(e,null);n=!0},p(a,o){if(o&1){t=a[0];let r;for(r=0;r<t.length;r+=1){const c=X(a,t,r);s[r]?(s[r].p(c,o),d(s[r],1)):(s[r]=Y(c),s[r].c(),d(s[r],1),s[r].m(e,null))}for(Z(),r=t.length;r<s.length;r+=1)l(r);ee()}},i(a){if(!n){for(let o=0;o<t.length;o+=1)d(s[o]);n=!0}},o(a){s=s.filter(Boolean);for(let o=0;o<s.length;o+=1)y(s[o]);n=!1},d(a){a&&u(e),te(s,a)}}}function he(i){let e;return{c(){e=S("View All")},l(n){e=j(n,"View All")},m(n,t){L(n,e,t)},d(n){n&&u(e)}}}function ge(i){let e,n,t;return n=new se({props:{href:"/projects",$$slots:{default:[he]},$$scope:{ctx:i}}}),{c(){e=g("div"),H(n.$$.fragment),this.h()},l(s){e=p(s,"DIV",{slot:!0});var l=m(e);V(n.$$.fragment,l),l.forEach(u),this.h()},h(){h(e,"slot","button")},m(s,l){L(s,e,l),A(n,e,null),t=!0},p(s,l){const a={};l&16&&(a.$$scope={dirty:l,ctx:s}),n.$set(a)},i(s){t||(d(n.$$.fragment,s),t=!0)},o(s){y(n.$$.fragment,s),t=!1},d(s){s&&u(e),C(n)}}}function pe(i){let e,n;return e=new re({props:{id:"recent-posts",title:"Proudly Presents",description:"Here are some of the highlights of my projects.",align:"top",$$slots:{button:[ge],default:[ue]},$$scope:{ctx:i}}}),{c(){H(e.$$.fragment)},l(t){V(e.$$.fragment,t)},m(t,s){A(e,t,s),n=!0},p(t,[s]){const l={};s&17&&(l.$$scope={dirty:s,ctx:t}),e.$set(l)},i(t){n||(d(e.$$.fragment,t),n=!0)},o(t){y(e.$$.fragment,t),n=!1},d(t){C(e,t)}}}function me(i,e,n){let{posts:t}=e;return i.$$set=s=>{"posts"in s&&n(0,t=s.posts)},[t]}class _e extends O{constructor(e){super(),R(this,e,me,pe,z,{posts:0})}}function de(i){let e,n;return e=new _e({props:{posts:i[0]}}),{c(){H(e.$$.fragment)},l(t){V(e.$$.fragment,t)},m(t,s){A(e,t,s),n=!0},p:N,i(t){n||(d(e.$$.fragment,t),n=!0)},o(t){y(e.$$.fragment,t),n=!1},d(t){C(e,t)}}}function $e(i){let e,n,t,s,l,a;n=new ie({}),s=new fe({});let o=i[0]&&i[0].length>0&&de(i);return{c(){e=g("div"),H(n.$$.fragment),t=I(),H(s.$$.fragment),l=I(),o&&o.c(),this.h()},l(r){e=p(r,"DIV",{class:!0});var c=m(e);V(n.$$.fragment,c),t=E(c),V(s.$$.fragment,c),l=E(c),o&&o.l(c),c.forEach(u),this.h()},h(){h(e,"class","container")},m(r,c){L(r,e,c),A(n,e,null),f(e,t),A(s,e,null),f(e,l),o&&o.m(e,null),a=!0},p(r,[c]){r[0]&&r[0].length>0&&o.p(r,c)},i(r){a||(d(n.$$.fragment,r),d(s.$$.fragment,r),d(o),a=!0)},o(r){y(n.$$.fragment,r),y(s.$$.fragment,r),y(o),a=!1},d(r){r&&u(e),C(n),C(s),o&&o.d()}}}function ve(i,e,n){let{data:t}=e,{features:s,posts:l}=t;return i.$$set=a=>{"data"in a&&n(1,t=a.data)},[l,t]}class be extends O{constructor(e){super(),R(this,e,ve,$e,z,{data:1})}}export{be as default};
diff --git a/_app/immutable/entry/(waves)-projects-page.svelte.10a8cb7a.js b/_app/immutable/entry/(waves)-projects-page.svelte.fb2960c1.js
similarity index 93%
rename from _app/immutable/entry/(waves)-projects-page.svelte.10a8cb7a.js
rename to _app/immutable/entry/(waves)-projects-page.svelte.fb2960c1.js
index 1b73036..fcb1982 100644
--- a/_app/immutable/entry/(waves)-projects-page.svelte.10a8cb7a.js
+++ b/_app/immutable/entry/(waves)-projects-page.svelte.fb2960c1.js
@@ -1 +1 @@
-import{S as C,i as I,s as P,k as _,y as d,l as p,m as $,z as v,h as f,n as b,b as k,A as y,g as c,d as u,B,v as S,f as w,H as D,M as E}from"../chunks/index.889feda2.js";import{C as T,B as V}from"../chunks/ContentSection.a48a4166.js";function h(l,t,s){const n=l.slice();return n[2]=t[s],n}function m(l){let t,s;return t=new V({props:{title:l[2].title,coverImage:l[2].coverImage,excerpt:l[2].excerpt,readingTime:l[2].readingTime,slug:l[2].slug,tags:l[2].tags}}),{c(){d(t.$$.fragment)},l(n){v(t.$$.fragment,n)},m(n,e){y(t,n,e),s=!0},p:E,i(n){s||(c(t.$$.fragment,n),s=!0)},o(n){u(t.$$.fragment,n),s=!1},d(n){B(t,n)}}}function j(l){let t,s,n=l[0],e=[];for(let a=0;a<n.length;a+=1)e[a]=m(h(l,n,a));const i=a=>u(e[a],1,1,()=>{e[a]=null});return{c(){t=_("div");for(let a=0;a<e.length;a+=1)e[a].c();this.h()},l(a){t=p(a,"DIV",{class:!0});var o=$(t);for(let r=0;r<e.length;r+=1)e[r].l(o);o.forEach(f),this.h()},h(){b(t,"class","grid svelte-1mrrl9u")},m(a,o){k(a,t,o);for(let r=0;r<e.length;r+=1)e[r]&&e[r].m(t,null);s=!0},p(a,o){if(o&1){n=a[0];let r;for(r=0;r<n.length;r+=1){const g=h(a,n,r);e[r]?(e[r].p(g,o),c(e[r],1)):(e[r]=m(g),e[r].c(),c(e[r],1),e[r].m(t,null))}for(S(),r=n.length;r<e.length;r+=1)i(r);w()}},i(a){if(!s){for(let o=0;o<n.length;o+=1)c(e[o]);s=!0}},o(a){e=e.filter(Boolean);for(let o=0;o<e.length;o+=1)u(e[o]);s=!1},d(a){a&&f(t),D(e,a)}}}function q(l){let t,s,n;return s=new T({props:{title:"Projects",$$slots:{default:[j]},$$scope:{ctx:l}}}),{c(){t=_("div"),d(s.$$.fragment),this.h()},l(e){t=p(e,"DIV",{class:!0});var i=$(t);v(s.$$.fragment,i),i.forEach(f),this.h()},h(){b(t,"class","container")},m(e,i){k(e,t,i),y(s,t,null),n=!0},p(e,[i]){const a={};i&32&&(a.$$scope={dirty:i,ctx:e}),s.$set(a)},i(e){n||(c(s.$$.fragment,e),n=!0)},o(e){u(s.$$.fragment,e),n=!1},d(e){e&&f(t),B(s)}}}function z(l,t,s){let{data:n}=t,{posts:e}=n;return l.$$set=i=>{"data"in i&&s(1,n=i.data)},[e,n]}class M extends C{constructor(t){super(),I(this,t,z,q,P,{data:1})}}export{M as default};
+import{S as C,i as I,s as P,k as _,y as d,l as p,m as $,z as v,h as f,n as b,b as k,A as y,g as c,d as u,B,v as S,f as w,H as D,M as E}from"../chunks/index.963f39ba.js";import{C as T,B as V}from"../chunks/ContentSection.e661d46d.js";function h(l,t,s){const n=l.slice();return n[2]=t[s],n}function m(l){let t,s;return t=new V({props:{title:l[2].title,coverImage:l[2].coverImage,excerpt:l[2].excerpt,readingTime:l[2].readingTime,slug:l[2].slug,tags:l[2].tags}}),{c(){d(t.$$.fragment)},l(n){v(t.$$.fragment,n)},m(n,e){y(t,n,e),s=!0},p:E,i(n){s||(c(t.$$.fragment,n),s=!0)},o(n){u(t.$$.fragment,n),s=!1},d(n){B(t,n)}}}function j(l){let t,s,n=l[0],e=[];for(let a=0;a<n.length;a+=1)e[a]=m(h(l,n,a));const i=a=>u(e[a],1,1,()=>{e[a]=null});return{c(){t=_("div");for(let a=0;a<e.length;a+=1)e[a].c();this.h()},l(a){t=p(a,"DIV",{class:!0});var o=$(t);for(let r=0;r<e.length;r+=1)e[r].l(o);o.forEach(f),this.h()},h(){b(t,"class","grid svelte-1mrrl9u")},m(a,o){k(a,t,o);for(let r=0;r<e.length;r+=1)e[r]&&e[r].m(t,null);s=!0},p(a,o){if(o&1){n=a[0];let r;for(r=0;r<n.length;r+=1){const g=h(a,n,r);e[r]?(e[r].p(g,o),c(e[r],1)):(e[r]=m(g),e[r].c(),c(e[r],1),e[r].m(t,null))}for(S(),r=n.length;r<e.length;r+=1)i(r);w()}},i(a){if(!s){for(let o=0;o<n.length;o+=1)c(e[o]);s=!0}},o(a){e=e.filter(Boolean);for(let o=0;o<e.length;o+=1)u(e[o]);s=!1},d(a){a&&f(t),D(e,a)}}}function q(l){let t,s,n;return s=new T({props:{title:"Projects",$$slots:{default:[j]},$$scope:{ctx:l}}}),{c(){t=_("div"),d(s.$$.fragment),this.h()},l(e){t=p(e,"DIV",{class:!0});var i=$(t);v(s.$$.fragment,i),i.forEach(f),this.h()},h(){b(t,"class","container")},m(e,i){k(e,t,i),y(s,t,null),n=!0},p(e,[i]){const a={};i&32&&(a.$$scope={dirty:i,ctx:e}),s.$set(a)},i(e){n||(c(s.$$.fragment,e),n=!0)},o(e){u(s.$$.fragment,e),n=!1},d(e){e&&f(t),B(s)}}}function z(l,t,s){let{data:n}=t,{posts:e}=n;return l.$$set=i=>{"data"in i&&s(1,n=i.data)},[e,n]}class M extends C{constructor(t){super(),I(this,t,z,q,P,{data:1})}}export{M as default};
diff --git a/_app/immutable/entry/_error.svelte.2317c20f.js b/_app/immutable/entry/_error.svelte.491781ac.js
similarity index 87%
rename from _app/immutable/entry/_error.svelte.2317c20f.js
rename to _app/immutable/entry/_error.svelte.491781ac.js
index 71850ac..959c115 100644
--- a/_app/immutable/entry/_error.svelte.2317c20f.js
+++ b/_app/immutable/entry/_error.svelte.491781ac.js
@@ -1 +1 @@
-import{S as K,i as L,s as Q,y as I,a as u,k as p,q as N,z as x,c as v,l as c,m as h,r as P,h as l,n as M,A as B,b as D,G as a,g as k,d as z,B as S}from"../chunks/index.889feda2.js";import{H as T,F as U}from"../chunks/Footer.d6dce7f9.js";import{B as W}from"../chunks/Button.835f3106.js";import{E as X}from"../chunks/error.715343d6.js";function Y(H){let t;return{c(){t=N("Start over")},l(n){t=P(n,"Start over")},m(n,i){D(n,t,i)},d(n){n&&l(t)}}}function Z(H){let t,n,i,d,r,g,V,q,_,m,A,w,F,O,C,G,f,b,$,y;return t=new T({props:{showBackground:!0}}),m=new X({}),f=new W({props:{href:"/",$$slots:{default:[Y]},$$scope:{ctx:H}}}),$=new U({}),{c(){I(t.$$.fragment),n=u(),i=p("main"),d=p("div"),r=p("div"),g=p("h1"),V=N("Oh no!"),q=u(),_=p("div"),I(m.$$.fragment),A=u(),w=p("p"),F=N("It seems like coffee was spilled all over this page, and now it can't be displayed."),O=u(),C=p("br"),G=u(),I(f.$$.fragment),b=u(),I($.$$.fragment),this.h()},l(e){x(t.$$.fragment,e),n=v(e),i=c(e,"MAIN",{});var s=h(i);d=c(s,"DIV",{class:!0});var E=h(d);r=c(E,"DIV",{class:!0});var o=h(r);g=c(o,"H1",{});var R=h(g);V=P(R,"Oh no!"),R.forEach(l),q=v(o),_=c(o,"DIV",{class:!0});var j=h(_);x(m.$$.fragment,j),j.forEach(l),A=v(o),w=c(o,"P",{});var J=h(w);F=P(J,"It seems like coffee was spilled all over this page, and now it can't be displayed."),J.forEach(l),O=v(o),C=c(o,"BR",{}),G=v(o),x(f.$$.fragment,o),o.forEach(l),E.forEach(l),s.forEach(l),b=v(e),x($.$$.fragment,e),this.h()},h(){M(_,"class","svg-wrapper svelte-1ezp2f5"),M(r,"class","container svelte-1ezp2f5"),M(d,"class","error-page svelte-1ezp2f5")},m(e,s){B(t,e,s),D(e,n,s),D(e,i,s),a(i,d),a(d,r),a(r,g),a(g,V),a(r,q),a(r,_),B(m,_,null),a(r,A),a(r,w),a(w,F),a(r,O),a(r,C),a(r,G),B(f,r,null),D(e,b,s),B($,e,s),y=!0},p(e,[s]){const E={};s&1&&(E.$$scope={dirty:s,ctx:e}),f.$set(E)},i(e){y||(k(t.$$.fragment,e),k(m.$$.fragment,e),k(f.$$.fragment,e),k($.$$.fragment,e),y=!0)},o(e){z(t.$$.fragment,e),z(m.$$.fragment,e),z(f.$$.fragment,e),z($.$$.fragment,e),y=!1},d(e){S(t,e),e&&l(n),e&&l(i),S(m),S(f),e&&l(b),S($,e)}}}class se extends K{constructor(t){super(),L(this,t,null,Z,Q,{})}}export{se as default};
+import{S as K,i as L,s as Q,y as I,a as u,k as p,q as N,z as x,c as v,l as c,m as h,r as P,h as l,n as M,A as B,b as D,G as a,g as k,d as z,B as S}from"../chunks/index.963f39ba.js";import{H as T,F as U}from"../chunks/Footer.86072d99.js";import{B as W}from"../chunks/Button.c88cc32a.js";import{E as X}from"../chunks/error.88d56f25.js";function Y(H){let t;return{c(){t=N("Start over")},l(n){t=P(n,"Start over")},m(n,i){D(n,t,i)},d(n){n&&l(t)}}}function Z(H){let t,n,i,d,r,g,V,q,_,m,A,w,F,O,C,G,f,b,$,y;return t=new T({props:{showBackground:!0}}),m=new X({}),f=new W({props:{href:"/",$$slots:{default:[Y]},$$scope:{ctx:H}}}),$=new U({}),{c(){I(t.$$.fragment),n=u(),i=p("main"),d=p("div"),r=p("div"),g=p("h1"),V=N("Oh no!"),q=u(),_=p("div"),I(m.$$.fragment),A=u(),w=p("p"),F=N("It seems like coffee was spilled all over this page, and now it can't be displayed."),O=u(),C=p("br"),G=u(),I(f.$$.fragment),b=u(),I($.$$.fragment),this.h()},l(e){x(t.$$.fragment,e),n=v(e),i=c(e,"MAIN",{});var s=h(i);d=c(s,"DIV",{class:!0});var E=h(d);r=c(E,"DIV",{class:!0});var o=h(r);g=c(o,"H1",{});var R=h(g);V=P(R,"Oh no!"),R.forEach(l),q=v(o),_=c(o,"DIV",{class:!0});var j=h(_);x(m.$$.fragment,j),j.forEach(l),A=v(o),w=c(o,"P",{});var J=h(w);F=P(J,"It seems like coffee was spilled all over this page, and now it can't be displayed."),J.forEach(l),O=v(o),C=c(o,"BR",{}),G=v(o),x(f.$$.fragment,o),o.forEach(l),E.forEach(l),s.forEach(l),b=v(e),x($.$$.fragment,e),this.h()},h(){M(_,"class","svg-wrapper svelte-1ezp2f5"),M(r,"class","container svelte-1ezp2f5"),M(d,"class","error-page svelte-1ezp2f5")},m(e,s){B(t,e,s),D(e,n,s),D(e,i,s),a(i,d),a(d,r),a(r,g),a(g,V),a(r,q),a(r,_),B(m,_,null),a(r,A),a(r,w),a(w,F),a(r,O),a(r,C),a(r,G),B(f,r,null),D(e,b,s),B($,e,s),y=!0},p(e,[s]){const E={};s&1&&(E.$$scope={dirty:s,ctx:e}),f.$set(E)},i(e){y||(k(t.$$.fragment,e),k(m.$$.fragment,e),k(f.$$.fragment,e),k($.$$.fragment,e),y=!0)},o(e){z(t.$$.fragment,e),z(m.$$.fragment,e),z(f.$$.fragment,e),z($.$$.fragment,e),y=!1},d(e){S(t,e),e&&l(n),e&&l(i),S(m),S(f),e&&l(b),S($,e)}}}class se extends K{constructor(t){super(),L(this,t,null,Z,Q,{})}}export{se as default};
diff --git a/_app/immutable/entry/_layout.svelte.1c576aae.js b/_app/immutable/entry/_layout.svelte.926ef413.js
similarity index 88%
rename from _app/immutable/entry/_layout.svelte.1c576aae.js
rename to _app/immutable/entry/_layout.svelte.926ef413.js
index 32916a1..ff2e1c9 100644
--- a/_app/immutable/entry/_layout.svelte.1c576aae.js
+++ b/_app/immutable/entry/_layout.svelte.926ef413.js
@@ -1 +1 @@
-import{S as o,i,s as r,C as u,D as f,E as _,F as c,g as p,d}from"../chunks/index.889feda2.js";function m(l){let s;const n=l[1].default,e=u(n,l,l[0],null);return{c(){e&&e.c()},l(t){e&&e.l(t)},m(t,a){e&&e.m(t,a),s=!0},p(t,[a]){e&&e.p&&(!s||a&1)&&f(e,n,t,t[0],s?c(n,t[0],a,null):_(t[0]),null)},i(t){s||(p(e,t),s=!0)},o(t){d(e,t),s=!1},d(t){e&&e.d(t)}}}function $(l,s,n){let{$$slots:e={},$$scope:t}=s;return l.$$set=a=>{"$$scope"in a&&n(0,t=a.$$scope)},[t,e]}class b extends o{constructor(s){super(),i(this,s,$,m,r,{})}}export{b as default};
+import{S as o,i,s as r,C as u,D as f,E as _,F as c,g as p,d}from"../chunks/index.963f39ba.js";function m(l){let s;const n=l[1].default,e=u(n,l,l[0],null);return{c(){e&&e.c()},l(t){e&&e.l(t)},m(t,a){e&&e.m(t,a),s=!0},p(t,[a]){e&&e.p&&(!s||a&1)&&f(e,n,t,t[0],s?c(n,t[0],a,null):_(t[0]),null)},i(t){s||(p(e,t),s=!0)},o(t){d(e,t),s=!1},d(t){e&&e.d(t)}}}function $(l,s,n){let{$$slots:e={},$$scope:t}=s;return l.$$set=a=>{"$$scope"in a&&n(0,t=a.$$scope)},[t,e]}class b extends o{constructor(s){super(),i(this,s,$,m,r,{})}}export{b as default};
diff --git a/_app/immutable/entry/app.bbae1d65.js b/_app/immutable/entry/app.19a18c5b.js
similarity index 60%
rename from _app/immutable/entry/app.bbae1d65.js
rename to _app/immutable/entry/app.19a18c5b.js
index d89de4a..cc2744b 100644
--- a/_app/immutable/entry/app.bbae1d65.js
+++ b/_app/immutable/entry/app.19a18c5b.js
@@ -1 +1 @@
-import{S as q,i as U,s as z,a as W,e as m,c as F,b as w,d as p,f as L,g as h,h as g,j as G,o as H,k as J,l as K,m as M,n as O,p as R,q as Q,r as X,u as Y,v as P,w as D,x as b,y as k,z as I,A as E,B as v}from"../chunks/index.889feda2.js";const Z="modulepreload",x=function(l,e){return new URL(l,e).href},V={},d=function(e,n,r){if(!n||n.length===0)return e();const i=document.getElementsByTagName("link");return Promise.all(n.map(_=>{if(_=x(_,r),_ in V)return;V[_]=!0;const t=_.endsWith(".css"),s=t?'[rel="stylesheet"]':"";if(!!r)for(let a=i.length-1;a>=0;a--){const u=i[a];if(u.href===_&&(!t||u.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${_}"]${s}`))return;const o=document.createElement("link");if(o.rel=t?"stylesheet":Z,t||(o.as="script",o.crossOrigin=""),o.href=_,document.head.appendChild(o),t)return new Promise((a,u)=>{o.addEventListener("load",a),o.addEventListener("error",()=>u(new Error(`Unable to preload CSS for ${_}`)))})})).then(()=>e())},ae={};function ee(l){let e,n,r;var i=l[1][0];function _(t){return{props:{data:t[3],form:t[2]}}}return i&&(e=b(i,_(l)),l[15](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&8&&(f.data=t[3]),s&4&&(f.form=t[2]),s&2&&i!==(i=t[1][0])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[15](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[15](null),t&&g(n),e&&v(e,t)}}}function te(l){let e,n,r;var i=l[1][0];function _(t){return{props:{data:t[3],$$slots:{default:[se]},$$scope:{ctx:t}}}}return i&&(e=b(i,_(l)),l[14](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&8&&(f.data=t[3]),s&65591&&(f.$$scope={dirty:s,ctx:t}),s&2&&i!==(i=t[1][0])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[14](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[14](null),t&&g(n),e&&v(e,t)}}}function ne(l){let e,n,r;var i=l[1][1];function _(t){return{props:{data:t[4],form:t[2]}}}return i&&(e=b(i,_(l)),l[13](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&16&&(f.data=t[4]),s&4&&(f.form=t[2]),s&2&&i!==(i=t[1][1])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[13](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[13](null),t&&g(n),e&&v(e,t)}}}function ie(l){let e,n,r;var i=l[1][1];function _(t){return{props:{data:t[4],$$slots:{default:[re]},$$scope:{ctx:t}}}}return i&&(e=b(i,_(l)),l[12](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&16&&(f.data=t[4]),s&65575&&(f.$$scope={dirty:s,ctx:t}),s&2&&i!==(i=t[1][1])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[12](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[12](null),t&&g(n),e&&v(e,t)}}}function re(l){let e,n,r;var i=l[1][2];function _(t){return{props:{data:t[5],form:t[2]}}}return i&&(e=b(i,_(l)),l[11](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&32&&(f.data=t[5]),s&4&&(f.form=t[2]),s&2&&i!==(i=t[1][2])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[11](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[11](null),t&&g(n),e&&v(e,t)}}}function se(l){let e,n,r,i;const _=[ie,ne],t=[];function s(f,o){return f[1][2]?0:1}return e=s(l),n=t[e]=_[e](l),{c(){n.c(),r=m()},l(f){n.l(f),r=m()},m(f,o){t[e].m(f,o),w(f,r,o),i=!0},p(f,o){let a=e;e=s(f),e===a?t[e].p(f,o):(P(),p(t[a],1,1,()=>{t[a]=null}),L(),n=t[e],n?n.p(f,o):(n=t[e]=_[e](f),n.c()),h(n,1),n.m(r.parentNode,r))},i(f){i||(h(n),i=!0)},o(f){p(n),i=!1},d(f){t[e].d(f),f&&g(r)}}}function N(l){let e,n=l[7]&&$(l);return{c(){e=J("div"),n&&n.c(),this.h()},l(r){e=K(r,"DIV",{id:!0,"aria-live":!0,"aria-atomic":!0,style:!0});var i=M(e);n&&n.l(i),i.forEach(g),this.h()},h(){O(e,"id","svelte-announcer"),O(e,"aria-live","assertive"),O(e,"aria-atomic","true"),R(e,"position","absolute"),R(e,"left","0"),R(e,"top","0"),R(e,"clip","rect(0 0 0 0)"),R(e,"clip-path","inset(50%)"),R(e,"overflow","hidden"),R(e,"white-space","nowrap"),R(e,"width","1px"),R(e,"height","1px")},m(r,i){w(r,e,i),n&&n.m(e,null)},p(r,i){r[7]?n?n.p(r,i):(n=$(r),n.c(),n.m(e,null)):n&&(n.d(1),n=null)},d(r){r&&g(e),n&&n.d()}}}function $(l){let e;return{c(){e=Q(l[8])},l(n){e=X(n,l[8])},m(n,r){w(n,e,r)},p(n,r){r&256&&Y(e,n[8])},d(n){n&&g(e)}}}function oe(l){let e,n,r,i,_;const t=[te,ee],s=[];function f(a,u){return a[1][1]?0:1}e=f(l),n=s[e]=t[e](l);let o=l[6]&&N(l);return{c(){n.c(),r=W(),o&&o.c(),i=m()},l(a){n.l(a),r=F(a),o&&o.l(a),i=m()},m(a,u){s[e].m(a,u),w(a,r,u),o&&o.m(a,u),w(a,i,u),_=!0},p(a,[u]){let A=e;e=f(a),e===A?s[e].p(a,u):(P(),p(s[A],1,1,()=>{s[A]=null}),L(),n=s[e],n?n.p(a,u):(n=s[e]=t[e](a),n.c()),h(n,1),n.m(r.parentNode,r)),a[6]?o?o.p(a,u):(o=N(a),o.c(),o.m(i.parentNode,i)):o&&(o.d(1),o=null)},i(a){_||(h(n),_=!0)},o(a){p(n),_=!1},d(a){s[e].d(a),a&&g(r),o&&o.d(a),a&&g(i)}}}function le(l,e,n){let{stores:r}=e,{page:i}=e,{constructors:_}=e,{components:t=[]}=e,{form:s}=e,{data_0:f=null}=e,{data_1:o=null}=e,{data_2:a=null}=e;G(r.page.notify);let u=!1,A=!1,T=null;H(()=>{const c=r.page.subscribe(()=>{u&&(n(7,A=!0),n(8,T=document.title||"untitled page"))});return n(6,u=!0),c});function S(c){D[c?"unshift":"push"](()=>{t[2]=c,n(0,t)})}function y(c){D[c?"unshift":"push"](()=>{t[1]=c,n(0,t)})}function B(c){D[c?"unshift":"push"](()=>{t[1]=c,n(0,t)})}function C(c){D[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}function j(c){D[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}return l.$$set=c=>{"stores"in c&&n(9,r=c.stores),"page"in c&&n(10,i=c.page),"constructors"in c&&n(1,_=c.constructors),"components"in c&&n(0,t=c.components),"form"in c&&n(2,s=c.form),"data_0"in c&&n(3,f=c.data_0),"data_1"in c&&n(4,o=c.data_1),"data_2"in c&&n(5,a=c.data_2)},l.$$.update=()=>{l.$$.dirty&1536&&r.page.set(i)},[t,_,s,f,o,a,u,A,T,r,i,S,y,B,C,j]}class _e extends q{constructor(e){super(),U(this,e,le,oe,z,{stores:9,page:10,constructors:1,components:0,form:2,data_0:3,data_1:4,data_2:5})}}const ce=[()=>d(()=>import("../chunks/0.63da0304.js"),["../chunks/0.63da0304.js","../chunks/_layout.da46b06b.js","./_layout.svelte.1c576aae.js","../chunks/index.889feda2.js","../assets/_layout.aad15a8a.css"],import.meta.url),()=>d(()=>import("../chunks/1.e780d3fa.js"),["../chunks/1.e780d3fa.js","./_error.svelte.2317c20f.js","../chunks/index.889feda2.js","../chunks/Footer.d6dce7f9.js","../chunks/Socials.3c8c0927.js","../assets/Socials.90829a02.css","../chunks/index.c7d83eca.js","../assets/Footer.d22ee075.css","../chunks/Button.835f3106.js","../chunks/regex.7dfa9b23.js","../assets/Button.df0e54d0.css","../chunks/error.715343d6.js","../assets/_error.e3eb7d9c.css"],import.meta.url),()=>d(()=>import("../chunks/2.b6cd7b50.js"),["../chunks/2.b6cd7b50.js","./(blog-article)-layout.svelte.88b989a1.js","../chunks/index.889feda2.js","../chunks/Footer.d6dce7f9.js","../chunks/Socials.3c8c0927.js","../assets/Socials.90829a02.css","../chunks/index.c7d83eca.js","../assets/Footer.d22ee075.css","../chunks/ContentSection.a48a4166.js","../chunks/regex.7dfa9b23.js","../chunks/Image.9fd0349e.js","../assets/Image.0954db74.css","../assets/ContentSection.ebb4e843.css","../chunks/meta.65863fbf.js","../assets/_layout.52712246.css"],import.meta.url),()=>d(()=>import("../chunks/3.74580eb5.js"),["../chunks/3.74580eb5.js","./(waves)-layout.svelte.df021916.js","../chunks/index.889feda2.js","../chunks/Footer.d6dce7f9.js","../chunks/Socials.3c8c0927.js","../assets/Socials.90829a02.css","../chunks/index.c7d83eca.js","../assets/Footer.d22ee075.css","../chunks/meta.65863fbf.js","../assets/_layout.4c4b0438.css"],import.meta.url),()=>d(()=>import("../chunks/4.bc993682.js"),["../chunks/4.bc993682.js","./(blog-article)-blog-posts-page.md.f55da5c2.js","../chunks/index.889feda2.js","../chunks/CodeBlock.280f02c3.js","../assets/CodeBlock.cb0c12be.css","../chunks/Image.9fd0349e.js","../assets/Image.0954db74.css","../assets/Callout.f5800320.css"],import.meta.url),()=>d(()=>import("../chunks/5.8f6f8431.js"),["../chunks/5.8f6f8431.js","./(blog-article)-customization-page.md.8c33bc0d.js","../chunks/index.889feda2.js"],import.meta.url),()=>d(()=>import("../chunks/6.8e9b0f95.js"),["../chunks/6.8e9b0f95.js","./(blog-article)-oink-page.md.729a927f.js","../chunks/index.889feda2.js","../chunks/Image.9fd0349e.js","../assets/Image.0954db74.css","../assets/_page.ba1a06a2.css","../assets/Callout.f5800320.css","../assets/CodeBlock.cb0c12be.css"],import.meta.url),()=>d(()=>import("../chunks/7.3df68369.js"),["../chunks/7.3df68369.js","./(blog-article)-project-structure-page.md.42e0c5de.js","../chunks/index.889feda2.js","../chunks/CodeBlock.280f02c3.js","../assets/CodeBlock.cb0c12be.css"],import.meta.url),()=>d(()=>import("../chunks/8.bfd2ded3.js"),["../chunks/8.bfd2ded3.js","./(blog-article)-roger-roger-page.md.467361a8.js","../chunks/index.889feda2.js","../chunks/Image.9fd0349e.js","../assets/Image.0954db74.css","../chunks/Button.835f3106.js","../chunks/regex.7dfa9b23.js","../assets/Button.df0e54d0.css","../assets/_page.74ba00a5.css"],import.meta.url),()=>d(()=>import("../chunks/9.eadbd323.js"),["../chunks/9.eadbd323.js","./(waves)-page.svelte.a78471c3.js","../chunks/index.889feda2.js","../chunks/Button.835f3106.js","../chunks/regex.7dfa9b23.js","../assets/Button.df0e54d0.css","../chunks/Socials.3c8c0927.js","../assets/Socials.90829a02.css","../chunks/Image.9fd0349e.js","../assets/Image.0954db74.css","../chunks/ContentSection.a48a4166.js","../assets/ContentSection.ebb4e843.css","../assets/_page.a6e66b51.css"],import.meta.url),()=>d(()=>import("../chunks/10.83e7b329.js"),["../chunks/10.83e7b329.js","./(waves)-404-page.svelte.d095cb8f.js","../chunks/index.889feda2.js","../chunks/Button.835f3106.js","../chunks/regex.7dfa9b23.js","../assets/Button.df0e54d0.css","../chunks/error.715343d6.js","../assets/_error.e3eb7d9c.css"],import.meta.url),()=>d(()=>import("../chunks/11.3ffd4d86.js"),["../chunks/11.3ffd4d86.js","./(waves)-projects-page.svelte.10a8cb7a.js","../chunks/index.889feda2.js","../chunks/ContentSection.a48a4166.js","../chunks/regex.7dfa9b23.js","../chunks/Image.9fd0349e.js","../assets/Image.0954db74.css","../assets/ContentSection.ebb4e843.css","../assets/_page.f207d5be.css"],import.meta.url)],ue=[2],me={"/(waves)":[-10,[3]],"/(waves)/404":[10,[3]],"/(blog-article)/blog-posts":[4,[2]],"/(blog-article)/customization":[5,[2]],"/(blog-article)/oink":[6,[2]],"/(blog-article)/project-structure":[7,[2]],"/(waves)/projects":[-12,[3]],"/(blog-article)/roger-roger":[8,[2]]},pe={handleError:({error:l})=>{console.error(l)}};export{me as dictionary,pe as hooks,ae as matchers,ce as nodes,_e as root,ue as server_loads};
+import{S as q,i as U,s as z,a as W,e as m,c as F,b as w,d as p,f as L,g as h,h as g,j as G,o as H,k as J,l as K,m as M,n as O,p as R,q as Q,r as X,u as Y,v as P,w as D,x as b,y as k,z as I,A as E,B as v}from"../chunks/index.963f39ba.js";const Z="modulepreload",x=function(l,e){return new URL(l,e).href},V={},d=function(e,n,r){if(!n||n.length===0)return e();const i=document.getElementsByTagName("link");return Promise.all(n.map(_=>{if(_=x(_,r),_ in V)return;V[_]=!0;const t=_.endsWith(".css"),s=t?'[rel="stylesheet"]':"";if(!!r)for(let a=i.length-1;a>=0;a--){const u=i[a];if(u.href===_&&(!t||u.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${_}"]${s}`))return;const o=document.createElement("link");if(o.rel=t?"stylesheet":Z,t||(o.as="script",o.crossOrigin=""),o.href=_,document.head.appendChild(o),t)return new Promise((a,u)=>{o.addEventListener("load",a),o.addEventListener("error",()=>u(new Error(`Unable to preload CSS for ${_}`)))})})).then(()=>e())},ae={};function ee(l){let e,n,r;var i=l[1][0];function _(t){return{props:{data:t[3],form:t[2]}}}return i&&(e=b(i,_(l)),l[15](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&8&&(f.data=t[3]),s&4&&(f.form=t[2]),s&2&&i!==(i=t[1][0])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[15](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[15](null),t&&g(n),e&&v(e,t)}}}function te(l){let e,n,r;var i=l[1][0];function _(t){return{props:{data:t[3],$$slots:{default:[se]},$$scope:{ctx:t}}}}return i&&(e=b(i,_(l)),l[14](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&8&&(f.data=t[3]),s&65591&&(f.$$scope={dirty:s,ctx:t}),s&2&&i!==(i=t[1][0])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[14](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[14](null),t&&g(n),e&&v(e,t)}}}function ne(l){let e,n,r;var i=l[1][1];function _(t){return{props:{data:t[4],form:t[2]}}}return i&&(e=b(i,_(l)),l[13](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&16&&(f.data=t[4]),s&4&&(f.form=t[2]),s&2&&i!==(i=t[1][1])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[13](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[13](null),t&&g(n),e&&v(e,t)}}}function ie(l){let e,n,r;var i=l[1][1];function _(t){return{props:{data:t[4],$$slots:{default:[re]},$$scope:{ctx:t}}}}return i&&(e=b(i,_(l)),l[12](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&16&&(f.data=t[4]),s&65575&&(f.$$scope={dirty:s,ctx:t}),s&2&&i!==(i=t[1][1])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[12](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[12](null),t&&g(n),e&&v(e,t)}}}function re(l){let e,n,r;var i=l[1][2];function _(t){return{props:{data:t[5],form:t[2]}}}return i&&(e=b(i,_(l)),l[11](e)),{c(){e&&k(e.$$.fragment),n=m()},l(t){e&&I(e.$$.fragment,t),n=m()},m(t,s){e&&E(e,t,s),w(t,n,s),r=!0},p(t,s){const f={};if(s&32&&(f.data=t[5]),s&4&&(f.form=t[2]),s&2&&i!==(i=t[1][2])){if(e){P();const o=e;p(o.$$.fragment,1,0,()=>{v(o,1)}),L()}i?(e=b(i,_(t)),t[11](e),k(e.$$.fragment),h(e.$$.fragment,1),E(e,n.parentNode,n)):e=null}else i&&e.$set(f)},i(t){r||(e&&h(e.$$.fragment,t),r=!0)},o(t){e&&p(e.$$.fragment,t),r=!1},d(t){l[11](null),t&&g(n),e&&v(e,t)}}}function se(l){let e,n,r,i;const _=[ie,ne],t=[];function s(f,o){return f[1][2]?0:1}return e=s(l),n=t[e]=_[e](l),{c(){n.c(),r=m()},l(f){n.l(f),r=m()},m(f,o){t[e].m(f,o),w(f,r,o),i=!0},p(f,o){let a=e;e=s(f),e===a?t[e].p(f,o):(P(),p(t[a],1,1,()=>{t[a]=null}),L(),n=t[e],n?n.p(f,o):(n=t[e]=_[e](f),n.c()),h(n,1),n.m(r.parentNode,r))},i(f){i||(h(n),i=!0)},o(f){p(n),i=!1},d(f){t[e].d(f),f&&g(r)}}}function N(l){let e,n=l[7]&&$(l);return{c(){e=J("div"),n&&n.c(),this.h()},l(r){e=K(r,"DIV",{id:!0,"aria-live":!0,"aria-atomic":!0,style:!0});var i=M(e);n&&n.l(i),i.forEach(g),this.h()},h(){O(e,"id","svelte-announcer"),O(e,"aria-live","assertive"),O(e,"aria-atomic","true"),R(e,"position","absolute"),R(e,"left","0"),R(e,"top","0"),R(e,"clip","rect(0 0 0 0)"),R(e,"clip-path","inset(50%)"),R(e,"overflow","hidden"),R(e,"white-space","nowrap"),R(e,"width","1px"),R(e,"height","1px")},m(r,i){w(r,e,i),n&&n.m(e,null)},p(r,i){r[7]?n?n.p(r,i):(n=$(r),n.c(),n.m(e,null)):n&&(n.d(1),n=null)},d(r){r&&g(e),n&&n.d()}}}function $(l){let e;return{c(){e=Q(l[8])},l(n){e=X(n,l[8])},m(n,r){w(n,e,r)},p(n,r){r&256&&Y(e,n[8])},d(n){n&&g(e)}}}function oe(l){let e,n,r,i,_;const t=[te,ee],s=[];function f(a,u){return a[1][1]?0:1}e=f(l),n=s[e]=t[e](l);let o=l[6]&&N(l);return{c(){n.c(),r=W(),o&&o.c(),i=m()},l(a){n.l(a),r=F(a),o&&o.l(a),i=m()},m(a,u){s[e].m(a,u),w(a,r,u),o&&o.m(a,u),w(a,i,u),_=!0},p(a,[u]){let A=e;e=f(a),e===A?s[e].p(a,u):(P(),p(s[A],1,1,()=>{s[A]=null}),L(),n=s[e],n?n.p(a,u):(n=s[e]=t[e](a),n.c()),h(n,1),n.m(r.parentNode,r)),a[6]?o?o.p(a,u):(o=N(a),o.c(),o.m(i.parentNode,i)):o&&(o.d(1),o=null)},i(a){_||(h(n),_=!0)},o(a){p(n),_=!1},d(a){s[e].d(a),a&&g(r),o&&o.d(a),a&&g(i)}}}function le(l,e,n){let{stores:r}=e,{page:i}=e,{constructors:_}=e,{components:t=[]}=e,{form:s}=e,{data_0:f=null}=e,{data_1:o=null}=e,{data_2:a=null}=e;G(r.page.notify);let u=!1,A=!1,T=null;H(()=>{const c=r.page.subscribe(()=>{u&&(n(7,A=!0),n(8,T=document.title||"untitled page"))});return n(6,u=!0),c});function S(c){D[c?"unshift":"push"](()=>{t[2]=c,n(0,t)})}function y(c){D[c?"unshift":"push"](()=>{t[1]=c,n(0,t)})}function B(c){D[c?"unshift":"push"](()=>{t[1]=c,n(0,t)})}function C(c){D[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}function j(c){D[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}return l.$$set=c=>{"stores"in c&&n(9,r=c.stores),"page"in c&&n(10,i=c.page),"constructors"in c&&n(1,_=c.constructors),"components"in c&&n(0,t=c.components),"form"in c&&n(2,s=c.form),"data_0"in c&&n(3,f=c.data_0),"data_1"in c&&n(4,o=c.data_1),"data_2"in c&&n(5,a=c.data_2)},l.$$.update=()=>{l.$$.dirty&1536&&r.page.set(i)},[t,_,s,f,o,a,u,A,T,r,i,S,y,B,C,j]}class _e extends q{constructor(e){super(),U(this,e,le,oe,z,{stores:9,page:10,constructors:1,components:0,form:2,data_0:3,data_1:4,data_2:5})}}const ce=[()=>d(()=>import("../chunks/0.135b2290.js"),["../chunks/0.135b2290.js","../chunks/_layout.da46b06b.js","./_layout.svelte.926ef413.js","../chunks/index.963f39ba.js","../assets/_layout.aad15a8a.css"],import.meta.url),()=>d(()=>import("../chunks/1.c8f78756.js"),["../chunks/1.c8f78756.js","./_error.svelte.491781ac.js","../chunks/index.963f39ba.js","../chunks/Footer.86072d99.js","../chunks/Socials.51dbce5a.js","../assets/Socials.90829a02.css","../chunks/index.71f580a9.js","../assets/Footer.d22ee075.css","../chunks/Button.c88cc32a.js","../chunks/regex.7dfa9b23.js","../assets/Button.df0e54d0.css","../chunks/error.88d56f25.js","../assets/_error.e3eb7d9c.css"],import.meta.url),()=>d(()=>import("../chunks/2.643e0c8e.js"),["../chunks/2.643e0c8e.js","./(blog-article)-layout.svelte.552a7089.js","../chunks/index.963f39ba.js","../chunks/Footer.86072d99.js","../chunks/Socials.51dbce5a.js","../assets/Socials.90829a02.css","../chunks/index.71f580a9.js","../assets/Footer.d22ee075.css","../chunks/ContentSection.e661d46d.js","../chunks/regex.7dfa9b23.js","../chunks/Image.a2141873.js","../assets/Image.0954db74.css","../assets/ContentSection.ebb4e843.css","../chunks/meta.65863fbf.js","../assets/_layout.52712246.css"],import.meta.url),()=>d(()=>import("../chunks/3.306cd432.js"),["../chunks/3.306cd432.js","./(waves)-layout.svelte.ae1baf34.js","../chunks/index.963f39ba.js","../chunks/Footer.86072d99.js","../chunks/Socials.51dbce5a.js","../assets/Socials.90829a02.css","../chunks/index.71f580a9.js","../assets/Footer.d22ee075.css","../chunks/meta.65863fbf.js","../assets/_layout.4c4b0438.css"],import.meta.url),()=>d(()=>import("../chunks/4.70707f12.js"),["../chunks/4.70707f12.js","./(blog-article)-blog-posts-page.md.f351eda0.js","../chunks/index.963f39ba.js","../chunks/CodeBlock.d6ac5a85.js","../assets/CodeBlock.cb0c12be.css","../chunks/Image.a2141873.js","../assets/Image.0954db74.css","../assets/Callout.f5800320.css"],import.meta.url),()=>d(()=>import("../chunks/5.203ce0e8.js"),["../chunks/5.203ce0e8.js","./(blog-article)-customization-page.md.3533e19a.js","../chunks/index.963f39ba.js"],import.meta.url),()=>d(()=>import("../chunks/6.95213c83.js"),["../chunks/6.95213c83.js","./(blog-article)-oink-page.md.3d4e3640.js","../chunks/index.963f39ba.js","../chunks/Image.a2141873.js","../assets/Image.0954db74.css","../assets/_page.aed9cb66.css","../assets/Callout.f5800320.css","../assets/CodeBlock.cb0c12be.css","../assets/SparklingHighlight.65de18f8.css"],import.meta.url),()=>d(()=>import("../chunks/7.8a13cb78.js"),["../chunks/7.8a13cb78.js","./(blog-article)-project-structure-page.md.a69c3ea5.js","../chunks/index.963f39ba.js","../chunks/CodeBlock.d6ac5a85.js","../assets/CodeBlock.cb0c12be.css"],import.meta.url),()=>d(()=>import("../chunks/8.73bf2ff5.js"),["../chunks/8.73bf2ff5.js","./(blog-article)-roger-roger-page.md.b45ea0c5.js","../chunks/index.963f39ba.js","../chunks/Image.a2141873.js","../assets/Image.0954db74.css","../chunks/Button.c88cc32a.js","../chunks/regex.7dfa9b23.js","../assets/Button.df0e54d0.css","../assets/_page.74ba00a5.css"],import.meta.url),()=>d(()=>import("../chunks/9.63a6fb74.js"),["../chunks/9.63a6fb74.js","./(waves)-page.svelte.7e8e6d6a.js","../chunks/index.963f39ba.js","../chunks/Button.c88cc32a.js","../chunks/regex.7dfa9b23.js","../assets/Button.df0e54d0.css","../chunks/Socials.51dbce5a.js","../assets/Socials.90829a02.css","../chunks/Image.a2141873.js","../assets/Image.0954db74.css","../chunks/ContentSection.e661d46d.js","../assets/ContentSection.ebb4e843.css","../assets/_page.ebe08205.css","../assets/SparklingHighlight.65de18f8.css"],import.meta.url),()=>d(()=>import("../chunks/10.b05caa6a.js"),["../chunks/10.b05caa6a.js","./(waves)-404-page.svelte.36f41b4b.js","../chunks/index.963f39ba.js","../chunks/Button.c88cc32a.js","../chunks/regex.7dfa9b23.js","../assets/Button.df0e54d0.css","../chunks/error.88d56f25.js","../assets/_error.e3eb7d9c.css"],import.meta.url),()=>d(()=>import("../chunks/11.e7616845.js"),["../chunks/11.e7616845.js","./(waves)-projects-page.svelte.fb2960c1.js","../chunks/index.963f39ba.js","../chunks/ContentSection.e661d46d.js","../chunks/regex.7dfa9b23.js","../chunks/Image.a2141873.js","../assets/Image.0954db74.css","../assets/ContentSection.ebb4e843.css","../assets/_page.f207d5be.css"],import.meta.url)],ue=[2],me={"/(waves)":[-10,[3]],"/(waves)/404":[10,[3]],"/(blog-article)/blog-posts":[4,[2]],"/(blog-article)/customization":[5,[2]],"/(blog-article)/oink":[6,[2]],"/(blog-article)/project-structure":[7,[2]],"/(waves)/projects":[-12,[3]],"/(blog-article)/roger-roger":[8,[2]]},pe={handleError:({error:l})=>{console.error(l)}};export{me as dictionary,pe as hooks,ae as matchers,ce as nodes,_e as root,ue as server_loads};
diff --git a/_app/immutable/entry/start.b02acea1.js b/_app/immutable/entry/start.b02acea1.js
new file mode 100644
index 0000000..baa3b00
--- /dev/null
+++ b/_app/immutable/entry/start.b02acea1.js
@@ -0,0 +1,3 @@
+import{o as Fe,t as le}from"../chunks/index.963f39ba.js";import{w as ke}from"../chunks/index.71f580a9.js";function at(e,a){return e==="/"||a==="ignore"?e:a==="never"?e.endsWith("/")?e.slice(0,-1):e:a==="always"&&!e.endsWith("/")?e+"/":e}function rt(e){return e.split("%25").map(decodeURI).join("%25")}function ot(e){for(const a in e)e[a]=decodeURIComponent(e[a]);return e}const it=["href","pathname","search","searchParams","toString","toJSON"];function st(e,a){const i=new URL(e);for(const s of it){let u=i[s];Object.defineProperty(i,s,{get(){return a(),u},enumerable:!0,configurable:!0})}return lt(i),i}function lt(e){Object.defineProperty(e,"hash",{get(){throw new Error("Cannot access event.url.hash. Consider using `$page.url.hash` inside a component instead")}})}const ct="/__data.json";function ft(e){return e.replace(/\/$/,"")+ct}var Ye;const M=((Ye=globalThis.__sveltekit_3lmy3c)==null?void 0:Ye.base)??"";var We;const ut=((We=globalThis.__sveltekit_3lmy3c)==null?void 0:We.assets)??M,dt="1731856412894",Xe="sveltekit:snapshot",Ze="sveltekit:scroll",V="sveltekit:index",ue={tap:1,hover:2,viewport:3,eager:4,off:-1};function Me(e){let a=e.baseURI;if(!a){const i=e.getElementsByTagName("base");a=i.length?i[0].href:e.URL}return a}function ee(){return{x:pageXOffset,y:pageYOffset}}function z(e,a){return e.getAttribute(`data-sveltekit-${a}`)}const Ge={...ue,"":ue.hover};function Qe(e){let a=e.assignedSlot??e.parentNode;return(a==null?void 0:a.nodeType)===11&&(a=a.host),a}function He(e,a){for(;e&&e!==a;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=Qe(e)}}function _e(e,a){let i;try{i=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const s=e instanceof SVGAElement?e.target.baseVal:e.target,u=!i||!!s||fe(i,a)||(e.getAttribute("rel")||"").split(/\s+/).includes("external")||e.hasAttribute("download");return{url:i,external:u,target:s}}function ce(e){let a=null,i=null,s=null,u=null,d=null,v=null,c=e;for(;c&&c!==document.documentElement;)s===null&&(s=z(c,"preload-code")),u===null&&(u=z(c,"preload-data")),a===null&&(a=z(c,"keepfocus")),i===null&&(i=z(c,"noscroll")),d===null&&(d=z(c,"reload")),v===null&&(v=z(c,"replacestate")),c=Qe(c);return{preload_code:Ge[s??"off"],preload_data:Ge[u??"off"],keep_focus:a==="off"?!1:a===""?!0:null,noscroll:i==="off"?!1:i===""?!0:null,reload:d==="off"?!1:d===""?!0:null,replace_state:v==="off"?!1:v===""?!0:null}}function Be(e){const a=ke(e);let i=!0;function s(){i=!0,a.update(v=>v)}function u(v){i=!1,a.set(v)}function d(v){let c;return a.subscribe(m=>{(c===void 0||i&&m!==c)&&v(c=m)})}return{notify:s,set:u,subscribe:d}}function pt(){const{set:e,subscribe:a}=ke(!1);let i;async function s(){clearTimeout(i);const u=await fetch(`${ut}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(u.ok){const v=(await u.json()).version!==dt;return v&&(e(!0),clearTimeout(i)),v}else throw new Error(`Version check failed: ${u.status}`)}return{subscribe:a,check:s}}function fe(e,a){return e.origin!==location.origin||!e.pathname.startsWith(a)}function et(e){try{return JSON.parse(sessionStorage[e])}catch{}}function Je(e,a){const i=JSON.stringify(a);try{sessionStorage[e]=i}catch{}}function ht(...e){let a=5381;for(const i of e)if(typeof i=="string"){let s=i.length;for(;s;)a=a*33^i.charCodeAt(--s)}else if(ArrayBuffer.isView(i)){const s=new Uint8Array(i.buffer,i.byteOffset,i.byteLength);let u=s.length;for(;u;)a=a*33^s[--u]}else throw new TypeError("value must be a string or TypedArray");return(a>>>0).toString(36)}const de=window.fetch;window.fetch=(e,a)=>((e instanceof Request?e.method:(a==null?void 0:a.method)||"GET")!=="GET"&&ne.delete(Se(e)),de(e,a));const ne=new Map;function gt(e,a){const i=Se(e,a),s=document.querySelector(i);if(s!=null&&s.textContent){const{body:u,...d}=JSON.parse(s.textContent),v=s.getAttribute("data-ttl");return v&&ne.set(i,{body:u,init:d,ttl:1e3*Number(v)}),Promise.resolve(new Response(u,d))}return de(e,a)}function mt(e,a,i){if(ne.size>0){const s=Se(e,i),u=ne.get(s);if(u){if(performance.now()<u.ttl&&["default","force-cache","only-if-cached",void 0].includes(i==null?void 0:i.cache))return new Response(u.body,u.init);ne.delete(s)}}return de(a,i)}function Se(e,a){let s=`script[data-sveltekit-fetched][data-url=${JSON.stringify(e instanceof Request?e.url:e)}]`;if(a!=null&&a.headers||a!=null&&a.body){const u=[];a.headers&&u.push([...new Headers(a.headers)].join(",")),a.body&&(typeof a.body=="string"||ArrayBuffer.isView(a.body))&&u.push(a.body),s+=`[data-hash="${ht(...u)}"]`}return s}const yt=/^(\[)?(\.\.\.)?(\w+)(?:=(\w+))?(\])?$/;function wt(e){const a=[];return{pattern:e==="/"?/^\/$/:new RegExp(`^${bt(e).map(s=>{const u=/^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(s);if(u)return a.push({name:u[1],matcher:u[2],optional:!1,rest:!0,chained:!0}),"(?:/(.*))?";const d=/^\[\[(\w+)(?:=(\w+))?\]\]$/.exec(s);if(d)return a.push({name:d[1],matcher:d[2],optional:!0,rest:!1,chained:!0}),"(?:/([^/]+))?";if(!s)return;const v=s.split(/\[(.+?)\](?!\])/);return"/"+v.map((m,y)=>{if(y%2){if(m.startsWith("x+"))return be(String.fromCharCode(parseInt(m.slice(2),16)));if(m.startsWith("u+"))return be(String.fromCharCode(...m.slice(2).split("-").map(I=>parseInt(I,16))));const g=yt.exec(m);if(!g)throw new Error(`Invalid param: ${m}. Params and matcher names can only have underscores and alphanumeric characters.`);const[,$,U,k,O]=g;return a.push({name:k,matcher:O,optional:!!$,rest:!!U,chained:U?y===1&&v[0]==="":!1}),U?"(.*?)":$?"([^/]*)?":"([^/]+?)"}return be(m)}).join("")}).join("")}/?$`),params:a}}function _t(e){return!/^\([^)]+\)$/.test(e)}function bt(e){return e.slice(1).split("/").filter(_t)}function vt(e,a,i){const s={},u=e.slice(1);let d=0;for(let v=0;v<a.length;v+=1){const c=a[v],m=u[v-d];if(c.chained&&c.rest&&d){s[c.name]=u.slice(v-d,v+1).filter(y=>y).join("/"),d=0;continue}if(m===void 0){c.rest&&(s[c.name]="");continue}if(!c.matcher||i[c.matcher](m)){s[c.name]=m;const y=a[v+1],g=u[v+1];y&&!y.rest&&y.optional&&g&&(d=0);continue}if(c.optional&&c.chained){d++;continue}return}if(!d)return s}function be(e){return e.normalize().replace(/[[\]]/g,"\\$&").replace(/%/g,"%25").replace(/\//g,"%2[Ff]").replace(/\?/g,"%3[Ff]").replace(/#/g,"%23").replace(/[.*+?^${}()|\\]/g,"\\$&")}function Et({nodes:e,server_loads:a,dictionary:i,matchers:s}){const u=new Set(a);return Object.entries(i).map(([c,[m,y,g]])=>{const{pattern:$,params:U}=wt(c),k={id:c,exec:O=>{const I=$.exec(O);if(I)return vt(I,U,s)},errors:[1,...g||[]].map(O=>e[O]),layouts:[0,...y||[]].map(v),leaf:d(m)};return k.errors.length=k.layouts.length=Math.max(k.errors.length,k.layouts.length),k});function d(c){const m=c<0;return m&&(c=~c),[m,e[c]]}function v(c){return c===void 0?c:[u.has(c),e[c]]}}let te=class{constructor(a,i){this.status=a,typeof i=="string"?this.body={message:i}:i?this.body=i:this.body={message:`Error: ${a}`}}toString(){return JSON.stringify(this.body)}},Ke=class{constructor(a,i){this.status=a,this.location=i}};function kt(e){e.client}const F={url:Be({}),page:Be({}),navigating:ke(null),updated:pt()};async function St(e){var a;for(const i in e)if(typeof((a=e[i])==null?void 0:a.then)=="function")return Object.fromEntries(await Promise.all(Object.entries(e).map(async([s,u])=>[s,await u])));return e}Object.getOwnPropertyNames(Object.prototype).sort().join("\0");const Rt=-1,At=-2,Lt=-3,It=-4,Ut=-5,Ot=-6;function Pt(e,a){if(typeof e=="number")return u(e,!0);if(!Array.isArray(e)||e.length===0)throw new Error("Invalid input");const i=e,s=Array(i.length);function u(d,v=!1){if(d===Rt)return;if(d===Lt)return NaN;if(d===It)return 1/0;if(d===Ut)return-1/0;if(d===Ot)return-0;if(v)throw new Error("Invalid input");if(d in s)return s[d];const c=i[d];if(!c||typeof c!="object")s[d]=c;else if(Array.isArray(c))if(typeof c[0]=="string"){const m=c[0],y=a==null?void 0:a[m];if(y)return s[d]=y(u(c[1]));switch(m){case"Date":s[d]=new Date(c[1]);break;case"Set":const g=new Set;s[d]=g;for(let k=1;k<c.length;k+=1)g.add(u(c[k]));break;case"Map":const $=new Map;s[d]=$;for(let k=1;k<c.length;k+=2)$.set(u(c[k]),u(c[k+1]));break;case"RegExp":s[d]=new RegExp(c[1],c[2]);break;case"Object":s[d]=Object(c[1]);break;case"BigInt":s[d]=BigInt(c[1]);break;case"null":const U=Object.create(null);s[d]=U;for(let k=1;k<c.length;k+=2)U[c[k]]=u(c[k+1]);break;default:throw new Error(`Unknown type ${m}`)}}else{const m=new Array(c.length);s[d]=m;for(let y=0;y<c.length;y+=1){const g=c[y];g!==At&&(m[y]=u(g))}}else{const m={};s[d]=m;for(const y in c){const g=c[y];m[y]=u(g)}}return s[d]}return u(0)}function Nt(e){return e.filter(a=>a!=null)}const J=et(Ze)??{},Q=et(Xe)??{};function ve(e){J[e]=ee()}function Tt(e,a){var Ce;const i=Et(e),s=e.nodes[0],u=e.nodes[1];s(),u();const d=document.documentElement,v=[],c=[];let m=null;const y={before_navigate:[],after_navigate:[]};let g={branch:[],error:null,url:null},$=!1,U=!1,k=!0,O=!1,I=!1,Y=!1,G=!1,q,T=(Ce=history.state)==null?void 0:Ce[V];T||(T=Date.now(),history.replaceState({...history.state,[V]:T},"",location.href));const pe=J[T];pe&&(history.scrollRestoration="manual",scrollTo(pe.x,pe.y));let H,Re,ae;async function Ae(){ae=ae||Promise.resolve(),await ae,ae=null;const n=new URL(location.href),t=X(n,!0);m=null,await Pe(t,n,[])}function Le(n){c.some(t=>t==null?void 0:t.snapshot)&&(Q[n]=c.map(t=>{var o;return(o=t==null?void 0:t.snapshot)==null?void 0:o.capture()}))}function Ie(n){var t;(t=Q[n])==null||t.forEach((o,r)=>{var f,l;(l=(f=c[r])==null?void 0:f.snapshot)==null||l.restore(o)})}function Ue(){ve(T),Je(Ze,J),Le(T),Je(Xe,Q)}async function he(n,{noScroll:t=!1,replaceState:o=!1,keepFocus:r=!1,state:f={},invalidateAll:l=!1},h,p){return typeof n=="string"&&(n=new URL(n,Me(document))),se({url:n,scroll:t?ee():null,keepfocus:r,redirect_chain:h,details:{state:f,replaceState:o},nav_token:p,accepted:()=>{l&&(G=!0)},blocked:()=>{},type:"goto"})}async function Oe(n){return m={id:n.id,promise:je(n).then(t=>(t.type==="loaded"&&t.state.error&&(m=null),t))},m.promise}async function re(...n){const o=i.filter(r=>n.some(f=>r.exec(f))).map(r=>Promise.all([...r.layouts,r.leaf].map(f=>f==null?void 0:f[1]())));await Promise.all(o)}async function Pe(n,t,o,r,f,l={},h){var w,_,A;Re=l;let p=n&&await je(n);if(!p){if(fe(t,M))return await K(t);p=await De(t,{id:null},await Z(new Error(`Not found: ${t.pathname}`),{url:t,params:{},route:{id:null}}),404)}if(t=(n==null?void 0:n.url)||t,Re!==l)return!1;if(p.type==="redirect")if(o.length>10||o.includes(t.pathname))p=await oe({status:500,error:await Z(new Error("Redirect loop"),{url:t,params:{},route:{id:null}}),url:t,route:{id:null}});else return he(new URL(p.location,t).href,{},[...o,t.pathname],l),!1;else((w=p.props.page)==null?void 0:w.status)>=400&&await F.updated.check()&&await K(t);if(v.length=0,G=!1,O=!0,r&&(ve(r),Le(r)),(_=p.props.page)!=null&&_.url&&p.props.page.url.pathname!==t.pathname&&(t.pathname=(A=p.props.page)==null?void 0:A.url.pathname),f&&f.details){const{details:E}=f,L=E.replaceState?0:1;if(E.state[V]=T+=L,history[E.replaceState?"replaceState":"pushState"](E.state,"",t),!E.replaceState){let R=T+1;for(;Q[R]||J[R];)delete Q[R],delete J[R],R+=1}}if(m=null,U?(g=p.state,p.props.page&&(p.props.page.url=t),q.$set(p.props)):Ne(p),f){const{scroll:E,keepfocus:L}=f,{activeElement:R}=document;if(await le(),k){const P=t.hash&&document.getElementById(decodeURIComponent(t.hash.slice(1)));E?scrollTo(E.x,E.y):P?P.scrollIntoView():scrollTo(0,0)}const b=document.activeElement!==R&&document.activeElement!==document.body;!L&&!b&&await Ee()}else await le();k=!0,p.props.page&&(H=p.props.page),h&&h(),O=!1}function Ne(n){var r;g=n.state;const t=document.querySelector("style[data-sveltekit]");t&&t.remove(),H=n.props.page,q=new e.root({target:a,props:{...n.props,stores:F,components:c},hydrate:!0}),Ie(T);const o={from:null,to:{params:g.params,route:{id:((r=g.route)==null?void 0:r.id)??null},url:new URL(location.href)},willUnload:!1,type:"enter"};y.after_navigate.forEach(f=>f(o)),U=!0}async function W({url:n,params:t,branch:o,status:r,error:f,route:l,form:h}){let p="never";for(const R of o)(R==null?void 0:R.slash)!==void 0&&(p=R.slash);n.pathname=at(n.pathname,p),n.search=n.search;const w={type:"loaded",state:{url:n,params:t,branch:o,error:f,route:l},props:{constructors:Nt(o).map(R=>R.node.component)}};h!==void 0&&(w.props.form=h);let _={},A=!H,E=0;for(let R=0;R<Math.max(o.length,g.branch.length);R+=1){const b=o[R],P=g.branch[R];(b==null?void 0:b.data)!==(P==null?void 0:P.data)&&(A=!0),b&&(_={..._,...b.data},A&&(w.props[`data_${E}`]=_),E+=1)}return(!g.url||n.href!==g.url.href||g.error!==f||h!==void 0&&h!==H.form||A)&&(w.props.page={error:f,params:t,route:{id:(l==null?void 0:l.id)??null},status:r,url:new URL(n),form:h??null,data:A?_:H.data}),w}async function ge({loader:n,parent:t,url:o,params:r,route:f,server_data_node:l}){var _,A,E;let h=null;const p={dependencies:new Set,params:new Set,parent:!1,route:!1,url:!1},w=await n();if((_=w.universal)!=null&&_.load){let L=function(...b){for(const P of b){const{href:D}=new URL(P,o);p.dependencies.add(D)}};const R={route:{get id(){return p.route=!0,f.id}},params:new Proxy(r,{get:(b,P)=>(p.params.add(P),b[P])}),data:(l==null?void 0:l.data)??null,url:st(o,()=>{p.url=!0}),async fetch(b,P){let D;b instanceof Request?(D=b.url,P={body:b.method==="GET"||b.method==="HEAD"?void 0:await b.blob(),cache:b.cache,credentials:b.credentials,headers:b.headers,integrity:b.integrity,keepalive:b.keepalive,method:b.method,mode:b.mode,redirect:b.redirect,referrer:b.referrer,referrerPolicy:b.referrerPolicy,signal:b.signal,...P}):D=b;const C=new URL(D,o);return L(C.href),C.origin===o.origin&&(D=C.href.slice(o.origin.length)),U?mt(D,C.href,P):gt(D,P)},setHeaders:()=>{},depends:L,parent(){return p.parent=!0,t()}};h=await w.universal.load.call(null,R)??null,h=h?await St(h):null}return{node:w,loader:n,server:l,universal:(A=w.universal)!=null&&A.load?{type:"data",data:h,uses:p}:null,data:h??(l==null?void 0:l.data)??null,slash:((E=w.universal)==null?void 0:E.trailingSlash)??(l==null?void 0:l.slash)}}function Te(n,t,o,r,f){if(G)return!0;if(!r)return!1;if(r.parent&&n||r.route&&t||r.url&&o)return!0;for(const l of r.params)if(f[l]!==g.params[l])return!0;for(const l of r.dependencies)if(v.some(h=>h(new URL(l))))return!0;return!1}function me(n,t){return(n==null?void 0:n.type)==="data"?n:(n==null?void 0:n.type)==="skip"?t??null:null}async function je({id:n,invalidating:t,url:o,params:r,route:f}){if((m==null?void 0:m.id)===n)return m.promise;const{errors:l,layouts:h,leaf:p}=f,w=[...h,p];l.forEach(S=>S==null?void 0:S().catch(()=>{})),w.forEach(S=>S==null?void 0:S[1]().catch(()=>{}));let _=null;const A=g.url?n!==g.url.pathname+g.url.search:!1,E=g.route?f.id!==g.route.id:!1;let L=!1;const R=w.map((S,x)=>{var B;const N=g.branch[x],j=!!(S!=null&&S[0])&&((N==null?void 0:N.loader)!==S[1]||Te(L,E,A,(B=N.server)==null?void 0:B.uses,r));return j&&(L=!0),j});if(R.some(Boolean)){try{_=await ze(o,R)}catch(S){return oe({status:S instanceof te?S.status:500,error:await Z(S,{url:o,params:r,route:{id:f.id}}),url:o,route:f})}if(_.type==="redirect")return _}const b=_==null?void 0:_.nodes;let P=!1;const D=w.map(async(S,x)=>{var ye;if(!S)return;const N=g.branch[x],j=b==null?void 0:b[x];if((!j||j.type==="skip")&&S[1]===(N==null?void 0:N.loader)&&!Te(P,E,A,(ye=N.universal)==null?void 0:ye.uses,r))return N;if(P=!0,(j==null?void 0:j.type)==="error")throw j;return ge({loader:S[1],url:o,params:r,route:f,parent:async()=>{var qe;const Ve={};for(let we=0;we<x;we+=1)Object.assign(Ve,(qe=await D[we])==null?void 0:qe.data);return Ve},server_data_node:me(j===void 0&&S[0]?{type:"skip"}:j??null,S[0]?N==null?void 0:N.server:void 0)})});for(const S of D)S.catch(()=>{});const C=[];for(let S=0;S<w.length;S+=1)if(w[S])try{C.push(await D[S])}catch(x){if(x instanceof Ke)return{type:"redirect",location:x.location};let N=500,j;if(b!=null&&b.includes(x))N=x.status??N,j=x.error;else if(x instanceof te)N=x.status,j=x.body;else{if(await F.updated.check())return await K(o);j=await Z(x,{params:r,url:o,route:{id:f.id}})}const B=await $e(S,C,l);return B?await W({url:o,params:r,branch:C.slice(0,B.idx).concat(B.node),status:N,error:j,route:f}):await De(o,{id:f.id},j,N)}else C.push(void 0);return await W({url:o,params:r,branch:C,status:200,error:null,route:f,form:t?void 0:null})}async function $e(n,t,o){for(;n--;)if(o[n]){let r=n;for(;!t[r];)r-=1;try{return{idx:r+1,node:{node:await o[n](),loader:o[n],data:{},server:null,universal:null}}}catch{continue}}}async function oe({status:n,error:t,url:o,route:r}){const f={};let l=null;if(e.server_loads[0]===0)try{const _=await ze(o,[!0]);if(_.type!=="data"||_.nodes[0]&&_.nodes[0].type!=="data")throw 0;l=_.nodes[0]??null}catch{(o.origin!==location.origin||o.pathname!==location.pathname||$)&&await K(o)}const p=await ge({loader:s,url:o,params:f,route:r,parent:()=>Promise.resolve({}),server_data_node:me(l)}),w={node:await u(),loader:u,universal:null,server:null,data:null};return await W({url:o,params:f,branch:[p,w],status:n,error:t,route:null})}function X(n,t){if(fe(n,M))return;const o=ie(n);for(const r of i){const f=r.exec(o);if(f)return{id:n.pathname+n.search,invalidating:t,route:r,params:ot(f),url:n}}}function ie(n){return rt(n.pathname.slice(M.length)||"/")}function xe({url:n,type:t,intent:o,delta:r}){var p,w;let f=!1;const l={from:{params:g.params,route:{id:((p=g.route)==null?void 0:p.id)??null},url:g.url},to:{params:(o==null?void 0:o.params)??null,route:{id:((w=o==null?void 0:o.route)==null?void 0:w.id)??null},url:n},willUnload:!o,type:t};r!==void 0&&(l.delta=r);const h={...l,cancel:()=>{f=!0}};return I||y.before_navigate.forEach(_=>_(h)),f?null:l}async function se({url:n,scroll:t,keepfocus:o,redirect_chain:r,details:f,type:l,delta:h,nav_token:p,accepted:w,blocked:_}){const A=X(n,!1),E=xe({url:n,type:l,delta:h,intent:A});if(!E){_();return}const L=T;w(),I=!0,U&&F.navigating.set(E),await Pe(A,n,r,L,{scroll:t,keepfocus:o,details:f},p,()=>{I=!1,y.after_navigate.forEach(R=>R(E)),F.navigating.set(null)})}async function De(n,t,o,r){return n.origin===location.origin&&n.pathname===location.pathname&&!$?await oe({status:r,error:o,url:n,route:t}):await K(n)}function K(n){return location.href=n.href,new Promise(()=>{})}function nt(){let n;d.addEventListener("mousemove",l=>{const h=l.target;clearTimeout(n),n=setTimeout(()=>{r(h,2)},20)});function t(l){r(l.composedPath()[0],1)}d.addEventListener("mousedown",t),d.addEventListener("touchstart",t,{passive:!0});const o=new IntersectionObserver(l=>{for(const h of l)h.isIntersecting&&(re(ie(new URL(h.target.href))),o.unobserve(h.target))},{threshold:0});function r(l,h){const p=He(l,d);if(!p)return;const{url:w,external:_}=_e(p,M);if(_)return;const A=ce(p);if(!A.reload)if(h<=A.preload_data){const E=X(w,!1);E&&Oe(E)}else h<=A.preload_code&&re(ie(w))}function f(){o.disconnect();for(const l of d.querySelectorAll("a")){const{url:h,external:p}=_e(l,M);if(p)continue;const w=ce(l);w.reload||(w.preload_code===ue.viewport&&o.observe(l),w.preload_code===ue.eager&&re(ie(h)))}}y.after_navigate.push(f),f()}function Z(n,t){return n instanceof te?n.body:e.hooks.handleError({error:n,event:t})??{message:t.route.id!=null?"Internal Error":"Not Found"}}return{after_navigate:n=>{Fe(()=>(y.after_navigate.push(n),()=>{const t=y.after_navigate.indexOf(n);y.after_navigate.splice(t,1)}))},before_navigate:n=>{Fe(()=>(y.before_navigate.push(n),()=>{const t=y.before_navigate.indexOf(n);y.before_navigate.splice(t,1)}))},disable_scroll_handling:()=>{(O||!U)&&(k=!1)},goto:(n,t={})=>he(n,t,[]),invalidate:n=>{if(typeof n=="function")v.push(n);else{const{href:t}=new URL(n,location.href);v.push(o=>o.href===t)}return Ae()},invalidateAll:()=>(G=!0,Ae()),preload_data:async n=>{const t=new URL(n,Me(document)),o=X(t,!1);if(!o)throw new Error(`Attempted to preload a URL that does not belong to this app: ${t}`);await Oe(o)},preload_code:re,apply_action:async n=>{if(n.type==="error"){const t=new URL(location.href),{branch:o,route:r}=g;if(!r)return;const f=await $e(g.branch.length,o,r.errors);if(f){const l=await W({url:t,params:g.params,branch:o.slice(0,f.idx).concat(f.node),status:n.status??500,error:n.error,route:r});g=l.state,q.$set(l.props),le().then(Ee)}}else n.type==="redirect"?he(n.location,{invalidateAll:!0},[]):(q.$set({form:null,page:{...H,form:n.data,status:n.status}}),await le(),q.$set({form:n.data}),n.type==="success"&&Ee())},_start_router:()=>{var n;history.scrollRestoration="manual",addEventListener("beforeunload",t=>{var r;let o=!1;if(Ue(),!I){const f={from:{params:g.params,route:{id:((r=g.route)==null?void 0:r.id)??null},url:g.url},to:null,willUnload:!0,type:"leave",cancel:()=>o=!0};y.before_navigate.forEach(l=>l(f))}o?(t.preventDefault(),t.returnValue=""):history.scrollRestoration="auto"}),addEventListener("visibilitychange",()=>{document.visibilityState==="hidden"&&Ue()}),(n=navigator.connection)!=null&&n.saveData||nt(),d.addEventListener("click",t=>{if(t.button||t.which!==1||t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||t.defaultPrevented)return;const o=He(t.composedPath()[0],d);if(!o)return;const{url:r,external:f,target:l}=_e(o,M);if(!r)return;if(l==="_parent"||l==="_top"){if(window.parent!==window)return}else if(l&&l!=="_self")return;const h=ce(o);if(!(o instanceof SVGAElement)&&r.protocol!==location.protocol&&!(r.protocol==="https:"||r.protocol==="http:"))return;if(f||h.reload){xe({url:r,type:"link"})?I=!0:t.preventDefault();return}const[w,_]=r.href.split("#");if(_!==void 0&&w===location.href.split("#")[0]){Y=!0,ve(T),g.url=r,F.page.set({...H,url:r}),F.page.notify();return}se({url:r,scroll:h.noscroll?ee():null,keepfocus:h.keep_focus??!1,redirect_chain:[],details:{state:{},replaceState:h.replace_state??r.href===location.href},accepted:()=>t.preventDefault(),blocked:()=>t.preventDefault(),type:"link"})}),d.addEventListener("submit",t=>{if(t.defaultPrevented)return;const o=HTMLFormElement.prototype.cloneNode.call(t.target),r=t.submitter;if(((r==null?void 0:r.formMethod)||o.method)!=="get")return;const l=new URL((r==null?void 0:r.hasAttribute("formaction"))&&(r==null?void 0:r.formAction)||o.action);if(fe(l,M))return;const h=t.target,{keep_focus:p,noscroll:w,reload:_,replace_state:A}=ce(h);if(_)return;t.preventDefault(),t.stopPropagation();const E=new FormData(h),L=r==null?void 0:r.getAttribute("name");L&&E.append(L,(r==null?void 0:r.getAttribute("value"))??""),l.search=new URLSearchParams(E).toString(),se({url:l,scroll:w?ee():null,keepfocus:p??!1,redirect_chain:[],details:{state:{},replaceState:A??l.href===location.href},nav_token:{},accepted:()=>{},blocked:()=>{},type:"form"})}),addEventListener("popstate",async t=>{var o;if((o=t.state)!=null&&o[V]){if(t.state[V]===T)return;const r=J[t.state[V]];if(g.url.href.split("#")[0]===location.href.split("#")[0]){J[T]=ee(),T=t.state[V],scrollTo(r.x,r.y);return}const f=t.state[V]-T;let l=!1;await se({url:new URL(location.href),scroll:r,keepfocus:!1,redirect_chain:[],details:null,accepted:()=>{T=t.state[V]},blocked:()=>{history.go(-f),l=!0},type:"popstate",delta:f}),l||Ie(T)}}),addEventListener("hashchange",()=>{Y&&(Y=!1,history.replaceState({...history.state,[V]:++T},"",location.href))});for(const t of document.querySelectorAll("link"))t.rel==="icon"&&(t.href=t.href);addEventListener("pageshow",t=>{t.persisted&&F.navigating.set(null)})},_hydrate:async({status:n=200,error:t,node_ids:o,params:r,route:f,data:l,form:h})=>{$=!0;const p=new URL(location.href);({params:r={},route:f={id:null}}=X(p,!1)||{});let w;try{const _=o.map(async(A,E)=>{const L=l[E];return L!=null&&L.uses&&(L.uses=tt(L.uses)),ge({loader:e.nodes[A],url:p,params:r,route:f,parent:async()=>{const R={};for(let b=0;b<E;b+=1)Object.assign(R,(await _[b]).data);return R},server_data_node:me(L)})});w=await W({url:p,params:r,branch:await Promise.all(_),status:n,error:t,form:h,route:i.find(({id:A})=>A===f.id)??null})}catch(_){if(_ instanceof Ke){await K(new URL(_.location,location.href));return}w=await oe({status:_ instanceof te?_.status:500,error:await Z(_,{url:p,params:r,route:f}),url:p,route:f})}Ne(w)}}}async function ze(e,a){const i=new URL(e);i.pathname=ft(e.pathname),i.searchParams.append("x-sveltekit-invalidated",a.map(u=>u?"1":"").join("_"));const s=await de(i.href);if(!s.ok)throw new te(s.status,await s.json());return new Promise(async u=>{var g;const d=new Map,v=s.body.getReader(),c=new TextDecoder;function m($){return Pt($,{Promise:U=>new Promise((k,O)=>{d.set(U,{fulfil:k,reject:O})})})}let y="";for(;;){const{done:$,value:U}=await v.read();if($&&!y)break;for(y+=!U&&y?`
+`:c.decode(U);;){const k=y.indexOf(`
+`);if(k===-1)break;const O=JSON.parse(y.slice(0,k));if(y=y.slice(k+1),O.type==="redirect")return u(O);if(O.type==="data")(g=O.nodes)==null||g.forEach(I=>{(I==null?void 0:I.type)==="data"&&(I.uses=tt(I.uses),I.data=m(I.data))}),u(O);else if(O.type==="chunk"){const{id:I,data:Y,error:G}=O,q=d.get(I);d.delete(I),G?q.reject(m(G)):q.fulfil(m(Y))}}}})}function tt(e){return{dependencies:new Set((e==null?void 0:e.dependencies)??[]),params:new Set((e==null?void 0:e.params)??[]),parent:!!(e!=null&&e.parent),route:!!(e!=null&&e.route),url:!!(e!=null&&e.url)}}function Ee(){const e=document.querySelector("[autofocus]");if(e)e.focus();else{const a=document.body,i=a.getAttribute("tabindex");return a.tabIndex=-1,a.focus({preventScroll:!0}),i!==null?a.setAttribute("tabindex",i):a.removeAttribute("tabindex"),new Promise(s=>{setTimeout(()=>{var u;s((u=getSelection())==null?void 0:u.removeAllRanges())})})}}async function Ct(e,a,i){const s=Tt(e,a);kt({client:s}),i?await s._hydrate(i):s.goto(location.href,{replaceState:!0}),s._start_router()}export{Ct as start};
diff --git a/_app/immutable/entry/start.e776f058.js b/_app/immutable/entry/start.e776f058.js
deleted file mode 100644
index 1289ebe..0000000
--- a/_app/immutable/entry/start.e776f058.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import{o as Fe,t as le}from"../chunks/index.889feda2.js";import{w as ke}from"../chunks/index.c7d83eca.js";function at(e,a){return e==="/"||a==="ignore"?e:a==="never"?e.endsWith("/")?e.slice(0,-1):e:a==="always"&&!e.endsWith("/")?e+"/":e}function rt(e){return e.split("%25").map(decodeURI).join("%25")}function ot(e){for(const a in e)e[a]=decodeURIComponent(e[a]);return e}const it=["href","pathname","search","searchParams","toString","toJSON"];function st(e,a){const i=new URL(e);for(const s of it){let u=i[s];Object.defineProperty(i,s,{get(){return a(),u},enumerable:!0,configurable:!0})}return lt(i),i}function lt(e){Object.defineProperty(e,"hash",{get(){throw new Error("Cannot access event.url.hash. Consider using `$page.url.hash` inside a component instead")}})}const ct="/__data.json";function ft(e){return e.replace(/\/$/,"")+ct}var Ye;const M=((Ye=globalThis.__sveltekit_10x07x1)==null?void 0:Ye.base)??"";var We;const ut=((We=globalThis.__sveltekit_10x07x1)==null?void 0:We.assets)??M,dt="1731776483287",Xe="sveltekit:snapshot",Ze="sveltekit:scroll",V="sveltekit:index",ue={tap:1,hover:2,viewport:3,eager:4,off:-1};function Me(e){let a=e.baseURI;if(!a){const i=e.getElementsByTagName("base");a=i.length?i[0].href:e.URL}return a}function ee(){return{x:pageXOffset,y:pageYOffset}}function z(e,a){return e.getAttribute(`data-sveltekit-${a}`)}const Ge={...ue,"":ue.hover};function Qe(e){let a=e.assignedSlot??e.parentNode;return(a==null?void 0:a.nodeType)===11&&(a=a.host),a}function He(e,a){for(;e&&e!==a;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=Qe(e)}}function _e(e,a){let i;try{i=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI)}catch{}const s=e instanceof SVGAElement?e.target.baseVal:e.target,u=!i||!!s||fe(i,a)||(e.getAttribute("rel")||"").split(/\s+/).includes("external")||e.hasAttribute("download");return{url:i,external:u,target:s}}function ce(e){let a=null,i=null,s=null,u=null,d=null,v=null,c=e;for(;c&&c!==document.documentElement;)s===null&&(s=z(c,"preload-code")),u===null&&(u=z(c,"preload-data")),a===null&&(a=z(c,"keepfocus")),i===null&&(i=z(c,"noscroll")),d===null&&(d=z(c,"reload")),v===null&&(v=z(c,"replacestate")),c=Qe(c);return{preload_code:Ge[s??"off"],preload_data:Ge[u??"off"],keep_focus:a==="off"?!1:a===""?!0:null,noscroll:i==="off"?!1:i===""?!0:null,reload:d==="off"?!1:d===""?!0:null,replace_state:v==="off"?!1:v===""?!0:null}}function Be(e){const a=ke(e);let i=!0;function s(){i=!0,a.update(v=>v)}function u(v){i=!1,a.set(v)}function d(v){let c;return a.subscribe(m=>{(c===void 0||i&&m!==c)&&v(c=m)})}return{notify:s,set:u,subscribe:d}}function pt(){const{set:e,subscribe:a}=ke(!1);let i;async function s(){clearTimeout(i);const u=await fetch(`${ut}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(u.ok){const v=(await u.json()).version!==dt;return v&&(e(!0),clearTimeout(i)),v}else throw new Error(`Version check failed: ${u.status}`)}return{subscribe:a,check:s}}function fe(e,a){return e.origin!==location.origin||!e.pathname.startsWith(a)}function et(e){try{return JSON.parse(sessionStorage[e])}catch{}}function Je(e,a){const i=JSON.stringify(a);try{sessionStorage[e]=i}catch{}}function ht(...e){let a=5381;for(const i of e)if(typeof i=="string"){let s=i.length;for(;s;)a=a*33^i.charCodeAt(--s)}else if(ArrayBuffer.isView(i)){const s=new Uint8Array(i.buffer,i.byteOffset,i.byteLength);let u=s.length;for(;u;)a=a*33^s[--u]}else throw new TypeError("value must be a string or TypedArray");return(a>>>0).toString(36)}const de=window.fetch;window.fetch=(e,a)=>((e instanceof Request?e.method:(a==null?void 0:a.method)||"GET")!=="GET"&&ne.delete(Se(e)),de(e,a));const ne=new Map;function gt(e,a){const i=Se(e,a),s=document.querySelector(i);if(s!=null&&s.textContent){const{body:u,...d}=JSON.parse(s.textContent),v=s.getAttribute("data-ttl");return v&&ne.set(i,{body:u,init:d,ttl:1e3*Number(v)}),Promise.resolve(new Response(u,d))}return de(e,a)}function mt(e,a,i){if(ne.size>0){const s=Se(e,i),u=ne.get(s);if(u){if(performance.now()<u.ttl&&["default","force-cache","only-if-cached",void 0].includes(i==null?void 0:i.cache))return new Response(u.body,u.init);ne.delete(s)}}return de(a,i)}function Se(e,a){let s=`script[data-sveltekit-fetched][data-url=${JSON.stringify(e instanceof Request?e.url:e)}]`;if(a!=null&&a.headers||a!=null&&a.body){const u=[];a.headers&&u.push([...new Headers(a.headers)].join(",")),a.body&&(typeof a.body=="string"||ArrayBuffer.isView(a.body))&&u.push(a.body),s+=`[data-hash="${ht(...u)}"]`}return s}const yt=/^(\[)?(\.\.\.)?(\w+)(?:=(\w+))?(\])?$/;function wt(e){const a=[];return{pattern:e==="/"?/^\/$/:new RegExp(`^${bt(e).map(s=>{const u=/^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(s);if(u)return a.push({name:u[1],matcher:u[2],optional:!1,rest:!0,chained:!0}),"(?:/(.*))?";const d=/^\[\[(\w+)(?:=(\w+))?\]\]$/.exec(s);if(d)return a.push({name:d[1],matcher:d[2],optional:!0,rest:!1,chained:!0}),"(?:/([^/]+))?";if(!s)return;const v=s.split(/\[(.+?)\](?!\])/);return"/"+v.map((m,y)=>{if(y%2){if(m.startsWith("x+"))return be(String.fromCharCode(parseInt(m.slice(2),16)));if(m.startsWith("u+"))return be(String.fromCharCode(...m.slice(2).split("-").map(I=>parseInt(I,16))));const g=yt.exec(m);if(!g)throw new Error(`Invalid param: ${m}. Params and matcher names can only have underscores and alphanumeric characters.`);const[,j,U,k,O]=g;return a.push({name:k,matcher:O,optional:!!j,rest:!!U,chained:U?y===1&&v[0]==="":!1}),U?"(.*?)":j?"([^/]*)?":"([^/]+?)"}return be(m)}).join("")}).join("")}/?$`),params:a}}function _t(e){return!/^\([^)]+\)$/.test(e)}function bt(e){return e.slice(1).split("/").filter(_t)}function vt(e,a,i){const s={},u=e.slice(1);let d=0;for(let v=0;v<a.length;v+=1){const c=a[v],m=u[v-d];if(c.chained&&c.rest&&d){s[c.name]=u.slice(v-d,v+1).filter(y=>y).join("/"),d=0;continue}if(m===void 0){c.rest&&(s[c.name]="");continue}if(!c.matcher||i[c.matcher](m)){s[c.name]=m;const y=a[v+1],g=u[v+1];y&&!y.rest&&y.optional&&g&&(d=0);continue}if(c.optional&&c.chained){d++;continue}return}if(!d)return s}function be(e){return e.normalize().replace(/[[\]]/g,"\\$&").replace(/%/g,"%25").replace(/\//g,"%2[Ff]").replace(/\?/g,"%3[Ff]").replace(/#/g,"%23").replace(/[.*+?^${}()|\\]/g,"\\$&")}function Et({nodes:e,server_loads:a,dictionary:i,matchers:s}){const u=new Set(a);return Object.entries(i).map(([c,[m,y,g]])=>{const{pattern:j,params:U}=wt(c),k={id:c,exec:O=>{const I=j.exec(O);if(I)return vt(I,U,s)},errors:[1,...g||[]].map(O=>e[O]),layouts:[0,...y||[]].map(v),leaf:d(m)};return k.errors.length=k.layouts.length=Math.max(k.errors.length,k.layouts.length),k});function d(c){const m=c<0;return m&&(c=~c),[m,e[c]]}function v(c){return c===void 0?c:[u.has(c),e[c]]}}let te=class{constructor(a,i){this.status=a,typeof i=="string"?this.body={message:i}:i?this.body=i:this.body={message:`Error: ${a}`}}toString(){return JSON.stringify(this.body)}},Ke=class{constructor(a,i){this.status=a,this.location=i}};function kt(e){e.client}const F={url:Be({}),page:Be({}),navigating:ke(null),updated:pt()};async function St(e){var a;for(const i in e)if(typeof((a=e[i])==null?void 0:a.then)=="function")return Object.fromEntries(await Promise.all(Object.entries(e).map(async([s,u])=>[s,await u])));return e}Object.getOwnPropertyNames(Object.prototype).sort().join("\0");const Rt=-1,At=-2,Lt=-3,It=-4,Ut=-5,Ot=-6;function xt(e,a){if(typeof e=="number")return u(e,!0);if(!Array.isArray(e)||e.length===0)throw new Error("Invalid input");const i=e,s=Array(i.length);function u(d,v=!1){if(d===Rt)return;if(d===Lt)return NaN;if(d===It)return 1/0;if(d===Ut)return-1/0;if(d===Ot)return-0;if(v)throw new Error("Invalid input");if(d in s)return s[d];const c=i[d];if(!c||typeof c!="object")s[d]=c;else if(Array.isArray(c))if(typeof c[0]=="string"){const m=c[0],y=a==null?void 0:a[m];if(y)return s[d]=y(u(c[1]));switch(m){case"Date":s[d]=new Date(c[1]);break;case"Set":const g=new Set;s[d]=g;for(let k=1;k<c.length;k+=1)g.add(u(c[k]));break;case"Map":const j=new Map;s[d]=j;for(let k=1;k<c.length;k+=2)j.set(u(c[k]),u(c[k+1]));break;case"RegExp":s[d]=new RegExp(c[1],c[2]);break;case"Object":s[d]=Object(c[1]);break;case"BigInt":s[d]=BigInt(c[1]);break;case"null":const U=Object.create(null);s[d]=U;for(let k=1;k<c.length;k+=2)U[c[k]]=u(c[k+1]);break;default:throw new Error(`Unknown type ${m}`)}}else{const m=new Array(c.length);s[d]=m;for(let y=0;y<c.length;y+=1){const g=c[y];g!==At&&(m[y]=u(g))}}else{const m={};s[d]=m;for(const y in c){const g=c[y];m[y]=u(g)}}return s[d]}return u(0)}function Pt(e){return e.filter(a=>a!=null)}const J=et(Ze)??{},Q=et(Xe)??{};function ve(e){J[e]=ee()}function Nt(e,a){var Ce;const i=Et(e),s=e.nodes[0],u=e.nodes[1];s(),u();const d=document.documentElement,v=[],c=[];let m=null;const y={before_navigate:[],after_navigate:[]};let g={branch:[],error:null,url:null},j=!1,U=!1,k=!0,O=!1,I=!1,Y=!1,G=!1,q,N=(Ce=history.state)==null?void 0:Ce[V];N||(N=Date.now(),history.replaceState({...history.state,[V]:N},"",location.href));const pe=J[N];pe&&(history.scrollRestoration="manual",scrollTo(pe.x,pe.y));let H,Re,ae;async function Ae(){ae=ae||Promise.resolve(),await ae,ae=null;const n=new URL(location.href),t=X(n,!0);m=null,await xe(t,n,[])}function Le(n){c.some(t=>t==null?void 0:t.snapshot)&&(Q[n]=c.map(t=>{var o;return(o=t==null?void 0:t.snapshot)==null?void 0:o.capture()}))}function Ie(n){var t;(t=Q[n])==null||t.forEach((o,r)=>{var f,l;(l=(f=c[r])==null?void 0:f.snapshot)==null||l.restore(o)})}function Ue(){ve(N),Je(Ze,J),Le(N),Je(Xe,Q)}async function he(n,{noScroll:t=!1,replaceState:o=!1,keepFocus:r=!1,state:f={},invalidateAll:l=!1},h,p){return typeof n=="string"&&(n=new URL(n,Me(document))),se({url:n,scroll:t?ee():null,keepfocus:r,redirect_chain:h,details:{state:f,replaceState:o},nav_token:p,accepted:()=>{l&&(G=!0)},blocked:()=>{},type:"goto"})}async function Oe(n){return m={id:n.id,promise:Te(n).then(t=>(t.type==="loaded"&&t.state.error&&(m=null),t))},m.promise}async function re(...n){const o=i.filter(r=>n.some(f=>r.exec(f))).map(r=>Promise.all([...r.layouts,r.leaf].map(f=>f==null?void 0:f[1]())));await Promise.all(o)}async function xe(n,t,o,r,f,l={},h){var w,_,A;Re=l;let p=n&&await Te(n);if(!p){if(fe(t,M))return await K(t);p=await De(t,{id:null},await Z(new Error(`Not found: ${t.pathname}`),{url:t,params:{},route:{id:null}}),404)}if(t=(n==null?void 0:n.url)||t,Re!==l)return!1;if(p.type==="redirect")if(o.length>10||o.includes(t.pathname))p=await oe({status:500,error:await Z(new Error("Redirect loop"),{url:t,params:{},route:{id:null}}),url:t,route:{id:null}});else return he(new URL(p.location,t).href,{},[...o,t.pathname],l),!1;else((w=p.props.page)==null?void 0:w.status)>=400&&await F.updated.check()&&await K(t);if(v.length=0,G=!1,O=!0,r&&(ve(r),Le(r)),(_=p.props.page)!=null&&_.url&&p.props.page.url.pathname!==t.pathname&&(t.pathname=(A=p.props.page)==null?void 0:A.url.pathname),f&&f.details){const{details:E}=f,L=E.replaceState?0:1;if(E.state[V]=N+=L,history[E.replaceState?"replaceState":"pushState"](E.state,"",t),!E.replaceState){let R=N+1;for(;Q[R]||J[R];)delete Q[R],delete J[R],R+=1}}if(m=null,U?(g=p.state,p.props.page&&(p.props.page.url=t),q.$set(p.props)):Pe(p),f){const{scroll:E,keepfocus:L}=f,{activeElement:R}=document;if(await le(),k){const x=t.hash&&document.getElementById(decodeURIComponent(t.hash.slice(1)));E?scrollTo(E.x,E.y):x?x.scrollIntoView():scrollTo(0,0)}const b=document.activeElement!==R&&document.activeElement!==document.body;!L&&!b&&await Ee()}else await le();k=!0,p.props.page&&(H=p.props.page),h&&h(),O=!1}function Pe(n){var r;g=n.state;const t=document.querySelector("style[data-sveltekit]");t&&t.remove(),H=n.props.page,q=new e.root({target:a,props:{...n.props,stores:F,components:c},hydrate:!0}),Ie(N);const o={from:null,to:{params:g.params,route:{id:((r=g.route)==null?void 0:r.id)??null},url:new URL(location.href)},willUnload:!1,type:"enter"};y.after_navigate.forEach(f=>f(o)),U=!0}async function W({url:n,params:t,branch:o,status:r,error:f,route:l,form:h}){let p="never";for(const R of o)(R==null?void 0:R.slash)!==void 0&&(p=R.slash);n.pathname=at(n.pathname,p),n.search=n.search;const w={type:"loaded",state:{url:n,params:t,branch:o,error:f,route:l},props:{constructors:Pt(o).map(R=>R.node.component)}};h!==void 0&&(w.props.form=h);let _={},A=!H,E=0;for(let R=0;R<Math.max(o.length,g.branch.length);R+=1){const b=o[R],x=g.branch[R];(b==null?void 0:b.data)!==(x==null?void 0:x.data)&&(A=!0),b&&(_={..._,...b.data},A&&(w.props[`data_${E}`]=_),E+=1)}return(!g.url||n.href!==g.url.href||g.error!==f||h!==void 0&&h!==H.form||A)&&(w.props.page={error:f,params:t,route:{id:(l==null?void 0:l.id)??null},status:r,url:new URL(n),form:h??null,data:A?_:H.data}),w}async function ge({loader:n,parent:t,url:o,params:r,route:f,server_data_node:l}){var _,A,E;let h=null;const p={dependencies:new Set,params:new Set,parent:!1,route:!1,url:!1},w=await n();if((_=w.universal)!=null&&_.load){let L=function(...b){for(const x of b){const{href:D}=new URL(x,o);p.dependencies.add(D)}};const R={route:{get id(){return p.route=!0,f.id}},params:new Proxy(r,{get:(b,x)=>(p.params.add(x),b[x])}),data:(l==null?void 0:l.data)??null,url:st(o,()=>{p.url=!0}),async fetch(b,x){let D;b instanceof Request?(D=b.url,x={body:b.method==="GET"||b.method==="HEAD"?void 0:await b.blob(),cache:b.cache,credentials:b.credentials,headers:b.headers,integrity:b.integrity,keepalive:b.keepalive,method:b.method,mode:b.mode,redirect:b.redirect,referrer:b.referrer,referrerPolicy:b.referrerPolicy,signal:b.signal,...x}):D=b;const C=new URL(D,o);return L(C.href),C.origin===o.origin&&(D=C.href.slice(o.origin.length)),U?mt(D,C.href,x):gt(D,x)},setHeaders:()=>{},depends:L,parent(){return p.parent=!0,t()}};h=await w.universal.load.call(null,R)??null,h=h?await St(h):null}return{node:w,loader:n,server:l,universal:(A=w.universal)!=null&&A.load?{type:"data",data:h,uses:p}:null,data:h??(l==null?void 0:l.data)??null,slash:((E=w.universal)==null?void 0:E.trailingSlash)??(l==null?void 0:l.slash)}}function Ne(n,t,o,r,f){if(G)return!0;if(!r)return!1;if(r.parent&&n||r.route&&t||r.url&&o)return!0;for(const l of r.params)if(f[l]!==g.params[l])return!0;for(const l of r.dependencies)if(v.some(h=>h(new URL(l))))return!0;return!1}function me(n,t){return(n==null?void 0:n.type)==="data"?n:(n==null?void 0:n.type)==="skip"?t??null:null}async function Te({id:n,invalidating:t,url:o,params:r,route:f}){if((m==null?void 0:m.id)===n)return m.promise;const{errors:l,layouts:h,leaf:p}=f,w=[...h,p];l.forEach(S=>S==null?void 0:S().catch(()=>{})),w.forEach(S=>S==null?void 0:S[1]().catch(()=>{}));let _=null;const A=g.url?n!==g.url.pathname+g.url.search:!1,E=g.route?f.id!==g.route.id:!1;let L=!1;const R=w.map((S,$)=>{var B;const P=g.branch[$],T=!!(S!=null&&S[0])&&((P==null?void 0:P.loader)!==S[1]||Ne(L,E,A,(B=P.server)==null?void 0:B.uses,r));return T&&(L=!0),T});if(R.some(Boolean)){try{_=await ze(o,R)}catch(S){return oe({status:S instanceof te?S.status:500,error:await Z(S,{url:o,params:r,route:{id:f.id}}),url:o,route:f})}if(_.type==="redirect")return _}const b=_==null?void 0:_.nodes;let x=!1;const D=w.map(async(S,$)=>{var ye;if(!S)return;const P=g.branch[$],T=b==null?void 0:b[$];if((!T||T.type==="skip")&&S[1]===(P==null?void 0:P.loader)&&!Ne(x,E,A,(ye=P.universal)==null?void 0:ye.uses,r))return P;if(x=!0,(T==null?void 0:T.type)==="error")throw T;return ge({loader:S[1],url:o,params:r,route:f,parent:async()=>{var qe;const Ve={};for(let we=0;we<$;we+=1)Object.assign(Ve,(qe=await D[we])==null?void 0:qe.data);return Ve},server_data_node:me(T===void 0&&S[0]?{type:"skip"}:T??null,S[0]?P==null?void 0:P.server:void 0)})});for(const S of D)S.catch(()=>{});const C=[];for(let S=0;S<w.length;S+=1)if(w[S])try{C.push(await D[S])}catch($){if($ instanceof Ke)return{type:"redirect",location:$.location};let P=500,T;if(b!=null&&b.includes($))P=$.status??P,T=$.error;else if($ instanceof te)P=$.status,T=$.body;else{if(await F.updated.check())return await K(o);T=await Z($,{params:r,url:o,route:{id:f.id}})}const B=await je(S,C,l);return B?await W({url:o,params:r,branch:C.slice(0,B.idx).concat(B.node),status:P,error:T,route:f}):await De(o,{id:f.id},T,P)}else C.push(void 0);return await W({url:o,params:r,branch:C,status:200,error:null,route:f,form:t?void 0:null})}async function je(n,t,o){for(;n--;)if(o[n]){let r=n;for(;!t[r];)r-=1;try{return{idx:r+1,node:{node:await o[n](),loader:o[n],data:{},server:null,universal:null}}}catch{continue}}}async function oe({status:n,error:t,url:o,route:r}){const f={};let l=null;if(e.server_loads[0]===0)try{const _=await ze(o,[!0]);if(_.type!=="data"||_.nodes[0]&&_.nodes[0].type!=="data")throw 0;l=_.nodes[0]??null}catch{(o.origin!==location.origin||o.pathname!==location.pathname||j)&&await K(o)}const p=await ge({loader:s,url:o,params:f,route:r,parent:()=>Promise.resolve({}),server_data_node:me(l)}),w={node:await u(),loader:u,universal:null,server:null,data:null};return await W({url:o,params:f,branch:[p,w],status:n,error:t,route:null})}function X(n,t){if(fe(n,M))return;const o=ie(n);for(const r of i){const f=r.exec(o);if(f)return{id:n.pathname+n.search,invalidating:t,route:r,params:ot(f),url:n}}}function ie(n){return rt(n.pathname.slice(M.length)||"/")}function $e({url:n,type:t,intent:o,delta:r}){var p,w;let f=!1;const l={from:{params:g.params,route:{id:((p=g.route)==null?void 0:p.id)??null},url:g.url},to:{params:(o==null?void 0:o.params)??null,route:{id:((w=o==null?void 0:o.route)==null?void 0:w.id)??null},url:n},willUnload:!o,type:t};r!==void 0&&(l.delta=r);const h={...l,cancel:()=>{f=!0}};return I||y.before_navigate.forEach(_=>_(h)),f?null:l}async function se({url:n,scroll:t,keepfocus:o,redirect_chain:r,details:f,type:l,delta:h,nav_token:p,accepted:w,blocked:_}){const A=X(n,!1),E=$e({url:n,type:l,delta:h,intent:A});if(!E){_();return}const L=N;w(),I=!0,U&&F.navigating.set(E),await xe(A,n,r,L,{scroll:t,keepfocus:o,details:f},p,()=>{I=!1,y.after_navigate.forEach(R=>R(E)),F.navigating.set(null)})}async function De(n,t,o,r){return n.origin===location.origin&&n.pathname===location.pathname&&!j?await oe({status:r,error:o,url:n,route:t}):await K(n)}function K(n){return location.href=n.href,new Promise(()=>{})}function nt(){let n;d.addEventListener("mousemove",l=>{const h=l.target;clearTimeout(n),n=setTimeout(()=>{r(h,2)},20)});function t(l){r(l.composedPath()[0],1)}d.addEventListener("mousedown",t),d.addEventListener("touchstart",t,{passive:!0});const o=new IntersectionObserver(l=>{for(const h of l)h.isIntersecting&&(re(ie(new URL(h.target.href))),o.unobserve(h.target))},{threshold:0});function r(l,h){const p=He(l,d);if(!p)return;const{url:w,external:_}=_e(p,M);if(_)return;const A=ce(p);if(!A.reload)if(h<=A.preload_data){const E=X(w,!1);E&&Oe(E)}else h<=A.preload_code&&re(ie(w))}function f(){o.disconnect();for(const l of d.querySelectorAll("a")){const{url:h,external:p}=_e(l,M);if(p)continue;const w=ce(l);w.reload||(w.preload_code===ue.viewport&&o.observe(l),w.preload_code===ue.eager&&re(ie(h)))}}y.after_navigate.push(f),f()}function Z(n,t){return n instanceof te?n.body:e.hooks.handleError({error:n,event:t})??{message:t.route.id!=null?"Internal Error":"Not Found"}}return{after_navigate:n=>{Fe(()=>(y.after_navigate.push(n),()=>{const t=y.after_navigate.indexOf(n);y.after_navigate.splice(t,1)}))},before_navigate:n=>{Fe(()=>(y.before_navigate.push(n),()=>{const t=y.before_navigate.indexOf(n);y.before_navigate.splice(t,1)}))},disable_scroll_handling:()=>{(O||!U)&&(k=!1)},goto:(n,t={})=>he(n,t,[]),invalidate:n=>{if(typeof n=="function")v.push(n);else{const{href:t}=new URL(n,location.href);v.push(o=>o.href===t)}return Ae()},invalidateAll:()=>(G=!0,Ae()),preload_data:async n=>{const t=new URL(n,Me(document)),o=X(t,!1);if(!o)throw new Error(`Attempted to preload a URL that does not belong to this app: ${t}`);await Oe(o)},preload_code:re,apply_action:async n=>{if(n.type==="error"){const t=new URL(location.href),{branch:o,route:r}=g;if(!r)return;const f=await je(g.branch.length,o,r.errors);if(f){const l=await W({url:t,params:g.params,branch:o.slice(0,f.idx).concat(f.node),status:n.status??500,error:n.error,route:r});g=l.state,q.$set(l.props),le().then(Ee)}}else n.type==="redirect"?he(n.location,{invalidateAll:!0},[]):(q.$set({form:null,page:{...H,form:n.data,status:n.status}}),await le(),q.$set({form:n.data}),n.type==="success"&&Ee())},_start_router:()=>{var n;history.scrollRestoration="manual",addEventListener("beforeunload",t=>{var r;let o=!1;if(Ue(),!I){const f={from:{params:g.params,route:{id:((r=g.route)==null?void 0:r.id)??null},url:g.url},to:null,willUnload:!0,type:"leave",cancel:()=>o=!0};y.before_navigate.forEach(l=>l(f))}o?(t.preventDefault(),t.returnValue=""):history.scrollRestoration="auto"}),addEventListener("visibilitychange",()=>{document.visibilityState==="hidden"&&Ue()}),(n=navigator.connection)!=null&&n.saveData||nt(),d.addEventListener("click",t=>{if(t.button||t.which!==1||t.metaKey||t.ctrlKey||t.shiftKey||t.altKey||t.defaultPrevented)return;const o=He(t.composedPath()[0],d);if(!o)return;const{url:r,external:f,target:l}=_e(o,M);if(!r)return;if(l==="_parent"||l==="_top"){if(window.parent!==window)return}else if(l&&l!=="_self")return;const h=ce(o);if(!(o instanceof SVGAElement)&&r.protocol!==location.protocol&&!(r.protocol==="https:"||r.protocol==="http:"))return;if(f||h.reload){$e({url:r,type:"link"})?I=!0:t.preventDefault();return}const[w,_]=r.href.split("#");if(_!==void 0&&w===location.href.split("#")[0]){Y=!0,ve(N),g.url=r,F.page.set({...H,url:r}),F.page.notify();return}se({url:r,scroll:h.noscroll?ee():null,keepfocus:h.keep_focus??!1,redirect_chain:[],details:{state:{},replaceState:h.replace_state??r.href===location.href},accepted:()=>t.preventDefault(),blocked:()=>t.preventDefault(),type:"link"})}),d.addEventListener("submit",t=>{if(t.defaultPrevented)return;const o=HTMLFormElement.prototype.cloneNode.call(t.target),r=t.submitter;if(((r==null?void 0:r.formMethod)||o.method)!=="get")return;const l=new URL((r==null?void 0:r.hasAttribute("formaction"))&&(r==null?void 0:r.formAction)||o.action);if(fe(l,M))return;const h=t.target,{keep_focus:p,noscroll:w,reload:_,replace_state:A}=ce(h);if(_)return;t.preventDefault(),t.stopPropagation();const E=new FormData(h),L=r==null?void 0:r.getAttribute("name");L&&E.append(L,(r==null?void 0:r.getAttribute("value"))??""),l.search=new URLSearchParams(E).toString(),se({url:l,scroll:w?ee():null,keepfocus:p??!1,redirect_chain:[],details:{state:{},replaceState:A??l.href===location.href},nav_token:{},accepted:()=>{},blocked:()=>{},type:"form"})}),addEventListener("popstate",async t=>{var o;if((o=t.state)!=null&&o[V]){if(t.state[V]===N)return;const r=J[t.state[V]];if(g.url.href.split("#")[0]===location.href.split("#")[0]){J[N]=ee(),N=t.state[V],scrollTo(r.x,r.y);return}const f=t.state[V]-N;let l=!1;await se({url:new URL(location.href),scroll:r,keepfocus:!1,redirect_chain:[],details:null,accepted:()=>{N=t.state[V]},blocked:()=>{history.go(-f),l=!0},type:"popstate",delta:f}),l||Ie(N)}}),addEventListener("hashchange",()=>{Y&&(Y=!1,history.replaceState({...history.state,[V]:++N},"",location.href))});for(const t of document.querySelectorAll("link"))t.rel==="icon"&&(t.href=t.href);addEventListener("pageshow",t=>{t.persisted&&F.navigating.set(null)})},_hydrate:async({status:n=200,error:t,node_ids:o,params:r,route:f,data:l,form:h})=>{j=!0;const p=new URL(location.href);({params:r={},route:f={id:null}}=X(p,!1)||{});let w;try{const _=o.map(async(A,E)=>{const L=l[E];return L!=null&&L.uses&&(L.uses=tt(L.uses)),ge({loader:e.nodes[A],url:p,params:r,route:f,parent:async()=>{const R={};for(let b=0;b<E;b+=1)Object.assign(R,(await _[b]).data);return R},server_data_node:me(L)})});w=await W({url:p,params:r,branch:await Promise.all(_),status:n,error:t,form:h,route:i.find(({id:A})=>A===f.id)??null})}catch(_){if(_ instanceof Ke){await K(new URL(_.location,location.href));return}w=await oe({status:_ instanceof te?_.status:500,error:await Z(_,{url:p,params:r,route:f}),url:p,route:f})}Pe(w)}}}async function ze(e,a){const i=new URL(e);i.pathname=ft(e.pathname),i.searchParams.append("x-sveltekit-invalidated",a.map(u=>u?"1":"").join("_"));const s=await de(i.href);if(!s.ok)throw new te(s.status,await s.json());return new Promise(async u=>{var g;const d=new Map,v=s.body.getReader(),c=new TextDecoder;function m(j){return xt(j,{Promise:U=>new Promise((k,O)=>{d.set(U,{fulfil:k,reject:O})})})}let y="";for(;;){const{done:j,value:U}=await v.read();if(j&&!y)break;for(y+=!U&&y?`
-`:c.decode(U);;){const k=y.indexOf(`
-`);if(k===-1)break;const O=JSON.parse(y.slice(0,k));if(y=y.slice(k+1),O.type==="redirect")return u(O);if(O.type==="data")(g=O.nodes)==null||g.forEach(I=>{(I==null?void 0:I.type)==="data"&&(I.uses=tt(I.uses),I.data=m(I.data))}),u(O);else if(O.type==="chunk"){const{id:I,data:Y,error:G}=O,q=d.get(I);d.delete(I),G?q.reject(m(G)):q.fulfil(m(Y))}}}})}function tt(e){return{dependencies:new Set((e==null?void 0:e.dependencies)??[]),params:new Set((e==null?void 0:e.params)??[]),parent:!!(e!=null&&e.parent),route:!!(e!=null&&e.route),url:!!(e!=null&&e.url)}}function Ee(){const e=document.querySelector("[autofocus]");if(e)e.focus();else{const a=document.body,i=a.getAttribute("tabindex");return a.tabIndex=-1,a.focus({preventScroll:!0}),i!==null?a.setAttribute("tabindex",i):a.removeAttribute("tabindex"),new Promise(s=>{setTimeout(()=>{var u;s((u=getSelection())==null?void 0:u.removeAllRanges())})})}}async function Ct(e,a,i){const s=Nt(e,a);kt({client:s}),i?await s._hydrate(i):s.goto(location.href,{replaceState:!0}),s._start_router()}export{Ct as start};
diff --git a/_app/version.json b/_app/version.json
index aa3dc34..9f74a40 100644
--- a/_app/version.json
+++ b/_app/version.json
@@ -1 +1 @@
-{"version":"1731776483287"}
\ No newline at end of file
+{"version":"1731856412894"}
\ No newline at end of file
diff --git a/images/posts/oink/design-4.avif b/images/posts/oink/design-4.avif
new file mode 100644
index 0000000..a9ac202
Binary files /dev/null and b/images/posts/oink/design-4.avif differ
diff --git a/images/posts/oink/design-4.png b/images/posts/oink/design-4.png
new file mode 100644
index 0000000..1ec536a
Binary files /dev/null and b/images/posts/oink/design-4.png differ
diff --git a/images/posts/oink/design-4.webp b/images/posts/oink/design-4.webp
new file mode 100644
index 0000000..98ee378
Binary files /dev/null and b/images/posts/oink/design-4.webp differ
diff --git a/index.html b/index.html
index f9647b9..b12e6a7 100644
--- a/index.html
+++ b/index.html
@@ -62,26 +62,27 @@
 		<link href="./_app/immutable/assets/_layout.4c4b0438.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Footer.d22ee075.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Socials.90829a02.css" rel="stylesheet">
-		<link href="./_app/immutable/assets/_page.a6e66b51.css" rel="stylesheet">
+		<link href="./_app/immutable/assets/_page.ebe08205.css" rel="stylesheet">
+		<link href="./_app/immutable/assets/SparklingHighlight.65de18f8.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Button.df0e54d0.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Image.0954db74.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/ContentSection.ebb4e843.css" rel="stylesheet">
-		<link rel="modulepreload" href="./_app/immutable/entry/start.e776f058.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.889feda2.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.c7d83eca.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/app.bbae1d65.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.1c576aae.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/start.b02acea1.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.963f39ba.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.71f580a9.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/app.19a18c5b.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.926ef413.js">
 		<link rel="modulepreload" href="./_app/immutable/entry/_layout.ts.984db11e.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/_layout.da46b06b.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-layout.svelte.df021916.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.d6dce7f9.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.3c8c0927.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-layout.svelte.ae1baf34.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.86072d99.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.51dbce5a.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/meta.65863fbf.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-page.svelte.a78471c3.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Button.835f3106.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-page.svelte.7e8e6d6a.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Button.c88cc32a.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/regex.7dfa9b23.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Image.9fd0349e.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/ContentSection.a48a4166.js"><title>Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-12ekxku_START --><link rel="“canonical”" href="https://punnlert.github.io/"><meta name="keywords" content="Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio"><meta name="description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta name="twitter:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta name="twitter:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta property="og:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:card" content="summary_large_image"><!-- HEAD_svelte-12ekxku_END -->
+		<link rel="modulepreload" href="./_app/immutable/chunks/Image.a2141873.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/ContentSection.e661d46d.js"><title>Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-12ekxku_START --><link rel="“canonical”" href="https://punnlert.github.io/"><meta name="keywords" content="Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio"><meta name="description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta name="twitter:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta name="twitter:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta property="og:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:card" content="summary_large_image"><!-- HEAD_svelte-12ekxku_END -->
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div id="svelte-root">
@@ -136,7 +137,7 @@ <h2 class="hello svelte-kryipj">Portfolio</h2>
 	<div class="body svelte-1kz16cj"><div class="content svelte-1kz16cj"><div class="content svelte-1okvg2o" slot="content"><p class="title svelte-1okvg2o">Oink</p>
 		<div class="note svelte-1okvg2o">5 min read</div>
 		<p class="text svelte-1okvg2o">Reshaping digital financial experience for kids and preteens by introducing tangible interface.</p></div></div>
-		<div class="footer"><div class="footer svelte-1okvg2o" slot="footer"><div class="tags svelte-1okvg2o"><div class="tag primary svelte-12gzt4c">UX Design</div><div class="tag primary svelte-12gzt4c">UI Design</div></div></div></div></div>
+		<div class="footer"><div class="footer svelte-1okvg2o" slot="footer"><div class="tags svelte-1okvg2o"><div class="tag primary svelte-12gzt4c">UI Design</div><div class="tag primary svelte-12gzt4c">UX Design</div></div></div></div></div>
 </a></div></div>
 </section>
 	</div></main>
@@ -158,19 +159,19 @@ <h2 class="hello svelte-kryipj">Portfolio</h2>
 			
 			<script>
 				{
-					__sveltekit_10x07x1 = {
+					__sveltekit_3lmy3c = {
 						env: {},
 						base: new URL(".", location).pathname.slice(0, -1),
 						element: document.currentScript.parentElement
 					};
 
-					const data = [null,null,{"type":"data","data":(function(a,b){a[0]="Coding";a[1]="Javascript";a[2]="Game Design";b[0]="UX Design";b[1]="UI Design";return {features:[{name:"Markdown Support",description:"Blog posts are written in Markdown, a simple and nearly-universal format. This means you can bring over your posts from other platforms, and easily export to another if you want to.",image:"images\u002Ffeatures\u002Fmarkdown.jpg",tags:[{label:"Powered by MDsveX"}]},{name:"Themeable",description:"You can easily theme the entire website by changing just a few colors in the _themes.scss file.",image:"images\u002Ffeatures\u002Fthemeable.jpg",tags:[{label:"Primary Color"},{label:"Secondary Color",color:"secondary"}]},{name:"Extensible",description:"Components are built to be reused, and you can build new pages and layouts without much CSS knowledge. You can see all components in Histoire by running \"npm run story:dev\"",image:"images\u002Ffeatures\u002Fextensible.jpg"},{name:"Well Optimized",description:"Images are automatically optimized and lazy loaded, to ensure the website loads as fast as possible regardless of connection speed.",image:"images\u002Ffeatures\u002Foptimized.jpg",tags:[{label:"Powered by Image Transmutation"}]},{name:"Light and Dark Modes",description:"This template was built with dark mode in mind. It can swap between themes automatically (based on system settings) or manually. Both themes can be tweaked in the _themes.scss file.",image:"images\u002Ffeatures\u002Flight-dark.jpg"},{name:"Open Source",description:"All code is open source, which means you can copy and modify it to your heart's content. All I ask is that you make your code open too so that knowledge can be passed on.",image:"images\u002Ffeatures\u002Fopen-source.jpg"}],posts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:a,hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read",relatedPosts:[{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:b,hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E",readingTime:"5 min read"}]},{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:b,hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E",readingTime:"5 min read",relatedPosts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:a,hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read"}]}]}}(Array(3),Array(2))),"uses":{"url":1}}];
+					const data = [null,null,{"type":"data","data":(function(a,b){a[0]="Coding";a[1]="Javascript";a[2]="Game Design";b[0]="UI Design";b[1]="UX Design";return {features:[{name:"Markdown Support",description:"Blog posts are written in Markdown, a simple and nearly-universal format. This means you can bring over your posts from other platforms, and easily export to another if you want to.",image:"images\u002Ffeatures\u002Fmarkdown.jpg",tags:[{label:"Powered by MDsveX"}]},{name:"Themeable",description:"You can easily theme the entire website by changing just a few colors in the _themes.scss file.",image:"images\u002Ffeatures\u002Fthemeable.jpg",tags:[{label:"Primary Color"},{label:"Secondary Color",color:"secondary"}]},{name:"Extensible",description:"Components are built to be reused, and you can build new pages and layouts without much CSS knowledge. You can see all components in Histoire by running \"npm run story:dev\"",image:"images\u002Ffeatures\u002Fextensible.jpg"},{name:"Well Optimized",description:"Images are automatically optimized and lazy loaded, to ensure the website loads as fast as possible regardless of connection speed.",image:"images\u002Ffeatures\u002Foptimized.jpg",tags:[{label:"Powered by Image Transmutation"}]},{name:"Light and Dark Modes",description:"This template was built with dark mode in mind. It can swap between themes automatically (based on system settings) or manually. Both themes can be tweaked in the _themes.scss file.",image:"images\u002Ffeatures\u002Flight-dark.jpg"},{name:"Open Source",description:"All code is open source, which means you can copy and modify it to your heart's content. All I ask is that you make your code open too so that knowledge can be passed on.",image:"images\u002Ffeatures\u002Fopen-source.jpg"}],posts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:a,hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read",relatedPosts:[{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:b,hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E",readingTime:"5 min read"}]},{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:b,hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E",readingTime:"5 min read",relatedPosts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:a,hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read"}]}]}}(Array(3),Array(2))),"uses":{"url":1}}];
 
 					Promise.all([
-						import("./_app/immutable/entry/start.e776f058.js"),
-						import("./_app/immutable/entry/app.bbae1d65.js")
+						import("./_app/immutable/entry/start.b02acea1.js"),
+						import("./_app/immutable/entry/app.19a18c5b.js")
 					]).then(([kit, app]) => {
-						kit.start(app, __sveltekit_10x07x1.element, {
+						kit.start(app, __sveltekit_3lmy3c.element, {
 							node_ids: [0, 3, 9],
 							data,
 							form: null,
diff --git a/oink.html b/oink.html
index b9439e7..62461b0 100644
--- a/oink.html
+++ b/oink.html
@@ -64,24 +64,25 @@
 		<link href="./_app/immutable/assets/Socials.90829a02.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/ContentSection.ebb4e843.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Image.0954db74.css" rel="stylesheet">
-		<link href="./_app/immutable/assets/_page.ba1a06a2.css" rel="stylesheet">
+		<link href="./_app/immutable/assets/_page.aed9cb66.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Callout.f5800320.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/CodeBlock.cb0c12be.css" rel="stylesheet">
-		<link rel="modulepreload" href="./_app/immutable/entry/start.e776f058.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.889feda2.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.c7d83eca.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/app.bbae1d65.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.1c576aae.js">
+		<link href="./_app/immutable/assets/SparklingHighlight.65de18f8.css" rel="stylesheet">
+		<link rel="modulepreload" href="./_app/immutable/entry/start.b02acea1.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.963f39ba.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.71f580a9.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/app.19a18c5b.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.926ef413.js">
 		<link rel="modulepreload" href="./_app/immutable/entry/_layout.ts.984db11e.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/_layout.da46b06b.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(blog-article)-layout.svelte.88b989a1.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.d6dce7f9.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.3c8c0927.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/ContentSection.a48a4166.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/(blog-article)-layout.svelte.552a7089.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.86072d99.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.51dbce5a.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/ContentSection.e661d46d.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/regex.7dfa9b23.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Image.9fd0349e.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Image.a2141873.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/meta.65863fbf.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(blog-article)-oink-page.md.729a927f.js"><title>Oink - Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-1ylu8nc_START --><meta name="keywords" content="UX Design, UI Design, Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio">
+		<link rel="modulepreload" href="./_app/immutable/entry/(blog-article)-oink-page.md.3d4e3640.js"><title>Oink - Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-1ylu8nc_START --><meta name="keywords" content="UI Design, UX Design, Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio">
 
 		<meta name="description" content="Reshaping digital financial experience for kids and preteens by introducing tangible interface.">
 		<meta property="og:description" content="Reshaping digital financial experience for kids and preteens by introducing tangible interface.">
@@ -115,7 +116,7 @@
 					<div class="note svelte-6vak74">Published on 22 April 2023</div>
 					
 					<div class="note svelte-6vak74">5 min read</div>
-					<div class="tags svelte-6vak74"><div class="tag primary svelte-12gzt4c">UX Design</div><div class="tag primary svelte-12gzt4c">UI Design</div></div></div>
+					<div class="tags svelte-6vak74"><div class="tag primary svelte-12gzt4c">UI Design</div><div class="tag primary svelte-12gzt4c">UX Design</div></div></div>
 			<div class="cover-image svelte-6vak74"><img srcset="/images/posts/oink/cover.avif, /images/posts/oink/cover.webp, /images/posts/oink/cover.png" src="/images/posts/oink/cover.png" alt="Oink" loading="lazy" decoding="async" class="svelte-1ykl0dj"></div>
 			<div class="content svelte-6vak74"><p>If you want a bite-sized summary, check out this <a href="https://youtu.be/I8RZJOs1q6Y" rel="nofollow">video</a></p>
 <h2 id="context"><a class="heading-link" title="Permalink" aria-hidden="true" href="#context"><span>#</span></a>Context</h2>
@@ -135,7 +136,6 @@ <h2 id="overview-and-background"><a class="heading-link" title="Permalink" aria-
 <p>We found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of <strong><em>convenience</em></strong> (which, i know, is obvious but we like to make sure).</p>
 <p>The interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.</p>
 <h2 id="problem"><a class="heading-link" title="Permalink" aria-hidden="true" href="#problem"><span>#</span></a>Problem</h2>
-
 <p>The problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can <strong>see</strong>, reduced to just a numerical representation on a screen.</p>
 <p>In order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.</p>
 <img srcset="/images/posts/oink/problem-1.avif, /images/posts/oink/problem-1.webp, /images/posts/oink/problem-1.png" src="/images/posts/oink/problem-1.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
@@ -180,11 +180,26 @@ <h2 id="ideation"><a class="heading-link" title="Permalink" aria-hidden="true" h
 <p>Which is cute but it didn’t fully answers all of our <a href="#goals">goals</a>. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.</p>
 <p>What if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?</p>
 <h2 id="design"><a class="heading-link" title="Permalink" aria-hidden="true" href="#design"><span>#</span></a>Design</h2>
-<p>With that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.</p>
+<p>With that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.</p>
 <img srcset="/images/posts/oink/design-1.avif, /images/posts/oink/design-1.webp, /images/posts/oink/design-1.png" src="/images/posts/oink/design-1.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
 <img srcset="/images/posts/oink/design-2.avif, /images/posts/oink/design-2.webp, /images/posts/oink/design-2.png" src="/images/posts/oink/design-2.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
 <p>Then we started to design and iterate through the interface. This is how one iteration looks like.</p>
-<img srcset="/images/posts/oink/design-3.avif, /images/posts/oink/design-3.webp, /images/posts/oink/design-3.png" src="/images/posts/oink/design-3.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj"></div></article>
+<img srcset="/images/posts/oink/design-3.avif, /images/posts/oink/design-3.webp, /images/posts/oink/design-3.png" src="/images/posts/oink/design-3.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
+<p>After each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process</p>
+<p>because we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.</p>
+<img srcset="/images/posts/oink/design-4.avif, /images/posts/oink/design-4.webp, /images/posts/oink/design-4.png" src="/images/posts/oink/design-4.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
+<h2 id="final-product"><a class="heading-link" title="Permalink" aria-hidden="true" href="#final-product"><span>#</span></a>Final Product</h2>
+<p>And after a month of iterations discussion, out of our blood, sweat, and tears came
+<div class="sparkle-wrapper svelte-exdx8u">
+	<span class="slot-wrapper svelte-exdx8u"><strong class="default svelte-8f8x6d">Oink!
+</strong></span>
+</div>
+ :D
+</p>
+<p>It might be better for your experience if you see this <a href="https://youtu.be/I8RZJOs1q6Y" rel="nofollow">video</a> before we dive into the product.</p>
+<h2 id="impacts"><a class="heading-link" title="Permalink" aria-hidden="true" href="#impacts"><span>#</span></a>Impacts</h2>
+<h2 id="what-i-learned"><a class="heading-link" title="Permalink" aria-hidden="true" href="#what-i-learned"><span>#</span></a>What I learned</h2>
+<h2 id="what-i-wish-were-more-explored"><a class="heading-link" title="Permalink" aria-hidden="true" href="#what-i-wish-were-more-explored"><span>#</span></a>What I wish were more explored</h2></div></article>
 		<div class="container"><section id="related-posts" class="content-section top svelte-emrvls"><div class="title-area svelte-emrvls"><div class="text svelte-emrvls"><h2>Related Posts</h2>
 				</div>
 		</div>
@@ -214,19 +229,19 @@ <h2 id="design"><a class="heading-link" title="Permalink" aria-hidden="true" hre
 			
 			<script>
 				{
-					__sveltekit_10x07x1 = {
+					__sveltekit_3lmy3c = {
 						env: {},
 						base: new URL(".", location).pathname.slice(0, -1),
 						element: document.currentScript.parentElement
 					};
 
-					const data = [null,{"type":"data","data":{post:{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:["UX Design","UI Design"],hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E",readingTime:"5 min read",relatedPosts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:["Coding","Javascript","Game Design"],hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read"}]}},"uses":{"url":1}},null];
+					const data = [null,{"type":"data","data":{post:{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:["UI Design","UX Design"],hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E",readingTime:"5 min read",relatedPosts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:["Coding","Javascript","Game Design"],hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read"}]}},"uses":{"url":1}},null];
 
 					Promise.all([
-						import("./_app/immutable/entry/start.e776f058.js"),
-						import("./_app/immutable/entry/app.bbae1d65.js")
+						import("./_app/immutable/entry/start.b02acea1.js"),
+						import("./_app/immutable/entry/app.19a18c5b.js")
 					]).then(([kit, app]) => {
-						kit.start(app, __sveltekit_10x07x1.element, {
+						kit.start(app, __sveltekit_3lmy3c.element, {
 							node_ids: [0, 2, 6],
 							data,
 							form: null,
diff --git a/oink/__data.json b/oink/__data.json
index d6e3b1e..9d5ac26 100644
--- a/oink/__data.json
+++ b/oink/__data.json
@@ -1 +1 @@
-{"type":"data","nodes":[null,{"type":"data","data":[{"post":1},{"slug":2,"title":3,"date":4,"excerpt":5,"coverImage":6,"tags":7,"hidden":10,"html":11,"readingTime":12,"relatedPosts":13},"oink","Oink","2023-04-22T21:55:27.154Z","Reshaping digital financial experience for kids and preteens by introducing tangible interface.","\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",[8,9],"UX Design","UI Design",false,"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E","5 min read",[14],{"slug":15,"title":16,"date":17,"excerpt":18,"coverImage":19,"tags":20,"hidden":10,"html":24,"readingTime":25},"roger-roger","Roger, Roger","2023-05-18T21:55:27.000Z","Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!","\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",[21,22,23],"Coding","Javascript","Game Design","\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E","4 min read"],"uses":{"url":1}},null]}
+{"type":"data","nodes":[null,{"type":"data","data":[{"post":1},{"slug":2,"title":3,"date":4,"excerpt":5,"coverImage":6,"tags":7,"hidden":10,"html":11,"readingTime":12,"relatedPosts":13},"oink","Oink","2023-04-22T21:55:27.154Z","Reshaping digital financial experience for kids and preteens by introducing tangible interface.","\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",[8,9],"UI Design","UX Design",false,"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E","5 min read",[14],{"slug":15,"title":16,"date":17,"excerpt":18,"coverImage":19,"tags":20,"hidden":10,"html":24,"readingTime":25},"roger-roger","Roger, Roger","2023-05-18T21:55:27.000Z","Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!","\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",[21,22,23],"Coding","Javascript","Game Design","\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E","4 min read"],"uses":{"url":1}},null]}
diff --git a/projects.html b/projects.html
index 6db7b56..98d37df 100644
--- a/projects.html
+++ b/projects.html
@@ -65,21 +65,21 @@
 		<link href="./_app/immutable/assets/_page.f207d5be.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/ContentSection.ebb4e843.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Image.0954db74.css" rel="stylesheet">
-		<link rel="modulepreload" href="./_app/immutable/entry/start.e776f058.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.889feda2.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.c7d83eca.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/app.bbae1d65.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.1c576aae.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/start.b02acea1.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.963f39ba.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.71f580a9.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/app.19a18c5b.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.926ef413.js">
 		<link rel="modulepreload" href="./_app/immutable/entry/_layout.ts.984db11e.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/_layout.da46b06b.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-layout.svelte.df021916.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.d6dce7f9.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.3c8c0927.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-layout.svelte.ae1baf34.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.86072d99.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.51dbce5a.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/meta.65863fbf.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-projects-page.svelte.10a8cb7a.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/ContentSection.a48a4166.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/(waves)-projects-page.svelte.fb2960c1.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/ContentSection.e661d46d.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/regex.7dfa9b23.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Image.9fd0349e.js"><title>Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-12ekxku_START --><link rel="“canonical”" href="https://punnlert.github.io/"><meta name="keywords" content="Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio"><meta name="description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta name="twitter:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta name="twitter:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta property="og:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:card" content="summary_large_image"><!-- HEAD_svelte-12ekxku_END -->
+		<link rel="modulepreload" href="./_app/immutable/chunks/Image.a2141873.js"><title>Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-12ekxku_START --><link rel="“canonical”" href="https://punnlert.github.io/"><meta name="keywords" content="Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio"><meta name="description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta name="twitter:description" content="Punn Lertjaturaphat is a playful industrial designer who loves to create meaningful interaction."><meta property="og:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta name="twitter:title" content="Punn Lertjaturaphat's Personal Portfolio"><meta property="og:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:image" content="https://punnlert.github.io//images/site-preview.png"><meta name="twitter:card" content="summary_large_image"><!-- HEAD_svelte-12ekxku_END -->
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div id="svelte-root">
@@ -110,7 +110,7 @@
 	<div class="body svelte-1kz16cj"><div class="content svelte-1kz16cj"><div class="content svelte-1okvg2o" slot="content"><p class="title svelte-1okvg2o">Oink</p>
 		<div class="note svelte-1okvg2o">5 min read</div>
 		<p class="text svelte-1okvg2o">Reshaping digital financial experience for kids and preteens by introducing tangible interface.</p></div></div>
-		<div class="footer"><div class="footer svelte-1okvg2o" slot="footer"><div class="tags svelte-1okvg2o"><div class="tag primary svelte-12gzt4c">UX Design</div><div class="tag primary svelte-12gzt4c">UI Design</div></div></div></div></div>
+		<div class="footer"><div class="footer svelte-1okvg2o" slot="footer"><div class="tags svelte-1okvg2o"><div class="tag primary svelte-12gzt4c">UI Design</div><div class="tag primary svelte-12gzt4c">UX Design</div></div></div></div></div>
 </a></div></div>
 </section>
 </div></main>
@@ -132,19 +132,19 @@
 			
 			<script>
 				{
-					__sveltekit_10x07x1 = {
+					__sveltekit_3lmy3c = {
 						env: {},
 						base: new URL(".", location).pathname.slice(0, -1),
 						element: document.currentScript.parentElement
 					};
 
-					const data = [null,null,{"type":"data","data":(function(a,b){a[0]="Coding";a[1]="Javascript";a[2]="Game Design";b[0]="UX Design";b[1]="UI Design";return {posts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:a,hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read",relatedPosts:[{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:b,hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E",readingTime:"5 min read"}]},{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:b,hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E",readingTime:"5 min read",relatedPosts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:a,hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read"}]}]}}(Array(3),Array(2))),"uses":{"url":1}}];
+					const data = [null,null,{"type":"data","data":(function(a,b){a[0]="Coding";a[1]="Javascript";a[2]="Game Design";b[0]="UI Design";b[1]="UX Design";return {posts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:a,hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read",relatedPosts:[{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:b,hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E",readingTime:"5 min read"}]},{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:b,hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E",readingTime:"5 min read",relatedPosts:[{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:a,hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read"}]}]}}(Array(3),Array(2))),"uses":{"url":1}}];
 
 					Promise.all([
-						import("./_app/immutable/entry/start.e776f058.js"),
-						import("./_app/immutable/entry/app.bbae1d65.js")
+						import("./_app/immutable/entry/start.b02acea1.js"),
+						import("./_app/immutable/entry/app.19a18c5b.js")
 					]).then(([kit, app]) => {
-						kit.start(app, __sveltekit_10x07x1.element, {
+						kit.start(app, __sveltekit_3lmy3c.element, {
 							node_ids: [0, 3, 11],
 							data,
 							form: null,
diff --git a/projects/__data.json b/projects/__data.json
index 243e7c8..07f12f4 100644
--- a/projects/__data.json
+++ b/projects/__data.json
@@ -1 +1 @@
-{"type":"data","nodes":[null,null,{"type":"data","data":[{"posts":1},[2,27],{"slug":3,"title":4,"date":5,"excerpt":6,"coverImage":7,"tags":8,"hidden":12,"html":13,"readingTime":14,"relatedPosts":15},"roger-roger","Roger, Roger","2023-05-18T21:55:27.000Z","Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!","\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",[9,10,11],"Coding","Javascript","Game Design",false,"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E","4 min read",[16],{"slug":17,"title":18,"date":19,"excerpt":20,"coverImage":21,"tags":22,"hidden":12,"html":25,"readingTime":26},"oink","Oink","2023-04-22T21:55:27.154Z","Reshaping digital financial experience for kids and preteens by introducing tangible interface.","\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",[23,24],"UX Design","UI Design","\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E","5 min read",{"slug":17,"title":18,"date":19,"excerpt":20,"coverImage":21,"tags":22,"hidden":12,"html":25,"readingTime":26,"relatedPosts":28},[29],{"slug":3,"title":4,"date":5,"excerpt":6,"coverImage":7,"tags":8,"hidden":12,"html":13,"readingTime":14}],"uses":{"url":1}}]}
+{"type":"data","nodes":[null,null,{"type":"data","data":[{"posts":1},[2,27],{"slug":3,"title":4,"date":5,"excerpt":6,"coverImage":7,"tags":8,"hidden":12,"html":13,"readingTime":14,"relatedPosts":15},"roger-roger","Roger, Roger","2023-05-18T21:55:27.000Z","Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!","\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",[9,10,11],"Coding","Javascript","Game Design",false,"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E","4 min read",[16],{"slug":17,"title":18,"date":19,"excerpt":20,"coverImage":21,"tags":22,"hidden":12,"html":25,"readingTime":26},"oink","Oink","2023-04-22T21:55:27.154Z","Reshaping digital financial experience for kids and preteens by introducing tangible interface.","\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",[23,24],"UI Design","UX Design","\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E","5 min read",{"slug":17,"title":18,"date":19,"excerpt":20,"coverImage":21,"tags":22,"hidden":12,"html":25,"readingTime":26,"relatedPosts":28},[29],{"slug":3,"title":4,"date":5,"excerpt":6,"coverImage":7,"tags":8,"hidden":12,"html":13,"readingTime":14}],"uses":{"url":1}}]}
diff --git a/roger-roger.html b/roger-roger.html
index 00bbfa7..cc4429b 100644
--- a/roger-roger.html
+++ b/roger-roger.html
@@ -66,22 +66,22 @@
 		<link href="./_app/immutable/assets/Image.0954db74.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/_page.74ba00a5.css" rel="stylesheet">
 		<link href="./_app/immutable/assets/Button.df0e54d0.css" rel="stylesheet">
-		<link rel="modulepreload" href="./_app/immutable/entry/start.e776f058.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.889feda2.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/index.c7d83eca.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/app.bbae1d65.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.1c576aae.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/start.b02acea1.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.963f39ba.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/index.71f580a9.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/app.19a18c5b.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/_layout.svelte.926ef413.js">
 		<link rel="modulepreload" href="./_app/immutable/entry/_layout.ts.984db11e.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/_layout.da46b06b.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(blog-article)-layout.svelte.88b989a1.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.d6dce7f9.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.3c8c0927.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/ContentSection.a48a4166.js">
+		<link rel="modulepreload" href="./_app/immutable/entry/(blog-article)-layout.svelte.552a7089.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Footer.86072d99.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Socials.51dbce5a.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/ContentSection.e661d46d.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/regex.7dfa9b23.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Image.9fd0349e.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Image.a2141873.js">
 		<link rel="modulepreload" href="./_app/immutable/chunks/meta.65863fbf.js">
-		<link rel="modulepreload" href="./_app/immutable/entry/(blog-article)-roger-roger-page.md.467361a8.js">
-		<link rel="modulepreload" href="./_app/immutable/chunks/Button.835f3106.js"><title>Roger, Roger - Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-1ylu8nc_START --><meta name="keywords" content="Coding, Javascript, Game Design, Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio">
+		<link rel="modulepreload" href="./_app/immutable/entry/(blog-article)-roger-roger-page.md.b45ea0c5.js">
+		<link rel="modulepreload" href="./_app/immutable/chunks/Button.c88cc32a.js"><title>Roger, Roger - Punn Lertjaturaphat's Personal Portfolio</title><!-- HEAD_svelte-1ylu8nc_START --><meta name="keywords" content="Coding, Javascript, Game Design, Industrial Design, Interaction Design, UX Design, UI Design, Punn Lertjaturaphat, Portfolio">
 
 		<meta name="description" content="Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!">
 		<meta property="og:description" content="Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!">
@@ -181,7 +181,7 @@ <h2 id="what-i-would-do-to-make-it-better"><a class="heading-link" title="Permal
 	<div class="body svelte-1kz16cj"><div class="content svelte-1kz16cj"><div class="content svelte-1okvg2o" slot="content"><p class="title svelte-1okvg2o">Oink</p>
 		<div class="note svelte-1okvg2o">5 min read</div>
 		<p class="text svelte-1okvg2o">Reshaping digital financial experience for kids and preteens by introducing tangible interface.</p></div></div>
-		<div class="footer"><div class="footer svelte-1okvg2o" slot="footer"><div class="tags svelte-1okvg2o"><div class="tag primary svelte-12gzt4c">UX Design</div><div class="tag primary svelte-12gzt4c">UI Design</div></div></div></div></div>
+		<div class="footer"><div class="footer svelte-1okvg2o" slot="footer"><div class="tags svelte-1okvg2o"><div class="tag primary svelte-12gzt4c">UI Design</div><div class="tag primary svelte-12gzt4c">UX Design</div></div></div></div></div>
 </a></div></div>
 </section></div></main>
 	<footer class="svelte-85suua">
@@ -203,19 +203,19 @@ <h2 id="what-i-would-do-to-make-it-better"><a class="heading-link" title="Permal
 			
 			<script>
 				{
-					__sveltekit_10x07x1 = {
+					__sveltekit_3lmy3c = {
 						env: {},
 						base: new URL(".", location).pathname.slice(0, -1),
 						element: document.currentScript.parentElement
 					};
 
-					const data = [null,{"type":"data","data":{post:{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:["Coding","Javascript","Game Design"],hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read",relatedPosts:[{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:["UX Design","UI Design"],hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E",readingTime:"5 min read"}]}},"uses":{"url":1}},null];
+					const data = [null,{"type":"data","data":{post:{slug:"roger-roger",title:"Roger, Roger",date:"2023-05-18T21:55:27.000Z",excerpt:"Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!",coverImage:"\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",tags:["Coding","Javascript","Game Design"],hidden:false,html:"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E",readingTime:"4 min read",relatedPosts:[{slug:"oink",title:"Oink",date:"2023-04-22T21:55:27.154Z",excerpt:"Reshaping digital financial experience for kids and preteens by introducing tangible interface.",coverImage:"\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",tags:["UI Design","UX Design"],hidden:false,html:"\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E",readingTime:"5 min read"}]}},"uses":{"url":1}},null];
 
 					Promise.all([
-						import("./_app/immutable/entry/start.e776f058.js"),
-						import("./_app/immutable/entry/app.bbae1d65.js")
+						import("./_app/immutable/entry/start.b02acea1.js"),
+						import("./_app/immutable/entry/app.19a18c5b.js")
 					]).then(([kit, app]) => {
-						kit.start(app, __sveltekit_10x07x1.element, {
+						kit.start(app, __sveltekit_3lmy3c.element, {
 							node_ids: [0, 2, 8],
 							data,
 							form: null,
diff --git a/roger-roger/__data.json b/roger-roger/__data.json
index 6ad048c..0820d32 100644
--- a/roger-roger/__data.json
+++ b/roger-roger/__data.json
@@ -1 +1 @@
-{"type":"data","nodes":[null,{"type":"data","data":[{"post":1},{"slug":2,"title":3,"date":4,"excerpt":5,"coverImage":6,"tags":7,"hidden":11,"html":12,"readingTime":13,"relatedPosts":14},"roger-roger","Roger, Roger","2023-05-18T21:55:27.000Z","Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!","\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",[8,9,10],"Coding","Javascript","Game Design",false,"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E","4 min read",[15],{"slug":16,"title":17,"date":18,"excerpt":19,"coverImage":20,"tags":21,"hidden":11,"html":24,"readingTime":25},"oink","Oink","2023-04-22T21:55:27.154Z","Reshaping digital financial experience for kids and preteens by introducing tangible interface.","\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",[22,23],"UX Design","UI Design","\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E","5 min read"],"uses":{"url":1}},null]}
+{"type":"data","nodes":[null,{"type":"data","data":[{"post":1},{"slug":2,"title":3,"date":4,"excerpt":5,"coverImage":6,"tags":7,"hidden":11,"html":12,"readingTime":13,"relatedPosts":14},"roger-roger","Roger, Roger","2023-05-18T21:55:27.000Z","Travel through space with your friends in this cooperative rocket controlling game. Shoot some asteroids, save some astronauts, and try not to fight!","\u002Fimages\u002Fposts\u002Froger-roger\u002Fcover.png",[8,9,10],"Coding","Javascript","Game Design",false,"\u003Cdiv class=\"button_container svelte-1biqf0s\"\u003E\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpunnlert\u002FRogerRoger-ID311-Individual-Project\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tGithub\n    \n\u003C\u002Fa\u003E\n    \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"button style--solid size--medium color--primary  svelte-o0yy46\" data-sveltekit-preload-data\u003E\n\tYouTube\n\u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"introduction\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#introduction\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIntroduction\u003C\u002Fh2\u003E\n\u003Cp\u003E“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_1.png\" alt=\"Picture showing gameplay while the rocket shoots the asteroid\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-main-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-main-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe main screen\u003C\u002Fh2\u003E\n\u003Cp\u003EUpon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in \u003Ca href=\"#the-control-screen\"\u003Ethe control screen\u003C\u002Fa\u003E section.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fstart_page.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fscore_and_info.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EGroup of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid_streaming.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EIf the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgameplay_2.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fnew_highscore.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-control-screen\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-control-screen\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe control screen\u003C\u002Fh2\u003E\n\u003Cp\u003EThe control screen consisted of two parts: socket connection input and the control.\u003C\u002Fp\u003E\n\u003Cp\u003ESocket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FIP_input.jpg\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"gun-controls\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#gun-controls\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGun controls\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the gun. There is a two seconds cooldown period for gun firing.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fgun_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"trajectory-control\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#trajectory-control\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETrajectory control\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the up-down movement of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Ftrajectory_control.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch3 id=\"acceleration\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#acceleration\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAcceleration\u003C\u002Fh3\u003E\n\u003Cp\u003Elets the player controls the left-right of the spaceship\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Facceleration.PNG\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"the-game-mechanics\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-game-mechanics\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe game mechanics\u003C\u002Fh2\u003E\n\u003Cp\u003EPlayer navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.\u003C\u002Fp\u003E\n\u003Cp\u003ETo see a clearer picture, you can check my demo on \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FGxBwiM4es7w\" rel=\"nofollow\"\u003EYouTube\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"how-to-start\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#how-to-start\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHow to start?\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter you clone the repository, you have to go into every folder \u003Ccode\u003E\u002Fclient\u002Fdisplay; gun-control; horizontal control; vertical control\u003C\u002Fcode\u003E and \u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpm install\u003C\u002Fcode\u003E for each one of them.\u003C\u002Fp\u003E\n\u003Cp\u003EIf you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into \u003Ccode\u003E\u002Fclient\u003C\u002Fcode\u003E then click go live.\u003C\u002Fp\u003E\n\u003Cp\u003EFor the display of the main screen, go into \u003Ccode\u003E\u002Fclient\u002Fdisplay\u003C\u002Fcode\u003E directory and run \u003Ccode\u003Enpm run dev\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003ETo initiate the server, go into\u003Ccode\u003E\u002Fserver\u003C\u002Fcode\u003E then run \u003Ccode\u003Enpx nodemon &#39;index.js&#39;\u003C\u002Fcode\u003E\u003C\u002Fp\u003E\n\u003Cp\u003EIf there is an IP address appearing on your ‘display’ screen, you are ready to play!\u003C\u002Fp\u003E\n\u003Ch2 id=\"highlight\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#highlight\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EHighlight\u003C\u002Fh2\u003E\n\u003Cp\u003EAfter finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1biqf0s\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fastronaut.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n    \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002Fasteroid.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cp\u003EI also learned to postpone the socket.io connection and connect to the input IP (in the \u003Ca href=\"#the-control-screen\"\u003Econtrol sections\u003C\u002Fa\u003E) and I am really proud of it.\u003C\u002Fp\u003E\n\u003Ch2 id=\"software\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#software\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESoftware\u003C\u002Fh2\u003E\n\u003Cp\u003EThe game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.\u003C\u002Fp\u003E\n\u003Ch2 id=\"the-architecture\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#the-architecture\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EThe architecture\u003C\u002Fh2\u003E\n\u003Cp\u003EThis is the UML of the game code.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.avif, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.webp, \u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.png\" src=\"\u002Fimages\u002Fposts\u002Froger-roger\u002FRogerRogerUML.drawio.png\" alt=\"Start Page\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"what-i-would-do-to-make-it-better\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-would-do-to-make-it-better\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I would do to make it better\u003C\u002Fh2\u003E\n\u003Cp\u003ERight now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.\u003C\u002Fp\u003E\n\u003Cp\u003EI would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.\u003C\u002Fp\u003E","4 min read",[15],{"slug":16,"title":17,"date":18,"excerpt":19,"coverImage":20,"tags":21,"hidden":11,"html":24,"readingTime":25},"oink","Oink","2023-04-22T21:55:27.154Z","Reshaping digital financial experience for kids and preteens by introducing tangible interface.","\u002Fimages\u002Fposts\u002Foink\u002Fcover.png",[22,23],"UI Design","UX Design","\u003Cp\u003EIf you want a bite-sized summary, check out this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Ch2 id=\"context\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#context\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EContext\u003C\u002Fh2\u003E\n\u003Cp\u003EOink is an attempt to reshape the financial experience for kids and preteens. The problem with the current financial experience is that it is so… \u003Cem\u003Ein the air\u003C\u002Fem\u003E, in a sense that you cannot really touch it; the money you have is just \u003Cem\u003Enumbers\u003C\u002Fem\u003E on the screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIt may make sense for adults that have to manage their complex finance (I am also trying to learn how to be financially responsible) but it does not make sense for kids who just started to learn about money. So, what we’re trying to do was bring back some of charming characteristics of physical money to digital banking tools for children.\u003C\u002Fp\u003E\n\u003Ch2 id=\"overview-and-background\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#overview-and-background\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EOverview and Background\u003C\u002Fh2\u003E\n\u003Cp\u003E\u003Cstrong\u003EPrimary Research\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter our initial research, we came to realize this problem from the two observations\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003EFinancial experimenting during childhood is important\u003C\u002Fstrong\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EThe financial literacy in Korea is low\u003C\u002Fstrong\u003E (and I believe it can also be said for the most part of the world)\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.avif, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.webp, \u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fresearch.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003E\u003Cstrong\u003ESurveys &amp; Interview\u003C\u002Fstrong\u003E\u003Cbr\u003E\nAfter we had our base hypothesis, we designed a series of survey and interview questions to better define the problem in details.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey-design.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe result is them compiled and analyze into more digestible presentation.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.avif, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.webp, \u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fsurvey.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWe found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of \u003Cstrong\u003E\u003Cem\u003Econvenience\u003C\u002Fem\u003E\u003C\u002Fstrong\u003E (which, i know, is obvious but we like to make sure).\u003C\u002Fp\u003E\n\u003Cp\u003EThe interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.\u003C\u002Fp\u003E\n\u003Ch2 id=\"problem\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#problem\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProblem\u003C\u002Fh2\u003E\n\u003Cp\u003EThe problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can \u003Cstrong\u003Esee\u003C\u002Fstrong\u003E, reduced to just a numerical representation on a screen.\u003C\u002Fp\u003E\n\u003Cp\u003EIn order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnother problem is that financial education needs to start early but it’s not always easy to have an effective financial conversation between kids and parents.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fproblem-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAnd that’s the overarching theme of out problem; “Transition Period of Cash to Digital Money”\u003C\u002Fp\u003E\n\u003Ch2 id=\"target-user\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#target-user\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003ETarget User\u003C\u002Fh2\u003E\n\u003Cp\u003ESo, we decided our target user to be 7-13 years old kids and their parents. If the product is expected to ship in 4-5 years, they would be\u003C\u002Fp\u003E\n\u003Cul\u003E\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EKids\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGeneration_Alpha\" rel=\"nofollow\"\u003E\u003Cem\u003EAlpha Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nThe biggest feature of Alpha Generation is that they are the generation directly influenced by the popularization of smartphones and the ubiquitous society. They will grow up and become a member of the financial world.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cp\u003E\u003Cstrong\u003EParents\u003C\u002Fstrong\u003E\u003Cbr\u003E\n\u003Ca href=\"https:\u002F\u002Fen.namu.wiki\u002Fw\u002FMZ%EC%84%B8%EB%8C%80\" rel=\"nofollow\"\u003E\u003Cem\u003EMZ Generation\u003C\u002Fem\u003E\u003C\u002Fa\u003E\u003Cbr\u003E\nGeneration MZ (a South Korean specific term) refers to the Millennials who were born in the early to mid-1990s, and Generation Z who were born in the mid to late 1990s. It is a generation with characteristics of diversity, leisure-oriented, value-based consumption (environmental and ethical values), self-centered, digital native, and fun-seeking.\u003C\u002Fp\u003E\u003C\u002Fli\u003E\u003C\u002Ful\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.avif, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.webp, \u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Ftarget.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"goals\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#goals\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EGoals\u003C\u002Fh2\u003E\n\u003Cp\u003EWe set some goals and objective for each goal so we have a common understanding among members and other stakeholders.\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003E\u003Cstrong\u003Ecreate a seamless transition from physical to digital money\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto achieve this we need to\u003Cul\u003E\u003Cli\u003EHelp them understand the value of digital money\u003C\u002Fli\u003E\n\u003Cli\u003EVisualize digital money\u003C\u002Fli\u003E\n\u003Cli\u003ESimulate the physical manipulation of digital money\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EForm good money management habits\u003C\u002Fstrong\u003E\u003Cbr\u003E\nto encourage good habits we need to\u003Cul\u003E\u003Cli\u003EMake savings appealing\u003C\u002Fli\u003E\n\u003Cli\u003EFoster thoughtful spending and saving\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Cstrong\u003EEncourage conversations about money between kids and parents\u003C\u002Fstrong\u003E\u003Cul\u003E\u003Cli\u003EProvide talking topic and common place to talk\u003C\u002Fli\u003E\u003C\u002Ful\u003E\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Ch2 id=\"ideation\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#ideation\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EIdeation\u003C\u002Fh2\u003E\n\u003Cp\u003EOk. Now we have our goals and objectives, let’s think about how to achieve them.\u003C\u002Fp\u003E\n\u003Cp\u003ETo better formulate and shape the solution, we tried to draw inspiration from the problems.\u003C\u002Fp\u003E\n\u003Cp\u003EWith the results from surveys, interviews, and literature reviews we decided to separately analyze the problem in 3 areas of personal finance for kids:\u003C\u002Fp\u003E\n\u003Col\u003E\u003Cli\u003EEarning\u003C\u002Fli\u003E\n\u003Cli\u003ESpending\u003C\u002Fli\u003E\n\u003Cli\u003ESavings\u003C\u002Fli\u003E\u003C\u002Fol\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we create an affinity diagram of the painpoints.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe recurring theme found in the post-its are that digital money sometimes are too \u003Cem\u003Eabstract\u003C\u002Fem\u003E. So, after some weeks of researching, we came upon a promising solution; \u003Cstrong\u003E“Tangible User Interface”\u003C\u002Fstrong\u003E.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThe initial idea is that we have a physical piggy bank that kids can pretend to drag the money on their mobile screen and drop them into the piggy bank as if they are putting real bank notes into the piggy bank. (Like some of those weird apps from the early era of smartphones that let you pretend to be drinking beer out of your phone.)\u003C\u002Fp\u003E\n\u003Cdiv class=\"drawing_container svelte-1kwwrxy\"\u003E\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n  \u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.avif, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.webp, \u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fbeer-app.jpeg\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\u003C\u002Fdiv\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.avif, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.webp, \u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fideation-5.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EWhich is cute but it didn’t fully answers all of our \u003Ca href=\"#goals\"\u003Egoals\u003C\u002Fa\u003E. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.\u003C\u002Fp\u003E\n\u003Cp\u003EWhat if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?\u003C\u002Fp\u003E\n\u003Ch2 id=\"design\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#design\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EDesign\u003C\u002Fh2\u003E\n\u003Cp\u003EWith that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-1.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-2.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EThen we started to design and iterate through the interface. This is how one iteration looks like.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-3.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Cp\u003EAfter each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process\u003C\u002Fp\u003E\n\u003Cp\u003Ebecause we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.\u003C\u002Fp\u003E\n\u003Cimg srcset=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.avif, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.webp, \u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" src=\"\u002Fimages\u002Fposts\u002Foink\u002Fdesign-4.png\" alt=\"Claims supporting our two observations\" loading=\"lazy\" decoding=\"async\" class=\"svelte-1ykl0dj\"\u003E\n\u003Ch2 id=\"final-product\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#final-product\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EFinal Product\u003C\u002Fh2\u003E\n\u003Cp\u003EAnd after a month of iterations discussion, out of our blood, sweat, and tears came\n\u003Cdiv class=\"sparkle-wrapper svelte-exdx8u\"\u003E\n\t\u003Cspan class=\"slot-wrapper svelte-exdx8u\"\u003E\u003Cstrong class=\"default svelte-8f8x6d\"\u003EOink!\n\u003C\u002Fstrong\u003E\u003C\u002Fspan\u003E\n\u003C\u002Fdiv\u003E\n :D\n\u003C\u002Fp\u003E\n\u003Cp\u003EIt might be better for your experience if you see this \u003Ca href=\"https:\u002F\u002Fyoutu.be\u002FI8RZJOs1q6Y\" rel=\"nofollow\"\u003Evideo\u003C\u002Fa\u003E before we dive into the product.\u003C\u002Fp\u003E\n\u003Ch2 id=\"impacts\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#impacts\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EImpacts\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-learned\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-learned\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I learned\u003C\u002Fh2\u003E\n\u003Ch2 id=\"what-i-wish-were-more-explored\"\u003E\u003Ca class=\"heading-link\" title=\"Permalink\" aria-hidden=\"true\" href=\"#what-i-wish-were-more-explored\"\u003E\u003Cspan\u003E#\u003C\u002Fspan\u003E\u003C\u002Fa\u003EWhat I wish were more explored\u003C\u002Fh2\u003E","5 min read"],"uses":{"url":1}},null]}
diff --git a/rss.xml b/rss.xml
index 42eb73f..8c5abb1 100644
--- a/rss.xml
+++ b/rss.xml
@@ -107,7 +107,7 @@
           <description>Reshaping digital financial experience for kids and preteens by introducing tangible interface.</description>
           <link>https://punnlert.github.io//oink</link>
           <pubDate>Sat, 22 Apr 2023 21:55:27 +0000</pubDate>
-          <category>UX Design</category><category>UI Design</category>
+          <category>UI Design</category><category>UX Design</category>
           <content:encoded><![CDATA[
             <div style="margin: 50px 0; font-style: italic;">
               If anything looks wrong, 
@@ -136,7 +136,6 @@ After we had our base hypothesis, we designed a series of survey and interview q
 <p>We found that around 50% of children switched from using cash to debit card at around 12-14 years old. The main reason they make the switch is because of <strong><em>convenience</em></strong> (which, i know, is obvious but we like to make sure).</p>
 <p>The interesting part is what changed after they started using digital money. There are some positive changes like the children gets more freedom to spend but that eventually leads to negative effects like overconsumptions and lack of planning.</p>
 <h2 id="problem"><a class="heading-link" title="Permalink" aria-hidden="true" href="#problem"><span>#</span></a>Problem</h2>
-
 <p>The problem we see here is that the change from physical money to digital one may be too sudden. From physical assets that you can <strong>see</strong>, reduced to just a numerical representation on a screen.</p>
 <p>In order to better encourage good financial habit since teenage year, maybe a better transition to help children acclimated themselves to the digital financial world.</p>
 <img srcset="/images/posts/oink/problem-1.avif, /images/posts/oink/problem-1.webp, /images/posts/oink/problem-1.png" src="/images/posts/oink/problem-1.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
@@ -181,11 +180,26 @@ to encourage good habits we need to<ul><li>Make savings appealing</li>
 <p>Which is cute but it didn’t fully answers all of our <a href="#goals">goals</a>. But it got the ball rolling! We ended up liking the potential user experience of this idea so much that we started to build the solutions around it.</p>
 <p>What if dragging around bank notes icons isn’t just contained in the saving interface, but it is the main idea of this financial interface?</p>
 <h2 id="design"><a class="heading-link" title="Permalink" aria-hidden="true" href="#design"><span>#</span></a>Design</h2>
-<p>With that in mind, we divided the team into 2 parts: one developing a rough information architecture of the system while the other gather references and moodboards.</p>
+<p>With that in mind, we divided the team into 2 parts: one developing a rough Information Architecture (IA) of the system while the other gather references and moodboards.</p>
 <img srcset="/images/posts/oink/design-1.avif, /images/posts/oink/design-1.webp, /images/posts/oink/design-1.png" src="/images/posts/oink/design-1.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
 <img srcset="/images/posts/oink/design-2.avif, /images/posts/oink/design-2.webp, /images/posts/oink/design-2.png" src="/images/posts/oink/design-2.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
 <p>Then we started to design and iterate through the interface. This is how one iteration looks like.</p>
 <img srcset="/images/posts/oink/design-3.avif, /images/posts/oink/design-3.webp, /images/posts/oink/design-3.png" src="/images/posts/oink/design-3.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
+<p>After each iteration, a team meeting is organized and we go through the user flow together. I had so much fun in this process</p>
+<p>because we get to disect the prototype with the teammates, discuss the rationale behind each design or interactions, and defend your own design.</p>
+<img srcset="/images/posts/oink/design-4.avif, /images/posts/oink/design-4.webp, /images/posts/oink/design-4.png" src="/images/posts/oink/design-4.png" alt="Claims supporting our two observations" loading="lazy" decoding="async" class="svelte-1ykl0dj">
+<h2 id="final-product"><a class="heading-link" title="Permalink" aria-hidden="true" href="#final-product"><span>#</span></a>Final Product</h2>
+<p>And after a month of iterations discussion, out of our blood, sweat, and tears came
+<div class="sparkle-wrapper svelte-exdx8u">
+	<span class="slot-wrapper svelte-exdx8u"><strong class="default svelte-8f8x6d">Oink!
+</strong></span>
+</div>
+ :D
+</p>
+<p>It might be better for your experience if you see this <a href="https://youtu.be/I8RZJOs1q6Y" rel="nofollow">video</a> before we dive into the product.</p>
+<h2 id="impacts"><a class="heading-link" title="Permalink" aria-hidden="true" href="#impacts"><span>#</span></a>Impacts</h2>
+<h2 id="what-i-learned"><a class="heading-link" title="Permalink" aria-hidden="true" href="#what-i-learned"><span>#</span></a>What I learned</h2>
+<h2 id="what-i-wish-were-more-explored"><a class="heading-link" title="Permalink" aria-hidden="true" href="#what-i-wish-were-more-explored"><span>#</span></a>What I wish were more explored</h2>
           ]]></content:encoded>
           <media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://punnlert.github.io///images/posts/oink/cover.png"/>
           <media:content xmlns:media="http://search.yahoo.com/mrss/" medium="image" url="https://punnlert.github.io///images/posts/oink/cover.png"/>