Initial commit
This commit is contained in:
@@ -0,0 +1,5 @@
|
|||||||
|
# Files that are not appropriate for git
|
||||||
|
created.txt
|
||||||
|
description.txt
|
||||||
|
title.txt
|
||||||
|
main.zvg
|
||||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
+36
@@ -0,0 +1,36 @@
|
|||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
|
||||||
|
<title>OKEY Assistant</title>
|
||||||
|
|
||||||
|
<meta name="robots" content="noindex">
|
||||||
|
<meta name="description" content="Metin2 Okey Card Game assistant. Win more with your games with computer assisted intel.">
|
||||||
|
<meta name="author" content="Thayol">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
|
<link rel="stylesheet" type="text/css" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main-container>
|
||||||
|
<main-panel>
|
||||||
|
<panel-title>Deck</panel-title>
|
||||||
|
<card-container id="deck">
|
||||||
|
</card-container>
|
||||||
|
</main-panel>
|
||||||
|
<main-panel>
|
||||||
|
<panel-title>Hand</panel-title>
|
||||||
|
<card-container id="hand">
|
||||||
|
</card-container>
|
||||||
|
</main-panel>
|
||||||
|
<main-panel>
|
||||||
|
<button onclick="reset();">Reset</button>
|
||||||
|
<button onclick="document.getElementById('result').innerHTML = getPatterns();">Analize</button>
|
||||||
|
<br>
|
||||||
|
<div style="margin-top: 1.4em;" id="result">?</div>
|
||||||
|
</main-panel>
|
||||||
|
</main-container>
|
||||||
|
<script src="script.js">
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,121 @@
|
|||||||
|
var deck = {};
|
||||||
|
var hand = {};
|
||||||
|
|
||||||
|
var deckElement = document.getElementById('deck');
|
||||||
|
var handElement = document.getElementById('hand');
|
||||||
|
|
||||||
|
var colors = [ "red", "blue", "yellow" ];
|
||||||
|
var handSize = 5;
|
||||||
|
var maxNumber = 8;
|
||||||
|
|
||||||
|
fillDeck();
|
||||||
|
updateUI();
|
||||||
|
|
||||||
|
function cardToId(card) {
|
||||||
|
return card.color + "_" + card.number.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
function cardToElement(card, forDeck = false) {
|
||||||
|
var element = document.createElement("okey-card");
|
||||||
|
element.innerHTML = card.number.toString();
|
||||||
|
|
||||||
|
if (forDeck) {
|
||||||
|
element.setAttribute("onclick", "drawCard('" + cardToId(card) + "')");
|
||||||
|
if (isHandFull()) {
|
||||||
|
element.setAttribute("hand-full", "");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element.setAttribute("onclick", "discard('" + cardToId(card) + "')");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (forDeck && card.drawn) {
|
||||||
|
element.classList.add("drawn-" + card.color);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element.classList.add(card.color);
|
||||||
|
element.setAttribute("clickable", "");
|
||||||
|
}
|
||||||
|
|
||||||
|
return element.outerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isHandFull() {
|
||||||
|
return Object.entries(hand).length >= handSize;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fillDeck() {
|
||||||
|
for (let color of colors)
|
||||||
|
{
|
||||||
|
for (let i = 1; i <= maxNumber; i++)
|
||||||
|
{
|
||||||
|
let card = {
|
||||||
|
color: color,
|
||||||
|
number: i,
|
||||||
|
drawn: false
|
||||||
|
};
|
||||||
|
|
||||||
|
deck[cardToId(card)] = card;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function discard(cardId) {
|
||||||
|
delete hand[cardId];
|
||||||
|
updateUI();
|
||||||
|
}
|
||||||
|
|
||||||
|
function drawCard(cardId) {
|
||||||
|
if (!deck[cardId].drawn && !isHandFull()) {
|
||||||
|
hand[cardId] = deck[cardId];
|
||||||
|
deck[cardId].drawn = true;
|
||||||
|
updateUI();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPatterns(thisHand = null) {
|
||||||
|
if (thisHand == null) {
|
||||||
|
thisHand = hand;
|
||||||
|
}
|
||||||
|
|
||||||
|
let patterns = [];
|
||||||
|
|
||||||
|
for (let i = 1; i <= maxNumber; i++) {
|
||||||
|
sameNumber = 0;
|
||||||
|
for (let card of Object.values(thisHand)) {
|
||||||
|
if (card.number == i) {
|
||||||
|
sameNumber++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sameNumber >= colors.length) {
|
||||||
|
let patternName = i + "-" + i + "-" + i;
|
||||||
|
patterns[patternName] = (i + 1) * 10;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(Object.keys(patterns));
|
||||||
|
|
||||||
|
patterns = patterns.sort((a,b) => (a.last_nom > b.last_nom) ? -1 : ((b.last_nom > a.last_nom) ? 1 : 0));
|
||||||
|
|
||||||
|
return Object.keys(patterns);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateUI() {
|
||||||
|
handElement.innerHTML = "";
|
||||||
|
for (let card of Object.values(hand)) {
|
||||||
|
handElement.innerHTML += cardToElement(card);
|
||||||
|
}
|
||||||
|
|
||||||
|
deckElement.innerHTML = "";
|
||||||
|
for (let card of Object.values(deck)) {
|
||||||
|
deckElement.innerHTML += cardToElement(card, true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
deck = {};
|
||||||
|
hand = {};
|
||||||
|
fillDeck();
|
||||||
|
updateUI();
|
||||||
|
}
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
:root {
|
||||||
|
--background: #121212;
|
||||||
|
--surface: #2c2c2c;
|
||||||
|
--text: #ffffff;
|
||||||
|
--text-disabled: #3d3d3d;
|
||||||
|
|
||||||
|
--background-variant: #ffffff;
|
||||||
|
--surface-variant: #d0d0d0;
|
||||||
|
--text-variant: #000000;
|
||||||
|
|
||||||
|
--primary: #a5d6a7;
|
||||||
|
--primary-light: #d7ffd9;
|
||||||
|
--primary-dark: #75a478;
|
||||||
|
|
||||||
|
--primary-variant: #388e3c;
|
||||||
|
--primary-variant-light: #6abf69;
|
||||||
|
--primary-variant-dark: #00600f;
|
||||||
|
|
||||||
|
--red-card: #ef9a9a;
|
||||||
|
--red-card-variant: #d32f2f;
|
||||||
|
--red-card-background: #9a0007;
|
||||||
|
|
||||||
|
--blue-card: #90caf9;
|
||||||
|
--blue-card-variant: #1976d2;
|
||||||
|
--blue-card-background: #004ba0;
|
||||||
|
|
||||||
|
--yellow-card: #fff59d;
|
||||||
|
--yellow-card-variant: #fbc02d;
|
||||||
|
--yellow-card-background: #c49000;
|
||||||
|
|
||||||
|
--card-inset-shadow: #000000;
|
||||||
|
--card-border-color: #ffffff;
|
||||||
|
|
||||||
|
--card-height: 70px;
|
||||||
|
--card-width: 55px;
|
||||||
|
--card-font-size: 30pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
background-color: var(--background);
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main-container {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
main-panel {
|
||||||
|
display: block;
|
||||||
|
max-width: 550px;
|
||||||
|
margin: 10px auto 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: var(--surface);
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
panel-title {
|
||||||
|
display: block;
|
||||||
|
margin: 0 0 0.67em 0;
|
||||||
|
font-size: 2em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
background-color: var(--red-card-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blue {
|
||||||
|
background-color: var(--blue-card-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.yellow {
|
||||||
|
background-color: var(--yellow-card-variant);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawn-red {
|
||||||
|
background-color: var(--red-card);
|
||||||
|
color: var(--text-disabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawn-blue {
|
||||||
|
background-color: var(--blue-card);
|
||||||
|
color: var(--text-disabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
.drawn-yellow {
|
||||||
|
background-color: var(--yellow-card);
|
||||||
|
color: var(--text-disabled);
|
||||||
|
}
|
||||||
|
|
||||||
|
card-container {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
card-container#deck {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
okey-card {
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: inline-block;
|
||||||
|
width: var(--card-width);
|
||||||
|
height: var(--card-height);
|
||||||
|
line-height: var(--card-height);
|
||||||
|
font-size: var(--card-font-size);
|
||||||
|
border-radius: 5px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-variant);
|
||||||
|
box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 rgba(0, 0, 0, 0);
|
||||||
|
user-select: none;
|
||||||
|
margin: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
okey-card[clickable] {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
okey-card:hover, okey-card:active {
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
okey-card[clickable]:not([hand-full]):hover {
|
||||||
|
box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 var(--card-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
okey-card[clickable]:not([hand-full]):active {
|
||||||
|
box-shadow: inset 0 0 50px -10px var(--card-inset-shadow), 0 0 3px 0 var(--card-border-color), inset 0 0 0 100px var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
okey-card:not([clickable]):active, okey-card[hand-full]:active {
|
||||||
|
transition-duration: 0.7s;
|
||||||
|
background-color: var(--background);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user