Skip to content

Instantly share code, notes, and snippets.

@Alynva

Alynva/jogo-de-pintar.c

Created February 11, 2017 15:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Alynva/b4afec12709d935790ca9faf0551c24b to your computer and use it in GitHub Desktop.
Save Alynva/b4afec12709d935790ca9faf0551c24b to your computer and use it in GitHub Desktop.
Download ZIP
Jogo de Pintar (Paint) em CGI
Raw
jogo-de-pintar.c
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <errno.h>
#define MAXPIXELSTRING 71910
#define MAXPIXEL 4794
int main() {
int i = 0;
int j, k;
char *dados = NULL;
int ope;
char artName[50];
char fileName[50] = {""};
char theColor[10];
char allPixels[MAXPIXELSTRING];
char coloredPixel[MAXPIXEL][10];
int index;
char aPixel[10];
FILE *fileArt;
dados = getenv("QUERY_STRING");
if (sscanf(dados, "ope=%d&artName=%s", &ope, artName) == 2) {
strcat(fileName, "jogo-de-printar-");
strcat(fileName, artName);
strcat(fileName, ".txt");
if (ope == 0) {
// CRIANDO O ARQUIVO EM BRANCO
fileArt = fopen(fileName, "w");
fprintf(fileArt, "Name=%s\n", artName);
} else if (ope == 1) {
// LEITURA DO ARQUIVO
fileArt = fopen(fileName, "r");
fscanf(fileArt, "Name=%[^\n]\n", artName);
while (!feof(fileArt)) {
fscanf(fileArt, "%i=%[^\n]\n", &index, aPixel);
strcpy(coloredPixel[index], aPixel);
}
}
fclose(fileArt);
} else if (sscanf(dados, "artName=%[^&]&theColor=%%23%[^&]&%s", artName, theColor, allPixels) == 3) {
strcat(fileName, "jogo-de-printar-");
strcat(fileName, artName);
strcat(fileName, ".txt");
// LEITURA DO ARQUIVO
fileArt = fopen(fileName, "r");
fscanf(fileArt, "Name=%[^\n]\n", artName);
while (!feof(fileArt)) {
fscanf(fileArt, "%i=%[^\n]\n", &index, aPixel);
strcpy(coloredPixel[index], aPixel);
}
// Processando novos dados
char *pch = strtok(allPixels, "=on&pixel");
char colorPixel[MAXPIXEL][10];
while (pch != NULL) {
strcpy(colorPixel[i], pch);
i++;
pch = strtok(NULL, "=on&pixel");
}
// Adicionando os novos dados ao vetor
for (j = 0; j < i; j++) {
k = atoi(colorPixel[j]);
strcpy(coloredPixel[k], theColor);
}
// REESCRITA DO ARQUIVO
fileArt = freopen(fileName, "w", fileArt);
fprintf(fileArt, "Name=%s\n", artName);
for (i = 0; i < MAXPIXEL; i++) {
if (strcmp(coloredPixel[i], ""))
fprintf(fileArt, "%i=%s\n", i, coloredPixel[i]);
}
// strcpy(artName, colorPixel[j]);
fclose(fileArt);
}
printf("%s%c%c\n","Content-Type:text/html;charset=UTF-8",13,10);
printf("<html>");
printf("<head>");
printf("<meta charset=\"utf-8\">");
printf("<title>Jogo de pintar</title>");
printf("<link rel=\"stylesheet\" href=\"../jogo-de-pintar.css\">");
printf("</head>");
printf("<body>");
printf("<a href=\"../jogo-de-pintar.html\">Voltar</a>");
printf("<h1>%s</h1>", artName);
perror("Nada");
printf("<form action=\"jogo-de-pintar.cgi\" method=\"get\">");
printf("<input type=\"hidden\" name=\"artName\" value=\"%s\">", artName);
printf("<input type=\"color\" name=\"theColor\" required>");
printf("<input type=\"submit\" value=\"Pintar\">");
printf("<div id=\"tela\">");
for (i = 0; i < 4794; i++) {
printf("<input type=\"checkbox\" id=\"%d\" name=\"pixel%d\">", i, i);
printf("<label for=\"%d\"", i);
if (strcmp(coloredPixel[i], ""))
printf(" style=\"background-color:#%s\"", coloredPixel[i]);
printf("></label>");
}
printf("</div>");
printf("</form>");
printf("</body>");
printf("</html>");
return 0;
}
Raw
jogo-de-pintar.css
* {
background-repeat: no-repeat;
box-sizing: border-box;
}
body {
margin: 0;
background-color: rgba(60,80,112,1);
background-image:
radial-gradient(100% 100%, rgba(255,255,255,.7) 0%, transparent 50%);
background-size:
700px 525px;
background-position:
50% calc(50% + 20px);
text-align: center;
padding: 12px;
}
body * {
font-family: sans-serif;
}
a {
position: absolute;
left: 16px;
text-decoration: none;
color: rgba(255,255,255,.7);
text-transform: uppercase;
background-color: rgba(0,0,0,.2);
padding: 6px;
transition: background-color .6s, color .6s;
}
a:hover {
color: #fff;
background-color: rgba(0,0,0,.5);
}
h1 {
color: white;
margin-top: -.3em;
margin-bottom: .2em;
}
input, select {
margin: 0;
border: 0;
padding: 8px;
cursor: pointer;
box-shadow: 0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.2);
transition: background-color .6s, color .6s;
/*height: 20px;*/
vertical-align: middle;
}
input[type="text"] {
/*padding: 3px;*/
cursor: auto;
}
input[type="color"] {
width: 80px;
padding: 0;
height: 31px;
background-color: #fff;
}
select {
padding: 7px;
background-color: #ddd;
}
input[type="submit"]:hover {
cursor: pointer;
background-color: #666;
color: #ddd;
}
#tela {
position: absolute;
left: calc(50% - 510px);
top: calc(50% - 235px);
height: 470px;
width: 1020px;
line-height: 0;
overflow: hidden;
}
#tela input[type="checkbox"] {
display: none;
}
#tela label {
display: inline-block;
cursor: crosshair;
background-color: #fff;
height: 10px;
width: 10px;
border: solid 1px rgba(0,0,0,.5);
}
#tela label:hover {
background-color: rgba(0,0,255,.05);
border-color: blue;
}
#tela input[type="checkbox"]:checked + label {
background-color: transparent;
border-color: red;
}
Raw
jogo-de-pintar.html
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="refresh" content="1"> -->
<meta charset="utf-8">
<title>Jogo de pintar - Criar ou Abrir obra</title>
<link rel="stylesheet" type="text/css" href="jogo-de-pintar.css">
</head>
<body>
<form action="cgi-bin/jogo-de-pintar.cgi" method="get">
<select name="ope">
<option selected value="0">Criar novo</option>
<option value="1">Abrir</option>
</select><input type="text" name="artName" placeholder="Nome da pintura" autocomplete="off" autofocus required><input type="submit" value="Começar">
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment