diff --git a/README.md b/README.md
index c97e53e..5e0820a 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,2 @@
-# quizEngine
\ No newline at end of file
+# quizEngine
+
diff --git a/config.json b/config.json
new file mode 100644
index 0000000..7841c41
--- /dev/null
+++ b/config.json
@@ -0,0 +1,8 @@
+{
+ "gameName": "quizEngine",
+ "gameVersion": [0, 0, 1],
+
+ "scene": {
+ "backGradient": ["#2f80ff", "#3ccbff"]
+ }
+}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..a5a0996
Binary files /dev/null and b/favicon.ico differ
diff --git a/game.js b/game.js
new file mode 100644
index 0000000..172b023
--- /dev/null
+++ b/game.js
@@ -0,0 +1,33 @@
+/*
+ * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
+ * This devtool is neither made for production nor for readable output files.
+ * It uses "eval()" calls to create a separate source file in the browser devtools.
+ * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
+ * or disable the default devtool with "devtool: false".
+ * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
+ */
+/******/ (() => { // webpackBootstrap
+/******/ "use strict";
+/******/ var __webpack_modules__ = ({
+
+/***/ "./src/js/index.js":
+/*!*************************!*\
+ !*** ./src/js/index.js ***!
+ \*************************/
+/***/ (() => {
+
+eval("\n\nlet DEBUG = true;\nlet canvas;\nlet context;\nlet cW;\nlet cH;\n\nlet dragging = false;\n\nfunction mMove(e) {\n if (dragging) {\n point.pX = e.offsetX * cW / canvas.clientWidth | 0;\n point.pY = e.offsetY * cH / canvas.clientHeight | 0;\n };\n}\n\nfunction mDown(e) {\n dragging = true;\n}\n\nfunction mUp(e) {\n dragging = false;\n}\n\nfunction clearContext() {\n context.fillStyle = '#b27e56';\n context.fillRect(0, 0, cW, cH);\n}\n\n// Init\nwindow.onload = function() {\n canvas = document.getElementById('game');\n context = canvas.getContext('2d');\n cW = canvas.width;\n cH = canvas.height;\n\n window.requestAnimationFrame(gameLoop);\n};\n\n// GameLoop\nfunction gameLoop(timeStamp) {\n update();\n draw();\n\n window.requestAnimationFrame(gameLoop);\n}\n\nfunction update() {\n\n}\n\nfunction draw() {\n clearContext();\n}\n\n\n//# sourceURL=webpack://quizEngine/./src/js/index.js?");
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/
+/******/ // startup
+/******/ // Load entry module and return exports
+/******/ // This entry module can't be inlined because the eval devtool is used.
+/******/ var __webpack_exports__ = {};
+/******/ __webpack_modules__["./src/js/index.js"]();
+/******/
+/******/ })()
+;
\ No newline at end of file
diff --git a/gameData.json b/gameData.json
new file mode 100644
index 0000000..bc40a5e
--- /dev/null
+++ b/gameData.json
@@ -0,0 +1,8 @@
+[
+ {
+ "question": "Что это такое?",
+ "image": "image.png",
+ "answer": [ "Мост", "Рудник", "Река", "Солнце" ],
+ "rightAnser": "мост"
+ }
+]
diff --git a/icon.png b/icon.png
new file mode 100644
index 0000000..cc14505
Binary files /dev/null and b/icon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..27043c1
--- /dev/null
+++ b/index.html
@@ -0,0 +1,15 @@
+
+
+
+
+ quizEngine
+
+
+
+
+
+
+
+
+
+
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..eb8c806
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,153 @@
+'use strict';
+
+import config from '../config.json';
+import gameData from '../gameData.json';
+
+let DEBUG = true;
+let canvas;
+let context;
+let cW;
+let cH;
+let landscape = true;
+
+let button = null;
+
+let dragging = false;
+
+function mMove(e) {
+ if (dragging) {
+ point.pX = e.offsetX * cW / canvas.clientWidth | 0;
+ point.pY = e.offsetY * cH / canvas.clientHeight | 0;
+ };
+}
+
+function mDown(e) {
+ dragging = true;
+}
+
+function mUp(e) {
+ dragging = false;
+}
+
+function clearContext() {
+ let graBack = context.createLinearGradient(cW / 2, 0, cW / 2, cH);
+ graBack.addColorStop(0, config.scene.backGradient[0]);
+ graBack.addColorStop(1, config.scene.backGradient[1]);
+ context.fillStyle = graBack;
+ context.fillRect(0, 0, cW, cH);
+}
+
+// Init
+window.onload = function() {
+ canvas = document.getElementById('game');
+ context = canvas.getContext('2d');
+ cW = canvas.width;
+ cH = canvas.height;
+
+ if (cW >= cH) {
+ landscape = true;
+ }
+ else {
+ landscape = false;
+ }
+
+ button = {
+ info: { x: 10, y: cH - 80, w: 70, h: 70 },
+ sfx: { x: cW - 80, y: cH - 80, w: 70, h: 70 },
+ }
+
+ window.requestAnimationFrame(gameLoop);
+};
+
+// GameLoop
+function gameLoop(timeStamp) {
+ update();
+ draw();
+
+ window.requestAnimationFrame(gameLoop);
+}
+
+function update() {
+}
+
+function draw() {
+ clearContext();
+
+ // draw image ------------------------------------------
+ // let imageSize = { w: 320, h: 140 };
+ // let graImage = context.createLinearGradient(cW / 2 - imageSize.w / 2, cH / 2 - imageSize.h / 2, cW / 2 - imageSize.w / 2 + imageSize.w, cH / 2 - imageSize.h / 2 + imageSize.h);
+ // graImage.addColorStop(0, "#ff4ba7");
+ // graImage.addColorStop(1, "#ffda64");
+ // context.fillStyle = graImage;
+ // context.fillRect(cW / 2 - imageSize.w / 2, cH / 2 - imageSize.h / 2,
+ // imageSize.w, imageSize.h);
+
+ // draw quest ------------------------------------------
+ context.font = "32px Ubuntu";
+ context.textAlign = "center";
+ context.fillStyle = "white";
+ context.fillText(gameData[0].question, cW / 2, cH - 420);
+
+ // draw buttons ------------------------------------------
+ let graButton = context.createLinearGradient(0, 0, cW / 2, cH / 2);
+ graButton.addColorStop(0, "#3fff7c");
+ graButton.addColorStop(1, "#3ffbe0");
+ context.fillStyle = graButton;
+
+ function centerW(size) {
+ return cW / 2 - size / 2;
+ }
+ function centerH(size) {
+ return cH / 2 - size / 2;
+ }
+
+ context.fillRect(centerW(cW / 1.5), cH - 380, cW / 1.5, 50);
+ context.fillRect(centerW(cW / 1.5), cH - 320, cW / 1.5, 50);
+ context.fillRect(centerW(cW / 1.5), cH - 260, cW / 1.5, 50);
+ context.fillRect(centerW(cW / 1.5), cH - 200, cW / 1.5, 50);
+
+ context.strokeStyle = "navy";
+ context.lineWidth = 2;
+
+ context.strokeRect(centerW(cW / 1.5), cH - 380, cW / 1.5, 50);
+ context.strokeRect(centerW(cW / 1.5), cH - 320, cW / 1.5, 50);
+ context.strokeRect(centerW(cW / 1.5), cH - 260, cW / 1.5, 50);
+ context.strokeRect(centerW(cW / 1.5), cH - 200, cW / 1.5, 50);
+
+ context.font = "32px Ubuntu";
+ context.textAlign = "center";
+ context.fillStyle = "white";
+
+ for (let i = 0; i < 4; i++) {
+ switch(i) {
+ case 0:
+ context.fillText(gameData[0].answer[i], cW / 2, cH - 380 + 35);
+ break;
+ case 1:
+ context.fillText(gameData[0].answer[i], cW / 2, cH - 320 + 35);
+ break;
+ case 2:
+ context.fillText(gameData[0].answer[i], cW / 2, cH - 260 + 35);
+ break;
+ case 3:
+ context.fillText(gameData[0].answer[i], cW / 2, cH - 200 + 35);
+ break;
+ }
+ }
+
+
+ // UI ------------------------------------------
+ context.fillStyle = "red";
+ context.strokeStyle = "navy";
+ context.lineWidth = 2;
+ context.fillRect(button.info.x, button.info.y, button.info.w, button.info.h); // info button
+ context.strokeRect(button.info.x, button.info.y, button.info.w, button.info.h); // info button
+ context.fillRect(button.sfx.x, button.sfx.y, button.sfx.w, button.sfx.h); // sfx button
+ context.strokeRect(button.sfx.x, button.sfx.y, button.sfx.w, button.sfx.h); // sfx button
+
+ let q = 10;
+
+ for (var i = 1; i <= q - 1; i++) {
+ q[i];
+ }
+}
diff --git a/package.json b/package.json
index 815b6ff..1b3c80b 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"description": "",
"main": "index.js",
"scripts": {
+ "build": "webpack",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
@@ -18,6 +19,9 @@
},
"homepage": "https://github.com/emilecok/quizEngine#readme",
"devDependencies": {
- "docsify-cli": "^4.4.3"
+ "docsify-cli": "^4.4.3",
+ "webpack": "^5.42.0",
+ "webpack-cli": "^4.7.2",
+ "webpack-dev-server": "^3.11.2"
}
}
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c51dbbe
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,20 @@
+html { height: 100%; }
+
+body {
+ background-color: #6E5967;
+ padding: 0;
+ margin: 0;
+ height: 100%;
+}
+
+div.container {
+ display: flex;
+ height: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+canvas#game {
+ margin: 0 auto;
+ display: block;
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..5a2f84f
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,11 @@
+const path = require('path');
+
+module.exports = {
+ entry: './js/index.js',
+ mode: 'development',
+ output: {
+ // libraryExport: 'default',
+ path: path.resolve(__dirname, 'dist'),
+ filename: 'game.js',
+ },
+};