Merge branch 'master' of github.com:miamibc/chpocker

miamibc · Dec 30, 2024 · b6f5780 · b6f5780
2 parents b8528f7 + 0d8c14e
commit b6f5780
Show file tree

Hide file tree

Showing 13 changed files with 1,066 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# Chpocker
+
+Чпокер - пупырчатый релаксант. 
+
+Всем знакомо это лечебно-расслабляющее средство - плёнка с воздушными пуырышками для успокоения нервов. Оно помогает избавиться от стресса за день, переключить мысли, рестартнуть мозг и настроиться на созидание. 
+
+Веб-приложение чпокер даёт вам возможность похлопать этой плёнкой когда под рукой нет ничего кроме браузера или Телеграмма.
+
+# Changelog
+
+За время существования этого приложения было найдено как минимум две версии - со звуком и без, которые позже были дописаны и доделаны. К сожалению вариантов до переделок уже не найти.
+
+- **v1** Похоже что самый ранний чпокер, созданный в 2000х мною почти случайно, почти не переделывался.
+
+- **v2** Версия со звуком.
+
+- **v3** Избавляемся от Jquery. Игра переписана на common-js
+
+- **v4** Переходим на Canvas. Эта версия будет развиваться дальше, остальные останутся для истории в папке `history`.
+
+# Планы
+
+Здесь будем собирать самое важное чтобы потихоньку реализовывать
+
+1. Возможность собственно делать то для чего чпокер создан - чпокать.
+2. Мультихлоп мультитачем
+3. Скролл экрана во все строны
+4. Включать-выключать звук
+5. Менять цветовую палитру
+6. Серверная часть и многопользовательская игра
diff --git a/chpocker.jpg b/chpocker.jpg
diff --git a/chpocker.wav b/chpocker.wav
diff --git a/history/chpocker.jpg b/history/chpocker.jpg
diff --git a/history/chpocker.wav b/history/chpocker.wav
diff --git a/history/jquery-ui.css b/history/jquery-ui.css
diff --git a/history/jquery-ui.min.js b/history/jquery-ui.min.js
diff --git a/history/jquery.min.js b/history/jquery.min.js
diff --git a/history/v1.html b/history/v1.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Чпокер - пупырчатый релаксант v1</title>
+<meta name="title" content="Чпокер - пупырчатый релаксант" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />
+<script src="https://telegram.org/js/telegram-web-app.js"></script>
+<script src="jquery.min.js" type="text/javascript"></script>
+<script src="jquery-ui.min.js" type="text/javascript"></script>
+<style type="text/css">
+  body { padding: 30px;  font-family: Verdana, sans-serif;  }
+  .clear { clear: both; }
+  #field { width: 440px; line-height: 0; }
+  #sound { display: none; }
+  #field span { display: inline-block; width: 44px; height: 44px; background: #666 url('chpocker.jpg'); cursor: pointer; }
+  #field .n0 { background-position: 48px 56px; }
+  #field .n1 { background-position: 62px 99px; }
+  #field .n2 { background-position: 106px 99px; }
+  #field .n3 { background-position: 149px 99px; }
+  #field .y0 { background-position: 277px 187px; }
+  #field .y1 { background-position: 148px 186px; }
+  #field .y2 { background-position: 176px 142px; }
+  #field .y3 { background-position: 234px 99px; }
+  #field .chpocked { cursor: normal; }
+</style>
+
+<script type="text/javascript">
+$(function() {
+
+  var html = '';
+  for (var i = 0; i < 100; i++) {
+    html += '<span class="n' + Math.floor(Math.random() * 4) + '"></span>';
+  }
+
+  $('#field').attr('unselectable', 'on')
+    .css('user-select', 'none')
+    .css('MozUserSelect', 'none')
+    .append(html);
+
+  var pressed = false;
+
+  $('#field span').mousedown(function () {
+    pressed = true;
+    $(this).mouseenter();
+  }).mouseup(function () {
+    pressed = false;
+  }).mouseenter(function () {
+
+    if (!pressed || $(this).hasClass('chpocked')) { return false; }
+    $('#sound').append('<audio controls autoplay><source src="chpocker.wav" type="audio/wav"></audio>');
+
+    var rnd = Math.floor(Math.random() * 4);
+    $(this).removeClass()
+      .addClass('chpocked y' + rnd)
+
+    return false;
+  });
+
+});
+</script>
+
+</head>
+<body>
+
+
+<div id="field"></div>
+<div id="sound"></div>
+<a href="#" onclick="$('#sound').remove(); $(this).remove(); return false;">Без звука</a>
+
+</body>
+</html>
diff --git a/history/v2.html b/history/v2.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Чпокер - пупырчатый релаксант v2</title>
+<meta name="title" content="Чпокер - пупырчатый релаксант" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<link rel="stylesheet" href="jquery-ui.css" type="text/css" media="all" />
+<script src="https://telegram.org/js/telegram-web-app.js"></script>
+<script src="jquery.min.js" type="text/javascript"></script>
+<script src="jquery-ui.min.js" type="text/javascript"></script>
+<style type="text/css">
+  body { padding: 30px;  font-family: Verdana, sans-serif;  }
+  .clear { clear: both; }
+  #field { width: 440px; line-height: 0; }
+  #field span { display: inline-block; width: 44px; height: 44px; background: #666 url('chpocker.jpg'); cursor: pointer; }
+  #field .n0 { background-position: 48px 56px; }
+  #field .n1 { background-position: 62px 99px; }
+  #field .n2 { background-position: 106px 99px; }
+  #field .n3 { background-position: 149px 99px; }
+  #field .y0 { background-position: 277px 187px; }
+  #field .y1 { background-position: 148px 186px; }
+  #field .y2 { background-position: 176px 142px; }
+  #field .y3 { background-position: 234px 99px; }
+  #field .chpocked { cursor: normal; }
+</style>
+
+
+</head>
+<body>
+
+
+<div id="field"></div>
+<audio src="chpocker.wav"></audio>
+<label><input type="checkbox" checked id="soundEnabled"> Звук</label>
+
+
+<script type="text/javascript">
+  $(function() {
+
+    var html = '';
+    for (var i = 0; i < 100; i++) {
+      html += '<span class="n' + Math.floor(Math.random() * 4) + '"></span>';
+    }
+
+    $('#field').attr('unselectable', 'on')
+      .css('user-select', 'none')
+      .css('MozUserSelect', 'none')
+      .append(html);
+
+    var pressed = false;
+    var quiet = false;
+    //const AudioContext = window.AudioContext || window.webkitAudioContext;
+    const audioElement = new Audio('chpocker.wav');
+    const audioCtx =  new AudioContext();
+    const gain = audioCtx.createGain();
+    const panner = new StereoPannerNode(audioCtx, { pan: 0 });
+    const track = audioCtx.createMediaElementSource(audioElement);
+    track.connect(gain).connect(panner).connect(audioCtx.destination);    
+
+    $('#field span').mousedown(function () {
+      pressed = true;
+      $(this).mouseenter();
+    }).mouseup(function () {
+      pressed = false;
+    }).mouseenter(function () {
+
+      if (!pressed || $(this).hasClass('chpocked')) { return false; }
+
+      if ($('#soundEnabled').attr('checked')){
+        const index = Array.prototype.indexOf.call(this.parentNode.children, this)%10;
+        audioElement.currentTime = 0;
+        panner.pan.setValueAtTime(index/9*2-1, audioCtx.currentTime);; // normalize 0..9 to -1..1
+        gain.gain.setValueAtTime(Math.random(), audioCtx.currentTime);
+        audioElement.play();
+      }
+      var rnd = Math.floor(Math.random() * 4);
+      $(this).removeClass()
+        .addClass('chpocked y' + rnd)
+
+      return false;
+    });
+
+  });
+  </script>
+</body>
+</html>
diff --git a/history/v3.html b/history/v3.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Чпокер - пупырчатый релаксант v3</title>
+<meta name="title" content="Чпокер - пупырчатый релаксант" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<script src="https://telegram.org/js/telegram-web-app.js"></script>
+<style type="text/css">
+  body { padding: 30px;  font-family: Verdana, sans-serif;  }
+  .clear { clear: both; }
+  #field { width: 440px; line-height: 0; }
+  #field span { display: inline-block; width: 44px; height: 44px; background: #666 url('chpocker.jpg'); cursor: pointer; }
+  #field .n0 { background-position: 48px 56px; }
+  #field .n1 { background-position: 62px 99px; }
+  #field .n2 { background-position: 106px 99px; }
+  #field .n3 { background-position: 149px 99px; }
+  #field .y0 { background-position: 277px 187px; }
+  #field .y1 { background-position: 148px 186px; }
+  #field .y2 { background-position: 176px 142px; }
+  #field .y3 { background-position: 234px 99px; }
+  #field .chpocked { cursor: pointer; }
+</style>
+
+
+</head>
+<body>
+
+
+<div id="field" unselectable="on" style="user-select: none;"></div>
+<label><input type="checkbox" checked id="soundEnabled"> Звук</label>
+
+
+<script type="text/javascript">
+
+  var html = '';
+  pressed = false;
+  const field = document.getElementById('field');
+  const mouseenter = new MouseEvent('mouseenter');
+
+  //const AudioContext = window.AudioContext || window.webkitAudioContext;
+  const audioElement = new Audio('chpocker.wav');
+  const audioCtx =  new AudioContext();
+  const gain = audioCtx.createGain();
+  const panner = new StereoPannerNode(audioCtx, { pan: 0 });
+  const track = audioCtx.createMediaElementSource(audioElement);
+  track.connect(gain).connect(panner).connect(audioCtx.destination);    
+
+  for (var i = 0; i < 100; i++) {
+    cell = document.createElement('span');
+    field.appendChild(cell);
+    cell.classList.add('n'+ Math.floor(Math.random() * 4));
+    cell.addEventListener('mouseup', (e)=>{ pressed = false; })
+    cell.addEventListener('mousedown', (e)=>{ pressed = true; e.target.dispatchEvent(mouseenter); })
+    cell.addEventListener('mouseenter', (e)=>{
+      const el = e.target;
+      if (!pressed || el.classList.contains('chpocked')) return;
+      // play chpock sound
+      if (document.getElementById('soundEnabled').checked){
+        const index = Array.prototype.indexOf.call(el.parentNode.children, el)%10;
+        audioElement.currentTime = 0;
+        panner.pan.setValueAtTime(index/9*2-1, audioCtx.currentTime);; // normalize 0..9 to -1..1
+        gain.gain.setValueAtTime(Math.random(), audioCtx.currentTime);
+        audioElement.play();
+      }
+      var rnd = Math.floor(Math.random() * 4);
+      el.className = 'chpocked y' + rnd;
+    });
+
+  }
+
+  </script>
+</body>
+</html>