index.html

<h1 id="clash-of-code">Clash of Code</h1>
<p>It&#39;s a <a href="https://www.codingame.com/multiplayer/clashofcode">Clash of code</a> inspired multiplayer competitive programing game that runs on a local network. It can be useful in schools where it could be used as a test-taking method.</p>
<p>Before running anything, you need to first install all the dependencies stated in the <code>requirements.txt</code> file using the command below in the terminal of your choice (Skip if you downloaded the compiled files or the release)</p>
<pre><code class="lang-powershell"><span class="hljs-meta"># in terminal</span>
<span class="hljs-symbol">D:</span>\ClashOfCode&gt; pip install -r requirements.txt
</code></pre>
<p>After installing the dependencies, run the <code>Setup.py</code> file to get the shortcuts to <code>ClashOfCode\client\client.py</code>, <code>ClashOfCode\server\server.py</code> and <code>ClashOfCode\server\settings.py</code> on your desktop and you can re-run that file for setting the ip of the server when running the client or you can do the same thing by going in <code>ClashOfCode\client\settings.py</code> and changing it there directly</p>
<p><img src="README_images/shortcuts.png" alt="Shortcuts"></p>
<p>After installing the dependencies, change the directory from <code>ClashOfCode</code> to <code>ClashOfCode\server</code> (as shown below) and you can make a new account using the command shown below (replace <code>username</code> and <code>password</code> with the username and password for the account respectively)</p>
<pre><code class="lang-powershell"><span class="hljs-meta"># in terminal</span>
<span class="hljs-symbol">D:</span>\ClashOfCode&gt; cd server
<span class="hljs-symbol">D:</span>\ClashOfCode\server&gt; python database.py newuser username password
</code></pre>
<p>To initialise the server, you need to make 3 files,</p>
<ol>
<li>Example file : (Named <code>example.py</code>) the file should be of similar format to the one shown below or you can just use the same file as given below</li>
</ol>
<pre><code class="lang-py"><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">solution</span><span class="hljs-params">(input<span class="hljs-number">_</span>)</span></span>:       <span class="hljs-comment"># input goes in the place of "input_"</span>

    <span class="hljs-comment"># This is where you write your code</span>
    <span class="hljs-comment"># (with the indent)</span>
    <span class="hljs-comment"># This file is just for reference and to tell</span>
    <span class="hljs-comment"># what layout your answer should look like</span>

    <span class="hljs-comment"># the final output of your solution has to be returned and not printed</span>

    output = <span class="hljs-string">''</span>
    <span class="hljs-keyword">return</span> output
</code></pre>
<ol>
<li>Solution file : (Named <code>check.py</code>) The function has to be named <code>solution</code> (with the same case), it can also be a lambda function</li>
</ol>
<pre><code class="lang-py"><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">solution</span><span class="hljs-params">(n)</span>:</span>
    <span class="hljs-keyword">return</span> n**<span class="hljs-number">2</span>
<span class="hljs-comment"># or</span>
solution = <span class="hljs-keyword">lambda</span> n: n**<span class="hljs-number">2</span>
</code></pre>
<ol>
<li>Test cases : (Named <code>test_cases.py</code>) You can do anything to generate the test cases, but the final generated test cases should be a list named <code>cases</code> (with the same case)</li>
</ol>
<pre><code class="lang-py"><span class="hljs-attr">cases</span> = range(<span class="hljs-number">1</span>,<span class="hljs-number">21</span>)
</code></pre>
<p>And after making all 3 files, put them in a folder and put the folder&#39;s full path in the <code>folder</code> variable in the <code>server\settings.py</code> file. You also specify the Task description, <code>Mode</code>, <code>Time</code> and the <code>Examples</code> that are to be shown to the player here in the same format as shown below</p>
<pre><code class="lang-py"><span class="hljs-attr">folder</span> = <span class="hljs-string">""</span> <span class="hljs-comment"># Full path of the folder where the files are</span>
<span class="hljs-attr">EXAMPLE_FILE</span> = f<span class="hljs-string">"{folder}\\example.py"</span>
<span class="hljs-attr">SOLUTION_FILE</span> = f<span class="hljs-string">"{folder}\\check.py"</span>
<span class="hljs-attr">TEST_CASES</span> = f<span class="hljs-string">"{folder}\\test_cases.py"</span>

<span class="hljs-attr">MODE</span> = <span class="hljs-string">"Shortest"</span>
<span class="hljs-attr">TIME</span> = <span class="hljs-number">10</span>
<span class="hljs-attr">TASK</span> = <span class="hljs-string">"test task"</span>*<span class="hljs-number">10</span>
<span class="hljs-attr">EXAMPLES</span> = {
    <span class="hljs-number">1</span>: <span class="hljs-number">1</span>,
    <span class="hljs-number">2</span>: <span class="hljs-number">4</span>,
    <span class="hljs-number">3</span>: <span class="hljs-number">9</span>
}
</code></pre>
<p>There are also some presets, which are specified in the same file (<code>server\settings.py</code>), to set a preset, you specify it in the variable <code>PRESET</code>. The available presets are specified in a dictionary named <code>presets</code> in the form of its keys, for example, you can either set <code>PRESET</code> as <code>presets.keys()[1]</code> or <code>&quot;Treasure&quot;</code> to play the Treasure challenge</p>
<pre><code class="lang-py">presets_folder = os.getcwd() + <span class="hljs-string">"\\presets"</span> <span class="hljs-comment"># ClashOfCode\server\presets</span>
presets = {
    <span class="hljs-string">'CardTiming'</span>: f<span class="hljs-string">"{presets_folder}\\CardTiming"</span>,
    <span class="hljs-string">'Treasure'</span>: f<span class="hljs-string">"{presets_folder}\\Treasure"</span>
}
PRESET = <span class="hljs-string">'Treasure'</span> <span class="hljs-comment"># Choose from the presets dictionary</span>
</code></pre>
<p>When you run the <code>ClashOfCode\server\server.py</code> file, the following GUI shows up on the left is the time that is available to the player and on the right is the mode. Press the start button to start the game. (You need at least one player to start)</p>
<p><img src="README_images/server_gui.png" alt="server gui"></p>
<p>When you open up the <code>ClashOfCode\server\server.py</code>, you see the following, you need to enter your username and password to access the main page.</p>
<p><img src="README_images/login.png" alt="login"></p>
<p>After logging in, the following GUI shows up, On the left is the timer, and on the right is the game mode.\
The way you submit your answer is that you write a python file (<code>.py</code>) where your answer is a function named <code>solution</code>.
After you have written your answer, hit the <code>select</code> button and select the file containing your solution and then hit the <code>Finish</code> button, your solution will be sent to the server.</p>
<p><img src="README_images/main_page.png" alt="main page"></p>
<p>After you have finished, the below-shown GUI will show up where you can see your rank and the leaderboard.</p>
<p><img src="README_images/finish.png" alt="finish page">  </p>