game-engine

A lightweight JavaScript game engine
git clone git://soophie.de/game-engine

Added blog

commit: eb58d3c82c84be3d86adbd2be73ea82d9ddbbe1d
parent: 7f4bcb6943288592093126116231652ebc30d276
author: typable <typable.dev@gmail.com>
time: 2021-03-20 23:33

6 file(s) changed, 336 insertion(s), 9 deletion(s)[browse files]

M asset/less/theme.less
A blog/index.html
A blog/spring-framework.html
M design-system/index.html
M game-engine/index.html
M index.html

asset/less/theme.less [new file] [old file]

62p {
63	color: @color-gray-700;
64	font-size: 16px;
65	margin-top: @space-1x;
66	line-height: 24px;
65	margin-top: @space-2x;
66	line-height: 26px;
67
68	a {
69		text-decoration: underline;
70		white-space: nowrap;
71	}
72
73	mark {
74		background: @color-gray-200;
75		white-space: nowrap;
76		border-radius: 2px;
77		padding: 2px 4px;
78		color: @color-gray-800;
79	}
80
81	b {
82		font-weight: 500;
83
84		&.note {
85			margin-bottom: calc(@space-1x / 2);
86			display: inline-block;
87		}
88	}
89
90	span {
91		color: inherit;
92		display: block;
93	}
94}
95
96.slogan {

103}
104
105.subline {
106	margin-top: @space-2x;
107	font-weight: 500;
108	font-size: 18px;
109	line-height: 28px;
110	color: @color-gray-600;
111}
112
113a {

120	}
121}
122
123.list {
124	padding-left: @space-1x;
125
126	p {
127		margin-left: calc(@space-1x / 2);
128	}
129
130	&.list-short {
131		margin-top: @space-1x;
132
133		p {
134			margin-top: calc(@space-1x / 2);
135		}
136	}
137}
138
139&::-webkit-scrollbar {
140	width: 10px;
141}

167
168	ul {
169		list-style-type: none;
170		margin-top: @space-2x;
171
172		li {
173			margin-top: calc(@space-1x / 2);

blog/index.html [new file]

1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3	<head>
4		<meta charset="utf-8">
5		<meta name="viewport" content="width=device-width, initial-scale=1.0">
6		<meta name="author" content="typable">
7		<meta name="keywords" content="">
8		<meta name="description" content="">
9		<meta name="robots" content="noindex, nofollow">
10		<meta name="google" content="notranslate">
11		<title>git.typable</title>
12		<link href="/asset/img/favicon.png" rel="shortcut icon" type="image/png">
13		<link href="/asset/css/style.css" rel="stylesheet">
14		<script src="/asset/js/index.js" type="module"></script>
15	</head>
16	<body>
17		<main class="container-fluid">
18			<div class="row">
19				<div class="container">
20					<aside>
21						<h4 data-rel="top">Blog</h4>
22						<ul></ul>
23					</aside>
24					<ul class="breadcrumb">
25						<li><a href="/">Home</a></li>
26						<li>Blog</li>
27					</ul>
28					<h1>Blog</h1>
29					<p class="subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
30					<div class="space-1"></div>
31					<p>--> <a href="/blog/spring-framework">Spring Framework</a></p>
32				</div>
33			</div>
34		</main>
35		<footer class="container-fluid">
36			<div class="row">
37				<div class="container">
38					<p>&copy; typable 2021</p>
39					<a href="https://www.buymeacoffee.com/typable">Donate</a>
40					<a href="https://typable.dev/imprint">Imprint</a>
41					<a href="https://typable.dev/terms">Terms</a>
42				</div>
43			</div>
44		</footer>
45	</body>
46</html>

blog/spring-framework.html [new file]

1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3	<head>
4		<meta charset="utf-8">
5		<meta name="viewport" content="width=device-width, initial-scale=1.0">
6		<meta name="author" content="typable">
7		<meta name="keywords" content="">
8		<meta name="description" content="">
9		<meta name="robots" content="noindex, nofollow">
10		<meta name="google" content="notranslate">
11		<title>git.typable</title>
12		<link href="/asset/img/favicon.png" rel="shortcut icon" type="image/png">
13		<link href="/asset/css/style.css" rel="stylesheet">
14		<script src="/asset/js/index.js" type="module"></script>
15	</head>
16	<body>
17		<main class="container-fluid">
18			<div class="row">
19				<div class="container">
20					<aside>
21						<h4 data-rel="top">Spring Framework</h4>
22						<ul>
23							<li data-rel="requirements">Requirements</li>
24							<li data-rel="getting-started">Getting Started</li>
25							<li data-rel="configurations">Configurations</li>
26							<li data-rel="start-up">Start Up</li>
27						</ul>
28					</aside>
29					<ul class="breadcrumb">
30						<li><a href="/">Home</a></li>
31						<li><a href="/blog">Blog</a></li>
32						<li>Spring Framework</li>
33					</ul>
34					<h1>Spring Framework</h1>
35					<p class="subline">The following article is a short introduction to the basic setup of a new Spring
36						Web Project. All required dependencies for this project are managed by a
37						<a href="https://stackoverflow.com/a/19516639">Build Tool</a>, in this case,
38						<a href="https://gradle.org">Gradle</a>.</p>
39					<h2 data-ref="requirements">Requirements</h2>
40					<h4>Install Eclipse Plugins</h4>
41					<p>The listed Eclipse Plugins are needed to work on Spring projects smoothly. To check if they are
42						already installed and if not how to install them, check out this article:
43						<a href="">Eclipse - Install Plugins</a></p>
44					<ul class="list">
45						<li>
46							<p>Spring Tools 4 - It provides the functionality to create and launch Spring projects.<br>
47								<a href="https://marketplace.eclipse.org/content/spring-tools-4-aka-spring-tool-suite-4">Eclipse Marketplace</a></p>
48						</li>
49						<li>
50							<p>Eclipse Web Developer Tools - Deliveres HTML, CSS and JS Editors.<br>
51								<a href="https://marketplace.eclipse.org/content/eclipse-web-developer-tools-0">Eclipse Marketplace</a></p>
52						</li>
53					</ul>
54					<div class="space-2"></div>
55					<h4>Prepare Eclipse Workspace</h4>
56					<ul class="list">
57						<li>
58							<p><b>File Association</b><br><br>"JSP and Tag files has the same Syntax as HTML", in this case, we can
59								now associate the default HTML Editor (delivered by the Eclipse Web Developer Tools Plugin)
60								also to the file types .jsp and .tag to let Eclipse now with which Editor these files
61								should be opened.<br><br>More details about the association of file types could be found
62								in this article: <a href="https://help.eclipse.org/2021-03/index.jsp">Eclipse - Manage File Associations</a></p>
63						</li>
64						<div class="space-1"></div>
65						<li>
66							<p><b>Perspective and Views</b><br><br>Web Projects are typically viewed in the Resource Perspective,
67								so if the Perspective is not shown by default, add it to your Eclipse Workspace.<br><br>
68								The needed views for a smooth working process are the following:<br><br>
69								-> Project Explorer<br>
70								-> Boot Dashboard<br>
71								-> Console<br>
72								-> Gradle Tasks<br><br>
73								More about managing Perspectives and Views can be found here:
74								<a href="https://help.eclipse.org/2021-03/index.jsp">Eclipse - Manage Perspectives and Views</a></p>
75						</li>
76					</ul>
77					<h2 data-ref="getting-started">Getting Started</h2>
78					<h4>Project Setup</h4>
79					<p>To create a new Spring project in Eclipse we choose the project type <mark>Spring Starter Project</mark> under
80						the category <mark>Spring Boot</mark>.</p>
81					<p><b>File -> New -> Project... -> Spring Boot -> Spring Starter Project</b></p>
82					<p>The following properties are required to set up our project correctly:</p>
83					<ul class="list list-short">
84						<li>
85							<p><mark>Name</mark> - The name of your project.</p>
86						</li>
87						<li>
88							<p><mark>Type</mark> - The Build Tool to use for the project. In our case, we use Gradle (Buildship 3.x).</p>
89						</li>
90						<li>
91							<p><mark>Java Version</mark> - The Java Version for the project. The currently preferred Version is 11.</p>
92						</li>
93						<li>
94							<p><mark>Group</mark> - Should be the same as the Package path.</p>
95						</li>
96						<li>
97							<p><mark>Artifact</mark> - The name of your startup Java file.</p>
98						</li>
99						<li>
100							<p><mark>Version</mark> - The version of your project.</p>
101						</li>
102						<li>
103							<p><mark>Description</mark> - A short description of your project.</p>
104						</li>
105						<li>
106							<p><mark>Package</mark> - The root package of your project.<br><br>
107								<b class="note">Important:</b> <span>All Java files must be found in the defined root package
108								or a subpackage of them, otherwise Spring is unable to locate these files.</span></p>
109						</li>
110					</ul>
111					<p>Complete the setup wizard by skipping the choose of dependencies and click Finish. Now Eclipse
112						prepares our Spring Project, this could take some time to build up all needed resources.</p>
113					<p>Then this is done the worktree should now contain the following directories and files:</p>
114					<code><pre><span class="p">Tutorial</span>
115 ├ <span class="p">src/main</span>
116 |  ├ <span class="p">java</span>
117 |  |  └ <span class="n">de.innovate.tutorial</span>
118 |  |     └ <span class="n">TutorialApplication.java</span>
119 |  └ <span class="p">resources</span>
120 |     └ <span class="n">application.properties</span>
121 ├ <span class="p">gradle</span>
122 |  └ ∙∙∙
123 ├ <span class="n">build.gradle</span>
124 ├ <span class="n">gradlew</span>
125 ├ <span class="n">gradlew.bat</span>
126 ├ <span class="n">HELP.md</span>
127 └ <span class="n">settings.gradle</span></pre></code>
128					<p><b class="note">Notice:</b> <span>All <mark>test</mark> directories and files can be deleted.
129						They aren't needed in our working process with Spring.</span></p>
130					<div class="space-2"></div>
131					<h4>Project Building</h4>
132					<p>The basic workspace setup is completed and we can now define the essential dependencies for
133						Spring Web. All required dependencies for our project should be referenced in the build.gradle
134						file. For that replace the content of the <mark>/build.gradle</mark> file with the following code snippet:</p>
135					<code><pre><span class="p">plugins</span> {
136	<span class="n">id</span> <span class="s">'org.springframework.boot'</span> <span class="n">version</span> <span class="s">'2.2.0.RELEASE'</span>
137	<span class="n">id</span> <span class="s">'io.spring.dependency-management'</span> <span class="n">version</span> <span class="s">'1.0.8.RELEASE'</span>
138	<span class="n">id</span> <span class="s">'java'</span>
139}
140<span class="n">group</span> = <span class="s">'de.typable.tutorial'</span>
141<span class="n">version</span> = <span class="s">'0.0.1'</span>
142<span class="n">sourceCompatibility</span> = <span class="s">'11'</span>
143<span class="p">repositories</span> {
144	<span class="n">mavenCentral</span>()
145}
146<span class="p">dependencies</span> {
147	<span class="x">/* Spring Web */</span>
148	<span class="n">implementation</span> <span class="s">'org.springframework.boot:spring-boot-starter-web'</span>
149	<span class="x">/* JSP & JSTL */</span>
150	<span class="n">implementation</span> <span class="s">'org.apache.tomcat.embed:tomcat-embed-jasper:9.0.27'</span>
151	<span class="n">implementation</span> <span class="s">'javax.servlet:jstl:1.2'</span>
152}</pre></code>
153					<p>We have now referenced the elementary dependencies for a Spring Web project. Additional could be
154						added in the dependencies section. More about dependencies and where to find them could be found
155						in this article: <a href="https://docs.gradle.org/current/userguide/core_dependency_management.html">Gradle - Dependencies</a></p>
156					<p>The next step is to build the project with Gradle to download all in the build.gradle defined
157						dependencies. To do that go to the Gradle Tasks View and double-click on build under the build
158						section.</p>
159					<p><b>Gradle Tasks -> [Project] -> build -> build</b></p>
160					<p>During the building process, the current progress will be displayed in the Gradle Executions View
161						and the Console View. The Gradle Executions View is in most cases needless because the Console
162						gives us much clearer feedback about what's happening and what went wrong if the build crashes.
163						To ensure the building process is successful the Console displays the message
164						<mark>BUILD SUCCESSFUL</mark>.</p>
165					<p><b class="note">Tip:</b> <span>Disabling the Gradle Executions View can be done as followed:
166						<b>Window -> Preferences -> Gradle -> Show Executions View</b></span></p>
167					<p>The building process is finished and this has affected our project worktree, because of that, we
168						need to refresh our project. For that, we right-click on the project in the Package Explorer
169						View and click on <mark>Refresh Gradle Project</mark> under the Gradle section. After that, our Spring project
170						is up to date.</p>
171					<p><b>Project Explorer -> [Project] -> Gradle -> Refresh Gradle Project</b></p>
172					<h2 data-ref="configurations">Configurations</h2>
173					<p>To optimize the project to our needs, we configure some properties in the
174						<mark>application.properties</mark> file. This can also be done with XML. More information about
175						XML configuration can be found here:
176						<a href="https://docs.spring.io/spring-boot/docs/current/reference/html/appendix-application-properties.html">Spring - XML Configurations</a></p>
177					<p>Add the following properties to <mark>/src/main/resources/application.properties</mark>:</p>
178					<code><pre><span class="p">server.port</span>=<span class="n">8080</span>
179<span class="p">spring.mvc.view.prefix</span>=<span class="n">/WEB-INF/views/</span>
180<span class="p">spring.mvc.view.suffix</span>=<span class="n">.jsp</span>
181<span class="x"># Reload static resources (Temporary)</span>
182<span class="p">spring.resources.static-locations</span>=<span class="n">file:src/main/resources/static/</span></pre></code>
183					<p>Here a short explanation of the properties from above:</p>
184					<ul class="list">
185						<li>
186							<p><mark>server.port</mark> - Defines which <a href="https://de.wikipedia.org/wiki/Port_(Protokoll)">Port</a>
187								is used to listen for incoming requests by the Browser. The default ports are 80
188								(http://) and 443 (https://).<br><br><b class="note">Example:</b> <span>80 -> http://localhost, 443 ->
189								https://localhost, 8080 -> http://localhost:8080</span></p>
190						</li>
191						<li>
192							<p><mark>spring.mvc.view.prefix</mark> - Defines in which directory the server should looking
193								for them to be served HTML, JSP files. The default path is <mark>/WEB-INF/views/</mark>
194								which represents <mark>/src/main/resources/META-INF/resources/WEB-INF/views/</mark>.</p>
195						</li>
196						<li>
197							<p><mark>spring.mvc.view.suffix</mark> - Defines the file type for them to be served files.
198								The default file type is are .jsp and .html.</p>
199						</li>
200						<li>
201							<p><mark>spring.resources.static-locations</mark> - Files in the defined path can be modified
202								without restarting the server to see the changes. It is common to put all resources like
203								CSS, JavaScript and Images in <mark>/src/main/resources/static/</mark>.<br><br>
204								<b>Notice:</b> This is a temporary property only for development</p>
205						</li>
206					</ul>
207					<h2 data-ref="start-up">Start Up</h2>
208					<p>Now it's at the time to launch our Spring Web server to confirm all is configured correctly.<br><br>To
209						start the <a href="http://tomcat.apache.org">Apache Tomcat</a> server that provides the basic
210						functionality of a web server which is integrated in our handy Spring Tools Plugin, we go to the
211						<mark>Boot Dashboard</mark> View expand the <mark>local</mark> section and select the project
212						with our predefined name and click on the "Start or restart" button at the top of the View.</p>
213					<p>To confirm the server is started correctly the console should show up the message:
214						<mark>Started TutorialApplication ...</mark></p>
215					<p>Now the Spring Web server is available under the defined port and can be viewed in the Browser of
216						your choice. The page should show the message <mark>Whitelabel Error Page</mark>, this means that
217						no content is currently available.</p>
218					<p>Now everything is ready to build your project.</p>
219				</div>
220			</div>
221		</main>
222		<footer class="container-fluid">
223			<div class="row">
224				<div class="container">
225					<p>&copy; typable 2021</p>
226					<a href="https://www.buymeacoffee.com/typable">Donate</a>
227					<a href="https://typable.dev/imprint">Imprint</a>
228					<a href="https://typable.dev/terms">Terms</a>
229				</div>
230			</div>
231		</footer>
232	</body>
233</html>

design-system/index.html [new file] [old file]

33					<h2 data-ref="introduction">Introduction</h2>
34					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
35					<div class="space-1"></div>
36					<p><a href="/design-system/color">Color</a></p>
37					<p><a href="/design-system/icons">Icons</a></p>
36					<p>--> <a href="/design-system/color">Color</a></p>
37					<p>--> <a href="/design-system/icons">Icons</a></p>
38					<h2 data-ref="normalize">Normalize</h2>
39					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
40					<code><pre><span class="c">@import</span> <span class="p">url</span>(<span class="s">'<span class="ref ref-link">https://git.typable.dev/std/less/normalize.less</span>'</span>);</pre></code>

game-engine/index.html [new file] [old file]

36					<h2 data-ref="introduction">Introduction</h2>
37					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
38					<div class="space-2"></div>
39					<p><a href="/game-engine/api">API</a></p>
39					<p>--> <a href="/game-engine/api">API</a></p>
40					<div class="embed">
41						<iframe src="/asset/data/embed.html" frameborder="0"></iframe>
42						<p>Source: <a href="https://jsitor.com/NooIssgCT">"Universe" - typable</a></p>

index.html [new file] [old file]

22					</ul>
23					<h1 class="slogan">Build for the<br>web of tomorrow</h1>
24					<p class="slogan-subline subline">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
25					<p><a href="/design-system">Design System</a></p>
26					<p><a href="/game-engine">Game Engine</a></p>
27					<p><a href="/component-rendering">Component Rendering</a></p>
28					<p><a href="/canvas-toolkit">Canvas Toolkit</a></p>
25					<p>--> <a href="/design-system">Design System</a></p>
26					<p>--> <a href="/game-engine"> Game Engine</a></p>
27					<p>--> <a href="/component-rendering">Component Rendering</a></p>
28					<p>--> <a href="/canvas-toolkit">Canvas Toolkit</a></p>
29					<p>--> <a href="/blog">Blog</a></p>
30				</div>
31			</div>
32		</main>

so://phie

game-engine

Added blog