aboutsummaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
authorSergey Nazaryev <sergey@nazaryev.ru>2020-07-20 01:42:09 +0300
committerSergey Nazaryev <sergey@nazaryev.ru>2020-07-20 01:42:09 +0300
commit9637e97f1cfb0abcb243215c01bc745e4fc6c5ca (patch)
treefca8f2402d0ca5fa049abac7c6e6cf77f946b846 /assets
parent585a141866bafe5dbb41208abf8f24b91e7e1154 (diff)
downloadportfolio-9637e97f1cfb0abcb243215c01bc745e4fc6c5ca.zip
portfolio-9637e97f1cfb0abcb243215c01bc745e4fc6c5ca.tar.gz
portfolio-9637e97f1cfb0abcb243215c01bc745e4fc6c5ca.tar.bz2
Update to the latest versionHEADmaster
Diffstat (limited to 'assets')
-rw-r--r--assets/Graphik-Bold-Cy-Web.woffbin0 -> 65840 bytes
-rw-r--r--assets/Graphik-Regular-Cy-Web.woffbin0 -> 61038 bytes
-rw-r--r--assets/candara.ttfbin218504 -> 0 bytes
-rw-r--r--assets/game/android.pngbin0 -> 26613 bytes
-rw-r--r--assets/game/battletoads.gifbin0 -> 39867 bytes
-rw-r--r--assets/game/belmont.pngbin0 -> 4253 bytes
-rw-r--r--assets/game/billrizer.pngbin0 -> 5308 bytes
-rw-r--r--assets/game/cache.pngbin0 -> 61650 bytes
-rw-r--r--assets/game/chipndale.pngbin0 -> 4111 bytes
-rw-r--r--assets/game/game.html473
-rw-r--r--assets/game/higgins.pngbin0 -> 1580 bytes
-rw-r--r--assets/game/ios.pngbin0 -> 25269 bytes
-rw-r--r--assets/game/mario.pngbin0 -> 4098 bytes
-rwxr-xr-xassets/game/objects/forest.pngbin0 -> 5895 bytes
-rwxr-xr-xassets/game/objects/lamp.pngbin0 -> 3506 bytes
-rwxr-xr-xassets/game/objects/shop-blue.pngbin0 -> 4136 bytes
-rwxr-xr-xassets/game/objects/shop-red.pngbin0 -> 5198 bytes
-rwxr-xr-xassets/game/objects/shop-violet.pngbin0 -> 4135 bytes
-rwxr-xr-xassets/game/objects/sign-blue.pngbin0 -> 3494 bytes
-rwxr-xr-xassets/game/objects/tall-green.pngbin0 -> 7952 bytes
-rwxr-xr-xassets/game/objects/tall-red.pngbin0 -> 8198 bytes
-rwxr-xr-xassets/game/objects/tall-violet.pngbin0 -> 8043 bytes
-rwxr-xr-xassets/game/objects/trash.pngbin0 -> 2892 bytes
-rwxr-xr-xassets/game/objects/wide-gray.pngbin0 -> 6935 bytes
-rwxr-xr-xassets/game/objects/wide-green.pngbin0 -> 7005 bytes
-rwxr-xr-xassets/game/objects/wide-violet.pngbin0 -> 6815 bytes
-rwxr-xr-xassets/game/objects/world.pngbin0 -> 8877 bytes
-rw-r--r--assets/game/stollman.pngbin0 -> 25944 bytes
-rw-r--r--assets/game/world.pngbin0 -> 8877 bytes
-rw-r--r--assets/style.css250
-rw-r--r--assets/syntax.css62
31 files changed, 708 insertions, 77 deletions
diff --git a/assets/Graphik-Bold-Cy-Web.woff b/assets/Graphik-Bold-Cy-Web.woff
new file mode 100644
index 0000000..7c09144
--- /dev/null
+++ b/assets/Graphik-Bold-Cy-Web.woff
Binary files differ
diff --git a/assets/Graphik-Regular-Cy-Web.woff b/assets/Graphik-Regular-Cy-Web.woff
new file mode 100644
index 0000000..ba9ebb0
--- /dev/null
+++ b/assets/Graphik-Regular-Cy-Web.woff
Binary files differ
diff --git a/assets/candara.ttf b/assets/candara.ttf
deleted file mode 100644
index 9c91b71..0000000
--- a/assets/candara.ttf
+++ /dev/null
Binary files differ
diff --git a/assets/game/android.png b/assets/game/android.png
new file mode 100644
index 0000000..24cc3c0
--- /dev/null
+++ b/assets/game/android.png
Binary files differ
diff --git a/assets/game/battletoads.gif b/assets/game/battletoads.gif
new file mode 100644
index 0000000..1de3bdd
--- /dev/null
+++ b/assets/game/battletoads.gif
Binary files differ
diff --git a/assets/game/belmont.png b/assets/game/belmont.png
new file mode 100644
index 0000000..afa5412
--- /dev/null
+++ b/assets/game/belmont.png
Binary files differ
diff --git a/assets/game/billrizer.png b/assets/game/billrizer.png
new file mode 100644
index 0000000..1f5afea
--- /dev/null
+++ b/assets/game/billrizer.png
Binary files differ
diff --git a/assets/game/cache.png b/assets/game/cache.png
new file mode 100644
index 0000000..7c52232
--- /dev/null
+++ b/assets/game/cache.png
Binary files differ
diff --git a/assets/game/chipndale.png b/assets/game/chipndale.png
new file mode 100644
index 0000000..4deec72
--- /dev/null
+++ b/assets/game/chipndale.png
Binary files differ
diff --git a/assets/game/game.html b/assets/game/game.html
new file mode 100644
index 0000000..757f102
--- /dev/null
+++ b/assets/game/game.html
@@ -0,0 +1,473 @@
+<html>
+ <head>
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script>
+ $(document).ready(function() {
+ var clientId = null;
+ var clientSocket = null;
+
+ var WIDTH_STEP= 6; // Ширина шага
+
+ // Класс игрока
+ function Player(name, x, character) {
+ this.character = character;
+ this.action = 'standingRight';
+ this.name = name;
+ this.remove = false;
+ this.widthStep = WIDTH_STEP; // Ширина шага
+
+ this.x = x;
+ this.newX = 0;
+
+ this.animation = 0;
+
+ this.standLeft = function(x) {
+ this.action = 'standingLeft';
+ this.animation = 0;
+ this.widthStep = WIDTH_STEP;
+ }
+
+ this.standRight = function(x) {
+ this.action = 'standingRight';
+ this.animation = 0;
+ this.widthStep = WIDTH_STEP;
+ }
+
+ this.move = function(x) {
+ this.newX = x;
+ this.animation = 0;
+
+ if(this.x > x)
+ this.action = 'movingLeft';
+ else if(this.x < x)
+ this.action = 'movingRight';
+ }
+ }
+
+ // Экземпляры игроков
+ var players = {};
+
+ // Экземпляры объектов
+ var entities = [];
+
+ // Параметры поля
+ var battlefield = {};
+
+ // Параметры показываемоего участка
+ var show = {}
+
+ // Константы
+ var me = "ME"; // Идентификатор, по которому находим себя
+ var heightFloor = 330; // Высота пола
+ var heightNickname = 20; // Расстояние между игроком и его ником
+ var fps = 20; // Количество отрисовываний в секунду
+
+ function Entity(x, object) {
+ this.object = object;
+ this.x = x;
+ }
+
+ var background_with_entities_loaded = false;
+ var background_with_entities = new Image();
+
+ var objects = {
+ "forest": {resource: new Image(), url: "objects/forest.png",height:57,width:106},
+ "lamp": {resource: new Image(), url: "objects/lamp.png",height:83,width:50},
+ "shop-blue": {resource: new Image(), url: "objects/shop-blue.png",height:97,width:150},
+ "shop-red": {resource: new Image(), url: "objects/shop-red.png",height:97,width:150},
+ "shop-violet": {resource: new Image(), url: "objects/shop-violet.png",height:97,width:150},
+ "sign-blue": {resource: new Image(), url: "objects/sign-blue.png",height:23,width:23},
+ "tall-green": {resource: new Image(), url: "objects/tall-green.png",height:170,width:129},
+ "tall-red": {resource: new Image(), url: "objects/tall-red.png",height:170,width:129},
+ "tall-violet": {resource: new Image(), url: "objects/tall-violet.png",height:170,width:129},
+ "trash": {resource: new Image(), url: "objects/trash.png",height:16,width:17},
+ "wide-gray": {resource: new Image(), url: "objects/wide-gray.png",height:123,width:121},
+ "wide-green": {resource: new Image(), url: "objects/wide-green.png",height:123,width:121},
+ "wide-violet": {resource: new Image(), url: "objects/wide-violet.png",height:123,width:121}
+ };
+
+ // Описание шкурок
+ var characters = {
+ i : {
+ resource : new Image(),
+ url : "ios.png",
+ height : 55,
+ width : 37,
+ animations : {
+ standingLeft : [[0+37*8,0]],
+ standingRight : [[0+37*9,0]],
+ movingLeft : [[0+37*0,0],[0+37*1,0],[0+37*2,0],[0+37*3,0],[0+37*4,0],[0+37*5,0],[0+37*6,0],[0+37*7,0]],
+ movingRight : [[0+37*10,0],[0+37*11,0],[0+37*12,0],[0+37*13,0],[0+37*14,0],[0+37*15,0],[0+37*16,0],[0+37*17,0]],
+ }
+ },
+ android : {
+ resource : new Image(),
+ url : "android.png",
+ height : 55,
+ width : 37,
+ animations : {
+ standingLeft : [[0+37*8,0]],
+ standingRight : [[0+37*9,0]],
+ movingLeft : [[0+37*0,0],[0+37*1,0],[0+37*2,0],[0+37*3,0],[0+37*4,0],[0+37*5,0],[0+37*6,0],[0+37*7,0]],
+ movingRight : [[0+37*10,0],[0+37*11,0],[0+37*12,0],[0+37*13,0],[0+37*14,0],[0+37*15,0],[0+37*16,0],[0+37*17,0]],
+ }
+ },
+ stollman : {
+ resource : new Image(),
+ url : "stollman.png",
+ height : 55,
+ width : 37,
+ animations : {
+ standingLeft : [[0+37*8,0]],
+ standingRight : [[0+37*9,0]],
+ movingLeft : [[0+37*0,0],[0+37*1,0],[0+37*2,0],[0+37*3,0],[0+37*4,0],[0+37*5,0],[0+37*6,0],[0+37*7,0]],
+ movingRight : [[0+37*10,0],[0+37*11,0],[0+37*12,0],[0+37*13,0],[0+37*14,0],[0+37*15,0],[0+37*16,0],[0+37*17,0]],
+ }
+ },
+ };
+
+ // Случайное число от min до max
+ function rand(min, max) {
+ return Math.floor(Math.random() * (max - min + 1)) + min;
+ }
+
+ function init() {
+ var width = 3392;
+ var height = 339;
+ battlefield["canvas"] = document.createElement('canvas');
+ battlefield["context"] = battlefield["canvas"].getContext('2d');
+ battlefield["width"] = width;
+ battlefield["height"] = height;
+ show["canvas"] = document.getElementById("show");
+ show["context"] = show["canvas"].getContext('2d');
+ }
+ init();
+
+ // Выполняется, когда всё загружено
+ function ready() {
+ if(background_loaded && object_loaded == object_names.length && !background_with_entities_loaded)
+ makeBackground();
+ else if(background_with_entities_loaded && character_loaded == character_names.length && background_loaded && object_loaded == object_names.length) {
+ players[me] = new Player("me",
+ rand(30, battlefield["width"]-30),
+ character_names[rand(0,character_names.length-1)]
+ ); // создаём своего персонажа
+
+ $("#character").val(players[me].character);
+
+ //sync(); // запускаем сервис синхронизации
+ moving(); // запускаем сервис движения
+ draw(); // запускаем сервис отрисовывания
+ }
+ }
+ /*
+ // Сервис синхронизации
+ function sync() {
+ if(clientSocket == null) {
+ clientSocket = new WebSocket("ws://nazaryev.ru:8080/");
+ clientSocket.onmessage = function(event) {
+ var data = JSON.parse(event.data);
+ console.log(data);
+ if(clientId == null) {
+ clientId = data.id;
+ return;
+ }
+
+ $.each(players, function(id, player) {
+ players[id].remove = true;
+ });
+
+ players[me].remove = false;
+ $.each(data, function(id, player) {
+ if(id != clientId)
+ if(players[id] === undefined) {
+ players[id] = new Player(player['name'], parseInt(player['x']), player['character'])
+ } else {
+ players[id].move(player['x']);
+ players[id].name = player['name'];
+ players[id].character = player['character'];
+ players[id].remove = false;
+ }
+ });
+
+ $.each(players, function(id, player) {
+ if(players[id].remove) delete players[id];
+ });
+ clientSocket.send(JSON.stringify({id: clientId, x: players[me].x, name: players[me].name, character: players[me].character}));
+ };
+ }
+ */
+ /*$.getJSON("game.php?x=" + players[me].x + "&name=" + players[me].name + "&character=" + players[me].character, function(data) {
+
+ $.each(players, function(id, player) {
+ players[id].remove = true;
+ });
+
+ players[me].remove = false;
+ $.each(data, function(id, player) {
+ if(id != clientId) {
+ if(typeof players[id] == 'undefined') {
+ players[id] = new Player(player['name'], parseInt(player['x']), player['character'])
+ } else {
+ players[id].move(player['x']);
+ players[id].name = player['name'];
+ players[id].character = player['character'];
+ players[id].remove = false;
+ }
+ }
+ });
+
+ $.each(players, function(id, player) {
+ if(players[id].remove) delete players[id];
+ });
+
+ setTimeout (sync, 10000)
+ });
+ }
+ */
+ // Сервис движения
+ function moving() {
+ for(var key in players) {
+ var currentPlayer = players[key];
+ if(currentPlayer.action == 'movingRight' || currentPlayer.action == 'movingLeft') {
+ if(currentPlayer.action == 'movingRight' && currentPlayer.x < currentPlayer.newX) {
+ currentPlayer.widthStep += 0.1;
+ currentPlayer.x += currentPlayer.widthStep;
+ }
+ else if(currentPlayer.action == 'movingLeft' && currentPlayer.x > currentPlayer.newX) {
+ currentPlayer.widthStep += 0.1;
+ currentPlayer.x -= currentPlayer.widthStep;
+ }
+ else if(currentPlayer.action == 'movingLeft')
+ currentPlayer.standLeft();
+ else if(currentPlayer.action == 'movingRight')
+ currentPlayer.standRight();
+
+ animation(currentPlayer);
+ }
+ }
+
+ setTimeout (moving, 50)
+ }
+
+ // Обновление анимации персонажа при каком-либо действии
+ function animation(currentPlayer) {
+ if(currentPlayer.animation+1 < characters[currentPlayer.character]["animations"][currentPlayer.action].length) currentPlayer.animation++;
+ else if(currentPlayer.animation+1 >= characters[currentPlayer.character]["animations"][currentPlayer.action].length) currentPlayer.animation = 0;
+ }
+
+ function makeBackground() {
+ clear();
+
+ var parts = 35;
+ var offset = battlefield["width"] / parts;
+
+ for(var i = 1; i <= 300; i++) {
+ var object = object_names[rand(0, object_names.length-1)];
+ var x = rand((i-1)*offset, i*offset);
+ entities.push(new Entity(x, object));
+ }
+
+ battlefield["context"].drawImage(background, 0, 0);
+
+ for(var key in entities) {
+ var currentEntity = entities[key];
+ battlefield["context"].drawImage(
+ objects[currentEntity.object]["resource"],
+ 0,
+ 0,
+ objects[currentEntity.object]["width"],
+ objects[currentEntity.object]["height"],
+ currentEntity.x,
+ heightFloor - objects[currentEntity.object]["height"],
+ objects[currentEntity.object]["width"],
+ objects[currentEntity.object]["height"]
+ );
+
+ }
+
+ background_with_entities.src = battlefield["canvas"].toDataURL();
+ background_with_entities.onload = function() {
+ background_with_entities_loaded = true;
+ ready();
+ }
+ }
+
+ function clear() {
+ battlefield["canvas"].width = battlefield["width"];
+ battlefield["canvas"].height = battlefield["height"];
+ }
+
+ // Сервис отрисовывания кадров
+ function draw() {
+ // Очищаем холст всего поля
+ battlefield["canvas"].width = battlefield["width"];
+ battlefield["canvas"].height = battlefield["height"];
+
+ // Рисуем фон
+ battlefield["context"].drawImage(background_with_entities, 0, 0);
+
+ // Рисуем игроков и их ники
+ for(var key in players) {
+ var currentPlayer = players[key];
+ battlefield["context"].shadowColor = "rgba(0,0,0,0)";
+ battlefield["context"].drawImage(
+ characters[currentPlayer.character]["resource"],
+ characters[currentPlayer.character]["animations"][currentPlayer.action][currentPlayer.animation][0],
+ characters[currentPlayer.character]["animations"][currentPlayer.action][currentPlayer.animation][1],
+ characters[currentPlayer.character]["width"],
+ characters[currentPlayer.character]["height"],
+ currentPlayer.x,
+ heightFloor - characters[currentPlayer.character]["height"],
+ characters[currentPlayer.character]["width"],
+ characters[currentPlayer.character]["height"]
+ );
+
+ battlefield["context"].font = "bold 12px Arial";
+
+ battlefield["context"].shadowColor = "#000";
+ battlefield["context"].shadowOffsetX = 1;
+ battlefield["context"].shadowOffsetY = 1;
+ battlefield["context"].shadowBlur = 2;
+
+ battlefield["context"].fillStyle = "#fff";
+ battlefield["context"].textAlign = 'center';
+
+ battlefield["context"].fillText(currentPlayer.name, currentPlayer.x + (characters[currentPlayer.character]["width"]/2), heightFloor-heightNickname-characters[currentPlayer.character]["height"]);
+ }
+
+ // Очищаем холст видимого участка
+ show["canvas"].width = document.body.clientWidth; // рисуем по ширине экрана
+ show["canvas"].height = battlefield["height"]; // по высоте поля
+
+ // Определяем видимый участок и отрисовываем его
+ var m = Math.min((players[me].x+show["canvas"].width/2) - show["canvas"].width, battlefield["width"]-show["canvas"].width);
+ show["context"].drawImage(
+ battlefield["canvas"],
+ ((m < 0) ? 0 : m), 0,
+ show["canvas"].width,
+ show["canvas"].height,
+ 0, 0,
+ show["canvas"].width,
+ show["canvas"].height
+ );
+ setTimeout (draw, 1000 / fps)
+ }
+
+ // Количество шкурок
+ var character_names = [];
+ for (var name in characters) character_names[character_names.length] = name;
+
+ // Количество объектов
+ var object_names = [];
+ for (var name in objects) object_names[object_names.length] = name;
+
+ // Загрузка шкурок
+ var character_loaded = 0;
+ for(var key in characters) {
+ characters[key]["resource"].src = characters[key]["url"];
+ characters[key]["resource"].onload = function() {
+ character_loaded++;
+ ready();
+ }
+ }
+
+ var object_loaded = 0;
+ for(var key in objects) {
+ objects[key]["resource"].src = objects[key]["url"];
+ objects[key]["resource"].onload = function() {
+ object_loaded++;
+ ready();
+ }
+ }
+
+ // Загрузка фона
+ var background_loaded = false; // Загрузился ли фон?
+ var background = new Image();
+ background.src = 'world.png';
+ background.onload = function() {
+ background_loaded = true;
+ ready();
+ }
+
+ // Изменение ника
+ $("#nickname").change(function() {
+ if($(this).val().length > 0) players[me].name = $(this).val();
+ });
+
+ // Изменение шкурки
+ $("#character").change(function() {
+ players[me].character = $(this).val();
+ });
+
+ // Запрещаем писать пробелы
+ $("#nickname").keydown(function(e) {
+ if (e.keyCode == 32) return false;
+ });
+
+ // Обрабатываем отжатие клавиши
+ $(document).keyup(function(e){
+ if (e.keyCode == 37) {
+ players[me].standLeft();
+ return false;
+ } else if(e.keyCode == 39) {
+ players[me].standRight();
+ return false;
+ }
+
+ });
+
+ // Обрабатываем нажатие клавиши
+ $(document).keydown(function(e) {
+ if (e.keyCode == 37) {
+ if(players[me].action != 'movingRight' && players[me].action != 'movingLeft') players[me].move(-Infinity);
+ return false;
+ } else if(e.keyCode == 39) {
+ if(players[me].action != 'movingRight' && players[me].action != 'movingLeft') players[me].move(Infinity);
+ return false;
+ }
+ });
+ });
+ </script>
+
+ <style>
+ html, body {
+ padding: 0;
+ margin: 0;
+ height:100%;
+ overflow-y: hidden;
+ }
+ .container {
+ min-height: 100%;
+ height: auto !important;
+ height: 100%;
+ }
+
+ #footer {
+ background: url(world.png);
+ width: 100%;
+ height: 339px;
+ }
+
+ canvas {
+ width: 100%;
+ height: 339px;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="container">
+ <div id="footer">
+ <canvas id='show'></canvas>
+ <div style="position: relative; margin-left: 5px;bottom: 25px;">
+ <input maxlength=20 type="text" id="nickname" value="me" style="height: 15px; font-size: 10px;"/>
+ <select id="character" style="height: 15px; font-size: 10px;">
+ <option value="i">iMan</option>
+ <option value="android">Android</option>
+ <option value="stollman">Stollman</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/assets/game/higgins.png b/assets/game/higgins.png
new file mode 100644
index 0000000..7cb1fc0
--- /dev/null
+++ b/assets/game/higgins.png
Binary files differ
diff --git a/assets/game/ios.png b/assets/game/ios.png
new file mode 100644
index 0000000..8b2451e
--- /dev/null
+++ b/assets/game/ios.png
Binary files differ
diff --git a/assets/game/mario.png b/assets/game/mario.png
new file mode 100644
index 0000000..62684f2
--- /dev/null
+++ b/assets/game/mario.png
Binary files differ
diff --git a/assets/game/objects/forest.png b/assets/game/objects/forest.png
new file mode 100755
index 0000000..5ec07bb
--- /dev/null
+++ b/assets/game/objects/forest.png
Binary files differ
diff --git a/assets/game/objects/lamp.png b/assets/game/objects/lamp.png
new file mode 100755
index 0000000..e9da156
--- /dev/null
+++ b/assets/game/objects/lamp.png
Binary files differ
diff --git a/assets/game/objects/shop-blue.png b/assets/game/objects/shop-blue.png
new file mode 100755
index 0000000..eda6584
--- /dev/null
+++ b/assets/game/objects/shop-blue.png
Binary files differ
diff --git a/assets/game/objects/shop-red.png b/assets/game/objects/shop-red.png
new file mode 100755
index 0000000..97570fc
--- /dev/null
+++ b/assets/game/objects/shop-red.png
Binary files differ
diff --git a/assets/game/objects/shop-violet.png b/assets/game/objects/shop-violet.png
new file mode 100755
index 0000000..e1534d5
--- /dev/null
+++ b/assets/game/objects/shop-violet.png
Binary files differ
diff --git a/assets/game/objects/sign-blue.png b/assets/game/objects/sign-blue.png
new file mode 100755
index 0000000..fd1c58a
--- /dev/null
+++ b/assets/game/objects/sign-blue.png
Binary files differ
diff --git a/assets/game/objects/tall-green.png b/assets/game/objects/tall-green.png
new file mode 100755
index 0000000..d0b4063
--- /dev/null
+++ b/assets/game/objects/tall-green.png
Binary files differ
diff --git a/assets/game/objects/tall-red.png b/assets/game/objects/tall-red.png
new file mode 100755
index 0000000..8e16e40
--- /dev/null
+++ b/assets/game/objects/tall-red.png
Binary files differ
diff --git a/assets/game/objects/tall-violet.png b/assets/game/objects/tall-violet.png
new file mode 100755
index 0000000..3a91f9e
--- /dev/null
+++ b/assets/game/objects/tall-violet.png
Binary files differ
diff --git a/assets/game/objects/trash.png b/assets/game/objects/trash.png
new file mode 100755
index 0000000..448b261
--- /dev/null
+++ b/assets/game/objects/trash.png
Binary files differ
diff --git a/assets/game/objects/wide-gray.png b/assets/game/objects/wide-gray.png
new file mode 100755
index 0000000..f754e45
--- /dev/null
+++ b/assets/game/objects/wide-gray.png
Binary files differ
diff --git a/assets/game/objects/wide-green.png b/assets/game/objects/wide-green.png
new file mode 100755
index 0000000..10dc2bf
--- /dev/null
+++ b/assets/game/objects/wide-green.png
Binary files differ
diff --git a/assets/game/objects/wide-violet.png b/assets/game/objects/wide-violet.png
new file mode 100755
index 0000000..1da2b3c
--- /dev/null
+++ b/assets/game/objects/wide-violet.png
Binary files differ
diff --git a/assets/game/objects/world.png b/assets/game/objects/world.png
new file mode 100755
index 0000000..46ca080
--- /dev/null
+++ b/assets/game/objects/world.png
Binary files differ
diff --git a/assets/game/stollman.png b/assets/game/stollman.png
new file mode 100644
index 0000000..ef27637
--- /dev/null
+++ b/assets/game/stollman.png
Binary files differ
diff --git a/assets/game/world.png b/assets/game/world.png
new file mode 100644
index 0000000..46ca080
--- /dev/null
+++ b/assets/game/world.png
Binary files differ
diff --git a/assets/style.css b/assets/style.css
index 6bd979d..1aa9704 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,16 +1,30 @@
-body {
- overflow-y: scroll;
+@font-face {
+ font-family:Graphik LC;
+ src:url(/assets/Graphik-Bold-Cy-Web.eot);
+ src:url(/assets/Graphik-Bold-Cy-Web.eot?#iefix) format("embedded-opentype"),url(/assets/Graphik-Bold-Cy-Web.woff) format("woff"),url(/assets/Graphik-Bold-Cy-Web.ttf) format("truetype"),url(/assets/Graphik-Bold-Cy-Web.svg#Graphik-Bold-Cy) format("svg");
+ font-weight:700;
+ font-style:normal
+}
+
+@font-face {
+ font-family:Graphik LC;
+ src:url(/assets/Graphik-Regular-Cy-Web.eot);
+ src:url(/assets/Graphik-Regular-Cy-Web.eot?#iefix) format("embedded-opentype"),url(/assets/Graphik-Regular-Cy-Web.woff) format("woff"),url(/assets/Graphik-Regular-Cy-Web.ttf) format("truetype"),url(/assets/Graphik-Regular-Cy-Web.svg#Graphik-Regular-Cy) format("svg");
+ font-weight:400;
+ font-style:normal;
+ font-stretch:normal
}
html, body {
+ -webkit-overflow-scrolling: auto;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
+ line-height: 1.5;
text-rendering: optimizeLegibility;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- line-height: 1.6;
+ font-family: "Graphik LC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #444;
font-size: 18px;
}
@@ -64,52 +78,51 @@ img, .product-tags {
background: none repeat scroll 0% 0% #D6EDFC;
}
-.contacts {
- padding-top: 5px;
- float: left;
-}
-
-.contacts__position {
- vertical-align: middle;
- line-height: 15px;
- font-size: 15px;
-}
-
.contacts__name {
font-size: 25px;
}
-.post {
- padding: 20px 40px;
+.contacts__info {
+ font-size: 14px;
+ padding: 10px 0 0 0;
}
-main {
- width: 1160px;
+footer {
+ height: 339px;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding-top: 50px;
}
-nav {
- width: 1160px;
- margin: 0 40px;
- background: white;
- height: 80px;
- border-bottom: 1px solid #f0f0f0;
+.wrapper {
+ min-height: 100%;
+ position: relative;
}
-.menu-horizontal {
- float: left;
+.page {
+ padding-top: 30px;
+ padding-left: 60px;
+ width: 1000px;
+ padding-bottom: 380px;
+}
+
+.menu {
width: 100%;
- padding: 0;
- margin: 0;
+ padding: 20px 0 20px 0;
+ margin-bottom: 20px;
+ margin-top: 20px;
list-style-type: none;
+ line-height: 36px;
+ border-top: 1px solid #f0f0f0;
+ border-bottom: 1px solid #f0f0f0;
}
-.menu-horizontal__item {
- margin: 0px 0px 0px 15px;
- display: inline;
- float: left;
+.menu__item {
text-transform: uppercase;
letter-spacing: 0.5px;
- font-size: 12px;
+ font-size: 18px;
}
.game {
@@ -121,19 +134,97 @@ nav {
height: 339px;
}
-.menu {
- padding-top: 10px;
- float: left;
+.menu-container {
+ margin: 0;
+ padding: 0;
+}
+
+nav {
+ flex: 0 0 230px;
+ text-align: center;
+ background: white;
+ padding: 0;
+ margin: 0;
+}
+
+main {
+ padding: 0 0 0 60px;
+ flex-grow: 3;
+}
+
+.page {
+ flex-direction: row;
+ display: flex;
+ justify-content: center;
+ align-items: stretch;
+}
+
+.email {
+ font-size: 14px;
+}
+
+@media (max-width: 800px) {
+ html, body {
+ font-size: 16px;
+ line-height: 1.2;
+ }
+
+ .page {
+ flex-direction: column;
+ width: auto !important;
+ padding-left: 0px !important;
+ padding-top: 20px !important;
+ }
+
+ .email {
+ display: none;
+ }
+
+ nav {
+ flex: 0 0 0;
+ margin-bottom: 10px;
+ }
+
+ .contacts__position {
+ display: inline;
+ }
+
+ .contacts__info {
+ padding: 10px 18px 0 18px;
+ }
+
+ .menu {
+ padding: 10px 0 10px 0;
+ line-height: 1.5;
+ }
+
+ menu li {
+ display: inline;
+ list-style-type: none;
+ padding-right: 20px;
+ font-size: 13px !important;
+ }
+
+ main {
+ padding-right: 30px;
+ padding-left: 30px;
+ }
+
+ main p {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ margin-left: 0px !important;
+ }
}
.additional {
- padding: 50px;
+ padding: 0 50px 50px 50px;
}
.additional h2 {
padding: 0;
margin: 0;
- font-size: 60px;
+ font-size: 48px;
}
.additional ul li {
@@ -144,19 +235,8 @@ nav {
content: "— ";
}
-.product-photo {
- display: none;
- float: left;
- padding-top: 10px;
- width: 250px;
-}
-
-.product-photo img {
- width: 280px;
-}
-
.product-tags {
- padding-left: 40px;
+ float: left;
text-align: left;
}
@@ -166,45 +246,54 @@ nav {
margin: 2px;
background: #4779f6;
border-radius: 15px;
-}
-
-.products {
- padding: 15px 35px;
+ font-size: 10px;
}
.products__item {
- display: inline-block;
- width: 325px;
- margin: 5px;
- border: 1px solid #ddd;
+ margin: 0px 10px 20px 5px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #ddd;
}
-.product-info {
- padding: 20px 10px 15px 25px;
+.products__item:last-child {
+ border: 0;
+ padding-bottom: 0;
}
.product-description {
- font-size: 14px;
+ padding-top: 10px;
+ padding-bottom: 10px;
line-height: 1.5;
- max-height: 170px;
- height: 170px;
+ font-size: 16px;
}
.product-icon {
- float: left;
- padding-right: 10px;
- height: 55px;
+ display: inline-block;
+ padding-right: 2px;
+ vertical-align: middle;
+ height: 20px;
}
.product-header {
- margin-bottom: 10px;
- height: 55px;
+ height: 30px;
}
.product-title {
- display: block;
- padding-top: 10px;
- font-size: 24px;
+ display: inline-block;
+ font-size: 14px;
+ vertical-align: baseline;
+
+ color: #282425;
+ font-weight: 900;
+ letter-spacing: 0.035em;
+ text-transform: uppercase;
+}
+
+.product-link {
+ padding-top: 7px;
+ padding-right: 10px;
+ float: right;
+ font-size: 12px;
}
.product-link-passive:hover {
@@ -212,8 +301,7 @@ nav {
}
main ul, main ol {
- margin-left: 2em;
- margin-bottom: 1em;
+ margin-left: 27px;
}
main ul li:before {
@@ -226,23 +314,31 @@ main ul li:before {
position: absolute;
}
+ul p, main p, ul {
+ line-height: 1.7;
+}
+
main ul p {
margin: 0px;
- line-height: 31px;
}
main p {
- line-height: 25px;
margin: 20px;
}
+main pre {
+ margin: 20px;
+ background: rgba(0,0,0,0.02);
+ padding: 15px;
+}
+
main ul {
padding: 0;
list-style: none;
- line-height: 31px;
}
main h1, main h2 {
+ margin: 0;
padding: 0;
color: #282425;
font-weight: 900;
diff --git a/assets/syntax.css b/assets/syntax.css
new file mode 100644
index 0000000..5ec3fbc
--- /dev/null
+++ b/assets/syntax.css
@@ -0,0 +1,62 @@
+.highlight .c { color: #999988; font-style: italic } /* Comment */
+.highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
+.highlight .k { font-weight: bold } /* Keyword */
+.highlight .o { font-weight: bold } /* Operator */
+.highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
+.highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
+.highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
+.highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
+.highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #aa0000 } /* Generic.Error */
+.highlight .gh { color: #999999 } /* Generic.Heading */
+.highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
+.highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
+.highlight .go { color: #888888 } /* Generic.Output */
+.highlight .gp { color: #555555 } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #aaaaaa } /* Generic.Subheading */
+.highlight .gt { color: #aa0000 } /* Generic.Traceback */
+.highlight .kc { font-weight: bold } /* Keyword.Constant */
+.highlight .kd { font-weight: bold } /* Keyword.Declaration */
+.highlight .kp { font-weight: bold } /* Keyword.Pseudo */
+.highlight .kr { font-weight: bold } /* Keyword.Reserved */
+.highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
+.highlight .m { color: #009999 } /* Literal.Number */
+.highlight .s { color: #d14 } /* Literal.String */
+.highlight .na { color: #008080 } /* Name.Attribute */
+.highlight .nb { color: #0086B3 } /* Name.Builtin */
+.highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
+.highlight .no { color: #008080 } /* Name.Constant */
+.highlight .ni { color: #800080 } /* Name.Entity */
+.highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
+.highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
+.highlight .nn { color: #555555 } /* Name.Namespace */
+.highlight .nt { color: #000080 } /* Name.Tag */
+.highlight .nv { color: #008080 } /* Name.Variable */
+.highlight .ow { font-weight: bold } /* Operator.Word */
+.highlight .w { color: #bbbbbb } /* Text.Whitespace */
+.highlight .mf { color: #009999 } /* Literal.Number.Float */
+.highlight .mh { color: #009999 } /* Literal.Number.Hex */
+.highlight .mi { color: #009999 } /* Literal.Number.Integer */
+.highlight .mo { color: #009999 } /* Literal.Number.Oct */
+.highlight .sb { color: #d14 } /* Literal.String.Backtick */
+.highlight .sc { color: #d14 } /* Literal.String.Char */
+.highlight .sd { color: #d14 } /* Literal.String.Doc */
+.highlight .s2 { color: #d14 } /* Literal.String.Double */
+.highlight .se { color: #d14 } /* Literal.String.Escape */
+.highlight .sh { color: #d14 } /* Literal.String.Heredoc */
+.highlight .si { color: #d14 } /* Literal.String.Interpol */
+.highlight .sx { color: #d14 } /* Literal.String.Other */
+.highlight .sr { color: #009926 } /* Literal.String.Regex */
+.highlight .s1 { color: #d14 } /* Literal.String.Single */
+.highlight .ss { color: #990073 } /* Literal.String.Symbol */
+.highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #008080 } /* Name.Variable.Class */
+.highlight .vg { color: #008080 } /* Name.Variable.Global */
+.highlight .vi { color: #008080 } /* Name.Variable.Instance */
+.highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
+
+.post > .highlight .lineno { color: #ccc; display:inline-block; padding: 0 5px; border-right:1px solid #ccc; }
+.post > .highlight pre code { display: block; white-space: pre; overflow-x: auto; word-wrap: normal; }