Skip to content

Commit 1a54c4a

Browse files
codinger-cutiecodinger-cutie
committed
Update README and add PWA code
1 parent d496cc1 commit 1a54c4a

8 files changed

+412
-0
lines changed

‎.replit

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
hidden=[".config"]
2+
3+
# hosting is currently hardcoded for this language
4+
# [hosting]
5+
# route = "/"
6+
# directory= "/"
7+
8+
[nix]
9+
channel = "stable-21_11"
10+
11+
[languages.html]
12+
pattern = "**/*.html"
13+
[languages.html.languageServer]
14+
start = "vscode-html-language-server --stdio"
15+
[languages.html.languageServer.initializationOptions]
16+
provideFormatter = true
17+
[languages.html.languageServer.configuration.html]
18+
customData = [ ]
19+
autoCreateQuotes = true
20+
autoClosingTags = true
21+
mirrorCursorOnMatchingTag = false
22+
23+
[languages.html.languageServer.configuration.html.completion]
24+
attributeDefaultValue = "doublequotes"
25+
26+
[languages.html.languageServer.configuration.html.format]
27+
enable = true
28+
wrapLineLength = 120
29+
unformatted = "wbr"
30+
contentUnformatted = "pre,code,textarea"
31+
indentInnerHtml = false
32+
preserveNewLines = true
33+
indentHandlebars = false
34+
endWithNewline = false
35+
extraLiners = "head, body, /html"
36+
wrapAttributes = "auto"
37+
templating = false
38+
unformattedContentDelimiter = ""
39+
40+
[languages.html.languageServer.configuration.html.suggest]
41+
html5 = true
42+
43+
[languages.html.languageServer.configuration.html.validate]
44+
scripts = true
45+
styles = true
46+
47+
[languages.html.languageServer.configuration.html.hover]
48+
documentation = true
49+
references = true
50+
51+
[languages.html.languageServer.configuration.html.trace]
52+
server = "off"
53+
54+
[languages.javascript]
55+
pattern = "**/{*.js,*.jsx,*.ts,*.tsx,*.mjs,*.cjs}"
56+
[languages.javascript.languageServer]
57+
start = "typescript-language-server --stdio"
58+
59+
[languages.css]
60+
pattern = "**/{*.less,*.scss,*.css}"
61+
[languages.css.languageServer]
62+
start = "vscode-css-language-server --stdio"
63+
[languages.css.languageServer.configuration.css]
64+
customData = [ ]
65+
validate = true
66+
67+
[languages.css.languageServer.configuration.css.completion]
68+
triggerPropertyValueCompletion = true
69+
completePropertyWithSemicolon = true
70+
71+
[languages.css.languageServer.configuration.css.hover]
72+
documentation = true
73+
references = true
74+
75+
[languages.css.languageServer.configuration.css.lint]
76+
# Configure linting
77+
# ignore = don't show any warning or error
78+
# warning = show yellow underline
79+
# error = show red underline
80+
argumentsInColorFunction = "error" # Invalid number of parameters
81+
boxModel = "ignore" # Do not use width or height when using padding or border
82+
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
83+
duplicateProperties = "warning" # Do not use duplicate style definitions
84+
emptyRules = "warning" # Do not use empty rulesets
85+
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
86+
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
87+
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
88+
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
89+
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
90+
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
91+
importStatement = "ignore" # Import statements do not load in parallel
92+
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
93+
universalSelector = "ignore" # The universal selector (*) is known to be slow
94+
unknownAtRules = "warning" # Unknown at-rule
95+
unknownProperties = "warning" # Unknown property.
96+
validProperties = [ ] # add some properties that the linter doesn't know about
97+
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
98+
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
99+
zeroUnits = "ignore" # No unit for zero needed
100+
101+
[languages.css.languageServer.configuration.css.trace]
102+
server = "off"
103+
104+
[languages.css.languageServer.configuration.scss]
105+
validate = true
106+
107+
[languages.css.languageServer.configuration.scss.completion]
108+
triggerPropertyValueCompletion = true
109+
completePropertyWithSemicolon = true
110+
111+
[languages.css.languageServer.configuration.scss.hover]
112+
documentation = true
113+
references = true
114+
115+
[languages.css.languageServer.configuration.scss.lint]
116+
# Configure linting
117+
# ignore = don't show any warning or error
118+
# warning = show yellow underline
119+
# error = show red underline
120+
argumentsInColorFunction = "error" # Invalid number of parameters
121+
boxModel = "ignore" # Do not use width or height when using padding or border
122+
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
123+
duplicateProperties = "warning" # Do not use duplicate style definitions
124+
emptyRules = "warning" # Do not use empty rulesets
125+
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
126+
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
127+
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
128+
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
129+
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
130+
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
131+
importStatement = "ignore" # Import statements do not load in parallel
132+
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
133+
universalSelector = "ignore" # The universal selector (*) is known to be slow
134+
unknownAtRules = "warning" # Unknown at-rule
135+
unknownProperties = "warning" # Unknown property.
136+
validProperties = [ ] # add some properties that the linter doesn't know about
137+
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
138+
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
139+
zeroUnits = "ignore" # No unit for zero needed"
140+
141+
[languages.css.languageServer.configuration.less]
142+
validate = true
143+
144+
[languages.css.languageServer.configuration.less.completion]
145+
triggerPropertyValueCompletion = true
146+
completePropertyWithSemicolon = true
147+
148+
[languages.css.languageServer.configuration.less.hover]
149+
documentation = true
150+
references = true
151+
152+
[languages.css.languageServer.configuration.less.lint]
153+
# Configure linting
154+
# ignore = don't show any warning or error
155+
# warning = show yellow underline
156+
# error = show red underline
157+
argumentsInColorFunction = "error" # Invalid number of parameters
158+
boxModel = "ignore" # Do not use width or height when using padding or border
159+
compatibleVendorPrefixes = "ignore" # When using a vendor-specific prefix make sure to also include all other vendor-specific properties"
160+
duplicateProperties = "warning" # Do not use duplicate style definitions
161+
emptyRules = "warning" # Do not use empty rulesets
162+
float = "ignore" # Avoid using 'float'. Floats lead to fragile CSS that is easy to break if one aspect of the layout changes.
163+
fontFaceProperties = "warning" # @font-face rule must define 'src' and 'font-family' properties
164+
hexColorLength = "error" # Hex colors must consist of three, four, six or eight hex numbers
165+
idSelector = "ignore" # Selectors should not contain IDs because these rules are too tightly coupled with the HTML.
166+
ieHack = "ignore" # IE hacks are only necessary when supporting IE7 and older
167+
important = "ignore" # Avoid using !important. It is an indication that the specificity of the entire CSS has gotten out of control and needs to be refactored.
168+
importStatement = "ignore" # Import statements do not load in parallel
169+
propertyIgnoredDueToDisplay = "warning" # Property is ignored due to the display
170+
universalSelector = "ignore" # The universal selector (*) is known to be slow
171+
unknownAtRules = "warning" # Unknown at-rule
172+
unknownProperties = "warning" # Unknown property.
173+
validProperties = [ ] # add some properties that the linter doesn't know about
174+
unknownVendorSpecificProperties = "ignore" # Unknown vendor specific property.
175+
vendorPrefix = "warning" # When using a vendor-specific prefix also include the standard property
176+
zeroUnits = "ignore" # No unit for zero needed"
177+
178+
[gitHubImport]
179+
requiredFiles = [".replit", "replit.nix", ".config"]

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
11
# pwa-threejs
22
A PWA (Progressive Web App) with a sample Three.js Game
3+
4+
5+
6+
## PWA Sources
7+
[PWA Tutorial:](https://www.freecodecamp.org/news/build-a-pwa-from-scratch-with-html-css-and-javascript/)
8+
9+
[PWA Source Code:](https://github.com/ibrahima92/pwa-with-vanilla-js)

‎index.html

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<link rel="stylesheet" href="style.css">
6+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
9+
<title>Three.js (Hello Roman odc.1)</title>
10+
11+
<!-- HTML -->
12+
13+
</head>
14+
15+
<body>
16+
<p>Nothing to see here...</p>
17+
<button ontouchmove="moveleft()">Left</button>
18+
<button ontouchmove="moveright()">Right</button>
19+
<button ontouchmove="moveforward()">Przód</button>
20+
<button ontouchmove="movebackward()">Tył</button>
21+
<button onclick="rotatex()">Cam Rotate X</button>
22+
<!-- Project -->
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js"></script>
24+
<script src="main.js"></script>
25+
</body>
26+
</html>

‎main.js

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
const scene = new THREE.Scene();
2+
const camera = new THREE.PerspectiveCamera(24, window.innerWidth / window.innerHeight, 0.1, 1000);
3+
4+
const renderer = new THREE.WebGLRenderer({ antialias: true});
5+
renderer.setSize(window.innerWidth, window.innerHeight);
6+
document.body.appendChild(renderer.domElement);
7+
8+
const colorYellow = new THREE.Color("hsl(40, 100%, 60%)");
9+
const colorPink = new THREE.Color("hsl(306, 100%, 60%)");
10+
const colorLight = new THREE.Color("hsl(40, 100%, 95%)");
11+
12+
const cubeGeometry = new THREE.BoxGeometry(1, 1.5, 0.9);
13+
const cubeMaterial = new THREE.MeshPhongMaterial({
14+
color: colorYellow,
15+
});
16+
17+
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
18+
const light = new THREE.PointLight(colorLight, 2);
19+
const light2 = new THREE.PointLight(colorLight, .5);
20+
21+
light.position.set(-40, -20, 20);
22+
light2.position.set(40, 20, 10);
23+
24+
scene.add(light);
25+
scene.add(light2);
26+
scene.add(cube);
27+
28+
camera.position.z = 15;
29+
30+
cube.rotation.x = 20;
31+
cube.rotation.z = -20;
32+
33+
const animate = () => {
34+
/*cube.rotation.x += 0.01;*/
35+
/*cube.rotation.z -= 0.05;*/
36+
requestAnimationFrame(animate);
37+
renderer.render(scene, camera);
38+
}
39+
40+
animate();
41+
42+
function moveleft() {
43+
camera.position.x += 0.1;
44+
}
45+
46+
function moveright() {
47+
camera.position.x -= 0.1;
48+
}
49+
50+
function moveforward() {
51+
camera.position.z -= 0.5;
52+
}
53+
54+
function movebackward() {
55+
camera.position.z += 0.5;
56+
}
57+
58+
function rotatex() {
59+
camera.rotation.y += 0.01;
60+
if (camera.position.y < -9) {
61+
camera.position.y += 20;
62+
}
63+
}
64+
65+
document.onkeydown = (e) => {
66+
e = e || window.event;
67+
if (e.keyCode === 38) {
68+
console.log('up arrow pressed')
69+
} else if (e.keyCode === 40) {
70+
console.log('down arrow pressed')
71+
} else if (e.keyCode === 37) {
72+
console.log('left arrow pressed')
73+
} else if (e.keyCode === 39) {
74+
console.log('right arrow pressed')
75+
}
76+
}
77+
78+
window.addEventListener('keydown', logKey);
79+
80+
function logKey(e) {
81+
console.log(e.keyCode);
82+
if (e.keyCode == 87) {
83+
console.log('w');
84+
moveforward();
85+
}
86+
if (e.keyCode == 65) {
87+
console.log('a');
88+
moveleft();
89+
}
90+
if (e.keyCode == 83) {
91+
console.log('s');
92+
movebackward();
93+
}
94+
if (e.keyCode == 68) {
95+
console.log('d');
96+
moveright();
97+
}
98+
}
99+
100+
101+
102+
if ("serviceWorker" in navigator) {
103+
window.addEventListener("load", function() {
104+
navigator.serviceWorker
105+
.register("/serviceWorker.js")
106+
.then(res => console.log("service worker registered"))
107+
.catch(err => console.log("service worker not registered", err))
108+
})
109+
}

‎manifest.json

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{
2+
"name": "Dev'Coffee",
3+
"short_name": "DevCoffee",
4+
"start_url": "index.html",
5+
"display": "standalone",
6+
"background_color": "#fdfdfd",
7+
"theme_color": "#db4938",
8+
"orientation": "portrait-primary",
9+
"icons": [
10+
{
11+
"src": "/images/icons/icon-72x72.png",
12+
"type": "image/png",
13+
"sizes": "72x72"
14+
},
15+
{
16+
"src": "/images/icons/icon-96x96.png",
17+
"type": "image/png",
18+
"sizes": "96x96"
19+
},
20+
{
21+
"src": "/images/icons/icon-128x128.png",
22+
"type": "image/png",
23+
"sizes": "128x128"
24+
},
25+
{
26+
"src": "/images/icons/icon-144x144.png",
27+
"type": "image/png",
28+
"sizes": "144x144"
29+
},
30+
{
31+
"src": "/images/icons/icon-152x152.png",
32+
"type": "image/png",
33+
"sizes": "152x152"
34+
},
35+
{
36+
"src": "/images/icons/icon-192x192.png",
37+
"type": "image/png",
38+
"sizes": "192x192"
39+
},
40+
{
41+
"src": "/images/icons/icon-384x384.png",
42+
"type": "image/png",
43+
"sizes": "384x384"
44+
},
45+
{
46+
"src": "/images/icons/icon-512x512.png",
47+
"type": "image/png",
48+
"sizes": "512x512"
49+
}
50+
]
51+
}

‎replit.nix

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{ pkgs }: {
2+
deps = [
3+
pkgs.nodePackages.vscode-langservers-extracted
4+
pkgs.nodePackages.typescript-language-server
5+
];
6+
}

0 commit comments

Comments
 (0)