Init

Muaath5 · Apr 11, 2024 · 9e8d454 · 9e8d454
commit 9e8d454
Show file tree

Hide file tree

Showing 9 changed files with 263 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,7 @@
+# Falling Sambosas
+
+This game was created after Falling Sambosas problem in [MRB3 Ramadan Contest 1445](https) orignally by [emad234](https://codeforces.com/emad234).
+
+## Algorithm
+
+This problem has two different algorithms, the one used here in the game was the fastest
diff --git a/check.html b/check.html
@@ -0,0 +1,13 @@
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <title>Falling Sambosas - Check</title>
+        <meta name="description" content="Basic offline game based on a MRB3 problem on codeforces">
+        <meta name="keywords" content="mrb3, MRB3, MRB#, test-code, javascript, js, falling-sambosas, plummeting-sambosas, offline-game">
+        <link rel="stylesheet" href="./css/style.css">
+    </head>
+    <body>
+        <h1 class="center">Coming soon..</h1>
+        <h6 class="center">or not coming</h6>
+    </body>
+</html>
diff --git a/css/game.css b/css/game.css
@@ -0,0 +1,34 @@
+div {
+    min-width: 200px;
+    min-height: 20px;
+}
+#sky {
+    background-color: aqua;
+    height: 620px;
+    width: 100%;
+}
+#ground {
+    width: 100%;
+    background-color: chocolate;
+}
+* {
+    box-sizing: border-box;
+    margin: 0px;
+}
+svg {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+}
+
+.sambosa {
+    fill: burlywood;
+    stroke: brown;
+    stroke-width: 1px;
+}
+
+.emad {
+    fill: blue;
+    stroke: brown;
+    stroke-width: 1px;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,15 @@
+.button {
+    text-decoration: none;
+    color: white;
+    background-color: rgb(79, 161, 219);
+    padding: 10px;
+    margin: 10px;
+}
+
+.button:hover {
+    background-color: rgb(91, 181, 246);
+}
+
+.center {
+    text-align: center;
+}
diff --git a/game.html b/game.html
@@ -0,0 +1,47 @@
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <title>Falling Sambosas</title>
+        <meta name="description" content="Basic offline game based on a MRB3 problem on codeforces">
+        <meta name="keywords" content="mrb3, MRB3, MRB#, falling-sambosas, plummeting-sambosas, offline-game">
+        <link rel="stylesheet" href="/FallingSambosas/css/game.css">
+    </head>
+    <body>
+        <div id="sky">
+            <header>
+                <h3>Score: <code id="score"></code></h3>
+                <h3>Time: <code id="time"></code></h3>
+            </header>
+            <svg id="player" style="z-index: 10; top: 600px; left: 0px;" xmlns="http://www.w3.org/2000/svg">
+                <polygon class="emad" points="0,20 20,20 10,0" />
+            </svg>
+        </div>
+        <div id="ground">
+        </div>
+        <div id="x-axis">
+            <span style="position: absolute; left: 0px">0</span>
+            <span style="position: absolute; left: 50px">1</span>
+            <span style="position: absolute; left: 100px">2</span>
+            <span style="position: absolute; left: 150px">3</span>
+            <span style="position: absolute; left: 200px">4</span>
+            <span style="position: absolute; left: 250px">5</span>
+            <span style="position: absolute; left: 300px">6</span>
+            <span style="position: absolute; left: 350px">7</span>
+            <span style="position: absolute; left: 400px">8</span>
+            <span style="position: absolute; left: 450px">9</span>
+        </div>
+
+        <div>
+            <button id="sample" onclick="processInput()">Sample</button>
+            <button id="random" onclick="randomInput()">Random</button>
+            <button id="clear" onclick="clearSambosas()">Clear</button>
+        </div>
+        <div>
+            <label for="moves">Moves:</label>
+            <input display="block" id="moves" type="text" placeholder="[1, 0, -1, -1, 1, 0, 1]">
+            <button onclick="start()">Start Simulation</button>
+        </div>
+
+        <script src="./js/game.js"></script>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <title>Falling Sambosas - Overview</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="Basic offline game based on a MRB3 problem on codeforces">
+        <meta name="keywords" content="mrb3, MRB3, MRB#, falling-sambosas, plummeting-sambosas, offline-game">
+        <link rel="stylesheet" href="./css/style.css">
+    </head>
+    <body>
+        <h1 class="center">Falling Sambosas</h1>
+        <a class="button center" href="/game">Play the game</a>
+        <a class="button center" href="/check">Test your code against a sample</a>
+        <a class="button center" href="/README">Overview about the game</a>
+    </body>
+</html>
diff --git a/js/algo.js b/js/algo.js
@@ -0,0 +1 @@
+// TODO: Write algorithms that solves the problem here
diff --git a/js/config.js b/js/config.js
@@ -0,0 +1 @@
+const RefreshRate = 30; // millisecond
diff --git a/js/game.js b/js/game.js
@@ -0,0 +1,129 @@
+var N = 9;
+var X = [1, 2, 3, 2, 4, 1, 4, 5, 2, 5];
+var Y = [4, 7, 3, 9, 5, 2, 8, 1, 4, 9];
+var PLAY  = [1, 0, 1, 0, 0, 0, 0, 0, 0, 0]; // Either 0, 1, -1
+
+// Constants
+const DELAY = 750;
+const MAX_X = 10;
+const MAX_Y = 10;
+const SPACE = 50; // px
+
+// Const DOM
+const SampleBtn = document.querySelector('#sample');
+const RandomBtn = document.querySelector('#random');
+const ClearBtn = document.querySelector('#clear');
+const MovesInp = document.querySelector('#moves');
+
+const Player = document.querySelector('#player');
+const SKY_BOX = document.querySelector('#sky');
+
+var Level = 0;
+var Position = 0;
+var Sambosas = [];
+var SambosasObj = [];
+var Score = 0;
+
+function movePlayer(diff) {
+    Position += parseInt(diff); 
+    Player.style.left = Position * SPACE + "px";
+}
+
+function setScore(sc) {
+    Score = sc;
+    ScoreLabel.textContent = Score;
+}            
+
+function clearSambosas() {
+    Position = 0;
+    Score = 0;
+    movePlayer(0);
+    setScore(0);
+    Level = 0;
+    TimeLabel.textContent = 0;
+    for (var i = 0; i < SambosasObj.length; i++) {
+        SambosasObj[i].remove();
+    }
+    Sambosas = [];
+    SambosasObj = [];
+}
+
+function processInput() {
+    clearSambosas();
+    for (var i = 0; i < N; i++) {
+        Sambosas.push({x: X[i], y: Y[i]});
+    }
+    MovesInp.value = "1, 0, 1, 0, 0, 0, 0, 0, 0, 0";
+    initialize();
+}
+
+function randomInteger(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+function randomInput() {
+    clearSambosas();
+    for (var i = 0; i < N; i++) {
+        Sambosas.push({x: randomInteger(0, MAX_X), y: randomInteger(0, MAX_Y)});
+    }
+    initialize();
+}
+
+function createSambosa(obj, id) {
+    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    var sambosa = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+    sambosa.classList.add("sambosa");
+    sambosa.setAttribute("points", "0,20 20,20 10,0");
+    svg.id = id + "xx";
+    svg.style.left = obj.x * SPACE + "px";
+    svg.style.top = (MAX_Y-obj.y+1) * SPACE + "px";
+    svg.appendChild(sambosa);
+    return svg;
+}
+
+function initialize() {
+    Level = 0;
+    Position = 0;
+    Score = 0;
+    for (var i = 0; i < N; i++) {
+        oop = createSambosa(Sambosas[i], i);
+        SKY_BOX.appendChild(oop);
+        console.log(oop);
+        SambosasObj.push(document.getElementById(i + "xx"));
+    }
+}
+
+const ScoreLabel = document.querySelector("#score");
+const TimeLabel = document.querySelector("#time");
+function refresh() {
+    movePlayer(PLAY[Level])
+    for (var i = 0; i < N; i++) {
+        if (Sambosas[i].y - Level == 1 && Sambosas[i].x == Position)
+            Score++;
+        if (Sambosas[i].y - Level == 0)
+            SambosasObj[i].style.display = "none";
+        else
+            SambosasObj[i].style.top = ((MAX_Y-Sambosas[i].y+3) + Level) * SPACE + "px";
+    }
+    setScore(Score);
+
+    TimeLabel.textContent = Level;
+}
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+async function start() {
+    RandomBtn.disabled = "true";
+    SampleBtn.disabled = "true";
+    ClearBtn.disabled = "true";
+    PLAY = MovesInp.value.split(",");
+    console.log(PLAY);
+    while (Level <= MAX_Y) {
+        console.log("Played " + Level);
+        refresh();
+        Level++;
+        await sleep(DELAY);
+    }
+    RandomBtn.disabled = "";
+    SampleBtn.disabled = "";
+    ClearBtn.disabled = "";
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// TODO: Write algorithms that solves the problem here